- ホーム
- オブジェクト制作講座
- 主人公キャラクターをつくる
プレイヤーキャラクターをつくる
今回は、マップ内で動き回るプレイヤーキャラクターを作ってみます。この講座で、オブジェクト作成のおおまかな流れがつかめると思いますので、ぜひ挑戦してみてください。
もくじ
ステップ1:アニメーションの用意
まずはキャラクターの画像を用意します。キャラクターは、- 右左に移動
- とまる
左に移動しているときには左方向に歩いているアニメーションが必要になります。


右の画像には、歩行アニメーションのほか、キャラクターがはしごを上る
アニメーションなどがはいっています。
(今回は左右に動くアニメーションのみ使います。)
作成するのが面倒、とりあえずためしてみたいという方は、右の画像を
ご使用ください。
保存方法はブラウザによって異なりますが、画像上を右クリックして
「対象をファイルに保存」に相当するメニューをクリックします。
これからの説明では、サンプル画像を用いて解説します。
注意

(アニメーションの1コマ分)の大きさは作成するオブジェクトの
大きさと合わせましょう。
たとえば、サンプル画像のアニメーションの1フレームの大きさは
18×32[px]ですので、オブジェクトの大きさもそれに合わせて
作成します。
ステップ2:オブジェクトを作成
いよいよオブジェクトを作成します。画像1:オブジェクトの新規作成とサイズ変更

以下の順番でオブジェクトを設定しましょう。
- 新規作成ボタン(画像1@部分)をクリックし、適当な名前でオブジェクトをつくります。
(本講座では、「プレイヤー」としました。) - つぎに、作成したオブジェクトを選択(画像1A部分)します。
- オブジェクトの幅と高さを設定します。
サンプル画像を使用した場合は、幅を18、高さを32とするとよいでしょう。
ステップ3:アニメーションを作成
アニメーションを作成しましょう。編集タブ「表示画像・アニメーション」を選択します。(以下の画像を参考にしましょう。)
つぎに、新規作成ボタン(画像2赤枠部分)をクリックします。すると、以下のような編集ウインドウが
現れます。
以下の手順でアニメーションを作成しましょう。
- 画像3の@部分から、使用する画像を選択します。
-
クリックします。
正しく選択されると、右図のように選択フレームがオレンジ色の枠で囲まれます。
もし、青いマス目とキャラクターの位置が合っていない場合は、
画像3内にある設定タブをクリックし、オフセットに数字を入れて
調整してみてください。
- 画像3のB部分で、アニメーションフレームが作成されていることを確認します。
- アニメーションの名称を設定します。
- 決定ボタンを押し、アニメーションの編集を終了します。
アニメーションフレームとは?

ことによって動く絵とするものですね。
この、順番に並んだ画像の1つを
「アニメーションフレーム」と呼んでいます。
このアニメーションフレームを時間ごとに切り替えて
アニメーション動作を実現させているのです。
これで、右向きに止まっているときのアニメーションができました。
画像4赤枠部分に、追加したアニメーションが表示されていることが確認できます。
同じ要領で、左向きに止まっているときのアニメーションも作ってみてください。
つぎに、右向きに走るアニメーションを作成してみましょう。
先ほどと同じ要領で、アニメーションの新規作成ボタンを押し、編集ウインドウを表示させます。
新規作成するアニメーションフレームのアニメーションの速度(フレーム切り替え時間)は、
画像5@部分で設定できます。
それでは、右向きに歩いているアニメーションを作成しましょう。アニメーションの表示順のとおりに
表示したい部分の画像をクリックします。
(サンプル画像を用いると、画像5A部分のようになります。)
作成したら、画像5のA部分を選択し、アニメーションをテスト再生してみましょう。
もし、間違えて追加してしまったフレームを削除したい場合は、フレームリスト(B部分)から削除したい
フレームを選択し、画像5の

また、アニメーションの速度を調整したい場合は、フレーム切り替え時間を変更したいフレームを
フレームリスト(B部分)から選択し、画像5のB部分のテキストボックスに数値
(単位はミリ秒:1000ミリ秒=1秒)を入力して

