Project1

标题: 猪都能学会的菜单教程 [打印本页]

作者: 清澈淌漾    时间: 2022-1-24 12:56
标题: 猪都能学会的菜单教程
算是自己全部功力了

-------------------------------------------------------------------
基础结构

场景   继承类  Scene_MenuBase
文字     txt
图像     sprite
命令行  commacd
值         val
计时器  time
开关     switch
-------------------------------------------------------------------
JAVASCRIPT 代码复制
  1. var LIM=LIM||{};//;
  2. LIM.CS=LIM.CS||{};//;
  3. (function(_){//;
  4.  
  5.    _.Scene =function(){this.initialize.apply(this, arguments);}
  6.    _.Scene.prototype = Object.create(Scene_MenuBase.prototype);
  7.    _.Scene.prototype.constructor = _.Scene;
  8.    /**创建*/
  9.    _.Scene.prototype.create = function () {
  10.       Scene_MenuBase.prototype.create.call(this);
  11.       this.createBackground()
  12.       if(this.Back())this.drawBack(this.Back())
  13.       this.createSwitch()
  14.       this.createTxt()
  15.       this.createSprite()
  16.       this.createCommacd()
  17.       this.createVal()
  18.       this.createTime()
  19.    };
  20.    _.Scene.prototype.update=function () {
  21.       Scene_MenuBase.prototype.update.call(this);
  22.    }
  23.    /**创建背景*/
  24.    _.Scene.prototype.createBackground=function(){
  25.       this._background = new Sprite();
  26.       this.addChild(this._background);
  27.    }
  28.    /**绘制背景*/
  29.    _.Scene.prototype.drawBack=function(back){
  30.       this._background.bitmap =ImageManager.loadUi(back);
  31.       this._background.bitmap.addLoadListener(function () {
  32.          this._background.scale.x = Graphics.boxWidth / this._background.width
  33.          this._background.scale.y = Graphics.boxHeight / this._background.height
  34.       }.bind(this));
  35.    }
  36.    /**类别开关*/
  37.    _.Scene.prototype.createSwitch=function(){
  38.       this.comSwitch=new Map()  //命令行状态;
  39.       this.timeSwitch=new Map() //计时器组状态;
  40.       this.spriteSwitch=new Map() //精灵组状态;
  41.    }
  42.    /**创建文本框*/
  43.    _.Scene.prototype.createTxt=function(){
  44.       this._txt=new Map()
  45.    }
  46.    /**创建精灵*/
  47.    _.Scene.prototype.createSprite=function(){
  48.       this._spr=new Map()
  49.    }
  50.    /**创建命令行*/
  51.    _.Scene.prototype.createCommacd=function(){
  52.       this._com=new Map()
  53.    }
  54.    /**创建值*/
  55.    _.Scene.prototype.createVal=function() {
  56.       this._val=new Map()
  57.    }
  58.    /**创建计时器*/
  59.    _.Scene.prototype.createTime=function() {
  60.       this._time=new Map()
  61.    }
  62.    _.Scene.prototype.Back=function() {
  63.       return null
  64.    }
  65. })(LIM.CS);

-------------------------------------------------------------------



作为继承类
-------------------------------------------------------------------
实例类 继承父类 并修改Back方法
JAVASCRIPT 代码复制
  1. function Scene_Game() {this.initialize.apply(this, arguments);}//;
  2. Scene_Game.prototype = Object.create(LIM.CS.Scene.prototype)//;
  3. Scene_Game.prototype.constructor = Scene_Game//;
  4. Scene_Game.prototype.Back=function() {
  5.     return "bg"
  6. }



加载ui方法  需在img目录下创建ui文件夹  
----------------------------------------------------------------------
ImageManager.loadUi=function(filename,hue)//;
{return this.loadBitmap('img/ui/',filename,hue,true)}//加载ui;
//////////////////////

一个背景为bg 的场景就生成了,下一楼将在这个场景中创建精灵和文本。

作者: 清澈淌漾    时间: 2022-1-24 14:46
创建 文本框类:

