AlloyRenderingEngine燃燒的進度條

寫在前面

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 < 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