初心者が作る2D横スクロールアクションゲーム Part1：ダッシュ・攻撃などの基本設定

このガイドシリーズでは、「初めての方向けガイド」で基本を学習した段階の初心者（作成者）が初めて2D横スクロールアクションゲームを作っていくガイドになります。
想定しているゲームは、「横スクロール型アクションで、ジャンプの踏み付けで敵を倒すゲーム」です。皆さんも一緒に作成しましょう！

はじめに

今回のガイドの流れは以下の通りです。

Step1　アニメーション・タイル・素材の登録

Step2　プレイヤーキャラクターの設定

Step3　敵キャラクターの設定

Step4　シーン・タイルの設定と最終テストプレイ

何分初心者のため、もしほかに良い方法があればTwitterなどで
お教えください！(アカウント @playismJP )
それでは始めていきましょう。

Step1　アニメーション・タイル・素材の登録

今回は、

・プレイヤーキャラクターアニメーションをサンプルプロジェクト『魔女と66のキノコ』からエクスポートします。
　　該当アニメーション：「アニメーション」タブ　＞「Player」＞「★★player」



・敵キャラクターアニメーションを別のサンプルプロジェクト『CROSS × CARROT』からエクスポートします。※『魔女と66のキノコ』のプロジェクトを閉じて行ってください。
　　該当アニメーション：「アニメーション」タブ　＞「ene_keme」



・別の敵キャラクターは画像を使って作成します。
　　こちらの画像になります。ご自由にお使いください。素材の登録は「素材」タブから行えます。








・タイルは『CROSS × CARROT』からエクスポートします。
　　該当タイル　：「タイル」タブ　＞　「sample tile」



方法は「初めての方ガイドPart1」で確認したので、リンクをご確認ください。

簡単プレイヤーキャラクターアニメーションのエクスポート方法を記載すると、
「サンプルゲーム」＞『魔女と66のキノコ』＞「アニメーション」＞「Player」＞
「★★player」を「右クリックでエクスポート」です。

それを、空のプロジェクトを作成してインポートします。これも方法はPart1に記載されていますのでご確認ください。

こちらも簡単に記載しておくと、
「プロジェクトを作成」＞　ゲームタイトルを入力　＞「空のプロジェクトを作成」にチェック　＞　「サイドビューアクション」にチェック　＞　タイルサイズの画面はデフォルトのまま　で作成します。

次に、エクスポートした素材をインポートしましょう。


「アニメーション」タブ　＞　「アニメーション一覧」で右クリック　＞　「アニメーションをインポート」で、先ほどエクスポートした「★★player」「ene_keme」のファイルを選び、インポートを完了します。


同様に、
「タイル」タブ　＞　「タイル一覧」で右クリック　＞　「タイルをインポート」で「sample tile」をインポートします。


一から作る素材は、「素材」タブ　＞　「画像」　＞　「画像を追加」　＞　で該当画像を追加します。名前も適当なものに変えてしまいましょう。


これでStep1は完了です。

Step2　プレイヤーキャラクターの設定

それでは、本格的に設定に入っていきましょう。

今回は、「ジャンプして敵を踏みつけて倒すアクション」のため、プレイヤーの足元に攻撃判定を作成します。

今回使用するアニメーションはインポートした「★★Player」の「jump_UP」で、この足元に攻撃判定を付けます。


攻撃判定を追加します。


キーフレームを追加しましょう。追加した判定の横のバーの部分で右クリックしてください。


右の「キーフレームにする」にもチェックを入れましょう。
これで攻撃判定の選択範囲がキャラクターの左上に出ますので、範囲を調節しましょう。


足元に設定しました。壁判定は攻撃判定と同じ位置から始まるようにしましょう。当たり判定は攻撃判定と同じところにあると攻撃したときに自分もダメージを食らってしまうので、当たり判定は攻撃判定より上の位置に変更しました。


これで足元に攻撃判定ができたため、敵がこの判定部分に触れるとダメージを与えることができます。

それでは、実際にプレイヤーキャラクターをオブジェクト化しましょう。

「オブジェクト」タブ　＞　右クリックで「オブジェクトを追加する」　＞　でさきほど設定したプレイヤーキャラクターを選びましょう。「入力デバイスで操作するオブジェクト」のチェックも忘れずにお願いします。



プレイヤーキャラクターオブジェクトができました。（今回は、名前を英語で表記します）

「Jump」のモーションは「jump_UP」にしておきましょう。ジャンプ速度も「150」にしておきます。


このオブジェクトに、「Attack」「Dash」のアクションを加えましょう。
右クリックで「アクションを追加」します。


右側に出るボックスの一番上で名前を「Dash」にして、モーションを「run」、「左右の移動速度を変更」の部分を「150」にしましょう。


「Dash」に遷移条件を追加します。
「Wait」のアクションボックスの上で右クリックをして、「リンクを追加」して、「Dash」につなげます。
遷移条件は、「入力に関する条件」の「以下の入力操作がされた」で設定します。「B.押された」AND「←押された」OR「B.押された」AND「→押された」にします。これでBに設定されたボタンを押しながら方向キーを押すと、ダッシュするようになります。


