Project1

标题: 【新手菜单】第三章 窗口界面布局(UI) [打印本页]
作者: 345912390    时间: 2012-3-28 09:50
标题: 【新手菜单】第三章 窗口界面布局(UI)
本帖最后由 345912390 于 2012-3-28 14:46 编辑

{:2_287:} 我是第一次写教程，不好的地方请指出。
引用前一章地址
啊啊...【新人看这里】一起动手改脚本·第二蛋

1.游戏分辨率
Graphics.resize_screen(544,416)
Graphics.width   和 Graphics.height   分别对应分辨率的两个值 544，416，可以任意脚本中引用
论坛上有很多关于分辨率的，这里就不详说了
传送门：ACE分辨率解放+文字优化+屏蔽F12【20120317更新】http://rpg.blue/thread-216674-1-1.html

2.Scene（场景）
Scene（场景）的作用是容纳一个或多个Window（窗口）
Scene（场景）中建立Window（窗口）的脚本模型如下：
  1. class Scene_B < Scene_A
  2.   #--------------------------------------------------------------------------
  3.   # ● 开始处理
  4.   #--------------------------------------------------------------------------
  5.   def start
  6.     super
  7.     create_A_window
  8.     @B_window = Window_A.new(X,Y,width,height,T1)
  9.     @C_window = Window_C.new(X,Y,width)
  10.      @D_window = Window_D.new
  11.   end
  12.   #--------------------------------------------------------------------------
  13.   # ● 生成窗口@A_window
  14.   #--------------------------------------------------------------------------
  15.   def create_A_window
  16.     @A_window = Window_A.new(X,Y,width,height,T2)
  17.   end
  18. end
复制代码
注解：
X:Window（窗口）在Scene（场景）中的X坐标     
Y:Window（窗口）在Scene（场景）中的Y坐标     
width:Window（窗口）在Scene（场景）中的宽度   
height:Window（窗口）在Scene（场景）中的高度   
T:Scene（场景）传递给Window（窗口）的参数
Window_A：为以存在窗口脚本。在RMVA中可参考Window_ShopBuy
@A_window ：为窗口Window_A在场景Scene_B 中的实例
注：一般不带参数T的窗口脚本在一个场景Scene中不必创建多个实例
@B_window ：也为窗口Window_A在场景Scene_B 中的实例，由于参数T的不同而内容不同。

Window_C：为以存在窗口脚本。在RMVA中可参考 Window_ShopNumber
Window_D：为以存在窗口脚本。在RMVA中可参考WiWindow_Gold

Window_A.new(X,Y,W,H,T1)中new后面参数的意义由窗口脚本Window_A的 def initialize(X,Y,W,H,T1)决定

3。Window（窗口）
一个Window（窗口）只有一个contents（容器）****好像是这样 --！
Window_A的脚本模型
  1. class Window_A < Window_S
  2.   def initialize(X,Y,width,height,T)
  3.     super(X,Y,width,height,T)
  4.     @T= T
  5.   end
  6. end
复制代码
注解：super(X,Y,width,height)中的参数意义与上相同
super语句用决定窗口的位置和大小
在Window（窗口）脚本中还有几个与UI有关的变量分别如下：
line_height：默认值为24。 意义：单行字高
standard_padding：默认值为12。 意义：标准的边框尺寸
fitting_height(line_number)：
contents_width:容器宽度，可以大于窗口宽度width
contents_height:容器高度，可以大于窗口高度height

以上变量可在任何Window（窗口）脚本中直接使用可指定,可以在Window_Base中修改默认值(不建议修改)。
  1.   #--------------------------------------------------------------------------
  2.   # ● 获取行高
  3.   #--------------------------------------------------------------------------
  4.   def line_height
  5.     return 24
  6.   end
  7.   #--------------------------------------------------------------------------
  8.   # ● 获取标准的边距尺寸
  9.   #--------------------------------------------------------------------------
  10.   def standard_padding
  11.     return 12
  12.   end
  13.   #--------------------------------------------------------------------------
  14.   # ● 更新边距
  15.   #--------------------------------------------------------------------------
  16.   def update_padding
  17.     self.padding = standard_padding
  18.   end
  19.   #--------------------------------------------------------------------------
  20.   # ● 计算窗口内容的宽度
  21.   #--------------------------------------------------------------------------
  22.   def contents_width
  23.     width - standard_padding * 2
  24.   end
  25.   #--------------------------------------------------------------------------
  26.   # ● 计算窗口内容的高度
  27.   #--------------------------------------------------------------------------
  28.   def contents_height
  29.     height - standard_padding * 2
  30.   end
  31.   #--------------------------------------------------------------------------
  32.   # ● 计算窗口显示指定行数时的应用高度
  33.   #--------------------------------------------------------------------------
  34.   def fitting_height(line_number)
  35.     line_number * line_height + standard_padding * 2
  36.   end