同じ要領で、左歩きのアニメーションも作成しましょう。
ここまで編集を行うと、4つのアニメーションが登録されるはずですね。
ステップ4:あたり判定矩形を作成する
あたり判定矩形とは?
まずは、床や壁(マップチップに通行不可設定がしてある部分)を検知する「通行の判定矩形」を作成
します。これを作成することで、床や壁を通り抜けられなくすることができます。
まずは、「当たり判定」タブをクリックし、あたり判定矩形の編集画面を表示します。
(以下の画像を参考にしてください。)
※画像6C部分のオレンジ色の四角形は、オブジェクトの外枠を表しています。
以下の手順で編集を行います。
- 今回は「通行の判定矩形」を作成するので、画像6@部分をクリックしたあと、A部分を
クリックし、あたり判定矩形を作成します。 - 作成した通行の判定矩形(画像6B部分)を選択すると、C部分に黒い矩形が表示されます。
その周りにある9つのサイズ変更点をドラッグ操作して、判定矩形を適当な大きさに変えます。
位置は、判定矩形内の適当な場所にてドラッグ操作をすると移動できます。
大きさや位置は、D部分で、直接数値で設定することもできます。
ステップ5:イベントを作成する
いよいよオブジェクト制作の最重要ポイントである、イベント作成を行います。イベントとは?
オブジェクトやゲームを制御することができる、プログラミング機能です。
プログラミングといっても、ほとんどマウス操作で組み上げることができます。
(くわしくはヘルプファイルのイベントの項を参照してください。)
プログラミングといっても、ほとんどマウス操作で組み上げることができます。
(くわしくはヘルプファイルのイベントの項を参照してください。)
今回必要なイベントは、以下のようなものがあります。
- このオブジェクトがマップ上に配置されたときに、はじめに再生するアニメーションを
設定するイベント - キーボードのキーが押されたら、移動するイベント
- ジャンプした時にどのように動かすかを決定するイベント
それでは、項目の上から順番につくってみましょう。
オブジェクト発生時に再生アニメーションを指定するイベント
通常、オブジェクトをマップに配置した時、先ほどのアニメーション編集画面のリスト最上部にあるアニメーションが再生されるようになっています。
ですから、もしリスト最上部にあるアニメーションが歩行アニメーションの場合、キャラクターは
静止しているのに歩いているアニメーションが再生されてしまい、なんだか変になってしまいます。
そこで、停止しているアニメーションを確実に再生するために、イベントをつかって、再生する
アニメーションを指定しましょう。
イベントタブを選択し、イベント編集画面を表示します。(以下の画像を参考にしてください。)
イベント編集は、大まかに以下の流れで行います。
- 画像7A部分で、イベント開始条件を設定します。
イベントは、何らかの「きっかけ」によって始まるのですが、どのきっかけで始まる
イベントを作成するかを、イベント開始条件で設定します。 - 画像7B部分が、イベントコマンドをつかってイベントを組み立てる部分です。
イベントは、イベントコマンドとよばれる命令のパーツをいくつも組み合わせて作成します。 - 画像7C部分で、使用するイベントコマンドを選択し、ダブルクリックすると、B部分に
イベントコマンドが追加されます。 - 画像7B部分で、追加したイベントコマンドを選択すると、D部分でイベントパラメータの編集が
できます。
イベントパラメータとは、イベントコマンドがどのように命令を実行するかを設定する値の
ことです。
なんだかいろいろと用語が出てきて難しそうだなと思われるかもしれませんが、実際につくってみれば
自然と理解できるかと思います。
それでは、イベント開始条件を「配置オブジェクト発生時」としてみましょう。
画像8:イベント開始条件設定


