UIS Manual

User Interface System ( UIS ) Manual

What is UIS

UIS is a designing system that allows players to make their own skin or game-play mode where notes have linear motions. Currently, the KEY, IIDX and DDR mode of Malody is developed by UIS.

Syntax

The UIS document is built by multiple sprites which represent an image, a string or an animation. There are one or more properties of each sprite. For instance:

_sprite

tex=loli.png

size=128,64

The first line is the name of sprite, start with an underscore. The second and the third lines are the properties of this sprite, start with a tab.

Notice:

  • One property per line. There's no need of semicolon to end the line.
  • The length of sprite's name may not exceed 40 characters.
  • Only English characters and numbers allowed.
  • A property could be defined multiple times, the line written later will overlap the one former.

UIS supports group definition of sprite's name, for instance:

_sprite-[1,2,3]

Square bracket after sprite's name after a dash means there are three sprites defined together: _sprite-1, _sprite_2 and _sprite_3. They have same properties.

[Ver. 2.1]: It also could be written as _sprite-[1-3] to define three sprites at the same time as a shorthand.

There are some built-in sprites in UIS as well. These built-in sprites have unique names that do not begin with underscore. The relative features of built-in sprite will be enabled as soon as they are defined in UIS document.

Sprite NameFeatureNotice
noteAppearance of NoteThe number of notes you defined in Key Mode must be same as the number of columns. Group definition is supported here
keyAppearance of KeyNot necessary
hitAnimation when note is hitNot necessary
pressAnimation between key is pressed and key is releasedNot necessary
judgeJudge sprites when note is hitCould be defined separately for each column, or unified that all columns use same one
score-comboNumber of current comboNot necessary
score-scoreNumber of total scoreNot necessary
score-accNumber of current accuracyNot necessary
score-hpHP BarNot necessary
bgaThe area where BGA will be playedOnly BMS format supports BGA
touchThe mapping between tap positions and columnsMust be defined is UIS support touch screen
progressProgress of game-playNot necessary, only support from ver 2.3

There will be more details about built-in sprites following.

Other than sprites and properties, there are also global commands that are used to set options. These commands are defined at the top of UIS document.

CommandDescription
@apply 3dThe play panel will be set to 3-D Column
@version 2.0.0The UIS document has a version ( i.e 2.0.0 ) requirement, client version lower than the given number may not use it.
@apply soundendThe key-sound at the end of hold note will be enabled
@angle 45When 3-D Column is enable, the angle will be the given number ( i.e 45 degree ) [Supported from 2.3]

Comment is supported in UIS. Lines begin with # will be ignored.

Property List

PropertySyntaxDesciptionNoticeSupported Sprites
textex=my.pngImage of the spritepng, jpg and bmp only, sub folder supportedALL
sizesize=100,100Size of the spriteWidth and Height of sprite, divide by coma. The width or height will be fixed as its origin value when width or height is 0. There are three ways to define the size.ALL
pospos=100,100Position of spriteSame as sizeALL
anchoranchor=0The anchor point of sprite. Value 0 - 8 represent Top-Left, Top-Centre, Top-Right, Centre-Left, Centre, Centre-Right, Bottom-Left, Bottom-Centre, Bottom-RightALL
frameframe=light/0-4Defined a series PNG images required of an animation. The name of images must be written by name-postfix format where postfix is the number of frame, i.e light-0.png to light-4.png means there are four frames of animation "light"Animation
intervalinterval=100Interval of animation's frame, measured by millisecondAnimation
colorcolor=#ef6666Color of sprite, starts with # and follows 6 hex number represent R,G,B separatelyALL
rotaterotate=90Rotate sprite by certain angle based on the anchor pointCounterclockwise, measured by degreeAll
flipflip=1Flip sprite0 for horizontal flip, 1 for vertical flipImage
opacityopacity=90Transparency of spriteRange is 0 to 100 where 0 is totally invisibleALL
zindexzindex=1The order of sprite when multiple sprites are overlapped or stacked0 is the bottom one has lease possible to s, 10 is where the built-in sprite "note" at. Sprites with zindex bigger than 100 will not be affected by 3-D Column optionALL
fsizefsize=40Font sizeSame unit as property "size"Text
partpart=40px,50pxThe stretchable part of a stretchable spritesSee introduction of stretchable spritesStretchable ( Scale )
blendblend=1Blend effect of images1=additive 2=screenImage
texttext=TestingThe content of text spriteText
typetype=1Define the type of spriteSee introduction of sprite typesAll self-defined sprites

Some of the properties, i.e pos, have alternation syntax like pos-2, pos-3, depend on the type of sprites. More details are in the section of sprite type.

Position and Size

There are three ways to define the value of sprite's position and size:

1. Relative size: Number without any unit, like 100. With this syntax, 1 equals to 1/720 of height. For instance, under a resolution of 1280*720, 1 is 1 pixel, but under 1920*1080, 1 equals to 1.5 pixel

2. Percentage: Numbers follow by %, like 50%. Represent the percentage of current resolution's width or height.

