説明
サーフェイスで枠だけの四角形を描くにはnew Surface()で生成したオブジェクトのcontext.strokeStyleプロパティを利用します。enchant.jsのサーフェイスはHTML5 Canvasをラップしたものです。このため、サーフェイスオブジェクトのcontextにはCanvasで使用できるメソッドやプロパティがあります。
まず、new Surface()としてサーフェイスを生成します。生成したサーフェイスオブジェクトをスプライトのimageプロパティに設定します。これで準備完了です。この後、Canvasの命令を使って様々な図形を描くことができます。
四角形の塗り潰し色を指定するにはstrokeStyleプロパティにカラー名やCSSで指定できるカラーコードを指定します。枠だけの四角形を描くにはstrokeRect()メソッドを使います。パラメータはx,y,横幅,縦幅の順番で指定します。
■HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample game</title>
<style>
body { margin: 0; }
</style>
<script src="js/enchant.min.js"></script>
<script src="js/main.js"></script>
</head>
<body></body>
</html>
■JavaScript (main.js)
enchant(); // ライブラリの初期化
window.onload = function(){
// 320×240ピクセルサイズの画面(Canvas)を作成
var game = new Game(320, 240);
// フレームレートの設定。15fpsに設定
game.fps = 15;
// スプライトを生成
var sprite = new Sprite(100, 100);
// Surfaceオブジェクトを生成しスプライトに連結
var surface = new Surface( 100, 100);
sprite.image = surface;
game.rootScene.addChild(sprite);
// 赤い枠だけの四角形を描く
surface.context.strokeStyle = "red";
surface.context.strokeRect (0, 0, 100, 100);
}
目次に戻る