AlloyRenderingEngine燃烧的进度条

写在前面

Github: https://github.com/AlloyTeam/AlloyGameEngine

HTML 5新增了progress标签,那么再去使用AlloyRenderingEngine去模拟进度条是否多余?
不多余。有四大好处:

  • 样式更加灵活(想怎么绘制就怎么绘制)
  • 跨平台跨浏览器样式更加统一(使用便签,各个浏览器默认样式是五花八门)
  • 效果更加酷炫,(比如燃烧的进度条= =!)
  • 像素能够统一管理

统一像素管理的好处:

  • 更容易的全尺寸缩小和放大(最常见的:全屏游戏)
  • 缩小和放大不用操心内部元素错位(只是交给浏览器去进行插值运算)
  • 更好的滤镜控制(如游戏中死亡画面,全屏黑白化)
  • 更好的移植性和跨平台性(opengl<->canvas2d<->webgl<->opengl等等各种mapping)

上面所列的,对AlloyRenderingEngine所有组件都适用。

演示

 
开始演示(ps:可以直接点击进度条黑色部分设置进度)

组件使用

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
; (function () {
    //注意:当要渲染文字(Text)和图形(Graphics)时,请使用Cavnas渲染
    //Progress组件内部使用了Graphics
    //第二个参数true代表关闭webgl,使用Canvas2d渲染
    //如果要使用webgl渲染,请使用Lable渲染文字,Shape渲染矢量图。
    var stage = new ARE.Stage("#ourCanvas", true);
    var progress = new ARE.Progress({
        width: 200,
        height: 20,
        borderColor: "#3d3d3d",
        fillColor: "#black"
    })
    progress.x = 50;
    progress.y = 50;
    stage.add(progress);
    var current = 0, pause = true;
    stage.onTick(function () {
        if (!pause) {
            current += 0.005;
            progress.value = current;
        }
    });
    //进度条的over时,鼠标的形状
    progress.cursor = "pointer";
    progress.onClick(function (evt) {
        //注意这里可以使用evt.stageX来得到相对于舞台(Canvas)的偏移
        current = progress.value = (evt.stageX - progress.x) / progress.width;
    })
    var btn = document.querySelector("#progressBegin");
    //点击按钮,开始进度条开始运行
    btn.addEventListener("click", function () {
        pause = false;
    }, false);
})();

组件原理(看注释)

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
; (function () {
    //先把要使用类的赋给临时变量,以后就不用打点了:)
    var Stage = ARE.Stage, Container = ARE.Container, Graphics = ARE.Graphics;
    //进度条继承自容器
    ARE.Progress = Container.extend({
        //构造函数
        ctor: function (option) {
            //把容器的属性和方法搞给自己
            this._super();
            this.width = option.width;
            this.height = option.height;
            this.fillColor = option.fillColor;
            this.value = option.value||0;
            //外层边框
            this.box = new Graphics()       
            //直接根据传进的宽和高画个矩形
            this.box.lineWidth(2).strokeStyle(option.borderColor || "black").strokeRect(0, 0, option.width, option.height);
            //把边框添加到自身(因为自身就是容器,继承自Container,所以有了add方法)
            this.add(this.box);
            var barWidth = this.value * option.width - 4;          
            this.bar = new Graphics();
            //把bar添加到自身(因为自身就是容器,继承自Container,所以有了add方法)
            this.add(this.bar);
            this.bar.fillStyle(option.fillColor || "green").fillRect(2, 2, barWidth < 0 ? 0 : barWidth, option.height - 4);
            //引导的火焰,使用粒子系统去模拟
            this.pilot = new ARE.ParticleSystem({
                emitX: 0,
                emitY:0,
                speed:10,
                angle: 180,
                angleRange: 90,
                emitArea: [1, option.height],        
                texture: "data:image/png;base64\,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJkSURBVHjaxJeJbusgEEW94S1L//83X18M2MSuLd2pbqc4wZGqRLrKBsyZhQHny7Jk73xVL8xpVhWrcmiB5lX+6GJ5YgQ2owbAm8oIwH1VgKZUmGcRqKGGPgtEQQAzGR8hQ59fAmhJHSAagigJ4E7GPWRXOYC6owAd1JM6wDQPADyMWUqZRMqmAojHp1Vn6EQQEgUNMJLnUjMyJsM49wygBkAPw9dVFwXRkncCIIW3GRgoTQUZn6HxCMAFEFd8TwEQ78X4rHbILoAUmeT+RFG4UhQ6MiIAE4W/UsYFjuVjAIa2nIY4q1R0GFtQWG3E84lqw2GO2QOoCKBVu0BAPgDSU0eUDjjQenNkV/AW/pWChhpMTelo1a64AOKM30vk18GzTHXCNtI/Knz3DFBgsUqBGIjTInXRY1yA9xkVoqW5tVq3pDR9A0hfF5BSARmVnh7RMDCaIdcNgbPBkgzn1Bu+SfIEFSpSBmkxyrMicb0fAEuCZrWnN89veA/4XcakrPcjBWzkTuLjlbfTQPOlBhz+HwkqqPXmPQDdrQItxE1moGof1S74j/8txk8EHhTQrAE8qlwfqS5yukm1x/rAJ9Jiaa6nyATqD78aUVBhFo8b1V4DdTXdCW+IxA1zB4JhiOhZMEWO1HqnvdoHZ4FAMIhV9REF8FiUm0jsYPEJx/Fm/N8OhH90HI9YRHesWbXXZwAShU8qThe7H8YAuJmw5yOd989uRINKRTJAhoF8jbqrHKfeCYdIISZfSq26bk/K+yO3YvfKrVgiwQBHnwt8ynPB25+M8hceTt/ybPhnryJ78+tLgAEAuCFyiQgQB30AAAAASUVORK5CYII=",
                filter: [0.63, 0.35, 0.18, 1],
                emitCount: 1,
                maxCount: 50
            });
            this.pilot.y = option.height / 2;
            //设置火焰色缩放,因为ParticleSystem本身也是继承自容器,所以具备scale属性
            //等同于this.pilot.scaleX = this.pilot.scaleY = 0.4;
            this.pilot.scale = 0.4;
            //把引导的火焰添加到自身(因为自身就是容器,继承自Container,所以有了add方法)
            this.add(this.pilot);           
            //监听value的变化,赋值胜于call method
            ARE.Observe(this, "value", function (name, value) {            
                if (value >= 1) {
                    //通过maxCount限制粒子的个数,达到关闭火焰的效果
                    this.pilot.maxCount = 0;
                    this.value = 1;
                } else {
                    this.pilot.maxCount = 50;
                    this.value = value;
                }
                //设置火焰的位置
                this.pilot.x = this.value * this.width;
                var barWidth = this.value * this.width - 4;
                this.bar.clear().fillStyle(this.fillColor || "green").fillRect(2, 2, barWidth < 0 ? 0 : barWidth, this.height - 4);             
            })
        }
    });
})();

