设为首页收藏本站|繁體中文

Project1

 找回密码
 注册会员
搜索
查看: 34889|回复: 30

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

[复制链接]

Lv2.观梦者

梦石
0
星屑
455
在线时间
915 小时
注册时间
2011-5-11
帖子
438
发表于 2012-3-28 09:50:28 | 显示全部楼层 |阅读模式

加入我们,或者,欢迎回来。

您需要 登录 才可以下载或查看,没有帐号?注册会员

x
本帖最后由 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
复制代码
上面的脚本替换原来的那一部分,测试如下图
QQ截图1.png

第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
复制代码
提到下面界面
QQ截图2.png
窗口是好了,但是内容还是金钱的显示。我们现在开始改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.测试运行查看效果如图
QQ截图3.png
测试后得到的是一串数字并不是时间格式: 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)
复制代码
再次测试如图
QQ截图4.png

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

  7. class Window_PlayTime < Window_Base
  8.   #--------------------------------------------------------------------------
  9.   # ● 初始化对象
  10.   #--------------------------------------------------------------------------
  11.   def initialize(x,y,w)
  12.     super(x, y, w, fitting_height(1))
  13.     refresh
  14.   end
  15.   #--------------------------------------------------------------------------
  16.   # ● 刷新
  17.   #--------------------------------------------------------------------------
  18.   def refresh
  19.     contents.clear
  20.     rect = Rect.new(0,0,contents_width,contents_height)
  21.     draw_text(rect,playtime_s,2)
  22.     draw_text(rect,"游戏时间",0)
  23.   end
  24.   #--------------------------------------------------------------------------
  25.   # ● 获取游戏时间的秒数
  26.   #--------------------------------------------------------------------------
  27.   def playtime
  28.     Graphics.frame_count / Graphics.frame_rate
  29.   end
  30.   #--------------------------------------------------------------------------
  31.   # ● 获取游戏时间的字符串
  32.   #--------------------------------------------------------------------------
  33.   def playtime_s
  34.     hour = playtime / 60 / 60
  35.     min = playtime / 60 % 60
  36.     sec = playtime % 60
  37.     sprintf("%02d:%02d:%02d", hour, min, sec)
  38.   end
  39.   #--------------------------------------------------------------------------
  40.   # ● 打开窗口
  41.   #--------------------------------------------------------------------------
  42.   def open
  43.     refresh
  44.     super
  45.   end
  46. end
复制代码
本次讲角结束。
预告:下次讲解,上面截图中的状态半身像的制作。
谢谢大家的点击与点评!

评分

参与人数 6星屑 +2091 收起 理由
Vortur + 23 良心啊...正需要这个呢
0newing + 10 虽然说这教程早就有了…………还是点个赞.
Majirefy + 14 相当不错吧。很清楚很明白,也没有恐怖的太.
hcm + 30
月色半人家 + 14
Kimu + 2000 教程发布奖励

查看全部评分

http://rpg.blue/static/image/smiley/yct/A059.gif中国字认识都不到一半,哪的心情学英语呀!
菜鸟飞呀飞 该用户已被删除
发表于 2012-3-28 12:02:56 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

Lv1.梦旅人

梦石
0
星屑
50
在线时间
91 小时
注册时间
2012-3-3
帖子
65
发表于 2012-3-28 22:38:45 | 显示全部楼层
哇,支持帮助过我的大大!!{:2_287:}
我正在研究显示英文地图名的方法,嘿嘿,虽然有点慢……
回复 支持 反对

使用道具 举报

Lv3.寻梦者

虚空人形

梦石
0
星屑
4397
在线时间
2037 小时
注册时间
2011-8-11
帖子
3398

贵宾

发表于 2012-3-29 11:17:21 | 显示全部楼层
是不错的界面啊,就是照这方法做,一旦角色超过一定人貌似显示就会BUG了(不知是我操作错误还是……)
可是一旦修改宽度让一大堆角色排在一排就显得不协调了,每个都太窄的话(事实上最多时有8人)。
想向LZ请教一下这种情况在不改动数据库的情况下该怎么处理较好。
未命名.png
回复 支持 反对

使用道具 举报

Lv1.梦旅人

番茄

梦石
0
星屑
49
在线时间
296 小时
注册时间
2010-7-4
帖子
424
发表于 2012-3-29 12:28:25 | 显示全部楼层
哦哦……第三蛋出来了=w=要是早点出就好了TAT
支持一下
要是早…………一个星期的话……就能剩下我3,4天的自学了Orz

要不我直接下面将怎么添加菜单背景?
回复 支持 反对

使用道具 举报

Lv1.梦旅人

梦石
0
星屑
92
在线时间
468 小时
注册时间
2011-9-1
帖子
404
发表于 2012-4-1 18:56:26 | 显示全部楼层
LZ,图呢?
男人不懂永远月经的痛,就像女人永远不懂蛋疼的痛
回复 支持 反对

使用道具 举报

Lv1.梦旅人

梦石
0
星屑
50
在线时间
99 小时
注册时间
2012-3-11
帖子
74
发表于 2012-4-4 19:26:28 | 显示全部楼层
@345912390
您好 请问类似这种情况怎么解决呢?
01.jpg
02.jpg

点评

你去群里问问吧  发表于 2012-4-22 11:20
不知道0 0  发表于 2012-4-22 11:20
也就是调整选择框的大小对吧,另外如何调整横纵排列呢?  发表于 2012-4-22 10:20
Window_MenuStatus 的43行 改成成 (height - standard_padding * 2) / 3  发表于 2012-4-7 19:19
我也遇到这种情况了!请问怎么解决的!我是新人!  发表于 2012-4-7 03:01
回复 支持 反对

使用道具 举报

Lv1.梦旅人

梦石
0
星屑
75
在线时间
1074 小时
注册时间
2012-1-16
帖子
1937
发表于 2012-4-7 17:17:36 | 显示全部楼层
  1. 我也遇到这种情况了!请问怎么解决的!我是新人!
复制代码
我也遇到了!咋么办?

点评

Window_MenuStatus 的43行 改成成 (height - standard_padding * 2) / 3  发表于 2012-4-7 19:19
本人目前已被作业山压死,有事请烧(call)纸(me)……
回复 支持 反对

使用道具 举报

Lv1.梦旅人

梦石
0
星屑
55
在线时间
10 小时
注册时间
2009-4-22
帖子
22
发表于 2012-4-7 18:52:22 | 显示全部楼层
这是个好东西一定要支持一下啊

评分

参与人数 1星屑 -10 收起 理由
忧雪の伤 -10 酱油瓶 谢谢惠顾

查看全部评分

回复 支持 反对

使用道具 举报

Lv1.梦旅人

梦石
0
星屑
50
在线时间
201 小时
注册时间
2012-4-8
帖子
466
发表于 2012-4-22 10:21:07 | 显示全部楼层
还想楼主指教一下如教程所述的纵向排列人物的一个修改
义三国系统更改中,预计长期坑化
好游戏的标准:
创意,完整度,人性化,独立性
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

拿上你的纸笔,建造一个属于你的梦想世界,加入吧。
 注册会员
找回密码

站长信箱:[email protected]|手机版|小黑屋|无图版|Project1游戏制作

GMT+8, 2024-3-29 07:30

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表