Unity 4.3＋NGUI 3.6で台詞表示ウィンドウの簡単なサンプル

Unity

Unity＋NGUIで台詞表示ウィンドウの簡単なサンプル
f:id:itouhiro:20140616160542p:plain

環境

手順

  1. [File - New Project]で NGUIをチェックして、新規プロジェクト作成。f:id:itouhiro:20140616064215p:plain
  2. [NGUI - Create - 2D UI]とする。Hierarchy領域に UI Rootが生成される。NGUIのオブジェクトはこの UI Root - Camera の下に配置しなさい。f:id:itouhiro:20140616070038p:plain
  3. Hierarchy領域で、UI Root - Camera を選択する。この枠線がゲームするときにUIとして表示される領域。
  4. この枠線がScene領域に正面から表示されるように、Scene領域のXYZを（ドラッグじゃなくて）クリック。マウスホイールを回転させて、なるべく大きめに枠線を表示。f:id:itouhiro:20140616065250g:plain
  5. Scene領域の[Gizmos- 3D Gizmos]をOFFにする。邪魔なカメラアイコンが表示されなくなる。f:id:itouhiro:20140616065817g:plain
  6. Hierarchy領域で、UI Root - Camera を選択して、[NGUI - Craete - Sprite]でウインドウみたいなのを表示。f:id:itouhiro:20140616071441g:plain
  7. Hierarchy領域で、UI Root - Camera - Sprite を選択して、Inspector領域のUISprite(Script) - [Atlas] が Wooden Atlas になっていることを確認。なってなければ、UISprite(Script) - [Atlas]ボタンをクリックしてWooden Atlasを選択。操作まちがえたら、Hierarchy領域で、UI Root - Camera - Sprite を選択すればいい。
  8. Hierarchy領域で、UI Root - Camera - Sprite を選択して、Inspector領域のUISprite(Script) - [Sprite]ボタン(Editボタンではない）をクリックして[Hilight - shadowed]を選択。f:id:itouhiro:20140616071031p:plain
  9. Scene領域でウィンドウを拡大する（引き伸ばす）。f:id:itouhiro:20140616071500g:plain
  10. Hierarchy領域で、UI Root - Camera - Sprite を選択して、[NGUI - Craete - Label]で文字表示領域を作成。f:id:itouhiro:20140616072016g:plain
  11. フォントを指定しないと文字入力できない。WindowsのExplorerで*.ttfを選択して、Hierarchy領域にD&D。Hierarchy領域で、UI Root - Camera - Sprite - Label を選択して、Inspector領域のUILabel(Script) - [Font]ボタンをクリックして、*.ttfを選択。f:id:itouhiro:20140616075521g:plainf:id:itouhiro:20140616075625g:plain
  12. Hierarchy領域で、UI Root - Camera - Sprite - Label を選択して、Inspector領域のUILabel(Script) - Textに文字を入力。漢字と改行含む日本語文を入力する。OverflowでShrink..だと勝手に文字を大きさを変えるのでResizeHeightにする。Widget - PivotでTOP矢印とLEFT矢印を選択する。Spacingで行間あけて、AlignmentでLeftにする。Effectでshadow指定すると文字表示がしまるかも。GradientはOFFのほうが文字読みやすいかも。f:id:itouhiro:20140616094900p:plain
  13. Hierarchy領域で、UI Root - Camera - Spriteを選択して、[F2]キーおしてLabelをDialogBoxにrenameする。UI Root - Camera - Sprite - Label を選択して、[F2]キーおしてDialogMessageにrenameする。f:id:itouhiro:20140616095406g:plain
  14. Project領域で[Create - Folder]して Resources というフォルダーを作成。Hierarchy領域で、UI Root - Camera - Spriteを選択して、Project領域のResourcesフォルダーにD&D。f:id:itouhiro:20140616080413g:plain
  15. Hierarchy領域で、UI Root - Camera - Sprite を選択して削除。f:id:itouhiro:20140616080620g:plain
  16. Project領域で[Create - C#Script]して GameController というファイルを作成。
  17. スクリプトは、なにかのオブジェクトと結びつければ実行される。ここではMain Cameraと結びつけることにする。Hierarchy領域でMain Cameraを選択。Inspector領域にMainCameraの情報が表示される。ここに、Project領域のGameControllerを選択してD&D。f:id:itouhiro:20140616084032g:plain
  18. Project領域のGameControllerをダブルクリックして編集する。（ソースコードは最下部に掲載）f:id:itouhiro:20140616095835p:plain
  19. 入力したソースコードにまちがいがある場合、Consoleウィンドウに表示される。Consoleウィンドウは[Window - Console]で出現する。f:id:itouhiro:20140616085214g:plain
  20. [実行]ボタンをクリックして、動作を確認する。f:id:itouhiro:20140616095814p:plain
  21. [File - Save Scene]で Main などと名前をつけて保存する。


ソースコード GameController.cs

using UnityEngine;
using System.Collections;

public class GameController : MonoBehaviour {
    GameObject dialogBox;
    UILabel dialogMessage;
    string msg = "現代に伝わるいろは歌の内容\n    いろはにほへと　ちりぬるを\n    わかよたれそ　つねならむ\n    うゐのおくやま　けふこえて\n    あさきゆめみし　ゑひもせす";
    int count = 0;

    // Use this for initialization
    void Start()
    {
        GameObject dialogBoxPrefab = Resources.Load("DialogBox") as GameObject;
        dialogBox = Instantiate(dialogBoxPrefab) as GameObject;
        dialogMessage = GameObject.Find("DialogMessage").GetComponent<UILabel>();
    }

    // Update is called once per frame
    void Update()
    {
        count++;
        if (count == msg.Length * 2)
        {
            Destroy(dialogBox);
            return;
        }
        if (count > msg.Length) return;
        dialogMessage.text = msg.Substring(0,count);
    }
}


f:id:itouhiro:20140616160852j:plain
3Dキャラクターは「Unity-Chan http://unity-chan.com/ 」です。



ゲーム作りのはじめかた Unityで覚える企画からレベルデザインまで

ゲーム作りのはじめかた Unityで覚える企画からレベルデザインまで