2D格闘ツクール2nd 完全攻略

■ チュートリアル


■ コマンド解説


■ テクニック解説
 001 特殊なキャラクターセレクト
 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 ハイジャンプの作成


■ バグ・よくあるミス


■ テスト時のチェック項目


■ 解説用データ ダウンロード


001

特殊なキャラクターセレクト

キャラクターセレクト画面は、基本的に縦横ブロック状に並んだ表形式で作成します。
( システム側でブロック数やサイズを指定します )

標準的な形式のキャラクターセレクト


「縦横一定の間隔で並んでいる」
というルールさえ守っていれば、枠の形は自由に変更できます。

丸型のセレクト枠


星型のセレクト枠


しかし… 枠の並び方を変更することはできません。
例えば、以下のようなキャラクターセレクトは通常作成できません。

A. 枠が斜めに並んでいる形式


B. 枠がリング状に並んでいる形式


C. カーソルは固定で、キャラ一覧をスライドする形式


D. 枠が不規則に並んでいる形式


E. 6角形の枠が蜂の巣状に並んだ形式


これら特殊なパターンを実現するには、
自力でキャラクター選択のシステムを作る必要があります。

そこで、
今回は「特殊なキャラクターセレクトを作成する方法」について説明します。

「〜型のキャラクターセレクトを作る方法」について
1つ1つ説明していくとキリがないので…今回の説明の中から
「特殊なシステムを作る際の考え方」を読み取ってもらえれば幸いです。



大まかな流れ

1. キャラクターセレクトの設計図を書く
2. 通常のキャラクターセレクトを作成する
3. 自作のキャラクターセレクトを用意する
4. 通常のキャラクターセレクトの状態を変数で記録する
5. 変数を基にして、自作のキャラクターセレクト画面の状態をコントロール

※4では、システム変数を2個使用する予定です
 どうしてもシステム変数を使いたくない人用に…ヒントをページ最下部に載せておきます




内部的なキャラクターセレクトの状態を、
見た目上のキャラクターセレクトに反映させる
…という点を覚えておいてください。

以降の説明では、便宜上次のように表記を省略します
見た目上のキャラクターセレクト → 表キャラセレ
内部的なキャラクターセレクト  → 裏キャラセレ




1. キャラクターセレクトの設計図を書く

まずは、これから作成する表キャラセレについて その設計図を作成します。

今回は、以下のような形式のキャラクターセレクトを作成します。

枠が縦横に並んでいるが、配置は斜めに傾いている。
( 説明の便宜上、画面上部にスペースを空けてあります )

後から枠の数を変更するのは少々厄介です。
設計図の時点で枠の数をはっきりさせておいた方が良いでしょう。

設計図の分析
設計図の作成が済んだら、次はそれについて分析していきます。
この手順を経ることで、これから用意すべき裏キャラセレの形式が明らかになります。

確認すべき点は、縦横に並ぶブロックの数です。
操作自体は裏キャラセレがベースとなるので…
表キャラセレが縦並びの場合、裏キャラセレも縦並びの1列
表キャラセレが横並びの場合、裏キャラセレも横並びの1行

という感じになります。

A〜Eを例にとると…

A.

枠は斜めに並んでいるが、その内容は縦1列。
上下操作のみでキャラクターを選択するので…
1
2
3
4
5
用意すべき裏キャラセレは縦1列となる。


B.

枠はリング状に並んでいる。
少々わかりにくいが…操作を基準にして考えると、その内容は横1行。
( 左右の操作のみでキャラクターを選択すると考えて )
1 2 3 4 5 6 7 8 9 10 11 12
用意すべき裏キャラセレは横1行となる。


C.

見た目上のカーソル位置は固定。
左右の操作でキャラ一覧をスライドして選択
…しているように見えるが、内部的には横1行のキャラクターセレクト。
1 2 3 4
用意すべき裏キャラセレは横1行となる。


D.

枠が不規則に並んでいる。
不規則な並びの中から、一定の法則で選択順を決める。
Dの場合…上下にずれてはいるが、だいたい横並びになっているので
左右操作でキャラを選択する形式が近い。
1 2 3 4 5 6 7 8 9
用意すべき裏キャラセレは横1行となる。
が、あまりにも不規則な並びはユーザー的にも操作しにくいので気をつけること。


E.

枠は規則的に並んでいる。
ただし縦横には並んでおらず、配置が斜めになっている。
この形式の場合は、縦横に並んだ裏キャラセレを用意することになる。
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17 18 19 20