を選択します。
イベントコマンドは、右図のように
カテゴリごとに分類 されており、
ちょっと探すのが面倒かと思います。
本講座では、イベントコマンドを
見つけやすいように 解説表記に
ルールを設けていますので、以下のリンクを
確認してください。
イベントコマンド表記ルール
それでは、画像7C部分からイベントコマンドを選択し、以下のようにイベントを組んでみましょう。
コマンド1:アニメーション変更イベント
0 |
オブジェクトアニメーションを変更する
![]()
設定するイベントパラメータ:
|
オブジェクト→表示 |
これだけで、アニメーションを設定することができました。
ここまできたら、ためしにマップ上にオブジェクトを配置してみましょう。
適当なマップを選択し、画像10@部分から先ほど作成したオブジェクトを選択します。
次に、マップ上の適当な部分をクリックすると、オブジェクトが配置されます。
ワンポイント
マップ上に配置されたオブジェクトのことを、「配置オブジェクト」といいます。
ためしにゲームを実行してみましょう。
ゲームの実行は、画像10の青枠部分(A部分)のボタンを押します。
さきほど設定したアニメーションが再生されているかと思います。
今の状態では、キーを押してもキャラクターは動きませんね。
それでは、次はキーボード入力に応じてキャラクターを移動させてみましょう。
キーボード入力に応じてキャラクターを移動させるイベント
まずは、使用するキーボードのキーをプロジェクトに登録します。「材料管理」タブ内の「キーボタン登録・管理」タブを選択し、以下の画像11のような画面にします。
まずは右キーを登録してみましょう。
画像11の@部分を押し、画像12に示すダイアログを表示させます。
画像12:キー登録ダイアログ画面

編集は以下のように行います。
- 名称(画像12@部分)を決定します。
- 設定ボタン(画像12Aボタン)をクリックした後、登録するキー(今回は右キー)を押します。
※方向キーの場合は、2回押さないと反応しないことがあります。 - 決定ボタンを押します。
キーを再編集したい場合は、