JAVASCRIPT 代码复制
  1. var LIM=LIM||{};//;
  2. LIM.CS=LIM.CS||{};//;
  3. (function(_) {//;
  4.     _.Txt = function () {this.initialize.apply(this, arguments);}
  5.     _.Txt.prototype = Object.create(Window_Base.prototype);
  6.     _.Txt.prototype.constructor = _.Txt
  7.     _.Txt.prototype.initialize = function (data) {
  8.         this._data=data
  9.         Window_Base.prototype.initialize.call(this,this.MarginLeft(),this.MarginTop(),this.reWidth(),this.reHeight());
  10.         this.opacity = 0
  11.         this.createBackground()
  12.         if(this.Back())this.drawBack(this.Back())
  13.         this.contents.fontSize=this.fontSize()
  14.         this.contents.textColor=this.textColor()
  15.         this.contents.outlineColor=this.outlineColor()
  16.         this.contents.outlineWidth=this.outlineWidth()
  17.     }
  18.     _.Txt.prototype.createBackground=function(){
  19.         this._background = new Sprite();
  20.         this.addChildAt(this._background,0);
  21.     }
  22.     _.Txt.prototype.drawBack=function(back){
  23.         this._background.bitmap =ImageManager.loadUi(back);
  24.         this._background.bitmap.addLoadListener(function () {
  25.             this._background.scale.x = this._width / this._background.width;
  26.             this._background.scale.y = this._height / this._background.height
  27.         }.bind(this));
  28.     }
  29.  
  30.     _.Txt.prototype.paintText=function(text,line)
  31.     {
  32.         this.contents.drawText(text,this.PaddingLeft(),this.PaddingTop(),this.reWidth()-50,this.Line()*(line||0),this.Align())
  33.     }
  34.     _.Txt.prototype.clear=function(){this.contents.clear()}
  35.  
  36.     _.Txt.prototype.Back=function() {return this._data[0]||null} /**背景*/
  37.     _.Txt.prototype.MarginLeft = function() {return LIM.MATH.lengthNumW(this._data[1]||0)};
  38.     _.Txt.prototype.MarginTop = function() {return LIM.MATH.lengthNumH(this._data[2]||0)};
  39.     _.Txt.prototype.reWidth = function() {return LIM.MATH.lengthNumW(this._data[3]||0)};
  40.     _.Txt.prototype.reHeight = function() {return LIM.MATH.lengthNumH(this._data[4]||0)};
  41.     _.Txt.prototype.PaddingLeft = function() {return this._data[5]||0};
  42.     _.Txt.prototype.PaddingTop = function() {return this._data[6]||0};
  43.     _.Txt.prototype.fontSize = function() {return this._data[7]||18}
  44.     _.Txt.prototype.outlineColor = function() {return this._data[8]||"rgba(0, 0, 0, 0.5)"}
  45.     _.Txt.prototype.textColor = function() {return this._data[9]||"#fff"}
  46.     _.Txt.prototype.outlineWidth = function() {return this._data[10]||4}
  47.     _.Txt.prototype.Align = function() {return this._data[11]||"left"}
  48.     _.Txt.prototype.Line=function() {return 48}    /**行高*/
  49.     _.Txt.prototype.standardPadding = function() {return 0};
  50. })(LIM.CS);

-----------------------------------------------------------
MATH百分比方法
JAVASCRIPT 代码复制
  1. _.lengthNumW=function(num){
  2.       if(isNaN(num))
  3.       {
  4.          let arr=num.split("%")
  5.          let a=parseFloat(arr[0])*0.01*Graphics.width
  6.          let b=parseFloat(arr[1])
  7.          return  a+b
  8.       }
  9.       else return parseFloat(num)
  10.    }
  11.    _.lengthNumH=function(num){
  12.       if(isNaN(num))
  13.       {
  14.          let arr=num.split("%")
  15.          let a=parseFloat(arr[0])*0.01*Graphics.height
  16.          let b=parseFloat(arr[1])
  17.          return  a+b
  18.       }
  19.       else return parseFloat(num)
  20.    }

-----------------------------------------------------------
添加 创建TXT后的 实例方法
JAVASCRIPT 代码复制
  1. function Scene_Game() {this.initialize.apply(this, arguments);}//;
  2. Scene_Game.prototype = Object.create(LIM.CS.Scene.prototype)//;
  3. Scene_Game.prototype.constructor = Scene_Game//;
  4. Scene_Game.prototype.Back=function() {
  5.     return "bg"
  6. }
  7.  
  8. Scene_Game.prototype.createTxt=function(){
  9.     this._txt=new Map()
  10.     let t1=new LIM.CS.Txt(["tile",10,10,932,92,20,30])
  11.     t1.paintText("大本钟下送快递",0)
  12.     t1.paintText("上面摆 下面寄",1)
  13.     this._txt.set(1,[t1])
  14.     this.addChild(t1)
  15. }



