AlloyRenderingEngine入门

《HTML开发MacOSApp教程》 http://pan.baidu.com/s/1jG1Q58M

写在前面

AlloyRenderingEngine是一款非常快速的渲染引擎，目前该项目已经合并至 https://github.com/AlloyTeam/AlloyGameEngine/ ,

属于AlloyGameEngine下的一个子项目，负责渲染。

因为游戏===复杂的App，所有AlloyGameEngine不仅可以做游戏，也可以制作App，比如： http://kmdjs.github.io/ppt-editor/

用AlloyGameEngine制作App，如大炮轰蚊子。

建立html节点

要使用AlloyRenderingEngine，你的html页面首先要有一个canvas标签作为渲染容器。如下面html结构：
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <canvas width="480" height="480"></canvas>
  <script src="http://alloyteam.github.io/AlloyGameEngine/are.min.js"></script>
  <script>
    ;(function () {
      //在这里写你的app/game的逻辑
    })();
  </script>
</body>
</html>
你可以直接使用： are.min.js

或者使用这份未压缩的： are

创建舞台

使用下面代码创意舞台
; (function () {
  var Stage = ARE.Stage;
  var stage = new Stage("#ourCanvas");
  //或者
  //var stage = new Stage(document.getElementById("ourCanvas"));
  //或者
  //var stage = new Stage(document.querySelector("#ourCanvas"));
})();
以上三种方式都行，Stage的构造函数接受dom元素或者dom选择器。

以后所有要绘制/渲染的元素以后都是通过add方法添加到舞台即可。

画图片

你不需要了解任何渲染知识，你要渲染物体，只需要调用stage.add(xxx)方法，AlloyRenderingEngine会负责帮你画上去。

碰到最多的情况是渲染一张图片。这里要使用引擎自带的Bitmap对象。如：
var Stage = ARE.Stage, Bitmap = ARE.Bitmap;

var stage = new Stage("#ourCanvas");
var bitmap = new Bitmap("atlogo.png");
stage.add(bitmap);
当然你要保证在你的同级目录下有一种atlogo.png图片。

Bitmap构造函数可以接受两种类型的参数，一种是上面所示的字符串路径，一种是Image对象。

当接收字符串路径的时候，引擎会自动去帮你加载图片。

事件绑定

canvas相对于svg的弱点之一是事件绑定。但是，如果通过引擎将dom上的事件过渡给canvas内部的元素，那么这个弱点就没有了。

比如，我们可以轻松给这张图绑定点击事件：
var Stage = ARE.Stage, Bitmap = ARE.Bitmap;

var stage = new Stage("#ourCanvas");
var bitmap = new Bitmap("atlogo.png");
bitmap.onClick(function () {
    alert("你点击我了");
})
stage.add(bitmap);
事件触发是精确到像素级别的，如果在移动端使用该引擎，像素级别就没有意义，而且体验不好，所以支持AABB级别事件触发和像素级别任意切换，这个在以后的文章中再讲。

变形变幻

添加到舞台的任何对象都可以变形变幻。你可以设置如下属性：

x
代表x坐标

y
代表y坐标

rotation
代表旋转

scaleX
代表x方向缩放

scaleY
代表y方向缩放

alpha
代表透明度

skewX
代表x方向扭曲

skewY
代表y方向扭曲
var Stage = ARE.Stage, Bitmap = ARE.Bitmap;

var stage = new Stage("#ourCanvas");
var bitmap = new Bitmap("atlogo.png");
bitmap.onClick(function () {
    bitmap.scaleX = bitmap.scaleY = 2;
    alert("我变大企鹅啦！");
})
stage.add(bitmap);
旋转点

舞台上的Bitmap默认的旋转基准点是左上角。你可以通过originX和originY设置旋转基准点，他们的值是0到1之间，如下面代码：
bitmap.originX = 0.5;
bitmap.originY = 0.5;
旋转点就变到了中心。设置对象的x和y坐标的时候，就等于设置图片中心的坐标了。

循环

引擎提供了onTick方法来代替js的setInterval来管理循环。
stage.onTick(function () {
    //循环执行的逻辑写在这里
})
滤镜

如果想对图片做一些处理，可以改变元素的filter的属性。
bmp.filter=[1, 0, 0, 1];
把数组对象赋值给filter，分别代表rgba，如上面的滤镜，把图片的g和b都过滤掉了。只剩下r。

综合案例

要实现下面的效果：

可以使用下面的代码:
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <canvas width="480" height="480" id="ourCanvas"></canvas>
  <script src="http://alloyteam.github.io/AlloyGameEngine/are.min.js"></script>
  <script>
    ; (function () {
      var Stage = ARE.Stage, Bitmap = ARE.Bitmap;
      var bmp, stage = new Stage("#ourCanvas");
      bmp = new Bitmap("atLogo.png");
      //旋转点设置到中心
      bmp.originX = 0.5;
      bmp.originY = 0.5;
      bmp.x = 240;
      bmp.y = 240;
      //绑定点击事件
      bmp.onClick(function () {
        //滤镜
        bmp.filter = [Math.random(), Math.random(), Math.random(), 1];
      });
      //添加到舞台
      stage.add(bmp);
      var step = 0.01;
      //循环
      stage.onTick(function () {
        bmp.rotation += 0.5;
        if (bmp.scaleX > 1.5 || bmp.scaleX < 0.5) {
          step *= -1;
        }
        bmp.scaleX += step;
        bmp.scaleY += step;
      });
    })();
  </script>
</body>
</html>
线上demo: http://alloyteam.github.io/AlloyGameEngine/tutorial/lesson1.html

Github

https://github.com/AlloyTeam/AlloyGameEngine 据说star一下不会怀孕= =！多谢支持！