テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】出来るだけ簡単に会話シーンっぽい何かを作る ~とりあえず文字とキャラが変わるまで~

ふと思いました。

ゲームジャムや簡単なゲームでノベルゲームのようなシステムは必須だよね。でも作るの面倒くさいし、導入も場合によっては面倒くさい。

 

なので、出来る限りUnityをプレーンなままでノベルゲーム…どころか文字表示での案内するだけの超絶簡単なモノを作る方法について考えてみました。

f:id:tsubaki_t1:20180220215832g:plain

要件はこんな感じ

  1. 文字が出る。一瞬で
  2. ボタンを押したら文字が変わる
    文字内容はスクリプトにハードコーディング
  3. 表情とかも変化させたい

バックログ? 外部データによる簡単なコンテンツ追加?
気にしない!

 

これを実現するための30行にも満たない残念コード(会話量によって増える)と、GUI操作をGifアニメマシマシで紹介します。

 

目次

 

 

ボタンを押したら文字が出る!

まずは「ボタンを押したら文字が出る」だけを実現してみます。
何処から出るって?
勿論デバッグログさ!

 

ミッション:ボタンを押したら処理が進む

 

下のコードをプロジェクト(Assetsフォルダ以下)に配置し、後は適当なGameObjectに追加すればOKです。

gist.github.com

f:id:tsubaki_t1:20180220202832g:plain

実行すると下のような感じになります。

f:id:tsubaki_t1:20180220202416g:plain

逐次実行にはコルーチンを使用します。IEnumerator Start ()と記述しておくと、Startメソッドをコルーチンとして起動できます。

コルーチンはyield return ○○○で、その処理が終わるまで待たせる事が出来ます。ここでyield return new WaitUntil(()=>Input.GetMouseButtonDown(0));と書いておけば、処理がそこでマウスをクリックするまで止まります。

 

ボタンを押したら文字が変わる

Debug.Logはゲームに表示が出ないので、文字を出します。

文字の表示にはuGUIを使用します。

 

ミッション:UIを表示してUIのテキストを変える

 

まずはUIの用意。

  1. UI>Imageを作る
  2. CanvasのCanvasScalerをScale With Scene Sizeへ変更
    (これをしないとUIレイアウトシステムを使って組む必要が出てくる)
  3. Imageの色は黒に変更
  4. Textを追加
  5. Imageの下にTextを移動
  6. Textのレイアウトサイズは親オブジェクトにフィットするモードに変更
  7. Textの色とか変更
  8. FontSizeで文字の大きさを変更

https://user-images.githubusercontent.com/1644563/36422430-49cfaa4e-167f-11e8-8f07-a1a543c0b396.gif

後は、Story 1を少し改造してInspectorに露出させます。
露出させたら、先ほど作成したTextを登録

gist.github.com

f:id:tsubaki_t1:20180220204614g:plain

これでボタンを押したら文字が変わります

f:id:tsubaki_t1:20180220205516g:plain

 

ボタンを押したら表情も変わる

次はキャラクターを表示させ、ボタンを押したら表情を変えるようにします。

今回は表情用の画像と体用の画像は切り替えます。表情は高解像度が望ましいですが、体は少し解像度を下げても良いです。

 

ミッション:画像を表示して画像を変える

 

最初にコードを変更します。

変更点は、SpriteAtlasやSpriteRendererの設定項目が増えたのと、表情を切り替えている部分が増えた点です。

gist.github.com

顔と体を用意します。顔は、SpriteEditorでくり抜きます。

  1. SpriteのあるTextureを選択
  2. Sprite Editorを選択
  3. Edit Outlineを選択
  4. エッジの部分を編集して顔だけにする
  5. Applyを押す

この手順を表情の数だけ繰り返します。

体は顔でクリップする前のモノと同じもので良いです。

f:id:tsubaki_t1:20180220213247g:plain

まずは画像を文字列で取得できるようにします。文字列で取得できたほうが色々と楽なので…
ついでにパッキングして余白部分を消してロード時間を良くします。

  1. SpriteAtlasを作る
  2. Object For Packingに含めたいスプライト(フォルダでも可)を投入

これでテクスチャをパッキングしてくれます。今回は表情以外の部分は上の作業でクリップしているので、体と複数の表情がパックされたモノを作りました。

f:id:tsubaki_t1:20180220214139g:plain

f:id:tsubaki_t1:20180220214445j:plain

パッキングが終わったらStory 1のAtlasに登録してしまいます。

今回はInpsectorでセットしていますが、SpriteAtlasをResourcesに突っ込む事も出来ます。場合によってはソチラのほうが良いかもしれません。沢山キャラが出る場合とか。

f:id:tsubaki_t1:20180220214859g:plain

最後に顔と体を登録するSpriteRendererを登録し、Story 1に登録します。

顔は体より手前に表示して欲しいので、Order in layerをBodyより大きな値にすることを忘れずに。

f:id:tsubaki_t1:20180220212512g:plain

これでキャラクターの表情を切り替えることが出来ます。

 

ここのポイントは、SpriteAtlasからGetSpriteでスプライトが取得できる点です。

 

後はゲームを再生すれば、会話が進むシーンを得られます。

f:id:tsubaki_t1:20180220215832g:plain

 

感想

出来るだけUnityでコードを書かずにやってみました。

幾つかのこだわりポイントのせいで微妙に手順も増えてますが、そこんとこ勘弁してくだしあ。

 

独自テキストベースの物と比較して、処理や動きを追加しやすいので、チュートリアルとかにも使えるかもしれません。

 

次回予告

機能的にはコレで全部です。

 

ただ、今回紹介している内容では、参照関係をかなり手動でやっています。またInputをそのまま取得しているなど、シーンやプロジェクトが複雑になると少し面倒くさくなります。

次はその辺りを何とかします。

 

tsubakit1.hateblo.jp

その他

最近のソシャゲって、会話パートはほぼ100%あるけどノベルゲームのような「途中セーブ」「バックログ」「会話スキップ」「オートモード」みたいなのは無いんですね。

会話スキップもイベント丸ごとスキップですし。会話方法は各社微妙にアレンジしてる印象ですが…

 

関連

以前、uGUIでノベルゲームのようなものを作る記事を書きました。

tsubakit1.hateblo.jp今回使用した、顔だけ差し替えるアプローチです。

高解像度になるとテクスチャ全部残すとメモリ的に大抵しんどいので、こういったアプローチもありかなと。

tsubakit1.hateblo.jp

表情と体を分けたときに出る問題と対策

tsubakit1.hateblo.jpテクスチャをパッキングする、SpriteAtlasについてです。

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp