enchant.js の Groupを使おう | Webプログラミング!

Time-stamp: "2015-12-03 Thu 10:15 JST hig"

Groupのサンプル1

Groupのサンプル1

group1.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のサンプル2

group2.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();
};

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net