malody吧 关注:14,343贴子:53,471

[图文教程] UIS 从入门到精通

只看楼主收藏回复

Malody 2.0中实装了新的UIS系统, 相信大家都还不是很理解. 这里提供一篇入门教程, 持续更新中.
1. UIS 是什么
UIS是Malody提供的一种自定义皮肤的脚本, 这是一种任何人都可以直接编辑的文件, 通过编辑这个文件, 可以实现对Malody的play界面的极高自由度的订制, 比如控制note, combo数字, 血条的外观, note运动的方向, 还可以增加任意多个元件.


IP属地:广东1楼2015-11-24 23:48回复
    我们回到LoveLive这个目录, 新建一个文本文件叫做script-key-4K.mui, 注意如果你的电脑不显示文件后缀名, 你需要先在电脑文件夹选项中设置显示后缀名, 这样方便给文件取名时, 避免默认后缀是txt 的情况.
    正确 script-key-4K.mui
    错误 script-key-4K.mui.txt
    另外要注意4K的K是大写的.
    好了, 然后把下面这些东西抄进这个文件里, 保存一下, 我们后面会将里面每一行的含义

    然后回到游戏, 任意打开一个4K谱, 如果一切正常, 你会看到.

    除了note什么都没有呢, 太单调了. 我们来加点装饰.


    IP属地:广东3楼2015-11-25 00:04
    回复
      不过在继续教程之前, 你肯定会刚才抄的那一段内容有点好奇了, 到底是什么意思呢. 由于UIS参数众多, 但多数情况下最皮肤并不需要了解全部, 在这里全部讲出来也会过于枯燥, 所以我决定用多少讲多少, 有需要的可以参考UIS参考手册 http://m.mugzone.net/wiki/1778
      在上面那个文件中, 我们写了5段内容, 分别是note-[1,2,3,4] note-1 note-2 note-3和note-4
      字面意思, 就是定义note的外观, 其中note-1 表示在第一个轨道的note的外观, note-2表示第二个轨道的note, 3和4就同理了.
      在实际中, 我们的note并不会每个轨道都完全不同, 他们有些外观是相似的, 所以UIS提供一种批量定义的方式, 就是写成note-[1,2,3,4] 这样, 等同于同时定义1-4的note外观
      在note的定义中, 紧跟着的是tex, tex2和tex3 这三个属性, 后面写了一个文件名, 这3个文件就在LoveLive目录中, 找到他们, 他们长这样:
      tex.png

      tex2.png

      tex3.png

      刚才你已经见过实际运行效果了, 很容易辨认, 他们就是note图. 你可以更换tex属性的文件名, 看看会有什么变化


      IP属地:广东4楼2015-11-25 00:12
      回复
        接下来定义的是size和size2, size=10,10 表示这个note在出现的地方是10x10的尺寸, size2=134,134表示note在被打击的地方是134x134尺寸.
        UIS支持多种尺寸的写法, 你可以写size=10,10 也可以写size=10px,10px, 也可以写size=10%,10%, 每种写法表达的含义不一样. 10px表示这个尺寸是精确的10个像素, 10%表示这个尺寸是Malody游戏窗口尺寸的10%, 而不带单位的10 表示10个自适应单位.
        什么叫自适应单位呢? 因为Malody会运行在各种分辨率下, 有人是1024*768的窗口, 有人是1920*1080的全屏. 如果想让元素跟窗口尺寸自动缩放要怎么办呢?
        你可能想到了用百分比的写法. 但是要注意宽度方向的百分比是跟随窗口宽度变的, 而高度方向的百分比是跟窗口高度, 所以当你写50%,50%的时候, 得到的其实是一个和窗口形状一样的长方形. 如果你想要一个刚好是窗口高度一半的正方形, 你就需要使用这种自动缩放写法了.
        了解到这里就足够了, 你可能觉得这一段字有点多而跳过了, 不过没关系, 后面用到的地方还会再讲.


        IP属地:广东5楼2015-11-25 00:25
        回复
          to be continue..


          IP属地:广东6楼2015-11-25 00:25
          回复
            支持开源哥


            来自iPhone客户端7楼2015-11-25 06:56
            回复
              滋词


              IP属地:河南来自Android客户端9楼2015-11-25 10:40
              回复
                回家学习一下做个ui
                把收入从-50000增到-49999


                IP属地:广东来自Android客户端10楼2015-11-25 13:06
                回复
                  继续课程
                  在note-[1,2,3,4]中, 紧接着size, 我们定义了anchor和pos. anchor指的是图片定位的基点, 可以写0到8的数字. 这里并不打算讲0-8分别有什么用, 算作一个作业, 请把下面这一段加到脚本中, 进入游戏观察效果:

                  然后修改anchor的值从0-8, 再观察效果.
                  说到pos, 这是note的一个重要属性, 他代表了note出现的位置. 比如上面我们定义了pos=50%,500 那么前面的50%代表了在水平方向居中, 而500代表了在垂直方向, 大概非常接近屏幕顶部的地方. 也就是note会从屏幕中间偏上的地方出来.
                  那么note应该朝什么地方飞呢? 你可能注意到效果图上4个note运动的方向都不一样, 显然这不能再使用批量定义的方法来描述了, 所以在接下来的地方, 我们分别对note-1 到note-4描述了一个叫pos2的属性, 这个属性就代表了note将要运动的方向, 准确的说, 是这个轨道的note将在什么地方被判定.


                  IP属地:广东11楼2015-11-26 00:12
                  回复
                    这个好评下次练LL就不用LLpracise了。顺便问句,可以实现像LL那样长按最后有打击音吗


                    IP属地:英国来自iPhone客户端13楼2015-11-26 17:13
                    收起回复
                      好了, 我们的皮肤已经可以显示note了. 但要在什么地方打击呢, 所以我们来加入打击位置的图.
                      打开你的皮肤目录, 可以看到9个鬼畜全明星的头像, 这就是我们要放上去的打击图. 当然你也可以换成你喜欢的素材.
                      首先是左边第一个轨道的打击位置.
                      你可能注意到, 我们在描述note的时候, 写了一个note-1 这个名字, 那么打击图的名字叫什么呢. 这里你需要知道在UIS中, 分为固定元件和自定义元件, 固定元件代表了Malody内置的一些东西, 比如note, combo数字之类的, 这些元件有固定的名字.
                      此外, 你还可以自定义元件, 这些元件没有规定的名字, 但必须以下划线开头.
                      好了, 我们把这个打击图叫做 _hitcircle-1吧. 你也可以取别的名字, 但别忘了后面的-1, 一会我们还有-2 -3 -4呢.
                      像这样写:

                      代表了, 我们要用geping这张素材, 大小是126x126, 放在pos这个位置上, 居中对齐.
                      这个50%-379 是什么鬼呢? 刚才定义note的时候也出现了. 这里UIS的位置和尺寸指定是支持加减法的, 我们不是有三种尺寸写法吧, 你可以混用这三种来计算出任意你想要的数字, 这里就是50%居中, 再向左379个单位长度的地方
                      好了, 进入游戏, 你会看到这个图准确的出现在第一轨道的打击位置上.
                      那么仿照这个写法, 你应该可以写出其他3个轨道的打击圈.


                      IP属地:广东14楼2015-11-27 01:25
                      回复
                        打开谱子会闪退怎么办


                        IP属地:广东15楼2015-11-28 13:32
                        收起回复
                          继续
                          目前为止, 你应该能看到这样的东西

                          如果你迫不及待的进入play的话, 是可以用键盘玩的. 但是这样的皮肤一般用触屏玩才爽, 然而当你把这皮肤放到手机, ipad里时, 会发现, 如果你怎么按, 都是miss.
                          那是因为你目前添加到UIS里的图,都仅仅是图片而已, 他们不代表任何意义, Malody也不知道按到哪里算打击. 所以UIS提供了一个触摸区域定义的写法, 如下:

                          解释一下, 在这一段中, 你描述了4个rect(区域), 每个rect有4个参数, 也许你已经发现了每个rect的前2个参数就是之前写过的note的pos2, 那么78是什么呢?
                          一般触摸区域是一个范围, 这个范围可能是一个矩形区域, 也可能是一个圆形, 或者一个别的形状. 这里我们用type=2指定我们要圆形区域, 而78就是这个圆的半径.
                          加上touch段之后, 你可以在手机上顺利的玩这个皮肤了. 但是看不到分数和判定, 也很心慌不是?


                          IP属地:广东16楼2015-11-29 16:39
                          回复
                            我们先来添加combo, combo在屏幕中央偏上一点, 这样写:

                            除了新的属性, 我们一个个讲.
                            我们的combo是一个文字类型的元素, 他会把当前combo的数字变成一串文字显示出来.
                            你可能注意到, 这一段我们没用tex指定素材名, 而是用了frame这个相似的东西. frame代表一些列图片, 比如font-number/0-14 就代表我有15张图, 分别叫 font-number-0.png font-number-1.png 直到 font-number-14.png, 注意必须是png素材, jpg不可以的.
                            既然是文字, 就少不了字号, 这就是fsize. fsize和size是不同的, 你可以同时用这2个属性.
                            接下来又出现了pos2, 这个就不是note那个pos2了, 不同元件里的属性含义是不同的. 这里的pos2等同于字体的间距. 你可以尝试调节这个属性看看效果.
                            最后有一个叫interval的, 含义是文字的变化速度. 请使用1000和0 两个值分别尝试, 观察效果.


                            IP属地:广东18楼2015-11-29 16:48
                            回复
                              接下来是判定, 同样, UIS也为判定专门预留了一个名字, 叫judge, UIS支持每个轨道都使用不同的判定图. 但我们这套皮肤只需要一个判定, 所以这样写:

                              这次都是熟悉的属性了, frame表示一套判定有4张图, 分别对应best, cool, good和miss.


                              IP属地:广东19楼2015-11-29 16:58
                              回复