【新手菜单】第四章 人物状态页的横向排列(UI)

345912390

看到有人在提问区问到了这个问题，所以教程比计划的早了一点！
预先准备工作：有一个半身像素材，和前三讲的工程。
提供工程：http://pan.baidu.com/share/link?shareid=26813&uk=3843192968   (内有半身像素材）

申明：
1.本教程只适合初学者，大神可无视
2.对已使用了，某某大神的脚本实现了，与其相似功能的可以跳过。
3.本教程如果影响了你现使用的脚本，你可以新建工程，找到教程中提到的脚本页，从新工程中拷贝替换。
4.不提供教程与其它脚本的冲突解决方案。

教程的最终效果图


正课:
  在 小镜子的第二章中到讲了，Window_MenuCommand的横向解决方法。也许就会有人效仿第二章的做法，
修改Window_MenuStatus的父类。
  呵呵，如果你换了，那么你就很可能改到上图显示的样子，但是实际上点击人物却不能进入单个人物页。
  今天先讲一下理论：就是关于类的继承。
类的继承模型：

1. class A
   
2.   def A_B(x)
   
3.    x+line
   
4.   end
   
5.   def line
   
6.     return 5
   
7.   end
   
8. end
   
9. class B<A
   
10.   def B_A
    
11.       5*A_B(5)
    
12.   end
    
13. end
    
14. class C<A
    
15.     def C_A
    
16.          5*A_B(5)
    
17.   end
    
18.   def line
    
19.     return 20
    
20.   end
    
21. end
    
22. #得出 B_A  -----------50
    
23. #得出 C_A  -----------125

复制代码

上面的代码中
c和B虽然都继承了(父类)A。但其输出 却有很大的不同。其主要原因就是因为C重定义了A中的def line
这也是我们今天修改脚本的第一步
在Window_MenuStatus页面插入以下脚本

1.   #--------------------------------------------------------------------------
   
2.   # ● 获取列数
   
3.   #--------------------------------------------------------------------------
   
4.   def col_max
   
5.     return 4 #跟据分辨率的不同可以改
   
6.   end

复制代码

至于为什么加这段，不解释。实在不懂的，可以将Window_ItemList(物品画面)与Window_ShopBuy(商品的窗口)两个脚本对比一下就应该明白。
测试后效果图


从上图可发现角色都挤在一起，所以我们现在就需要调整每一个角色的信息位置与列宽。
脚本如下 ：

1. #--------------------------------------------------------------------------
   
2.   # ● 获取项目数
   
3.   #--------------------------------------------------------------------------
   
4.   def item_max
   
5.     $game_party.members.size
   
6.   end
   
7.   #--------------------------------------------------------------------------
   
8.   # ● 获取项目的高度
   
9.   #--------------------------------------------------------------------------
   
10.   def item_height
    
11.     height - standard_padding * 2
    
12.   end
    
13.   #--------------------------------------------------------------------------
    
14.   # ● 获取项目的宽度
    
15.   #--------------------------------------------------------------------------
    
16.   def item_width
    
17.     (width - standard_padding * 2 + spacing) /col_max - spacing
    
18.   end
    
19.   #--------------------------------------------------------------------------
    
20.   # ● 获取行间距的宽度
    
21.   #--------------------------------------------------------------------------
    
22.   def spacing
    
23.     return 0
    
24.   end
    
25.   #--------------------------------------------------------------------------
    
26.   # ● 绘制项目
    
27.   #--------------------------------------------------------------------------
    
28.   def draw_item(index)
    
29.     actor = $game_party.members[index]
    
30.     enabled = $game_party.battle_members.include?(actor)
    
31.     rect = item_rect(index)
    
32.     draw_item_background(index)
    
33.     draw_actor_face(actor, rect.x, rect.y, enabled)
    
34.     draw_actor_name(actor,rect.x, rect.y+96)
    
35.     draw_actor_class(actor,rect.x, rect.y+96+line_height*1)
    
36.     draw_actor_icons(actor,rect.x,rect.y+96+line_height*2)
    
