search
LoginSignup
4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

GameMaker Studio Advent Calendar 2020 Day 13

posted at

updated at

【GameMaker Studio2】シーケンサーの基本的な使い方

このページでは、v2.3 で実装されたシーケンサー (Sequence)の機能について、基本的な使い方を解説します。
(※この記事は "v2.3.0" のときに書いたため、2020/12/13 現在の最新バージョン "v2.3.1" と若干の違いがあります)

シーケンサーとは

シーケンサーとは、簡単に言うと GameMaker上でアニメーションを作るためのツールです。
cutin.gif
このようなアニメーションであれば数分で作れて、呼び出しもGMLで、

  1. シーケンサーを生成
  2. 再生終了待ちをする
  3. シーケンサーを破棄する

とするだけで使えるようになります。

文字がスライドインする演出を作る

基本操作でリニアなスライドインを作る

まずは簡単なアニメーションを作成してみます。
escape.png
今回はこの画像を使ってみます。

プロジェクトを作成し、上記画像をスプライトとして登録します。
登録したスプライトは「spr_test」という名前に変更しておきます。
また、スプライトの基準座標は中央であるほうが都合が良いので、基準座標を「Middle Centre」に変更しておきます。
TestSequencer_-_GameMaker_Studio_2.png

スプライトが登録できたら、Asset Browserから、「Sequences」を右クリックして、「Create > Sequence」を選んでシーケンサーを作成します。
TestSequencer_-_GameMaker_Studio_2_.png

シーケンサーの名前は「seq_test」としておきます。
作成できたら「seq_test」をダブルクリックで開いて、スプライト「spr_test」をドラッグ&ドロップで配置します。
TestSequencer_-_GameMaker_Studio_2_.png

すると、seq_test のキャンバスにスプライトが配置され、Track Panelに spr_test が追加されます。
TestSequencer_-_GameMaker_Studio_2_.png

大まかにシーケンサーの画面レイアウトを説明すると、画面中央のキャンバスで位置の調整や実際の挙動の確認、左下にある Track Panel で制御するパラメータの種類を管理し、右下のドープシートでフレーム数に対応する情報の管理を行います。
TestSequencer_-_GameMaker_Studio_2_.png

(※UIのカテゴリは正確には、以下のようにもっと細かい単位に分かれています)
Editor_Sequences.png

ひとまず初期状態で再生をしてみます。ドープシートの上あたりにある「三角ボタン」を押すと再生されます。
001.gif
ですが、初期状態では再生するとすぐにスプライトが消えてしまいます。これは スプライトのTrackの有効フレーム数が設定されていないためです。

ドープシートの赤い部分の右側をドラッグすると有効フレーム数を伸ばすことができます。
002.gif

この状態で再生すると、最後のフレームまで正常に表示され、アニメーションを作ることができます。
まずは一番最初のフレームにマーカーを移動させます。
003.gif
ドープシート内の黄色いカーソルを 0フレーム (開始フレーム) に移動させます。

そして、キーの自動作成が有効になっているかどうかを確認します。Track Panelの上辺りにある「Automatically record changes」の背景がグレーになっていれば問題ありません。
TestSequencer_-_GameMaker_Studio_2_.png

確認できたら、キャンバスに配置されているスプライトを中央に移動させます。
004.gif
キャンバス内のスプライトを移動させ、TrackPanel の "spr_test" を開くと、ドープシートのPositionの0フレーム目にキーが配置されているのが確認できます。
005.gif

これで開始地点のキーが打てたので、次に終端フレームにキーを設定します。終端である 60フレームにマーカーを移動させて、スプライトを少し動かして中央に戻すことでキーが打たれます。
007.gif

もしくは「+」ボタンをクリックすると現在のフレームに新しいキーが打たれます。
TestSequencer_-_GameMaker_Studio_2_.png

さらに、Ctrl+Cで元のキーをコピーして、Ctrl+Vで貼り付けるという方法でもキーを打つことができます。