操作キーの設定も忘れずにしておきましょう。
左上の「設定」タブの「操作キー管理」から以下のように設定します。


「Dash」から「Wait」の遷移条件は、「何も入力されなかった」にします。


次に、「Walk」から「Dash」の遷移条件を作ります。
「Wait」のときと同じなので、リンクを右クリックでコピーしましょう。


アクションボックス「Walk」を選択し、「リンクをペースト」を選択します。


これでコピーができました。
では次に、「Attack」を作成しましょう。

右クリックで「アクションを追加」し、名前を「Attack」にします。モーションは攻撃判定を設定した「jump_UP」にします。
ジャンプして踏みつけてダメージを与える設定にするため、「ジャンプ動作を行う」にチェックにし、「ジャンプ速度を変更」を「150」にします。


「Jump」をしたとき当たり判定に接触したら遷移するアクションとなるので、「Jump」のアクションボックスからリンクさせます。右クリックでリンクを追加して、「その他の条件設定」で「他オブジェクトの当たり判定に接触」を選択します。方向指定は攻撃判定がある足元に設定、「オブジェクトグループで指定」で「エネミーグループ」を選択します。これで、敵だけに攻撃を加えることができます。


これで設定ができました。

「Attack」から「Wait」に戻る遷移条件は、「Jump」から「Wait」に戻る条件と同じなため、右クリックでコピーしてペーストしましょう。


このように設定できました。

ここで一度、正しく動作するかテストプレイをしてみましょう。
「シーン」タブに行き、「menu scene」が出ているところの下の部分で右クリックし、「シーンを追加」でテスト用シーンを追加しておきましょう。シーンの名前は「test」などなんでも構いません。シーンのサイズなどの設定はデフォルトのままで「OK」を押して作成します。

追加したら、「シーン」タブ下の「タイル」タブの横の「オブジェクト」タブでプレイヤーキャラクターをシーンに設置します。「Player」の部分をクリックして、ドラッグでシーンに配置しましょう。


「F5」を押してテストプレイをします。





















キーボード「Q」を押してジャンプ、「W」を押してダッシュ。正しく設定されていますね。


では次に、敵からも攻撃を受けるので、プレイヤーキャラクターにHPを設定しておきましょう。

「オブジェクト」タブに戻り、「アクションプログラム」横の「基本設定」をクリックします。そこに「基本パラメーターの設定」があるので、そこで「体力」・「最大体力」を「4」に設定しておきましょう。

ダメージを受けたときに無敵にする場合や無敵にして点滅させたい場合は、チェックを入れておきましょう。
また、倒されたときの設定のために、「体力がなくなったら強制的に消滅」しておきましょう。


これでプレイヤーの設定は終了です。

Step3　敵キャラクターの設定

このStepでは、さきほど素材を登録・インポートした敵キャラクターに設定を加えます。

敵キャラクターのアニメーション・オブジェクトを作成しましょう。

①亀（ene_keme）

先ほどインポートした「ene_keme」のアニメーションを見てみましょう。
今回は「move」と「dead」を使います。「move」で攻撃をするので、攻撃判定がついているか確認しましょう。表示倍率を「200％」にします。攻撃判定が確認できますね。この部分に触れると、攻撃が入ることになります。



それでは、この亀をオブジェクト化しましょう。

「オブジェクト」タブで右クリックでオブジェクトを追加します。

オブジェクト名はわかりやすい名前をつけていただいて、「エネミーグループとして判定されるオブジェクト」にチェックを入れておきます。


これで亀のオブジェクトができました。
名前を「Attack」に変えて、モーションは先ほど確認した「move」にします。テストプレイ用に、「重力の影響を受けない」にもチェックを入れておきましょう。


プレイヤーに向けて向かってくるように設定したいので、ガイドPart4にあったように、「その他の実行アクション」で「テンプレート移動の設定」にチェックを入れ、「近くのプレイヤーの方へ移動」を選び、「段差から落ちない」にもチェックを入れて「OK」を押します。


これでプレイヤーに向かってくるようになりました。

次に、倒されたときの設定をしましょう。

右クリックで「アクションを追加」し、名前とモーションを「dead」に変更します。「基本設定」タブで「体力」は1のまま、「攻撃にクリティカルを設定」を外し、「無敵」も外し、「体力がなくなったら強制的に消滅」にチェックを入れておきます。


こうすることで踏まれると倒されるようにすることができます。

それでは、「Attack」から「dead」に遷移させる条件を作りましょう。

「Attack」のボックスで右クリックをて「リンクを追加」します。「その他の条件設定」を「攻撃判定に当たる」にしましょう。方向はすべてに指定して、「オブジェクトグループで指定」を「プレイヤーグループ」にしておきます。


これで設定が完了しました。

「シーン」タブで亀を配置し、テストプレイをしてみましょう。




















亀がジャンプで倒されましたね。これで亀の設定は終了です。
※倒されない場合は、判定のサイズを調整する必要があります。当たり判定が攻撃判定とうまく重なるように調整しましょう。

次に、スライムの設定をしましょう。


②赤スライム

