《土豆荣耀》重构笔记(三)创建游戏场景

前言

  为了记录重构笔记的进度,我在Github上创建了一个名为PotatoGloryTutorial的Repository,里面的每个分支都记录着对应文章所做的修改。因为篇幅有限,很多具体的细节不会一一赘述,本篇文章对应的分支为essay1,读者可以将PotatoGloryTutorial这个仓库clone至本地之后切换到essay1分支,以便查看具体的细节。


导入资源

  打开Unity(2017.3.0f3),点击New,创建一个名为PotatoGloryTutorial2D项目:

创建项目

  打开Unity界面之后,我们需要导入资源。前面提到过,本项目大部分素材来源于Unity Assets Store上一个免费的package 2D Platformer,因此可以直接在Asset Store上Download并Import。

Asset Store

  需要注意的是,2D Platformer是一个完整的项目,里面还包含了很多脚本,里面有很多写得很不错的代码,有兴趣的读者可以直接下载下来参考。此外,2D Platformer里面还包含已经制作好的AnimationPrefab,不想浪费时间自己从头制作的读者可以直接下载2D Platformer后删除脚本文件,直接使用2D Platformer提供的资源。

  在这里,因为本项目的脚本不完全和2D Platformer一致,所以我们不直接下载完整的项目,而是导入我预先准备好的资源package。下载完成之后,在Unity上方的菜单栏找到Assets选项,点击Assets->Import Package->Custom Package...,然后找到自己下载好的PotatoGlory.unitypackage,然后点击Import导入全部资源。

导入资源

调整Unity布局

  在正式开始搭建游戏背景之前,为了提高开发的效率,我们还需要调整一下Unity界面的布局。点击右上角的Layout按钮,会出现一个下拉菜单。

Layout

  个人最喜欢的布局方案是2 by 3,大家可以根据自己的喜好进行选择。选择2 by 3方案之后,我们还需要做一些小调整,将Project窗口拖动到Hierarchy窗口下方。当然,这个调整只是出于我个人的习惯,读者可以选择不调整,也可以根据自己的喜好调整其他窗口,调整的方法都是鼠标单击窗口上方的选项卡,然后按住不放进行拖动

  调整完成之后,再次点击Layout,选择Save Layout...,将其命名为Favorite,然后点击Save。这样,我们就新建了一个名为Favorite的布局,以后就可以通过选择Favorite来快速恢复到我们现在调整的布局了。我们最终调整完成的布局如下所示:

调整后的布局

创建游戏场景

  做好前期准备之后,终于进入我们今天的主题——创建游戏场景了。首先,我们右击在Project窗口下的Assets文件夹,然后选择Create->Folder来创建一个名为Scenes的文件夹,用于保存我们的游戏场景。然后直接按快捷键Ctrl + S,将Unity默认打开的Untitled场景保存到Scenes文件夹下,并将其命名为SinglePlayerGameScene.unity

创建游戏场景

设置Aspect

  接着,因为我们最后的目标是做成一个Android手机游戏,所以我们还需要Game窗口下设置一个Aspect来预览在手机上运行的效果。这里,我们创建一个固定分辨率为1920x1080的Aspect,并将其命名为Android

设置Aspect

放置Sprite

  创建好Aspect之后,我们将Sprites\Environment目录下的图片env_bgProject窗口直接拖动到Hierarchy窗口里,可以看到在场景中出现了一张天空的背景图,但在Game窗口中,这张图片的可见范围很小。我们需要调大Main CameraSize,使其能看到更大的范围,这里,我们将其设置为11

调整Main Camera

  调整完Camere之后,我们继续通过拖拽往场景里面添加其他的素材。但奇怪的是,在添加素材的过程中,有可能出现后面拖进去的素材在SceneGame窗口里看不到的情况。这是因为在Unity里,摄像机按照从远到近的顺序来渲染物体,后渲染的物体会覆盖在先渲染的物体之上。而对于在摄像机投影方向上距离摄像机距离一样的物体,它们的渲染顺序是随机的

  想要保证物体A物体B之后渲染,我们可以设置物体B在摄像机投影方向上与摄像机的距离比物体A近。在Unity的2D项目中,默认使用的是Orthographic Camera,也就是正交摄像机,其投影方向为Z轴的正方向,默认垂直于屏幕。因此,我们只需要按照物体的前后关系来设置它们的z坐标的大小即可。但如果这样做,当场景中的物体增多时往往会出现记不清其他物体坐标的问题,不仅难以管理,而且效率也低。


Sorting Layer

  为了解决这一问题,Unity在Sprite Renderer组件中提供了Sorting LayerOrder In Layer属性让我们使用。Unity在渲染Sprite时,首先根据按照Sorting Layer的渲染顺序来渲染Sprite,如果两个Sprite处于相同Sorting Layer,那么就按照它们Order In Layer的值从小到大进行渲染。倘若两个SpriteOrder In Layer的值也相同,再按照在摄像机投影方向上距离摄像机距离的距离远近、也就是Z轴上的坐标来渲染。

  选中场景中的env_bg,然后在Inspector窗口,点击Add Sorting Layer...。打开Sorting Layer管理界面后,点击右下角的+创建BackgroundForeground两个Sorting Layer,并用鼠标选中Background将其拖到Default上方。创建完毕之后,已有的Sorting Layer如下所示:

