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

おはこんばんにちは！ゲームマスターのギルガメです！

移動に欠かせないプラットフォームを追加していきます！

まず最初に動かないプラットフォームを作ります。すごくシンプルです！

デザインになるものを用意してください。今回もギルガメはシンプルなものを作りました。

それにコライダーを追加して、ここが大事です。コライダーだけじゃ下から上に貫通してプラットフォームに乗ることでできません。

仕様によっては、貫通してほしい人やしてほしくない人がいるのと思うのでこのままでも全然使えます！

上記のGifと用にプラットフォームのしたから上に貫通して乗ることができません。ですが、あるコンポーネントを追加するだけでそれを可能にします！

「Platform Effector 2D」をいうコンポーネントを追加して下さい。またコライダーに「Used by effector」にチェックが必要です。これだけです！すごくシンプルで使いやすい・・。

Platform Effector 2Dを追加するとこで完成！

これで固定のプラットフォームの完成です！

今度は移動するプラットフォームを追加します。これは絶対にかかせない・・マップの移動とかすごく使えると思います。

まずスタート地点と移動先が必要になります。スクリプトが下記になります。

Platform.cs

これをプラットフォームに追加して、スタート地点と移動先を設定して完成です。

テストしてみよう！

動いてる！乗れる！移動できた！

こちらは以下からバージョンを確認できます。

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

ぜひチェックしてみてください。

これは色んなとこで活用できそうだ！だんだん色んなものができてきた。

楽しいな・・もっともっとたくさん色んなものを追加していきたい！

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

おはこんばんにちは！ゲームマスターのギルガメです！

今回は空の雲の自動生成を追加しようと思います。

雲のデザインはギルガメのアセットページにあるフィールド１セットに含まれています。自由に使っていいですよ！

https://yosapps.com/assets

まず自動生成なので決めた場所からランダムに生成するロジックが必要になります。決めた場所があっても、一つ一つ決めるときりがないので、コライダーの囲っている場所からランダムに生成する方法に決めました。

また今回の雲は右から左にいきます。ですが、生成された雲にはある程度までいくとオブジェクトごと消さないと沢山の雲が生成されてだんだん重くなっていきます。なのでマップの端に雲を消す処理のコライダーも作ります。

１は雲のじどうせいせいの場所

２は生成された雲をけす処理の場所

上記のように設定が完了したら、さっそくスクリプトを作っていこう！

３つのスクリプトを用意します。

• Cloud.cs
• CloudManager.cs
• CloudRemover.cs

Cloud.cs

こちらのスクリプトは雲が右から左にいくようのスクリプトです。

CloudManager.cs

こちらのスクリプトはコライダーからランダムで雲を生成します。

CloudRemover.cs

こちらのスクリプトは雲が雲削除のコライダーに触れたときに、削除するスクリプトです。

ふぅ・・ちょっとテストしてみよう。

あ！雲がマップのオブジェクトに引っかかってします・・これを修正するには新しい雲用のレイヤーを作って、ほかのオブジェクトをすり抜けるように設定します。

Cloud（雲）のレイヤーを作成して、メニューのEdit＞Project Settings..＞Physics2Dを上記のようにチェックを外すことでほかのオブジェクトをすり抜けるようになります。

よし、もう一回テストだ！

ランダムで雲が生成された！

これで毎回同じ雲の流れがないので新鮮かも。

またトラップの自動生成などにも使えそう！

今度はプラットフォームを追加してみようかな！

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

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

ずっとルームの中でゲームの中のギルガメは退屈してるかもなので、新しいフィールドを簡単に作成してシーンの切り替えを説明できたらと思います。

まずシーンの切り替えにはSceneManagementが必要になります。こちらをトップの方でインポートしてください。

インポートが完了したらビルドに要録してるシーンの名前が必要になります。SceneManager.LoadScene(”要録してるシーンの名前”);によりシーンを切り替えが可能です。

