「Animate」STGの作り方(タイムラインを移動する)

前回に続き、初心者のためのSTG(シューティング・ゲーム)の作り方で、今回は「タイムラインを移動する」方法を説明します。


今回は、前回説明した「タイムライン」に20フレームを追加し、さらに10フレーム目に「stop();」を追加して、止めた後の説明をしていきたいと思います。

ゲーム内の遷移(せんい)を制御する際に必要なものになります。
例えば、トップ画面から、戦闘画面に移行する際に、必要になります。


タイムラインにレイヤーを追加する

「タイムライン」の「レイヤー」とは、Photoshopやillustratorなどのグラフィックソフトなどにもあるレイヤーと同等の役割を持っています。
上にあるレイヤーほど、手前に表示されます。

新規で作成したファイルのタイムラインには、レイヤーが1つのみですが、レイヤー名の最上部に「+」アイコンがあり、クリックすると、レイヤーが追加されていきます。

今回は、最初にあったレイヤーの上下に、レイヤーを追加したいと思います。

上下にレイヤーを追加する

次に、一番下のレイヤーと一番上のレイヤーの11フレーム目に「キーフレーム」を挿入します。

11フレーム目にキーフレームを追加する

上の画像を見ていただくと、1から10フレーム目までと11から20フレーム目までの間に、境界ができたようになります。


タイムラインにラベルを追加する

次に、一番上のレイヤーの1フレーム目に「label1」と11フレーム目に「label2」と、「プロパティ」ウィンドウで、「ラベル」を追加します。

ラベル名を追加する
ラベル名を追加すると、上の画像のように、赤い目印とともに、ラベル名が表示されます。

この「ラベル」は「タイムライン」を移動する際に、ラベル名を指定して、移動できるので超便利です。


ボタンを追加する

次は、一番下のレイヤーに、ボタンを追加します。
さて、ボタンはどのように作ればよいのでしょうか。

最初に、タイムラインの一番下のレイヤーの1フレーム目を選択してください。

次に「ツール」にある、「矩形プリミティブツール」を選択し、編集画面に四角いオブジェクトを追加します。(編集画面の外に作っちゃだめよw)

矩形プリミティブツールでボタンにするためのオブジェクトを描画する

11フレーム目にキーフレームを追加してあったので、10フレーム目までに描画したオブジェクトが表示されるようになりました。

「矩形プリミティブツール」以外に、「矩形ツール」というものもありますが、こちらで描画したオブジェクトは、線と塗りに分かれており、見た目ではillustratorの描画オブジェクトのように見えますが、別々のものになっています。
illustratorに慣れている方は、選択する際には注意してください。

そのため、「矩形ツール」で描画したオブジェクトは、選択ツールで囲うように選択し、線と塗りの両方を選択し、描画したオブジェクトはすぐにグループ化すると良いでしょう。

慣れるまでは「矩形プリミティブツール」を使うようにしてください。


次に、編集画面で描画したオブジェクトを選択します。

オブジェクトを選択する

上の画像のように、選択状態にしたまま、Animate上部にある「ツールバー」にある「修正」をクリックし、「シンボルに変換」をクリックします。

シンボルに変換をクリックする

シンボルに変換をクリックすると、「シンボルに変換」ウィンドウが開きます。

名前(シンボル1)と種類(ボタン)に変更する

今回は、上の画像のままで、OKをクリックします。


インスタンス名を付ける

描画オブジェクトをボタン・シンボル化した後に、シンボルを選択したまま、プロパティ・ウィンドウで、「インスタンス名(button1)」を付けます。

インスタンス名(button1)を付ける

インスタンス名を付けたら、ボタンシンボルを選択したまま、「アクションパネル」開き、「<>(コードスニペット)」をクリックします。

コードスニペットで、ActionScript3を追加する

上の画像のコードスニペットにある「クリックして特定のフレームに移動し、再生」をダブルクリックします。

クリックすると、タイムラインにレイヤー(Actions)が追加され、アクションパネルにActionScript3が追加されます。

アクションパネルに追加されたActionScript3に、「gotoAndPlay(5);」という部分があります。「5」の部分をタイムラインにあるラベル名「label2」を使い、「gotoAndPlay("label2");」と変更します。

ボタンシンボル化したオブジェクトをクリックすると、label2へ移動できるようになりました。

わかりやすいように、タイムラインにレイヤーを追加し、1から10フレーム目までに、テキストツールで、ラベル名を入力しておきます。

ツールバーにある「デバッグ」から「デバッグ」をクリックして、動作を確認してみてください。


人気の投稿記事