enchant.js 用プラグイン DummySprite を作ってみた. ゲーム制作途中の表示確認なんかにぜひ!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

enchant.js で簡単にオブジェクトの表示確認ができる Sprite 『DummySprite』 を作りました.

普通の Sprite クラスとの違いは, デフォルトで四角形が表示されます. 本チャン画像がないけど作り出したいってときや, 簡単な動作確認をしたいって時などにご使用下さい.

Sample And Data

今回制作したプラグインのテストプログラムはこちらです.

ちょっとしたコードで表示確認ができます.

Download はこちら.

Code

今回のテストプログラムのコードです.

50 行程度でオブジェクトを表示してタッチで移動なんてことができちゃいます.(まぁそれはプラグインのおかげじゃなくて enchant.js が良くできているからなんですけどねw)

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
        </style>
        <script charset="UTF-8" src="enchant.js"></script>
        <script charset="UTF-8" src="dummysprite.enchant.js"></script>
        <script charset="UTF-8">
            
            enchant();
            
            window.onload = function() {
                var game = new Game(320, 320);
                
                game.onload = function() {
                    this.rootScene.backgroundColor = "black";
                    // ダミースプライト生成
                    var dummySprite = new DummySprite(20, 20, "red");
                    dummySprite.moveTo(160-10, 160-10);
                    this.rootScene.addChild(dummySprite);
                    
                    // タッチした位置に移動
                    var onTouch = function(e) {
                        dummySprite.x = e.localX;
                        dummySprite.y = e.localY;
                    };
                    this.rootScene.addEventListener("touchstart", onTouch);
                    this.rootScene.addEventListener("touchmove", onTouch);
                    this.rootScene.addEventListener("touchend", onTouch);
                };
                game.start();
            };
            
        </script>
    </head>
    <body>
        <h1>Dummy Sprite</h1>
        <p>
            Dummy Sprite を使ってテストプログラムです.
        </p>
    </body>
</html>

Usage

使い方は普通の sprite との違いはコンストラクタに色を指定できるようになっている点ぐらいであとはほとんど同じです.

var dummySprite = new DummySprite(幅, 高さ, 色);

ちょっと今日からいくつか enchant.js についてのエントリーを連投しようと思ってます. このプラグインもちょくちょく使っていくのでヨロシク♪

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT