一步一步HTML5粒子编辑器

分享到:

写在前面

大家阅读此文之前,可以先看一篇MiloYip的文章:用JavaScript玩转游戏物理(一)运动学模拟与粒子系统,看完之后再看此文,更加容易理解。

MiloYip使用的粒子是canvas中绘制的圆,还有一些粒子效果是基于 像素级别的,如:火焰字 ,但是使用像素的计算成本太大,因为需要的粒子数量太多,甚至要配合一些nosie算法,如(perlin nosie),计算量太大。

所以一般会先设计好粒子的纹理(每个纹理假设是32*32,一个粒子就包含了九百多个像素了),这样需要的粒子个数不多,计算量也不大,管理粒子的成本也不高(对粒子增删改查)。

canvas globalCompositeOperation

粒子系统在什么时候最漂亮?晚上!所以在绘制纹理的时候,需要设置globalCompositeOperation 的值为lighter。其作用是:在图形重叠的地方,颜色由两种颜色值的加值来决定。

globalCompositeOperation 还有非常多的属性可以设置,详情见:w3school。

粒子系统

粒子系统的本质其实就是粒子从发射到消失的过程。所以,可以立刻想到一些配置项目:

1.发射速度(每个粒子的速度、方向、角度范围)

2.发射区域(定点发射,还是在某个区域发射)

3.重力场(你是在月球上发射,还是在地球上发射,还是太空的失重状态下)

4.粒子纹理(你发射的是激光、还是五角星、还是烟雾)

5.纹理滤镜(激光是红色还是蓝色)

6.发射频率(你是一秒发射一次、还是一秒发射100次)

每个参数的变化都会导致呈现效果截然不同。

数学与物理

比如运动方向的独立性,2维空间可以使用new Vector2(1,2)来描绘速度,把速度拆分成x和y方向,1代表x轴方向的速度,2代表y轴方向的速度

同样,重力场也可以拆封成两个方向。如new Vector2(0,0.98),0代表x轴方向的速度,0.98代表y轴方向的速度

简单的积分思想:(如:速度是加速度在时间上的累加,路程是速度在时间上的累加等等)。

当然,听上去好像要会微积分才能写粒子系统似的,但其实微积分根本体现不再程序里面,因为程序/游戏里面有core loop,loop里面干的事情就是积分… 比如:

tick: function () {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity.multiply(0.1));
    this.rotatingSpeed+=this.rotatingAcceleration;
    this.rotation += this.rotatingSpeed;
    this.alpha -= this.hideSpeed;
}

所以有这个思想就行,根本不需要会微积分 =  =!

Canvas UI小控件

整个编辑器的所有控件都是canvas写的,感觉就三个词:简单、粗暴、直接。使用起来也非常方便。如,下面这个控制发射范围、粒子、方向的控件:

使用控件的代码:

var dirCtrl=new PE.CircleAdjust({
    min: 0,
    max: 50,
    rotation: -30,
    value: 10,
    angleRange:50,
    change: function (value,angle) {
        ps.setAngle(angle);
        ps.setSpeed(value);
    },
    renderTo: document.getElementById("emitAngleCtrl")
 
});

当然这里不是否定dom写控件,而是,有的时候canvas写UI更具备优势。还有一些场景是dom写控件无法实现的。(比如全局的滤镜效果、波浪效果等,也就是跟像素有关,dom相对较弱)

其他

粒子编辑器,还使用了一些HTML5特性,比如拖拽、FileReader、和blob下载功能。如,基于blob封装了一个工具函数用于下载文件:

Util.downloadFile=function(code, fileName) {
    if (window.URL.createObjectURL) {
        var fileParts = [code];
        var bb = new Blob(fileParts, {
            type: "text/plain"
        });
        var dnlnk = window.URL.createObjectURL(bb);
        var dlLink = document.createElement("a");
        dlLink.setAttribute("href", dnlnk);
        dlLink.setAttribute("download", fileName);
        dlLink.click();
    }
}

传送门

demo: http://alloyteam.github.io/ParticleEditor/

github: https://github.com/AlloyTeam/ParticleEditor

ps:编辑器使用小测验:你能使用demo的粒子编辑器实现下面那只企鹅效果吗?:)

昵    称:
验证码:

相关文档:

  • 学习html5标签代码
    <datalistid="url_list"><optionlabel="W3School"value="http://www.W3School.com.cn"/><optionlabel="Google"value="http://www.google.com"/&g...
  • 使用HTML5和CSS3来设计slider
    提到slider,过去一直都是用css+js来配合实现相关的切换效果。听过大家一直讨论使用html5+css3的实现方式,自己却一直没有动手实现过。...
  • 基于HTML5自定义文字背景生成QQ签名档
    分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版...
  • html5+js压缩图片上传
    最近在折腾移动站的开发,涉及到了一个手机里面上传图片。于是经过N久的折腾,找到一个插件,用法如下: 1...
  • 一款基于jQuery和HTML5全屏焦点图
    今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多...
  • HTML5轻松实现拍照上传功能[转载]
    转载http://www.18sucai.com/article/275.htm 传统方法如果想实现拍照功能,需要后台应用程序复杂的编写,但随着html5的发展,在HTML5规范的支持...
  • HTML5摇一摇
    方式一 (function(){ /** *摇一摇 *@authorrubekid */ functionShake(options){ this.init(options); } Shake.prototype={ init:function(options){ this.options=o...
  • 作为Web开发人员,我为什么喜欢Google Chrome浏览器
    转自:http://www.cnblogs.com/moonvan/archive/2011/12/09/2282710.html 在GoogleChrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因...
  • HTML5 canvas 在线画笔绘图工具(一)
    HTML5canvas在线画笔绘图工具(一)功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与...
  • jQuery+html5实现的3D动态切换焦点轮播幻灯片
    今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动...
  • HTML5 Canvas绘制的下雪效果
    在HTML页面的HEAD区域直接引入snow.js即可,如下:<scripttype="text/javascript"src="js/snow.js"></script> snow.js地址:http://pan.baidu.com/s/1gd5XCLd...
  • 7款HTML5的精美应用教程让你立即爱上HTML5
    1,HTML5/jQuery雷达动画图表图表配置十分简单 分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候...
  • HTML5对web workers和服务器发送事件的支持
    1)对webworkers的支持 webworker是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、...
  • 让IE(包括IE6)支持HTML5元素的方法
    方法1: 让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE...
  • placeholder 属性
    placeholder属性提供可描述输入字段预期值的提示信息(hint)。 该提示会在输入字段为空时显示,并会在字段获得焦点时消失。 1<inputpla...
  • HTML5预览本地图片
    以http协议开头的url的网页,即服务器上的网页是不能显示计算机本地图片的,如果想查看本地图片但不使用服务端的上传功能,可以使...
  • HTMl5结构元素:article
    article: 表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分,并且这部分专用于独立地分类或复用。(例如:一...
  • html5 canvas 移动小方块
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <style> body{ background:pink; } #c...
  • HTML5 PACS 医学成像
    http://ivmartel.github.io/dwv/ http://oviyam.raster.in/oviyam2.html https://github.com/ivmartel/dwv https://github.com/ivmartel/dbv http://www.medicor...
  • HTML5 简介
    HTML5 是下一代的 HTML。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。大部分现代浏览器已经具备了某些 HTML5 支持。...