【新手菜单】第三章 窗口界面布局(UI)

345912390

{: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. #==============================================================================
   
7. 
   
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
    

复制代码

本次讲角结束。
预告：下次讲解，上面截图中的状态半身像的制作。
谢谢大家的点击与点评！

Mr丶木头

哇，支持帮助过我的大大！！{:2_287:}
我正在研究显示英文地图名的方法，嘿嘿，虽然有点慢……

hcm

是不错的界面啊，就是照这方法做，一旦角色超过一定人貌似显示就会BUG了（不知是我操作错误还是……）
可是一旦修改宽度让一大堆角色排在一排就显得不协调了，每个都太窄的话（事实上最多时有8人）。
想向LZ请教一下这种情况在不改动数据库的情况下该怎么处理较好。

ilmynasan

哦哦……第三蛋出来了=w=要是早点出就好了TAT
支持一下
要是早…………一个星期的话……就能剩下我3,4天的自学了Orz

要不我直接下面将怎么添加菜单背景？

♂雨

LZ，图呢？

公牛大冒险

@345912390
您好 请问类似这种情况怎么解决呢？

荷包PIG蛋

1. 我也遇到这种情况了！请问怎么解决的！我是新人！

复制代码

我也遇到了！咋么办？

wangssthao

这是个好东西一定要支持一下啊

浮云桑

还想楼主指教一下如教程所述的纵向排列人物的一个修改