2. 通常のキャラクターセレクトを作成する

設計図の分析が済んだら、内部的なキャラクターセレクトの作成に入ります。
エディタ上で「デモ」画面に移動、デモを新規作成してください。

ここでは「select_SP」という名前でデモを作成しました。
※デモを作成する際は、一覧の一番下にダミーのデモが来るようにしておいてください。
 ( 詳しくはチュートリアルの006を参照 )



先に、作成する画面の全体イメージを出しておきます。

この説明では、処理をわかりやすくするために
画面上部に内部的なキャラクターセレクトを、
画面下部に見た目上のキャラクターセレクトを表示します。

実際のゲーム上で両方のキャラクターセレクトを表示する必要はありませんが…
後々、カーソルの座標などを基準にする部分もあるので
慣れないうちは目安となる画像を用意しておくことをお勧めします。

「内部的なキャラクターセレクト」用画像

ゲーム用BMPは画像のリンク先にて提供しております
表キャラセレの手前に配置するキャラセレなので、背景色透過ONで読み込んでください。


基本背景の下に「裏キャラセレ」という行を作成、そこに画像を配置しました。

内部的なキャラクターセレクトのサイズを大きめにしておくと、
後で座標判定による処理分岐がやりやすいです。

合わせて、通常のカーソルもここで用意しておきます。
「ゲームシステム」-「基本イメージ」内に読み込んでください。
画像の設置先は
「キャラセレカーソル1P」「キャラセレカーソル1P決定」になります。

ゲーム用BMPは画像のリンク先にて提供しております
この画像も、背景色透過ONで読み込んでください。


各種画像の準備ができたら、
「ゲームシステム」-「キャラクターセレクト画面」に移動してください。
通常の手順どおりに、キャラクターセレクトの設定を行います。
( 設定の手順について詳しくはチュートリアルの025を参照 )


位置や幅など座標項目を設定する際は、
内部的なキャラクターセレクトが基準となることに注意してください。

今回は横6列、縦3行なので以下のように設定しました。

背景画像に画像がないと座標設定しにくいと思います。
ここでの設定は「見た目上のキャラクターーセレクト」を読み込んだ後でも構いません。



3. 自作のキャラクターセレクトを用意する

「見た目上のキャラクターセレクト」用画像

ゲーム用BMPは画像のリンク先にて提供しております
今回はこの画像をデモ画面の土台( 背景 )とするので、
背景色の透過OFFで読み込みます。
内部的なキャラクターセレクトとは別レイヤーでデモ画面に配置してください。

両者のサイズ上、画面内で2つのキャラクターセレクトが重なってしまう…
という場合は「内部的なキャラクターセレクト」を手前に配置、
「色変更」ブロックで半透明表示にしておくと良いでしょう。


なお、「見た目上のキャラクターセレクト」の配置はこの時点でしっかり決めておいてください。
後から配置を変更するとなると、たくさんの「見た目上カーソル」を1つ1つ修正することになります。



続いて、表キャラセレ用のカーソルを読み込んでおきます。

ゲーム用BMPは画像のリンク先にて提供しております

裏キャラセレ用と違って、こちらはデモの方に読み込んでおきます。
システムイメージでも問題ありませんが、
キャラセレクトの枠と同じデモ内の方が位置を調節しやすいと思います。


当たり前のことですが、デモ画面内でカーソルはキャラセレ枠よりも手前に配置します。
※スクリプト一覧で言うと、下の行に置きます

配置は適当でOKです。
サイズ確認のため、画面端などに置いておくと良いでしょう。

各画像の読み込みが済んだら
「ゲームシステム」-「基本」でデモ選択しておきます。

今回作成したデモを各種キャラクターセレクトに設定しておきます。



4. 通常のキャラクターセレクトの状態を変数で記録する

設定が終わったら、テストプレーを実行して内容を確認してみましょう。

キャラクターセレクト画面が表示されました。

画面上部、裏キャラセレについて縦横のブロック数に注目してください。
1の分析で説明したルールに従って、ブロック数を設定しています。
表キャラセレと裏キャラセレ、各ブロックの対応も確認しておいてください。
( 例では、番号で対応を示しています )
また、左下には見た目上のカーソルも表示されています。

この画面を操作しながら、キャラクターセレクトの状態を
記憶するのに役立ちそうなものを探していきます。

方向キーを上下左右に入力すると、画面上のカーソルは
上下左右一定の間隔で移動することがことがわかります。

