TAT.dnt AlloyRenderingEngine 入门
In HTML5,Web开发 on 2015年04月17日 by view: 3,282
4

写在前面

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

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

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

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

建立 html 节点

要使用 AlloyRenderingEngine,你的 html 页面首先要有一个 canvas 标签作为渲染容器。如下面 html 结构:

你可以直接使用:are.min.js

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

创建舞台

使用下面代码创意舞台

以上三种方式都行,Stage 的构造函数接受 dom 元素或者 dom 选择器。

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

画图片

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

碰到最多的情况是渲染一张图片。这里要使用引擎自带的 Bitmap 对象。如:

当然你要保证在你的同级目录下有一种 atlogo.png 图片。

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

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

事件绑定

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

比如,我们可以轻松给这张图绑定点击事件:

事件触发是精确到像素级别的,如果在移动端使用该引擎,像素级别就没有意义,而且体验不好,
所以支持 AABB 级别事件触发和像素级别任意切换, 这个在以后的文章中再讲。

变形变幻

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

  • x
    代表 x 坐标
  • y
    代表 y 坐标
  • rotation
    代表旋转
  • scaleX
    代表 x 方向缩放
  • scaleY
    代表 y 方向缩放
  • alpha
    代表透明度
  • skewX
    代表 x 方向扭曲
  • skewY
    代表 y 方向扭曲 

旋转点

舞台上的 Bitmap 默认的旋转基准点是左上角。你可以通过 originX 和 originY 设置旋转基准点,他们的值是 0 到 1 之间,如下面代码:

旋转点就变到了中心。设置对象的 x 和 y 坐标的时候,就等于设置图片中心的坐标了。

倘若不按照比例,而是安装具体的像素来设置旋转点,请使用 regX 和 regY,如:

循环

引擎提供了 onTick 方法来代替 js 的 setInterval 来管理循环。

滤镜

如果想对图片做一些处理,可以改变元素的 filter 的属性。

把数组对象赋值给 filter,分别代表 rgba,如上面的滤镜,把图片的 g 和 b 都过滤掉了。只剩下 r。

综合案例

要实现下面的效果:

usage

可以使用下面的代码:

线上 demo: http://alloyteam.github.io/AlloyGameEngine/tutorial/lesson1.html

Github

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

 

 

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2015/04/6726/

  1. 影浅 2016 年 5 月 31 日

    能不能让某一个 Bitmap 可以穿透, 直接可以点击到他下面的 Bitmap

    • TAT.dnt

      TAT.dnt 2016 年 6 月 1 日

      额。为何有这种需求?目前不能。

      • 影浅 2016 年 6 月 20 日

        相框+照片合并, 这种项目可能用到

  2. 柯西不是你 2015 年 8 月 25 日

    window 的 sublime text?哈哈

发表评论