皆さんこんにちは！虎の穴ラボのmisonoです。

この記事は虎の穴ラボ Advent Calendar 2024の23日目の記事です。

皆さんはアプリケーションを作成する時にどんな言語やプラットフォームを使いますか？
人によって様々だと思いますが、目的のアプリケーションをPCでもスマホでも、あるいはゲーム機でも動作させたいなどと思う時があるかもしれません。
そんな時に選択肢として有力な「Haxe」。聞いたことのない人は多いと思います。今回は、そのHaxeについて少し紹介してみたいと思います。

Haxeとは

haxe.org

Haxeは静的型付けのオブジェクト指向なプログラミング言語、そしてそのコンパイラ自体を指します。
公式サイトに「Haxe is useful in wide variety of domains;」とあるように、Haxeはあらゆる環境で動作することを目指しており、
OSを選ばずPC上で動作することはもちろんの事、Switchなどのゲーム機やモバイル環境での動作も対象となっています。
（Haxeではこれらの動作するプラットフォームのことを「ターゲット」と呼びます）
また、Haxeのコンパイラは全てオープンソースです。

試してみる

何はともあれ試してみましょう！公式サイトのダウンロードページに行くと、各OSに対応したインストーラーやバイナリがリンクされています。
各自にあった環境のものを使いましょう。
手っ取り早く試したい場合はOSにあったインストーラーを使うのがオススメです。
ターミナルなどから、

haxe

と試して、コンパイラのバージョンが確認できればスタートできます！

最初にHello Worldをやってみます。
Haxeでは拡張子 hx のファイルを使います。Hello World.hx 等として適当なフォルダに入れましょう。
コードは以下のような感じです。ActionScriptやJavaなどの構文に似ていますね。

class HelloWorld {
    static public function main() {
        trace("Hello World");
    }
}

保存が出来たら、まずはインタプリタモードで動かしてみましょう。　Haxeは一般的なスクリプト言語のように、インタプリタでの起動も兼ね備えています。

haxe —main HelloWorld —interp

HelloWorld.hx:3: Hello World

などと表示されれば成功です！
次にjsを吐き出すようにしてみましょう。

haxe —main HelloWorld —js HelloWorld.js

同階層に HelloWorld.js が作成されていれば成功です。
中身を見てみると、 console.log でHello Worldを出力するようなコードが生成されていると思います。

インタプリタモードではコンパイル時に interp オプションを使いました。
そしてJavaScriptを作成する時は js オプションを使います。
Haxeではこのようにターゲットを切り替えてコンパイル（もしくはトランスパイル）します。
コンパイルできるターゲットは、公式ページに記述があります。

もう少し踏み込んで遊んでみる

ターミナルで動くだけのものを作っても面白くないので、もう少し遊んでみましょう。
VSCodeを使っている環境下では、簡単にHaxeのライブラリを扱うことが出来ます。
まずは、以下のように、 Haxe と Haxe Extension Pack の２つを入れます。

HEAPS.ioというゲームエンジンを使ってみましょう。これはゲームプログラミング等で使えるグラフィカルなAPIを提供しているHaxe用のライブラリです。公式ガイドに従って、ターミナルからhaxelib installを使ってライブラリをインストールします。

haxelib install heaps

公式ガイドに従って、下記のような構成のフォルダを作ります。

.
├── .vscode/
│   └── launch.json
├── res/
├── src/
│   └── Main.hx
└── compile.hxml

まずはプロジェクト用に適当なフォルダを作り、その下に compile.hxmlを作成します。
内容は、公式のものをそのまま持ってきました。

-cp src
-lib heaps
-js hello.js
-main Main
-debug

ここで、 js オプションを使ってsrc配下のHaxeコードのコンパイルの成果物がjsになるよう指示をしています。

そして、src配下に、 Main.hx を作ってあげます。

class Main extends hxd.App {
    override function init() {
        var tf = new h2d.Text(hxd.res.DefaultFont.get(), s2d);
        tf.text = "Hello World !";
    }
    static function main() {
        new Main();
    }
}

.vscode 配下に launch.json を作成します。ここでは、VSCodeで簡単にHaxeをビルドし動作確認するための設定を行います。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "file://${workspaceFolder}/index.html",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": {
                "type" : "haxe",
                "args" : "active configuration"
            }
        }
    ]
}

そして、直下にビルドされたjsを表示する index.html を作ってあげましょう。

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Hello Heaps</title>
    <style>
        body { margin:0;padding:0;background-color:black; }
        canvas#webgl { width:100%;height:100%; }
    </style>
</head>
<body>
    <canvas id="webgl"></canvas>
    <script type="text/javascript" src="hello.js"></script>
</body>
</html>

最後にF5キーを押して、何事もなくブラウザが起動すれば成功です！！

公式のサンプルでは四角を描画して動かすコードも用意されています。
Main.hx を以下のように変更してあげましょう。

class Main extends hxd.App {
    var bmp : h2d.Bitmap;
    override function init() {
        var tf = new h2d.Text(hxd.res.DefaultFont.get(), s2d);
        tf.text = "Hello World !";

        // 赤い四角を用意
        var tile = h2d.Tile.fromColor(0xFF0000, 100, 100);
        // 描画用に2次元のBitmapオブジェクトを用意し、赤い四角を紐づけ
        bmp = new h2d.Bitmap(tile, s2d);
        bmp.x = s2d.width * 0.5;
        bmp.y = s2d.height * 0.5;
    }
    // 描画毎に呼び出される関数
    override function update(dt:Float) {
        // 四角を回転していく
        bmp.rotation += 0.1;
    }
    static function main() {
        new Main();
    }
}

F5で動作確認をしてみると、高速で回転する赤い四角が現れました！

HEAPS.ioを使うことによって楽にグラフィカルなゲームを作ることが出来ます。もちろん、ターゲットとして今回やったブラウザや、ゲーム機、スマホなどターゲットは多岐にわたります。

まとめ

日本語の記事が少ないことから、Haxeはまだまだ日本では浸透していないようにmisonoは感じています。
しかし公式コミュニティでは開発が盛んでHEAPS.ioをはじめとする様々なライブラリが提供されています。公式ページの Use Cases からはそれぞれのターゲットに応じた作品が提示されており、Haxeのポテンシャルを知ることが出来ます。
また、ポケットモンスターソード/シールドにもHaxeのライセンス表記があり、話題になりました。

公式ページのLearn Haxeには、詳しいHaxeのプログラミング仕様が解説されています。
また、Haxe Code Cookbookにはたくさんのスニペットが載っており、実用に応じたリファレンスとして活用することも出来ます。

マルチプラットフォームなアプリケーションを作る際の選択肢として、ぜひHaxeを触ってみてはいかがでしょうか。