UIの作り方講座　ステージセレクト編ステージ画像を作る

次のような条件でアニメーションが変化するオブジェクトを作っていきます。

それでは、作り方を紹介します。

アニメーションの作成

こちらの画像を登録します。

ステージ画像(6×6)

1つのオブジェクトに4パターンの画像を使いますので、合計で4×8=32の画像を登録する必要があります。

※アニメーションは一つにまとめても、オブジェクトごとに分けてもどちらでも構いません。オブジェクトコピーをするときにどちらもメリット、デメリットがあるのでやりやすい方を選択してみてください。

オブジェクトの設定

1[基本設定]をクリックし、「消滅後の復活条件」を「無し」に変更します。

2[移動とジャンプ]をクリックし、「重力の影響」を[0.00]に設定します。

オブジェクトの作成

まずは未クリア時のアクションを作ります。アクションはモーション以外の設定はありません。

1アクションプログラム枠内を右クリックし「アクションを追加」をクリックします。

2画像のように、3つのアクションを作成し、それぞれ名前とモーションを設定します。

[NoSelect][Select]には、それぞれのモーションを設定します。

次にリンクを設定していきます。

[if stage=x]→[NoSelect]

共通変数stage≠1の場合、遷移するようにします。

1リンク元を右クリックし、[リンクを追加]をクリックします。

2矢印が伸びますので、リンク先をクリックします。

3その他の条件の[+]をクリックすると、その他の条件設定ウィンドウがポップアップします。

4[2]タブをクリックし、「スイッチ・変数が変化」にチェックを入れます。

5変数を条件に設定をクリックします。

6プルダウンをクリックし、[プロジェクト名 共通]をクリックします。

7その下のプルダウンをクリックし、[stage]変数をクリックします。

8記号のプルダウンをクリックし、≠をクリックします。

9定数をクリックし、[1.00]に設定します。

10[OK]ボタンをクリックします。

[NoSelect]→[if stage=x]

同様に、変数を設定していきます。共通変数stage=1の場合、遷移するように設定します。

[if stage=x]→[Select]

共通変数stage=1の場合、遷移するように設定します。 [NoSelect]→[if stage=x]と同じなので、コピーしましょう。

1[NoSelect]→[if stage=x]のリンクをクリックし、[Ctrl]＋[C]、もしくは、右クリックからコピーをクリックします。

2[if stage=x]をクリックして[Ctrl]＋[V]、もしくは右クリックから「リンクをペースト」をクリックします。

3[if stage=x]から矢印が出るので、[Select]をクリックしてリンクをつなぎます。

[Select]→[if stage=x]

[if stage=x]→[NoSelect]と同じなので、コピーしましょう。

1[if stage=x]→[NoSelect]のリンクをクリックし、[Ctrl]＋[C]、もしくは、右クリックからコピーをクリックします。

2[Select]をクリックして[Ctrl]＋[V]、もしくは右クリックから「リンクをペースト」をクリックします。

3[Select]から矢印が出るので、[if stage=x]をクリックしてリンクをつなぎます。

まだ途中ですが、シーンに貼り付けて実際に動かしてみましょう。

シーンの貼り付けについて

初期アクションが「遷移前のモーションを引き継ぐ」のため、オブジェクトを貼り付けるときは透明になってしまいます。位置を合わせづらい場合は、「出現時のアクション」を別のアクションに変更してレイアウトを調整します。終わったらオブジェクトの初期アクションに戻しておきましょう。

続いて、ステージをクリアしている場合のアクションを作成します。ステージをクリアしているかどうかはスイッチで判別します。

共有スイッチの作り方

共通スイッチは変数と同様に[素材]から登録します。

1[素材]をクリックします。

2[スイッチ]をクリックします。

3スイッチ一覧の枠内を右クリックし、「スイッチを追加」をクリックします。

4スイッチ名を変更します。ここではStageClear1～8と8つのスイッチを追加します。

先ほどと同じように、アクションを配置します。

1アクションプログラム枠内を右クリックし「アクションを追加」をクリックします。

2画像のように、2つのアクションを作成し、それぞれ名前とモーションを設定します。

[ClearNoSelect][ClearSelect]には、それぞれ、適したモーションを設定します。

※見やすいように[if stage = x]はショートカットを作成しております。

続いてリンクを作成します。

[if stage=x]→[ClearNoSelect]

[共通スイッチStageClear1 が ON] と [共通変数stage ≠ 1]の両方を満たすとき、切り替わるようにリンクを設定します。[if stage=x]→[NoSelect]をコピーして編集すると楽です。

1[if stage=x]→[NoSelect]のリンクをクリックし、[Ctrl]＋[C]、もしくは、右クリックからコピーをクリックします。

2[if stage=x]をクリックして[Ctrl]＋[V]、もしくは右クリックから「リンクをペースト」をクリックします。

3[if stage=x]から矢印が出るので、[ClearNoSelect]をクリックしてリンクをつなぎます。

4判定優先度を1に変更します。

※優先度を高く設定しないと、[if stage=x]→[NoSelect]に遷移する可能性があります。

5その他の条件の[+]をクリックすると、その他の条件設定ウィンドウがポップアップします。

