日历的RGSS3入门教程 - 精灵与位图Lv1 初识精灵

KB.Driver

前言

快速开始

精灵与位图Lv1 初识精灵
课程难度：★☆☆☆☆ 咸鱼
涉及的RGSS知识：Sprite类，Bitmap类
涉及的Ruby知识：创建实例，修改属性

下一课：日历的RGSS3入门教程 - 精灵与位图Lv2 初识位图与矩形

KB.Driver

精灵（Sprite）与位图（Bitmap）是RGSS中两个重要的类，灵活运用这两个类就可以为你的游戏增加很多个性化的内容。

那么，多说无益，让我们新建一个RMVA工程，打开脚本编辑器，在插件脚本处新增一栏，动手输入以下代码吧。

注意，代码中所有符号均为英文半角，输入时记得关闭输入法。

sprite =Sprite.new # 注意字母的大小写

goddess_bitmap =Bitmap.new("Graphics/Battlers/Goddess")

sprite.bitmap = goddess_bitmap

rgss_stop

注意，动手输入代码也是在大脑中记忆代码的过程。直接复制粘贴的话，学习效果将会大打折扣。

输入完成后，我们在脚本编辑器中按下确定，点击工程里右上角的绿色小三角（或者快捷键F12）运行游戏看看效果：

运行结果显示，画面的左上角出现了一个男神的图像。

下面我们来分析一下这段代码。

sprite= Sprite.new

Sprite是RGSS里精灵的类的名字，这里用它的.new方法生成一个Sprite的实例，并将它赋值给sprite变量。

这里给不熟悉面向对象编程的同学简单解释一下类与实例。

如果用最浅显的说法来讲，“类”就是一个“类型”，这个类型如同整数、字符串等类型一样，所有这个类型的变量都会有相同的特征。

Sprite.new就是一个Sprite类型的变量。

但是，在面向对象编程中，我们把这个类型的变量叫做这个类的实例。

也就是，Sprite.new生成了一个Sprite的实例，并且我们把它赋值给了sprite。

goddess_bitmap= Bitmap.new("Graphics/Battlers/Goddess")

Bitmap是RGSS里位图的类的名字。同样地，这里生成了一个Bitmap的实例，并将它赋值给goddess_bitmap变量。

与上一句不同的是，这一句的.new方法后面用括号传递了一个字符串作为参数。

这个字符串的作用是提供一个带文件路径的文件名，这个位图对象会根据文件路径寻找对应名字的图像，将图像“读取”到这个实例中。

这里解释一下文件路径。工程运行时，默认的文件路径就是Game.exe所在的位置，因此在用Bitmap读取图像时只需要补充这之后的路径。

在游戏文件夹里，是不是刚好有叫做Graphics的文件夹？打开进去后，又有名为Battlers的文件夹，这就是图像的路径。

为什么打开了Battlers文件夹没有找到名为Goddess的文件呢？既然没有这个文件Bitmap又是怎么读取的？

实际上，RPGMaker中有RTP素材。当找不到某个文件时，RM就会到RTP中去搜寻。

要知道RTP中有什么素材可以打开工程里的媒体库查看。

所有媒体库中蓝色圆圈的素材就是RTP中包含的素材。在安装了RPGMaker VXAce的电脑上运行时，游戏工程文件夹内没有RTP素材也可以正常运行。

让我们继续看下一句。

sprite.bitmap= goddess_bitmap

还记得第一句里生成的sprite吗？它是一个Sprite类的实例，因此与所有Sprite一样拥有自己的一些固有属性。

这一句里，我们修改了它的bitmap属性，将它变成了第二句生成的goddess_bitmap。

位图（Bitmap）就像胶卷相机拍照后留下来的胶卷，我们没办法直接看。

而精灵（Sprite）则是一个放映机，当你把胶卷交给它，它就把胶卷投射到屏幕上。

sprite.bitmap就是sprite这台放映机现在放映着的胶卷，它一开始是空的。