同様に、左ボタンとジャンプボタンを設定しましょう。(ジャンプボタンは任意のキーを割り当ててください。)
プレイヤーオブジェクトのイベントを編集します。イベント開始条件を
「いずれかのキーが押下されたとき」に して、以下のようにイベントを組んでみましょう。
ワンポイント
プロジェクトに登録されたキーが押された時、「いずれかのキーが押下されたとき」
イベント開始条件が呼び出されます。
このイベント開始条件内で、条件分岐コマンドをつかってどのキーが押されているかを
判断し、処理すればいいのです。
イベント開始条件が呼び出されます。
このイベント開始条件内で、条件分岐コマンドをつかってどのキーが押されているかを
判断し、処理すればいいのです。
コマンド2:キー操作イベント
条件分岐
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||
配置オブジェクトに速度を加算する
![]()
設定するイベントパラメータ:
|
オブジェクト→速度・モーション・重力系 | |||||
条件分岐(そのほかに)
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||
配置オブジェクトに速度を加算する
![]()
設定するイベントパラメータ:
|
オブジェクト→速度・モーション・重力系 | |||||
条件分岐終了点
![]()
イベントパラメータの設定はありません。
|
フロー制御→条件分岐セット |
ここでは、条件分岐をつかってどのキーが押されているのかを探しています。
画像14:マップ座標系
マップには、右図のように座標が定められています。
右キーが押されたら、X方向(マップ右手方向)の
速度を0.5だけ増やすことで、プレイヤーを移動
させることができます。
左キーが押されたら、X方向の速度を-0.5だけ増やす
ことで、プレイヤーはマップ左方向に進むことが
できます。
このようにすると、プレイヤーは徐々に加速して
移動する動作をします。
ここで、オブジェクトには最高速度が設定でき、最高速度以上には速度が上がらないように
なっています。
最高速度を変更したい場合は、画像13の赤枠部分から変更することができます。
実行すると、プレイヤーキャラクターがマップ上を自由に歩き回れることが確認できますね。
ただ、このままではキャラクターが止まったアニメーションで、ずっと同じ方向を向きながら
左右に移動するという状態になっています。
そこで、左右に移動するときに歩行アニメーションを再生してみましょう。
先ほど編集した「いずれかのキーが押下されたとき」イベント開始条件に、さらに
アニメーション再生イベントコマンドを追加します。
(追加した行の番号をオレンジ色にしています。)
コマンド3:キー操作イベント(アニメーション追加編)
条件分岐
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||
配置オブジェクトに速度を加算する
![]()
設定するイベントパラメータ:
|
オブジェクト→速度・モーション・重力系 | |||||
オブジェクトアニメーションを変更する
![]()
設定するイベントパラメータ:
|
オブジェクト→表示 | |||||
条件分岐(そのほかに)
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||
配置オブジェクトに速度を加算する
![]()
設定するイベントパラメータ:
|
オブジェクト→速度・モーション・重力系 | |||||
オブジェクトアニメーションを変更する
![]()
設定するイベントパラメータ:
|
オブジェクト→表示 | |||||
条件分岐終了点
![]()
イベントパラメータの設定はありません。
|
フロー制御→条件分岐セット |
編集が終わったら実行してみましょう。
主人公が移動すると、アニメーションが切り替わる様子が確認できます。
ただ、主人公が停止した時にも、歩行アニメーションが再生しっぱなしで、なんとも
まぬけになってしまっていますね。
そこで、キーを離したらキャラクターが静止しているアニメーションを再生するように
してみましょう。
キーを離したことを検知する方法として、
「キーが押された状態からまったく押されていない状態に変化したとき」イベント開始条件を
つかいます。このとき、右向きに走っていたのか、左向きに走っていたのかを知ることが
できなければ、キャラクターの正しい向きの静止しているアニメーションが再生できません。
そこで、
- キーが押されたときに、どっちのむきに走っているのかを記録する
- キーが離されたら、記録したキャラクターの走行向きによって右もしくは左向きの
静止しているアニメーションを再生する
走行向きを記録するのに、データベース機能を使用します。
イベントを組む前に、まずは「オブジェクトデータベース」を編集します。
オブジェクトデータベースとは?
ゲームの情報を管理するために、ステージデザイナーでは「データベース」という
仕組みがあります。
データベースの中には「データアイテム」とよばれるものを入れることができ、
数値などの各種情報を格納できます。
データアイテムのデータ(値)は、イベントなどで使うことができます。
そのなかでも「オブジェクトデータベース」は、オブジェクトごとに作成できる
データベースです。
この機能を利用し、どっちの向きに走っているのかを記録します。
仕組みがあります。
データベースの中には「データアイテム」とよばれるものを入れることができ、
数値などの各種情報を格納できます。
データアイテムのデータ(値)は、イベントなどで使うことができます。
そのなかでも「オブジェクトデータベース」は、オブジェクトごとに作成できる
データベースです。
この機能を利用し、どっちの向きに走っているのかを記録します。
使い方がわかるかと思います。
それでは、上の画像にある赤枠部分「オブジェクト・データベースを使用する」にチェックを入れた後
「初期値を設定する」ボタンをクリックし、下の画像に示すウインドウを表示します。
編集は以下の手順で行います。
- 画像16@部分を選択します。こうすることで、「BaseRoot」フォルダ内にデータアイテムを
作成することができます。 - 画像16A部分にデータアイテム名称を入力します。今回は「キャラクター向き」とでも
しておきましょう。 - 画像16B部分「整数列挙値」を選択します。
データアイテムには、代入する値によっていろいろな種類があります。今回は「整数列挙値」を
使用すると、都合がいいのでこれをつかいます。 - 画像16C部分をクリックします。
ここまで操作すると、以下のような編集画面が現れます。
画像17:オブジェクトデータベース編集画面

