プレイヤーキャラクターをつくる

今回は、マップ内で動き回るプレイヤーキャラクターを作ってみます。
この講座で、オブジェクト作成のおおまかな流れがつかめると思いますので、ぜひ挑戦してみてください。

もくじ

1. ステップ1：アニメーションの用意
2. ステップ2：オブジェクトの作成
3. ステップ3：アニメーションを作成
4. ステップ4：あたり判定矩形を作成する
5. ステップ5：イベントを作成する
   • オブジェクト発生時に再生アニメーションを指定するイベント
   • キーボード入力に応じてキャラクターを移動させるイベント
   • プレイヤーキャラクターにジャンプをさせるイベント
6. さいごに

ステップ1：アニメーションの用意

まずはキャラクターの画像を用意します。キャラクターは、

• 右左に移動
• とまる

のような動作をしますね。右に移動したときは右方向に歩いているアニメーションを、
左に移動しているときには左方向に歩いているアニメーションが必要になります。

なので、右のようなアニメーション画像を作成します。
右の画像には、歩行アニメーションのほか、キャラクターがはしごを上る
アニメーションなどがはいっています。
（今回は左右に動くアニメーションのみ使います。）

作成するのが面倒、とりあえずためしてみたいという方は、右の画像を
ご使用ください。
保存方法はブラウザによって異なりますが、画像上を右クリックして
「対象をファイルに保存」に相当するメニューをクリックします。

これからの説明では、サンプル画像を用いて解説します。

アニメーション用画像を作成する際、1フレーム
（アニメーションの1コマ分）の大きさは作成するオブジェクトの
大きさと合わせましょう。
たとえば、サンプル画像のアニメーションの1フレームの大きさは
18×32[px]ですので、オブジェクトの大きさもそれに合わせて
作成します。

ステップ2：オブジェクトを作成

いよいよオブジェクトを作成します。


以下の順番でオブジェクトを設定しましょう。

1. 新規作成ボタン（画像1�@部分）をクリックし、適当な名前でオブジェクトをつくります。
   （本講座では、「プレイヤー」としました。）
2. つぎに、作成したオブジェクトを選択（画像1�A部分）します。
3. オブジェクトの幅と高さを設定します。

オブジェクトの幅と高さは、つくりたいプレイヤーの大きさに合わせて設定します。
サンプル画像を使用した場合は、幅を18、高さを32とするとよいでしょう。

ステップ3：アニメーションを作成

アニメーションを作成しましょう。編集タブ「表示画像・アニメーション」を選択します。
（以下の画像を参考にしましょう。）

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


以下の手順でアニメーションを作成しましょう。

1. 画像3の�@部分から、使用する画像を選択します。
2. 
   画像3の�A部分から、キャラクターが右を向いて止まっている画像（のみ）を
   クリックします。
   正しく選択されると、右図のように選択フレームがオレンジ色の枠で囲まれます。
   もし、青いマス目とキャラクターの位置が合っていない場合は、
   画像3内にある設定タブをクリックし、オフセットに数字を入れて
   調整してみてください。
   
3. 画像3の�B部分で、アニメーションフレームが作成されていることを確認します。
4. アニメーションの名称を設定します。
5. 決定ボタンを押し、アニメーションの編集を終了します。

これで、右向きに止まっているときのアニメーションができました。
画像4赤枠部分に、追加したアニメーションが表示されていることが確認できます。
同じ要領で、左向きに止まっているときのアニメーションも作ってみてください。

つぎに、右向きに走るアニメーションを作成してみましょう。
先ほどと同じ要領で、アニメーションの新規作成ボタンを押し、編集ウインドウを表示させます。


新規作成するアニメーションフレームのアニメーションの速度（フレーム切り替え時間）は、
画像5�@部分で設定できます。

それでは、右向きに歩いているアニメーションを作成しましょう。アニメーションの表示順のとおりに
表示したい部分の画像をクリックします。
（サンプル画像を用いると、画像5�A部分のようになります。）
作成したら、画像5のA部分を選択し、アニメーションをテスト再生してみましょう。

もし、間違えて追加してしまったフレームを削除したい場合は、フレームリスト(B部分)から削除したい
フレームを選択し、画像5の（削除ボタン）を押し、削除してください。

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

同じ要領で、左歩きのアニメーションも作成しましょう。
ここまで編集を行うと、4つのアニメーションが登録されるはずですね。