これで準備完了です。最初の 0フレームにマーカーを戻して、キャンバス内のスプライトを右側にドラッグ&ドロップで移動させます。
008.gif
そして再生ボタンを押すと、左側に移動するアニメーションを再生することができます。

ただ、これだと等速でスライドしているだけの残念な動きですよね……。
そこで、もう少しマシな動きにします。
マーカーを 20フレームの位置に移動させて、キャンバス内のスプライトを左側に移動させます。
こうすることで、0〜20フレームは高速で動き、21〜60フレームはゆっくり動く……という緩急のついた動きになります。

  • 0フレーム:開始位置(右側)
  • 20フレーム:終端の少し右側
  • 60フレーム:終端位置(中央)

009.gif

Animation Curve で滑らかなスライドインにする

ただ、これでも滑らか……という感じではないですね。
そこで、Animation Curve を使います。
ドープシートから Animation Curve を作成します。
TestSequencer_-_GameMaker_Studio_2_.png

  1. ドープシートを右クリック
  2. コンテキストメニューから「Convert to embedded anim curve」を選択

ここで行っていることを説明すると、「embedded」とは「埋め込まれた」という意味で、「Convert to embedded anim curve」を翻訳すると「埋め込まれた "Animation Curve" に変換する」です。
「Animation Curve」はプロジェクト共通のリソースとして作成できますが、ここでは Animation Curve をこのシーケンサー専用のものとして埋め込む ということをしています。

さらにドープシート内に表示された Animation Curve をダブルクリックすると、Animaton Curve の編集ウィンドウが表示されます。
010.gif

Animamtion Curve編集ウィンドウから、左上にあるCurvesのあたりの図形をクリックすると、"Curve Type" が表示されるので、Smooth を選びます。
TestSequencer_-_GameMaker_Studio_2.png
するとカーブが滑らかになります。(キャプチャ時に青色が暗くて見にくかったので、色調補正で水色に修正しています)
TestSequencer_-_GameMaker_Studio_2_-2.png

カーブをにもう少し膨らみを入れたかったので、少し位置を調整しました。このあたりは好みで変えてみて良いと思います。
TestSequencer_-_GameMaker_Studio_2_.png

では、Animation Curve編集ウィンドウを閉じて動作を確認します。
011.gif
気に入った動きになるまで、カーブを調整してみても良いかもしれません。

GMLからシーケンサーを生成して呼び出す

これでアニメーションの作成は完了ですが、呼び出すタイミングをGMLで制御してみます。

オブジェクト "obj_test" を作成して、Stepイベントを以下のように記述します。

obj_testのStepイベント
// 左クリックしたらマウスの位置にシーケンサーを生成.
if(mouse_check_button_pressed(mb_left)) {
  var px = mouse_x;
  var py = mouse_y;

  layer_sequence_create("Instances", px, py, seq_test);
}

左クリック判定を行い、マウスの位置にシーケンサーを生成します。
シーケンサーを生成する場合はレイヤーの指定が必要となるので、デフォルトで存在するレイヤー "Instances" に生成を行います。

では、"obj_test" をルームに配置して動作を確認します。
クリックした位置にシーケンサーが生成され、アニメーションが再生されます。
012.gif

ただこれは問題があって、Animation Curve (なめらかなSmoothカーブ) が適用されていない状態となっています。
マニュアルや技術記事などをいくつか見たのですが、特に同じような問題が起きている人が見つからず……。
原因は調査中となります。(原因がわかったら記事を修正します)

※2020/11/25追記
v2.3.1で Animation Curve がランタイム(実行時)に適用されない不具合は修正されました。

さらに……。カーブの種類にベジェ曲線が加わって、カーブ編集がやりやすくなりました。

動画をアップした後で気がついたのですが、ドープシートのタイムスケールの拡大縮小はv2.3.0にすでにありましたね……

その他シーケンサーを使うときのTips

