Live Sessions On UI

官方UI教程第2辑

---------------------------

1.The New UI

对4.6版本的UI系统的介绍 (...4.6!)

三种不同的UI效果对应的三种Canvas

Live Sessions On UI


非常详细复杂的讲了父Anchor和子Pivot的互相影响,这种设置主要是为了使UI适应各种屏幕尺寸比(所以最后平台移植时再说吧)


--------------------------------

2. Using the UI Tools


1. 利用Survival Shooter的游戏资源,给Player加了头像和生命条,蓝条(子弹数)。

2. 给每个Enemy加了头像和生命条

(每个被射击的Enemy会在游戏右上角显示该Enemy的头像和生命条,切换射击对象将切换对应头像&生命条)。


3.暂停游戏

在原来的HUDCanvas下新建Button命名为Pause Button。

Live Sessions On UI


再在Hierarchy下新建Canvas命名为PausedCanvas,新创建脚本命名为PauseManager,打开并编辑

Live Sessions On UI


然后把该脚本挂到PauseCanvas上。

在PauseCanvas下新建Panel,摁住shift把Panel调到适中大小,然后在Anchor Present里摁住shift+alt点击居中调整Panel到中心位置。

然后把对应的图片拖到Panel的Source Image里。

Live Sessions On UI


Panel下新建Button命名为Resume Button,拖入合适的Source Image把字体调整到合适。

复制Button命名为Quit Button并修改text。然后Anchor Present里修改两个Button,摁住Alt+Shift一个在左下角,一个在右下角。稍微再往上调整一下。

Live Sessions On UI


在两个Button下新加OnClick,把PauseCanvas拖进去,然后再选择脚本里对应的同名方法。

回到HUDCanvas的Pause Button下,新加OnClick把PauseCanvas拖进去,方法选择Pause()。

然后就可以运行游戏了(不需要把Panel或者PauseCanvas隐藏,它会在游戏运行开始自动隐藏...我也不知道为啥,见50:00)。


4. 调整音量大小的Slider

在PauseCanvas下新建Slider命名为Music Volume Slider,用来调整背景音乐音量。分别把FillArea,Fill和Handle的图改成对应的图。

摁住Alt拖动Slider大小,将左右对称的拉长Slider。

Panel下新建Text内容修改为:Music Volume,修改字体大小位置等。

复制Slider和Text,命名为FX Volume Slider,用来调整音效音量。拖动到合适的位置(选中这两个,摁住shift拖动会上下动,不会左右动)。

Live Sessions On UI


背景音乐的Slider下新加OnValueChanged,把BackgroundMusic 游戏对象拖进去。

BackgroundMusic:

Live Sessions On UI


选择AudioSource里的Volume。

Live Sessions On UI



特效的Slider同样把Player下的GunBarrelEnd拖入,选择Volume。


完毕。

----------------------------------------------

3.Game jam menu template

Live Sessions On UI


就是这样一个基本游戏设置的资产包的说明,跳过该教程。

完毕。

-------------------------------------------------------------------

4.Creating a scene selection menu

在此教程(2014.11.24, 4.6Beta)中,我们将创建一个可以选择加载关卡的UI界面


1.基础设置

教程中将导入Sample Assets(Beta),但该资源现在已不存在,所以我会用其他资源拼。

新建Text命名为NIGHT SKY

Live Sessions On UI


复制该Text组件,新建button命名为Level1 Button,在button的text里paste component as value,并调整位置。

Live Sessions On UI


新建脚本命名为LoadOnClick,挂在Canvas上,编辑:

Live Sessions On UI


level1 button新建事件,把Canvas拖进去

Live Sessions On UI


保存该场景命名为Main,新建场景命名为Level1

在该场景里新建text内容为Level1 was loaded.

打开Build Settings 把场景拖入,注意Main在前。

Live Sessions On UI


回到Main,播放测试,点击level1 button则加载了level1场景。因为Level1场景里几乎是空的,所以加载的很快。


接着新建场景了level2,添加若干Assets包里的模型,比如cube等,然后添加新Build Settings里。

Live Sessions On UI


回到Main,复制level1 Button,命名为Level2 Button,修改位置和内容。

