マニュアル: シーン遷移とポータルでステージを増やそう!

このチュートリアルについて

アクションゲームツクールでは、複数のシーンをつなぎ合わせる「シーン遷移」と「ポータル」の2つの機能があります。
このチュートリアルでは、
Part1: タイトル画面を作ってシーン遷移でつなぐ
Part2: ステージ2を作ってポータルでつなぐ
の2つのパートで「シーンの変え方」を学びます。

Part1: タイトル画面を作ってシーン遷移でつなぐ

Part1-1:タイトル画面を作る

タイトル画面でAボタンを押したらステージがはじまる、というシンプルな形でタイトル画面を作ってみましょう。

  1. まずはタイトル画面をつくりましょう。タイトルもマップも一種なので、マップから作ります。
    「マップビュー」の左端、マップ一覧ドックで「+新規作成」ボタンをおしましょう。

  2. 種類はマップのままで大丈夫です、名前にタイトルといれて「追加」します。

  3. マップ画面ができました、タイトルはスクロールする必要がないため、「UI」レイヤーに作っていきます。「UI」レイヤーに背景をいれましょう。まずはマップレイヤーで「UI」を選択してください。
    image

  4. 左端の一覧ドックの上部にあるタブを「画像」に切り替えます。これで、今プロジェクトで使える画像が一覧で表示されます。

  5. ステージ1に使った青空の背景画像を使いましょう、「B_001_plain_03」をドラッグして画面に落としてください。

  6. きちんとUIレイヤーの子として読み込めていたらOKです。B001Plain…が別の場所にあったら以下の画像になるようになおしましょう。

  7. 青空背景は幅が小さいので調整しましょう。UIレイヤーの表示領域は、赤線と緑線が交わる原点右下にある、青色の四角形です。四角形を覆うように青空を広げてしまいましょう。ハンドルを動かして拡大縮小します、その際Shiftを押しながらハンドルを動かすと、比率を保ったまま大きくできるので便利です。

  8. 続けてタイトル文字を作ります、UIレイヤーの+を押してラベルを追加します。

  9. インスペクターの入力欄に
    「ジャンプアクション
    Aボタンでスタート」と入力し、ラベル設定で新しい「LabelSettings」を作ります。

  10. LabelSettingsを開き、フォント>サイズを80pxくらいにしましょう。

  11. タイトル文字は中央揃えのほうがよいので、ラベル設定のすぐ下にある水平方向整列を「中央」にしましょう。

  12. 最後に画面の中央にラベルを動かします、プレビューで動かしてもいいのですが、ラベルではアンカー(基点)を使って中央に表示することができます。インスペクターを少し下にスクロールして、Control>レイアウトにあるアンカー設定を「中央」に変えましょう。これでアンカー(緑の斜め十字のアイコン)が画面中央にうつり、プレビューの中央にラベルが配置できるはずです。

  13. 念の為、右上のメニューの「現在のシーンを実行(F6)」を押して表示されるかチェックしましょう。これは、シーン遷移を無視してこのシーンだけをテストするテストプレイ機能です。青空とタイトル文字がでていればOKです。もしでていなければ、正しくUIレイヤーの子に画像があり、青枠の中に配置されているかチェックしてください。

Part1-2:シーン遷移をつなごう!

アクションゲームツクールでは「シーン遷移」ビューでヴィジュアルスクリプトのように、シーンとシーンをリンクで繋いでシーン遷移をつくっていくことができます。

  1. 「シーン遷移」ビューに切り替えてください。ヴィジュアルスクリプトのような画面がでて、中央にはGameScene1のみが配置されています。

  2. 左端のマップ一覧から、「タイトル」をGameScene1の左あたりにドラッグ&ドロップしてください。

  3. まずは、初期シーンをタイトルに変えましょう。このままではGameScene1から始まってしまいます。「タイトル」を右クリックして「初期シーンに設定」します。

  4. タイトルが明るくなり、初期シーンのアイコンがうつっていることをチェックしてください。

  5. 続けてタイトルからGameScene1にリンクをつなぎます。ヴィジュアルスクリプトと同じように、右クリックメニューからリンクを追加してつなぎましょう。

  6. 遷移条件を決めます、右側のインスペクターの切替え条件>以下の入力がされたにチェックをいれ、入力操作リストで「+入力を追加」をクリックします。

  7. 入力に使う操作キー、A、押された瞬間と設定して追加しましょう。これで、タイトルシーンでAを押すと遷移するようになりました。

  8. 最後に切り替え演出を設定しましょう、
    切り替え前演出>画面演出:ブラック
    切り替え後演出>画面演出:ブラック BGM演出:再生 BGM:シーン設定のBGM
    と設定します。これでシーン遷移で黒画面のフェードアウト/フェードインが挟まり、シーン遷移後にシーンで設定したBGMが流れるようになりました。

  9. :play_button:かF5キーでテストプレイをしましょう、タイトル画面から始まり、Aボタン(Zキー)を押してゲームが始まれば成功です。

うまくいかないときのチェックリスト

・タイトル画面から始まらない。
タイトル画面を初期シーンにしているか確認してください。
テストプレイを現在のシーンを実行(F6キー)ではなくプロジェクトを実行(F5キー)で行っていることを確認してください。
・タイトル画面から遷移できない。
タイトル→GameScene1の遷移が正しいかチェックしてください。
・ゲームシーンのBGMが消えた。
切り替え後演出の、BGM演出を再生、BGMをシーン設定のBGMとしているかチェックしてください。

