【Lesson 1】如何製作開頭動畫/影片 How to make opening video/animation

【Lesson 1】如何製作開頭動畫/影片 How to make opening video/animation

   下午3:54       林子安

---

【影片播放/Movie player】

遊戲製作中常常開頭就會放一個影片，所以今天就來分享製作方式

在Unity5中有三種播放影片的方式，主要是透過MovieTexture()，透過貼圖的方式渲染出影片

1. 藉由投射在Panel來播放(如果用VR可以移動視角)
2. 直接在GUI上播放
3. 行動裝置無法使用MovieTexture，所以有另外一種解法是Handheld.PlayFullScreenMovie()

Unity適用影片格式：PC需要安裝Quicktime播放器

 .mov、.mpg、.mpeg、.mp4、.avi、.asf(PC限定，可以做為測試時使用)

.ogg / .ogv (Moblie Device Only移動裝置限定)

預先動作是將目標影片拖曳進Project中，建議特別新增一個folder專門存放影音圖檔等Assets，不然檔案一多的時候Project裡面就會變得十分雜亂。

如果影片中含有音檔，會自動產生Audio檔，之後記得也要跟著拖到Panel

※以下的Script是為了展示API功能包含播放、暫停與停止等
實際上做開頭動畫就不用特別畫GUI來給別人播放暫停，是直接在Start放movTexture.Play()

【方法1】
在Hierarchy視圖中

