001 はじめに
002 ゲーム作成
003 各種メニュー確認
004 「キャラクター」作成
005 「ステージ」作成
006 「デモ」作成
007 「テストプレー」
008 「ステージ」編集
009 「キャラクター」編集
010 パレット管理
011 アニメーション
012 「座標移動」
013 重力の設定
014 その他スクリプト
015 「リアクション」
016 ヒットエフェクト
017 スクリプトの並べ方
018 攻撃動作
019 「コマンド入力」
020 攻撃判定
021 やられ判定
022 やられ動作の設定
023 「タイトル画面」作成
024 タイトルカーソルの表示
025 「キャラクターセレクト」
026 各種インターフェイス
027 ラウンド関連の表示
028 CPUの動作指定
029 「ストーリー」の作成
030 ヒット数の表示
031 投げ技の作成
032 ゲージ消費技の作成
033 ステージの組み方
034 デモシーンの組み方
035 格闘ツクールの仕様
■ コマンド解説
001 画像呼出
002 座標移動
003 防御枠
004 攻撃枠
005 リアクション
006 サウンド
007 キャンセル条件
008 色変更
009 オブジェクト発生
010 変数による分岐
011 条件分岐:技中有効
012 条件分岐:基本分岐
013 条件分岐:ランダム分岐
014 条件分岐:コマンド入力
015 スクリプト移動: 移動
016 スクリプト移動: 呼出
017 スクリプト移動: ループ
018 座標・画像変更
019 スクリプト変更
020 スペシャルゲージチェック分岐
021 ライフゲージチェック分岐
022 ゲージ変更
023 パレットアニメ・揺らし
024 停止
025 残像
026 終了
■ テクニック解説
002 画面レイアウト
003 カラーセレクトの設定
004 ヒットエフェクトの研究
005 ヒットエフェクトの描き方
006 スクリプト一覧のテキスト化
007 通常立ちの設定
008 VSで開始位置指定
009 雛型キャラの作成
010 INIファイルの内容
011 変数の大小チェック
012 当て身投げの作り方
013 必殺技コマンドの設定
014 アニメ作成_通常攻撃
015 ゲームモードによる分岐
016 変数の一覧を記録
017 受け身入力の判定
018 ダウン値による分岐処理
019 飛び道具の作成
020 ワープ技の作成
021 ヒット硬直のコントロール
022 ステージの地面表現
023 ヒット数表示の固定
024 横方向のホーミング攻撃
025 1P/2Pの判別
026 ライフ減少アニメ
027 画面下部の表示内容
028 ステータス表示の意味
029 ガードクラッシュの表現
030 押せないOBJ
031 アイテムのあるゲーム
032 復活する技の作成
033 空ガードの作成
034 ステージ選択付きキャラセレ
035 ゲージMAXの表示
036 固定ダメージを表現する
037 ラン動作の作成
038 投げ技によるKOの作成
039 ボタン溜め押し技の作成
040 中段攻撃の作り方
041 製作に役立つツール
042 カラーセレクトに適した画像
043 相手によって動作変更
044 横幅のあるキャラを表現
045 ラウンド限定の動作
046 影色の塗りを効率化
047 モードを切り替えるキャラ
048 当たり判定設定のコツ
049 空中ジャンプを表現する
050 キャラの向きを判別する
051 途中でKOしない乱舞技
052 カウンターヒットの作成
053 OBJの動作を停止
054 ハイジャンプの作成
■ バグ・よくあるミス
Q_A よくあるミスQ&A
001 消せない画像
002 リスト選択とキーボード操作
003 アニメプレビューで落ちる
004 起動直後に落ちる
005 OBJ発生位置がずれる
006 着地すると技終了
007 画面端でのヒットバック1
008 グラデーションが汚い
009 画面端でのヒットバック2
010 境界のアンチエイリアス問題
011 ガードされてもキャンセル可能
012 プレーヤーの読込に失敗
013 謎の残像が発生する
014 コマンドが左右反転する
015 パレット管理でよくあるミス
016 下溜め技が失敗する
017 パレットウィンドウで落ちる
018 コンボが途切れない
019 やられ中にしゃがみ可能
020 ソフトのバージョン表記
021 空中でコマンド左右反転2
022 左右押しでガード前進
023 真空投げが発生する
024 空中でコマンド左右反転3
■ テスト時のチェック項目
■ 解説用データ ダウンロード
033
「ステージ」の組み方
格闘ゲームにおいてキャラクター同様に欠かせないのが
ゲームの背景となるステージ
です。
ステージ作成の基本についてはチュートリアルのページで説明したので
ここでは具体的な作例を通して1ステップずつ
ステージの組み方を説明したいと思います。
※以前の説明と重なる部分も幾つか有りますが、適宜読み飛ばしてもらっても問題ありません。
以下は、解説の流れをまとめた目次です。
1. 画像なしのステージ 2. 1画面分の背景画像をセットしたステージ 3. 大きい画像を登録する 4. スクロール量の異なるレイヤー 5. キャラの手前にも背景を追加 6. 自動スクロールのある背景 |
各項にはリンクを設定してあるので、読み飛ばしたい時など上手く活用してください。
1. 画像なしのステージ
現在、名前のみ設定した新しいステージが用意されています。
画像などは全く設定していないデフォルト状態のステージですが、
まずはこのままテストプレーを実行してみます。
ゲーム開始。
真っ黒な背景にキャラが表示されます。
デフォルトの背景色は黒で固定されています。
画像の設定無しに背景を青にする、といったことは出来ないので注意してください。
この状態でキャラを動かすと…
画面上にキャラの残像を残したままキャラが移動します。
2D格闘ツクールでは、画面奥側から
背景 → キャラクター → 背景 → キャラクター → …
の順で画面が描画されるのですが、
ここでは背景に何も画像をセットしていないので
黒画面 → キャラクター → キャラクター → … という描画になっています。
そのため、画面上には前回のキャラ描画が残り続けることになります。
2. 1画面分の背景画像をセットしたステージ
上ではステージに画像をセットしない場合、どのように表示されるかを確認しました。
次は以下のような画像を背景にセットしてみます。
画像のサイズは640×480
。
格闘ツクールの画面サイズが640x480なので、丁度1画面分の背景になります。
画像を読み込む前に、まずは画像を置くための命令をスクリプトに追加しておきます。
デフォルト状態だとプレーヤー位置という1行のみが用意されています。
この行はキャラの表示位置(奥行)を示すためのもので編集できません。
画像を追加するためには、新しく背景画像用の行を追加する必要があります。
「プレーヤー位置」
を選択するとわかりますが、
ステージのスクリプトは上の行を奥側、下の行を手前側として扱います。
イメージにすると以下のような感じでしょうか。
ここではキャラの奥に背景画像をセットするので
「プレーヤー位置」行の上側に行を作成します。
行の追加が済んだら画像呼出命令をセット、画像の読み込みを始めましょう。
読込画面で背景画像を表示したら読込ボタンを押して画像を登録してください。
ここでは「枠の左上の点を透明色に割り当てて〜」
のボタンをONにして画像を読み込んでみます。
画像の登録が済むとエディタ画面上に背景画像が表示されます。
良く見ると空の青が消えていることがわかります。
これは「枠の左上の点を透明色に割り当てて〜」
のボタンを
ONにして背景画像を読み込んだためです。
実際にゲームを実行してみると以下のような表示になります。
透明色扱いされた空の部分はデフォルトの黒画面のまま。
キャラを動かすと、やはり黒い部分に残像が残ります。
------------------------------------------------------------
確認が済んだら、「枠の左上の点を透明色に割り当てて〜」
をOFFにして再び画像を登録してください。
※さっき登録した画像を置き換えればOKです。
今度は空の色もきっちり表示されています。
ゲームを実行してみると以下のような感じになります。
今回は画像のサイズを1画面ぴったりに合わせているので
キャラを動かしても背景は動きません。
3. 大きい画像を登録する
上の例では1画面サイズの画像を登録しました。
見た目上遠景となる空が動かないのは別に良いですが
このままだとステージが非常に狭く、キャラを動かしていて窮屈な感じがします。
キャラが上下左右にどれだけ動こうと背景は全く動きません。
一般的な格闘ゲームのルール上、互いのキャラが1画面内に入るのは常ですが
ステージには左端から右端まで画面1つに収まらない広がりを持たせていることが多いです。
そこで、今度は少し大きめの画像を背景として登録してみましょう。
※先に登録した空の画像とは別に新しく設置します。
遠景となる「空の画像」と「プレーヤー位置」の間に表示したいので
両者の間に新規行を作成します。
以下は今回登録する画像になります。
サイズは1280×960 、丁度画面を縦横2倍にしたサイズです。
また、今回は先に登録しておいた空の画像を遠景として使うので
上のほうは透明色用の緑色で塗りつぶしてあります。
( 透明色用のカラーにはグラフィックのメイン部分で使っていない色を割り当てている点に注意してください )
画像読込ウィンドウに表示したら、
「枠の左上の点を透明色に割り当てて〜」 ボタンをONにしてください。
今回は画像の中で緑色の部分が透明色扱いになります。
画像左上に透明色が来ている点に注意。
メインとなるグラフィック部分が左上まで伸びると緑色を透明色として扱ってくれません。
例えば、この画像の場合、透明色扱いされるのは緑色の部分ではなく赤色の部分となります。
背景画像を用意する際は左上ドット部分が透明色になるよう注意してください。
MEMO
大きいグラフィックを全選択する
読込画面上で大きい画像全体を
スクロールしながら枠で囲むのはちょっと大変です。
そういう場合は「枠の大きさを最大にします」 ボタンを押すと良いです。
これを使うと画像全体を一瞬で囲んでくれるので
背景など大きいグラフィックを登録する際は重宝します。
画像の登録が済むとエディタ上にグラフィックが表示されます。
画像サイズが大きいため、エディタでは下の方に表示されています。
とりあえずはこのままテストプレーを実行してみましょう。
ゲームを実行すると以下のような表示になります。
画面を見ると、グラフィックの表示位置がずれていることがわかります。
また、キャラを動かした際のスクロールも有りません。
相変わらず狭い1画面の中に閉じ込められたままです。
------------------------------------------------------------
スクロールを設定する
表示位置のずれを直したいところですが、まずは画像のスクロール設定を組みます。
1画面内に収まらない大きいグラフィックを登録した時は
どれぐらいの移動量でスクロールさせるのか の設定が必要になります。
なお、ここでいうスクロールとは
「流れる雲のように画面内を自動的に動く」といったものではなく
あくまで「キャラの移動に合わせて背景の表示範囲が変わる」というものです。
さっき画像登録した近景のスクリプト行を選択してください。
( ブロックが並んでいる部分ではなく、左端の名前部分をクリックします )
選択が済むと、エディタ上に初期設定画面が表示されます。
今回は下の方にあるスクロールの項目を設定します。
左端のチェック項目で縦横の スクロールON/OFF を切り替え、
右側の数値欄で スクロール量 を設定します。
------------------------------------------------------------
スクロール値の設定について
設定可能な値は -9999 から +9999 まで。
プラス値だとキャラと同じ方向へ、マイナス値だとキャラと逆方向へのスクロールになります。
( マイナス値を設定することはめったに無いですが後で使い方の例を軽く紹介したいと思います )
設定値の幅は非常に大きいですが、
実際には単純な%設定 として解釈した方がわかりやすいかと思います。
ここで格闘ツクールの画面サイズを思い出してください。
640x480、これを 縦横100%×100%のサイズ と考えます。
そして、スクロール設定欄の値はその100%に対して足す値と考えます。
スクロール値が +100 なら、ベースとなる 100% と合わせて合計 200% になります。
再びグラフィックのサイズに戻って考えてください。
画像幅640 が 100% なら、200% は画像幅にして 1280 という扱いになります。
上で用意した画像は 縦横1280x960 なので、
スクロール値 200%×200% にすると良いです。
この設定だと、ステージのサイズも画面サイズを縦横に2倍したものになります。
同様にしてスクロール値+50なら合計150%で640x480を1.5倍したステージサイズ。
このように理解していくとわかりやすいかと思います。
セットする背景画像に合わせてスクロール量を設定する
と覚えておくと良いでしょう。
------------------------------------------------------------
スクロール値を変更すると、エディタ画面内に表示されていた
太枠 = ステージのサイズも変化します。
今回の画像は最初からピッタリ1280x960のステージサイズに
合わせた背景なので位置調整は不要ですが、
画像の表示位置がずれている場合はこの段階で修正しておきます。
画像の表示位置はスクロール値によって変わってくるので
スクロール設定 → 表示位置調整 という作業順をよく覚えておいてください。
実際にゲームを実行してみると次のような感じになります。
上で説明したスクロール値についてもキャラを動かしながら調節すると良いでしょう。
( 例えば縦方向のスクロールは少し小さめにする、など )
上下のスクロールを確認する方法
上下方向のスクロールをテストしたい時は1P/2Pを同時にジャンプさせると確認しやすいです。
2キャラを操作するのが面倒な場合はテストプレーで2Pの動作を「ものまね君」にしてください。
CPUがこちらと同じ動きをしてくれるので操作が楽になります。
------------------------------------------------------------
作成できるステージサイズの限界
ここでは縦横2画面分のサイズとして1280x960のステージを表現しましたが、
横幅については一応1280以上の画像も登録可能です。
ただ、あまり実用的では無いと思います。
画像の全体をステージで使用するにはスクロール値に100以上の値を設定する必要が有り
たとえそのように設定してもステージのサイズは2画面分以上にはなりません。
キャラが2画面の分を移動する間に
ステージ背景が2画面分以上の移動をする感じになり、どう見ても不自然です。
ステージのサイズは最大2画面分と考えておいた方が良いでしょう。
( 一般的な格闘ゲームを表現するにはこれでも十分な広さだと思います )
MEMO
マイナスのスクロール値を使う
マイナスのスクロール値を設定すると、背景が
キャラの移動とは逆方向にスクロールします。
例えば、キャラが左に歩けば背景は右方向にスライドしていきます。
なかなか使いにくい設定ですが、以下のようなステージ構成を
表現する際にはちょっと役立つかもしれません。
ゲーム画面ではないのでわかりにくいかもしれませんが、
キャラが左方向に歩いていくアニメーションです。
キャラ奥側の背景はキャラ同様左方向へ移動していきますが、
キャラ手前側の前景はキャラとは逆に右方向へ進んでいきます。
ステージ中央を中心として、周囲を回るようにキャラとカメラが動く
といった表現を使う時は、手前に表示されるオブジェクトを
逆方向に動かすと独特な雰囲気を出せるかもしれません。
4. スクロール量の異なるレイヤー
ここまででスクロールしないレイヤー、スクロールするレイヤーを用意しましたが
ここにもう1つスクロール付きレイヤーを追加したいと思います。
以下は今回追加する背景用グラフィックです。
ステージ内の中景として配置する縦に長い石柱です。
遠景と近景の間に新しくレイヤーを追加、画像を登録します。
スクロール値の設定ですが、距離感を出すために少し工夫してみましょう。
電車やバスなど乗り物から見える風景を思い浮かべればわかるかと思いますが、
遠くのものは小さくスライドする。近くのものは大きくスライドする。
この差をゲームの背景にも取り入れてみます。
遠景はスクロール無し、近景はスクロール有り(合計200%)なので
中景はスクロール値を合計150%ぐらいになるよう設定します。
上は設定したスクロール値です。
実際にゲーム上で表示するとこのような感じになります。
少々わかりにくいかもしれませんが、スクロール量の差によって
ステージの奥行が表現できているのではないかと思います。
5. キャラの手前にも背景を追加
背景と言うと基本的に奥の方に配置するものですが、2D格闘ツクールでは
キャラの手前にオブジェクトを配置したステージを表現することも出来ます。
以下は今回追加する前景用グラフィックです。
横幅1280、近景に合わせた岩場のイメージです。
基本的な手順はこれまでと変わりませんが、画像を配置する場所だけ注意してください。
キャラよりも手前側のレイヤー、
スクリプト一覧で言うと「プレーヤー位置」行の下に新しく行を追加します。
画像幅は近景と同じなのでスクロール値の設定も同じで構いません。
横長の画像なので縦方向の配置だけ気をつけて調節してください。
以下は実行画面での表示になります。
右側キャラの足元を見てください。
キャラ表示の手前に岩が並んでいるのがわかるかと思います。
あまり大きくキャラを隠すようだと画面が見づらくなるので
ほどほどの隠し具合になるよう高さ位置を調節すると良いです。
逆に、地面へ設置攻撃を仕掛けるキャラに有利なステージとして
足元が隠れる背景を表現すると面白いかもしれません。
MEMO
アニメプレビューを見ながらの調整
ステージ編集ではキャラの編集同様に
アニメプレビュー画面での表示確認が可能です。
ただし、バグによってソフトが異常終了することも多いため
作業する際は気をつけた方が良いです。
( 表示確認する前にデータを保存しておくことをお勧めします )
プレビュー画面ではマウス右ボタンドラッグで
視点を移動できるのですが、これも落ちやすいので要注意です。
視点を動かさずにちょっと表示を確認、
プレビュー画面を閉じて位置を調整、再びプレビューを表示して…
という作業を繰り返した方が安全かもしれません。
また、ステージ編集画面でプレビュー表示を出したまま
エディタを終了させることは絶対に避けるべきです。
次回エディタをスタートすると、けっこうな確率で起動・即終了
という脱出不可なバグに陥ります。
※万が一、そういう状態になってしまった場合の対処法は こちら を参照してください。
6. 自動スクロールのある背景
ここまではキャラの移動に対して背景の表示範囲が変化する
という処理を組んできましたが、ステージの中には
キャラの移動に関係なく背景がスクロールするというパターンも有ります。
背景を通る乗り物や人々、キャラが乗り物上で戦うステージ。
絶え間なく流れる川や滝など色々な例が思い浮かぶかと思いますが、
ここでは例として遠景に重ねて左右に流れる雲を表現したいと思います。
以下は今回の処理で使用する背景グラフィックです。
これまでの手順通り、レイヤーを追加して画像を配置してください。
雲は遠景である空に近い位置にあるのでスクロールは無し にしておきます。
自動スクロールなのにスクロール値無し、と聞くと
違和感が有るかもしれませんがこれで問題ありません。
また、雲が流れていって途切れるとまずいので
「左右を繋げる」 オプションをONにしておきます。
こうしておくと画像の左端と右端が繋がるので延々と流れる雲を表現することが出来ます。
( 同様にして縦に自動スクロールする背景では「上下を繋げる」オプションをONにすると良いです )
自動スクロールで使用する画像は
左右がぴったり繋がるループ画像にしておく必要があります。
グラフィックを用意する際もこの点に注意して作業すると良いです。
スクロール設定が済んだら、スクリプト行の編集に入ります。
背景の自動スクロールはキャラの歩きなどと同じように
座標移動命令による移動で表現します。
今回は左右のスクロールなので左右の移動力のみ設定しておきます。
実際にゲームを実行すると以下のような感じになります。
実行画面で様子を見ながら雲の移動速度を調整してください。
なお、雲を複数レイヤーに分けて並べる時は
やはり手前側を速く奥側を遅く動かすと自然な動きになります。
長くなりましたが、ここまでの説明で
ステージの組み方について大方カバーできたと思います。
基本はそれほど複雑ではありませんが、良いステージを表現するには
ここから色々と処理を追加していくことになるでしょう。
最初にも述べた通り、ステージはキャラ同様ゲームに欠かせない要素です。
じっくり試行錯誤してしっかり世界観を表現してください。
以上、ステージの組み方に関する説明を終えます。
なお、今回説明した内容について気になる点や疑問点などがあれば
掲示板 にて質問を受け付けておりますので気軽にお尋ねください。