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

KB.Driver

前言

快速开始

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

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

KB.Driver

hersal 发表于 2020-5-9 11:46
日历大佬，我有几个问题，
1.男神和背景图都没有设置z坐标，而背景图是后生成的，不是应该覆盖在男神上面吗 ...

0.不是大佬。另外抓个虫，由于论坛的关键字替换机制，本来用词是n v神被系统强制替换成了男神。
1.根据VA的F1文档，Z值相同的精灵按照Y值大小决定显示顺序（Y值更大的精灵显示在上），Y值也相同时，较晚生成的精灵显示在上

hersal

日历大佬，我有几个问题，
1.男神和背景图都没有设置z坐标，而背景图是后生成的，不是应该覆盖在男神上面吗？
2.（按物理的规律，男神的在水中的倒影应该是镜像，而不是旋转180度，那么镜像该怎么实现呢？）  好吧这个问题在日历君后一篇教学有说，设置sprite.mirror = true

flyoverland

喜欢编程课，涨知识

世外游神

图片好美，好喜欢

miantouchi

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

devil033

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

KB.Driver

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

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

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

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

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

经过了漫长的讲解，我们终于弄明白了第一个程序。
但是你可能还是有疑问：为什么游戏就定在这个画面不走了？
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

运行结果：