写在前面
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
时间: 2024-10-24 17:48:34