第4章
生命を吹き込む：テキストとスプライトの表示
1 FlxText：文字を画面に表示する
📝 テキスト表示の基本
ゲーム開発の第一歩として、画面にテキストを表示してみましょう。HaxeFlixelではFlxTextクラスを使用してテキストを描画できます。
💡 PlayState.hxの編集
前章で作成したプロジェクトのsource/PlayState.hxを編集して、テキストを表示してみましょう。
package;
import flixel.FlxState;
import flixel.text.FlxText;
import flixel.util.FlxColor;
class PlayState extends FlxState
{
override public function create()
{
super.create();
// テキストオブジェクトの作成
var helloText = new FlxText(0, 0, 0, "Hello, HaxeFlixel!");
helloText.size = 32;
helloText.color = FlxColor.WHITE;
helloText.screenCenter();
// テキストをステートに追加
add(helloText);
}
override public function update(elapsed:Float)
{
super.update(elapsed);
}
}📖 コード解説
new FlxText(0, 0, 0, "文字列")- X座標、Y座標、幅、テキスト内容を指定size = 32- フォントサイズを32ピクセルに設定color = FlxColor.WHITE- テキスト色を白に設定screenCenter()- 画面中央に配置add()- オブジェクトをステートに追加して表示
🎨 テキストのカスタマイズ
FlxTextは様々なプロパティでカスタマイズできます：
📏 位置とサイズ
x, y- 座標width, height- サイズsize- フォントサイズscale- 拡大縮小
🎨 外観
color- 文字色font- フォントalignment- 揃えalpha- 透明度
2 FlxSprite：画像とアニメーション
🖼️ スプライトの基本概念
FlxSpriteは、HaxeFlixelの最も重要なクラスの一つです。画像の表示、アニメーション、当たり判定など、ゲームオブジェクトの基盤となります。
📁 アセットの準備
まず、表示用の画像を用意しましょう。プロジェクトのassets/images/フォルダに画像ファイル（例：player.png）を配置してください。
※ テスト用に小さな画像（32x32ピクセル程度）を用意することをお勧めします。
🎯 基本的なスプライト表示
PlayState.hxにスプライト表示のコードを追加してみましょう：
package;
import flixel.FlxSprite;
import flixel.FlxState;
import flixel.text.FlxText;
import flixel.util.FlxColor;
class PlayState extends FlxState
{
override public function create()
{
super.create();
// 背景色を設定
bgColor = FlxColor.CYAN;
// テキスト表示
var titleText = new FlxText(0, 50, 0, "My First HaxeFlixel Game");
titleText.size = 24;
titleText.color = FlxColor.BLACK;
titleText.screenCenter(X);
add(titleText);
// スプライト表示
var player = new FlxSprite(100, 200);
player.makeGraphic(32, 32, FlxColor.RED);
add(player);
// 画像ファイルを使用する場合
// var player = new FlxSprite(100, 200, "assets/images/player.png");
// add(player);
}
override public function update(elapsed:Float)
{
super.update(elapsed);
}
}📖 新しいコード解説
bgColor = FlxColor.CYAN- ステートの背景色を水色に設定screenCenter(X)- 水平方向のみ中央揃えmakeGraphic(32, 32, FlxColor.RED)- 32x32の赤い矩形を作成new FlxSprite(100, 200, "path")- 画像ファイルから作成
🎬 スプライトの動きを追加
静的な表示だけでなく、スプライトに動きを加えてみましょう：
package;
import flixel.FlxSprite;
import flixel.FlxState;
import flixel.text.FlxText;
import flixel.util.FlxColor;
class PlayState extends FlxState
{
var player:FlxSprite;
override public function create()
{
super.create();
bgColor = FlxColor.CYAN;
// タイトルテキスト
var titleText = new FlxText(0, 50, 0, "Use Arrow Keys to Move!");
titleText.size = 20;
titleText.color = FlxColor.BLACK;
titleText.screenCenter(X);
add(titleText);
// プレイヤースプライト
player = new FlxSprite(200, 200);
player.makeGraphic(32, 32, FlxColor.RED);
add(player);
}
override public function update(elapsed:Float)
{
super.update(elapsed);
// キーボード入力による移動
var speed = 200; // ピクセル/秒
if (FlxG.keys.pressed.LEFT)
player.x -= speed * elapsed;
if (FlxG.keys.pressed.RIGHT)
player.x += speed * elapsed;
if (FlxG.keys.pressed.UP)
player.y -= speed * elapsed;
if (FlxG.keys.pressed.DOWN)
player.y += speed * elapsed;
}
}🎮 動き制御の解説
var player:FlxSprite;- クラス変数として宣言（複数メソッドで参照可能）FlxG.keys.pressed.LEFT- 左矢印キーが押されている間truespeed * elapsed- フレームレート無依存の移動量計算elapsed- 前フレームからの経過時間（秒）
3 実際のゲーム実行
🔨 ビルドと実行
コードの準備ができたので、実際にゲームをビルドして動作確認をしましょう。複数のターゲットでテストして、マルチプラットフォーム開発の威力を実感してください。
1. HTML5でのテスト（推奨）
lime test html5 -debugブラウザが自動で開き、すぐに動作確認できます
2. デスクトップ版でのテスト
lime test windows -debug
# または
lime test mac -debug
# または
lime test linux -debugネイティブアプリとして実行され、より高いパフォーマンスが期待できます
🎉 成功時の動作
正常に動作すると、以下のような画面が表示されます：
- • 水色の背景
- • 上部に「Use Arrow Keys to Move!」というテキスト
- • 赤い32x32の四角形（プレイヤー）
- • 矢印キーで四角形が滑らかに移動
🐛 デバッグとトラブルシューティング
❌ よくあるエラー
「FlxG is not defined」
→ import flixel.FlxG;が必要
「Syntax error in PlayState.hx」
→ セミコロンやブラケットの記述ミス
「Asset not found」
→ 画像ファイルのパスが間違っている
🔍 デバッグのコツ
- •
-debugフラグを必ず使用する - • VS Codeの問題パネルでエラーを確認
- •
trace("デバッグメッセージ")でログ出力 - • ブラウザの開発者ツールでコンソールを確認
4 次のステップへの準備
🎯 学習の成果
この章を通じて、HaxeFlixelの基礎を身につけることができました：
✅ 習得したスキル
- • FlxTextによるテキスト表示
- • FlxSpriteによる画像表示
- • キーボード入力の処理
- • ゲームループの理解
- • マルチプラットフォームビルド
🔑 重要な概念
- • ステートベースの構造
- • フレームレート無依存の処理
- • オブジェクト指向設計
- • アセット管理
- • デバッグとテスト
🚀 さらなる学習への道筋
基礎を固めたところで、より高度な機能に挑戦できます：
アニメーションとエフェクト
スプライトシート、トゥイーン、パーティクルシステムを学んで、よりリッチな表現を実現
当たり判定とゲームロジック
衝突検出、ゲームルール、スコアシステムなど、実際のゲームに必要な仕組みを構築
音声とUI
BGM、効果音、メニューシステム、HUDなど、完成度の高いゲーム体験を創造