如果改变字体颜色,
规范起见 一个文本框 使用一种颜色




作者: 清澈淌漾    时间: 2022-1-24 17:31
创建 精灵类
精灵可以根据正弦做简谐运动,(需要自己配),并且规定做几个周期。

JAVASCRIPT 代码复制
  1. var LIM=LIM||{};//;
  2. LIM.CS=LIM.CS||{};//;
  3. (function(_) {//;
  4.     _.Sprite = function () {this.initialize.apply(this, arguments);}
  5.     _.Sprite.prototype = Object.create(Sprite.prototype);
  6.     _.Sprite.prototype.constructor = _.Sprite
  7.     _.Sprite.prototype.initialize = function(data){
  8.         this._data=data
  9.         Sprite.prototype.initialize.call(this);
  10.         this.scale.x=this.Size()
  11.         this.scale.y=this.Size()
  12.         this._anchor.x=this.AnchorX()
  13.         this._anchor.y=this.AnchorY()
  14.         this.x=this.MarginLeft()
  15.         this.y=this.MarginTop()
  16.         this._anime=[]
  17.         if(data[6]>-1) this.setChartlet(data[6])
  18.         if(data[7]>-1) this.setAnime(data[7])
  19.     };
  20.     _.Sprite.prototype.setAnime=function(index){
  21.         if (this._anime.length > 0) {
  22.             this._anime =[this._anime[0]]
  23.             this._anime[0].times=2
  24.             this._anime[0].time=this._anime[0].cycle*2-this._anime[0].time/2
  25.             this._anime[0].trigger=null
  26.         }
  27.         else this._anime = []
  28.         if(this.Action()&&this.Action()[index]) {
  29.             let data=this.Action()[index]
  30.             this._anime.push({mode:data.mode,method:data.method,time:0,cycle:data.cycle,ter:data.ter,
  31.                 trigger:data.trigger,times:(data.count?data.count+1:0)})
  32.         }
  33.     }
  34.     _.Sprite.prototype.setChartlet=function (index) {
  35.         if (this.Chartlet().length&&index>-1) {
  36.             this.bitmap = ImageManager.loadUi(this.Chartlet()[index % this.Chartlet().length])
  37.             this._refresh()
  38.         }
  39.     }
  40.     _.Sprite.prototype.Trigger=function(code){}
  41.  
  42.     _.Sprite.prototype.Reborn=function(){
  43.         if (this._anime.length > 0) {
  44.             if (this._anime[0].times == 1) {
  45.                 let trigger = this._anime[0].trigger
  46.                 this._anime.splice(0, 1)
  47.                 if (trigger) this.parent.Trigger(trigger);
  48.             }
  49.             else {
  50.                 let num = LIM.MATH.sinNum(this._anime[0].cycle, this._anime[0].time++)
  51.                 num = (this._anime[0].method == 1 ? Math.abs(num) : this._anime[0].method == 2 ? num * num : num)
  52.                 if (Math.abs(this._anime[0].time - (this._anime[0].cycle / 2 * this._anime[0].ter)) < 1) {
  53.                     this._anime[0].times--;
  54.                     this._anime[0].time = 0
  55.                 }
  56.                 this.expressAnime(num, this._anime[0].mode)
  57.             }
  58.         }
  59.     }
  60.     _.Sprite.prototype.expressAnime=function(num,mode) {
  61.         switch (mode) {
  62.             case "shoadow":
  63.                 this._colorTone = [80 * num, 80 * num, 80 * num, 0]
  64.                 break
  65.             case "rote":
  66.                 this.rotation = num*Math.PI
  67.                 break
  68.             case "rote2":
  69.                 this.rotation = num*Math.PI*2
  70.                 break
  71.             case "rote3":
  72.                 this.rotation = num*Math.PI/2
  73.                 break
  74.             case "wobble":
  75.                 this.rotation = num*Math.PI/24
  76.                 this._anchor.y=this.AnchorY()+(num*num)*0.1
  77.                 break
  78.             case "arouse":
  79.                 this.scale.x = num / 2 + 0.5
  80.                 this.scale.y = num / 2 + 0.5
  81.                 break
  82.             case "countDown":
  83.                 this.scale.x = num / 2 + 0.5
  84.                 this.scale.y = num / 2 + 0.5
  85.                 this.alpha = 1 - num
  86.                 break
  87.         }
  88.         this._refresh()
  89.     }
  90.  
  91.     _.Sprite.prototype.Chartlet = function() {return this._data[0]||[]};
  92.     _.Sprite.prototype.MarginLeft = function() {return LIM.MATH.lengthNumW(this._data[1]||0)};
  93.     _.Sprite.prototype.MarginTop = function() {return LIM.MATH.lengthNumH(this._data[2]||0)};
  94.     _.Sprite.prototype.AnchorX = function() {return this._data[3][0]||0.5};
  95.     _.Sprite.prototype.AnchorY = function() {return this._data[3][1]||0.5};
  96.     _.Sprite.prototype.Action = function() {return this._data[4]||[]};
  97.     _.Sprite.prototype.Size = function() {return this._data[5]||1};
  98.  
  99.     _.Sprite.prototype.hide=function () {
  100.         this.alpha=0
  101.         this.active=false
  102.     }
  103.     _.Sprite.prototype.show=function () {
  104.         this.alpha=1
  105.         this.active=true
  106.     }
  107. })(LIM.CS)

