iio Engine 1

iio Engine

如有转载请注明：本文出自：http://blog.youkuaiyun.com/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!');