参考にして、
- 名称を「右向き」
- 値を1
同様の手順で
- 名称を「左向き」
- 値を2
ここまでできたら、閉じるボタンを押し、編集画面を閉じます。
ワンポイント
「整数列挙値」データアイテムは、このように整数値と名称がセットになった値を
作成することができるデータアイテムです。
値の内容がわかりやすく設定できる特徴があります。
作成することができるデータアイテムです。
値の内容がわかりやすく設定できる特徴があります。
ここで、画像18@部分を確認してみると、先ほど追加したアイテムが選択できるようになっていますね。
今回は、初期値である「null」を設定し、A部分の「データを追加」ボタンを押し、データアイテムを
追加しましょう。
ここまできたら、いよいよイベント編集です。
先ほど編集した、イベント開始条件「いずれかのキーが押下されたとき」をまたまた編集します。
(追加した行の番号をオレンジ色にしています。)
コマンド4:キー操作イベント(アニメーション修正編)
条件分岐
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||||
配置オブジェクトに速度を加算する
![]()
設定するイベントパラメータ:
|
オブジェクト→速度・モーション・重力系 | |||||||
オブジェクトアニメーションを変更する
![]()
設定するイベントパラメータ:
|
オブジェクト→表示 | |||||||
データアイテムの値を変更する
![]()
設定するイベントパラメータ:
|
データベース操作 | |||||||
条件分岐(そのほかに)
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||||
配置オブジェクトに速度を加算する
![]()
設定するイベントパラメータ:
|
オブジェクト→速度・モーション・重力系 | |||||||
オブジェクトアニメーションを変更する
![]()
設定するイベントパラメータ:
|
オブジェクト→表示 | |||||||
データアイテムの値を変更する
![]()
設定するイベントパラメータ:
|
データベース操作 | |||||||
条件分岐終了点
![]()
イベントパラメータの設定はありません。
|
フロー制御→条件分岐セット |
さらに、「キーが押された状態からまったく押されていない状態に変化したとき」イベント開始条件を
編集します。
コマンド5:キー上昇検知イベント
条件分岐
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||
オブジェクトアニメーションを変更する
![]()
設定するイベントパラメータ:
|
オブジェクト→表示 | |||||
条件分岐(そのほかに)
![]()
設定するイベントパラメータ:
(行番号1と同様の手順で設定しましょう。) |
フロー制御→条件分岐セット | |||||
オブジェクトアニメーションを変更する
![]()
設定するイベントパラメータ:
|
オブジェクト→表示 | |||||
条件分岐終了点
![]()
設定するイベントパラメータはありません。
|
フロー制御→条件分岐セット |
ここまで編集できたら実行してみましょう。
方向キーを離したとき、キャラクターの歩行アニメーションが静止アニメーションに切り替わっている
ことが確認できます。
それでは次は、ジャンプできるようにイベントを構成してみましょう。
プレイヤーキャラクターにジャンプをさせるイベント

画像19:ジャンプのイメージ
左右の移動と同様にキーを押したとき、プレイヤーに
Y方向の速度を与えれば、ジャンプできそうですね。
ですが、このままではキーを押しっぱなしの時は
どこまでも上昇してしまいます。
(常にY方向に速度を加えているため)
そこで、地面に着地している時だけジャンプの
ための 加速をするような工夫が必要です。
ここで使えるのが、「通行あたり判定がされたとき」
イベント開始条件です。この開始条件は、オブジェクトが通行判定をしたときに実行されます。
これを利用して、キャラクターの着地を検知し、キーボードのキー押下と着地の状態の2つの情報を
つかい、ジャンプ処理を実装してみましょう。
まずは、ジャンプされているかどうかを記録しておくデータアイテムを、オブジェクトデータベースに
作成する必要があります。
さきほどの手順と同様に、「整数列挙値」データアイテムを作成しましょう。
このとき、
- データアイテムの名称は「ジャンプ状態」(解説の都合上このようにしてください。)
(値編集ボタン)を押し、画像20を参考に値を設定してください。
- 画像20を参考に、データアイテムの値を「null」と設定しましょう。
画像20:値編集画面

つぎに、着地を検知する部分を作成します。
以下の画像(画像21)を参考に、イベント開始条件「通行あたり判定がされたとき」の
「(下部当たり判定時)」を選択します。
画像21:「通行あたり判定がされたとき」選択画面

