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默认情况):




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

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





欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1