设置Sorting Layer

  在Unity中,Sorting Layer的渲染顺序为从上到下渲染,也就是说,Unity会先渲染所有Sorting LayerBackgroung的Sprite,然后绘制所有Sorting LayerDefault的Sprite,最后绘制所有Sorting LayerForeground的Sprite。

了解了Sorting Layer的使用之后,我们往场景中添加剩下的所有Sprite,场景中所有的Sprite及其属性如下:

  • env_bg:
    • Position: (0, 0, 0)
    • Sorting Layer:Backgroung, Order In Layer: 0
  • env_cloudTop:
    • Position: (0, 0, 0)
    • Sorting Layer:Backgroung, Order In Layer: 1
  • env_BigBen:
    • Position: (0, 0, 0)
    • Sorting Layer:Backgroung, Order In Layer: 1
  • env_Bank:
    • Position: (0, 0, 0)
    • Sorting Layer:Backgroung, Order In Layer: 2
  • env_RiverBase:
    • Position: (0, -11, 0),Scale(2, 1, 1)
    • Sorting Layer: Backgroung, Order In Layer: 3
  • env_TowerFull:
    • Position: (-22, 0, 0), Scale(1, 1, 1)
    • Sorting Layer: Foreground, Order In Layer: 0
  • env_TowerFull (1):
    • Position: (22, 0, 0), Scale(-1, 1, 1)
    • Sorting Layer: Foreground, Order In Layer: 0
  • env_PlatformBridge:
    • Position: (-12.3, -11.2, 0), Scale(1, 1, 1)
    • Sorting Layer: Foreground, Order In Layer: 1
  • env_PlatformBridge (1):
    • Position: (12.3, -11.2, 0), Scale(-1, 1, 1)
    • Sorting Layer: Foreground, Order In Layer: 1
  • env_PlatformTop:
    • Position: (-14.4, 0, 0), Scale(1, 1, 1)
    • Sorting Layer: Foreground, Order In Layer: 1
  • env_PlatformTop (1):
    • Position: (14.4, 0, 0), Scale(-1, 1, 1)
    • Sorting Layer: Foreground, Order In Layer: 1
  • env_PlatformUfo:
    • Position: (0, -4.62, 0)
    • Sorting Layer: Foreground, Order In Layer: 2
  • env_UfoLegs:
    • Position: (0, -1.44, 0)
    • Sorting Layer: Foreground, Order In Layer: 2

组织场景中的物体

  将所有的Sprite添加进去之后,我们发现场景中的物体太多,不太雅观。为了方便管理,我们可以使用Empty GameObject来组织场景中的物体。在Unity中,Empty GameObject只有Transform这一个组件,可以当作空节点用来组织、管理其他的物体。

  在Hierarchy窗口右击鼠标,选择Create Empty,然后在Inspector窗口将其命名为Background,并ResetTransform组件的属性值。

设置Empty GameObject属性

  接着我们用同样的方法,创建另外一个命名为ForegroundEmpty GameObject,并重置其Transform组件的属性值。创建完毕之后,我们在Hierarchy窗口中,将Sorting LayerBackground的物体拖到空物体Background下成为其子物体,将Sorting LayerForeground的物体拖到空物体Foreground下成为其子物体,最后,Hierarchy窗口的结构如图所示:

场景物体组织结构

后言

  因为这是本系列第一篇讲解项目具体制作过程的文章,有些地方写得比较详细,也用了比较多的截图来说明一些基础操作。在后面的文章中,对于一些已经介绍过、或者比较简单的基础操作,将会使用文字描述。最后,本篇文章所做的修改,可以在PotatoGloryTutorial这个仓库的essay1分支下看到,读者可以clone这个仓库到本地进行查看。


参考链接

  1. Unity的Sprite Renderer组件
  2. Sorting Layer
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容

  • This article is a record of my journey to learn Game Deve...
    蔡子聪阅读 3,595评论 0 9
  • 一、Unity简介 1. Unity界面 Shift + Space : 放大界面 Scene界面按钮渲染模式2D...
    MYves阅读 8,042评论 0 22
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,098评论 0 10
  • 李克富‖将BUG激活 今天的作业是:再阅读几遍(三个)归因原则,争取别再糊涂! 读了老师的文章,心理惭愧的...
    陈加茂阅读 6,899评论 0 0
  • 图像的RGB色彩模式 RGB三个颜色通道的变化和叠加得到各种颜色,其中 R 红色,取值范围,0‐255 G 绿色,...
    夏天才爱睡觉阅读 1,091评论 0 0