２Dスクロールゲーム開発日記 #7

ゲームマスターのギルガメです！

開発の見た目もちょっとは形になってきました！

ゲームにはやっぱりストーリーがないとですね。そのストーリーに欠かせないのがメッセージボックスによる会話シーンや物を調べたりするものを追加したいと思います。

二つのスクリプトを作成しました。

• Dialog.cs
• DialogManager.cs

Dialog.csは会話シーンの名前と内容をすべて保存するものになります。

DialogManager.csは会話の内容を次のステップや文字の表示をコントロールします。

Dialog.cs

DialogManager.cs

こちらの用意が終わったら、会話シーンや物を調べたいものにDialog.csを追加します。

ギルガメはこちらを用意しました。

キーボードEで会話がスタートするようにスクリプトに設定してます。

Dialog.csの設定はお好みですが、会話シーンを以下のように設定しました。

またコライダーにトリガーを設定することで、こちらに触れることで会話の内容をよみより、会話が可能になります。

Dialog.csに会話の内容を設定します。

以上のように好きなように会話を作ります。

Canvasでメッセージボックスを作ります。DialogManager.csはプレイヤーに追加します。

今回はシンプルではありますが、お好みでデザインしてください！

これで設定完了！

さっそくテスト！

   やった！うまくできた！これでNPCも追加してストーリーっぽくできる！

今回使ったフォントは漢字に対応していないので、ちょっと残念ですがかわいいので気に入っています。

Githubのバージョンはこちらになります。

https://github.com/yosonlineapp/blog2dgame/tree/version/blog-2dgame-ver1.2

役にたってくれると嬉しいです。

次はなにを追加しようかな。やっぱり開発は楽しい！

２Dスクロールゲーム開発日記 #6

ゲームマスターのギルガメです！

だいぶゲームらしさが出てきたところで、一番楽しみのアニメーション追加だ！

これがあるだけで雰囲気がすごくかわるから、この追加はいつもワクワクするギルガメです。

それではアニメーションに必要な画像を用意します。

ギルガメは行動していないときのアニメーション、走っているときのアニメーション、そしてジャンプのアニメーションを追加したいのでそちらの画像を用意します。

オフィシャルサイトから自由につかってください！

https://yosapps.com/assets

アニメーションリスト

• ldle
• run
• jump(upとdown)

プレイヤーが簡単にアニメーションをスイッチできるようにアニメーションのコントロールするAnimatorを作成します。

用意した画像をシーンにドラッグすると簡単にAnimatorとAnimationを作成できます。

Animatorができたとことで、Animationの調整をします。

囲っているとこを動かしながら調整できます。

ここまで出来たらさっそくテストだ！

作ったAnimatorをプレイヤーに追加して動かします。最初に作ったアニメーションはAnimatorにデフォルト設定されているので、Animatorを追加するだけで動いてくれます。

プレイヤーにコンポーネントでAnimatorを追加して、先ほど作ったものをドラッグして設定は完成です！ldleのアニメーションを作ったのでテストしてみます。

おお！ldleアニメーションしてる！感動！

このように他のアニメーションをAnimator追加していきます。

今度はAnimatorでコントロールするためにパラメータを設定します。

走るアニメーションにはrunというパラメータ、ジャンプ用にjumpというパラメータを追加しました。

今回はfloatでパラメータを作成しました。

今度はldleからrunアニメーションに切り替えるための条件を設定します。ldleのオプションからrunのアニメーションにつなげてください。その後は矢印の設定からHas exit timeのチェックを外して、Settingsのグラフで切り替えのタイミングを短くしてください。この設定することで、パラメータが変更したときに、すぐにアニメーションが変更されます。

上記にように設定するをすぐにアニメーションの切り替えが可能になります。

このようにrunやjumpアニメーションを設定してください。

Animatorが終わりましたら、今度は作成したパラメータをスクリプトで変更しながらアニメーションを調整します。

playerAnimator.SetFloat("run", Mathf.Abs(move));

Animatorのコンポーネントを読み込み、作成したパラメータの値を変更するコードを追加します。値が変更することでAnimatorが切り替えてくれます。

Animatorを追加したスクリプトはこちらになります。

よし！runとjumpを追加したので動かしてみよう！

走ってる！ジャンプしてる！アニメーションを追加して雰囲気がかわった！

