查看: 7626|回复: 11

[原创发布] 日历的RGSS3入门教程 - 精灵与位图Lv1 初识精灵

[复制链接]
梦石
10
星屑
39550
在线时间
1919 小时
注册时间
2010-11-14
回帖
3214

R考场第七期纪念奖

发表于 2019-3-10 17:03:45 | 显示全部楼层 |阅读模式

加入我们,或者,欢迎回来。

您需要 登录 才可以下载或查看,没有账号?注册会员

×
本帖最后由 KB.Driver 于 2019-3-17 12:28 编辑

前言
前言
★1.面向群体
本教程主要目的是帮助想要编写自己所需的RGSS3代码的编程初学者入门。
此教程不适合想要快速提高编程硬实力的人阅读。
教程中不会用大量笔墨讲解Ruby的语法,只对理解代码作最浅显的解释。
尽管在教程中可能用到一些Ruby中相较于其他语言比较不同的语言特性,本教程并不负责详细解释这些语言特性,而是“会用就行”。
如果在学习中发现不熟悉Ruby语法,可以参考网上的Ruby教程以及其他RGSS教程中讲解Ruby语法的部分。
推荐雷霆大大的 【新手向】RMVA - RGSS3脚本入门教程(施工中)

★2.教学理念
不会大块地讲解理论,而是尽量以需求为主导,从例子出发,通过简单的代码激发学习兴趣。
在教程之后,需要自己在动手完成任务的过程中提升解决问题的能力。



快速开始

★1.如何在RPGMaker VXAce中编写自己的代码
打开脚本编辑器有两种方式。
方式一:
         在菜单上方工具栏找到脚本编辑
方式二:
         在图标中找到脚本编辑
除了这两种方式,还可以用键盘快捷键F11打开脚本编辑器。
2019-03-09_143728.png

打开脚本编辑器后,先将滚动条下拉至最底,找到“▼ 插件脚本”。
在其下方的“(请在此添加)”处,单击鼠标右键,选择“插入”。
之后就可以给新产生的空的一栏命名,并在右方的编辑器内输入自己的代码。

2019-03-09_144331.png
2019-03-09_144942.png



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


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

评分

参与人数 5赞 +5 收起 理由
张咚咚 + 1 精品文章
RMVXA + 1 精品文章
翠靈月 + 1 精品文章
miantouchi + 1 精品文章
Nil2018 + 1 被醋虾

查看全部评分

用头画头像,用脚写脚本
梦石
10
星屑
39550
在线时间
1919 小时
注册时间
2010-11-14
回帖
3214

R考场第七期纪念奖

 楼主| 发表于 2019-3-10 17:04:16 | 显示全部楼层
本帖最后由 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)运行游戏看看效果:
2019-03-09 15-49-42-257.jpg
运行结果显示,画面的左上角出现了一个男神的图像。
下面我们来分析一下这段代码。


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中有什么素材可以打开工程里的媒体库查看。
2019-03-09 15-49-43-257.jpg
2019-03-09 15-49-44-257.jpg
所有媒体库中蓝色圆圈的素材就是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是一个循环语句的关键词,它后面的大括号的内容是用来循环执行的语句。
我们先不要管大括号内的语句是什么,只要知道这一句的意思就是不断地刷新画面。
我们的游戏是在屏幕中显示的,只有让屏幕刷新才能看到图像。



用头画头像,用脚写脚本
回复

使用道具 举报

梦石
10
星屑
39550
在线时间
1919 小时
注册时间
2010-11-14
回帖
3214

R考场第七期纪念奖

 楼主| 发表于 2019-3-10 17:04:50 | 显示全部楼层
本帖最后由 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的环境下学习。
2019-03-09 15-49-42-257.jpg
回过头来看下我们一开始显示的结果,男神的最左边顶着屏幕的最左边,男神的最上边顶着屏幕的最上边,但是我们似乎并没有指定显示的位置。
事实上,精灵(Sprite)的实例存在着x与y两个属性, 它们的默认值为0。
注意这个x和y和初中数学所讲的平面直角坐标系有所不同,如果你有用过Photoshop的话,就会明白这个x与y是以画布的左上角为起点的。
x表示了精灵原点距离画面左侧的距离,而y表示了精灵原点距离画面上端的距离。
2019-03-09_170431.jpg


精灵的原点是ox与oy,它们的默认值同样为0,原点的作用可以参考Photoshop中的原点,它将决定旋转与缩放时的参考点。
原点为图形中心的情况:
2019-03-09_170737.jpg
2019-03-09_170915.jpg