3. Absolute: Numbers follow by px, like 20px. Represent exactly 20 pixel in any scenario.

Addition and Subtraction are supported in UIS. For example

pos=50%-4px,50%+10

Represent the x coordinate of sprite is 50% of current screen's width minus 4px, and the y coordinate is 50% of current screen's height plus 10px

Sprite Type

type=0

Normal sprite: an image only.

type=1

Text sprite: a string. Use text property to define the content of this text. Furthermore, use [xxx] to reference the content from current chart:

  • {title}: Title of current chart
  • {artist}: Artist of current chart
  • {creator}: Creator of current chart
  • {version}: Chart's name

type=2

Pure color sprite: a rectangle which color is defined by property "color"

type=3

Animation sprite: a series of images. Use "frame" property to define the images of the animation, and use "interval" to define how fast it's played.

type=4

A stretchable sprite that applies the rule of Scale3, which means only the centre part of a stretchable sprite could be stretched. For example, a sprite which image's size is 100*20, would be transformed to adapt a size of 100*200. With Scale3 rule, only the centre part which is marked by the property "part" will be transformed, while the other parts are kept.

Scale3 sprites may only be transformed horizontally, use "rotate" property with it to make it stretched vertically.

type=5

A stretchable sprite that applies the rule of Scale9. Similar to Scale3, only the centre part marked by "part" property will be transformed. However, It would be stretched both along the horizontal and the vertical.

Built-in Sprites

Built-in sprites have the same properties as normal sprites. To use built-in sprites, add a number postfix with sprite's name to indicate which column the sprite belongs to. For instance, "note-1" refers to the one on column 1. Some sprites need not to indicate the column number.

Plus, there are some unique properties of built-in sprites:

note

tex: The appearance of single-tap note.

type: Types of hold note:

  • When type=1, the appearance of hold note is define by property "tex2", with Scale3 rules.
  • When type=2, the appearance of hold note is defined by the properties "tex" (Head), "tex2"(Body) and "tex3"(End), also applies Scale3 rules at the body part.

toggle: Delay of note. Note will be disappeared when toggle=1. The head of a hold note will be frozen when toggle=2. It could be combined together by syntax toggle=1+2.

pos: Where the note appears

pos2: The position where note could be tapped

size: Size of the note

size2: The size where note could be tapped

key

  • tex: Appearance when key is released
  • tex2: Appearance when key is pressed

hit

It is an animation sprite. Use "frame" property to define the effect when a normal note is hit, "frame2" property to define when a hold note is pressed, and "frame3" property to define when a hold note is released.

press

It is an animation sprite node. Use "frame" property to define when a key is pressed, "frame2" to define when a key is released. "frame2" is not necessary.

judge

Jugde sprite is a special one that type could be alternated. It allows to have only one judge sprite which name is "judge-1" as a global judge sprite applied on all the columns, or multiple judge sprites which names are "judge-1" to "judge-n", where n equals to the number of columns.

type of judge sprite: there are multiple ways to define the type of judge sprite.

  • when "type=1", the judge sprite is considered as an image. Since there are four types of judgement result in Malody, which are "Best", "Cool", "Good", "Miss", it requires four images assigned to the property "frame"
  • when "type=2", the judge sprite is considered as an image plus number, where the number is amount of current judgement result. Assigning images of number to the property "frame2" to show this amount.
  • when "type=3", the judge sprite is considered as an animation. With this type, it requires four animations assigned to properties "frame-1", "frame-2", "frame-3" and "frame-4", refers to four judgement result separately.

score-combo|score-score|score-acc

These three sprites are numbers only

  • frame: The number images, refer to 0 - 9, percentage, comma, minus, plus, and multiply symbols. 15 images in total
  • interval: The frequency that how fast the numbers change
  • pos2: The distance between adjacent digits, only x value is applied. Be aware , the value here is not absolute distance, but percentage of basic distance where 1 means 100%. Generally, this value should be less than 1

score-hp

type of score-hp : there are multiple ways to define the type of score-hp sprite

  • when "type=0", the hp bar is built by an images, which is assigned to "tex" property. The hp bar image will also vanish from the right to left. "rotate" property could be used here to change the direction of hp bar.
  • when "type=1", the hp bar is built by multiple fragments. There are two images required for fragment, that must be assigned to the property "frame". The first image represent the fragment is full, and the second means the fragment is empty. Property "count" is the amount that how many fragments there are. Property "pos2" is the distance between fragments.

progress

Supported from 2.3

Exactly same as "score-hp"

touch

Define an invisible touch area that will be mapped to columns.

  • type: When "type=1", the touch area is a rectangle. When "type=2", the touch area is a circle.
  • rect: the position and size of each touch area. The first is "rect" that will be mapped to column1, and then "rect2" that will be mapped to column2, up to rect19. The value of rect has four numbers, written as "rect=x,y,w,h", where x,y is the position of touch area, then w,h is the width & height of the rectangle, or the radius of the circle area.

Sign inX

Sign in

Forgot Password? Register

Wait...