今天看了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. 1.VS2010C++环境设置

    一.需要下载的软件 1.visual studio 2010\\xxzx\tools\编程工具\MICROSOFT\VISUAL.STUDIO\VISUAL.STUDIO.201032位cn_visu ...

  2. Codeforces Round #367 (Div. 2) A. Beru-taxi (水题)

    Beru-taxi 题目链接: http://codeforces.com/contest/706/problem/A Description Vasiliy lives at point (a, b ...

  3. 山东意外险风险信息推送V7非车

    <?xml version="1.0" encoding="GBK"?><Packet type="REQUEST" ve ...

  4. Python基础-函数(function)

    这里我们看看Python中函数定义的语法,函数的局部变量,函数的参数,Python中函数的形参可以有默认值,参数的传递是赋值操作,在函数调用时,可以对实参进行打包和解包  1,函数定义 关键字def引 ...

  5. CSS圆角,输入框提示信息,JS查找同级元素

    input { /*设置边框*/ border:1px solid #95B8E7; border-radius: 5px; /*设置圆角,IE不兼容*/ height:18px } placehol ...

  6. emWin(ucGui)数值显示例程 -【worldsing笔记】

    本例程下载:2.emWin5.26(ucGui)VS2008数字显示.zip   在emWin显示文本字符还是容易,我们也可以使用字符串和标准 C 库的函数来显示数值.然而,有时候这会是件困难的事.通 ...

  7. CSU1612Destroy Tunnels(强连通)

    Destroy Tunnels 原来早忘记了离散里含有这么一个叫传递闭包的东西 矩阵A的闭包B = A U A^2 U A^3 U ... 所以这里直接如果A[i][j]!= 0,建边i->j跑 ...

  8. lua安装和简单使用

    1.安装 下载地址:https://www.lua.org/download.html 编译之前要安装readline,直接用yum安装 yum -y install readline-devel n ...

  9. keycode按键对照表

    功能场景,鼠标在某区域内,比如多个条件的搜索框内,按下enter键让其具有,点击 [确定/搜索]按钮的功能.在编辑的区域内,点击enter键,让其有 [保存]按钮的功能.则可这样:$("#s ...

  10. ASP.NET MVC 4 中Jquery上传插件Uploadify简单使用-版本:3.2.1

    1.官网下载开发包:http://www.uploadify.com/download/,选择免费的Flash版本: 2.解压后,需要用到以下几个文件: 需要修改uploadify.css中取消上传按 ...