第3章
設計図：最初のプロジェクトの作成と理解
1 プロジェクト生成：flixel-toolsの活用
🚀 新規プロジェクトの作成
前章で環境構築が完了したので、実際にHaxeFlixelプロジェクトを作成してみましょう。flixel-toolsが提供する便利なコマンドを使用します。
1. プロジェクト作成コマンド
flixel tpl -n "MyFirstGame"※ "MyFirstGame"の部分は好きなプロジェクト名に変更できます
2. プロジェクトディレクトリに移動
cd MyFirstGame💡 flixel tplコマンドについて
flixel tplは「Flixel Template」の略で、HaxeFlixelプロジェクトのテンプレートを生成するコマンドです。-nオプションでプロジェクト名を指定できます。
2 プロジェクト構造の理解
📁 生成されたファイルとディレクトリ
プロジェクトが生成されると、以下のような構造のディレクトリが作成されます：
MyFirstGame/
├── .vscode/ # Visual Studio Code設定
│ ├── launch.json # デバッグ設定
│ ├── settings.json # プロジェクト固有設定
│ └── tasks.json # ビルドタスク設定
├── assets/ # ゲームアセット（画像、音声等）
│ ├── images/ # 画像ファイル
│ ├── music/ # BGM
│ └── sounds/ # 効果音
├── source/ # Haxeソースコード
│ ├── AssetPaths.hx # アセットパス定義
│ ├── Main.hx # メインクラス
│ └── PlayState.hx # ゲームの主要ロジック
├── Project.xml # プロジェクト設定ファイル
└── README.md # プロジェクト説明🎯 重要ファイル
- Main.hx - アプリケーションエントリーポイント
- PlayState.hx - ゲームの核となるステート
- Project.xml - ビルド設定とメタデータ
📂 主要ディレクトリ
- source/ - すべてのHaxeコード
- assets/ - ゲーム素材
- .vscode/ - 開発環境設定
3 核心ファイルの詳細解析
🔍 Main.hx - アプリケーションの起点
Main.hxは、HaxeFlixelアプリケーションのエントリーポイントです。ここでゲームの基本設定が行われます。
package;
import flixel.FlxGame;
import openfl.display.Sprite;
class Main extends Sprite
{
public function new()
{
super();
addChild(new FlxGame(0, 0, PlayState));
}
}📖 コード解説
extends Sprite- OpenFLのSpriteクラスを継承new FlxGame(0, 0, PlayState)- Flixelゲームインスタンス作成addChild()- ゲームをディスプレイリストに追加
🎮 PlayState.hx - ゲームロジックの中核
PlayState.hxは、実際のゲームロジックが実装される場所です。HaxeFlixelの「ステート」システムの核となります。
package;
import flixel.FlxState;
class PlayState extends FlxState
{
override public function create()
{
super.create();
}
override public function update(elapsed:Float)
{
super.update(elapsed);
}
}🔄 ステートライフサイクル
create()- ステート初期化時に1回だけ呼ばれるupdate(elapsed)- フレームごとに呼ばれるメインループelapsed- 前フレームからの経過時間（秒）
4 Project.xml - ビルド設定の要
⚙️ プロジェクト設定ファイルの理解
Project.xmlは、Limeプロジェクトのメタデータとビルド設定を定義するファイルです。ここでゲームのタイトル、バージョン、対象プラットフォームなどを設定します。
<project>
<meta title="MyFirstGame" package="com.example.mypackage" version="1.0.0" company="HaxeFlixel" />
<app main="Main" path="export" file="MyFirstGame" />
<source path="source" />
<assets path="assets" />
<haxelib name="flixel" />
<haxedef name="FLX_NO_MOUSE" if="mobile" />
<haxedef name="FLX_NO_KEYBOARD" if="mobile" />
<haxedef name="FLX_NO_TOUCH" if="desktop" />
</project>🏷️ メタデータ
- title - ゲームのタイトル
- package - パッケージ名
- version - バージョン番号
- company - 開発者/会社名
📂 パス設定
- source - Haxeソースコードディレクトリ
- assets - ゲームアセットディレクトリ
- export - ビルド出力先
⚠️ 重要な設定
haxedefタグは、特定の条件下でコンパイラに指示を与えます。例えば、モバイル版ではマウス入力を無効化し、デスクトップ版ではタッチ入力を無効化しています。
5 初回ビルドの実行
🔨 HTML5ターゲットでのビルド
プロジェクト構造を理解したところで、実際にビルドして動作確認をしてみましょう。最も簡単なHTML5ターゲットから始めます。
1. デバッグビルドの実行
lime build html5 -debugデバッグモードでは詳細なエラー情報が表示され、開発時に便利です
2. ブラウザでの確認
ビルドが完了したら、export/html5/bin/index.htmlをブラウザで開きます。
lime test html5 -debug
※ testコマンドはビルド後に自動でブラウザを開きます
🎉 成功時の表示
正常にビルドが完了すると、ブラウザに以下が表示されます：
- • 黒い背景のゲーム画面
- • 左上にHaxeFlixelのロゴ
- • フレームレート情報（デバッグモード時）
❌ エラーが発生した場合
「haxelib not found」 → ライブラリが未インストール
「Main class not found」 → Main.hxの配置確認
「Syntax error」 → コードの記述ミス
エラーメッセージを詳しく読んで、該当箇所を修正してください。