（051）Raywenderlich: 怎么用Timeline讲一个笑话

版本

Unity 2020.1.6f1

资源

下载资源

学习内容

1.什么是 Timeline？
2.怎么用 Timeline 触发自定义事件？
3.怎么实现一个自定义对话系统?

设置场景

1.打开 JokeMaching 场景。
2.添加 UI - Image 组件，并命名为 JokeWindow。
3.设置 JokeWinodw 的下列属性：

• Source Image : 为 ChatBubble。

• Color 为 x = 80， y = 0， z = 80。

• width = 1000， Height = 600。

• Pos X = 90，Pos Y = 160。
  4.确认 Packages 中，安装了
  
  5.为 JokeWindow 添加子组件 UI - Text - TextMeshPro ，并命名为 JokeText。设置 JokeText 的属性：

• Width = 600， Height = 200。

• font Size = 50， Vertex Color 为白色。

• 设置字体居中。
  

• Text Input 添加文字：

  There's 10 types of people in the world.
  Those who know binary.
  and those who don't.
  

  

添加喜剧人物

1.添加 UI - Image，并命名为 Comedian。设置 Comedian 的属性为：

• Source Image 为 Comedian。
• Width = 400，Height = 400。
• Pos X = -390，Pos Y = -160。
  
  2.选择 Canvas，设置屏幕的缩放比例
• UI Scale Mode 为 Scale With Screen Size。
• Reference Resolution: x = 1280， y =720。
• Screen Math Mode: Expand。
  
  运行游戏：
  

逐字显示

1.Assets / Scripts 新建脚本 :

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro;

public class Typewriter : MonoBehaviour
{
    private TMP_Text _textBox;

    private float _timePerCharactor = 0.05f;

    private void Awake()
    {
        _textBox = GetComponent<TMP_Text>();
        // 所有字都在一行内
        _textBox.enableWordWrapping = true;
        // 隐藏字体
        _textBox.maxVisibleCharacters = 0;
    }

    private void OnEnable()
    {
        StartCoroutine(Reveal(0));
    }
    
    public IEnumerator Reveal(int startLetterIndex)
    {
        _textBox.ForceMeshUpdate();

        int totalVisibleCharacters = _textBox.textInfo.characterCount;

        for (int i = startLetterIndex; i < totalVisibleCharacters; i++)
        {
            _textBox.maxVisibleCharacters = i + 1;
            yield return new WaitForSeconds(_timePerCharactor);
        }

        _textBox.maxVisibleCharacters = totalVisibleCharacters;
    }
}

2.挂载到 JokeText 物体上。

理解Timeline

1. Timeline Asset：通过 Timeline Window 创建的文件。
2. Timeline Track：一系列相似的动画帧。
3. Playable Director GameObject：Timeline Asset 和 GameObject 的纽带。
4. Signal Emitter
5. Signal Receiver
6. Signal Asset

准备材料

1.创建一个空的 GameObject，命名为 Timeline。
2.Window - Sequencing - Timeline，打开 Timeline Window 窗口。
3.选中步骤一新建的物体 Timeline，点击 Timeline Window 的 create 按钮，将新建的文件命名为 JokeTimeline，并保存到 Assets / RW / Timeline。勾选 Play On Awake：

激活物体

1.拖动 Comedian 到 Timeline Window 的左侧窗体，选择 Add Activation Track：

2.点击 Timeline Window 右上角的设置按钮，选择 Seconds。设置 Comedian Clip 的在 [0:00 - 20:00] 之间。


2.对 JokeWindow 重复上面的操作，动画帧设置在 [2:00 - 18:00]。
3.运行游戏，查看效果。

Timeline 节奏控制：信号发送

1.信号系统组成包括三个部分：

• Signal Emitter
• Signal Receiver
• Signal Asset
  2.在 Typewriter.cs 文件中，添加类：

public class Typewriter
{
	...
}

public class Dialog
    {
        // 要发送的文本
        public string Quote;
        // 控制每个字母出现的间隔
        public float PausePerLetter;
        // 控制是否开启新的对话
        public bool NewPage;
        // 控制是否开启新行
        public bool NewLine;
    }