37.     draw_actor_level(actor,rect.x, rect.y+96+line_height*2)
    
38.     draw_actor_hp(actor,rect.x, rect.y+96+line_height*3)
    
39.     draw_actor_mp(actor,rect.x,rect.y+96+line_height*5)
    
40.     draw_actor_tp(actor,rect.x,rect.y+96+line_height*6)
    
41. end

复制代码

上面的脚本有些def在Window_MenuStatus页面本来就有。所以 已存在的就替换掉，没有的就加进去。
测试效果图

到了这一步大致上看状态页的横向排列脚本是写玩。但是如果你的队伍里的人数超过4 人时就会出现翻页的问题。
这下是很多初学者没法解决的地方。
  好了，我们再重新回到开头。在本文的开头，我提到了有人会用 小镜子的第二章中到讲的方法，修
改Window_MenuStatus的父类为Window_HorzCommand来达到横排的效果，其实也真的可以达到所相要的显
示效果。
  由此我们就可参考Window_HorzCommand脚本来达到我们想要的目的。要参考，我认为首先就要看它所继承的父类
有没有相关连地方。对比结果如下：
   Window_MenuStatus < Window_Selectable
     Window_HorzCommand < Window_Command< Window_Selectable
由上我们可以看到
Window_HorzCommand为Window_Selectable的二级子类。
Window_MenuStatus为Window_Selectable的一级子类。
通过Window_HorzCommand与Window_Command的脚本对比。我们可以发现在这两个脚本中都重定义了
Window_Selectable的 光标在画面范围 与之相关的脚本。而我们现在需要解决的翻页问题就是与 光标在画
面范围 有关，所以我们可以将Window_HorzCommand脚本中与光标有关的脚本复制到Window_MenuStatus
的脚本中，通过测试来对比前后两个界面的差别。
光标有关的脚本如下

1. #--------------------------------------------------------------------------
   
2.   # ● 获取首列位置
   
3.   #--------------------------------------------------------------------------
   
4.   def top_col
   
5.     ox / (item_width + spacing)
   
6.   end
   
7.   #--------------------------------------------------------------------------
   
8.   # ● 设置首列位置
   
9.   #--------------------------------------------------------------------------
   
10.   def top_col=(col)
    
11.     col = 0 if col < 0
    
12.     #col = col_max - 1 if col > col_max
    
13.     self.ox = col * (item_width + spacing)
    
14.   end
    
15.   #--------------------------------------------------------------------------
    
16.   # ● 获取尾列位置
    
17.   #--------------------------------------------------------------------------
    
18.   def bottom_col
    
19.     top_col + col_max - 1
    
20.   end
    
21.   #--------------------------------------------------------------------------
    
22.   # ● 设置尾列位置
    
23.   #--------------------------------------------------------------------------
    
24.   def bottom_col=(col)
    
25.     self.top_col = col - (col_max - 1)
    
26.   end
    
27.   #--------------------------------------------------------------------------
    
28.   # ● 确保光标在画面范围内滚动
    
29.   #--------------------------------------------------------------------------
    
30.   def ensure_cursor_visible
    
31.     self.top_col = index if index < top_col
    
32.     self.bottom_col = index if index > bottom_col
    
33.   end
    
34.   #--------------------------------------------------------------------------
    
35.   # ● 获取项目的绘制矩形
    
36.   #--------------------------------------------------------------------------
    
37.   def item_rect(index)
    
38.     rect = super
    
39.     rect.x = index * (item_width + spacing)
    
40.     rect.y = 0
    
41.     rect
    
42.   end
    
43.   #--------------------------------------------------------------------------
    
44.   # ● 获取对齐方向
    
45.   #--------------------------------------------------------------------------
    
46.   def alignment
    
47.     return 1
    
48.   end
    
49.   #--------------------------------------------------------------------------
    
50.   # ● 光标向下移动
    
51.   #--------------------------------------------------------------------------
    
52.   def cursor_down(wrap = false)
    
53.   end
    
54.   #--------------------------------------------------------------------------
    
