チュートリアル: ツクールモードでジャンプアクションをツクろう!

Part3: オブジェクトをツクろう!

Part3-1: 「素材管理」で公式素材を用意しよう!

Part3ではプレイヤー用のオブジェクトを用意しますが、まず画像がありません。

「素材管理」で公式素材をゲームに取り込みましょう。

  1. 上部のビュー切り替えバーで、素材管理ビューに切り替えます。

    image

  2. 「公式素材をインポート」をクリックします。

  3. サイドビュー用テンプレート画像を展開し、player_meika.pngを選択して「インポート」しましょう。これは、サイドビューアクションのプレイヤー用に用意されたテンプレート画像になります。

  4. 念の為、ちゃんと読み込まれたかチェックしましょう、「フォルダ」を「画像」に切り替えるとplayer_meika.pngがあるはずです。もしなかったら取り込み直しましょう。

Part3-2: プレイヤーのオブジェクトをツクろう!

続いては実際にプレイヤーを作っていきます。

  1. 「オブジェクト」ビューに切り替えます。

  2. 左側のドックにある、「+新規作成」ボタンを押しましょう。

  3. 「新しいオブジェクトを作成」というウィンドウが立ち上がるので、オブジェクト名に「プレイヤー」と名付けます。他はデフォルトの設定のままで良いですが、もし違っていたら下の画像のように設定して「作成」を押しましょう。

  4. デフォルトの移動入力を自動設定しますか?というウィンドウがでるので、「はい」を押してください。これでコントローラーやキーボードで操作するためのキーが自動で設定されます。

    もし、間違えて「いいえ」を押してしまったときは

    プレイヤーのノードリストの必須要素にある「移動とジャンプ」を選択します。

    右側のインスペクタードックを確認し、入力キーの設定で左方向への移動をleft、右方向への移動をrightとしてください。

  5. これでプレイヤーのオブジェクトが作成できました。

Part3-3: プレイヤーにアニメを設定しよう

続いて、先程取り込んだ画像を使ってアニメを作っていきます。

  1. プレビュー上部にあるタブを「スプライトアニメ」に切り替えてください。

  2. 画面中央にボタンが現れるので、下の「テンプレートから読み込み」ボタンを押し、「サイドビュー用」を選択します。

    間違えて「スプライトアニメを使う」を押してしまった時は・・・

    画面右上に「テンプレートから読み込み」ボタンがあるのでこちらを使ってください。

  3. 「サイドビュー・テンプレートから読み込み」というウィンドウが開きます。これは、特定の形式で作られた画像を一括で読み込んでアニメーション化するためのウィンドウです。

  4. 早速画像を取り込みましょう、右上の「画像一覧から…」ボタンをクリックします。

  5. プロジェクト内にある画像が一覧で表示されるので、先ほど取り込んだplayer_meikaを選択して「決定」を押します。

  6. 画像が読み込まれます、右側に出ているのが読み込まれるアニメのプレビューで、1.待機~6.射撃までが自動で読み込まれます。左側に見えているのが壁判定(水色の四角形)当たり判定(青色の四角形)攻撃判定(赤色の四角形)なのですが、画像とあっていません、ここは手動で調整が必要です。

    射撃以降の余っているコマはなに?

    このテンプレートは19種類のアニメを持つパルクールアクション用テンプレートです。テンプレート欄を切り替えることで19種類のアニメを自動読み込み・設定することができますが、チュートリアルでは使用しないので、そのうち6種類だけを使う最小テンプレートを使います。

  7. 壁判定(水色四角形)を調整します。壁判定は、タイルや他のオブジェクトとの衝突を検知するエリアになります。
    水色の四角形の四隅の□を動かして、キャラクターに合わせましょう、大体適当で大丈夫ですが、足元だけはきれいに合わせて置かないと地面から浮いたり埋まったりするので注意しましょう。

  8. 当たり判定(濃い青色の四角形)を調整します。当たり判定は、敵の攻撃判定に当たる範囲です、壁判定より一回り大きくなるように設定しましょう。

  9. 最後に攻撃判定を調整します。今回はジャンプアクションなので、足元にだけ攻撃判定がでるようにしましょう。
    ここで一つ重要なポイントです、ジャンプアクションでは、ジャンプ中や落下中は攻撃ができますが、他の動きでは攻撃ができないのが普通です・・・なので、有効の✓を外し、攻撃判定(無効)となるようにしておきましょう。

  10. 設定できたら取り込みボタンを押して完成です、6種類のアニメーションセットが自動で作成されました。

  11. 試しに好きなアニメを選択して:play_button:再生/停止ボタンを押してみましょう、アニメが再生されます。

Part3-4: ジャンプ/落下中だけ攻撃を有効にできるようにしよう。

先の取り込みで攻撃判定を無効にしてしまったため、このままでは攻撃できません、「判定アニメ」で調整をしましょう。

先の取り込みで無効化を忘れたり、判定の位置を間違えてしまったときは・・・
  1. 一度プレビュータブに戻ります。

    image

  2. 「壁判定」「当たり判定」「攻撃判定」があるので変更したいものを選びます。

  3. 取り込みと同じように判定を調整できます。(無効化は、右側のインスペクターにあります。)

  4. これはプレビューしているだけなので、判定アニメに反映します。「判定アニメ」タブに切り替えます。

  5. アニメーションセットでアニメを選択します。

  6. 右上にある「初期キー同期」ボタンを押せばプレビューでの編集内容が反映されます。これを各アニメに設定しましょう。

  1. 「判定アニメ」タブを選択して切り替えます。

  2. アニメの見た目がかわり、判定が表示されるようになりました。この画面では、下部に表示されている「フレーム」ごとに、それぞれの判定の位置やサイズがどうなっているか、を変更することができるようになっています。

  3. アニメーションセット欄で「jump」を選択します。先の取り込みで正しく設定できていれば、足元の攻撃判定は赤色ではなく透明(無効状態)になっているはずです。

  4. 要素(一部表示)欄で攻撃判定を選択します。

  5. 下のjump(3フレーム)欄で1フレーム目が選択されていることを確認します。ジャンプ開始時の判定の内容を変えることになります。

  6. 右のインスペクタードックにある、「無効」プロパティのチェックを外しましょう。

  7. これで、ジャンプでは足元の攻撃判定が赤く、有効になりました。左上の:play_button:では判定の動きとアニメをあわせてプレビューできます。

  8. 続いて、アニメーションセットで「air」を選びます。airは落下状態に使うアニメーションなのでこちらも攻撃を有効にする必要があります。4~7の手順を繰り返し、1フレーム目の攻撃判定を有効にしましょう。

  9. これで、ジャンプ中と落下中だけ、攻撃判定が有効になるようにできました。

  10. 最後にデータを保存しておきます。タブをプレビューに戻し「保存」ボタンを押します。(Ctrl+Sのショートカットでも保存できます)

  11. 左のオブジェクトドックのプレイヤー画像にサムネイルがついたら保存完了です。

Part3でオブジェクトの準備が完了したので、次はヴィジュアルスクリプトでプログラムを作っていきます。