代码改变世界

AlloyRenderingEngine之Shape

2015-04-23 16:49 【当耐特】 阅读(...) 评论(...) 编辑 收藏

写在前面

不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine
然后star一下,多谢支持:)。

游戏或者应用中,不是所有的地方都是贴图,Shape 也有很常见的应用场景,如游戏中显示HP的血条。大量的Shape可以组成矢量图。矢量图的好处是放大不失真,也就是不会变模糊;而位图放大失真,失真的程度要看其平台插值算法的牛B程度,但放大效果越好的算法,速度越慢,所以大部分平台会在速度和效果上取个折中。

绘制Shape根绘制位图本质不一样,绘制位图可以充分利用GPU渲染(当然也可以不用),绘制Shape必须经过CPU先进行数学计算和图形学相关算法(比如你可以尝试不使用api,而使用点去绘制贝塞尔曲线、圆形、线条等,你做的所有数学工作,就是计算机做的工作),然后再进行渲染。所以很显然,绘制大量的Shape会造成帧率下降。

那么又想使用Shape,又不想降低帧率怎么办?

绘制Shape和绘制图片又不冲突。Shape可以转成图片进行渲染,跟Shape类似的还有文字,文字也可以转成图片再进行绘制以提高绘制帧率,意思就是:
1.经过CPU先进行数学计算和图形学相关算法
2.渲染至某个备份Canvas
3.以后游戏或者应用中的core loop直接把备份Canvas绘制上去,而不用去重新计算
4.当Shape有更改的时候才去更新备份Canvas

这里需要注意的是:必须知道Shape所占据的宽高。

Shape类

AlloyRenderingEngine内置了Shape类用于绘制几何形状。
其API设计与命名也Canvas的Context2d的一致,不同在与:
1.使用了连缀的方法调用方式,
2.最后要调用end()结尾
3.需要增加到舞台

如入画一个圆:

(function (ARE) {
    var Stage = ARE.Stage, Shape = ARE.Shape;
    var stage = new Stage("#ourCanvas");
    var shape = new Shape(73, 76);
    shape.beginPath().arc(10,10,20, 0, Math.PI * 2).fill().end();
    stage.add(shape);
})(ARE);

可以看到,创建Shape的实例需要传两个参数,一个代表宽,一个代表高。具体为什么要传这两个参数,请从文章开头重新读一遍:)。
以此类推。其他的方法还有:moveTo、lineTo、bezierCurveTo、stroke、fillStyle、fillRect、clear、clearRect等…

而shape也拥有scale、scaleX、scaleY、skewX、skewY、rotation、x、y、alpha等属性

举个栗子(鼠标放在球上然后滚动你的滚轮试试)

再举个栗子(鼠标放在老虎上然后滚动你的滚轮试试)

滚轮事件怎么搞滴?

stage.onMouseWheel(function (evt) {
    if (evt.delta > 0) {
        shape.scale += 0.05;
    } else {                    
        shape.scale -= 0.05;
    }
}) 

 简单吧!

Github

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