55.   # ● 光标向上移动
    
56.   #--------------------------------------------------------------------------
    
57.   def cursor_up(wrap = false)
    
58.   end
    
59.   #--------------------------------------------------------------------------
    
60.   # ● 光标移至下一页
    
61.   #--------------------------------------------------------------------------
    
62.   def cursor_pagedown
    
63.   end
    
64.   #--------------------------------------------------------------------------
    
65.   # ● 光标移至上一页
    
66.   #--------------------------------------------------------------------------
    
67.   def cursor_pageup
    
68.   end

复制代码

测试效果如下：

我们可以看到光标是横向移动了，只是有部分角色没显示出来。这个就比较难办。
仔细想想，光标的这一部分脚本应该是没有问题的。那问题出在哪里呢？
呵呵，细心的人可能已经发现了，在页面中间的下方还是有一个小三角。
这样我们就可以考虑下Window（窗口)的contents（容器）部分了。
现在我们再重定义contents的宽度和高度，测试
脚本 如下

1. 
   
2.   #--------------------------------------------------------------------------
   
3.   # ● 计算窗口内容的宽度
   
4.   #--------------------------------------------------------------------------
   
5.   def contents_width
   
6.     (item_width + spacing) * item_max - spacing
   
7.   end
   
8.     #--------------------------------------------------------------------------
   
9.   # ● 计算窗口内容的宽度
   
10.   #--------------------------------------------------------------------------
    
11.   def contents_height
    
12.     item_height
    
13.   end
    

复制代码

效果图如下

横向的脚本就完部完成了

现在说下半身像的问题
准备工作:因为我只有一张4*2 的半身像身像素材Actor1.png，所以上我在工程中所有角色图片都用的Actor1有头像。
如图：

半身像的素材在:教程3\Graphics\HalfBody目录命名为Actor1.png
说明一下半身像的名字一定要与角色图片用的Actor1名字相同。
步骤1：根据RM脚本的命名规则可以在Window_MenuStatus中找到

1. draw_actor_face(actor, rect.x, rect.y, enabled)
   

复制代码

我们全局搜索关键字：draw_actor_face
得到Window_Base的  def draw_actor_face(actor, x, y, enabled = true)函数。
我们复制draw_actor_face函数，更名为draw_actor_HalfBody添加到Window_Base脚本中
脚本如下：

1.   #--------------------------------------------------------------------------
   
2.   # ● 绘制角色半肖像图
   
3.   #--------------------------------------------------------------------------
   
4.   def draw_actor_HalfBody(actor, x, y, enabled = true)
   
5.     draw_HalfBody(actor.face_name, actor.face_index, x, y, enabled)
   
6.   end

复制代码

在draw_actor_face函数中，我们看到它只调用了draw_face方法。
步骤2：我们搜索关键字：draw_face
得到Window_Base的  def draw_face(face_name, face_index, x, y, enabled = true)函数。
我们复制draw_face函数，更名为draw_HalfBody添加到Window_Base脚本中

1.   #--------------------------------------------------------------------------
   
2.   # ● 绘制角色半身肖像图
   
3.   #     enabled : 有效的标志。false 的时候使用半透明效果绘制
   
4.   #--------------------------------------------------------------------------
   
5.   def draw_HalfBody(face_name, face_index, x, y, enabled = true)
   
6.     bitmap = Cache.HalfBody(face_name)
   
7.     rect = Rect.new(face_index % 4 * 96, face_index / 4 * 194, 136, 194)
   
8.     contents.blt(x, y, bitmap, rect, enabled ? 255 : translucent_alpha)
   
9.     bitmap.dispose
   
10.   end

复制代码

由于draw_face函数中用bitmap = Cache.face(face_name)语句。bitmap（位图）的意义我们决定了步骤3。
步骤3：我们在Cache脚本页搜索关键字：face
得到def self.face(filename)函数。
我们复制def self.face(filename)函数，更名为def self.HalfBody(filename)添加到Cache脚本中
脚本如下：

1.   #--------------------------------------------------------------------------
   