最新动态请关注Github: https://github.com/AlloyTeam/AlloyGameEngine

作者:张磊 

AlloyRenderingEngine的更多相关文章

  1. AlloyRenderingEngine燃烧的进度条

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine HTML 5新增了progress标签,那么再去使用AlloyRenderingEn ...

  2. AlloyRenderingEngine文本框组件

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine 在dom元素里,自带了input标签,设置其type为text,它就是一个文本框. ...

  3. AlloyRenderingEngine继承

    写在前面 不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine然后star一下,多谢支持:). 前几天发了篇向ES6靠齐 ...

  4. AlloyRenderingEngine之Shape

    写在前面 不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine 然后star一下,多谢支持:). 游戏或者应用中,不是所 ...

  5. AlloyRenderingEngine入门

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

  6. AlloyRenderingEngine开门大吉

    快速入口 不读文章可以直接拐向这里: github:https://github.com/AlloyTeam/AlloyRenderingEngine website:http://alloyteam ...

  7. spritecow改造

    快速入口 不读文章可以直接拐向这里: spritecow二代:https://kmdjs.github.io/arejs-tool-sprite/ 写在前面 工欲善其事必先利其器,最近fork了一份s ...

随机推荐

  1. basename, dirname 在C语言中的使用

    basename作用是得到特定的路径中的最后一个'/',后面的内容 如/usr/bin,得到的内容就是bin 如果/sdcard/miui_recovery/backup 得到的内容就是backup ...

  2. CF 148D. Bag of mice (可能性DP)

    D. Bag of mice time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  3. Kafka设计

    [Apache Kafka]Kafka设计   在开始开发producer和consumer之前,先从设计的角度看一看Kafka. 由于重度依赖JMS,且实现方式各异.对可伸缩架构的支持不够,Link ...

  4. SignalR与ActiveMQ

    SignalR与ActiveMQ结合构建实时通信   一.概述 本教程主要阐释了如何利用SignalR与消息队列的结合,实现不同客户端的交互 SignalR如何和消息队列交互(暂使用ActiveMQ消 ...

  5. 【Android进阶】关于PagerAdapter的使用方法的总结

    PagerAdapter简介 PagerAdapter是android.support.v4包中的类,它的子类有FragmentPagerAdapter, FragmentStatePagerAdap ...

  6. __weak如何实现目标值自己主动设置nil的

    在开始评论__weak机制之前,首先,一些床上用品 ARC 实现 苹果公司的官方介绍说,.ARC这是"内存管理由编译器"的,但事实上,只有编译器不能完全胜任,ARC另外还要看OC执 ...

  7. Bug记录:微博的Java SDK返回经纬度错误

    现象:美国的坐标点可能会定位到西藏地区-后发现原来负经度经解析后,均变成正的! 源码: private void getGeoInfo(String geo) { StringBuffer value ...

  8. 第十九章——使用资源调控器管理资源(1)——使用SQLServer Management Studio 配置资源调控器

    原文:第十九章--使用资源调控器管理资源(1)--使用SQLServer Management Studio 配置资源调控器 本系列包含: 1. 使用SQLServer Management Stud ...

  9. BZOJ1579 USACO 2009 Feb Gold 3.Revamping Trails Solution

    标题效果:一个N积分m无向图边.它可以是路径k右边缘值变0,确定此时1-n最短路径长度. Sol:我以为我们考虑分层图,图复制k+1部分,每间0~k一层.代表在这个时候已经过去"自由边缘&q ...

  10. java 工厂的变形模拟的各种应用

    工厂模式是在项目开发中使用效率高,意一个接口,该定义用于创建对象.让子类来决定哪一个类实例. 这就是一个工厂类的示意图 接着来一个简单的样例: 如上图所看到的,我们首先定义我们的产品抽象类接口,也能够 ...