茄孓_图片按钮：求一个战斗按钮放大缩小的效果

木许许

这个工程是用图片作为战斗按钮，我希望当鼠标或光标放在某个按钮上时，这个图片按钮会一直循环放大缩小


茄孓_图片按钮.rar (314.03 KB, 下载次数: 26)

2011-9-6 10:57 上传

点击文件名下载附件
工程

亿万星辰

图片按钮脚本里的两个方法替换掉就好了~

1.   #--------------------------------------------------------------------------
   
2.   # ● 描绘图片项目
   
3.   #     index : 项目编号
   
4.   #     type  : 描绘类型
   
5.   #     type = 1 只支持键盘
   
6.   #     type = 2 双面支持
   
7.   #--------------------------------------------------------------------------
   
8.   def draw_picture_item(index, type)
   
9.     @sprite[index] = Sprite.new
   
10.     if @commands[index][0] == nil
    
11.       p "图片名设置有误"
    
12.     end
    
13.     if @commands[index][1] == nil
    
14.       p "图片X坐标设置有误"
    
15.     end
    
16.     if @commands[index][2] == nil
    
17.       p "图片Y坐标设置有误"
    
18.     end
    
19.     bitmap = RPG::Cache.picture(@commands[index][0])
    
20.     @sprite[index].bitmap = bitmap
    
21.     @sprite[index].ox = bitmap.width / 2
    
22.     @sprite[index].oy = bitmap.height / 2
    
23.     @sprite[index].x = @commands[index][1]
    
24.     @sprite[index].y = @commands[index][2]
    
25.     @sprite[index].index = index
    
26.     if @sprite[index].index != self.index
    
27.       @sprite[index].color = Color.new(0,0,0,100)
    
28.     else
    
29.       @sprite[index].color = Color.new(0,0,0,0)
    
30.     end
    
31.     @dash.push(index)
    
32.   end
    
33.   #--------------------------------------------------------------------------
    
34.   # ● 刷新图片项目
    
35.   #--------------------------------------------------------------------------
    
36.   def update_item
    
37.     if Mouse.get_mouse_pos != nil
    
38.     $mouse_x,$mouse_y = Mouse.get_mouse_pos
    
39.     end
    
40.     if @type == 2
    
41.     for index in @dash
    
42.       if @sprite[index] != nil
    
43.         top_x = @sprite[index].x
    
44.         top_y = @sprite[index].y
    
45.         bottom_x = top_x + @sprite[index].bitmap.width
    
46.         bottom_y = top_y + @sprite[index].bitmap.height
    
47.         if ($mouse_x > top_x) and ($mouse_y > top_y) and
    
48.              ($mouse_x < bottom_x) and ($mouse_y < bottom_y)
    
49.           self.index = @sprite[index].index
    
50.           if @move_index != self.index
    
51.             Se.ok
    
52.             @move_index = self.index
    
53.           end
    
54.         end
    
55.         if @sprite[index].index != self.index
    
56.           @sprite[index].color = Color.new(0,0,0,100)
    
57.           @sprite[index].zoom_x = 1
    
58.           @sprite[index].zoom_y = 1
    
59.         else
    
60.           @sprite[index].color = Color.new(0,0,0,0)
    
61.           @sprite[index].zoom_x = 1.2
    
62.           @sprite[index].zoom_y = 1.2
    
63.         end
    
64.       end
    
65.     end
    
66.     elsif @type == 1
    
67.       for index in @dash
    
68.         if @sprite[index].index != self.index
    
69.           @sprite[index].color = Color.new(0,0,0,100)
    
70.         else
    
71.           @sprite[index].color = Color.new(0,0,0,0)
    
72.         end
    
73.       end  
    
74.     end
    
75.   end
    

复制代码

木许许

亿万星辰 发表于 2011-9-6 18:01
图片按钮脚本里的两个方法替换掉就好了~

谢谢，这样改只是让按钮变大了，没有动态，能不能当鼠标移到按钮上，就让按钮循环放大缩小？就像动画一样，类似于图标式战斗选单的效果

亿万星辰

zoom_x zoom_y
循环变化这两个值即可

木许许

亿万星辰 发表于 2011-9-7 08:37
zoom_x zoom_y
循环变化这两个值即可

参照图标式战斗选单改成这样，图标动得很诡异，像心跳一样。。
  #--------------------------------------------------------------------------
  # ● 刷新图片项目
  #--------------------------------------------------------------------------
  def update_item
    if Mouse.get_mouse_pos != nil
    $mouse_x,$mouse_y = Mouse.get_mouse_pos
    end
    if @type == 2
    for index in @dash
      if @sprite[index] != nil
        @count += 1  # XXOO
        top_x = @sprite[index].x
        top_y = @sprite[index].y
        bottom_x = top_x + @sprite[index].bitmap.width
        bottom_y = top_y + @sprite[index].bitmap.height
        if ($mouse_x > top_x) and ($mouse_y > top_y) and
             ($mouse_x < bottom_x) and ($mouse_y < bottom_y)
          self.index = @sprite[index].index
          if @move_index != self.index
            Se.ok
            @move_index = self.index
          end
        end
        if @sprite[index].index != self.index
          @sprite[index].color = Color.new(0,0,0,100)
          @sprite[index].zoom_x = 1
          @sprite[index].zoom_y = 1
        else
          case @count
          when 1..10
            @sprite[index].zoom_x = 1.0 + @count / 10.0
            @sprite[index].zoom_y = 1.0 + @count / 10.0
          when 11..20
            @sprite[index].zoom_x = 2.0 - (@count - 10) / 10.0
            @sprite[index].zoom_y = 2.0 - (@count - 10) / 10.0
          end

        end
        @count = 0 if @count == 20  # XXOO���

亿万星辰

木许许 发表于 2011-9-7 09:20
参照图标式战斗选单改成这样，图标动得很诡异，像心跳一样。。
  #-------------------------- ...

柔和一点的话就把每次的变化值缩小一些~

木许许

亿万星辰 发表于 2011-9-7 10:21
柔和一点的话就把每次的变化值缩小一些~

我发现改了以后鼠标的坐标判断有些问题：似乎中心坐标往右下方平移了，我把鼠标放在图片按钮之外右下的地方，按钮也会激活，如何把坐标改回来？

亿万星辰

鼠标部分的坐标判断忘记改了，现在图片的坐标是以图片中心点为基准的，所以鼠标判断的边界值要在图片坐标的左右方向width的一半，上下方向height的一半

1.         top_x = @sprite[index].x - @sprite[index].bitmap.width / 2
   
2.         top_y = @sprite[index].y - @sprite[index].bitmap.height / 2
   
3.         bottom_x = top_x + @sprite[index].bitmap.width
   
4.         bottom_y = top_y + @sprite[index].bitmap.height
   

复制代码

�

木许许

亿万星辰 发表于 2011-9-7 10:29
鼠标部分的坐标判断忘记改了，现在图片的坐标是以图片中心点为基准的，所以鼠标判断的边界值要在图片坐标的 ...

只是改刷新图片项目下的那部分么？发现这样的情况下鼠标一定要点在图片的偏左上方位置按钮才被激活，如果点在边缘一点的右下方位置按钮没反应


木许许于2011-9-8 08:17补充以下内容：
之前的改成这样倒也差不多对齐了

top_x = @sprite[index].x - @sprite[index].bitmap.width / 2 + 8
top_y = @sprite[index].y - @sprite[index].bitmap.height / 2 + 8
bottom_x = top_x + @sprite[index].bitmap.width / 2 + 8
bottom_y = top_y + @sprite[index].bitmap.height / 2 + 8