6[2]タブをクリックし、「スイッチ・変数が変化」にチェックを入れます。

7スイッチを条件に設定をクリックします。

8プルダウンをクリックし、[プロジェクト名 共通]をクリックします。

9┗プルダウンをクリックし、[StageClear1]スイッチをクリックします。

10[OK]ボタンをクリックします。

11その他の条件設定を二つ設定すると[OR]のプルダウンが出現します。プルダウンをクリックして[AND]を選択します。

※ORの場合は、どちらか片方の条件を満たした場合、ANDは両方の条件を満たした場合にアクションが切り替わります。

[ClearNoSelect]→[if stage=x]

[共通変数stage = 1]の場合に切り替わるようにします。 [NoSelect]→[if stage=x]とまったく同じなので、コピーしてしまいましょう。

1[NoSelect]→[if stage=x]のリンクをクリックし、[Ctrl]＋[C]、もしくは、右クリックからコピーをクリックします。

2[ClearNoSelect]をクリックして[Ctrl]＋[V]、もしくは右クリックから「リンクをペースト」をクリックします。

3[ClearNoSelect]から矢印が出るので、[if stage=x]をクリックしてリンクをつなぎます。

[if stage=x]→[ClearSelect]

[共通スイッチStageClear1 が ON] と [共通変数stage = 1]の両方を満たすとき、切り替わるようにリンクを設定します。[if stage=x]→[Select]をコピーして編集すると楽です。

1[if stage=x]→[Select]のリンクをクリックし、[Ctrl]＋[C]、もしくは、右クリックからコピーをクリックします。

2[if stage=x]をクリックして[Ctrl]＋[V]、もしくは右クリックから「リンクをペースト」をクリックします。

3[if stage=x]から矢印が出るので、[ClearSelect]をクリックしてリンクをつなぎます。

4判定優先度を1に変更します。

※優先度を高く設定しないと、[if stage=x]→[Select]に遷移する可能性があります。

5その他の条件の[+]をクリックすると、その他の条件設定ウィンドウがポップアップします。

6[2]タブをクリックし、「スイッチ・変数が変化」にチェックを入れます。

7スイッチを条件に設定をクリックします。

8プルダウンをクリックし、[プロジェクト名 共通]をクリックします。

9┗プルダウンをクリックし、[StageClear1]スイッチをクリックします。

10[OK]ボタンをクリックします。

11その他の条件設定を二つ設定すると[OR]のプルダウンが出現します。プルダウンをクリックして[AND]を選択します。

※ORの場合は、どちらか片方の条件を満たした場合、ANDは両方の条件を満たした場合にアクションが切り替わります。

[ClearSelect]→[if stage=x]

[共通変数stage ≠ 1]の場合に切り替わるようにします。 こちらも[Select]→[if stage=x]とまったく同じなので、コピーしてしまいましょう。

1[Select]→[if stage=x]のリンクをクリックし、[Ctrl]＋[C]、もしくは、右クリックからコピーをクリックします。

2[ClearSelect]をクリックして[Ctrl]＋[V]、もしくは右クリックから「リンクをペースト」をクリックします。

3[ClearSelect]から矢印が出るので、[if stage=x]をクリックしてリンクをつなぎます。

これでSTAGE01用の画像オブジェクトが完成です。実際に動かしてみましょう。

テストプレイ中にキーボードの[F1]キーを押すとメニューが表示されます。 [デバッグ]-[共通変数とスイッチ情報]をクリックすると、ウィンドウが表示されます。 これにより、スイッチを手動で変更することができます。

※[素材]-[スイッチ]で初期値をONにしてテストしても良いです。

スイッチを切り替えてこのように動作すれば成功です。

※[Select]→[if stage=x]の条件にStageClearがONが無いので、一度カーソルを動かさないとClearには切り替わりません。

切り替わらない場合は条件や優先度を見直してみましょう。
同様に、STAGE02～STAGE08用のオブジェクトを作成します。

作成したオブジェクトをコピーして、変数を修正すると時間が短縮できます。

1オブジェクト一覧から画像オブジェクト(stageselect_stage01)をクリックし、[Ctrl]＋[C]、もしくは、右クリックからコピーをクリックします。

2[Ctrl]＋[V]、もしくは右クリックして貼り付けをクリックします。

3コピーしたオブジェクトを右クリックし、オブジェクトの設定をクリックします。

4ファイル名を変更します。アニメーションを別々で作成した場合は、アニメーションの設定を変更します。

5[NoSelect][Select][ClearNoSelect][ClearSelect]のアクションのモーションをSTAGE02～STAGE08用のものに変更します。

6各リンクをクリックし、その他の条件設定の[スイッチ・変数が変化]をダブルクリックします。

7変数、スイッチの値を対応するステージ数に合わせて変更します。

8つのオブジェクトが完成したら、シーンに貼り付けて完成です。貼り付けるときは表示優先度に注意しましょう。

テストプレイするとこのような感じになります。

いかかでしたでしょうか。 オブジェクト数が多くなりので少し作るのが大変ですが、表現の幅は広がったと思います。 今回はステージセレクトとして紹介しましたが、キャラクターセレクトとしても使えますので、色々アレンジしてください。