ステップ4：あたり判定矩形を作成する

まずは、床や壁（マップチップに通行不可設定がしてある部分）を検知する「通行の判定矩形」を作成
します。これを作成することで、床や壁を通り抜けられなくすることができます。

まずは、「当たり判定」タブをクリックし、あたり判定矩形の編集画面を表示します。
（以下の画像を参考にしてください。）


※画像6�C部分のオレンジ色の四角形は、オブジェクトの外枠を表しています。
以下の手順で編集を行います。

1. 今回は「通行の判定矩形」を作成するので、画像6�@部分をクリックしたあと、�A部分を
   クリックし、あたり判定矩形を作成します。
2. 作成した通行の判定矩形（画像6�B部分）を選択すると、�C部分に黒い矩形が表示されます。
   その周りにある9つのサイズ変更点をドラッグ操作して、判定矩形を適当な大きさに変えます。
   位置は、判定矩形内の適当な場所にてドラッグ操作をすると移動できます。
   大きさや位置は、�D部分で、直接数値で設定することもできます。

ステップ5：イベントを作成する

いよいよオブジェクト制作の最重要ポイントである、イベント作成を行います。


今回必要なイベントは、以下のようなものがあります。

• このオブジェクトがマップ上に配置されたときに、はじめに再生するアニメーションを
  設定するイベント
• キーボードのキーが押されたら、移動するイベント
• ジャンプした時にどのように動かすかを決定するイベント

それでは、項目の上から順番につくってみましょう。

オブジェクト発生時に再生アニメーションを指定するイベント

通常、オブジェクトをマップに配置した時、先ほどのアニメーション編集画面のリスト最上部にある
アニメーションが再生されるようになっています。
ですから、もしリスト最上部にあるアニメーションが歩行アニメーションの場合、キャラクターは
静止しているのに歩いているアニメーションが再生されてしまい、なんだか変になってしまいます。

そこで、停止しているアニメーションを確実に再生するために、イベントをつかって、再生する
アニメーションを指定しましょう。

イベントタブを選択し、イベント編集画面を表示します。（以下の画像を参考にしてください。）

イベント編集は、大まかに以下の流れで行います。

1. 画像7A部分で、イベント開始条件を設定します。
   イベントは、何らかの「きっかけ」によって始まるのですが、どのきっかけで始まる
   イベントを作成するかを、イベント開始条件で設定します。
2. 画像7B部分が、イベントコマンドをつかってイベントを組み立てる部分です。
   イベントは、イベントコマンドとよばれる命令のパーツをいくつも組み合わせて作成します。
3. 画像7C部分で、使用するイベントコマンドを選択し、ダブルクリックすると、B部分に
   イベントコマンドが追加されます。
4. 画像7B部分で、追加したイベントコマンドを選択すると、D部分でイベントパラメータの編集が
   できます。
   イベントパラメータとは、イベントコマンドがどのように命令を実行するかを設定する値の
   ことです。

なんだかいろいろと用語が出てきて難しそうだなと思われるかもしれませんが、実際につくってみれば
自然と理解できるかと思います。

それでは、イベント開始条件を「配置オブジェクト発生時」としてみましょう。

つぎに、画像7C部分から、イベントコマンド
を選択します。
イベントコマンドは、右図のように
カテゴリごとに分類 されており、
ちょっと探すのが面倒かと思います。

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

イベントコマンド表記ルール

それでは、画像7C部分からイベントコマンドを選択し、以下のようにイベントを組んでみましょう。


これだけで、アニメーションを設定することができました。

ここまできたら、ためしにマップ上にオブジェクトを配置してみましょう。


適当なマップを選択し、画像10�@部分から先ほど作成したオブジェクトを選択します。
次に、マップ上の適当な部分をクリックすると、オブジェクトが配置されます。


ためしにゲームを実行してみましょう。
ゲームの実行は、画像10の青枠部分（A部分）のボタンを押します。
さきほど設定したアニメーションが再生されているかと思います。
今の状態では、キーを押してもキャラクターは動きませんね。

それでは、次はキーボード入力に応じてキャラクターを移動させてみましょう。

キーボード入力に応じてキャラクターを移動させるイベント

まずは、使用するキーボードのキーをプロジェクトに登録します。
「材料管理」タブ内の「キーボタン登録・管理」タブを選択し、以下の画像11のような画面にします。

