enchant.hxを使ったHTML5ゲームアプリ開発のススメ

最近はめっきり涼しくなりましたね。
そろそろ年の瀬が見えてきた今日この頃、皆様いかがお過ごしでしょうか？
pon_zuです。

更新サボってスミマセン。

さて、今回は最近使っているenchant.js+Haxeを使ったゲーム開発のお話をしたいと思います。

enchant.js+Haxeでどうやってゲーム作るの？

この辺りはgaya_K君が記事にされているので、さらっとまとめます。
最近のBrave Workzでは、以下の組み合わせでゲームを作成しています。

• enchant.js本体
• Haxe本体
• FlashDevelop
• enchant.hx

ゲーム開発のフレームワークとしてenchant.jsを採用しつつ、
開発言語にHaxeを使うことで、javascript特有の癖を気にせず開発することができます。
Haxeは最近流行りのaltJSの一つですが、特にJavaやActionScriptに馴染みのある人に馴染みやすい構文だと思います。
「Haxeって何？という方はこちらのスライドをご覧ください。

FlashDevelopは優秀なコード補完の機能があり、WindowsでHaxe開発する際は定番のエディタです。
プラグインなしでHaxeに対応しており、日本語にも対応しています。

以前、gaya_K君がこちらの記事で紹介していたenchant.hx を使用します。
gaya_K君の頑張りにより、以前よりもバージョンアップされています！

基本的なゲームループについて

実はenchant.hxを使ったゲーム開発まだまだ模索段階です。
将来的には独自にHaxeクラスを追加して行きたいところですが……。
とはいえ、現段階でも十分実用可能なライブラリになっています。

今回はenchant.hxを利用したゲームループの基本構文をご紹介します。

view plainprint?

1. package ;  
2.   
3. import js.Lib;  
4. import enchant.*;  
5. import enchant.nineleap.*;  
6. import enchantHaxe.*;  
7. import enchantHaxe.nineleap.*;  
8. using enchantHaxe.HxConverter;  
9.   
10. // アンチエイリアス対策  
11. import SpriteEx;  
12.   
13. /** 
14.  * enchant.hxサンプル 
15.  * @author pon_zu 
16.  */  
17.   
18. class Main  
19. {  
20.     static function main()  
21.     {  
22.         // JavaScript の enchant(); に相当  
23.         EnchantHx.exportAll();  
24.   
25.         var game = new enchant.nineleap.Core(320,320).toNineleapCoreHx();  
26.         game.fps = 15;  
27.         game.preload(["chara1.png", "icon0.png"]);  
28.   
29.         game.onload = function ():Void  
30.         {  
31.             // スタート画面  
32.             var splashScene = new SplashScene().toSplashSceneHx();  
33.             game.pushScene(splashScene);  
34.   
35.             // クマのスプライトを生成  
36.             var sprite = new SpriteEx(32, 32).toSpriteHx();  
37.             sprite.image = game.assets.get("chara1.png");  
38.             sprite.x = 160;  
39.             sprite.y = 160;  
40.   
41.             // クマのアニメーションを設定  
42.             sprite.setFrames([1, 0, 2, 0]);  
43.   
44.             // クマにtweenアニメーションを追加できたりもします  
45.             sprite.tl.fadeOut(10).fadeIn(10).loop();  
46.   
47.             // メインシーンを作成  
48.             var scene = new Scene().toSceneHx();  
49.             scene.backgroundColor = "#eeeeeeee";  
50.   
51.             // メインシーンにスプライトを配置  
52.             scene.addChild(sprite);  
53.   
54.             // メインシーンにイベントを追加  
55.             scene.addEventListener(  
56.                 EventType.TOUCH_START,  
57.                 function (e):Void  
58.                 {  
59.                     sprite.x = e.x;  
60.                     sprite.y = e.y;  
61.                 }  
62.             );  
63.   
64.             // メインシーンを最前面に移動  
65.             game.pushScene(scene);  
66.         }  
67.   
68.         // ゲーム開始  
69.         game.start();  
70.     }  
71. }  

package ;

import js.Lib;
import enchant.*;
import enchant.nineleap.*;
import enchantHaxe.*;
import enchantHaxe.nineleap.*;
using enchantHaxe.HxConverter;

// アンチエイリアス対策
import SpriteEx;

/**
 * enchant.hxサンプル
 * @author pon_zu
 */

class Main
{
    static function main()
    {
        // JavaScript の enchant(); に相当
        EnchantHx.exportAll();

        var game = new enchant.nineleap.Core(320,320).toNineleapCoreHx();
        game.fps = 15;
        game.preload(["chara1.png", "icon0.png"]);

        game.onload = function ():Void
        {
            // スタート画面
            var splashScene = new SplashScene().toSplashSceneHx();
            game.pushScene(splashScene);

            // クマのスプライトを生成
            var sprite = new SpriteEx(32, 32).toSpriteHx();
            sprite.image = game.assets.get("chara1.png");
            sprite.x = 160;
            sprite.y = 160;

            // クマのアニメーションを設定
            sprite.setFrames([1, 0, 2, 0]);

            // クマにtweenアニメーションを追加できたりもします
            sprite.tl.fadeOut(10).fadeIn(10).loop();

            // メインシーンを作成
            var scene = new Scene().toSceneHx();
            scene.backgroundColor = "#eeeeeeee";

            // メインシーンにスプライトを配置
            scene.addChild(sprite);

            // メインシーンにイベントを追加
            scene.addEventListener(
                EventType.TOUCH_START,
                function (e):Void
                {
                    sprite.x = e.x;
                    sprite.y = e.y;
                }
            );

            // メインシーンを最前面に移動
            game.pushScene(scene);
        }

        // ゲーム開始
        game.start();
    }
}

