enchant.js: プラグイン ArcSprite を制作
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()関数がある点です. この２つの関数は確認用なので無理に使う必要はありません.
<!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>
[…] enchant.js を読み込んでいます. また, プレイヤークラスは私が以前作った ArcSprite クラスというプラグインを継承して作るのでここで読み込んでいます. TweetLabel […]
[…] この Step では敵を生成します. ここでも ArcSprite クラスが大活躍します. […]