まずは右キーを登録してみましょう。
画像11の�@部分を押し、画像12に示すダイアログを表示させます。


編集は以下のように行います。

1. 名称（画像12�@部分）を決定します。
2. 設定ボタン（画像12�Aボタン）をクリックした後、登録するキー（今回は右キー）を押します。
   ※方向キーの場合は、2回押さないと反応しないことがあります。
3. 決定ボタンを押します。

編集が完了すると、画像11A部分にあるリストに、登録したキーが表示されます。
キーを再編集したい場合は、（編集ボタン）を押します。

同様に、左ボタンとジャンプボタンを設定しましょう。（ジャンプボタンは任意のキーを割り当ててください。）

プレイヤーオブジェクトのイベントを編集します。イベント開始条件を
「いずれかのキーが押下されたとき」に して、以下のようにイベントを組んでみましょう。



ここでは、条件分岐をつかってどのキーが押されているのかを探しています。

マップには、右図のように座標が定められています。
右キーが押されたら、X方向（マップ右手方向）の
速度を0.5だけ増やすことで、プレイヤーを移動
させることができます。

左キーが押されたら、X方向の速度を-0.5だけ増やす
ことで、プレイヤーはマップ左方向に進むことが
できます。

このようにすると、プレイヤーは徐々に加速して
移動する動作をします。

ここで、オブジェクトには最高速度が設定でき、最高速度以上には速度が上がらないように
なっています。
最高速度を変更したい場合は、画像13の赤枠部分から変更することができます。


実行すると、プレイヤーキャラクターがマップ上を自由に歩き回れることが確認できますね。
ただ、このままではキャラクターが止まったアニメーションで、ずっと同じ方向を向きながら
左右に移動するという状態になっています。

そこで、左右に移動するときに歩行アニメーションを再生してみましょう。

先ほど編集した「いずれかのキーが押下されたとき」イベント開始条件に、さらに
アニメーション再生イベントコマンドを追加します。
（追加した行の番号をオレンジ色にしています。）


編集が終わったら実行してみましょう。
主人公が移動すると、アニメーションが切り替わる様子が確認できます。

ただ、主人公が停止した時にも、歩行アニメーションが再生しっぱなしで、なんとも
まぬけになってしまっていますね。

そこで、キーを離したらキャラクターが静止しているアニメーションを再生するように
してみましょう。
キーを離したことを検知する方法として、
「キーが押された状態からまったく押されていない状態に変化したとき」イベント開始条件を
つかいます。このとき、右向きに走っていたのか、左向きに走っていたのかを知ることが
できなければ、キャラクターの正しい向きの静止しているアニメーションが再生できません。

そこで、

• キーが押されたときに、どっちのむきに走っているのかを記録する
• キーが離されたら、記録したキャラクターの走行向きによって右もしくは左向きの
  静止しているアニメーションを再生する

みたいな流れでイベントを組んでいきます。
走行向きを記録するのに、データベース機能を使用します。

イベントを組む前に、まずは「オブジェクトデータベース」を編集します。
データベースは、はじめはとっつきにくいかもしれませんね。これから実際に使ってみれば
使い方がわかるかと思います。


それでは、上の画像にある赤枠部分「オブジェクト・データベースを使用する」にチェックを入れた後
「初期値を設定する」ボタンをクリックし、下の画像に示すウインドウを表示します。

編集は以下の手順で行います。

1. 画像16�@部分を選択します。こうすることで、「BaseRoot」フォルダ内にデータアイテムを
   作成することができます。
2. 画像16�A部分にデータアイテム名称を入力します。今回は「キャラクター向き」とでも
   しておきましょう。
3. 画像16�B部分「整数列挙値」を選択します。
   データアイテムには、代入する値によっていろいろな種類があります。今回は「整数列挙値」を
   使用すると、都合がいいのでこれをつかいます。
4. 画像16�C部分をクリックします。

ここまで操作すると、以下のような編集画面が現れます。
ここで、画像17�@部分をクリックすると、設定画面が表示されるので、画像17の値編集画面を
参考にして、

• 名称を「右向き」
• 値を1

とし、OKボタンを押します。すると、画像17A部分に「右向き」アイテムが追加されますね。

同様の手順で

• 名称を「左向き」
• 値を2

とし、もうひとつアイテムを作成します。
ここまでできたら、閉じるボタンを押し、編集画面を閉じます。


