新手教程--从0开始学RGSS2(2013-09-21 修复索引地址)

蕾米莉亚·斯卡雷特

Viewport 显示区域

    Viewport 这个东东其实理解起来不难. 比如 显示器的可以显示的区域相对于 Windows 桌面来说就是一个 Viewport . 在 VX 里,  大部分的图片是不需要也不可能需要显示整张图的内容的, 例如 行走图. 这样的情况下就需要使用到 Viewport 了, 截取 行走图 里的一部分来显示, 其他的部分不显示.
    Viewport 的意思通俗点来说就是 需要显示的区域. 图片, 精灵, 窗口什么的都可以设定这样的一个显示区域来显示我们需要显示的内容.
    下面的代码可以来帮助我们来理解这个显示区域的含义.
    1. 创建一个空的 Scene 场景.

1. class Scene_Viewport < Scene_Base
   
2.   def start
   
3.     @sprite = Sprite.new
   
4.     @sprite.bitmap = Bitmap.new("Graphics/Pictures/143555.jpg")
   
5.     @sprite.y = -200
   
6.   end
   
7.   def update
   
8.   end
   
9.   def terminate
   
10.     @sprite.bitmap.dispose
    
11.     @sprite.dispose
    
12.   end
    
13. end
    

复制代码

结果是这样的,

    毫无疑问的, 我们知道 Sprite 将这个图片全部都显示到 VX 的窗口上了. 不过这里其实也可以看到整个 VX 窗口也是一个 Viewport.
    2. 使用 Viewport 来显示我们需要的部分.
    将上面的那个脚本段修改一下:

1.   def start
   
2.     @viewport = Viewport.new(0, 0, 400, 400)
   
3.     @sprite = Sprite.new(@viewport)
   
4.     @sprite.bitmap = Bitmap.new("Graphics/Pictures/143555.jpg")
   
5.     @sprite.y = -150
   
6.   end

复制代码

测试结果为:
   
    看出区别了么? 由于添加了 Viewport 的限制, 显示图片的时候, 只能显示 400 * 400 大小的区域. 不过这里需要注意一点:添加 Viewport 的限制后, 原来的 Sprite 的坐标是相对于 Viewport 来定义的, 并不是相对于 窗口. 这就意味着, 从 Sprite 的角度来看, Viewport 的指标才是指标原点.

---

      Viewport 的方法, 属性什么的, 看看 F1 就可以了. 不过需要说明一下 这两个属性 ox, oy .
      ox, oy 这两个坐标可以理解成上面的那个例子里, Sprite 的坐标. 修改 ox oy 的值, 其实就是修改 Sprite 的 x y 的值. 只是 Viewport 的内部不一定是 Sprite .

一箭烂YiJL

回复 蕾米莉亚·斯卡雷特 的帖子

又是一个马甲？
这里不知是补充还是说明了，
Viewport在控制游戏的整个Sprite(活动块)里扮演了一个不少的地位，
就像在"Spriteset_Battle"和"Spriteset_Map"里面，里面的几个Viewport，(有@viewport1、@viewport2.....)
他们控制了整个各自不用的活动块所看的范围(比如计时器、地图、人物......)，
一旦我们用了

Graphics.resize_screen(640, 480)

来加大画面，
在地图和战斗里整个视窗就会留有黑边，这是因为首先战斗场景和地图场景再调用Spriteset_(Battle/Map)
然后@viewport1、@viewport2.....都是没有超过640和480，所以地图元件无法显示在544和416之外。
只要这是把所有viewport类都变为640,480这样就没有黑边，
不过战斗和对话窗口窗口位置会不配合位置而很怪(这是当然的~哈哈哈~)。

sq333333

支持支持

mxhxl

好东西，顶一个啊！大家顶上去呵~~

个快快

不错啊，我看了一半了

铃仙·优昙华院·因幡

Sprite 精灵 和 Plane 平面

Sprite 精灵
       在 RGSS2 里, 显示图片其实有两个方法: 一个是使用 Bitmap 自己的方法 blt  或者是 stretch_blt 来显示, 但是缺点是, 不能再每帧里都 blt. 那样只能让 VX 的 FPS 降低到个位数, 因为这两个方法的执行时间都是很长的. 另一个方法就是用 Sprite 来显示.

       Bitmap 如果指的是图片数据的话, 那么 Sprite 就是画布. Sprite 的理念和 blt 不一样. blt 是在需要的时候再描绘. 所以每次调用这个方法会消耗大量时间. Sprite 实现将图片加载进 Sprite 里, 在需要的时候显示就可以了, 描绘过程比 blt 要效率的多.

      Sprite 的方法有几个, F1 有介绍, 这里就不多说了.

     具体的使用方法, 请参考 Viewport 类 的例子部分.

---

