Project1
标题: 日历的RGSS3入门教程 - 精灵与位图Lv1 初识精灵 [打印本页]
作者: KB.Driver 时间: 2019-3-10 17:03
标题: 日历的RGSS3入门教程 - 精灵与位图Lv1 初识精灵
本帖最后由 KB.Driver 于 2019-3-17 12:28 编辑
前言
快速开始
精灵与位图Lv1 初识精灵
课程难度：★☆☆☆☆ 咸鱼
涉及的RGSS知识：Sprite类，Bitmap类
涉及的Ruby知识：创建实例，修改属性
下一课：日历的RGSS3入门教程 - 精灵与位图Lv2 初识位图与矩形
作者: KB.Driver 时间: 2019-3-10 17:04
本帖最后由 KB.Driver 于 2019-3-10 18:09 编辑
精灵（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 时间: 2019-3-10 17:04
本帖最后由 KB.Driver 于 2019-3-10 17:18 编辑
经过了漫长的讲解，我们终于弄明白了第一个程序。
但是你可能还是有疑问：为什么游戏就定在这个画面不走了？
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中精灵的原点坐标默认为图形的左上，也就是上面演示的第二种。
下面我们动手调整精灵的位置吧。
sprite= Sprite.new
goddess_bitmap= Bitmap.new("Graphics/Battlers/Goddess")
sprite.bitmap= goddess_bitmap
sprite.x = 100 # 可以试试换成你喜欢的值！
sprite.y = 100 # 可以试试换成你喜欢的值！
rgss_stop
运行结果：
作者: KB.Driver 时间: 2019-3-10 17:05
本帖最后由 KB.Driver 于 2019-3-10 17:34 编辑
这样一来，精灵的位置就得到了调整。
然而，背景黑黑的总觉得心里不是滋味，让我们加一张背景吧。
现在我们需要像一开始一样增加一个精灵，为了方便以后阅读，我们通过注释来分割代码。为了避免篇幅过长，前面已经写好而不需要修改的脚本在这里用"..."省略。
背景精灵取名为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 时间: 2019-3-10 17:20
本帖最后由 KB.Driver 于 2019-3-10 17:38 编辑
现在的结果也不尽人意，倒影的男神已经跑到了画面之外。
我们应当一边调整精灵的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 时间: 2019-3-10 17:35
本帖最后由 KB.Driver 于 2019-3-10 17:39 编辑
课后练习：
利用本课所学知识，绘制以下场景。
使用素材（RTP）
"Graphics/Titles1/Universe"
"Graphics/Battlers/God"
作者: devil033 时间: 2019-3-10 17:51
本帖最后由 devil033 于 2019-3-10 17:53 编辑
终于又来了一位喜欢讲课的大神了，十分受用，感谢
作者: miantouchi 时间: 2019-3-10 21:32
大神终于开课了！我最新在学习RGSS，这教程来的太是时候了。
作者: 世外游神 时间: 2019-4-28 14:49
图片好美，好喜欢
作者: flyoverland 时间: 2019-5-1 12:36
喜欢编程课，涨知识
作者: hersal 时间: 2020-5-9 11:46
本帖最后由 hersal 于 2020-5-9 12:23 编辑
日历大佬，我有几个问题，
1.男神和背景图都没有设置z坐标，而背景图是后生成的，不是应该覆盖在男神上面吗？
2.（按物理的规律，男神的在水中的倒影应该是镜像，而不是旋转180度，那么镜像该怎么实现呢？） 好吧这个问题在日历君后一篇教学有说，设置sprite.mirror = true
作者: KB.Driver 时间: 2020-5-9 17:27
0.不是大佬。另外抓个虫，由于论坛的关键字替换机制，本来用词是n v神被系统强制替换成了男神。
1.根据VA的F1文档，Z值相同的精灵按照Y值大小决定显示顺序（Y值更大的精灵显示在上），Y值也相同时，较晚生成的精灵显示在上
| 欢迎光临 Project1 (https://rpg.blue/) |
Powered by Discuz! X3.1 |