写在前面
AlloyRenderingEngine 是一款非常快速的渲染引擎，目前该项目已经合并至 https://github.com/AlloyTeam/AlloyGameEngine/ ,
属于 AlloyGameEngine 下的一个子项目，负责渲染。
因为游戏===复杂的 App，所有 AlloyGameEngine 不仅可以做游戏，也可以制作 App，比如： http://kmdjs.github.io/ppt-editor/
用 AlloyGameEngine 制作 App，如大炮轰蚊子。
建立 html 节点
要使用 AlloyRenderingEngine，你的 html 页面首先要有一个 canvas 标签作为渲染容器。如下面 html 结构：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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
创建舞台
使用下面代码创意舞台
|
1 2 3 4 5 6 7 8 9 |
; (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 对象。如：
|
1 2 3 4 5 |
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 内部的元素，那么这个弱点就没有了。
比如，我们可以轻松给这张图绑定点击事件：
|
1 2 3 4 5 6 7 8 |
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 方向扭曲
|
1 2 3 4 5 6 7 8 9 |
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 之间，如下面代码：
|
1 2 |
bitmap.originX = 0.5; bitmap.originY = 0.5; |
旋转点就变到了中心。设置对象的 x 和 y 坐标的时候，就等于设置图片中心的坐标了。
倘若不按照比例，而是安装具体的像素来设置旋转点，请使用 regX 和 regY，如：
|
1 2 |
bitmap.regX = 113; bitmap.regY = 78; |
循环
引擎提供了 onTick 方法来代替 js 的 setInterval 来管理循环。
|
1 2 3 |
stage.onTick(function () { //循环执行的逻辑写在这里 }) |
滤镜
如果想对图片做一些处理，可以改变元素的 filter 的属性。
|
1 |
bmp.filter=[1, 0, 0, 1]; |
把数组对象赋值给 filter，分别代表 rgba，如上面的滤镜，把图片的 g 和 b 都过滤掉了。只剩下 r。
综合案例
要实现下面的效果：
可以使用下面的代码:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!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 一下不会怀孕= =！多谢支持！
影浅 2016 年 5 月 31 日
能不能让某一个 Bitmap 可以穿透, 直接可以点击到他下面的 Bitmap
TAT.dnt 2016 年 6 月 1 日
额。为何有这种需求？目前不能。
影浅 2016 年 6 月 20 日
相框+照片合并, 这种项目可能用到
柯西不是你 2015 年 8 月 25 日
window 的 sublime text？哈哈