このチュートリアルについて
このチュートリアルでは、バウンドしながら飛んでいく炎の弾をツクることを通して、
アクツクの「弾」システム
スプライトアニメーションの作り方
を解説をしていきます。
「ジャンプアクションチュートリアル」で作成したプロジェクトを使って解説をします。
アクツクの弾システムは、
- 弾用のオブジェクトを作成
- 発射元のオブジェクトに弾設定で設定
- 発射元のオブジェクトのビジュアルスクリプトの「弾を発射」アクションで発射
という手順で設定することができます。
Part1: 弾用のオブジェクトをツクってみよう！
まずは、弾用のオブジェクトをつくっていきます、今回は、テンプレート形式ではない画像でのアニメの作り方と、判定アニメ機能の使い方を説明します。
Part1-1: テンプレートを使わないスプライトアニメの作り方
スプライトアニメとは、いわゆるパラパラ漫画のようなもので、画像を順番に表示することでアニメーションをさせる機能です。前回はテンプレート形式で一気に読み込みましたが、今回は1コマ1コマを選択して作る方法を学びましょう。
- 弾用の画像を用意します。「素材管理」ビューで「公式素材をインポート」します。
- 「武器」にあるP_002_fire.pngを選択して「インポート」しましょう。
- 「オブジェクト」ビューの左辺、オブジェクト一覧で「＋新規作成」します。
- オブジェクト名: 炎弾
オブジェクトグループ: Player_Bullet
コリジョンの役割：プレイヤーの弾
と設定し、下欄で「弾（基本）」を選択して「作成」します。
- スプライトアニメタブに切り替え、「スプライトアニメを使う」ボタンを押します。
- 右上の「シートから追加」ボタンを押します。
- アニメーションの追加ウィンドウで、「追加」を押します。
- 移動と名付けて「OK」を押しましょう。
- シートからフレームを追加というウィンドウが開くので、「画像一覧から…」ボタンを押します。
- 先ほど追加した、「P_002_fire.png」を選んで「決定」します。
- 画像が追加されますが、少し小さいので拡大しましょう、「表示倍率」のプルダウンで800%に変更します。
- 続いて、この画像は4コマの画像ですが、1コマになってしまっているので分割しましょう、水平コマ数を「4」にします。画像に縦線が入り4コマになりました。
- 続いて、判定のサイズを1コマのサイズに合わせましょう。「初期判定調整」ボタンを押します。
- 壁判定、攻撃判定ともに大きすぎるようです。調整していきましょう。
- 壁判定のハンドルを動かして調整します、幅8、高さ12くらいに調整しましょう。（プレビューの拡縮はマウスのホイールでできます。）
- 攻撃判定に切り替えて調整します、攻撃判定は一回り大きく、幅12、高さ16くらいにしておきましょう。できたら「確定」します。
- 最後に、フレームを追加します。クリックした順に読み込まれるようになるので、左のコマから順番に1,2,3,4とクリックしていき、できたら「追加」します。
- これでアニメが追加できました、下の「フレーム」欄に先ほどの画像が4つ表示されていれば成功です。
- ウィンドウの左上にある[
]ボタンを押してみましょう、アニメーションがプレビューでき、キラキラと炎弾が輝くアニメが入ったことがわかります。
Part1-2: 判定アニメで画像を回転させよう！
- タブを判定アニメに変更します。
- 判定アニメは、各コマごとに判定や画像の位置やサイズ、回転状態などを設定することができる機能です。ここで、「オブジェクト画像」を回転させるように設定します。
まずは「要素(一部非表示)」欄でオブジェクト画像を選択します。
- 一番下の移動（４フレーム）欄にある５つのコマから、ENDを選択します。
なんでアニメは4コマしかないのに5コマ目にENDがあるのか？
シンプルアニメ機能は、「それぞれのコマの再生開始時点」の位置にキー(状態)を設定する機能です。4コマのままでは、4コマ目の最後の状態＝ループ終了時の状態を設定できないため、ENDコマが判定アニメのみ自動で追加されるようになっています。
- 右側のインスペクターの、Node2D>トランスフォームにある、「回転」の値を360としましょう。これで、アニメの再生終わり時点の「回転」の値(これをキーといいます)が設定されました。1コマ目のキーは作成時の状態=0度が自動設定されており、間のコマのキーは自動で補間されるので設定はこれだけで完了です。
- ウィンドウの左上にある再生ボタンをクリックしてみてください、くるくると画像が回転するはずです。うまくいかないときは、きちんとENDのコマを360度にしているかチェックしてください、切り替え忘れで1コマ目を360度にしていたりするかもしれません。
再生が終わるとENDのコマの回転が359.9になっているのはなぜか？
表示上のみの問題です。ループ再生が有効な場合、再生を行うと360度の状態＝本当のENDの状態では0秒地点に自動で戻ってしまいます、なので戻る直前の状態で表示されますが、ENDには正しく360の値が設定されているので問題はありません。
Part1-3: 移動速度と重力の設定を変えよう！
さて、次は弾として正しい動きにかえましょう、移動速度をプレイヤーより早く、そしてバウンドなので重力の影響を受けるようにする必要があります。(普通の弾は重力の影響を受けないので、テンプレートでは重力を無効にしています。)
-
プレビュータブに切り替えて、要素一覧で「移動とジャンプ」を選択します。
-
右側のインスペクターの、移動速度を設定で
左右の移動量:500
上下の移動量:500としましょう。
-
その少し下、ジャンプの設定にある重力の値が0になっていますので、
重力5.0
にしましょう。重力の既定値は1.0なので、通常の5倍の重力をこの弾に掛けます。通常の重力ではふわっとした動きになるので、あえて強い重力をかけることでキビキビした動きになるようにします。
-
これでオブジェクトの設定は完了です、念の為「保存」しておきましょう。
Part2: 弾のヴィジュアルスクリプトを設定しよう！
続いて、弾にヴィジュアルスクリプトを設定します。
- ヴィジュアルスクリプトを編集を押します。
- ヴィジュアルスクリプトを作成ボタンを押します。
- ステート001を以下のように変更します。
割り当てるアニメーション＞アニメーションカテゴリ名：移動
タイトル：移動
- 「移動」ステートに「＋実行アクションの追加」をします。
左枠では移動＞テンプレート移動の設定
右枠ではテンプレート移動タイプをバウンド、重力の落下でも跳ね返るのチェックをオン
と設定しましょう。バウンドは衝突可能なものにあたった際にバウンドするという移動で、これで地面にあたったときに跳ねるようになります。
テンプレート移動アクションについて
「テンプレート移動」は一度実行すると、別のテンプレート移動で「停止」を命じられるまで指定の移動を続けるアクションです。つまり、複数のステートをまたいでも同じ動きを続けるため、単純な移動しか行わないオブジェクトでは便利な機能です。「エネミー」の左右移動もこれでつくられています。
- 続いて、敵にあたったときに消える設定をつくります。新しいステートを近くにつくり、名前を消滅に変えて「＋実行アクションの追加」をしましょう。
- 消滅/復活の「自身を消滅させる」を追加します。
- 最後にリンクを設定します、「移動」ステートから「消滅」ステートにリンクをつなぎ、「＋その他条件の追加」をします。
- 左枠ではオブジェクト操作＞オブジェクトの当たり判定と接触
右枠では、オブジェクトからみた接触方向を全方向有効化し、対象となるオブジェクトの種類をグループ、対象となるオブジェクトグループを「Enemy」として追加しましょう。
- これで敵にあたれば消えるようになりましたが、このままでは敵に当たらない限り弾が消えません。壁判定に横からぶつかったら消えるようにしましょう。もう一度「＋その他条件の追加」をします。
- 左枠では「衝突可能なものと接触」右枠では、
このオブジェクトからみた接触方向：左、上、右（!!下以外です、下もいれると地面でバウンドせず消えてしまいます。!!）
前の条件との論理条件：「OR」
ここは間違えやすいので注意して見てから追加してください。
- 衝突可能なものと接触を見て、アイコンが正しく「OR」になっていればOKです。これで弾側の設定が完了しました。