その他、シーケンサーを使うときのTipsをまとめておきます。

色を変化させるアニメーションを作りたい

Track Panel から各トラックの「+」をクリックします。
TestSequence_-_GameMaker_Studio_2_.png

追加する項目のメニューが表示されるので「Colour Multiply」を選びます。
TestSequence_-_GameMaker_Studio_2_.png

「Colour Multiply」パラメータが追加されるので、変更したいフレームにマーカーを移動させて、白い四角の部分をクリックするとカラーダイアログが表示されます。
TestSequence_-_GameMaker_Studio_2_.png

例えば透過値(Alpha)を0にしてみると、ドープシートに新たにキーが設定されます。
color.gif

TestSequence_-_GameMaker_Studio_2_.png

最初の30Fを透過でフェードインするようにしてみるとこのような感じになります。
alpha.gif

再生モードを変更する

シーケンサーの再生モードは以下の3つが用意されています

  1. ループなし(seqplay_oneshot):1回再生したら終端で停止
  2. ループあり(seqplay_loop):繰り返し再生
  3. ピンポン(seqplay_pingpong):往復する再生

最初の状態だと「1. ループなし」ですが、再生ボタンの右隣にあるアイコンをクリックすると、アイコンの背景がグレーになって、「2. ループあり」の状態となります。
TestSequence_-_GameMaker_Studio_2_.png

さらにクリックすると、アイコンの画像がピンポン再生モードに変更されます。
この状態で再生すると、通常の再生→逆再生→通常の再生……という動きをするようになります。
pingpong.gif

再生完了後に自動でシーケンサーのインスタンスを破棄したい

ループなし(seqplay_oneshot)再生は、再生完了後に終端で停止した状態となります。表示したままにしたくない場合には GML 側で再生完了後に破棄することができます。

以下、実装例です。

Createイベント
// Createイベントで以下のように記述
_layer = "Instances";
_seq = noone;
Stepイベント
// Stepイベントで以下のように記述

// 存在しているかをチェック
if(layer_sequence_exists(_layer, _seq)) {
  // 再生が終了しているかどうかを判定
  if(layer_sequence_is_finished(_seq)) {
    // シーケンサーのインスタンスを削除
    layer_sequence_destroy(_seq);
    _seq = noone;
  }
}

// 左クリックでシーケンサーを生成
if(mouse_check_button_pressed(mb_left)) {
  var px = mouse_x;
  var py = mouse_y;
  _seq = layer_sequence_create(_layer, px, py, seq_test);
}

layer_sequence_is_finished() で終了判定ができます。ただし再生モードが「ループなし再生(seqplay_oneshot)」でないと判定できません。

ドープシートの表示フレーム数を変更したい

ドープシートの右上にある数値を変更すると表示範囲が変更されます
range.gif

シーケンスイベントを使う

シーケンスをGMLで細かく制御したい場合に、シーケンスイベントを使って GML の呼び出しを含めることができます。
TestSequence_-_GameMaker_Studio_2_.png

Track Panelの上にある「旗」のようなアイコンをクリックします。
すると、シーケンスイベントのウィンドウが表示されるので、右下の「Create New」をクリックします。

TestSequence_-_GameMaker_Studio_2_.png

するとシーケンスイベントのスクリプトが生成されるので、ここに GML の処理を記述していきます。

シーケンスイベント
// Auto-generated stubs for each available event.

function seq_test_event_create()
{
  // シーケンス生成時に呼び出される処理
  show_debug_message("create!");
}

function seq_test_event_destroy()
{
  // シーケンス破棄時に呼び出される処理
  show_debug_message("destroy!");
}

function seq_test_event_clean_up()
{
  // シーケンスクリーンアップ時に呼び出される処理
  show_debug_message("clean up!");
}

function seq_test_event_step()
{
  // 毎フレーム呼び出されるStepイベント
  //show_debug_message("step!");
}

