BUNCHO GAMES

第4章：生命を吹き込む

進捗:
4/4

第4章

生命を吹き込む：テキストとスプライトの表示

1 ディスプレイリスト：HaxeFlixelの描画の仕組み

🎨 重要な概念：ディスプレイリスト

具体的なコーディングに入る前に、HaxeFlixelがどのようにオブジェクトを描画するのか、その基本的な概念を理解しておく必要があります。

FlxState = コンテナ

FlxStateは、描画されるオブジェクトのコンテナ（入れ物）として機能します。ゲームの各画面（タイトル、プレイ、ゲームオーバーなど）を管理します。

add() = 生命を吹き込む

スプライトやテキストは、生成されただけでは画面に表示されません。add()メソッドでディスプレイリストに追加することで、初めて描画されます。

💡 描画フロー

1. オブジェクト生成 → 2. 設定・配置 → 3. add()で追加 → 4. 画面に表示

2 「Hello, World!」：FlxTextによるテキスト表示

最初のオブジェクトとして、テキストを画面に表示してみましょう。source/PlayState.hxファイルを編集します。

1 クラスのインポート

FlxTextクラスを使用するために、ファイルの先頭（package;の直後）にimport文を追加します：

import flixel.text.FlxText;

2 オブジェクトの生成と設定

create()メソッドの内部（super.create();の後）に、テキストオブジェクトを生成し、設定するコードを記述します：

override public function create():Void
{
super.create();
// FlxTextオブジェクトを生成
// 引数: X座標, Y座標, 表示領域の幅, 表示する文字列, フォントサイズ
var helloText:FlxText = new FlxText(0, 0, FlxG.width, "Hello, HaxeFlixel!", 16);
// テキストの水平方向の配置を中央揃えに設定
helloText.alignment = CENTER;
// テキストオブジェクト自体を画面の水平中央に配置
helloText.screenCenter(X);
// ディスプレイリストに追加し、描画対象にする
add(helloText);
}
🔍 FlxTextコンストラクタ引数の説明
X座標 (0): テキストの左端のX位置
Y座標 (0): テキストの上端のY位置
幅 (FlxG.width): テキスト表示領域の幅。ゲームウィンドウ全体の幅に設定
文字列: 実際に表示するテキスト
フォントサイズ (16): テキストのサイズ（ピクセル単位）

3 最初のキャラクター：FlxSpriteによるスプライト表示

次に、外部の画像ファイルを読み込んで、スプライトとして表示します。これにはアセットの準備、プロジェクトファイルへの登録、そしてコードの記述という3つのステップが必要です。

1 アセットの準備

表示したいキャラクターの画像を用意します：

  1. 任意のペイントソフトで、16x16ピクセルの簡単なキャラクターを描く
  2. character.pngという名前で保存
  3. プロジェクトフォルダ内にassets/images/ディレクトリを作成
  4. character.pngをその中に配置
📁 ディレクトリ構造
MyFirstGame/
├── assets/
└── images/
└── character.png
├── source/
└── Project.xml

2 アセットパスの登録

エンジンに新しいアセットの場所を教えるため、Project.xmlファイルを編集します。<project>タグの内部に、以下の行を追加：

<assets path="assets/images" rename="images" />

⚠️ 重要： このステップを忘れると、コードから画像を読み込むことができません。

3 PlayState.hxでのコード記述

PlayState.hxを再度編集し、スプライトを読み込んで表示するコードを追加します：

// FlxSpriteクラスをインポート
import flixel.FlxSprite;
//... create()メソッドの内部、テキスト表示コードの後に追加...
// 新しいFlxSpriteオブジェクトを生成
var playerSprite:FlxSprite = new FlxSprite();
// Project.xmlで登録したパスからグラフィックを読み込み
playerSprite.loadGraphic("assets/images/character.png");
// スプライトを画面の中央に配置
playerSprite.screenCenter();
// ディスプレイリストに追加し、描画対象にする
add(playerSprite);
🎨 FlxSpriteの基本的な使い方
new FlxSprite(): 空のスプライトオブジェクトを生成
loadGraphic(): 外部画像ファイルを読み込んでスプライトに適用
screenCenter(): スプライトを画面中央に配置
add(): ディスプレイリストに追加して表示対象にする

4 完成したPlayState.hxとゲームの実行

📝 完成したコード

package;
import flixel.FlxState;
import flixel.text.FlxText;
import flixel.FlxG;
import flixel.FlxSprite;
class PlayState extends FlxState
{
override public function create():Void
{
super.create();
// --- テキストの表示 ---
var helloText:FlxText = new FlxText(0, 0, FlxG.width, "Hello, HaxeFlixel!", 16);
helloText.alignment = CENTER;
helloText.screenCenter(X);
add(helloText);
// --- スプライトの表示 ---
var playerSprite:FlxSprite = new FlxSprite();
playerSprite.loadGraphic("assets/images/character.png");
playerSprite.screenCenter();
add(playerSprite);
}
override public function update(elapsed:Float):Void
{
super.update(elapsed);
}
}

🚀 ゲームの実行

📱 VSCodeから実行
Ctrl+Shift+B (macOSでは Cmd+Shift+B)
ビルドタスクが実行され、デフォルトのターゲット（通常はHTML5）でコンパイル
ブラウザで自動的に開きます
⌨️ コマンドラインから実行
プロジェクトのルートディレクトリに移動
lime test html5
コマンドを入力して実行
期待される結果

成功すれば、以下が表示されたウィンドウが現れるはずです：

  • 中央に「Hello, HaxeFlixel!」というテキスト
  • その下にキャラクターのスプライト
  • 640x480ピクセルのゲームウィンドウ

第4章のまとめ

これは、HaxeFlixel開発における最初の、しかし最も重要な一歩です。アセットの配置から、プロジェクトの設定、そしてコードによる制御という一連の流れを体験することで、今後のより複雑なゲーム開発に向けた強固な基礎が築かれます。

🎯 学んだこと

✅ ディスプレイリストの概念
✅ FlxTextによるテキスト表示
✅ FlxSpriteによる画像表示
✅ アセット管理の基本
✅ create()メソッドの使い方
✅ add()による描画制御
🎉

おめでとうございます！

HaxeFlixelでの最初のゲーム作成を完了しました。
これで、クロスプラットフォーム2Dゲーム開発の基礎を習得できました。

次のステップ

  • • プレイヤーの入力処理
  • • アニメーション
  • • 衝突判定
  • • サウンド実装

発展課題

  • • 複数のスプライト表示
  • • テキストカラーの変更
  • • 異なるターゲット出力
  • • カスタムフォント使用
第3章に戻る 目次に戻る