ここで、画像18�@部分を確認してみると、先ほど追加したアイテムが選択できるようになっていますね。
今回は、初期値である「null」を設定し、�A部分の「データを追加」ボタンを押し、データアイテムを
追加しましょう。

ここまできたら、いよいよイベント編集です。
先ほど編集した、イベント開始条件「いずれかのキーが押下されたとき」をまたまた編集します。

（追加した行の番号をオレンジ色にしています。）


さらに、「キーが押された状態からまったく押されていない状態に変化したとき」イベント開始条件を
編集します。


ここまで編集できたら実行してみましょう。
方向キーを離したとき、キャラクターの歩行アニメーションが静止アニメーションに切り替わっている
ことが確認できます。


それでは次は、ジャンプできるようにイベントを構成してみましょう。

プレイヤーキャラクターにジャンプをさせるイベント

画像19：ジャンプのイメージ ジャンプするイベントを考えてみましょう。
左右の移動と同様にキーを押したとき、プレイヤーに
Y方向の速度を与えれば、ジャンプできそうですね。
ですが、このままではキーを押しっぱなしの時は
どこまでも上昇してしまいます。
（常にY方向に速度を加えているため）

そこで、地面に着地している時だけジャンプの
ための 加速をするような工夫が必要です。

ここで使えるのが、「通行あたり判定がされたとき」
イベント開始条件です。この開始条件は、オブジェクトが通行判定をしたときに実行されます。
これを利用して、キャラクターの着地を検知し、キーボードのキー押下と着地の状態の2つの情報を
つかい、ジャンプ処理を実装してみましょう。

まずは、ジャンプされているかどうかを記録しておくデータアイテムを、オブジェクトデータベースに
作成する必要があります。

さきほどの手順と同様に、「整数列挙値」データアイテムを作成しましょう。
このとき、

• データアイテムの名称は「ジャンプ状態」（解説の都合上このようにしてください。）
• （値編集ボタン）を押し、画像20を参考に値を設定してください。
• 画像20を参考に、データアイテムの値を「null」と設定しましょう。

こんなかんじで編集してください。


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


ここで、以下のようにイベントを編集してください。

（このオブジェクト（プレイヤー）下部）と
（通行マップチップもしくは、ほかのオブジェクトの通行の判定矩形）が接触した時に
このイベント開始条件が呼び出されます。
この開始条件をつかって、「ジャンプ状態」データアイテムに「ジャンプしていない」を代入することで、
キャラクターが接地状態にあることを記録することができるのです。

ここで、行番号1で指定時間イベントを待機しています。これは、オブジェクトが接地中はつねにこの
イベント開始条件が実行されてしまうので、無駄な処理が多くなってしまうことを防ぐために
置きました。
つまり、このイベント開始条件が呼び出されてから最低100ミリ秒は、このイベント開始条件を
実行しないようにしているということです。

つぎは、ジャンプするためのキーボードのキー押下を検知し、オブジェクトをY方向に加速させる処理を
追加してみましょう。

まずは、ジャンプするためのキーボードのキーを登録しておきます。
（さきほどの手順と同様に、適当なキーを登録してください。）

つぎに、「いずれかのキーが押下されたとき」をまたまた編集します。
（追加した行の番号をオレンジ色にしています。）


追加した部分では、ジャンプキーが押されたときに接地状態を確認し、地面についていれば
ジャンプするために速度を加算し、なおかつ「ジャンプ状態」データアイテムにジャンプ中を代入
しています。

これでジャンプイベントの作成は終了です。実行してジャンプしている様子を確かめてみましょう。
===これにて一旦プレイヤーキャラクターの制作は完了です===

さいごに

これまでのステップで、オブジェクトを作成してイベントを割り当てるという一連のオブジェクト
制作の流れを紹介しました。今回はキャラクターを移動させるのみでしたが、イベントコマンドの
組み合わせによって、さまざまなことをさせることができます。

オブジェクト制作講座では

• どのようにイベントを作成していったらいいのか
• どのような小技があるのか

といったものの一例を紹介していきたいと考えています。

それでは、次回の記事の公開まで．．．


←もくじへもどる

CopyRight がらくたツールボックス All Right Reserved
本サイトはリンクフリーです。

トップページ

ステージデザイナー

ダウンロード

ヘルプ

チュートリアル

バグ情報

追加オブジェクト

ブログ

リンク

作者へ連絡