enchant.js使ったことある方ならば、コメント読まずともクラスやメソッドの名前でなんとなく何やってるか分かりますね。
enchant.hxはgaya_K君により、enchant.jsユーザに取っ付きやすいライブラリになっています。
それでも、少し見慣れない構文があります。

view plainprint?

1. // スタート画面  
2.             var splashScene = new SplashScene().toSplashSceneHx();  

// スタート画面
            var splashScene = new SplashScene().toSplashSceneHx();

何でしょう？SplashSceneを生成した後にtoSplashSceneHx()を実行したものをsplashSceneに突っ込んでいます。
が、実はSplashSceneクラスはHaxeのexternクラスであり、toSplashSceneHxメソッドは実装されていません。

「externクラスって何？」って方は、こちらのページを読んでみてください。
（簡単に言うと、Haxeが外部ライブラリに対して静的型付けを行うために必要になるクラスですね！）

じゃあ、toSplashSceneHxメソッドはどこに？
gaya_K君はどんな魔法を使ったの！？
タネはコード先頭にありました。

view plainprint?

1. import js.Lib;  
2. import enchant.*;  
3. import enchant.nineleap.*;  
4. import enchantHaxe.*;  
5. import enchantHaxe.nineleap.*;  
6. using enchantHaxe.HxConverter;  

import js.Lib;
import enchant.*;
import enchant.nineleap.*;
import enchantHaxe.*;
import enchantHaxe.nineleap.*;
using enchantHaxe.HxConverter;

各ライブラリを使用するためのimport文に続いて、謎のusing文があります。
実はHaxeのusing文を使うことで、enchantHaxe.HxConverterクラスのtoSplashSceneHx()メソッドを
SplashSceneクラスのメソッドのように記述できるんですね！Haxeすごい！

「Haxeのusing文もっと知りたい！」って方はこちらのページを読んでみてください。

もう一点、import文の中に変な記述がありますね。

view plainprint?

1. // アンチエイリアス対策  
2. import SpriteEx;  

// アンチエイリアス対策
import SpriteEx;

クマのスプライト生成でSpriteExクラスを使用してます。

view plainprint?

1. // クマのスプライトを生成  
2.             var sprite = new SpriteEx(32, 32).toSpriteHx();  

// クマのスプライトを生成
            var sprite = new SpriteEx(32, 32).toSpriteHx();

SpriteExクラスは、Spriteクラスを拡張したクラスで、中身はこれだけ。

view plainprint?

1. package ;  
2.   
3. import enchant.*;  
4. import js.Browser.document;  
5. import js.html.Element;  
6.   
7. /** 
8.  * Spriteの拡張クラス 
9.  *　とりあえずアンチエイリアス対策を実装 
10.  * 
11.  * @author pon_zu 
12.  */  
13. class SpriteEx extends Sprite{  
14.   
15.     private var _element:Element;  
16.   
17.     /** 
18.      * コンストラクタ 
19.      */  
20.     public function new(width:Int, height:Int) {  
21.         super(width, height);  
22.         this._element = document.createElement("div");  
23.     }  
24.   
25. }  

package ;

import enchant.*;
import js.Browser.document;
import js.html.Element;

/**
 * Spriteの拡張クラス
 *　とりあえずアンチエイリアス対策を実装
 *
 * @author pon_zu
 */
class SpriteEx extends Sprite{

    private var _element:Element;

    /**
     * コンストラクタ
     */
    public function new(width:Int, height:Int) {
        super(width, height);
        this._element = document.createElement("div");
    }

}

Spriteクラスにdiv要素を追加してます。
enchant.jsを使用されている人ならわかってくれると思うんですが、canvasでスプライトを生成して、拡大縮小やフェードイン・フェードアウトを行うと、Google Chromeで表示した時ドット絵にアンチエイリアスがかかるんですよね。
その対策として、スプライトにDOM要素を追加してenchant.jsのDOMのLayerに表示してもらっています。
独自に生み出した苦肉の策なので、他に良い解決策を知ってる方がいましたら、教えてください！

今日のまとめ

Haxeはコンパイルの環境を作る必要があるので、
enchant.hxを初めて使う場合は、最初はenchant.hx付属のサンプルプロジェクトをいじってみることをおすすめします。

今回の記事はenchant.hxの触りだけのご説明でしたが、
また別の機会に開発者であるgaya_K君が細かな解説をしてくれると思います。

Haxeすごい！enchant.hxすごい！みんな使ってね！