Project1

标题: 【新手菜单】第四章 人物状态页的横向排列(UI) [打印本页]
作者: 345912390    时间: 2012-3-30 01:07
标题: 【新手菜单】第四章 人物状态页的横向排列(UI)
本帖最后由 345912390 于 2012-11-25 20:09 编辑

看到有人在提问区问到了这个问题，所以教程比计划的早了一点！
预先准备工作：有一个半身像素材，和前三讲的工程。
提供工程：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的宽度和高度，测试
脚本 如下

  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
复制代码
有人反应脚本有问题，所以重新改了一下
作者: alann    时间: 2012-3-30 09:45
接手美……话说接手之后更新快了很多，
不过我还是很期待想第一章预告那样的菜单
LZ也多些一些类似的教程来学习一下吧
作者: Mr丶木头    时间: 2012-3-31 20:40
呃，前面还没学完，这个横向的状态不错，不过不太喜欢半身像， 还是小头像比较好（因为技术问题，画不出半身像……）
哈，支持，学会了加到我的游戏里去，
作者: 狂歌天涯    时间: 2012-4-1 12:38
本帖最后由 狂歌天涯 于 2012-4-1 12:42 编辑

还要请教先生，如何在不同的窗口下加入不同的背景啊？呵呵，我是一个年纪比较大的新人，脚本真的不懂，只是逻辑思维还算可以，我现在只是利用我自己特有的逻辑思维来了解脚本。先行谢过了！
贴上刚完成的一个菜单，呵呵。
作者: tang19990919    时间: 2012-4-7 22:12
55555555555555…………我没有耐心学脚本啊！我现在才12岁，应该努努力就可以学会的，大神们提供一个可以让我有兴趣的方法啊！谢谢各位了！
作者: 莲华乂乱舞    时间: 2012-4-9 14:02
tang19990919 发表于 2012-4-7 22:12
55555555555555…………我没有耐心学脚本啊！我现在才12岁，应该努努力就可以学会的，大神们提供一个可以让 ...

先读好现在学校里的书。。特别是数学和物理   对于学习计算机语言真的很重要    那些都是基础 虽然学得时候不觉得     等你基础学好了   你再来看这些脚本就会觉得很简单了    都是很明显的逻辑和判断  

12岁嘛。。。不急  你还有时间  慢慢学  一边改一边看效果就好了       到了我这种怪蜀黍年纪的时候  你再想去搞基础就是悲剧了  
作者: xiaoshun23    时间: 2012-4-12 03:47
我是超级菜鸟！~原先第三章很多不懂的~现在明白了很多！真心谢谢楼主！
可对于背景的还不是很了解！继续琢磨！
作者: dukesward    时间: 2012-4-12 03:59
目测是好物（虽然咱看不懂。。建议lz把前三章的链接扔出来方便大家系统学习~
作者: 御之嵐    时间: 2012-8-14 00:50
抱歉  問一下

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

我看了半天 還是 不太懂

能不能 簡單 詳細  的 告訴我呢 ?!
作者: abc1236762    时间: 2012-8-19 12:25
不好意思，請問一下
那個遊戲時間是怎麼做出來的
是否能提供腳本或教程？
作者: 奉命在先    时间: 2012-9-9 19:47
115下不了啊，不知道楼主能不能把那个显示halfbody的功能和这个日站横向菜单脚本结合一下，还有halfbody的长宽怎么设置：http://www4.plala.or.jp/findias/ ... ce_rgss3/index.html
作者: a89672341    时间: 2013-1-3 18:56
請問如果把遊戲畫面變成



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



也可以顯示下一頁

請問要怎麼弄呢？
麻煩大大教導一下愚蠢的新手晚輩
作者: a88953327    时间: 2013-5-1 19:59
第3章在哪.......死活找不到......
作者: 不知明月来相照    时间: 2013-8-12 17:27
楼主，我跟着你的做法弄了一遍，可是我弄了之前的两部就可以弄全部人了，弄了全部就不能显示全部队员了，还有，现在只能显示主角自己的技能和状态怎么办？
作者: 上寒汛    时间: 2022-7-10 22:48
如果想要全身像，然后我需要把立绘放在名字hp等等这些的下面应该怎么处理？



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