Live Sessions On UI


播放测试,在教程里因为添加了很多加载慢的对象,所以大概花了5秒才加载出来。

通常我们做的游戏场景里都有很多东西,加载起来会很慢。玩家面对这种情况,比如点击加载第2场景,什么都没发生(要等5秒)于是玩家以为卡了,不停的点加载加载,boom!

所以要添加一个过场动画/过场图片。


2. 进阶功能


1.过场图片

一般添加过场动画/图片都是为了把button界面挡住,不让玩家不停的点击。

Main场景里新建Image命名为LoadingImage,设置为铺满屏幕,颜色为黑。再新建Text命名为LoadingText,修改内容为Loading。

Text设为Image的子对象,这样我们可以同时隐藏二者。

最后点击Image取消勾选,隐藏。

Live Sessions On UI


脚本里添加

Live Sessions On UI


保存后回到Unity把LoadingImage拖入引用。点击测试,可行。


2.切换场景时保留对象

一般切换场景时所有场景内的对象都销毁再加载新场景内的对象。有时我们需要在切换场景时保持某些对象一直存在(比如GameManager,背景音乐,某些UI等)。

这里我们将学习添加一个背景音乐,并在切换时保持。


Main里新建空对象,命名为BackgroundMusic,添加AudioSource组件,勾选PlayerOnAwake和Loop。随便拖入某段音频。

记得该音频取消勾选3D,并Apply。因为我们不想它随着相机的远近改变音量。

Live Sessions On UI


新建脚本命名为DontDestroy,挂在BackgroundMusic上。

Live Sessions On UI


点击测试,成功。


但比如level2场景我们想切换一个背景音乐。我们将使用OnLevelWasLoaded方法


3.场景切换时执行某些功能

该方法的定义

Live Sessions On UI


Roguelike2D里的使用

Live Sessions On UI


新建脚本命名为ChangeMusic,编辑

Live Sessions On UI


注意参考来源

Live Sessions On UI


另外:比如level2可以返回Main的话,我们会发现有两个背景音乐对象。解决这个问题的方法是一般首个场景0号为Persistent Scene(就像Adventure Game里一样)专门用来加载一系列Manager,这个场景永远不会切换回来,就避免了此类问题。


一般这种Persistent Scene切换其他场景不是从A→B,而是在Persistent上叠加其他场景,即Additive模式。


4.叠加其他场景

复制Button2,命名为button3,记得让levelimage在canvas的最底层以挡住所有其他元素。

新建脚本命名为LoadAdditive,编辑

Live Sessions On UI


在Canvas上挂上该脚本。

Button3上添加事件

Live Sessions On UI


保存当前场景,新建场景Scene3。

在场景3里添加一些对象以区分。需要注意的是,一个场景里只能有一个Audio Lisener,一般都挂在Main Camera上,所以把场景3的Main Camera去掉。(在实际游戏操作中,基场景Persistent Scene一般不添加任何Camera,所以其他场景里的Main Camera需要保存,但每次只叠加一个场景避免重复,叠加下一个场景B时需要把上一个场景A卸掉。)

把Scene3添加进Build Settings。

Live Sessions On UI


点击测试,成功叠加了level3(即又有Main场景元素,又有叠加场景元素)。


5.异步加载场景

异步加载场景的意思是在当前场景仍在播放状态下,背景式的加载另一个场景(比如加载进度条,进度条时当前场景,正在加载的场景则处于异步加载状态)。

LodingImage下新建Slider,取消勾选Interactable,删去Handle,填充颜色改为蓝色。

Live Sessions On UI


新建脚本命名为ClickToLoadAsync挂在Canvas上,打开并编辑

Live Sessions On UI


Live Sessions On UI


回到Unity,拖入Slider和Image的引用,把Button2的事件改为上面的方法。

Live Sessions On UI


比如先播放加载场景同时播放2秒的过场动画(商标),则可用

Live Sessions On UI


Live Sessions On UI


Hierarchy下隐藏Image,点击测试,成功。(只是我的场景内容太少了,所以几乎看不清就加载成功了)


还有在教程里说这个功能只用于Pro,目前好像是免费版也可以用。


完毕。