这个课程源自b站Up主M_Studio,链接:https://space.bilibili.com/370283072
这个系列都是我自己的学习笔记,以供以后查看
Session01:安装软件&导入素材
比较简单,跳过了。
Session02:编辑素材& Tilemap
导入背景图
直接将背景图片拖到Hierarchy窗口,默认坐标就是(0,0)
![image-20211020150727289](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020150727289.png)
导入素材发现这个背景的pixels per unit是100,也就是每个小格子包含100*100个像素点
![image-20211020150825467](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020150825467.png)
这样图片导入进去会非常小,就像这样,因为back是384*240的,所以可以看到宽度为3.8个格,高度为2.4个格
![image-20211020150859672](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020150859672.png)
我们把它修改为16,也就是每个单元格有16*16的像素,就能正常显示了
![image-20211020150949861](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020150949861.png)
创建场景
2D游戏中有一个非常常用的功能,叫做TileMap(瓦片地图),我们可以直接在Hierachy中创建它
![image-20211020151628921](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020151628921.png)
可以看到屏幕中出现了很多网格,我们就是要在这些网格上画东西,为了方便,我们先将back隐藏:
![image-20211020151809894](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020151809894.png)
要在这些“瓦片”上画东西,需要使用Tile Palette,可以在window->2d找到
![image-20211026110548998](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211026110548998.png)
打开之后就是这样的:
![image-20211020155541223](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020155541223.png)
这里有两张图片,一个是已经“切好的”,一个是没有切过的,这里演示一下具体是怎么切的
![image-20211020155647213](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020155647213.png)
选中tileset,在inspector窗口里修改以下选项
![image-20211020155835060](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020155835060.png)
Sprite介绍
以下引自知乎:https://www.zhihu.com/question/51438507
Sprite直接翻译过来是精灵,在游戏开发中,可以独立于背景独立移动的二维位图被称为Sprite,它们可以有独立的屏幕坐标、帧率、周期等等,在最终渲染时,它们会与背景等一起被合成为你看到的每一帧画面。
对于早期的视频游戏,这种合成并非像现在用GPU来做,而是通过电路、显像管等硬件在显示器逐行扫描时实现的。由于这些可被移动的对象(movable objects)并不属于显存(framebuffer)中的位图数据,而像是“浮”在之上的,就像鬼或者小妖精(Sprite)一样,因此得名。
随着CG的发展,Sprite的含义也得到拓展,只要是用于合成的相对独立的二维位图,都可以被称作Sprite,比如Flash等游戏引擎中就有使用Sprite这样的概念。另外,游戏中的Sprite通常都有自己的状态、动画,所以美术师和程序员会通过SpriteSheet这样的素材进行合作。
通过导出导入SpriteSheet的各种坐标信息,程序员就可以直接获得设计师设计好的动画效果,并且直接运用在游戏开发中。
这种做法被前端工程师以节省网络I/O(即HTTP请求线头阻塞)的目的借鉴去之后,就沿用了Sprite这个名字,配合CSS background-position,便可以做到在一张大图中切出各个小图的目的。
切割图片
调整好参数后,点击Sprite Editor
![image-20211020161959877](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020161959877.png)
将Type改为Grid By Cell Size,Pixel Size改为16*16(因为之前设置的一个单元格16个元素,这样设置之后就是一个单元格一个图片),点击Apply,就切割好了
绘制场景
把切割好的图片拖到Tile Palette,就可以进行绘制了
![image-20211020162230124](https://image-ym.oss-cn-guangzhou.aliyuncs.com/img/image-20211020162230124.png)