腐りかけエンジニアのブログ

学生時代ろくに勉強してこなかった人間が、プログラムに挑戦してみる。

【Unity】iTweenとuGUIでノベルゲームっぽいものを作る

今回はUnityでこんなの作っていこうと思います。
gyazo.com

ゲームジャムやプロトタイプ等で使えるかと思います。
また、テラシュールブログさんの"uGUIでノベルゲームのようなものを作る"の記事を「iTweenで動かした場合」の様な記事になると思います。
(下準備に関しては全く一緒です...)
tsubakit1.hateblo.jp

下準備

文字を表示する部分を作っていきます。

1.右クリック -> UI -> PanelCanvasとPanelを生成。
2.作成したCanvasを指定、CanvasScalerのUIScaleModeScaleWidthOrHeightに変更f:id:doggy_dog:20160227154044p:plain:w300
3.また、その下にあるScreenMatchModeExpandに変更。
f:id:doggy_dog:20160227155015p:plain:w300
4.Panelの名前を好きな名前に変更(自分はNobelUIにしました。以下NobelUI)。NobelUIのImageは消しておきましょう。
f:id:doggy_dog:20160227164028p:plain:w250
5.NobelUIの子要素にImageを追加。名前をFrameにしましょう。Heightを150にし、アンカーで位置と大きさを変更します。好きな画像をFrameにしてみましょう。
f:id:doggy_dog:20160227160057p:plain:w250
6.Frameの子要素として、Textを追加。文字が見にくいのでTextにAddComponentでOutlineを付けてあげましょう。(OutLineの色や大きさは好み)
f:id:doggy_dog:20160227161829p:plain:w200
7.また、Textのアンカーを全体にし、文字の大きさも変更しつつ、Textの文字がちゃんと枠内に埋まる様に調整してあげましょう。(自分はTextの大きさを20にし、色を白にしました。)
f:id:doggy_dog:20160227162650p:plain:w250

見栄えを考慮して、フォントを変更し、背景やキャラクターを置いてみました。
(背景を使用したい場合は、NobelUIのImageに背景をセットし、Alpha値を1.0にしましょう)
背景と画像とフォントを設定するだけで、見栄えが良くなります。
f:id:doggy_dog:20160227172450p:plain

会話部分を作ってみる

枠の中の文字について触れていきます。
iTweenのダウンロードはこちらから。
TextControllerという名前のスクリプトC#で作りましょう。


ノベルゲームっぽい文字を制御するためのスクリプト

1.TextControllerを空のオブジェクトにアタッチ(空のオブジェクト名もTextController)
f:id:doggy_dog:20160227174305p:plain:w200
2.TextControllerの中身を設定。
・lineTextはFrameの子要素のTextを指定する。
・scenariosはSizeを好きな値にして、台詞を中に格納する。
f:id:doggy_dog:20160227180807p:plain:w300

そして、実行するとこんな感じになります。
gyazo.com

注意点

iTweenのeaseTypeを使う事は避けましょう
このままやってしまうと、文字の上限を通り越してしまい、ArgumentOutRangeExceptionが出てしまいます。

まとめ

改善点は色々とありますが、iTweenで作る事も可能です。
ここから拡張していくと、簡単なノベルゲームっぽいものが作れます。
このほかに欲しいものと言えば、

  • 名前表示
  • キャラクター複数表示・表情変更
  • BGMやSE再生
  • 喋っているキャラクター以外は暗くする

上記のようなものを盛り込んでいけばもっとそれっぽくなるかと思います。

また、unitypackageも置いておきます。
(画像などは入っていないので、自分でカスタマイズしてください)
github.com