当我们把sprite的bitmap设置为goddess_bitmap后，sprite就把变化后实实在在的 “胶卷”投射到屏幕上了。

rgss_stop

让我们看看最后一句rgss_stop。

rgss_stop是RGSS的内置函数，它等同于loop { Graphics.update }。

loop是一个循环语句的关键词，它后面的大括号的内容是用来循环执行的语句。

我们先不要管大括号内的语句是什么，只要知道这一句的意思就是不断地刷新画面。

我们的游戏是在屏幕中显示的，只有让屏幕刷新才能看到图像。

KB.Driver

经过了漫长的讲解，我们终于弄明白了第一个程序。
但是你可能还是有疑问：为什么游戏就定在这个画面不走了？
rgss_stop等同于loop { Graphics.update }，它不断地刷新画面，但是不运行任何脚本，也不接受任何键盘按键。
那么，是不是把这一句去掉，就万事大吉了呢？

sprite = Sprite.new
goddess_bitmap = Bitmap.new("Graphics/Battlers/Goddess")
sprite.bitmap = goddess_bitmap
# rgss_stop

我们在最后一句rgss_stop的前面打一个”#”井号，代表将这一行井号后的内容变为注释。
注释不会影响程序的执行，可以在注释中写一些提示信息方便日后修改时理解代码的含义。
运行之后，我们发现男神根本就没有出现，游戏直接进入了标题画面。
实际上，像刚才的sprite, goddess_bitmap那样以小写字母开头的变量属于临时变量，它们在当前的语句块结束后就会被销毁。
因此，在这一页的脚本执行完后，还没等进入游戏，男神就消失了。
   
为了继续讲解精灵与位图类的知识，接下来我们将继续在rgss_stop的环境下学习。

回过头来看下我们一开始显示的结果，男神的最左边顶着屏幕的最左边，男神的最上边顶着屏幕的最上边，但是我们似乎并没有指定显示的位置。

事实上，精灵（Sprite）的实例存在着x与y两个属性， 它们的默认值为0。

注意这个x和y和初中数学所讲的平面直角坐标系有所不同，如果你有用过Photoshop的话，就会明白这个x与y是以画布的左上角为起点的。

x表示了精灵原点距离画面左侧的距离，而y表示了精灵原点距离画面上端的距离。

精灵的原点是ox与oy，它们的默认值同样为0，原点的作用可以参考Photoshop中的原点，它将决定旋转与缩放时的参考点。

原点为图形中心的情况：

原点为图形左上的情况（RM默认情况）：

注意RM中精灵的原点坐标默认为图形的左上，也就是上面演示的第二种。

下面我们动手调整精灵的位置吧。

sprite= Sprite.new

goddess_bitmap= Bitmap.new("Graphics/Battlers/Goddess")

sprite.bitmap= goddess_bitmap

sprite.x = 100 # 可以试试换成你喜欢的值！

sprite.y = 100 # 可以试试换成你喜欢的值！

rgss_stop

运行结果：

KB.Driver

这样一来，精灵的位置就得到了调整。

然而，背景黑黑的总觉得心里不是滋味，让我们加一张背景吧。
现在我们需要像一开始一样增加一个精灵，为了方便以后阅读，我们通过注释来分割代码。为了避免篇幅过长，前面已经写好而不需要修改的脚本在这里用"..."省略。
背景精灵取名为back_sprite，背景位图我们选择Titles1文件夹里的Fountain文件。

# 男神精灵
sprite = Sprite.new
...
sprite.y = 100
# 背景精灵
back_sprite = Sprite.new
back_bitmap = Bitmap.new("Graphics/Titles1/Fountain")
back_sprite.bitmap = back_bitmap
rgss_stop



运行结果：

看上去似乎有点画面感了。

不过男神既然在湖面上，湖面应该要有倒影。只要将男神旋转180度后投射在湖面上，就大功告成了吧？

我们通过调整精灵的角度angle属性，就可以让精灵以原点为中心进行旋转。