ここで、以下のようにイベントを編集してください。
コマンド5:キー上昇検知イベント
データアイテムの値を変更する
![]()
設定するイベントパラメータ:
|
データベース操作 | |||||||
指定時間イベントを待機する
![]()
設定するイベントパラメータ:
|
フロー制御 |
(このオブジェクト(プレイヤー)下部)と
(通行マップチップもしくは、ほかのオブジェクトの通行の判定矩形)が接触した時に
このイベント開始条件が呼び出されます。
この開始条件をつかって、「ジャンプ状態」データアイテムに「ジャンプしていない」を代入することで、
キャラクターが接地状態にあることを記録することができるのです。
ここで、行番号1で指定時間イベントを待機しています。これは、オブジェクトが接地中はつねにこの
イベント開始条件が実行されてしまうので、無駄な処理が多くなってしまうことを防ぐために
置きました。
つまり、このイベント開始条件が呼び出されてから最低100ミリ秒は、このイベント開始条件を
実行しないようにしているということです。
つぎは、ジャンプするためのキーボードのキー押下を検知し、オブジェクトをY方向に加速させる処理を
追加してみましょう。
まずは、ジャンプするためのキーボードのキーを登録しておきます。
(さきほどの手順と同様に、適当なキーを登録してください。)
つぎに、「いずれかのキーが押下されたとき」をまたまた編集します。
(追加した行の番号をオレンジ色にしています。)
コマンド4:キー操作イベント(アニメーション修正編)
条件分岐
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||||
配置オブジェクトに速度を加算する
![]()
設定するイベントパラメータ:
|
オブジェクト→速度・モーション・重力系 | |||||||
オブジェクトアニメーションを変更する
![]()
設定するイベントパラメータ:
|
オブジェクト→表示 | |||||||
データアイテムの値を変更する
![]()
設定するイベントパラメータ:
|
データベース操作 | |||||||
条件分岐(そのほかに)
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||||
配置オブジェクトに速度を加算する
![]()
設定するイベントパラメータ:
|
オブジェクト→速度・モーション・重力系 | |||||||
オブジェクトアニメーションを変更する
![]()
設定するイベントパラメータ:
|
オブジェクト→表示 | |||||||
データアイテムの値を変更する
![]()
設定するイベントパラメータ:
|
データベース操作 | |||||||
条件分岐終了点
![]()
イベントパラメータの設定はありません。
|
フロー制御→条件分岐セット | |||||||
条件分岐
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||||
条件分岐
![]()
設定するイベントパラメータ:
|
フロー制御→条件分岐セット | |||||||
データアイテムの値を変更する
![]()
設定するイベントパラメータ:
|
データベース操作 | |||||||
配置オブジェクトに速度を加算する
![]()
設定するイベントパラメータ:
|
オブジェクト→速度・モーション・重力系 | |||||||
条件分岐終了点
![]()
イベントパラメータの設定はありません。
|
フロー制御→条件分岐セット | |||||||
条件分岐終了点
![]()
イベントパラメータの設定はありません。
|
フロー制御→条件分岐セット |
追加した部分では、ジャンプキーが押されたときに接地状態を確認し、地面についていれば
ジャンプするために速度を加算し、なおかつ「ジャンプ状態」データアイテムにジャンプ中を代入
しています。
これでジャンプイベントの作成は終了です。実行してジャンプしている様子を確かめてみましょう。
===これにて一旦プレイヤーキャラクターの制作は完了です===
さいごに
これまでのステップで、オブジェクトを作成してイベントを割り当てるという一連のオブジェクト制作の流れを紹介しました。今回はキャラクターを移動させるのみでしたが、イベントコマンドの
組み合わせによって、さまざまなことをさせることができます。
オブジェクト制作講座では
- どのようにイベントを作成していったらいいのか
- どのような小技があるのか
それでは、次回の記事の公開まで...
ワンポイント
本講座がわかりにくかったり、この通りにつくっても動かないといった質問は、
メールフォームでご連絡ください。
メールフォームでご連絡ください。
←もくじへもどる