2.   # ● 获取角色肖像图
   
3.   #--------------------------------------------------------------------------
   
4.   def self.HalfBody(filename)
   
5.     load_bitmap("Graphics/HalfBody/", filename)
   
6.   end

复制代码

最后我们修改Window_MenuStatus页面中的def draw_item(index)部分
改为

1. draw_actor_HalfBody(actor, rect.x, rect.y, enabled)

复制代码

上面那半身像一部分，我讲的整个过程。只不过是一个由结果逆向推导的思维过和。
测试如下 图

这一讲提供工程下载http://115.com/file/c2uroazw#教程4.zip
也许上面的讲解有错的地方，有就请指出，不要没事就乱喷！

谢谢各位观客。
下次讲解内容为：
回合制网游中的精典系统《跑商》。到那时会有跑商的核心脚本：NPC指定收购物品

补充一下：
有人在说背景的问题，在现在加一段脚本 放在Scene_Menu页面

1.   #--------------------------------------------------------------------------
   
2.   # ● 生成背景
   
3.   #--------------------------------------------------------------------------
   
4.   def create_background
   
5.     @background_sprite = Sprite.new
   
6.     @background_sprite.bitmap =Cache.load_bitmap("Graphics/System/","Menubackground")
   
7.     @background_sprite.color.set(0,0, 0,0)
   
8.   end

复制代码

效果如下

上在的背景脚本好像有点小问题
提供另一种方法：在Scene_Menu中新建一个透明的Window_XX，然后用类似draw_face的函数加入背景

1. class Window_background < Window_Base
   
2.   #--------------------------------------------------------------------------
   
3.   # ● 初始化对象
   
4.   #--------------------------------------------------------------------------
   
5.   def initialize
   
6.     super(0, 0, 544,416)
   
7.     self.opacity = 0
   
8.     refresh
   
9.   end
   
10.   #--------------------------------------------------------------------------
    
11.   # ● 刷新
    
12.   #--------------------------------------------------------------------------
    
13.   def refresh
    
14.     contents.clear
    
15.     bitmap = Cache.load_bitmap("Graphics/System/","Menubackground")
    
16.     rect = Rect.new(0, 0, 544,416)   
    
17.     contents.blt(0,0, bitmap, rect, 255)
    
18.     bitmap.dispose
    
19.   end
    
20. end

复制代码

效果如下


至于窗口透明可在Window_XX的def initialize中加入脚本

1. self.opacity = 0

复制代码

有人反应脚本有问题，所以重新改了一下

上寒汛

如果想要全身像，然后我需要把立绘放在名字hp等等这些的下面应该怎么处理？

不知明月来相照

楼主，我跟着你的做法弄了一遍，可是我弄了之前的两部就可以弄全部人了，弄了全部就不能显示全部队员了，还有，现在只能显示主角自己的技能和状态怎么办？

a88953327

第3章在哪.......死活找不到......

a89672341

請問如果把遊戲畫面變成



橫向,然後不需要半身圖,只是人物肖像圖排位要中間點(像右移動比較中間)



也可以顯示下一頁

請問要怎麼弄呢？
麻煩大大教導一下愚蠢的新手晚輩

奉命在先

115下不了啊，不知道楼主能不能把那个显示halfbody的功能和这个日站横向菜单脚本结合一下，还有halfbody的长宽怎么设置：http://www4.plala.or.jp/findias/ ... ce_rgss3/index.html

abc1236762

不好意思，請問一下
那個遊戲時間是怎麼做出來的
是否能提供腳本或教程？

御之嵐

抱歉  問一下

你最後的  透明背景  怎麼用出來的

我看了半天 還是 不太懂

能不能 簡單 詳細  的 告訴我呢 ?!

dukesward

目测是好物（虽然咱看不懂。。建议lz把前三章的链接扔出来方便大家系统学习~

xiaoshun23

我是超级菜鸟！~原先第三章很多不懂的~现在明白了很多！真心谢谢楼主！
可对于背景的还不是很了解！继续琢磨！