由于男神的倒影和男神的位图应当是相同的，只是“放映”出来的位置与角度不同，

我们可以将reflection_sprite的bitmap属性同样设置为goddess_bitmap。

另外，倒影的位置应该在本体的下方，因此将reflection_sprite的y设置为100加上位图的高度height。

位图的高度是位图本身的一个属性，这里我们用goddess_bitmap.height来获取它的值。

#男神精灵

...

#背景精灵

...

# 男神倒影精灵

reflection_sprite= Sprite.new

reflection_sprite.bitmap= goddess_bitmap

reflection_sprite.x= 100

reflection_sprite.y= 100 + goddess_bitmap.height

reflection_sprite.angle= 180 # 旋转180度

rgss_stop

那么，让我们运行一下看看……

奇怪的是，男神倒影没有出现在下方，而是在左边出现了。这里就要重新提到前面所讲的精灵原点了。

由于RM默认的精灵原点是在图像的左上，因此旋转180度的结果就是……

难道我们要再调整转完之后的坐标吗？这样总觉得不是滋味。于是这里就要调整精灵的原点坐标ox，将其调整到中心。

注意，精灵的x表示的是精灵原点ox到画面左侧的距离，现在精灵原点ox不再是0，而是中间，因此x的值应当对应增加位图宽度width的一半。

与位图高度height一样，我们用goddess_bitmap.width来获取位图宽度width。

另外，旋转180度后，位图将从现在处于原点下方变成处于原点的上方，因此我们还要调整y坐标，让它继续往下平移一个位图的高度。

#男神倒影精灵

...

reflection_sprite.x= 100 + goddess_bitmap.width / 2

reflection_sprite.y= 100 + goddess_bitmap.height * 2

reflection_sprite.ox= goddess_bitmap.width / 2

...

运行结果：

KB.Driver

现在的结果也不尽人意，倒影的男神已经跑到了画面之外。
我们应当一边调整精灵的y坐标，一边将它缩小。
修改精灵的比例是通过修改精灵的zoom_x与zoom_y属性完成的，它们分别代表精灵在x方向与y方向以原点ox,oy为参考的放大（缩小）比例。

# 男神倒影精灵
...
reflection_sprite.y = 100 + goddess_bitmap.height * 3 / 2
reflection_sprite.ox = goddess_bitmap.width / 2
reflection_sprite.angle = 180 # 旋转180度
reflection_sprite.zoom_y = 0.6 # 纵向缩小为0.6倍
rgss_stop

运行结果：

倒影的大小终于可以了，但是倒影给人感觉太亮了。

我们可以调整精灵的不透明度opacity属性来造成一种虚化的感觉。

不透明度的取值为0~255，这里我们取大约一半的128。

#男神倒影精灵

...

reflection_sprite.opacity= 128 # 不透明度（0~255）

rgss_stop

运行结果：

现在，我们利用RGSS的精灵与位图，完成了一幅简单的画面。

让我们简单总结一下这一课所学的知识。

一、

Bitmap是RGSS的位图类，可以读取本地图像，充当“胶卷”。

Sprite是RGSS的精灵类，可以把位图按照需求显示在屏幕上，充当“放映机”。

二、

精灵Sprite类的实例有着各种属性，通过修改这些属性可以达到我们的需求。

教程中已提到的属性有：

精灵的位图bitmap

精灵的坐标x与y

精灵的原点坐标ox与oy

精灵的角度angle

精灵的缩放比zoom_x与zoom_y

精灵的不透明度opacity

KB.Driver

课后练习：
利用本课所学知识，绘制以下场景。

使用素材（RTP）
"Graphics/Titles1/Universe"
"Graphics/Battlers/God"

devil033

终于又来了一位喜欢讲课的大神了，十分受用，感谢

miantouchi

大神终于开课了！我最新在学习RGSS，这教程来的太是时候了。

世外游神

图片好美，好喜欢

flyoverland

喜欢编程课，涨知识