先ほどの赤スライムの画像を「素材」タブで追加します。方法はガイドPart2に記載されていますので参考にして下さい。

まずは、アニメーションの設定をしていきます。
「アニメーション」タブで右クリックしてアニメーションを追加します。名前は「red_slime」など好きなものをつけてください。

原点は足元に設定しておきます。

まずは、「wait」モーションを作ります。モーション名を「wait」にして、各種判定を体の範囲に設定して、攻撃判定も追加しておきます。「攻撃判定」の白枠のところで右クリックして「キーフレームを追加」します。
右側の「基本設定」で「キーフレームにする」にチェックをいれるのも忘れないでくださいね。青枠の左上のところに出るポインタで攻撃判定の範囲も決定します。


そのあとは、動きを付けていきましょう。

「wait」の表示方向を右にして、モーションを作っていきます。ここの作り方は、ガイドPart2に詳しく書いてありますので、ご確認ください。

一番上の列の6枚を1モーションになるように設定していきます。

「基本設定」の「表示するフレーム数」は5に設定しておきましょう。
※好みで変更していただいて構いません。


「表示方向」のところで「→」をコピーして左を作っておきましょう。左右反転を忘れずに。
これで「wait」モーションができました。

同様に、「move」モーションも作っていきます。「モーション」で「wait」をコピーして作ると判定の設定と表示方向がコピーされて楽です。
今度は、二段目のアニメーションを使います。

最後に「dead」を作ります。四段目のアニメーションを使います。


これでアニメーションができました。
それでは、オブジェクト化していきましょう。今回も、エネミーグループにして設定します。


今回はアニメーションで設定したときと同様、「wait」「move」「dead」を作成します。
最初にできるアクションボックスは「wait」にします。次に、右クリックでアクションを追加します。これを「move」にします。ここでも「その他の実行アクション」で「テンプレート移動の設定」をします。今回は「ランダム」にして「段差から落ちない」にもチェックを入れておきます。


先ほどの亀と同じように、倒されたときのアクションを作ります。

「基本設定」タブで亀の時と同様、体力や無敵状態の解除なども行っておきましょう。


あとは、各アクションをつなげていきます。

■「wait」→「move」
「その他の条件設定」で「他のオブジェクトとの距離」を選択し、「このオブジェクトを基準に8方向から指定」で「全方向」にチェックをいれ、距離を「80」ドット「以下」に設定し、オブジェクトグループを指定で「プレイヤーグループ」を指定します。


これである程度プレイヤーが近づくと、スライムが迫ってくるようになります。

■「wait」「move」→「dead」

これは、亀の時と同様「その他の条件設定」で「攻撃判定に当たる」にします。
範囲は4方向すべてで、オブジェクトは「プレイヤーグループ」にします。

そのリンクをコピーして「move」→「dead」にもペーストすればリンク設定は完了です。


これで赤スライムの設定が完了しました。
※ここでテストプレイをする場合は、各アクションに「重力の影響を受けない」にチェックをいれるのを忘れないでください。

それでは、最後のStepに移りましょう。

Step4　シーン・タイルの設定と最終テストプレイ

それでは、マップを作成しましょう。先ほどのテストシーンを削除して、まずは1面を作ります。

今回は背景画像も作りました。ペイントでサイズを決めて一色で塗りつぶしただけのもので、5分程度で作成したものです。シーンの1画面の大きさは今回640×480ですので、幅を「2」にすることもあり1280×480の二倍以上の大きさにしています。
「素材」タブから「画像を追加」で背景画像を追加しておきましょう。今回は「back」という名前にしています。

それでは、「シーン」タブでクリックした画面の「シーン一覧」で右クリックしてシーンを追加しましょう。
設定は、「シーンサイズ幅」を「2」、タイルセットをインポートした「sample tile」、背景画像を設定にチェックを入れ、先ほど追加した「back」にして、「プレイヤーの行動範囲」「カメラの表示範囲制限」を「全体」にして「OK」を押します。

※この設定は、各シーンを右クリックしたときに出る「シーンの設定」でいつでも変更できます。


「タイル」タブで画像のタイルに壁設定を加えておきます。


また、穴に落ちたら消滅するように、透明のタイルに設定を加えます。
壁の設定はなしで、「オブジェクトがタイルに重なったら」を選び、「オブジェクトが消滅する」にチェックをいれておきましょう。これで、この透明のタイルを設置することでここに重なったオブジェクトを消すことができます。


これらのタイルと作成したオブジェクトを以下のようにシーンに設置しました。
（タイルの設置方法は、ガイドPart1　をご覧ください。）

穴の部分の一番下部（※赤枠の部分）には、先ほど設定した触れると消滅する透明のタイルを設置しています。



実際に「F5」でテストプレイしてみましょう。



















このように動きましたでしょうか？

これからまた判定などを細かく調整することになります。
ここまで、スムーズに進んでいるように見えていますが、調整など試行錯誤の連続です。
ですが、うまく動いたときの嬉しさはなにものにも代え難いものですね。

Part1はこれで終了となります。Part2以降で残機の設定やゲームオーバー画面、スイッチの使用などなどを予定しております。順次公開予定ですのでよろしければまたご覧になってくださいね。