Plane 平面
     Plane 平面 和 Sprite 精灵 大部分是一致的, 少了几个特定的方法.
     Plane 平面 和 Sprite 精灵 的最大区别在于 如果要显示的图片小于显示区域的话, Plane 平面 会将该图片填充满显示区域, 但是 Sprite 不会. 例子如下:
   
     Plane 平面:

1. class Scene_Plane < Scene_Base
   
2.   def start
   
3.     @v = Viewport.new(0, 0, 400, 400)
   
4.     @sprite = Plane.new(@v)
   
5.     @sprite.bitmap = Bitmap.new("Graphics/Pictures/1.png")
   
6.   end
   
7.   def update
   
8.   end
   
9.   def terminate
   
10.     @sprite.bitmap.dispose
    
11.     @sprite.dispose
    
12.   end
    
13. end

复制代码

截图:


换成是 Sprite 的话, 效果就是这样:

1. class Scene_Plane < Scene_Base
   
2.   def start
   
3.     @v = Viewport.new(0, 0, 400, 400)
   
4.     @sprite = Sprite.new(@v)
   
5.     @sprite.bitmap = Bitmap.new("Graphics/Pictures/1.png")
   
6.   end
   
7.   def update
   
8.   end
   
9.   def terminate
   
10.     @sprite.bitmap.dispose
    
11.     @sprite.dispose
    
12.   end
    
13. end

复制代码

截图:


另外, Plane 只能通过 Viewport 来调节 显示坐标.

龙须菜

支持LZ!!!!!!!!!!!

zh99998

啊拉..99楼了呢

那个ox oy能详解下吗

蕾米莉亚·斯卡雷特

    具有 ox oy 属性的类共有三个, 分别是 Viewport, Sprite 和 Plane . 不过三者的用法都是一样的.

    如果说把 x, y 这两个坐标看成是相对于窗口来说的话, ox, oy 这两个就是相对于图片上的坐标来说的. 这就意味着, (x, y) 这个坐标系的坐标原点在于窗口的最左上. 而 (ox, oy) 的坐标系原点在于图片的最右上. 两者是不一样的. (ox, oy) 不是对于窗口而言的.

   两个的另一个区别在于, (x, y) 的值决定了这个类(Viewport, Sprite 和 Plane 中的某个)在窗口上的显示位置, 也就是显示坐标. 而 (ox, oy) 的含义是需要显示的图片部分的起始坐标. 但是两者的显示区域的定义都是相同的, 都是由 Viewport 的 Width 和 Height 来决定.

   (ox, oy) 坐标的两一个作用是定义这个精灵(Sprite类) 在旋转时所绕的点.

   -----------------------------------------------------------------------------------------

   (ox, oy) 坐标的用法, 和 Bitmap 的 blt 是一样的, 在一定程度上两者等价(不讨论效率) 比如:

1. 
   
2. window = Window_Base.new(0, 0, 400, 400) # 建立一个坐标在 (0, 0) 的 宽高都是 400px 的窗口
   
3. window.back_opacity = 0 # 取消窗口背景
   
4. bitmap = Bitmap.new("1.jpg") # 加载 1.jpg 这张图片
   
5. rect = Rect.new(30, 40, 300, 300) # 定义一个矩形, 用于指明后面需要截取的图片区域
   
6. window.contents.blt(10, 20, bitmap, rect, 150) # 在相对于窗口的左上角为原点的坐标系的 (10, 20) 位置, 显示 1.jpg 这
   
7.                          # 张图片的(30, 40) 这个相对于图片的左上角, 宽高都是 300px 的区域.
   

复制代码

与这个功能类似的 Sprite 的写法是:

1. 
   
2. viewport = Viewport.new(0, 0, 300, 300)
   
3. sprite = Sprite.new(viewport)
   
4. sprite.bitmap = Bitmap.new("1.jpg")
   
5. sprite.ox = 30
   
6. sprite.oy = 40
   
7. sprite.opacity  = 150
   

复制代码

当然 Sprite 的 src_rect  属性也是可以使用的.
注意一下: 下面的这个脚本虽然在这里和上面的脚本显示的情况是一样的, 但是这里有一个区别.

1. viewport = Viewport.new(0, 0, 300, 300)
   
2. sprite = Sprite.new(viewport)
   
3. sprite.bitmap = Bitmap.new("1.jpg")
   
4. sprite.x = -30
   
5. sprite.y = -40
   
6. sprite.opacity  = 150

复制代码

如果在这两个脚本的最后一句添加

1. sprite.angle = 45

复制代码

也就是旋转的话, 就可以看出区别了. 前一个的旋转点就是我们定义的 (30, 40) 位置, 也就是 (ox, oy) .
后一个虽然在没有旋转之前是正常的, 但是在旋转之后就不一样了. 理由在于, 后一个仅仅是定义了一个 (x, y) . (ox, oy) 依旧是默认的 ( 0, 0 ), 也就是图片的左上角. 两者的旋转点式不一样的.