このカーソルの表示座標( XY )を基準にして
「現在、裏キャラクターセレクト上でどの枠にカーソルがあるか?」
を判定できそうです。

図で示すと、以下のようになります。

内部的カーソルの座標がX=233,Y=28ならば…
 ↓
裏キャラセレで左から2番目、上から1段目の枠が選択中である

この方法の利点はいくつか考えられます。
・セレクト枠内に空白欄があっても問題なく動く
・キャラを並び替えても影響しない
・枠が1つ1つ異なる形状をしていても対応できる


実際にキャラクターセレクトの状態を変数に記録していきます。
今回は内部的なカーソルのXY座標を基準とするので…
内部的なカーソルのX座標、内部的なカーソルのY座標
の2つを取得します。

「ゲームシステム」-「基本イメージ」から
「キャラセレカーソル1P」スクリプトを選択してください。

現在、ここには裏キャラセレ用のカーソル画像がセットされています。

スクリプトの先頭( 画像呼出ブロックの手前 )
「変数による分岐」ブロック を設置してください。


設置が済んだら、変数命令の詳細を設定します。


今回は、「X座標の取得」が目的なので…数値計算を「代入」に設定します。
続いて「変数使用」のチェックをONにしてください。

これによって、オブジェクト表示座標などのプロパティが取得できるようになります。

選択肢一覧で、下の方にある「データ:X座標」を選択します。
( 似たような名前のプロパティがいくつかあるので注意してください )

代入内容の設定が済んだら、続いて代入先の設定を行います。

設定項目一番上にある「変数」欄から代入先の変数を選択してください。
今回は、
「システムイメージ上で変数取得 → デモ上で変数使用」のように
システム〜デモ間をまたいでいるため、システム変数を使う必要があります。
システム変数A〜Pの中から、他で使っていないものを選択してください。
 格闘ツクール上で変数の使用状況一覧を確認する方法はないため、
 普段からExcelなどで変数の用途一覧を記録しておくと良いでしょう


ここでは、システム変数Aを代入先に設定しました。

これで、システム変数Aに「データ:X座標」を代入する という設定が完成しました。
( 条件分岐に関しては、デフォルトのままでOKです )

同様にして、
別のシステム変数に「データ:Y座標」を代入する という設定を作成してください。

ここではシステム変数Bを代入先に指定しています。

これで、カーソル座標を変数に取得することができました。
「キャラセレカーソル1P」スクリプトが呼び出されるたびに
変数内のカーソル座標が再取得されます。
 カーソル画像のWAITがあまりにも大きいと、再取得が遅れるかもしれないので注意してください



5. 変数を基にして、自作のキャラクターセレクト画面の状態をコントロール

4の手順において、内部的カーソル座標を取得しましたが…
現時点ではただの座標情報に過ぎません。

システム変数A:カーソルX座標
システム変数B:カーソルY座標


これらの情報を元にして、意味のある情報を取得します。
ここでは「現在、カーソルがどの枠を選択しているか?」という情報を目指します。

再びデモ画面を確認しましょう。

前述した通り、カーソルの表示座標と、裏キャラセレの枠座標を比較すれば
選択枠( 横〜番目、縦〜番目 )の情報が得られそうです。

比較を行うため、裏キャラセレの枠座標( 各ブロック分 )を測ってください。

MEMO

画面内の座標を測る際は、
テストプレー実行画面( ウィンドウ表示 )のスクリーンショットを撮ると便利です。
( ショートカットキーは"Alt + PrintScreen"です )

そのまま画像編集ソフトにペーストすれば、座標を計測しやすいです。
ただし、スクリーンショットにはウィンドウのタイトル部分など
余計な部分も含まれているので、それらをカットして計測してください。

以下に、計測内容を書き加えた図を示します。

選択枠を特定する流れの詳細を以下に示します。

現在、カーソルの座標( 233, 28 )のみがわかっています。
Y座標は28、これは上から順に見て70よりも小さい。よって選択枠は1段目である。
X座標は274、これは左から順に見て315よりも小さい。よって選択枠は3列目である。
カーソルはセレクト枠の横3、縦1を選択している。

MEMO

縦横どちらの判定を先に行うかは自由です。
実際にスクリプトを組みながら
どちらを先に判定するべきか考えてみてください。


