FlixelDebugger の変更点
[[トップに戻る>FrontPage]]
* Flixelデバッガの使い方 [#r8b010a8]
このページではHaxeFlixelに組み込まれている、とても強力なデバッガの使用方法を紹介します。
最初は少しとっつきにくいですが、うまく活用すると開発効率がかなりアップします。
----
#contents
----
** Flixelデバッガの機能概要 [#a9896d8c]
Flixelデバッガには以下の機能があります
- GUI操作による、ゲーム実行の一時停止、再開、コマ送り、ゲームの再起動
- 特定の機能を呼び出すGUIボタンの配置
- ロードしている画像データの表示
- 専用のログ表示
- 変数のウォッチ
- グラフィカルなパフォーマンス表示
- コンソールによる特定の機能の呼び出し。インスタンスのパラメータ操作や関数の呼び出し
- オブジェクトの当たり判定表示・ドラッグ＆ドロップによる移動
**Flixelデバッガの画面の説明 [#r1759888]
Flixelデバッガは、「-debug」でビルドを行い、「F2」「`(バッククォート)」「\(バックスラッシュ)」のいずれかで表示することができます。
Flixelデバッガの画面構成は以下のようになります。
#ref(debugger.png);
番号に対応する説明は以下のようになります
+ HUD(画面上部) : 中央にあるボタンで、ゲームの再起動や一時停止、コマ送りなどが行えます
特にリアルタイムゲームではコマ送りをして、少しずつ動きを確認したりするのに使えます。
またボタンを増やすと、ここのエリアに追加されます。
+ BitmapLog(左中央上) : ロード中の画像を確認できます
読み込み中の画像をここで確認できます。
これにより余計な画像をロードしていないかチェックすることが可能です。
+ Log(左中央下) : ログ表示
FlxG.logにより出力したログが表示されます。
+ Watch(右下) : 登録した変数の値を確認できます
FlxG.watchにより登録した変数が確認できます。
特にリアルタイムゲームでは、ここの変数を登録し、
コマ送りで数値の変化をチェックすることで効率なデバッグを行えます。
+ Stat(右上) : FPSや使用メモリ量を確認できます
パフォーマンスを確認できます。
例えばFPSが極端に低くなっていたら、余計なオブジェクトを描画しているなどの可能性があります。
+ Console(左下) : コマンドを入力してオブジェクト操作などが行えます
** 表示方法 [#fe6071fe]
まずビルドコマンドに「-debug」オプションをつけます。この設定をしないと有効になりません。
lime test neko -debug
*** [[Intellij IDEA]]の場合 [#f11006f4]
プロジェクトファイルを右クリックして、「OpenModuleSettings」を選びProject Structureウィンドウを開きます。
#ref(001.png)
そこからHaxeタブを選び、「OpenFL Project XML」のところに「-debug」を指定します。
*** Project.xmlを編集する [#l9f5e580]
[[Intellij IDEA]]の場合、上記の設定が終了時に保存されないようです。そのため Project.xml を直接編集して有効にしました。
#geshi(xml){{
<!--Disable the Flixel core debugger. Automatically gets set whenever you compile in release mode!-->
<!--<haxedef name="FLX_NO_DEBUG" unless="debug" />-->
}}
FLX_NO_DEBUGの定数を直接無効化しました。ただしこの方法による有効化は、最終ビルドでデバッグ機能が有効にならないよう、忘れずに修正する必要があります。
** 表示キー [#tad447e6]
F2キーでデバッガの表示・非表示を切り替えることができます
F2キーでデバッガの表示・非表示を切り替えることができます（USキーボードであれば「`(バッククォート)」「\(バックスラッシュ)」でも可能)
*** 表示をトグルするキーの割り当て [#t69f1939]
別のキーに割り当てる場合は以下の記述をします。
#geshi(Actionscript){{
// ALTキーを表示用に割り当てる
FlxG.debugger.toggleKeys = ["ALT"];
}}
** 起動時にすぐ表示する [#v2a7fced]
以下の記述をすると起動時にデバッガが表示されるようになります。
#geshi(Actionscript){{
FlxG.debugger.visible = true;
}}
** ログへの出力 [#ac78e6ca]
#geshi(Actionscript){{
FlxG.log.add("trace log"); // 通常のログ
FlxG.log.warn("warning!"); // 警告ログ (デバッガをポップアップする)
FlxG.log.error("error!!!"); // エラーログ
}}
** Watchへの登録 [#ubef4813]
Watchウィンドウへの登録は以下のように記述します。
#geshi(Actionscript){{
class PlayState extends FlxState {
// タイマー
public var timer:Int = 0;
overrid public function create():Void {
FlxG.watch.add(this, "timer");
}
}}
第一引数がオブジェクトで、第二引数にそのオブジェクトのフィールドを指定します。
** コマンド [#ic74fe1c]
最初から用意されているコマンドには以下のものがあります。
|コマンド名|省略|説明|例|h
|help|h|コマンドのヘルプを表示します|help set|
|close|cl|デバッガを閉じます|close|
|clearHistory|ch|コマンド履歴を削除します|chearHistory|
|clearLog|clear|ログを消します|clearLog|
|resetState|rs|現在のStateをリセットします|resetState|
|switchState|ss|別のStateに遷移します|sw MenuState|
|resetGame|rg|ゲームをリスタートします|rg|
|create|cr|FlxObjectを生成し登録します|cr Player|
|set|s|登録したオブジェクトに値を設定します|s state.timer 100|
|call|c|登録したオブジェクトの関数を呼び出します|c state.trace message|
|fields|f|指定のクラスまたはインスタンスのフィールドをリスト表示します|f FlxG|
|listObjects|lo|登録したオブジェクトをリスト表示します|lo|
|listFunctions|lf|登録した関数をリスト表示します|lf|
|watchMouse|wm|マウス座標の情報をWatchに追加します|wm|
|track|t|指定のオブジェクトをトラッカーウィンドウに登録します|t FlxG.state|
|pause|p|一時停止、再開をトグルします|p|
|clearBitmapLog|cbl|Bitmapログの情報をクリアします|cbl|
|viewCache|vc|Bitmapのキャッシュログを表示します|vc|
** ボタンの配置 [#he1c9374]
デバッグ用のボタン配置をすることもできます
#geshi(Actionscript){{
/**
* 生成
**/
override public function create():Void {
var spr = new FlxSprite();
spr.makeGraphic(8, 8, FlxColor.HOT_PINK);
// hogeとログに表示するボタンを左側に配置
FlxG.debugger.addButton(ButtonAlignment.LEFT, spr.getFlxFrameBitmapData(), hoge);
spr = new FlxSprite();
spr.makeGraphic(8, 8, FlxColor.LIME);
// piyoとログに表示するボタンを中央に配置
FlxG.debugger.addButton(ButtonAlignment.MIDDLE, spr.getFlxFrameBitmapData(), piyo);
spr = new FlxSprite();
spr.makeGraphic(8, 8, FlxColor.AQUAMARINE);
// momoとログに表示するボタンを右側に配置
FlxG.debugger.addButton(ButtonAlignment.RIGHT, spr.getFlxFrameBitmapData(), momo);
}
// 以下、ボタンを押した時のコールバック関数を定義
public function hoge():Void {
FlxG.log.add("hoge");
}
public function piyo():Void {
FlxG.log.add("piyo");
}
public function momo():Void {
FlxG.log.add("momo");
}
}}
実行すると左側にピンク色のボタン、中央に緑色のボタン、右側に青色のボタンが配置され、それぞれをクリックすると、"hoge" / "piyo" / "momo" と出力されます。
#ref(button.png);
*** 注意点 [#iffd8f21]
なおゲームの途中でボタンを配置するときは、2重に配置しないようになんらかの対処が必要となります（間違って配置すると重複したボタンがどんどん増えていきます）。
1つの方法としては生成時にインスタンスを保持して、removeButton()で削除する方法です。
#geshi(Actionscript){{
class PlayState extends FlxState {
private var _dbgButton:FlxSystemButton;
/**
* 生成
**/
override public function create():Void {
super.create();
_dbgButton = FlxG.debugger.addButton(ButtonAlignment.MIDDLE, _player.getFlxFrameBitmapData(), FlxG.resetState);
}
/**
* 破棄
**/
override public function destroy():Void {
super.destroy();
// 破棄時にボタンも消しておく
FlxG.debugger.removeButton(_dbgButton);
}
}}
** コリジョンの表示 [#gb0bf2bc]
コリジョンを表示する機能もあります。
#geshi(Actionscript){{
// 当たり判定を表示する
FlxG.debugger.drawDebug = true;
}}
#ref(hit.png);
当たり判定が赤い線で表現されるようになりました。
なお、FlxObject.immovableをfalseにする(衝突しても反動で動かなくする)と、緑色の線で表示されるようになります
** コリジョンの表示とオブジェクトの操作 [#v3e70099]
v4.2.0から、デバッガからコリジョンの表示とオブジェクトの操作ができるようになりました。
#ref(objctrl1.png);
デバッガを表示したら、一時停止ボタンでゲームを停止します。
#ref(objctrl2.png);
次に、Toolsから＋をクリックして、動かしたいオブジェクトをクリックすると、コリジョンが赤色の枠で表示されます。
#ref(objctrl3.png);
最後に、Toolsの十字矢印をクリックすると、オブジェクトをドラッグ＆ドロップで自由に動かすことができます