html蓝色粒子,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 里面干的事情就是积分... 比如:
1
2
3
4
5
6
7
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 写的,感觉就三个词:简单、粗暴、直接。使用起来也非常方便。如,下面这个控制发射范围、粒子、方向的控件:
使用的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
vardirCtrl=newPE.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 封装了一个工具函数用于下载文件:
1
2
3
4
5
6
7
8
9
10
11
12
13
Util.downloadFile=function(code,fileName){
if(window.URL.createObjectURL){
varfileParts=[code];
varbb=newBlob(fileParts,{
type:"text/plain"
});
vardnlnk=window.URL.createObjectURL(bb);
vardlLink=document.createElement("a");
dlLink.setAttribute("href",dnlnk);
dlLink.setAttribute("download",fileName);
dlLink.click();
}
}
传送门
ps: 编辑器使用小测验:你能使用 demo 的粒子编辑器实现下面那只企鹅效果吗?:)
html蓝色粒子,HTML5 粒子编辑器相关推荐
- 简直要逆天!超炫的 HTML5 粒子效果进度条
我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...
- 惊艳的HTML5粒子动画特效
转自:http://geek.csdn.net/news/detail/201487?ref=myread HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果, ...
- 11款惊艳的HTML5粒子动画特效
HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但是有些HTML5粒子效果确实能给用户带来不 ...
- html5 粒子动画效果制作,8款惊艳的HTML5粒子动画特效
原标题:8款惊艳的HTML5粒子动画特效 HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但 ...
- 7款让人惊叹的HTML5粒子动画特效
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! HTML ...
- html5粒子效果,8款惊艳的HTML5粒子动画特效
[导读] HTML5确实强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但是有些HTML5粒子效果确实能给用户 ...
- 粒子耗尽 粒子滤波_如何使用粒子的强大蓝牙API
粒子耗尽 粒子滤波 This post is originally from www.jaredwolff.com 这篇文章最初来自www.jaredwolff.com I was defeated. ...
- html5网页代码模板简单,简洁蓝色风格HTML5网页模板
简洁蓝色风格HTML5网页模板是一款适合健康医疗类网站模板下载 资源下载此资源下载价格为4D币,请先登录 资源文件列表 codedown123-0818-12/apage.html , 7582 co ...
- HTML5在线编辑器Wysihtml5之Bootstrap扩展
为什么80%的码农都做不了架构师?>>> HTML5在线编辑器Wysihtml5之Bootstrap扩展 bootstrap扩展后的效果 Wysihtml5在线编辑器 boot ...
最新文章
- 技术17期:近几年崛起的Pytorch究竟是何方神圣?
- Docker 安装MySQL以及外部访问
- 如何绕过浏览器的弹窗拦截机制
- 一些Java开发人员在编程中常见的雷!
- boost::mp11::mp_max相关用法的测试程序
- winform下 PictureBox 显示网络图片
- java异常日志不要只打一半,要输出全部错误信息
- oracle ebs 基于host(主机文件)并发程序的开发,Oracle EBS 基于Host(主机文件)并发程序的开发...
- 海量数据处理--位图(BitMap)
- python 绘制功率谱密度图 plt.psd
- 列表逆序排序_【Python自学笔记】集合——列表
- LDA (Linear Discriminate Analysis)Fisher Criteria
- 程序开发入门工具之CodeBlocks
- Ubuntu16.04 Swap的开闭
- 使用Java Mail接收 Gmail 电子邮件
- SpringMVC_1
- 微信小程序实战篇:基于wxcharts.js绘制移动报表
- 华三路由器双向NAT
- 在阿里云ACP认证考试中授权码有效期时限是多久?
- 微软Office Powerpoint双击打不开后的修复办法
热门文章
- android判断字符串是否包含下划线,android 富文本SpannableString去掉下划线
- 使用 OpenWhisk 自建 Serverless 服务
- ubuntu 20.04 安装谷歌输入法
- 前端html字体设置
- 如何用一句话证明你是做产品的?
- 触摸中国人工智能最前线
- 博主已出版的全部译作汇总
- 前端人应该知道的 Centos/Docker/Nginx/Node/Jenkins 的基本操作
- 【项目一】:易班晚点名(以合职业晚点名为平台做的)
- 【C++】Big Five: 构造函数、拷贝构造函数、拷贝赋值函数、移动构造函数、析构函数