横スク探索ゲームを作りたい！<1>
前回の記事を書いてからちょうど2週間が経ちました。
前まで作っていた3Dモデルをドット絵風に描画する処理は、絵が描けない&ドット絵なんて枚数書かなきゃいけないし面倒くさいという自分がドット絵風ゲームを作るためのものです。
ということで今回からは実際にゲームを作る記事も書いていこうと思います。
作りたいのは横スクの探索アドベンチャーゲーム。
ストーリー的元ネタは僕の大好きなJGバラード作の「沈んだ世界」。
ざっくり今脳内構想しているストーリーは、
『地球温暖化によって気温が上昇し人類は国を離れ野原と化した南極大陸に移住してから早何十年。調査船の一員としてかつての日本にやってきた主人公は、その地に残って細々と生活していた生存者たちと出会う。(略)一週間の調査期間のうちに主人公は一癖も二癖もある生存者たちを何人救うことができるのだろうか。』
みたいな感じです。マルチエンド対応。
ゲーム制作においてストーリーは第一目標じゃなくてモチベーションだと思っているのでまだざっくりです。最初からストーリーを求めて作っちゃうと、少人数製作及び個人製作のゲームでは挫折しがちだになると思っているので。あくまでゲームが作りたいんであって物語が作りたいんじゃないんだ僕は。
てな感じでコツコツ作っていたんですがやっとまぁ開発中の一画面見せられるかなって感じになったので、詰まったところとかのメモと一緒に載せときます。
もろクロックタワーですねはい。
後々から変えていけばいいんですという身勝手な理論をかましていきます、やっぱ既製品を参考にするのが初心者にはちょうどいいんですよね…
一応動画でも。
プレイヤーキャラの描画には前の記事で作ったドット絵描画処理をフルに使ってます。
・詰まって解決したところ備忘録
ープレイヤーの動き
移動先を指定するとキャラがそちらに向いてそれから移動。という処理です。
まずQuaternion.LookRotationを使ってプレイヤーキャラの回転と移動先の角度差を求めQuaternion.Lerpで補間。
回転が収まってきた（＝回転しきっていないまま動き出す)かどうかは前フレームとの回転の度合いを比較して、一定以下かどうかを計算し収まってきていれば移動を開始する。
現時点では移動にはVector3.SmoothDampを利用。でも動きに違和感を感じるときがままあるから変更するかもしれない。
enumで移動中、目的地点に到達、停止中のフラグを列挙しておいて、到達した瞬間かつ目的地点が調べられるオブジェクトであればオブジェクトについているメッセージ用の処理を呼ぶように。
移動先の座標については、Input.mousePositionで持ってきたマウスの位置を平行投影のカメラによるCamera.ScreenToWorldPointでワールド座標に変換し、それをさらにPixel Perfect CameraのRoundToPixelメソッドでドット近傍にスナップして使ってます。
ーUI上にマウスがいるとき、キャラが移動しないようにする
UI上を押しているのにキャラが動いてしまうのを防ごうと、マウス位置からRayを飛ばしてUIのレイヤーに当たったら…という処理を最初に書いたんですけどうまくいかず。
調べたらUIにはRayは使えないと。2D的な処理と3D的な処理を複合させるのはunity公式側の想定外なのだろうか…みんな結構やると思うんだけどなぁ。
結果、下のサイトを参考に実装しました。丸パクリです。
ーカーソルの動き
調べられるオブジェクトに近づくと、にゅっっと引き寄せられるような動きをします。
これはドット絵描画の時にも使ったレンダリングの時だけ位置を変える処理でやっています。
LateUpdate()内で現在描画しているカメラがカーソルを描画していれば位置をオブジェクトの中心にLeapし、描画が終わった直後のOnRenderObject()で本来の座標に戻す。
これだけで吸い寄せられる”ように見えます”。実際の座標的には別にオブジェクトに吸い寄せられていません。
ーカメラの使い分け
まず最初使う予定だったのはUI用の平行投影カメラとゲーム画面用の透視投影カメラの２つでそれぞれPixel Perfect Cameraをアタッチしていました。
しかし途中でテキスト文字の処理を描いたところ文字をpixelperfectにされると変だなーと思ったのでドットフォントをpixelperfectなしで表示することにしました。
参考までに
Arialで左がpixelperfectあり、右がpixelperfectなし
ちなみに自分は近年よくあるドット絵風のゲームでこういうフォント使われると萎えます。やめてほしい…
ドットフォントで左がpixelperfectあり、右がpixelperfectなし
ドットフォントでpixelperfectなしが一番きれいでいいですよね。
ちなみにフォントはここのをお借りしました。
結果、平行投影のUI用カメラ、テキスト用カメラとゲーム画面背景用の透視投影カメラの３つを使い分けてます。
あと、自作の3Dモデルドット絵描画処理は平行投影のカメラじゃないとガクつくので、キャラクタはUI用カメラのレイヤーに表示しています。
キャラの手前にモノを置きたいときは追加でカメラを作らなきゃいけないですけど…まぁそのときはそのときかな、どうせ一人で作ってるわけなので仕様変更は気軽にできますしね。
ーテキスト表示
各オブジェクトには調べられた際のテキストを保持するスクリプトをアタッチしておきます。
オブジェクトをゲーム画面で調べると、シングルトンのText_Managerクラスに飛ばされてそこで各オブジェクトのテキストを処理します。
まずはstring.splitを用いて改行コードで文字列を分割し、改行ごとに配列に格納します。
便利ですねこのstring.splitメソッド、代入して欲しい配列と文字列と分割する文字コードを入れるだけで各配列の要素に振り分けてくれるとは思ってなくてかなり処理が楽に済みました。大学の課題ではC言語使って何度もループに飛ばしてやった記憶…C#様々ですね。
配列に文字列を格納出来たら、あとは１要素ずつ表示するだけです。簡単！
とりあえず表示側は実装できたので、あとは各オブジェクトが持つテキストについてこういうフラグが立っていたら別のテキストを送って…みたいな処理を書いてあげればいいだけになりました。
とはいえこれがまだ思いつかない。
ある程度進捗溜まったら更新しますのでそれじゃまた～
