Bitmap,Sprite,Viewport的三者关系

kvkv97

大圣能解说下吗

国产吃货

近日常看见楼主在频繁发帖，热心好学。
如上面两位的解说，这张图形象的展示了Bitmap，Sprite，Viewport三者的关系。
亦可加入我的脚本讨论群一起学习↓
最近正打算和群内各位讨论学习RGSS里的Window类。

RyanBern

这个问题其实非常好，我想把它分类成推荐问答。对于刚接触RGSS的人来说，这三个属于可视化编程的类真的需要好好辨析一下。
这个图也是能说明很多问题，下面是一些经验总结的规律。
首先先单独说下这三个类。
1.Bitmap类：位图的类，这个类其实不是用于真正显示在屏幕上，只是为了提供图片信息的数据类。说简单点，这个类的对象为显示图像提供的数据的基础。你要显示个图形就要告诉我图形到底是什么样子才行，对吧？从Bitmap类的属性可以看出，Bitmap类有width（宽）和height（高）这两个属性，但是没有两个坐标（即x和y）的属性。这就可以看出，bitmap缺少显示对象的必要属性（即显示的位置，坐标）。
2.Sprite类：精灵的类，这个类是真正被用作显示在屏幕上的类。当然，它的存在必须依赖于具体的图形信息，所以Sprite类有一个名为bitmap的属性。也是上面说过的，你要显示一个图形，就要告诉我你依照什么去显示。作为一个可以显示的对象，它拥有属性x和y，不过没有属性width和height。这个恰恰和Bitmap相反。为什么Sprite类没有宽和高这两个属性呢？这是因为作为一个可以显示的对象，它的大小是不确定的。这点从Sprite类的属性src_rect和zoom_x和zoom_y可以看出。Sprite类的src_rect是表示截取它相应bitmap的一个矩形，即它可以只把（与其关联的）bitmap的一部分剪裁出来，这就带来了大小的不确定性。另外的zoom_x和zoom_y表示伸缩变换，当然也会影响sprite对象的“占地面积”。所以，你可以把Sprite理解为“定点显示图形”。
3.Viewport类：视口的类。这是一个比较容易被忽略的类。Sprite类的对象要显示图形，除了依赖于Bitmap，还要依赖于一个它所在的视口。F1中的Sprite类的initialize方法中提到，生成精灵的时候，必须指定其对应的视口。那么视口到底是什么呢？如果把各种精灵比作一张网页上的所有内容，那么视口就是你的浏览器。值得注意的是，由于浏览器的大小限制，你不可能把网页上的所有内容都看全部看到，因此你看到的只是网页内容的一部分。那么，引入视口的好处是什么？这是方便精灵之间的相互管理，把功能完全不同的精灵分开以达到不让它们之间相互影响的目的。还是拿浏览器举例，假如你同时打开了IE和Chrome浏览器浏览网页，那么这这两个浏览器显示的网页之间不会有在视觉上相互影响。

然后就是说这个图了。绿色矩形表示的其实是src_rect截取bitmap的一部分，并不是整个的bitmap，这点要注意。而精灵有另外两个属性ox和oy。这两个属性的意思是相对于src_rect的顶点，精灵的中心坐标。请注意ox和oy相对于的是src_rect的顶点。点(ox, oy)的含义是：相对于src_rect顶点，坐标为(ox, oy)的点将被显示在精灵的坐标(x, y)上，其余的点将做一个平移变换。
这里比较难理解是坐标的相对性。
我们说完了Sprite中ox和oy的含义，但是没有说明Sprite中x和y的含义。这个图中，正中间的位置标明了一个点(x, y)，但是那个点根本不是Sprite的坐标，这个一定要注意。而Sprite的x和y图中并没有给出。Sprite的x和y的含义是：表明它和视口真正原点之间的相对坐标。这句话现在理解不了没有关系，后面会有更简单的比喻。不过你要记住这里Sprite的x和y也具有相对性。
最后我们说说这个Viewport，在这个图里面，Viewport用褐色矩形表示。实际上它的确就是个矩形，但是又不仅仅是个矩形。这里面要注意一个事情，Viewport类是没有x和y属性的。这个图会让人误以为Viewport是有x和y属性的。上面我们说了，图上的点(x, y)不是Sprite的x和y，那它是谁的坐标呢？它是Viewport的属性rect的（相对于整个窗口的）坐标（即用于生成viewport的矩形的坐标）。所以你可以把(x, y)理解成视口的（绝对）位置。
由于是视口，所以你只能通过视口的矩形去查看它内部的部分，自然你可能看不到视口内所有精灵的全部。那么你要查看其它部分时，要用到视口的ox和oy属性，这个表示你查看位置的改变，这样你就能查看其它部分了。

总结（类，属性）：
Bitmap类，width/height：表示位图画布的宽和高
Sprite类，bitmap：表示用于显示的位图本身
Sprite类，src_rect：表示截取相应bitmap一部分的矩形
Sprite类，x/y：表示精灵和对应视口真正原点的相对坐标
Sprite类，ox/oy：表示要显示在精灵的x，y处的点和src_rect原点的相对坐标
Viewport类，rect：表示用于生成该viewport的矩形
Viewport类，ox/oy：表示显示在左上角的点和Viewport真正原点的相对坐标

最后是直观的例子，有助于你理解三者的关系。
精灵：Windows画图的画布上面所有的图形
视口：Windows画图的窗体
视口的真正原点：画布左上角
改变精灵的x/y：在画布上移动图形
改变视口的ox/oy：拉动Windows画图窗体的滚动条
改变视口对应rect的x/y：拖动Windows画图的窗体本身

恐惧剑刃

绿色框：以Bitmap的width，height围成的矩形
蓝色框：以Sprite的src_rect的width，height围成的矩形
褐色框：以Viewport的width，height围成的矩形

说明了这三者的关系。

如果精灵的传送矩形与视口不完全重合（青色的ox，oy），就只能看到一部分（阴影部分）。

如果调整了精灵的传送矩形，使得“位图与传送矩形”不完全重合，则只能看到一部分（传送矩形与Bitmap相交部分）

渣理解。
其具体关系等待大神详解↓