cocos2d html5 粒子效果,Cocos2d-js粒子系统【原创】

今天在写cocos2d-js的项目遇到一个问题，就是要实现一种效果：火盆里一团火在熊熊燃烧，之前有了解过这一块的知识，这个功能叫做粒子系统，下面先简单介绍下粒子系统：

粒子系统是模拟自然界中的一些粒子的物理运动的效果，如烟雾、下雨、下雪、火、爆炸等，它们的共性是没有固定的形状，没有规则的几何外形，更重要的一点就是它们的外观会随着时间的推移而发生不确定的变化，它们符合物理学中的“测不准原理”。粒子系统发射的时候有两种模式：重力模式和半径模式。重力模式是让粒子围绕一个中心点做远离或接近运动，半径模式是让粒子围绕中心点旋转。

粒子系统分为两种：内置粒子系统和自定义粒子系统。内置的有11种粒子系统：

ParticleExplosion。爆炸粒子效果，属于半径模式。

ParticleFire。火焰粒子效果，属于重力径模式。

ParticleFireworks。烟花粒子效果，属于重力模式。

ParticleFlower。花粒子效果，属于重力模式。

ParticleGalaxy。星系粒子效果，属于半径模式。

ParticleMeteor。流星粒子效果，属于重力模式。

ParticleSpiral。漩涡粒子效果，属于半径模式。

ParticleSnow。雪粒子效果，属于重力模式。

ParticleSmoke。烟粒子效果，属于重力模式。

ParticleSun。太阳粒子效果，属于重力模式。

ParticleRain。雨粒子效果，属于重力模式。

这11种粒子的属性，根据它的发射模式不同,效果不同。

因为项目需求，并且我就自己也觉得很有意思，于是各种查阅资料之后，写了一个火盆里一团火在熊熊燃烧的代码，具体如下：

var DemoFire = cc.Layer.extend({

onEnter:function () {

this._super();

var _emitter = new cc.ParticleFire();

this.addChild(_emitter, 10);

_emitter.x = 100;

_emitter.y = 100;

_emitter.texture = cc.textureCache.addImage(s_fire);//.pvr"];

if (_emitter.setShapeType)

_emitter.setShapeType(cc.ParticleSystem.BALL_SHAPE);

// this.setEmitterPosition();

},

title:function () {

return "ParticleFire";

}

});

实现效果如下图：

可以发现火苗的样式比较丑，于是我又在原来的基础上做了些修改，并加上了火盆：

var DemoFire = cc.Layer.extend({

onEnter:function () {

this._super();

var size = cc.winSize;

// 火盆

var firepan = new cc.Sprite(res.firepan);

firepan.attr({

x:size.width/2 + 200,

y:100,

scale:0.6

})

this.addChild(firepan);

var fire = new cc.ParticleFire();

fire.texture = cc.textureCache.addImage(res.s_fire);//.pvr"];

if (fire.setShapeType)

fire.setShapeType(cc.ParticleSystem.BALL_SHAPE);

fire.x = 65; // 发射器的位置

fire.y = 50; // 发射器的位置

fire.scaleX = 0.5; // 设置火苗的宽度

fire.scaleY = 0.3; // 火苗的高度

fire.anchorY = 0.5;

fire.anchorY = 0;

firepan.addChild(fire, 10);

},

});

这样，火盆里一团火在熊熊燃烧的效果就实现了

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/19060.html

微信打赏

支付宝打赏

感谢您对作者erin的打赏，我们会更加努力！    如果您想成为作者，请点我