AlloyRenderingEngine燃烧的进度条

时间：2024-01-12 19:45:08

写在前面

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

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

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

统一像素管理的好处：

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

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

演示

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

组件使用

; (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);

})();

组件原理(看注释)

; (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 = 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

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

相关文章