【Unity】iTweenとuGUIでノベルゲームっぽいものを作る
今回はUnityでこんなの作っていこうと思います。
gyazo.com
ゲームジャムやプロトタイプ等で使えるかと思います。
また、テラシュールブログさんの"uGUIでノベルゲームのようなものを作る"の記事を「iTweenで動かした場合」の様な記事になると思います。
(下準備に関しては全く一緒です...)
tsubakit1.hateblo.jp
下準備
文字を表示する部分を作っていきます。
1.右クリック -> UI -> Panel でCanvasとPanelを生成。
2.作成したCanvasを指定、CanvasScalerのUIScaleModeをScaleWidthOrHeightに変更
3.また、その下にあるScreenMatchModeをExpandに変更。
4.Panelの名前を好きな名前に変更(自分はNobelUIにしました。以下NobelUI)。NobelUIのImageは消しておきましょう。
5.NobelUIの子要素にImageを追加。名前をFrameにしましょう。Heightを150にし、アンカーで位置と大きさを変更します。好きな画像をFrameにしてみましょう。
6.Frameの子要素として、Textを追加。文字が見にくいのでTextにAddComponentでOutlineを付けてあげましょう。(OutLineの色や大きさは好み)
7.また、Textのアンカーを全体にし、文字の大きさも変更しつつ、Textの文字がちゃんと枠内に埋まる様に調整してあげましょう。(自分はTextの大きさを20にし、色を白にしました。)
見栄えを考慮して、フォントを変更し、背景やキャラクターを置いてみました。
(背景を使用したい場合は、NobelUIのImageに背景をセットし、Alpha値を1.0にしましょう)
背景と画像とフォントを設定するだけで、見栄えが良くなります。
会話部分を作ってみる
枠の中の文字について触れていきます。
iTweenのダウンロードはこちらから。
TextControllerという名前のスクリプトをC#で作りましょう。
1.TextControllerを空のオブジェクトにアタッチ(空のオブジェクト名もTextController)
2.TextControllerの中身を設定。
・lineTextはFrameの子要素のTextを指定する。
・scenariosはSizeを好きな値にして、台詞を中に格納する。
そして、実行するとこんな感じになります。
gyazo.com
注意点
iTweenのeaseTypeを使う事は避けましょう。
このままやってしまうと、文字の上限を通り越してしまい、ArgumentOutRangeExceptionが出てしまいます。
まとめ
改善点は色々とありますが、iTweenで作る事も可能です。
ここから拡張していくと、簡単なノベルゲームっぽいものが作れます。
このほかに欲しいものと言えば、
- 名前表示
- キャラクター複数表示・表情変更
- BGMやSE再生
- 喋っているキャラクター以外は暗くする
上記のようなものを盛り込んでいけばもっとそれっぽくなるかと思います。
また、unitypackageも置いておきます。
(画像などは入っていないので、自分でカスタマイズしてください)
github.com