今天看了cocos2d-html5里面的粒子系统相关的代码,首先看了代码中引用的两篇文章, 这两篇文章google上都可以搜到pdf的.

The Ocean Spray in Your Face [jeff lander]
Building an Advanced Particle System [John van der Burg]

基本概念

jeff lander的文章是一个很好的入门,讲述了基本的概念。

游戏里面的烟火,大雾,爆炸还有血液四溅的效果:(,都是用粒子系统来模拟的。一个粒子(particle)是3D空间中的一个点。基本属性,如位置,速度,方向,还有生命周期(就是这个粒子该画多少帧)等,发射器(emitter)负责 粒子的创建,还有particle pool这个主要是性能上的优化,降低粒子的alloc和free的开销。生成粒子的时候,直接从pool里面取,然后粒子销毁的时候,把粒子放回pool里面.

为了使粒子看起来有一定的随机性,有些属性会有方差variance这个值吧。这样emitter发射的时候,可以根据这个方差来生成具有一定随机值的粒子。 比如这样可以生成具有一定随机数个数的粒子:

particleCount = emitNumber + (emitVariance * RandomNum());

然后添加粒子初始化的时候,可以根据这个方差来设置粒子的属性,比如这个粒子的life.

particle.timeToLive = emitter._life + emitter._lifeVar * cc.RANDOM_MINUS1_1();

代码结构

John van der Burg讲的更详细一些, 更多的是代码结构上的,它将粒子系统分为三个层次, 基本上是一层管一层。。

Particle Manager --> Particle System --> Particle

Particle Manager负责particle system 的管理, 一个particle system由很多有公共属性的粒子组成吧,便于粒子的管理. 这里的ParticleSystem就相当于上面的emitter.

然后基本框架可以是这样,其中ParticleManager是单例的(个人觉得代码里面称得上是Manager的一般都是单例模式的), ParticleManager和ParticleSystem 还有add和remove这一类的方法.

class Game:
def run():
while(true)
{
//other codes
self.particle_manager.update(time)
//other codes
} class ParticleManager:
def update(self, time):
for s in self.active_systems:
if system.isDie(time):
self.active_systems.remove(s)
else:
s.update class ParticleSystem:
def update(self, time):
for p in self.active_particles:
if p.isDie(time):
game.particle_pool.add(p)
self.active_particles.remove(p)
else:
p.update(time)

从画图上来说,一个粒子系统有如下的属性

  • Texture, 粒子的贴图,出于性能上的考虑吧, 一个粒子系统里面所有的粒子用相同的贴图.
  • blendMode, 混合模式. 类似于opengl里面的混合模式。

cocos2d粒子

cocos2d里面的粒子实现和上面个的基本上一致吧:), 不过cocos2d里木有ParticleManager。因为ParticleSystem也是从Node这个直接派生过来的,ParticleSystem的管理基本上可以交給Node了。

particle

Particle的属性

pos, startpos, color, deltaColor, size, deletaSize, rotation, deltaRotaion,
timeToLieve, modeA, modeB, ischangeColor, drawPos

modeA是重力模式,modeB是circular movement(不知道咋翻译哈) deltaColor和deltaSize 这两个属性使得粒子在运动的时候可以改变颜色和大小。

particle system

一个particle system包含了particle的一些属性还有它的属性值的方差, 这样就可以用来生成不同的粒子了。particle system里面的继承关系如下:

CCParticleSystemQuad --> CCParticleSystem

CCParticleSystem是基类它负责粒子的创建,初始化还有update,在update的中去遍历所有的粒子,然后计算更新粒子的属性。

然后CCParticleSystemQuad这个把粒子画出来(用quad画出来)如果是webgl的画,会采用bacthmode来优化。它实现了draw和visit这俩个函数。

particle system editor

在CCParticleExample.js里面有一些比如fire, sun, galaxy, flow等一些粒子效果,这些只是设置下参数而已。话说应该有很多粒子效果编辑器吧。这些编辑器也就是调调这些参数,然后导出.plist文件(cocos2d里面可以直接用.plist来初始化一个particle system)既然都有cocos2d-html5了,可以做一个web版的粒子编辑器。

Cocos2d-html5 笔记4: 粒子的更多相关文章

  1. Cocos2d html5 笔记 1: overview

    昨天接触到了cocos2d-html5的的东东了, 第一次看其源代码一头雾水,幸好samples目录下面有几个例子,可以从这个入手. MoonWarriors是一个射击类的游戏, 有点像以前玩的雷电, ...

  2. HTML5笔记3——Web Storage和本地数据库

    上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...

  3. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  4. Cocos2D v3.4.9粒子效果不能显示的原因分析及解决办法

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 在游戏App中为了衬托气氛我们往往使用一些特殊的图形效果,粒子 ...

  5. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

  6. css3 和 html5 笔记

    1.css3 ie下大部分不兼容 ie9以下 浏览器低版本不兼容 需要写 -webket-transition:1s -moz-transition: 1s -o-transition:1s tran ...

  7. COCOS2D 学习笔记

    cc.Node.scheduleUpdate:function () * schedules the "update" method.                       ...

  8. Html5笔记 表格 布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

随机推荐

  1. 记一个社交APP的开发过程——基础架构选型(转自一位大哥)

    记一个社交APP的开发过程——基础架构选型 目录[-] 基本产品形态 技术选型 最近两周在忙于开发一个社交App,因为之前做过一点儿社交方面的东西,就被拉去做API后端了,一个人头一次完整的去搭这么一 ...

  2. effective c++:private继承

    如果class间使用private继承关系,编译器就不会自动的将派生类转换为基类,而且private继承而来的成员都变为private属性. private继承意味着根据某物实现出,当我们想要避免重复 ...

  3. 【FFT】专题总结

    学了若干天终于学(bei)会了传说中的法法塔 感觉也没那么难用嘛 fft快速傅里叶变换 在大表课件上写就是解决高精乘的工具 其实很有理有据 fft就是用复数的折半引理优化两个多项式相乘的高端东西 他能 ...

  4. (mac)Android Studio安装以及Fetching android sdk component information超时的解决方案

    解决Mac下面Fetching android sdk component information加载过久问题, 关于windows中可以参考前面一篇文章 关于安装和下载可以百度一下地址.安装完成后, ...

  5. RFID第二次作业

    1.简述智能卡的发展,以及射频电子标签在其中所处的位置. 智能卡(Smart Card)又称为集成电路卡(IC卡),内部带有微处理器和存储单元等部件. 射频电子标签是一种非接触式的IC卡,是后期发展起 ...

  6. HTML5每日一练之OL列表的改良

    在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...

  7. Spring中的BeanUtils与apache commons中的BeanUtils用法[1]

    1. 前言 在开发过程中,经常遇到把要给一个bean的属性赋给另外一个bean.最笨的方法是每个属性都单独写一个,聪明的方法是应用反射写一个工具方法.考虑到这个需求基本每个程序员都会遇到,那么一定已经 ...

  8. chrome浏览器插件window resizer调试webapp页面大小

    chrome浏览器插件window resizer可以调整当前浏览器分辨率大小 可以自定义大小,以适合于andorid和iphone设备

  9. IIS中的上传目录权限设置问题

    虽然 Apache 的名声可能比 IIS 好,但我相信用 IIS 来做 Web 服务器的人一定也不少.说实话,我觉得 IIS 还是不错的,尤其是 Windows 2003 的 IIS 6(马上 Lon ...

  10. [Java线程] Java线程池ExecutorService

    示例 import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.u ...