复制代码
3.contents（容器）
contents（容器）是Window（窗口)加载一个或多个数据的载体
上面以经说了contents_width  和contents_height
现在说另外两个方法变量
self.ox:contents（容器）在Window（窗口)中的X坐标，只作用于本Window（窗口)脚本，可指定。
self.oy:contents（容器）在Window（窗口)中的Y坐标，只作用于本Window（窗口)脚本，可指定。

contents（容器）创建 文本 的常用方法
第1个：draw_text_ex(x, y, text)
X：文本在contents（容器）的X坐标
y:文本在contents（容器）的y坐标
text:文本内容

第2个：draw_text(x,y,width,height, text,n)
X：文本在contents（容器）的X坐标
y:文本在contents（容器）的y坐标
width:文本框的宽度
height:文本框的高度
text:文本内容
n：text在文本框中对齐方式
n=0:左对齐
n=1:居中
n=2:右对齐

contents（容器）加载图片的方法，目前我正在学习中，就不说了。


理解以上内容后，对窗口界面的布局调整应该没有太大的问题了！
早上有事，现在请下半部分

4.实践
通过前面  小镜子前两章讲解，我们得到下面的界面


在上的界面中可以发现，没有看到状态页面。所以我们现在对界面进行调整
着手方向：前面我们改动了Window_MenuCommand而没改Window_MenuStatus，因而得出问题出现在它们的交汇去Scene_Menu
1.在Scene_Menu查寻 Window_MenuStatus出现的相关脚本。
得到
  1. @status_window = Window_MenuStatus.new(@command_window.width, 0)
复制代码
2.查看Window_MenuStatus脚本 的 def initialize 后面参数所代表的意义。修改上面的脚本。
得到
  1. @status_window = Window_MenuStatus.new(0，48)
复制代码
3.F12运行查看，
4.修改Window_MenuStatus脚本页调整状态页面，脚本如下
  1. #--------------------------------------------------------------------------
  2.   # ● 获取窗口的宽度
  3.   #--------------------------------------------------------------------------
  4.   def window_width
  5.     Graphics.width
  6.   end
  7.   #--------------------------------------------------------------------------
  8.   # ● 获取窗口的高度
  9.   #--------------------------------------------------------------------------
  10.   def window_height
  11.     Graphics.height - 96
  12.   end
复制代码
上面的脚本替换原来的那一部分，测试如下图


第5小节 新建一个 Window（窗口)填补上图空白地方
为了简单，直接自制脚本Window_Gold改名为Window_PlayTime
由于要在Scene_Menu调整Window_PlayTime的位置和宽度所以得改动  def initialize的参数
脚本改动如下
  1. class Window_PlayTime < Window_Base
  2.   #--------------------------------------------------------------------------
  3.   # ● 初始化对象
  4. #--------------------------------------------------------------------------
  5.   def initialize(x,y,w)
  6.     super(x, y, w, fitting_height(1))
  7.     refresh
  8.   end
复制代码
按照最上面的Scene（场景）中建立Window（窗口）的脚本模型
我们在Scene_Menu中创建Window_PlayTime 脚本如下
  1.   #--------------------------------------------------------------------------
  2.   # ● 开始处理
  3.   #--------------------------------------------------------------------------
  4.   def start
  5.     super
  6.     create_command_window
  7.     create_gold_window
  8.     create_status_window
  9.     @PlayTime__window=Window_PlayTime.new(160,Graphics.height-48,Graphics.width-160)
  10.   end
复制代码
提到下面界面

窗口是好了，但是内容还是金钱的显示。我们现在开始改Window_PlayTime的内容。
考虑到窗口大小有限，在这里我就让它显示游戏的时间吧！
在这里解释一下，有人会说我都有某某大神时间脚本了。我这里讲的只是一个新人改脚本的一个思路，所以讲的方法
并不高效，不要喷我呀！（伸手党边站这）

思路：
1. 我们刚接触 RM时用到的游戏时间都是从事件编辑器中得到的。事件编辑器中所有事件方法都可以在脚本编辑器
中的Game_Interpreter脚本里 找到对应的def 语句。
2.在Game_Interpreter脚本里查找关键词：游戏时间。就会得到Game_Interpreter的第621行脚本如下
  1. Graphics.frame_count / Graphics.frame_rate
复制代码
3.修改Window_PlayTime 脚本
在Window_PlayTime 脚本中搜索关键词：draw_   
得到脚本行：
  1. draw_currency_value(value, currency_unit, 4, 0, contents.width - 8)
