UIの作り方講座　基礎編カーソル移動を作る　パターン2

[EXIT]⇔[NEW GAME]のリンクを追加すれば実現できます。
まずは見た目を分かりやすくするために[NEW GAME]のショートカットを作成します。 もちろん、ショートカットを利用しないでも作成できます。

• アニメーションさせる場合、画像枚数を抑えられる
• ボタンを押してもカーソルの位置が変わらない場合

• 複数のオブジェクトを作成する必要がある

このカーソル移動は、この2つの画像を使っています。
パターン1で上のような動きを作る場合、[カーソルの画像数(6枚)]×[項目数(3項目)]=18枚の画像を用意する必要があります。

どちらが簡単かは人それぞれと思いますので、自分に合ったやり方を選んでください。

アニメーション作成

はじめに「NEW GAME」「LOAD GAME」「EXIT」の3つのモーションを作成します。

文字の横に接続点を設定していきます。この接続点の位置に矢印のアイコンが表示されます。

1モーションを作成後、接続点の右側の□をクリックします。

2「サイズと位置を指定」をクリックします。

3接続点の位置を設定します。

[LOAD GAME]、[EXIT]も同様に作成します。
※接続点は同じものを使い、位置だけ変更します。

次にカーソルのアニメーションを設定します。 オフセットの[0.0]の位置(十字の中心)が接続点の中心となりますので、それに合わせてアニメーションの位置を調整します。
今回は画像のように、「cursor_motion」というアニメーションを追加します。 60f(1秒)経つと、0.5秒かけて一回転するアニメーションを作成しております。 また、モーションをクリックすると、ループ回数を設定できます。今回は無限ループにしております。

オブジェクトの作成

カーソルのオブジェクトから作成していきます。

1[オブジェクト]をクリックします。

2「オブジェクト一覧」枠内を右クリックし、[オブジェクトを追加]をクリックします。

3オブジェクトの設定ウィンドウがポップアップしますので、オブジェクト名を変更します。

ここではcursor_motionとします。

4アニメーションを選択のプルダウンをクリックし、カーソルのアニメーション(cursor_motion)を選択します。

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

次に、オブジェクトのモーションを設定します。

1初期アクションをクリックします。

2名前を変更します。ここではcursor_motionとしております。

3「モーション」のプルダウンをクリックし、作成したカーソルを選択します。

次に、基本設定を設定します。

1[基本設定]をクリックします。

2消滅後の復活条件を「無し」に変更します。

3「攻撃にクリティカルを設定」「ダメージを受けた時一定時間無敵にする」「無敵中オブジェクトが点滅」のチェックを外します。

4[移動とジャンプ]をクリックします。

5画面をスクロールして、[重力の影響]を0.00に設定します。

最後に、表示と親子関係を設定します。このオプションは、他のオブジェクトから子オブジェクトとして呼び出された場合に、特定のパラメータを引き継ぐかを設定できます。 ここでは、親オブジェクトに追従するように設定します。

1[表示と親子関係]をクリックします。

2「子オブジェクト時の移動」を「親オブジェクトから離れず追従する」、もしくは「間隔を設定：時間で設定(秒)0.00」にチェックを入れます。

3誤作動防止のため、子オブジェクト時の攻撃判定、親オブジェクトから引く継ぐ要素のチェックを外します。

追従の設定によって、カーソルの動きはこのように変化します。

これでカーソルオブジェクトは完成です。
続いて、「NEW GAME」「LOAD GAME」「EXIT」のオブジェクトを作成します。 アクションプログラム自体は先ほどのカーソルパターン1のオブジェクトと途中までは同じです。 モーションが異なるだけなので、作り方の説明は割愛します。

※オブジェクトはコピーして流用することも可能です。cursor1をコピーして、モーションを変更する方法を説明します。

オブジェクトをコピーする

1パターン1で作成した「cursor1」を右クリックし、コピーをクリックします。

2オブジェクト一覧で右クリックし、貼り付けをクリックします。

3コピーしてできた「cursor1(1)」の名前を変更します。ここではcursor3とします。

※右クリックして[名前の変更]をクリック、もしくは名前を1回クリックすると名前を変更できます。下のオブジェクトの設定変更でもオブジェクト名を変更できます。

オブジェクトのアニメーションを差し替える

1cursor3を右クリックし、オブジェクトの設定をクリックします。

2オブジェクトの設定ウィンドウがポップアップするので、「アニメーションを選択」から先ほど登録したアニメーション名を選択します。

ここでは、cursor3を選択します。
アニメーションが初期化されるため、モーションの再設定が必要になります。

モーションを再設定する

1[NEW GAME]アクションをクリックし、モーションを変更します。

ここでは[NEW GAME]を選択します。

2[LOAD GAME]アクションをクリックし、モーションを変更します。

ここでは[LOAD GAME]を選択します。

3[EXIT]アクションをクリックし、モーションを変更します。ここでは[EXIT]を選択します。

これでオブジェクトの作成は完了です。

オブジェクトの作成

オブジェクトの接続は、デフォルトだと設定できません。 設定するには[スイッチ管理]の横にある歯車マークをクリックして設定項目を追加する必要があります。

1[スイッチ管理]の横にある歯車マークをクリックします。

2「オブジェクトを接続する」のチェックボックスをクリックします。

3チェックがついたら[OK]ボタンをクリックします。すると、[スイッチ管理]の右に[オブジェクトの接続]が追加されます。

1[オブジェクトの接続]タブをクリックします。

2オブジェクト接続の一覧の[+]ボタンをクリックします。

「基本設定」

3名前を変更します。ここではcursorとします。

4「接続するオブジェクト」のプルダウンをクリックし、接続したいオブジェクトを選択します。

ここでは先ほど作成したcursor_motionを選択します。

「表示の設定」

5接続点を使用を選択します。プルダウンをクリックし、オブジェクトの接続点を指定します。

このチェックを入れることで、cursor_motionオブジェクトがこのオブジェクトの子オブジェクトとして扱われます。子オブジェクトに設定すると、[表示と親子関係]の設定が反映され、接続点に追従するようになります。

以上で、設定は完了です。 シーンに貼り付けて、実際に動かして動作を確認しましょう。