ここからは実際にスクリプトを組んでいきます。
なお、今回の説明ではスクリプトを見やすくするため
座標を基準とした座標分岐( 縦横 ) 〜 各分岐先のカーソル画像
の処理を複数行に分けて書きます。
作成する枠数が少ない場合は1行内に収めることも可能です。
( ちなみに、1行に配置できるブロック数は最大255個となっています )

「デモ」編集画面に移動、
スクリプト一覧から「表向きのカーソル」行を表示してください。

現在、ここにはカーソルの画像が1枚置かれているだけです。


先に完成後のスクリプト一覧を出しておきます。

内容についての説明:

スクリプトは「表向きのカーソル」〜「カーソル画像3段目」の4行で構成されています。
4行の内で、唯一スクリプト先頭に がセットされていない「表向きのカーソル」行。
ここが処理の先頭になります。
「表向きのカーソル」行では、
内部的なカーソルのY座標を基準にして分岐処理を行います。
( 値によって「カーソル画像1段目」〜「カーソル画像3段目」の3つに分岐 )

カーソル画像の行でも分岐処理を行います。
ここでは、内部的なカーソルのX座標に合わせて6つに分岐します。
それぞれの分岐先は各行の後方、カーソル画像のブロックになります。
また…各画像呼出ブロック の後にはスクリプト移動命令 が配置してあり、
再び「表向きのカーソル」行の条件分岐に移動… というループ構造になっています。

ここでは、横6列 ×縦3行、 計18ブロック分のカーソル枠を作成することになります。
これらは1つ1つ手作業で位置合わせすることになるので、
地道な作業を覚悟しておいてください。


まずは完成図に従ってスクリプト行を追加、
「カーソル画像1段目」スクリプトに画像を配置してください。

キャラセレ枠とカーソル画像の位置合わせは、
アニメプレビューウィンドウを見ながら調節すると良いでしょう。
※「アニメ」ウィンドウに画像が表示されない場合は、一時的に画像のWAITを大きくすると良いです

MEMO

デモ画面でアニメプレビューをONにすると、
エディタがエラーして落ちることが多いです。

キャラクター編集など、安全にアニメプレビューできるであろう
画面で表示ONにして…その状態でデモ編集画面へ。
この手順を踏めば安全にプレビューできます。
とは言え、不安は残るのでデータは小まめに保存しておいた方が良いです。

また、
ソフト起動時に「デモ編集画面にいて、アニメウィンドウがON」
になっていると、起動直後にエラーしてしまうので注意してください。
この状態に陥ってしまった場合は起動と同時に
"F3"( アニメ表示ON/OFFのショートカットキー )を押すことで脱出できます。
タイミングが難しいですが、エラー発生前に
アニメウィンドウをOFFにできます。



表キャラセレ右上枠への位置合わせが完了しました。
画像のWAITには、短めの値を設定しておきます。
ハードの性能にもよりますが、だいたい2〜5くらいに設定しておくと良いでしょう。
( WAITが長すぎると、カーソル位置の表示更新が遅くなってしまうので注意してください )

引き続き位置合わせ作業を続けるので、「アニメ」ウィンドウはONのままにしておいてください。

の後に、 を配置します。
スクリプト移動先は「表向きのカーソル」行を指定してください。
これは、「画像を表示した後、再び選択枠の位置確認に戻る」という処理になります。

続いて、さっき編集した をコピーして、スクリプト先頭に貼り付けします。
この画像の後にもループ処理用の を配置してください。
この は1セットとして、これから何度も設定することになります。


操作の結果、スクリプトはこのような並びになりました。

1つ目の画像同様に2枚目のカーソル画像を位置調整してください。

ここでは、右上から1つ左の選択枠に重なるようカーソル画像を移動します。
( Y座標の値はコピー元の画像と同じなので、ここではX座標のみを調整することになります )

MEMO

今回、スクリプト終端の画像ブロックから順に作成しているのは
スクリプトが左端から順に実行されることに関係しています。


2つ目の「画像呼出」ブロックについての位置調整も完了したら…
同様にして、左端の枠に至るまでカーソル画像と を交互に並べていきます。
( 調整すべきX座標の移動量は一定の値になるでしょう )

左端となる枠の分まで配置した状態です。
位置調整用にWAITを大きくした場合は、小さい値に戻しておいてください。

引き続き2段目のカーソル画像も設定していきます。

「カーソル画像1段目」スクリプトを行選択して、
「カーソル画像2段目」スクリプトに貼り付けしてください。

このような状態になりました。

