iio Engine 1

iio Engine

如有轉載請註明：本文出自：http://blog.csdn.net/wondercoder/article/details/14106787

前幾天發現一個HTML5的JS引擎，看了一下里面的DEMO發現非常好用。今天總結一下。

官方地址：http://www.iioengine.com

裏面包含詳細的Demo和API文檔

1.Hello World

必不可少，先來個Hello World

Helloiio = function(io){
	//創建一個文本
	var text = new iio.Text('Hello iio!!', io.canvas.center);
	//設置文本大小和字體
	text.setFont('30px Consolas');
	//文本排列
	text.setTextAlign('center');
	//文本顏色
	text.setFillStyle('black');
	//將文本添加到屏幕上
	io.addObj(text);
};

//創建全屏畫布並啓動Helloiio
iio.start(Helloiio);

屏幕上就會出現HelloWorld

2.繪製方塊

Helloiio = function(io){
	//左上角x.y值，寬和高
	var rect = new iio.Rect(100,100,50,150);
	//顯示在屏幕中心點，寬高爲50
	//var rect = new iio.Rect(io.canvas.center,50);
	rect.setFillStyle('blue');
	io.addObj(rect);    
};
iio.start(Helloiio);

3.對象移動和旋轉

線面這個方塊複雜一點，從屏幕中間從到右旋轉移動

Helloiio = function(io){
	//設置屏幕背景色
	io.setBGColor('white')

	var blueSquare = new iio.Rect(0,io.canvas.center.y,60);
	blueSquare.setFillStyle('#00baff');
	//設置邊框顏色和寬度
	blueSquare.setStrokeStyle('black',2);
	//設置對象可動的
	blueSquare.enableKinematics();
	//設置旋轉角度
	blueSquare.setTorque(0.1);
	//設置x，y的移動量，
	blueSquare.setVel(5,0);
	//設置陰影。
	blueSquare.setShadow('rgb(150,150,150)',10,10,4);
	//設置40幀每秒
	io.setFramerate(40, blueSquare);	
};

iio.start(Helloiio);

在繪製時，只要到對象位置發生改變時纔會重新繪製該對象，並且只繪製改對象。

當對象移除屏幕是我們讓回重新回到原點，可以通過setBound來處理

//當對象x座標爲0是，對象向右移動，速度爲5
blueSquare.setBound('left', 0
        ,function(obj){
          obj.vel.x = 5;
          return true;
         })
	//當對象x座標爲屏幕寬度是，對象向左移動，速度爲5
      .setBound('right', io.canvas.width
        ,function(obj){
          obj.vel.x = -5;
          return true;
        });

4.給對象貼圖

所謂的圖片對象，就是在rect貼圖

	var blueSquare = new iio.Rect(0,io.canvas.center.y,60);
	blueSquare.addImage('imageName.png'
    //add the object when the image loads
    ,function(){io.addObj(imgSquare)});

5.動畫

用這個引擎設置動畫非常簡單。

var imgs = ['p1.png','p2.png','p3.png'];

var rect = new iio.Rect(io.canvas.center);

rect.createWithAnim(imgs);
io.setAnimFPS(10,rect,,function(){
  rect.nextAnimFrame();
})

6.設置圖層

在遊戲開發中圖層必不可少，iio提供了Group的結構來幫我們管理圖層（PS不要被Group這個單詞忽悠了）

創建一個myGroup的組，其中-10爲圖層索引，

io.addGroup('myGroup', -10);

將一個對象添加到圖層中

io.addToGroup('myGroup',obj);

下面語句的功能是上面兩個語句一樣

io.addToGroup('myGroup',obj,-10);

7.碰撞檢測

有了圖層，我們接下去就可以處理碰撞檢測

假設playerGroup是我方玩家的圖層,npcGroup是Npc所在圖層，我們就可以用下面方法碰撞檢測

io.setCollisionCallback(playerGroup, npcGroup, function(obj1, obj2){
    //碰撞以後發生
});

如果玩家和玩家發送碰撞，我們可以用

io.setCollisionCallback(playerGroup, function(obj1, obj2){
    //碰撞以後發生
});

注意，碰撞檢測，必須是圖層之間的檢測，具體對象只能通過callBack function來判斷

8.監聽鍵盤事件

具體的keyCode見：http://www.iioengine.com/docs/iio-functions#hasKeyCode

見面這段帶面監聽了上下左右鍵的事件

window.addEventListener('keydown', function(event){
 
    if (iio.keyCodeIs('up arrow', event))
        alert('up arrow pushed');
 
    if (iio.keyCodeIs('right arrow', event))
        alert('right arrow pushed');
 
    if (iio.keyCodeIs('down arrow', event))
        alert('down arrow pushed');
 
    if (iio.keyCodeIs('left arrow', event))
        alert('left arrow pushed');
});

9.調試

將iioDebugger.js導入

開啓調試

io.activateDebugger();

這樣你會在屏幕上看到相關的數據，例如當前對象數量、fps等等。

可以用一下語句來打印消息

io.debugMsg('Hello Debugger!');