シーンの切り替えもちょっとおしゃれにしたいので、プレイヤーが近づいたらドアが自動で開く「自動ドア」のようなものを作ってみました。

Animatorを作成してトリガーで自動ドアを作ったよ！

自動ドアが完成したので、さっそくシーンの切り替えを追加してみよう！

スクリプトはドアに作成して、プレイヤーが近づいて「E」ボタンを押したときに移動するようにしました。以下がスクリプトになります。

こちらのスクリプトを移動したい場所に設定してください。またnextSceneに移動したいシーンの名前をセットして終わり！意外と簡単でよかった。

さっそくテスト！

外からルーム、ルームから外にシーンの切り替えができてる！

これで沢山のフィールドを作って、バンバン切り替えができるね！

今回フィールド１用に作ったデザインはギルガメのアセットからダウンロードできます。

ぜひ使ってみてください！

https://yosapps.com/assets

また新しいフィールド追加のバージョンはこちらです。

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

次は空の雲の自動生成の追加しようと思います！

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

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

前回はメッセージボックスを追加しました。

ゲーム完成までまだまだ遠いけど、ゲームっぽくなってくるとモチベーションが上がります。

今回はゲームにBGMを追加します。

まずはAudio Sourceをシーンの中に追加します。

Audio Sourceの追加

流したいBGMを用意します。

ギルガメはフリー素材からダウンロードしました。

https://maoudamashii.jokersounds.com/music_se.html

ここから使わせていただいています。沢山のSEやBGMがあるので大変助かっています。

素材が揃ったらさっそく先ほど追加したAudio Sourceに設定します。

Drag＆Dopdで簡単にBGMを設定できます。

これで音の調整をしながらテストしてください。

BGMが追加したことでモチベーションがさらにアップ！

こちらのバージョンから確認できます。

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

次は新しいステージを作っていくよ！

またよろしくね！

２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を追加したので動かしてみよう！

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

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

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

２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です！

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

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

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

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

よろしくね！

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

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

前回はマルチプレイの設定の説明をしました。

今回はフィールドを設定の説明をしていきたいと思います！

まずプロジェクトを作ってください。

テンプレを２Dを選択してプロジェクトを作ってください。

プロジェクトを作成後はフォルダーを整理していくと楽になります。

デフォルトでScenesのフォルダがあるので、必要なフォルダーを追加していきましょう！

• Animations
• Materilas
• Prefabs
• Scripts
• Sprites

上記のフォルダーを追加しておくととても分かりやすく制作を進めていけるのでぜひ追加してください。

この画像のようになっていればOKです！

ではさっそくフィールドの素材を用意していきます。

今回はルームのフィールドを作成していきます。素材はギルのオリジナルの画像を使います。使う素材はなんでもいいので用意してください。ギルのオリジナルをつかう場合はアセットからぜひダウンロードしてください！

素材がきまったらドラッグアンドドロップでSpritesの中に画像を追加します。

次にSceneのSpriteつきのObjectをつくります。

さきほどのSpritesのフォルダーにいれた画像を作ったObjectに設定します。

これで見た目のフィールドが完成です！ですがこれだけだとプレイヤーを追加したときに地面をすり抜けておちていきます。

これから地面や壁をすり抜けないようにBox Colliderを追加します。

先ほどのObjectを選択して、右の詳細のAdd ComponentからBox Collider 2Dを３つ追加します。左右に壁に２つ、地面の一つになります。

Edit Colliderを選択して地面や壁などを調整します。

こんな感じになっていればOKです！

これで簡単なルームフィールドの完成です！

次はプレイヤーを追加していこう！

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

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

前回はゲーム開発に必要なものをまとめました。

今回はチャンレジとしてマルチプレイを実装したいので、必要なものをまとめました！

• サーバー Centos7（自宅サーバーでチャレンジ）
• NodeJS
• MongoDB
• Nginx
• Colyseus

ざっくりではありますが、一つずつ説明していきます。