3.在 Assets / RW / Scripts 中，新建脚本 JokeMarker.cs。

using UnityEngine;
using UnityEngine.Playables;
using UnityEngine.Timeline;

public class JokeMarker : Marker, INotification
{
    [SerializeField] private string quote = "";

    [SerializeField] private float pausePerLetter = 0.1f;

    [SerializeField] private bool startNewPage;

    [SerializeField] private bool startNewLine;

    public string quote1 => quote;

    public float pausePerLetter1 => pausePerLetter;

    public bool startNewPage1 => startNewPage;

    public bool startNewLine1 => startNewLine;

    public PropertyName id => new PropertyName();
}

2.在 Typewriter.cs 中，增加 函数：

...
public class Typewriter
{
	...
	 public void AddDialog(Dialog message)
    {
        
    }
	...
}

3.挂载 JokeReceiver.cs 脚本到 JokeText，并且将 Typewriter 分配到 JokeReceiver - Dialog Animator字段上。

信号处理

1.修改 Typewriter.cs 脚本的函数 AddDialog 函数：

 public void AddDialog(Dialog message)
    {
         _timePerCharactor = message.PausePerLetter;

        if (message.NewPage)
        {
            _textBox.maxVisibleCharacters = 0;
            _textBox.text = message.Quote;
            StartCoroutine(Reveal(0));
        }
        else
        {
            int currentLetterIndex = _textBox.maxVisibleCharacters;

            if (message.NewLine)
            {
                _textBox.text = string.Concat(_textBox.text, "\n", message.Quote);
            }
            else
            {
                _textBox.text = string.Concat(_textBox.text, " ", message.Quote);
            }

            StartCoroutine(Reveal(currentLetterIndex));
        }
    }

接收信号

1.在 Assets / RW / Scripts 中，新建脚本 JokeReceiver.cs。

using UnityEngine;
using UnityEngine.Playables;

public class JokeReceiver : MonoBehaviour, INotificationReceiver
{
    [SerializeField] private Typewriter dialogAnimator;

    public void OnNotify(Playable origin, INotification notification, object context)
    {
        if (notification is JokeMarker dialog && dialogAnimator != null)
        {
            var newdialog = new Dialog()
            {
                Quote = dialog.quote,
                PausePerLetter = dialog.pausePerLetter,
                NewPage = dialog.startNewPage,
                NewLine = dialog.startNewLine
            };

            dialogAnimator.AddDialog(newdialog);
        }
    }
}

2.删除 Typewriter 的 onEnable 函数。

创建 JokeTrack

1.在 Assets / RW / Scripts 中，新建脚本 JokeTrack.cs。

using UnityEngine.Timeline;

[TrackBindingType(typeof(JokeReceiver))]
[TrackColor(255f/255f, 140f/255f, 0f/255f)]
public class JokeTrack : MarkerTrack
{
}

开始讲笑话

1.打开 Asssets / Rw / Timeline / JokeTimeline.playable，选中 Timeline 物体。
2.拖动 JokeText 到 Timeline window 的左侧窗体，选择 Add Joke Track。
3.点击 Timeline window 的 3:00 秒的标记点，右键 JokeTrack ，并且选择 Add Joke Marker 。

3:00 秒标记：

• Quote : There’s 10 types of people in the world.
• Pause Per Letter: 0.05
• Start New Page: true
• Start New Line: false

7:00 秒标记：

• Quote : Those who know binary,
• Pause Per Letter: 0.1
• Start New Page: false
• Start New Line: true

11:00 秒标记：

• Quote : and those who don’t!
• Pause Per Letter: 0.01
• Start New Page: fale
• Start New Line: true

14:00 秒标记：

• Quote : 01 01 01 01 01 01 01 01
• Pause Per Letter: 0.03
• Start New Page: true
• Start New Line: false

4.运行游戏。

[1] how-to-tell-a-joke-with-unity-timeline