Hako.png(402 byte) リフトをつくる



本講座では、プレイヤーなどの配置オブジェクトを載せて移動できるようなオブジェクトを
作ってみます。(上図のようなかんじ)
本講座では、このようなオブジェクトを「リフト」と呼ぶことにします。
ステージデザイナーには、リフトを簡単に作ることができる機能があります。

もくじ

  1. ステップ1:画像を取り込む
  2. ステップ2:オブジェクトを作成する
  3. ステップ3:オブジェクトアニメーションを作成する
  4. ステップ4:モーションを設定する
  5. ステップ5:あたり判定矩形を編集・リフトモードを使用


ステップ1:画像を取り込む

Floppy.png(261 byte)サンプル画像
objtut02_02.png(1114 byte)
まずは、リフトオブジェクトに表示する画像をプロジェクトに登録します。
自分で用意した画像を使ってもいいですが、てっとり早く試してみたい方は
右の画像をご使用ください。
保存方法はブラウザによって異なりますが、画像上を右クリックして
「対象をファイルに保存」に相当するメニューをクリックします。

注意
アニメーション用画像を作成する際、1フレーム(アニメーションの1コマ分)の
大きさは、作成するオブジェクトの大きさと合わせましょう。
サンプル画像を使用する場合は、1フレームの大きさが縦16px, 横64px
ですので、オブジェクトの大きさもそれに合わせて作成します。


ステップ2:オブジェクトを作成する

つぎに、オブジェクトを新規作成します。
名称を適当に設定し、オブジェクトの大きさをアニメーション画像の1フレーム分の大きさと
同じになるように設定しましょう。
(サンプル画像を使用した場合は、幅64、高さ16と設定すればよいです。)

画像:オブジェクト設定画面

(クリックで拡大)
また、「外力の影響」の項の「オブジェクト単位で外力による影響を設定する」にチェックをつけ、
「影響を受けない」に設定してください。
※この設定をしないと、リフトの上にプレイヤーなどの配置オブジェクトが乗った時、それらの重力に
よってリフトが下方に移動してしまいます。

新規作成の仕方がわからない方は、プレイヤーキャラクターを作る:ステップ2の記事を
参考にしてください。


ステップ3:オブジェクトアニメーションを作成する

ステップ2で作成したオブジェクトにアニメーションを設定します。
以下では、サンプル画像を用いた際の設定手順を解説します。
(登録方法は通常のアニメーション作成と同様の手順ですので、読み飛ばしてしまっても大丈夫)

画像1:アニメーション編集画面

(クリックで拡大)

つぎに、新規作成ボタン(画像1赤枠部分)をクリックします。すると、以下のような編集ウインドウが
現れます。

画像2:アニメーション作成画面

(クリックで拡大)

以下の手順でアニメーションを作成しましょう。
  1. 画像2の@部分から、使用する画像を選択します。
  2. 画像2のA部分から、一番上の画像をクリックし、続いて上から2番目の画像をクリックします。
    これが完了すると、画像2のA部分のように番号が振られます。
    もし間違えてほかの画像を登録してしまったら、B部分から削除する項目を選択し、
    gomi.png(210 byte)(削除ボタン)をクリックします。
  3. 画像2のB部分で、アニメーションフレームが作成されていることを確認します。
  4. アニメーションの名称を設定します。
  5. 決定ボタンを押し、アニメーションの編集を終了します。
これで、リフトが右向きに進んでいる時のアニメーションが登録されました。同様の手順で、
リフトが左向きに進んでいる時のアニメーションを作成してください。
(この時の編集画面はこちらを参考にしてください。)

これでアニメーションの登録が完了しました。


ステップ4:モーションを設定する

つぎに、リフトがどのように動くかを「モーション」をつかって設定します。
画像3:モーション作成画面

(クリックで拡大)

以下の手順でモーションを作成します。
  1. 画像3の@部分の「新規作成」ボタンを押し、モーションを作成します。
  2. 画像3のA部分で、モーション編集時にテストするマップを選択します。
  3. 画像3のB部分をクリックし、モーションテスト用のオブジェクトを配置します。
  4. 画像3のC部分で、先ほど作成したモーションを選択し、D部分のルート編集ボタンを
    押します。
ここまで完了すると、下図のような編集ウインドウが表示されます。
画像4:モーション作成画面2

(クリックで拡大)

ここからは、以下の手順で編集を進めます。
  1. 画像4の@部分から、「直線ルート」を選択します。
  2. 画像4のA部分(マップ部分)をクリックすると、直線ルートの編集点が1つ現れます。
      この点をドラッグ操作をして好きな場所に移動させます。
  3. 画像4のB部分に、直線ルートが1つ追加されていることを確認します。
  4. 画像4のC部分をクリックすると、作成したルートの移動方向とは逆のルートが
    自動生成されます。
  5. 画像4のB部分に、逆移動の直線ルートが追加されていることを確認します。
  6. ルートを再生中に表示させたいアニメーションを設定します。
    画像4のB部分からルートを選択し、そのルートが再生中の時に表示したいアニメーションを
    画像4のD部分のボタンを使って設定します。
  7. 適宜再生ボタンでモーションを確認します。
  8. さいごにE部分の「ループ再生」にチェックを入れます。このようにすることで、
    すべてのルートを再生し終えたとき、ルートの再生をはじめから再開します。

これで、モーションの作成はおわりです。。
(モーションの作成方法については、「チュートリアル4」でも詳しく解説しています。)

ワンポイント
ほかのルート(円ルートや曲線ルートなど)を用いてもOKです。

つぎに、ゲーム実行時に作成したモーションが再生されるようにします。
イベント開始条件を「配置オブジェクト発生時」として、以下のようにイベントコマンドを追加します。

※本講座では、イベントコマンドを見つけやすいように解説表記にルールを設けていますので、
 以下のリンクを確認してください。
イベントコマンド表記ルール

コマンド1:モーション再生イベント
0 モーションを再生する
設定するイベントパラメータ:
パラメータ名称 設定する値
変更後のモーション 先ほど作成したモーションを設定します。
オブジェクト→速度・モーション・重力系

上記のイベントによって、ゲーム開始と同時にリフトオブジェクトがモーション動作を始めます。

ここまでの手順は「リフトの作成」というよりは、普通にオブジェクトを作成する手順でした。
次ステップにて、リフト作成で重要になる「リフトモード」の解説を行います。


ステップ5:あたり判定矩形を編集・リフトモードを使用

それでは、あたり判定を設定します。
画像5:あたり判定編集画面

(クリックで拡大)
編集は以下の手順で行います。
  1. 画像5の@部分から、「通行の判定矩形」を選択状態にします。
  2. 画像5のA部分を押し、あたり判定矩形を新規作成します。
  3. 画像5のB部分から、あたり判定矩形を編集します。(大きさや位置など)
  4. 画像5のC部分の「係数設定」ボタンを押し、表示されるウインドウにある
    「リフトモードを有効にする」にチェックを入れます。

上記手順4の「リフトモードを有効にする」が今回の制作講座の重要ポイントとなります。
objtut02_09.png(5591 byte)
リフトモードを有効にした配置オブジェクトは、上にのっている配置オブジェクトに速度を与えるため、
リフトとともにプレイヤーが移動できるようになります。
(簡単に説明すると、内部的には上図のような速度ベクトル計算が行われています。)

ここまでできたら、作成したリフトをマップ上に配置し、ゲームを実行してみてください。



←もくじへもどる