复制代码
然后用上面contents（容器）创建 文本 的常用方法。编写脚本替换上面的语句
  1. draw_text_ex(0,0,Graphics.frame_count / Graphics.frame_rate)
复制代码
4.测试运行查看效果如图

测试后得到的是一串数字并不是时间格式: 00:00:00
所以我们还得修改脚本。
如果 知道把数字换成时间，下面的就不用看了。如果不会就进行下面操作
在脚本编辑器内全局查找关键词：游戏时间
查看与它相关的脚本行，可能得到我们想要的结果。

搜索后得到时间算法脚本
  1. #--------------------------------------------------------------------------
  2.   # ● 获取游戏时间的秒数
  3.   #--------------------------------------------------------------------------
  4.   def playtime
  5.     Graphics.frame_count / Graphics.frame_rate
  6.   end
  7.   #--------------------------------------------------------------------------
  8.   # ● 获取游戏时间的字符串
  9.   #--------------------------------------------------------------------------
  10.   def playtime_s
  11.     hour = playtime / 60 / 60
  12.     min = playtime / 60 % 60
  13.     sec = playtime % 60
  14.     sprintf("%02d:%02d:%02d", hour, min, sec)
  15.   end
复制代码
把上面的脚复制到Window_PlayTime 页内
修改上面改过的脚本
  1. draw_text_ex(0,0,Graphics.frame_count / Graphics.frame_rate)
复制代码
为
  1.     rect = Rect.new(0,0,contents_width,contents_height)
  2.     draw_text(rect,playtime_s,2)
  3.     draw_text(rect,"游戏时间",0)
复制代码
再次测试如图


最后清理Window_PlayTime 页内多余无用的脚本
得到最终脚本如下
  1. #encoding:utf-8
  2. #==============================================================================
  3. # ■ Window_PlayTime
  4. #------------------------------------------------------------------------------
  5. # 　显示游戏时间
  6. #==============================================================================

  8. class Window_PlayTime < Window_Base
  9.   #--------------------------------------------------------------------------
  10.   # ● 初始化对象
  11.   #--------------------------------------------------------------------------
  12.   def initialize(x,y,w)
  13.     super(x, y, w, fitting_height(1))
  14.     refresh
  15.   end
  16.   #--------------------------------------------------------------------------
  17.   # ● 刷新
  18.   #--------------------------------------------------------------------------
  19.   def refresh
  20.     contents.clear
  21.     rect = Rect.new(0,0,contents_width,contents_height)
  22.     draw_text(rect,playtime_s,2)
  23.     draw_text(rect,"游戏时间",0)
  24.   end
  25.   #--------------------------------------------------------------------------
  26.   # ● 获取游戏时间的秒数
  27.   #--------------------------------------------------------------------------
  28.   def playtime
  29.     Graphics.frame_count / Graphics.frame_rate
  30.   end
  31.   #--------------------------------------------------------------------------
  32.   # ● 获取游戏时间的字符串
  33.   #--------------------------------------------------------------------------
  34.   def playtime_s
  35.     hour = playtime / 60 / 60
  36.     min = playtime / 60 % 60
  37.     sec = playtime % 60
  38.     sprintf("%02d:%02d:%02d", hour, min, sec)
  39.   end
  40.   #--------------------------------------------------------------------------
  41.   # ● 打开窗口
  42.   #--------------------------------------------------------------------------
  43.   def open
  44.     refresh
  45.     super
  46.   end
  47. end
复制代码
本次讲角结束。
预告：下次讲解，上面截图中的状态半身像的制作。
谢谢大家的点击与点评！
作者: 菜鸟飞呀飞    时间: 2012-3-28 12:02
提示: 作者被禁止或删除 内容自动屏蔽
作者: Mr丶木头    时间: 2012-3-28 22:38
哇，支持帮助过我的大大！！{:2_287:}
我正在研究显示英文地图名的方法，嘿嘿，虽然有点慢……
作者: hcm    时间: 2012-3-29 11:17
是不错的界面啊，就是照这方法做，一旦角色超过一定人貌似显示就会BUG了（不知是我操作错误还是……）
可是一旦修改宽度让一大堆角色排在一排就显得不协调了，每个都太窄的话（事实上最多时有8人）。
想向LZ请教一下这种情况在不改动数据库的情况下该怎么处理较好。

未命名.png (282.53 KB, 下载次数: 84)

未命名.png
作者: ilmynasan    时间: 2012-3-29 12:28
哦哦……第三蛋出来了=w=要是早点出就好了TAT
支持一下
要是早…………一个星期的话……就能剩下我3,4天的自学了Orz

要不我直接下面将怎么添加菜单背景？
作者: ♂雨    时间: 2012-4-1 18:56
LZ，图呢？
作者: 公牛大冒险    时间: 2012-4-4 19:26
@345912390
您好 请问类似这种情况怎么解决呢？

