BUNCHO GAMES

第2章：ツールキットの組み立て

進捗:
2/4

第2章

ツールキットの組み立て：環境のインストールと設定

1 HaxeFlixelスタック：階層型アーキテクチャ

⚠️ 重要な概念

HaxeFlixelでの開発を始めるにあたり、単一のプログラムをインストールするのではなく、相互に依存する複数の技術からなる「スタック」を構築するという概念を理解することが不可欠です。

🏗️ 4層構造の理解

4
HaxeFlixel
スプライト、ステート、衝突判定といった、ゲーム開発に特化した高レベルなオブジェクトとロジックを提供するフレームワーク本体
3
OpenFL
Limeの上に構築され、FlashのディスプレイリストAPIを再現するライブラリ。元Flash開発者が馴染みのある方法で開発可能
2
Lime
ローレベルなマルチメディアライブラリ。C++で書かれており、各プラットフォームのネイティブAPIとのブリッジとして機能
1
Haxe
すべての基盤となるプログラミング言語。実際のコードを書くための言語仕様とコンパイラを提供

💡 重要な理解

上記のような階層構造になっているため、インストールは下層から順番に行う必要があります：

  1. Haxe → コア言語とコンパイラ
  2. Lime & OpenFL → 土台とFlash API
  3. HaxeFlixel → ゲーム開発フレームワーク

2 Haxeの導入：言語基盤の構築

🌐 公式サイトからのダウンロード

まず、Haxeの公式サイト（https://haxe.org/）からお使いのOSに対応したインストーラーをダウンロードします。

W
Windows

.msiファイルをダウンロードしてインストーラーを実行

M
macOS

.dmgファイルをダウンロードしてアプリケーションフォルダにコピー

L
Linux

パッケージマネージャーまたは.tar.gzからインストール

⚡ インストール確認

インストールが完了したら、コマンドライン（Windows: コマンドプロンプト、macOS/Linux: ターミナル）を開いて以下のコマンドを実行し、正しくインストールされているか確認します：

Terminal 
haxe --version

成功すると、次のような出力が表示されます： 

4.3.4

✅ バージョン番号が表示されれば、Haxeのインストールは成功です！

3 HaxeFlixelエコシステムの構築

📦 Haxelibについて

Haxelibは、Haxeのパッケージマネージャーです。npmやpipと同様に、ライブラリの管理を自動化します。Haxeをインストールすると自動的に利用可能になります。

🔧 必要なライブラリのインストール

以下のコマンドを順番に実行して、HaxeFlixel開発に必要なライブラリをインストールします：

1. Limeのインストール
Terminal 
haxelib install lime
2. OpenFLのインストール
Terminal 
haxelib install openfl
3. HaxeFlixelのインストール
Terminal 
haxelib install flixel
4. 開発ツールのインストール
Terminal 
haxelib install flixel-tools

🛠️ Flixel Toolsのセットアップ

flixel-toolsをインストールした後、以下のコマンドでセットアップを完了します：

Terminal 
haxelib run flixel-tools setup

✅ インストール完了の確認

以下のコマンドで正しくインストールされているか確認できます： 

haxelib list

lime、openfl、flixel、flixel-toolsが一覧に表示されれば成功です。

4 Visual Studio Code環境の最適化

📝 推奨エディタとその理由

HaxeFlixel開発ではVisual Studio Codeの使用を強く推奨します。充実したHaxe拡張機能により、コード補完、エラー検出、デバッグ機能が利用できます。

VS Codeのダウンロード

まだインストールしていない場合は、以下から無料でダウンロードできます：

Visual Studio Code公式サイト

🔌 必須拡張機能のインストール

1
Haxe Extension Pack

Haxe開発に必要な拡張機能がパックになったもの。シンタックスハイライト、コード補完、エラー検出などが含まれます。

拡張機能 → "Haxe Extension Pack" で検索 → インストール
2
Lime

Limeプロジェクトの設定ファイル（project.xml）のシンタックスハイライトと補完機能を提供。

拡張機能 → "Lime" で検索 → インストール

⚙️ 推奨設定の適用

以下の設定をVS Codeに適用することで、開発効率が向上します。Ctrl+,（Windows/Linux）またはCmd+,（macOS）で設定を開き、右上の「{}」アイコンからJSONエディタを開いて追加してください：

settings.json 
{
  "haxe.enableCodeLens": true,
  "haxe.enableDiagnostics": true,
  "haxe.enableServerView": true,
  "haxe.enableMethodsView": true
}

🎯 設定効果

  • CodeLens: 関数やクラスの参照箇所を表示
  • Diagnostics: リアルタイムエラー検出
  • ServerView: Haxe言語サーバーの状態表示
  • MethodsView: クラスのメソッド一覧表示

5 環境の動作確認

🧪 テストプロジェクトの作成

環境が正しくセットアップされているか確認するため、簡単なテストプロジェクトを作成しましょう。

1. プロジェクトディレクトリの作成
Terminal 
mkdir haxeflixel_test
cd haxeflixel_test
2. Flixelプロジェクトテンプレートの生成
Terminal 
flixel tpl -n "TestGame"
3. HTMLターゲットでのビルド実行
Terminal 
lime build html5

🎉 成功の確認

エラーなくビルドが完了し、export/html5/binフォルダにindex.htmlが生成されれば、環境構築は成功です！ブラウザでindex.htmlを開いて、HaxeFlixelのロゴが表示されることを確認してください。

❌ エラーが発生した場合

コマンドが見つからない → Haxeのインストールを再確認

ライブラリが見つからない → haxelib installコマンドを再実行

コンパイルエラー → VS Codeの拡張機能を確認

詳細なエラーメッセージを確認して、該当する問題を解決してください。

前の章: Flashの灰の中から 次の章: 設計図