AlloyRenderingEngine combustion progress bar, renderingengine

AlloyRenderingEngine combustion progress bar, renderingengine
Preface

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

HTML 5 adds the SS tag. Is it unnecessary to use AlloyRenderingEngine to simulate the progress bar?
No. There are four benefits:

• More flexible style (how to draw)
• Cross-platform and cross-browser styles are more unified (the default styles of various browsers are varied with tabs)
• The effect is more cool (for example, progress bar of burning = !)
• Unified pixel Management

Benefits of unified pixel management:

• Easier full-size resizing and amplification (most common: full-screen Games)
• You don't have to worry about internal element misplacement when downgrading or enlarging (just hand it to the browser for interpolation)
• Better filter control (such as dead scenes in the game, full screen black and white)
• Better portability and cross-platform (opengl <-> canvas2d <-> webgl <-> opengl and other mapping)

All components of AlloyRenderingEngine are applicable as listed above.

Demo Start demonstration(Ps: You can directly click the black part of the progress bar to set the progress) component usage

; (Function () {// Note: When you want to render Text and Graphics, use the Graphics inside the Cavnas rendering // Progress component // The second parameter true to disable webgl. Use Canvas2d rendering // if you want to use webgl rendering, use Lable to render the text, shape: renders a vector image. 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 ;}}); // when the progress bar is over, the mouse shape is SS. cursor = "pointer"; progress. onClick (function (evt) {// note that evt can be used here. stageX to get the current = progress offset relative to the Canvas. value = (evt. stageX-progress. x)/progress. width;}) var btn = document. querySelector ("# progressBegin"); // click the button to start the progress bar and start running btn. addEventListener ("click", function () {pause = false ;}, false );})();

Component principle (see comments)

; (Function () {// first assign the class to the temporary variable, then you don't need to call it :) var Stage = ARE. stage, Container = ARE. container, Graphics = ARE. graphics; // progress bar inherited from the container ARE. progress = Container. extend ({// constructor: function (option) {// assign the attributes and methods of the container to yourself. this. _ super (); this. width = option. width; this. height = option. height; this. fillColor = option. fillColor; this. value = option. value | 0; // outer border this. box = new Graphics () // draw a rectangle th Based on the width and height of the input. Is. box. lineWidth (2 ). strokeStyle (option. borderColor | "black "). strokeRect (0, 0, option. width, option. height); // add the border to itself (because it is a Container and inherits from the Container, the add method is available) this. add (this. box); var barWidth = this. value * option. width-4; this. bar = new Graphics (); // add bar to itself (because it is a Container and inherits from the Container, the add method is available) this. add (this. bar); this. bar. fillStyle (option. fillColor | "green "). fillRect (2, 2, barWidth <0? 0: barWidth, option. height-4); // The guided flame, Which is simulated by the particle system. pilot = new ARE. particle System ({emitX: 0, emitY: 0, speed: 10, angle: 180, angleRange: 90, emitArea: [1, option. height], texture: "data: image/png; base64 \, expires/expires // 83X18M2MSuLd2pbqc4wZGqRLrKBsyZhQHny7Jk73xVL8 XpVhWrcmiB5lX + samples + RFG4UhQ6MiIAE4W/samples/AW/pWChhpMTelo1a64AOKM30vk18GzTHXCNtI/samples + Sf Examples/4 Examples + examples/examples + examples/Fm/examples/K + yO3YvfKrVgiwQBHnwt8ynPB25 + M8hceTt/ybPhnryJ78 + examples = ", filter: [0.63, 0.35, 0. 18, 1], emitCount: 1, maxCount: 50}); this. pilot. y = option. height/2; // sets the flame color scaling. Because the particle system itself inherits from the container, it has the scale attribute. // equivalent to this. pilot. scaleX = this. pilot. scale= 0.4; this. pilot. scale = 0.4; // add the guiding flame to itself (because it is a Container and inherits from the Container, the add method is available) this. add (this. pilot); // listen to the value change. The value assignment is better than the call method ARE. observe (this, "value", function (name, value) {if (value> = 1) {// use maxCount to limit the number of particles to turn off the flame. this. pi Lot. maxCount = 0; this. value = 1;} else {this. pilot. maxCount = 50; this. value = value;} // set the flame position 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 );})}});})();

Latest developments please follow Github: https://github.com/AlloyTeam/AlloyGameEngine