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

2015年11月22日 星期日

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


【影片播放/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();//停止播放 }
}
}
 如下圖所示,點擊按鈕後輕鬆的實現播放、暫停、停止操作。預設影片大小各位可在編輯器直接縮放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)
或是到影片播放結束時自動跳轉到開始畫面
那我們下篇文章再來談開始畫面製作
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
參考網站: 泰課在線 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();
    }
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
行動版的寫法這幾天再補上

1 則留言 :

Popular Posts