AlloyRenderingEngine 入门

In 未分类 on 2015年04月17日 by TAT.dnt view: 4,986

写在前面

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>

</head>

<body>

;(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"