スクリプト先頭、 2段目の左端用カーソル画像を正しい位置に移動してください。
移動が済んだら、位置合わせに要した移動量を計測してください。
( 1行上にある1段目左端カーソル枠のXY座標と比較すると良いです )

計測できたら、後は右に向かって同じ移動量で各画像のXY座標を調整してください。
すぐに1段分のカーソル枠が揃うと思います。

同じ手順で…全ての段について、カーソル画像を揃えてください。

全てのカーソル画像表示パターンが揃いました。

次はいよいよ分岐処理の記述に入ります。
「表向きのカーソル」スクリプトを選択してください。
現在、スクリプトには画像呼出ブロックが残っていますが…
これは後で使うため、残しておいてください。
※変数ブロックVを動かすためには、
 対象のVの後( 直後でなくともOK )に画像をセットする必要がある


この行では、内部的な選択枠の縦位置を特定します。
以下に、表形式で行の内容を左から順に一覧表示します。
1 システム変数Bが70以下だったら、「カーソル画像1段目」の2ブロック目へ
2 システム変数Bが112以下だったら、「カーソル画像2段目」の2ブロック目へ
3 「カーソル画像3段目」の2ブロック目へ
3 変数ブロックVを動かすために設置する画像( 内容は表示されない )
上記説明での「〜以下だったら」というのは、実際には「〜より小さかったら」の意味になりますが
条件分岐の設定欄では、ソフト内の表記に合わせて「〜以下だったら」を選んでおいてください



これで縦方向の分岐処理が作成できました。

再び「カーソル画像1段目」に戻ります。
スクリプト行の先頭に、選択枠の横位置を特定するための分岐処理を追加します。
ブロックを追加すると、スクリプト移動先の指定が変わってしまうので注意してください
1 勝手にこの行が処理実行されないように、先頭でエンド処理しておく
2 システム変数Aが224以下だったら、「カーソル画像1段目」の8ブロック目へ
3 システム変数Aが263以下だったら、「カーソル画像1段目」の10ブロック目へ
4 システム変数Aが306以下だったら、「カーソル画像1段目」の12ブロック目へ
5 システム変数Aが347以下だったら、「カーソル画像1段目」の14ブロック目へ
6 システム変数Aが388以下だったら、「カーソル画像1段目」の16ブロック目へ
7 「カーソル画像1段目」の18ブロック目へ
内部的なキャラ選択枠を大きめにしておくと、
ここで条件分岐する際の判定用座標が楽に設定できます。
( 具体的に言うと、より大雑把な値で条件分岐できる )




これで横方向の分岐判定が作成できました。
同様にして、2段目〜以降のスクリプトについても分岐処理を追加してください。



全てのスクリプト設定が済んだら、テストプレーを実行してみてください。
( 各ブロックのスクリプト移動先指定が正しいことを確認してください )


テストプレー実行画面です。
画面上部、内部的なキャラクターセレクトのカーソル移動に合わせて
画面下部、見た目上のセレクトカーソルが移動することを確認してください。

特殊なキャラクターセレクト画面を表現することができました。
内部的なキャラクターセレクトの表示が不要な場合は…
手前に を置いたり、画像を透明画像に置き換えたりすると良いでしょう。
( こうしておけば、後々内部的な〜を再確認したい時にも便利です )


長々と説明しましたが、これで特殊なキャラクターセレクトについての説明を終えます。


システム変数を使わずに、特殊なキャラクターセレクトを作る方法

実際に試したわけではないため、保証はできませんが
以下の方法でできるのではないか…と思います。
( 本文での処理内容を理解した上でチャレンジすることをお勧めします )

本文にて説明していた「デモ画面でのカーソル表示分岐」ですが、
あれをシステムイメージ内で行います。
本文中で行っていた「内部的なカーソルと見た目上のカーソル」
のような分け方はせず、カーソルグラフィック内で場合分けします。


「キャラセレカーソル1P」のスクリプト内容に色々と処理を書き加えます。
座標を取得した後、同じスクリプト内でそのまま条件分岐を行います。
条件分岐の結果に合わせて、( システムイメージ内の )各種カーソル画像に飛びます。

移動先のカーソル画像は、
システムイメージで配置したカーソル画像をずらしたものです。
( 不規則な配置に対応できるよう、手作業で画像の中心軸をずらします )
位置合わせについてはテストプレーで合わせるしかないため…
仕組みは原始的ですが、かなり難易度が高い方法と言えるでしょう。

以上、制作の参考になれば幸いです。

トップページへもどる

inserted by FC2 system