01.jpg (46.67 KB, 下载次数: 0)

01.jpg

02.jpg (71.88 KB, 下载次数: 125)

02.jpg
作者: 荷包PIG蛋    时间: 2012-4-7 17:17
  1. 我也遇到这种情况了！请问怎么解决的！我是新人！
复制代码
我也遇到了！咋么办？
作者: wangssthao    时间: 2012-4-7 18:52
这是个好东西一定要支持一下啊
作者: 浮云桑    时间: 2012-4-22 10:21
还想楼主指教一下如教程所述的纵向排列人物的一个修改
作者: poiuy12348609    时间: 2012-6-7 16:53
本帖最后由 poiuy12348609 于 2012-6-7 17:19 编辑

看了這一些教程
我眼花了
不知道要改哪一個腳本


還有
改完腳本之後變這樣

作者: 2144rr    时间: 2012-6-8 18:42
完全听不懂
作者: 冰の瑟团    时间: 2012-8-3 18:14
话说从第五小节我就麻木了 竟然发生错误  LZ 把第五小节  清楚化可以不
作者: z2z4    时间: 2012-9-7 09:39
这确定是VA脚本  怎么看都和VA 脚本不一样啊
作者: 永恒宁寂    时间: 2012-9-9 13:33
很不错的教程，虽然有个地方不是说的很详细，但是看了下评论，还是解决了
作者: 946936684    时间: 2012-9-9 16:31
我想问一下就是把@status_window = Window_MenuStatus.new(@command_window.width, 0)改成
01.@status_window = Window_MenuStatus.new(0，48)之后会出现错误是为什么？求解
作者: ′芙兰朵露    时间: 2012-9-17 17:55
关于2.Scene（场景）3Window（窗口）脚本模型放在哪里？
脚本window窗口
第一回：发生 NameError.
uninitialized constant Object::Scene_A
必须要更改游戏分辨率后才能实现么？？
呜呜呜...
作者: ′芙兰朵露    时间: 2012-9-18 07:55
本帖最后由 ′芙兰朵露 于 2012-9-18 12:34 编辑

跳过了.  2.Scene（场景）   3。Window（窗口）
直接做  第5小节 新建一个 Window（窗口)填补上图空白地方
之后还是没有 填补空白...
- -...

.........以上内容无效.....
对照教程4终于完成了的说..原来是理解错了一个地方。导致出现的问题//.\\
太感谢楼主了...
作者: 炫宇    时间: 2012-10-2 04:48
请教一下楼主，我是个新手，弄的横版菜单一切正常，但是屏幕中间部分是空的，没有显示角色。技能，装备，状态都没有选择角色的框。发工程是不可能了，我没办法上网，只能手机上，求教！！是我脚本哪个部分没添加？？
作者: 炫宇    时间: 2012-10-2 04:49
折腾了一晚上了，天都快亮了，求解决啊！！跪谢了。
作者: 炫宇    时间: 2012-10-2 05:21
气死我了，终于知道咋回事了。折腾了一宿没睡觉全是因为菜单窗口滑动脚本。我刚刚把那个删了突然就没问题了。擦
作者: a88953327    时间: 2013-5-1 20:06
这就是传说中的第3章
作者: a88953327    时间: 2013-5-1 21:03
如图，没有那排列..怎么弄...
作者: 不知明月来相照    时间: 2013-8-12 14:33
楼主这是怎么回事←←
作者: Bakkkt    时间: 2013-11-12 18:54
求问为什么我做出来状态还是横向的
作者: 青春永别    时间: 2014-2-14 22:58
本帖最后由 青春永别 于 2014-2-14 22:59 编辑

请问一下在Window_Gold改名为Window_PlayTime后Window_Message出现错误分别是92.93.94.95.96行出现错误```怎么办啊{:2_254:}
作者: 鲁路修CCVV    时间: 2014-5-8 09:12
如图，请问怎么解决下

作者: 484123678    时间: 2014-10-30 06:50
我把@status_window = Window_MenuStatus.new(@command_window.width, 0)

改成
@status_window = Window_MenuStatus.new(0，48)再按F12测测试就提示改过的脚本错误了，希望解决我的问题
作者: a1071827111    时间: 2016-3-27 18:15
hcm 发表于 2012-3-29 11:17
是不错的界面啊，就是照这方法做，一旦角色超过一定人貌似显示就会BUG了（不知是我操作错误还是……）
可是 ...

这章修改菜单的时候你有出现错误吗 就是这个uninitialized constant Object::Scene_A
作者: a344343738    时间: 2018-9-4 08:41
支持
作者: LakeBlue    时间: 2021-8-9 22:22
照着一步步做完了，非常感谢！



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