[目次]
enchant.js の Groupを使おう | Webプログラミング!
Groupのサンプル1
Groupのサンプル1group1.html
<!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>Test of Enchant.js</title>
<style type="text/css">
body { margin: 0; }
</style>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="plugins/ui.enchant.js"></script>
<script type="text/javascript" src="group1.js"></script>
</head>
<body>
</body>
</html>
group1.js
enchant();
var WIDTH=320;
var HEIGHT=320;
var GRID=20;
window.onload = function() {
var game = new Game(WIDTH,HEIGHT);
game.fps = 16;
game.preload('chara1.png');
game.onload = function() {
// ここではグラフ用紙を描いている 中身は理解しなくてよい /////////////
var suflag = new Surface(WIDTH,HEIGHT);
suflag.context.strokeStyle="rgb(50,100,150)";
suflag.context.beginPath();
for(i=1;i<=WIDTH / GRID;i++){ // assume width=height
suflag.context.moveTo(i*GRID,0);
suflag.context.lineTo(i*GRID,HEIGHT);
suflag.context.stroke();
suflag.context.moveTo(0,i*GRID);
suflag.context.lineTo(WIDTH,i*GRID);
suflag.context.stroke();
}
var spflag = new Sprite(WIDTH,HEIGHT);
spflag.image=suflag;
game.rootScene.addChild(spflag);
///////////////////////////////////////////////////////////
var bear1 = new Sprite(32,32);
bear1.image = game.assets['chara1.png'];
bear1.frame = 4;
var bear2 = new Sprite(32,32);
bear2.image = game.assets['chara1.png'];
bear2.frame = 7;
var g = new Group();
g.addChild(bear2);
g.addChild(bear1);
game.rootScene.addChild(g);
bear1.moveTo(40,120); // 左上隅のものが moveTo での g の基準点になる?
bear1.rotation=45;
bear2.moveTo(120,120);
g.moveTo(80,100);
/*
g.originX=80;
g.originY=130;
g.rotation=10;
bear2.moveTo(0,0);
*/
};
game.start();
};
Groupのサンプル2
Groupのサンプル2group2.html
<!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>Test of Enchant.js</title>
<style type="text/css">
body { margin: 0; }
</style>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="plugins/ui.enchant.js"></script>
<script type="text/javascript" src="group2.js"></script>
</head>
<body>
</body>
</html>
group2.js
enchant();
var WIDTH=320;
var HEIGHT=320;
var GRID=16;
window.onload = function() {
var game = new Game(WIDTH,HEIGHT);
game.fps = 16;
game.preload('chara1.png');
Bear = Class.create(Sprite,
{
initialize: function(x,y){
Sprite.call(this,32,32);
this.image = game.assets['chara1.png'];
this.frame = 7;
this.x=x;
this.y=y;
},
onenterframe: function(){
},
ontouchstart: function(e){
}
}
);
game.onload = function() {
// ここではグラフ用紙を描いている 中身は理解しなくてよい /////////////
var suflag = new Surface(WIDTH,HEIGHT);
suflag.context.strokeStyle="rgb(50,100,150)";
suflag.context.beginPath();
for(i=1;i<=WIDTH / GRID;i++){ // assume width=height
suflag.context.moveTo(i*GRID,0);
suflag.context.lineTo(i*GRID,HEIGHT);
suflag.context.stroke();
suflag.context.moveTo(0,i*GRID);
suflag.context.lineTo(WIDTH,i*GRID);
suflag.context.stroke();
}
var spflag = new Sprite(WIDTH,HEIGHT);
spflag.image=suflag;
game.rootScene.addChild(spflag);
///////////////////////////////////////////////////////////
var g = new Group();
for(var i=0; i< 10; i++){
for(var j=0; j< 5; j++){
g.addChild(new Bear(i*32,j*32));
}
}
game.rootScene.addChild(g);
// g.originX=160; // 回転・拡大縮小の基準点のX座標
// g.originY=80; // 回転・拡大縮小の基準点のY座標
g.rotation=20;
g.x=160;
g.y=80;
g.childNodes[1].x=-32;
g.childNodes[2].rotation=45;
g.childNodes[3].frame=10;
g.childNodes[4].scaleY=0.5;
};
game.start();
};
