AlloyRenderingEngine是一款非常快速的渲染引擎,目前该项目已经合并至 https://github.com/AlloyTeam/AlloyGameEngine/ ,
属于AlloyGameEngine下的一个子项目,负责渲染。
因为游戏===复杂的App,所有AlloyGameEngine不仅可以做游戏,也可以制作App,比如: http://kmdjs.github.io/ppt-editor/
用AlloyGameEngine制作App,如大炮轰蚊子。
要使用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级别事件触发和像素级别任意切换,这个在以后的文章中再讲。
添加到舞台的任何对象都可以变形变幻。你可以设置如下属性:
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
https://github.com/AlloyTeam/AlloyGameEngine 据说star一下不会怀孕= =!多谢支持!