原点为图形左上的情况(RM默认情况):
2019-03-09_171324.jpg
2019-03-09_171418.png


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

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

sprite= Sprite.new
goddess_bitmap= Bitmap.new("Graphics/Battlers/Goddess")
sprite.bitmap= goddess_bitmap
sprite.x = 100 # 可以试试换成你喜欢的值!
sprite.y = 100 # 可以试试换成你喜欢的值!
rgss_stop


运行结果:
2019-03-09_171718.jpg

用头画头像,用脚写脚本
回复

使用道具 举报

梦石
10
星屑
39550
在线时间
1919 小时
注册时间
2010-11-14
回帖
3214

R考场第七期纪念奖

 楼主| 发表于 2019-3-10 17:05:28 | 显示全部楼层
本帖最后由 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




运行结果:
2019-03-09_173718.jpg
看上去似乎有点画面感了。

不过男神既然在湖面上,湖面应该要有倒影。只要将男神旋转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

那么,让我们运行一下看看……
2019-03-09_183718.jpg


奇怪的是,男神倒影没有出现在下方,而是在左边出现了。这里就要重新提到前面所讲的精灵原点了。
由于RM默认的精灵原点是在图像的左上,因此旋转180度的结果就是……

2019-03-09_183719.jpg

难道我们要再调整转完之后的坐标吗?这样总觉得不是滋味。于是这里就要调整精灵的原点坐标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
...

运行结果:
2019-03-09_183720.jpg


用头画头像,用脚写脚本
回复

使用道具 举报

梦石
10
星屑
39550
在线时间
1919 小时
注册时间
2010-11-14
回帖
3214

R考场第七期纪念奖

 楼主| 发表于 2019-3-10 17:20:01 | 显示全部楼层
本帖最后由 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


运行结果:
2019-03-09_183721.jpg

倒影的大小终于可以了,但是倒影给人感觉太亮了。
我们可以调整精灵的不透明度opacity属性来造成一种虚化的感觉。
不透明度的取值为0~255,这里我们取大约一半的128。

#男神倒影精灵
...
reflection_sprite.opacity= 128 # 不透明度(0~255)
rgss_stop


运行结果:
2019-03-09_183722.jpg
现在,我们利用RGSS的精灵与位图,完成了一幅简单的画面。

让我们简单总结一下这一课所学的知识。
一、
Bitmap是RGSS的位图类,可以读取本地图像,充当“胶卷”。
Sprite是RGSS的精灵类,可以把位图按照需求显示在屏幕上,充当“放映机”。
二、
精灵Sprite类的实例有着各种属性,通过修改这些属性可以达到我们的需求。
教程中已提到的属性有:
精灵的位图bitmap
精灵的坐标x与y
精灵的原点坐标ox与oy
精灵的角度angle
精灵的缩放比zoom_x与zoom_y
精灵的不透明度opacity



用头画头像,用脚写脚本
回复

使用道具 举报

梦石
10
星屑
39550
在线时间
1919 小时
注册时间
2010-11-14
回帖
3214

R考场第七期纪念奖

 楼主| 发表于 2019-3-10 17:35:33 | 显示全部楼层
本帖最后由 KB.Driver 于 2019-3-10 17:39 编辑

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

使用素材(RTP)
"Graphics/Titles1/Universe"
"Graphics/Battlers/God"
Game 2019-03-09 19-06-32-890.jpg


用头画头像,用脚写脚本
回复

使用道具 举报

梦石
0
星屑
7650
在线时间
1162 小时
注册时间
2016-9-10
回帖
145

开拓者

发表于 2019-3-10 17:51:58 | 显示全部楼层
本帖最后由 devil033 于 2019-3-10 17:53 编辑

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

使用道具 举报

梦石
0
星屑
15056
在线时间
2230 小时
注册时间
2019-1-24
回帖
964

R考场第七期纪念奖

发表于 2019-3-10 21:32:19 | 显示全部楼层
大神终于开课了!我最新在学习RGSS,这教程来的太是时候了。
回复

使用道具 举报

梦石
0
星屑
143
在线时间
9 小时
注册时间
2019-4-15
回帖
5
发表于 2019-4-28 14:49:29 | 显示全部楼层
图片好美,好喜欢
回复

使用道具 举报

梦石
0
星屑
653
在线时间
2 小时
注册时间
2016-3-2
回帖
2
发表于 2019-5-1 12:36:26 | 显示全部楼层
喜欢编程课,涨知识
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部