function seq_test_event_step_begin()
{
  // 毎フレーム呼び出されるStep Beginイベント
  //show_debug_message("step begin!");
}

function seq_test_event_step_end()
{
  // 毎フレーム呼び出されるStep Endイベント
  //show_debug_message("step end!");
}

function seq_test_event_async_system()
{
  // システム非同期イベント

  show_debug_message("async system!");
}

上記の記述をした場合の実行結果は以下のとおりです。

create!
Texture #3 512,256
destroy!
clean up!

ちなみにこの手順で作成したスクリプトは Asset Browser の一番下に自動で作られるので、もととなるシーケンスリソースの下あたりに移動させておいたほうが良さそうです。
TestSequence_-_GameMaker_Studio_2_.png

シーケンスモーメントを使用する

特定のフレームに発生する処理を GML で記述したい場合に「シーケンスモーメント」を使用するとお手軽に書けます。
例えば、20フレーム目に何かをする場合、マーカーを20フレーム目に移動させて、「稲妻」のようなアイコンをクリックします。
TestSequence_-_GameMaker_Studio_2_.png

すると、モーメントの設定ダイアログが表示されます。
TestSequence_-_GameMaker_Studio_2_.png

20フレーム目に対する設定であることを確認して、「+」アイコンをクリックします。

すると以下のようなスクリプトが作成されるので、デバッグ用のメッセージを入れてみます。

モーメントスクリプト
function seq_test_Moment_1()
{
  show_message("20フレーム目");
}

実行すると、20フレーム目あたりで、設定したメッセージが出力されます。
moment.gif

ちなみにこの方法でスクリプトを生成した場合にも、Asset Browser の一番下に作られてしまうので、わかりやすい場所に移動させておいたほうが良さそうです。
TestSequence_-_GameMaker_Studio_2.png

また、モーメントの別のタイミングでも GML で記述したい場合は、作成したスクリプトに直接追加したほうが良いです。

例えば先程作成したスクリプトに追記します。

モーメントスクリプト
function seq_test_Moment_1()
{
  show_message("20フレーム目");
}

function seq_test_Moment_40()
{
  show_message("40フレーム目");
}

40フレーム目に発生させる関数を追加しました。
そうしたら、シーケンサーから 40フレーム目にマーカーを合わせて、稲妻アイコンをクリックして「seq_test_Moment_40」を呼び出す設定をします
moment2.gif

実行すると20フレーム目と40フレーム目でメッセージを表示することができます。
moment3.gif

サウンドを再生する

シーケンサーにはサウンドのTrackを追加することもできます。
使い方としては、サウンドリソースをシーケンサーのキャンバスにドラッグ&ドロップするだけです。

ただ、ツール上だとサウンドが音飛びするなどで正確な再生にはならないこともあるので、ちゃんとした動きを見たい場合は実行して確認する方が良さそうです。

あと現時点 (2020.12.12現在の最新版 v2.3.1) にてサウンドをたくさん配置するとシーケンスエディタ、ルームのプレビューで停止不具合が発生します。

もしこの不具合に遭遇したらプレビューは使わずにゲーム実行時のみ確認するか、サウンドのトラックをOFFにした状態で確認するのが良さそうです。

※追記(2020/12/18)

v2.3.1.536 のアップデートでこの不具合は修正されていました。
これで心置きなくプレビューできます。ありがとう YoyoGames

スプライトの複数配置とルームでの動作確認

シーケンサーはトラックごとにスプライトを配置できるので、このように複数のスプライトを配置することも可能です。
hand1.gif

そして作成したシーケンスデータは、ルームに直接配置して動作を確認することができます。
アセット用のレイヤーがない場合は作成するかどうかを聞かれ、Createを選ぶとアセットレイヤーが作成されます。
hand2.gif

さらなる他の機能

ここまで理解できれば、後は公式のマニュアルを見てより詳細な使い方を学ぶのが良いのかと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4
Help us understand the problem. What are the problem?