Part2: ステージ2を作ってポータルでつなぐ

続けて、ポータルの使い方を説明します。GameScene1を複製し、そのシーンに遷移できるようにしてみましょう。

  1. まずはポータル用のグラフィックを「パーティクルで」用意しましょう。素材管理ビューに切り替え、公式素材をインポートを選び、タブを「エフェクト/パーティクル」に切り替えます。

  2. パーティクルフォルダの中にある、P_022_warpを選択して「インポート」しましょう。

  3. マップビューに切り替え、マップ一覧のGameScene1を右クリックして「複製」してください。

  4. 名前は「GameScene2」としましょう。

  5. 新しく作ったシーンはおいておいて、「GameScene1」を開きます。ベースレイヤーの「+」ボタンからポータルを追加しましょう。

  6. ポータルの位置をドラッグで動かして、プレイヤーからアクセスしやすい位置にしましょう。

  7. ポータル用のグラフィック(パーティクル)を追加します、左端の一覧ドックのタブをオブジェクトに切り替えます。

  8. オブジェクトと書かれた「表示する種別」欄をクリックしてドロップダウンリストを開き、パーティクルを選択します。

  9. 先ほど追加したP_022_warpがあるはずなので、ドラッグ&ドロップでポータルの枠内におきましょう。その際、画面内にあるようにShiftを押しながらドロップすることでポータルの子として配置できます。

  10. 画像のようになっていればOKです、このように、パーティクルを直接ステージ内に配置することもできます。Warpは必ずしもポータルの子である必要はありませんが、子にしておくとポータル移動時に一緒に移動しますし、管理上便利です。

  11. 続いてポータルを設定します、まずは入場、退場演出を設定しましょう。ポータルノードを選択してインスペクターを見てください。先程のシーン遷移と全く同じ設定を行います。
    入場演出>画面演出:ブラック
    退場演出>画面演出:ブラック BGM演出:再生 BGM:シーン設定のBGM

  12. 続いて遷移先の設定をします、「ポータル設定」を開き、「遷移先をプレビューで選択」ボタンを押します。

  13. 「遷移先シーン」の「一覧」ボタンを押し、「GameScene2」を選択して「決定」します。

  14. 遷移先の「GameScene2」の全体像がプレビュー表示されました。この画面では遷移先のシーンにポータルがあれば選択、なければ新しく作成することができます。今回はまだないので、新しく作っていきましょう。

  15. プレビュー画面内の、ポータルを作りたい好きなところをクリックしてください。新規ポータルというオレンジの欄が現れます。クリックしたところに動くので、お好みの場所を選択してください。

  16. 選択できたら、
    新規作成時の配置先レイヤー:BaseLayer
    相互通行にする:オン
    遷移元のポータルを丸ごとコピー:オン
    として「決定」しましょう。

  17. これでポータルができているはずですが、念の為チェックしましょう、GameScene2を開いてください。(この際保存を促されるとおもいますが、必ず保存してから移動してください。)

  18. 先ほど設定した場所に、ポータルが配置されているはずです。確認したら最後の手順です。

  19. ポータルは、触れたプレイヤーをそのまま遷移先のシーンに移動する機能です。しかし、GameScene1を複製して作成したGameScene2には既にプレイヤーがいます。この場合どうなるのかというと・・・・プレイヤーが二人に分裂してしまいます。なので、GameScene2プレイヤーを削除してください。

  20. 作成できたらテストプレイをしましょう。シーン1でポータルに触れればシーン2へ、シーン2でポータルに触れればシーン1へ、という動作ができれば完成です。

うまくいかないときのチェックリスト

・ポータルに触れても動かない
遷移先をプレビューで選択をもう一度開き、正しく設定されているか見てください。
・ポータル遷移でBGMが消える。
退場演出で正しくBGMを再生するように設定しているかチェックしてください。
・シーン1から2にいけるが、2から1に戻れない。
ポータルの作成時に「設定のコピー」をし忘れている可能性があります。ゲームシーン2のポータルをチェックして、ゲームシーン1のポータルの設定を手動でし直してみてください。

発展解説

シーン遷移とポータルの使い分けはどうする?

シーン遷移とポータルの一番大きな違いは、プレイヤーを移動するか、しないか、です。
シーン遷移ではプレイヤー自体は移動しないため、遷移先にプレイヤーをセットしていてもプレイヤーのHP等の値は初期値にリセットされてしまいます。(もし引き継ぎたい場合は、プロジェクト変数などを経由して保存、呼び出しをする必要があります。)
逆に、ポータル移動ではプレイヤーの状態が引き継がれます。
そのため、いわゆるマップ移動などではポータル、ゲームオーバーからのリスタートなどの初期化を伴う移動ではシーン遷移を使い分けるといいでしょう。

変数によるシーン遷移

シーン遷移、ポータルともに遷移条件として「変数」を使うことができます。そのため、今回のチュートリアルのゲームであれば、「プロジェクト変数:敵の数≧5」を条件とすることで、敵の数を5匹倒したらポータルで次のステージへ行ける、という設定が可能です。
ただ、注意点としてプロジェクト変数はシーン遷移しても引き継がれてしまうため、シーン遷移後は敵の数を戻す動作を行うオブジェクトを用意しておく必要があります。(ポータル遷移であれば、ポータルへの移動後の設定>スイッチ、変数を変更からポータル遷移後に変数を変えるように設定することができます。)

これでシーン遷移/ポータル遷移のチュートリアルは以上です。
他のチュートリアルへは目次から!