サーバー Centos7：単純にギルがCentos7が大好きだからです。AWS（アマゾンウェブサービス）でもCentos系のサーバーを使った経験があるのでその経験を生かしていこうと思います。こちらを自宅サーバーにセットします。

NodeJS：スケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。これはもう最高！サーバサイドで動くJavaScriptなので、JavaScriptの知識があれば問題ありません。この先はNodeJSの世界だといわれているので、ギルはとても期待しています。

MongoDB：オープンソースソフトウェアのドキュメント指向データベースである。MySQLでもいいのですが、あまり細かいDBの設計を避けるためにNoSQLを使います。ギルは最近NoSQLにはまっています。Mongooseと組み合わせることで設計もすごく楽になるのでお勧めです！

Nginx：フリーかつオープンソースなWebサーバです。設定が簡単なのと、Webソケットのセキュアな通信を無料で実装したいのでNginx, Centos7とLets Encrypt を使ったHTTPS通信を可能にするこの構成で行きます！

Colyseus：全部の通信をコーディングするにはあまりに時間がかかるので、サーバーサイドの処理はColyseusを使いたいと思います。

リンクは　https://colyseus.io/　になります。リアルタイム通信の処理はこちらを使って行います。ギルはすごく気に入っています！

オープンワールドを作って、皆さんと会えるのがとても楽しみです！みんなで集まってワイワイできるオープンワールドを作り、また各ステージではスコアを競って楽しめるゲームが目標です。

頑張って実装していきたいと思います。

次はさっそくプログラミングしていこう！

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

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

２Dスクロールゲーム開発しながらここに進歩を残していこうと思います。

まずどういったゲームを作るのかをまとめてます。作りたいゲームのビジョンをはっきりさせてから開発するのが一番やりがいがあるので、ギルのゲーム開発のスタートアップを紹介していきます！

ギルはギル自身に質問していきます。

「どういうゲームを作りたいですか？」

２Dスクロールゲームが作りたい！

「デザインはどういう感じがいい？」

ドットが好きだからピクセルアート的な感じがいい。

あの雰囲気を楽しめるゲームにしたい。

「ストーリー　OR　ステージ？」

むむむ・・

ギルは妄想はすきだけど、今回はストーリーよりステージ型ゲームにしたい。

「なにをスコアにするの？」

これは一番大事な気がする・・

そうだね、今回はちょっとステージ型で進めたいからちょっとした「死にゲー」にチャレンジ！

死にゲーなので死んだ回数とクリアタイムで遊んで競ってもらえるゲームを制作したいと思います。

「チャレンジしたことは？」

マルチプレイを追加チャレンジしたい！

マルチプレイには夢がある！もちろん実装はかなりの知識と技術が必要だ・・だからチャレンジだ！

これができたらみんなとワイワイしたいな。

こんな感じで大体のビジョンがみえてきます。ここまで考えるだけでも楽しい・・ギルは妄想大好きです。

今度はなにを使って制作するかを決めていきます。ギルはUnity3Dが好きなのでこちらを使っていきます。

ですが、ギルには・・デザイン能力がない・・どうして！？この能力も欲しかったよ・・

制作に使うソフトはこちらになります。

• Unity3D（ゲームを開発するためのツール）
• ピクセルアート（https://www.pixilart.com/）

Unity3DはC#を使ってコーディングします。こちらは無料ですので、興味がある方はぜひダウンロードして一緒にゲームを作ってみませんか？

ギルは今回の制作のコードはすべて載せていきます。

デザインはピクセルアートを使ってドット絵のキャラクターを作っていきます。ギルのようにデザイン能力がなくても少しは描けます・・（なんとか）・・

ギルは暇なときにたまに描いています。

ここまで決まったらあとはロジックを考えなら進めていきます！

次回はマルチプレイやサーバーサイドの設計を紹介したいと思います。

以上、GMギルでした。ここまで読んでいただきありがとうございます！