アニメーションってすごい・・。もっといろんなアニメーションを追加していきたいです。

アニメーションの追加でした！今度はステージっぽいものを作っていこうかな。

おすすめアセット #1 「Ferr2D Terrain Tool」

おはこんばんにちは！ギルガメです！

２D開発に役に立つおすすめのアセットを紹介したいと思います。

アセットの名前は「Ferr2D Terrain Tool」です。

有料アセットですが、ものすごく役に立ちます！

どのゲームもマップやフィールドを一から作成するとかなりの時間が必要になります。その時間を短縮してくれます。

自由に簡単に変更できるとこが楽しい！

白い丸い部分を動かしながら地形を自由に変更できます。

インポート後はデフォルトで草原やダンジョンなどがあるのですぐに使えます。また個人で作って追加することも可能なのですごくありがたい。

また草原のフィールドは草がなめらかに動くのでものすごくエレガントに見えます。

こちらのアセット使ってゲームを実際に作ってみました。

https://yosapps.com/game/play/game1/

シンプルではありますが、ぜひ遊んでみてください！

こちらのアセットはこちらから購入できます。

https://assetstore.unity.com/packages/tools/level-design/ferr2d-terrain-tool-11653

もし２Dフィールドで困っているときはぜひ使ってみてください！

まだまだおすすめのアセットがあるので、どんどん紹介していきたいと思います。

よろしくね！

２Dスクロールゲーム開発日記 #5

ゲームマスターのギルガメです！

キャラクターもルームも出来たので、カメラを設定しよう！

このままじゃプレイヤーが移動してもカメラがプレイヤーを追跡しないので、プレイヤーが枠からはみ出てしまいます。

このような状態になってしまいます。

カメラがプレイヤーを追跡するようにスクリプトをつくります。

カメラのスクリプトはこちらになります。

こちらのカメラのスクリプトをカメラに追加します。

カメラに追跡する対象を指定が必要なのでfollowTransformにプレイヤーを選びます。またはプレイヤーのオブジェクトをfollowTransformまでDragアンドDropしてください。

これでカメラは完了です！

動かしみると・・

左右に移動してもカメラが追ってきてくれるので、枠からはみでなくなりました！

移動してもプレイヤーのアニメーションが変わらないので、次回はアニメーションを追加します！

２Dスクロールゲーム開発日記 #4

ゲームマスターのギルガメです！

キャラクターを動かしてみよう！そのためにはコーディングが必要になります。

ギルはC#が好きなのでC#で進めていきます。またJavascriptや別の言語でも可能なのであなたの得意な言語で進めてください！

キャラクターを動かすために二つのスクリプトを用意します。

• CharacterController2D　(あたり判定や向きのコントロール)
• PlayerMovement　(ボタンなどのイベントのコントロール)

コードはこちらになります。

CharacterController2Dのコード

PlayerMovementのコード

こちらのスクリプトを用意してください。

スクリプトの用意が終わったらさっそくプレイヤーを追加していこう！

まずプレイヤー用のオブジェクトを作成します。プレイヤーのための画像を用意してください。ギルはピクセルアートで作成したものを使います。

用意した画像を先ほど作ったプレイヤーオブジェクトに設定します。Sprite Rendererとコンポネントを追加後、画像をSpriteにドラッグしてください。サイズを調整して、これで見た目は完成です。

プレイヤーのオブジェクトに地面の接しているかの判定用のオブジェクトを追加します。

GroundCheckerという地面の判定用のオブジェクト

を追加

GroundCheckerの地面の判定の調整をします。プレイヤーの足元あたりがいいです。

またcircleCollider2Dも追加します。

先ほど用意したスクリプトをプレイヤーオブジェクトに追加します。

スクリプトを追加した後に、GroundCheckerをスクリプトのGround Checkにドラック＆ドロップしてください。またWhat Is GroundのLayerをTerrainにすることで、地面の判定が可能になり、ジャンプができるようになります。LayerにTerrainがない場合は追加してください。

プレイヤーのInspectorはこのようになっていればOKです！

これで動作確認をしてみてくさい！

動いた！でもまだカメラがプレイヤーを追ってくれないので、次回はカメラのスクリプトを追加します。

こちらを動画にしてみました。もしわからないことがあったら動画から確認してもらえると嬉しいです。

次回のカメラやアニメーションの追加も動画にしていきたいと思います。

よろしくね！