Brackeys系列学习实战--塔防游戏解读【1】

小米

https://www.zhihu.com/video/1516037382473916416
这个开头真是令我泪奔。。。最爱的Brackeys，在油管上的受欢迎度举世瞩目。他的教程有趣，也并不涉及高级复杂的语法，总是笑脸的的brackeys真是让人不舍他这个频道的停更。
于是我决定要再复习一下他的课程。
今天筹备从头快速学习一下这个有趣的游戏，但愿能带你一起入坑unity开发。。。


游戏源码github地址：git@github.com:pikaqi-dot/Tower-Defense-Tutorial.git
在开始运行前请确保游戏场景都在build setting中已经插手：


游戏玩法：


https://www.zhihu.com/video/1516090420731420672
主菜单场景



看层级场景视图：


SceneFader

在SceneFader场景对象上挂载着SceneFader.cs脚本

1. using UnityEngine;
2. using UnityEngine.UI;
3. using UnityEngine.SceneManagement;
4. using System.Collections;
6. public class SceneFader : MonoBehaviour {
8.         public Image img;
9.         public AnimationCurve curve;
11.         void Start ()
12.         {
13.                 StartCoroutine(FadeIn());
14.         }
16.         public void FadeTo (string scene)
17.         {
18.                 StartCoroutine(FadeOut(scene));
19.         }
21.         IEnumerator FadeIn ()
22.         {
23.                 float t = 1f;
25.                 while (t > 0f)
26.                 {
27.                         t -= Time.deltaTime;
28.                         float a = curve.Evaluate(t);
29.                         img.color = new Color (0f, 0f, 0f, a);
30.                         yield return 0;
31.                 }
32.         }
34.         IEnumerator FadeOut(string scene)
35.         {
36.                 float t = 0f;
38.                 while (t < 1f)
39.                 {
40.                         t += Time.deltaTime;
41.                         float a = curve.Evaluate(t);
42.                         img.color = new Color(0f, 0f, 0f, a);
43.                         yield return 0;
44.                 }
46.                 SceneManager.LoadScene(scene);
47.         }
49. }

复制代码

定义了两个协程FadeIn和FadeOut，并在开始时调用FadeIn。公开变量会序列化显示在面板上。



声明AnimationCurve属性的变量可以获得调整曲线


并用AnimationCurve.Evaluate方式传入曲线横轴数值，返回纵轴数值。


注意到FadeIn是从1减到0，FadeOut是从0加到1。则正是横轴从左到右和从右到左读取的效果。
可以看到Img插槽里是该预制体内的子物体Black,它的属性检视面板：


Image组件是unity自有的，其下的color属性：


可以看到第四个值是A，代表着透明度，试着拉一下就知道0是透明，1是全黑。由此就与曲线对应上了。
脚本里面的

1. float a = curve.Evaluate(t);
2. img.color = new Color(0f, 0f, 0f, a);

复制代码

也正是该用意。
UI场景对象的标签：


其位置信息的组件：【Rect代表着矩形的意思】


注意和Transform组件的区别。它有Anchors和Pivot，以及定位东西。

<hr/>

我们可以看到RectTransform 的父类为 Transform，我们可以把RectTransform看做Transform的升级版

   Transform用RectTransform的方式需要向下转型
(Transform as RectTransform)
    RectTransform也可以直接用Transform接收可以直接向上转型
Trasnform tr = GetComponent<RectTransform>();

RectTransform也可以直接用Transform接收可以直接向上转型
Transform(针对非UI)、RectTransform（针对UI）
Anchors是在子类锚在父类上的点，因此如果没有父类（RectTransform），那么RectTransform属性面板上的Anchor Presets将不成设置，但Anchors仍可设置。

新建GameObject的时候，会自动创建一个负责打点大小、坐标等信息的控件Transform



而新建2D Object（Sprite）或者UI下的其他控件时，则Transform变成了RectTrasnform。 假如创建的GameObject下有UI对象且需要进行自适应的操作，则可以在此GameObject下再添加一个RectTransform的控件，Unity会提示是否替代本来的Transform控件，这时选yes即可。 变成RectTransform之后：



<hr/>



下面这个东西我没咋用过




Canvas Renderer


再来看该预制体下的Canvas子物体，它的属性检视面板


这里的组件要注意，Canvas组件的Render Mode属性选择

canvas的Render Mode共有三种模式：Screen Space -OverLay、Screen Space-Camera、World Space。
creen Space -OverLay：Camera相机的感化就是把它所投射获取到的界面当做UI界面。一般情况下，UI界面只是一个二维平面，所以把相机的投影设置为Orthographic，即正交投影，Culling　Mask设置为UI，暗示只显示跟UI层相关的信息，接着再调整一下相机的Size，让他的大小与Canvas的保持一致，最后再设置一下相机的Z值，保证Canvas在相机之前。
Screen Space -OverLay：可以理解为Unity为你自动设置好了UICamera，而且这个相机的Depth值是大于100的（相机能设置的最大Depth值为100），所以永远显示在最前面。此模式UICamera的Z值应该是-1000，所以Z值只要大于-1000并在UICamera的正交投影范围内，就有可能显示的UI界面上。【PS depth和z值要区分清楚】
World Space就更简单了，就是把UI当做三维物体来措置。
参考unity 搞懂Canvas的Render Mode的三种模式

该脚本的最后一条:

1. SceneManager.LoadScene(scene);

复制代码

加载场景。记得要在开头引入：

1. using UnityEngine.SceneManagement;

复制代码

如果项目复杂的话还需要引入定名空间 namespace，这样可以减少冲突。
MainMenu



打开MainMenu.cs脚本

1. using UnityEngine;
2. using UnityEngine.SceneManagement;
4. public class MainMenu : MonoBehaviour {
6.         public string levelToLoad = ”MainLevel”;
8.         public SceneFader sceneFader;
10.         public void Play ()
11.         {
12.                 sceneFader.FadeTo(levelToLoad);
13.         }
15.         public void Quit ()
16.         {
17.                 Debug.Log(”Exciting...”);
18.                 Application.Quit();
19.         }
21. }

复制代码

这里通过在面板上拖放来获得SceneFader场景对象身上的SceneFader脚本引用实例，并调用此中的公共方式FadeTo。
Application.Quit();退出
Main Camera



Directional Light





GroundPlane







StandardTurret









注意此时render mode 为world space,Rect Transform 组件调参数。



https://www.zhihu.com/video/1516372349004185600




注意此时Button组件的Transition属性为Animation。动画控制控制的是Button







https://www.zhihu.com/video/1516163552822419456


EvenySystem





画布衬着器


画布衬着器 (Canvas Renderer) 组件用于衬着画布中包含的图形 UI 对象。


属性

画布衬着器在 Inspector 中没有公开属性。
详细信息

菜单 (GameObject > Create UI) 中提供的尺度 UI 对象全部都可以在任何需要的处所附加画布衬着器，但对于自定义 UI 对象，可能需要手动添加此组件。虽然 Inspector 中没有公开属性，但可通过脚本访谒一些属性和函数；请参阅脚本参考中的 CanvasRenderer 页面以了解完整的详细信息。