/////////////////////////////////////////////////////////////
正弦波
JAVASCRIPT 代码复制
  1. _.sinNum=function(max,i){return Math.sin(Math.PI/2/max*i).toFixed(7)}

/////////////////////////////////////////////////////////////
添加精灵 后的  菜单实例方法
JAVASCRIPT 代码复制
  1. function Scene_Game() {this.initialize.apply(this, arguments);}//;
  2. Scene_Game.prototype = Object.create(LIM.CS.Scene.prototype)//;
  3. Scene_Game.prototype.constructor = Scene_Game//;
  4. Scene_Game.prototype.Back=function() {
  5.     return "bg"
  6. }
  7.  
  8. Scene_Game.prototype.createTxt=function(){
  9.     this._txt=new Map()
  10.     let t1=new LIM.CS.Txt(["tile",10,"100%-112",932,92,20,30,20,"#765fff","#f0b",4])
  11.     t1.paintText("大本钟下送快递",0)
  12.     t1.paintText("上面摆 下面寄",1)
  13.     this._txt.set(1,[t1])
  14.     this.addChild(t1)
  15. }
  16.  
  17. Scene_Game.prototype.createSprite=function(){
  18.     this._spr=new Map()
  19.     let s1=new LIM.CS.Sprite([["gg"],250,250,[0.5,0.5],[{mode:"wobble",cycle:60,trigger:null,times:0,ter:8,method:0}],0.5,0,0])
  20.     this._spr.set(1,[s1])
  21.     this.addChild(s1)
  22.  
  23.     this.spriteSwitch.set(1,true)
  24. }



参数解释
[
["gg"],                    图案组  
250,                       x坐标
250,                      y坐标
[0.5,0.5],               锚点
[{mode:"wobble",cycle:60,trigger:null,times:0,ter:8,method:0}],   动作     mode[动作类型]   cycle[周期速度]    trigger[动作结束触发]  times周期数  ter[峰值]  methgod[正弦波模式]   
0.5,                       缩放
0,                         初始图案
0                          初始动作
]
总之就是能搞出各种效果是了




作者: 清澈淌漾    时间: 2022-1-25 11:50
Commcad这玩意 下面参数太多了,只能吸嗦

首先 Window_Command 继承的是Window_Selectable    这个东西是 一个list

如图
物品 技能 装备  是list内的item  绿框是他的rect


单击[未选择]的item是选择,单击[选择]的item会触发他的symbol
{_index 存的是该com的当前选择}


由makeCommandList添加

  1. Com_1.prototype.makeCommandList = function() {
  2.     this.addCommand("寄汤来咯", "TomChickenGo", true)
  3.     this.addCommand("生异形吗", "Raw", true)
  4. };
复制代码

加入this._list 并在refresh方法后呈现


作者: 微笑的迪妮莎    时间: 2022-1-26 14:11
本帖最后由 微笑的迪妮莎 于 2022-1-26 14:13 编辑

哇~好复杂啊~我选择白piao~

另外想大吼一声,大佬牛批!




欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1