enchant.jsのボタンを使う時のお決まりごと

はじめに

enchant.jsを子供が勉強中で、質問されたのですが、
すぐに答えを出せなくて、いろいろ見比べていくとボロボロ異なるところがあり、
さらに調べると、「ちゃんと書いてるやん」ってことでしたので、記録しておこうかと。

参考元

enchant.js pluginのui.enchant.js

利用サービス

code.9leap

問題

新規プロジェクトで作成したコード内にボタンオブジェクトを生成して、実行するとエラーが発生してました。
（ブラウザのコンソールに表示）

Uncaught ReferenceError: Button is not defined

原因

UI部品のクラスを定義したプラグインが追加されていなかったからです。
ということで、UI部品を搭載したJSファイルを読み込んでおく必要があり、
それと４つの画像素材が必要になります。

対策

簡単ではありますが、code.9leapを使った対処方法を書きます。

(1) index.htmlを選択して、次のコードをheadタグの中に入れる

　　　　　　<script src='/static/enchant.js-latest/plugins/ui.enchant.js'></script>

　ちなみに、code.9leapを使わない場合は、URL形式にしないといけないので、ご注意を。

    <script src='http://coderun.9leap.net/static/enchant.js-latest/plugins/ui.enchant.js'></script>

(2)[Add Resource]ボタンを押して、以下の４つの画像素材を追加する

• pad.png
• apad.png
• icon0.png
• font0.png

これでOKです。

この後、[main.js]にボタンを生成するコードを書くだけです。

enchant();
window.onload = function() {
    var game = new Game(320,320);
    game.onload = function() {
        var button = new Button("ボタン", "light");
        button.tag = "ボタン";
        button.width = 260;
        button.height = 30;
        button.moveTo(15,240);
        game.rootScene.addChild(button);
    }
    //ゲームの開始
    game.start();
}

実行した結果を画像で添付します。

なにかの足しになればと。