怎样制作滚动条

紫英晓狼1130 · 发表于 2016-2-4 13:25:57

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

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

x

怎样制作非鼠标系统的滚动条？
按上或下就改变滚动条位置
就拿物品栏举例…
本人尝试过修改Window_Item，建了个Sprite，但坐标始终有问题
然后又修改Window_Selectable，但取整后位置不对
求大大解答…

SailCat · 发表于 2016-2-5 10:52:12

在Window_Selectable中有一些属性与滚动条的计算有关
例如你的窗口能显示5条信息，一共有15条信息，那么不考虑上下箭头的话，滚动条的高度就是5
滚动粒的高度（以及它的位置）和窗口的总状态数有关，窗口最上面显示0-4条，最下面显示10-14条，一共有11个位置
所以滚动粒的高度就是5/11，这样它的11个位置分别是：
当窗口显示0-4时，滚动粒的顶部为0，占据0到5/11的位置
当窗口显示1-5时，滚动粒的顶部为5/11，占据5/11到10/11的位置
……
当窗口显示10-14时，滚动粒的顶部为4 6/11，占据4 6/11到5的位置

而窗口总条数由@item_max决定，显示哪些条是由self.top_row（可读写属性）决定的
滚动粒的位置这么计算
其高度= @height / (@item_max - (@height / 32) + 1)
其位置（顶端）= @height * (self.top_row) / (@item_max - (@height / 32) + 1)

这里面32是默认的条目高度
另外滚动条要自己建一个bitmap，不要放在content_bitmap上，不然它会随内容上下滚动。

紫英晓狼1130 · 发表于 2016-2-5 14:39:31

本帖最后由紫英晓狼1130 于 2016-2-5 14:43 编辑

SailCat 发表于 2016-2-5 10:52
在Window_Selectable中有一些属性与滚动条的计算有关
例如你的窗口能显示5条信息，一共有15条信息，那么不 ...

意思明白了~

游戏里滚动粒大小不变，该怎样计算坐标（如下图）
按我这么写Window_Selectable计算坐标有问题
条长为168，粒长为7
如果总行数不能被168整除，在倒数第二行时，坐标就会有问题，应该是取整的问题…（还是那张图）
求猫酱帮我看看，喵~

