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

AlloyRenderingEngine燃烧的进度条的相关文章

Android 从无到有打造一个炫酷的进度条效果

从无到有打造一个炫酷的进度条效果

每周进度条(第十五周)

第十五周进度条   第十五周 所花时间 1h 代码量(行)  100 博客量(篇)  1 学到的知识 对图片的处理 在Android程序中加入图片

Bootstrap进度条

Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性, Opera 12 不支持动画. 默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>. 添加一个带有百分比表示的宽度的 style 属性,例如 sty

HTML5/CSS3超酷进度条 不同进度多种颜色

下面我们来看看实现这款进度条的过程和源码,代码主要由HTML.CSS以及jQuery组成,实现过程也相对比较简单.HTML代码: <div id="wrapper">     <div class="loader-container">           <div class="meter">0</div>           <span class="runner"&g

基于HT for Web矢量实现HTML5文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条,矢量在<矢量Chart图表嵌入HTML5网络拓扑图的应用>一文中已经讲述了关于setCompType()方法的应用,今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条,我们先来看下效果图: 从效果图可以看到,向服务器上传了一个mp4文件,并在最下方显示

Android的下拉刷新带进度条效果

首先看一下运行效果图,程序的下拉刷新参考了视频,在视频页面也提供了源码下载, http://www.imooc.com/learn/135 本篇主要说在此基础上增加了进度条的快速旋转和递增递减处理,在文章最后也会给出源码,这里主要描述一下所用的一个类 RoundProgressBar package com.cayden.listview; import android.content.Context; import android.content.res.TypedArray; import

【WebView】带加载进度条的WebView及Chrome联调

先看效果图: 看到顶部蓝色的进度条了. 原理:用到了 android.webkit.WebChromeClient中的onProgressChanged,而android.webkit.WebViewClient是没有这个方法的.所以普通的WebView是无法实现进度条的. 下面直接上干货: /** * ProgressWebView * * @author lif * * */ @SuppressWarnings("deprecation") public class Progres

OpenCV GUI基本操作,回调函数,进度条,裁剪图像等

代码为转载,出处找不到了,不贴了 工具条进度条: // ConvertColor.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #pragma comment(lib,"opencv_core2410d.l

python 进度条

功能说明:将程序的执行进展情况按照百分比用进度条显示. print:打印末尾会自动加上换行符'\n',如果要让打印的结果一直在同一行显示,不能使用这个命令 sys.stdout.write():打印输出但结尾不带'\n',使输出一直在同一行,同时在末尾加上行首符'\r',将最新的输出结果一直保持在行首 sys.stdout.flush():将缓存在sys.stdout.write()的内容暂时打印出来 #!/usr/bin/env python # -*- coding:utf-8 -*- im