srpgstudio吧 关注:1,207贴子:4,640
  • 24回复贴,共1

教程 关于UI界面的改造

只看楼主收藏回复

本人使用的版本是1.098
怎么说呢,基于各位吧友的帮助,现在整套UI做了一半了,我觉得应该整理一下,仅供参考。
先是 封面的改造

这里是选择想要的图片做封面
对应的代码文本 scene-title.js
在这一块可能大家比较关心的是 选项栏的位置 搜索 _drawScrollbar 调整this._scrollbar.drawScrollbar(x, y)
中x,y 就可以调整位置 比如this._scrollbar.drawScrollbar(x+370, y+20)这样


IP属地:广东1楼2017-01-17 15:36回复
    第二块 关于unitmenu菜单的调整
    对应脚本 screen-unitmenu-10.4.js
    如下 菜单

    嘛,不是特别好看
    设计一下啊(借用 左手の祭 的设计)
    嘛,效果好很多
    我简单介绍下做法
    首先导入背景图


    IP属地:广东2楼2017-01-17 15:46
    回复

      然后开始动代码

      依次对应 脸图 姓名 职业 等级 血量 和····不明物体
      如果想要具体调整
      比如血条 ctrl+f 搜索 drawUnitHP 可以找到对应的脚本(门外汉也可以调整血条长短 HP显示位置 间距等)
      总之可以根据自己的背景调整(顺便说一下,上图出了所有的框框以及文字都是做在背景图上的)


      IP属地:广东3楼2017-01-17 15:55
      回复
        然后 如图

        调整好这些数值的坐标,对应好自己的背景图
        对应好后要去除系统自带的框框
        先调整备用窗口UI

        图片去除后
        CTRL F 搜索getWindowTextUi
        和getWindowUI: function()
        改成这个样子
        getWindowTextUI: function() {
        return root.queryTextUI('backlog_window');
        },
        getWindowUI: function() {
        return root.queryTextUI('backlog_window').getUIImage();
        },
        这两行 适用于替换默认UI的,
        出于谨慎
        搜索drawWindowContent: function
        比如
        drawWindowContent: function(x, y) {
        y =y+14 //全面调整坐标
        this._drawUnitFace(x, y);
        this._drawUnitName(x, y);
        this._drawUnitClass(x, y);
        this._drawUnitLevel(x, y);
        this._drawUnitHp(x, y);
        this._drawFusionIcon(x, y);
        },
        后面加上
        getWindowTextUI: function() {
        return root.queryTextUI('backlog_window');
        },
        getWindowUI: function() {
        return root.queryTextUI('backlog_window').getUIImage();
        },
        要加三处
        这样系统默认的框框就消除了


        IP属地:广东4楼2017-01-17 16:10
        回复
          支援和 攻击数据的两个框框不在 unitmenu 脚本里
          在window-unitsentence.js 中
          搜索
          this.drawAbilityText
          可以找到5个 对应

          调整xy,可以调整位置,如果不需要可以注释掉
          下图是支援窗口的代码,如果懒可以x=x+····这样调整

          最后替换UI消掉默认框
          先搜索getWindowTextUI
          和getWindowUI
          和上面一样改掉
          然后出于谨慎
          每个这种段落里加
          getWindowTextUI: function() {
          return root.queryTextUI('backlog_window');
          },
          getWindowUI: function() {
          return root.queryTextUI('backlog_window').getUIImage();
          },
          (讲道理楼主也是小白)
          ok!这个界面完成了


          IP属地:广东5楼2017-01-17 16:31
          回复
            看见代码就眼痛,不过大佬的确厉害


            IP属地:广东来自iPhone客户端6楼2017-01-18 01:00
            回复
              在此感谢 冰鏡弦月 首先发的教程,我只是在他的基础上有一些自己的深入


              IP属地:广东7楼2017-01-21 13:35
              回复
                接下来先做两个小窗口


                先说下思路,因为背景图很复杂,传统的ui绘制满足不了需要,比如第一个框,属性框在头像上面,头像在背景图上面,分为3个图层,所以需要外部调用。
                我们可能先要使用这个两个脚本 AddStatusWindow.js
                CustomStatusArea.js
                直接放在pugin里就行了
                http://pan.baidu.com/s/1kVhqmA7
                AddStatusWindow.js
                里面,找到并复制这一段
                None30 = {
                Name : 'EP'
                , Material : 'OT_AddStatus'
                , GaugeImg : 'Gauge30.png'
                , GaugeImg2 : 'Gauge30.png'
                , GaugeImgID : 1
                , GaugeImgX : 0
                , GaugeImgY : 0
                , GaugeImgWidth : 220
                , GaugeImgHeight: 22
                , DrawSide : true
                , FontColor : 0x00ffff
                };
                多复制几段 改为 31 32 33 这样啊
                然后\Material 文件夹里 创建OT_AddStatus 文件夹 把要调用的图片放进去,我比较懒用了23 24 25····
                之后
                singleton-rendercontrol 。js

                找到 var UnitSimpleRenderer 这一段


                IP属地:广东8楼2017-01-21 14:00
                收起回复
                  var UnitSimpleRenderer = {//左下角人物窗口
                  drawContent: function(x, y, unit, textui) {
                  var xSrc, ySrc;
                  var destWidth = UIFormat.BIGNUMBER_WIDTH / 10;
                  var destHeight = UIFormat.BIGNUMBER_HEIGHT / 5;
                  var srcWidth = destWidth;
                  var srcHeight = destHeight;//下面是调入 图片22
                  var pic = root.getMaterialManager().createImage(None22.Material, None22.GaugeImg);
                  if (root.isLargeFaceUse() && pic.isLargeImage()) {
                  srcWidth = root.getLargeFaceWidth();
                  srcHeight = root.getLargeFaceHeight();
                  }
                  xSrc = srcWidth;
                  ySrc = srcHeight;//下面是调入 图片23
                  var pic = root.getMaterialManager().createImage(None23.Material, None23.GaugeImg);
                  pic.drawStretchParts(x-84,y-50,destWidth=360, destHeight=200, xSrc, ySrc-20, srcWidth=960, srcHeight=544);
                  this._drawFace(x-26, y, unit, textui);
                  //下面是调入 图片24
                  var pic = root.getMaterialManager().createImage(None24.Material, None24.GaugeImg);
                  pic.drawStretchParts(x-84,y-50,destWidth=360, destHeight=200, xSrc, ySrc-20, srcWidth=960, srcHeight=544);
                  this._drawName(x-20, y-24, unit, textui);
                  this._drawInfo(x-20, y-20, unit, textui);
                  this._drawSubInfo(x-20, y-9, unit, textui);
                  },
                  _drawFace: function(x, y, unit, textui) {
                  ContentRenderer.drawUnitFace(x, y, unit, false, 255);//控制左下角脸图
                  },
                  _drawName: function(x, y, unit, textui) {
                  var length = this._getTextLength();
                  var color = textui.getColor();
                  var font = textui.getFont();
                  x += GraphicsFormat.FACE_WIDTH + this._getInterval();
                  y += 10;
                  TextRenderer.drawText(x, y, unit.getName(), length, color, font);
                  },
                  _drawInfo: function(x, y, unit, textui) {
                  var length = this._getTextLength();
                  var color = textui.getColor();
                  var font = textui.getFont();
                  x += GraphicsFormat.FACE_WIDTH + this._getInterval();
                  y += 40;
                  TextRenderer.drawText(x, y, unit.getClass().getName(), length, color, font);
                  },
                  _drawSubInfo: function(x, y, unit, textui) {
                  var pic = root.queryUI('unit_gauge');
                  x += GraphicsFormat.FACE_WIDTH + this._getInterval();
                  y += 60;
                  ContentRenderer.drawUnitHpZone(x, y, unit, pic);
                  },
                  _getTextLength: function() {
                  return ItemRenderer.getItemWindowWidth() - (GraphicsFormat.FACE_WIDTH + this._getInterval() + DefineControl.getWindowXPadding());
                  },
                  _getInterval: function() {
                  return 10;
                  }
                  };
                  NAME face 这些大家有点英文就就能看得懂了,我是直接x y上改坐标的


                  IP属地:广东9楼2017-01-21 14:05
                  回复
                    然后是 地形窗口
                    map-mapeditor.js
                    中 找到 MapParts.Terrain = defineObject
                    嘛 范例
                    MapParts.Terrain = defineObject(BaseMapParts,//地形窗口
                    {
                    drawMapParts: function() {
                    var x = this._getPositionX();
                    var y = this._getPositionY();
                    this._drawMain(x, y);
                    },
                    _drawMain: function(x, y) {
                    var width = this._getWindowWidth();
                    var height = this._getWindowHeight();
                    var xCursor = this.getMapPartsX();
                    var yCursor = this.getMapPartsY();
                    var terrain = PosChecker.getTerrainFromPos(xCursor, yCursor);
                    var textui = this._getWindowTextUI();
                    var pic = textui.getUIImage();
                    WindowRenderer.drawStretchWindow(x, y, width, height, pic);
                    x += this._getWindowXPadding();
                    y += this._getWindowYPadding();
                    this._drawContent(x, y, terrain);
                    },
                    _drawContent: function(x, y, terrain) {
                    y=y-20
                    var text;
                    var textui = this._getWindowTextUI();
                    var font = textui.getFont();
                    var color = textui.getColor();
                    var length = this._getTextLength();
                    var xSrc, ySrc;
                    var destWidth = UIFormat.BIGNUMBER_WIDTH / 5;
                    var destHeight = UIFormat.BIGNUMBER_HEIGHT / 2;
                    var srcWidth = destWidth;
                    var srcHeight = destHeight;
                    xSrc = srcWidth;
                    ySrc = srcHeight;
                    var pic = root.getMaterialManager().createImage(None25.Material, None25.GaugeImg);
                    pic.drawStretchParts(x-45,y-50,destWidth=192, destHeight=256, xSrc, ySrc, srcWidth=192, srcHeight=256);
                    if (terrain === null) {
                    return;
                    }
                    x += 2;
                    TextRenderer.drawText(x+42, y-5, terrain.getName(), length, color, font);//地形名称
                    y += this.getIntervalY();//闪避的位置
                    this._drawKeyword(x-15, y+2, root.queryCommand('avoid_capacity'), terrain.getAvoid());
                    if (terrain.getDef() !== 0) {//双防的位置
                    text = ParamGroup.getParameterName(ParamGroup.getParameterIndexFromType(ParamType.DEF));
                    y += this.getIntervalY()+7;
                    this._drawKeyword(x-15, y+2, text, terrain.getDef());
                    }
                    if (terrain.getMdf() !== 0) {
                    text = ParamGroup.getParameterName(ParamGroup.getParameterIndexFromType(ParamType.MDF));
                    y += this.getIntervalY()+7;
                    this._drawKeyword(x-15, y+2, text, terrain.getMdf());
                    }
                    },
                    _drawKeyword: function(x, y, text, value) {
                    //ItemInfoRenderer.drawKeyword(x, y, text);
                    x += 45;
                    if (value !== 0) {
                    TextRenderer.drawSignText(x+10, y-3, value > 0 ? ' + ': ' - ');
                    if (value < 0) {
                    // drawNumberにマイナスは指定できないため、ここで調整
                    value *= -1;
                    }
                    }
                    x += 40;
                    NumberRenderer.drawNumber(x, y, value);
                    },
                    _getPartsCount: function(terrain) {
                    var count = 0;
                    count += 3;
                    if (terrain.getDef() !== 0) {
                    count++;
                    }
                    if (terrain.getMdf() !== 0) {
                    count++;
                    }
                    return count;
                    },
                    _getTextLength: function() {
                    return this._getWindowWidth() - DefineControl.getWindowXPadding();
                    },
                    _getPositionX: function() {
                    var dx = LayoutControl.getRelativeX(10) - 54;
                    return root.getGameAreaWidth() - this._getWindowWidth() - dx;
                    },
                    _getPositionY: function() {
                    var x = LayoutControl.getPixelX(this.getMapPartsX());
                    var dx = root.getGameAreaWidth() / 2;
                    var y = LayoutControl.getPixelY(this.getMapPartsY());
                    var dy = root.getGameAreaHeight() / 2;
                    var yBase = LayoutControl.getRelativeY(10) - 28;
                    if (x > dx && y < dy) {
                    return root.getGameAreaHeight() - this._getWindowHeight() - yBase-20;
                    }
                    else {
                    return yBase;
                    }
                    },
                    _getWindowXPadding: function() {
                    return DefineControl.getWindowXPadding();
                    },
                    _getWindowYPadding: function() {
                    return DefineControl.getWindowYPadding();
                    },
                    _getWindowWidth: function() {
                    return 140;
                    },
                    _getWindowHeight: function() {
                    var xCursor = this.getMapPartsX();
                    var yCursor = this.getMapPartsY();
                    var terrain = PosChecker.getTerrainFromPos(xCursor, yCursor);
                    if (terrain === null) {
                    return 0;
                    }
                    return 12 + (this._getPartsCount(terrain) * this.getIntervalY());
                    },
                    _getWindowTextUI: function() {
                    return root.queryTextUI('backlog_window');//使用备用窗口 UI
                    }
                    }
                    );


                    IP属地:广东10楼2017-01-21 14:10
                    回复
                      请问可以给你的1.098和汉化补丁吗


                      IP属地:云南11楼2017-02-07 16:46
                      收起回复
                        遊戲標題的選項不止能調整X.Y位置喔,還能修改選項列與行數
                        腳本『scene-title.js』中尋找『this._scrollbar.setScrollFormation(1, this._commandArray.length)』
                        接著!
                        把this._scrollbar.setScrollFormation(『1』, this._commandArray.length)
                        這個『1』改其他數字也能做修改,例如~改成1→2
                        this._scrollbar.setScrollFormation(2, this._commandArray.length)
                        標題選項會變成並排<並且上下左右鍵都能作用,默認的只有一列垂直,因此只有上下鍵能用>
                        >口 口
                         口 口
                         口

                        假如改成1→5
                        this._scrollbar.setScrollFormation(5, this._commandArray.length)
                        則會變成只有一排的橫向選單<會被強制只有左右鍵能使用,上下鍵鎖住>
                        >口 口 口 口 口
                        (依照你設定的選項,初期只有5個選項,以上頭我有加入戰鬥中途紀錄讀取,因此有六個選項)
                        我就必須要改成6才會有橫向選單的效果
                        this._scrollbar.setScrollFormation(6, this._commandArray.length)


                        IP属地:中国台湾14楼2017-07-31 04:36
                        收起回复
                          谢谢大佬,非常有用


                          15楼2020-07-16 01:45
                          回复
                            = =是不是我漏看了 有没有 UI改变位置的 介绍?


                            IP属地:贵州16楼2020-07-20 22:06
                            收起回复