1. 創建一個Plane
2. 創建Directional light照亮Plane
3. 創建Main Camera對著Plane(可以利用2d場景來固定)
4. 創建MoviePlayer.cs，拖曳到Plane上

	using UnityEngine;
	using System.Collections;
	public class MoviePlayer: MonoBehaviour
	{
	public MovieTexture movTexture; //影片紋理
	void Start()
	{
	GetComponent<Renderer>().material.mainTexture = movTexture; //設置當前對象為主紋理為影片紋理(這邊我有做修正)
	movTexture.loop = true;//設置循環撥放，如果要當開頭的話可以設計成不循環然後自動切場景下面會再提
	}
	void OnGUI()
	{
	if(GUILayout.Button("Play"))
	{
	if(!movTexture.isPlaying)
	{movTexture.Play(); //播放與繼續 }
	}
	if(GUILayout.Button("Pause"))
	{movTexture.Pause();//暫停播放 }
	if(GUILayout.Button("Stop"))
	{ovTexture.Stop();//停止播放 }
	}
	}

view raw Unity_MovieTexture.cs hosted with ❤ by GitHub

	using UnityEngine; using System.Collections;
	public class MoviePlayer: MonoBehaviour
	{
	public MovieTexture movTexture; //影片紋理
	void Start()
	{
	GetComponent<Renderer>().material.mainTexture = movTexture; //設置當前對象為主紋理為影片紋理(這邊我有做修正)
	movTexture.loop = true;//設置循環撥放，如果要當開頭的話可以設計成不循環然後自動切場景下面會再提
	}
	void OnGUI()
	{
	if(GUILayout.Button("Play"))
	{
	if(!movTexture.isPlaying)
	{movTexture.Play(); //播放與繼續 }
	}
	if(GUILayout.Button("Pause"))
	{movTexture.Pause();//暫停播放 }
	if(GUILayout.Button("Stop"))
	{ovTexture.Stop();//停止播放 }
	}
	}

 如下圖所示，點擊按鈕後輕鬆的實現播放、暫停、停止操作。預設影片大小各位可在編輯器直接縮放Plane對象平面，而如果需要在遊戲運行中動態的縮放平面使用方法：

transform.localScale = new Vector(1,1,1);

模型預設縮放係數為1，這裡可以調節平面X、Y、Z三個方向的縮放係數，平面的大小會隨之改變，對應影片的大小也會隨之改變。

【方法2】

第二種播放視頻的方式基於GUI。
可以不用新增Plane&Directional light
創建 MoviePlayer2.cs，將以下Script套進Camera中即可

using UnityEngine;

using System.Collections;

public class MoviePlayer2: MonoBehaviour

{

 //影片紋理

 public MovieTexture movTexture;

 void Start()

 {

  //設置是否循環撥放，這邊設定開頭撥放完就跳轉場景所以不需要Loop

  movTexture.loop = false;

 }

 void OnGUI()

 {

  //繪製紋理

  GUI.DrawTexture (new Rect (0,0, Screen.width, Screen.height),movTexture,ScaleMode.StretchToFill);  

  if(GUILayout.Button("Play"))

  {

   //播放

   if(!movTexture.isPlaying)

   {

    movTexture.Play();

   }

  }

  if(GUILayout.Button("Pause"))

  {

   //暫定

   movTexture.Pause();

  }

  if(GUILayout.Button("Stop"))

  {

   //停止

   movTexture.Stop();

  }

 }

} 【移動裝置/Mobile Device解法】

using UnityEngine;

using System.Collections;

public class Test : MonoBehaviour {

 void OnGUI()

 {

     if (GUI.Button (new Rect (20,10,200,50), "PLAY ControlMode.CancelOnTouch")) 

  {

         Handheld.PlayFullScreenMovie("movie.mp4", Color.black, FullScreenMovieControlMode.CancelOnInput);

  }

  if (GUI.Button (new Rect (20,90,200,25), "PLAY ControlMode.Full")) 

  {

         Handheld.PlayFullScreenMovie("movie.mp4", Color.black, FullScreenMovieControlMode.Full);

  }

  if (GUI.Button (new Rect (20,170,200,25), "PLAY ControlMode.Hidden")) 

  {

          Handheld.PlayFullScreenMovie("movie.mp4", Color.black, FullScreenMovieControlMode.Hidden); 

  }

  if (GUI.Button (new Rect (20,250,200,25), "PLAY ControlMode.Minimal")) 

  {

         Handheld.PlayFullScreenMovie("movie.mp4", Color.black, FullScreenMovieControlMode.Minimal);

  }

 }

}

1.播放時觸摸螢幕會影片關閉
2.播放時彈出IOS控制項，可以控制暫停播放全螢幕等等
3.播放時無法停止，當其播放完一次後自動關閉(適用在開頭場景)
4.播放時彈出IOS控制項，可以跳轉播放進度

注意：需要把影片放在Assets/StreamingAssets/路徑下才能讀取

影片播放加速(限PC)：可到 雨松MOMO 這來看，這部分非本文主題

【SKIP/跳過影片】
接著，通常影片會附帶直接點擊螢幕就跳過開頭
一般而言會透過 Application.LoadLevel() 來達成
新增一個Button
把Button調成透明
把Button底下Text的文字刪除(或刪掉Text也可)
新增一個script(C#)LoadOnClick

using UnityEngine;

using System.Collections;

public class LoadOnClick : MonoBehaviour {

public void LoadScene(int level)

{

Application.LoadLevel(level);

}

}

在Button的Inspector最下面會找到一個onclick()點擊觸發事件

1. 按一下加號
2. 在把None(object)改成Canvas
3. 右邊No Function應該會多出上述的LoadOnClick，裡面應該有一個LoadScene
4. 選擇之後下面空格填1就會跳轉到場景1

場景編號可以透過File>Build Settings 去編號，初始場景是0，所以理論上也是跳轉到1去

【影片播放完畢後自動跳轉場景】
由於不一定玩家會透過觸控來跳轉，所以在影片播放完畢後仍然需要設置一個自動跳轉點
我研究了一下Movietexture的部分，好像沒有偵測影片播放完畢的狀態，只有判斷影片是否有播放的isPlaying()，但是影片播放完後他不會自動消失，而是停在最後一幀的圖片，所以他還是會判斷isPlaying=true，而duration也沒有用，最後只好採取比較土炮的方式就是直接用計數器，直接根據影片長度來結束強制跳轉，Code如下，可以直接加在上面影片播放的Script裡面

  void Update()
    {
        StartCoroutine(load());
    }
    IEnumerator load()
    {
        yield return new WaitForSeconds(20);//填入影片時間，這邊假設是20秒
        Application.LoadLevel(1);//自動跳轉第n關，這邊假設是第1關
    }

最後呈現出來應該是，程式一開啟自動撥放影片，然後按螢幕可以跳過
(或是在Button放一個自製的SKIP字樣的image)

或是到影片播放結束時自動跳轉到開始畫面

那我們下篇文章再來談開始畫面製作

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
參考網站：雨松MOMO 泰課在線 Movie Texture
延伸閱讀：關於場景切換與優化 Unity：設計靈活的無縫場景轉換機制
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
使用版本：Unity5.2.0f3個人版
使用系統：Windows 10
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
最後PC版的Script應該長這樣，然後可以直接丟到Camera上
using UnityEngine;
using System.Collections;

public class Movie : MonoBehaviour
{
    public MovieTexture movTexture;
        void Start()
    {
        movTexture.loop = false;
    }
    void Update()
    {
        StartCoroutine(load());
    }
    IEnumerator load()
    {
        yield return new WaitForSeconds(19);
        Application.LoadLevel(1);
    }
    void OnGUI()
    {
        GUI.DrawTexture(new Rect(0, 0, Screen.width, Screen.height), movTexture, ScaleMode.StretchToFill);
            movTexture.Play();
    }
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
行動版的寫法這幾天再補上