#==============================================================================
# ■ Window_Selectable
#------------------------------------------------------------------------------
# 　拥有光标的移动以及滚动功能的窗口类。
# 配有滚动条
#==============================================================================
class Window_Selectable4 < Window_Base
#--------------------------------------------------------------------------
# ● 定义实例变量
#--------------------------------------------------------------------------
attr_reader :index # 光标位置
attr_reader :help_window # 帮助窗口
#--------------------------------------------------------------------------
# ● 初始画对像
# x : 窗口的 X 坐标
# y : 窗口的 Y 坐标
# width : 窗口的宽
# height : 窗口的高
#--------------------------------------------------------------------------
def initialize(x, y, width, height)
super(x, y, width, height)
@scroll = Sprite.new
@scroll.bitmap = Bitmap.new("Graphics/System/滚动条.png")
@scroll.x = 579
@scroll.y = 200
@scroll.z = 200
@scrollnumber = 0
@item_max = 1
@column_max = 1
@index = -1
end
#--------------------------------------------------------------------------
# ● 设置光标的位置
# index : 新的光标位置
#--------------------------------------------------------------------------
def index=(index)
@index = index
# 刷新帮助文本 (update_help 定义了继承目标)
if self.active and @help_window != nil
update_help
end
# 刷新光标矩形
update_cursor_rect
end
#--------------------------------------------------------------------------
# ● 获取行数
#--------------------------------------------------------------------------
def row_max
# 由项目数和列数计算出行数
return (@item_max + @column_max - 1) / @column_max
end
#--------------------------------------------------------------------------
# ● 获取开头行
#--------------------------------------------------------------------------
def top_row
# 将窗口内容的传送源 Y 坐标、1 行的高 32 等分
return self.oy / 26
end
#--------------------------------------------------------------------------
# ● 设置开头行
# row : 显示开头的行
#--------------------------------------------------------------------------
def top_row=(row)
# row 未满 0 的场合更正为 0
if row < 0
row = 0
end
# row 超过 row_max - 1 的情况下更正为 row_max - 1
if row > row_max - 1
row = row_max - 1
end
# row 1 行高的 32 倍、窗口内容的传送源 Y 坐标
self.oy = row * 26
end
#--------------------------------------------------------------------------
# ● 获取 1 页可以显示的行数
#--------------------------------------------------------------------------
def page_row_max
# 窗口的高度，设置画面的高度减去 32 ，除以 1 行的高度 32
return (self.height - 32) / 26
end
#--------------------------------------------------------------------------
# ● 获取 1 页可以显示的项目数
#--------------------------------------------------------------------------
def page_item_max
# 将行数 page_row_max 乘上列数 @column_max
return page_row_max * @column_max
end
#--------------------------------------------------------------------------
# ● 帮助窗口的设置
# help_window : 新的帮助窗口
#--------------------------------------------------------------------------
def help_window=(help_window)
@help_window = help_window
# 刷新帮助文本 (update_help 定义了继承目标)
if self.active and @help_window != nil
update_help
end
end
#--------------------------------------------------------------------------
# ● 更新光标举行
#--------------------------------------------------------------------------
def update_cursor_rect
# 光标位置不满 0 的情况下
if @index < 0
self.cursor_rect.empty
return
end
# 获取当前的行
row = @index / @column_max
# 当前行被显示开头行前面的情况下
if row < self.top_row
# 从当前行向开头行滚动
self.top_row = row
end
# 当前行被显示末尾行之后的情况下
if row > self.top_row + (self.page_row_max - 1)
# 从当前行向末尾滚动
self.top_row = row - (self.page_row_max - 1)
end
# 计算光标的宽
cursor_width = self.width / @column_max - 32
# 计算光标坐标
x = @index % @column_max * (cursor_width + 32)
y = @index / @column_max * 26 - self.oy
# 更新国标矩形
self.cursor_rect.set(x, y, cursor_width, 26)
end
#--------------------------------------------------------------------------
# ● 刷新画面
#--------------------------------------------------------------------------
def update
super
# 可以移动光标的情况下
if self.active and @item_max > 0 and @index >= 0
# 方向键下被按下的情况下
if Input.repeat?(Input::DOWN)
# 列数不是 1 并且方向键的下的按下状态不是重复的情况、
# 或光标位置在(项目数-列数)之前的情况下
if (@column_max == 1 and Input.trigger?(Input::DOWN)) or
@index < @item_max - @column_max
# 光标向下移动
if @item_max % 3 != 0
@scroll.y += 168 /(@item_max / @column_max)
if @scrollnumber != @item_max / @column_max
@scrollnumber += 1
end
else
@scroll.y += 168 /(@item_max / @column_max)
if @scrollnumber != @item_max / @column_max
@scrollnumber += 1
end
end
$game_system.se_play($data_system.cursor_se)
@index = (@index + @column_max) % @item_max
end
if @item_max % 3 != 0
if @scrollnumber == @item_max / @column_max
@scroll.y = 361
end
else
if @scrollnumber == @item_max / @column_max - 1
@scroll.y = 361
end
end
end
# 方向键上被按下的情况下
if Input.repeat?(Input::UP)
# 列数不是 1 并且方向键的下的按下状态不是重复的情况、
# 或光标位置在列之后的情况下
if (@column_max == 1 and Input.trigger?(Input::UP)) or
@index >= @column_max
# 光标向上移动
if @item_max % 3 != 0
@scroll.y -= 168 /(@item_max / @column_max)
if @scrollnumber != 0
@scrollnumber -= 1
end
else
@scroll.y -= 168 /(@item_max / @column_max)
if @scrollnumber != 0
@scrollnumber -= 1
end
end
$game_system.se_play($data_system.cursor_se)
@index = (@index - @column_max + @item_max) % @item_max
end
if @scrollnumber == 0
@scroll.y = 200
end
end
# 方向键右被按下的情况下
if Input.repeat?(Input::RIGHT)
# 列数为 2 以上并且、光标位置在(项目数 - 1)之前的情况下
if @column_max >= 2 and @index < @item_max - 1
# 光标向右移动
$game_system.se_play($data_system.cursor_se)
@index += 1
end
end
# 方向键左被按下的情况下
if Input.repeat?(Input::LEFT)
# 列数为 2 以上并且、光标位置在 0 之后的情况下
if @column_max >= 2 and @index > 0
# 光标向左移动
$game_system.se_play($data_system.cursor_se)
@index -= 1
end
end
# R 键被按下的情况下
if Input.repeat?(Input::R)
# 显示的最后行在数据中最后行上方的情况下
if self.top_row + (self.page_row_max - 1) < (self.row_max - 1)
# 光标向后移动一页
$game_system.se_play($data_system.cursor_se)
@index = [@index + self.page_item_max, @item_max - 1].min
self.top_row += self.page_row_max
end
end
# L 键被按下的情况下
if Input.repeat?(Input::L)
# 显示的开头行在位置 0 之后的情况下
if self.top_row > 0
# 光标向前移动一页
$game_system.se_play($data_system.cursor_se)
@index = [@index - self.page_item_max, 0].max
self.top_row -= self.page_row_max
end
end
end
# 刷新帮助文本 (update_help 定义了继承目标)
if self.active and @help_window != nil
update_help
end
# 刷新光标矩形
update_cursor_rect
end
def dispose
super
@scroll.dispose
end
end

复制代码

SailCat · 发表于 2016-2-5 15:03:09

紫英晓狼1130 发表于 2016-2-5 14:39
意思明白了~
游戏里滚动粒大小不变，该怎样计算坐标（如下图）
按我这么写Window_Selectable计 ...

你里面有一堆这样的代码
其一： @scroll.y -= 168 /(@item_max / @column_max)
理论上说，这个168应是161（168-7）
其二：连续整数除法的取整舍入误差太大了
应该先更新@index，然后让然后你再去直接算新的@scroll.y
其三：滚动条的跟随有问题
还有，你的@scroll.y跟着光标走，这是错的，你去看系统的滚动条，都是跟滚动屏（top_row，或者window_base里的oy）走的，哪有跟光标走的啊……

帐号		自动登录	找回密码
密码			注册会员

[已经解决] 怎样制作滚动条

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

评分

评分

点评

开拓者