enchant.js: プラグイン ArcSprite を制作

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

Pocket

enchant.js 用プラグインとして ArcSprite プラグインを作ったので公開します.

enchant.js 内の Sprite クラスを継承し, デフォルトで円弧を表示するクラスです. サンプルプログラムを作るときなんかに便利かと思いプログインにしてみました.

SAMPLE and DATA

サンプルはこちらで見られます.

データはここでダウンロードできます.

How to use

プラグインの読み込み

enchant.js と一緒に arcsprite.tm.enchant.js も読み込んでください.

<script type="text/javascript" src="arcsprite.tm.enchant.js"></script>
    

生成方法

ArcSprite クラスは引数にradius(半径)color(色)を取ります. radius は Number 型です. color は文字列ではなく r, g, b 値をもつオブジェクト型である点に注意してください.

var arc_sprite = new ArcSprite(16, { r:255, g:0, b:0 });
    

生成後の使い方はほとんど Sprite クラスと同じです. 違いは, デフォルトで円弧が表示されることと, メンバ関数に, ランダムな方向への向きベクトルを設定するsetRandomDirection()関数と, 画面からはみ出た際に位置と向きベクトルを調整する adjustPosition()関数がある点です. この2つの関数は確認用なので無理に使う必要はありません.

<!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">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <title>enchant.js : ArcSprite プラグインのサンプル</title>
        <script type="text/javascript" src="enchant.js"></script>
        <!-- ここでプラグイン読み込み -->
        <script type="text/javascript" src="arcsprite.tm.enchant.js"></script>
        <script type="text/javascript">
            // enchant 初期化(global 領域に enchant と enchant.tm を追加)
            enchant("tm");
            
            /**
             * ロード
             */
            window.onload = function()
            {
                // ゲームクラスを生成
                var game = new Game(320, 320);
                
                // ゲーム開始時の処理
                game.onload = function(){
                    // 円弧スプライトを表示
                    for (var i=0; i<32; ++i) {
                        var radius = Math.random()*16 + 8;
                        var color = {
                            r: Math.floor(Math.random()*255),
                            g: Math.floor(Math.random()*255),
                            b: Math.floor(Math.random()*255)
                        };
                        // ArcSprite を生成
                        var arc_sprite = new ArcSprite(radius, color);
                        // 位置をセット
                        arc_sprite.x = Math.random()*320;
                        arc_sprite.y = Math.random()*320;
                        // 向きベクトルをセット
                        arc_sprite.setRandomDirection();
                        // フレームイベントを登録
                        arc_sprite.addEventListener(Event.ENTER_FRAME, function(){
                            this.moveBy(this.dx*2, this.dy*2);
                            this.adjustPosition(0, 0, game.width, game.height);
                        });
                        // ルートシーンに ArcSprite を追加
                        game.rootScene.addChild(arc_sprite);
                    }
                };
                
                // 背景表示
                game.rootScene.backgroundColor = 'rgb(0, 0, 0)';
                // ゲームスタート
                game.start();
            }
            
        </script>
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        
    </body>
</html>
    

TRACK BACK URL

POST COMMENT

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

COMMENT

  • TM Life より:

    […] enchant.js を読み込んでいます. また, プレイヤークラスは私が以前作った ArcSprite クラスというプラグインを継承して作るのでここで読み込んでいます. TweetLabel […]

  • TM Life より:

    […] この Step では敵を生成します. ここでも ArcSprite クラスが大活躍します. […]