JavaScript强化教程—— 内置粒子系统

转载 2016年08月29日 15:53:15
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 内置粒子系统
 
从类图中我们可以看到,Cocos2d-JS中有内置的11种粒子,这些粒子的属性都是预先定义好的,我们也可以在程序代码中单独修改某些属性,我们在上一节的实例中都已经实现了这些属性的设置。


内置粒子系统

内置的11种粒子系统说明如下: 

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

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

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

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

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

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

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

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

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

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

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

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


实例:内置粒子系统

下面我们通过一个实例演示一下这11种内置粒子系统。这个实例如图所示,左图是一个操作菜单场景,选择菜单可以进入到上图动作场景,在下图动作场景中演示选择的粒子系统效果,点击右下角返回按钮可以返回到菜单场景。

2.jpg

内置粒子系统实例

下面我们重点介绍一下场景MyActionScene,它的MyActionScene.js代码如下:

var MyActionLayer = cc.Layer.extend({  
    flagTag: 0,                         // 操作标志  
    pLabel: null,                                                       ①  
    ctor: function (flagTag) {  
       
        this._super();  
        this.flagTag = flagTag;  
  
  
        cc.log("MyActionLayer init flagTag " + this.flagTag);  
  
  
        var size = cc.director.getWinSize();  
  
  
        var backMenuItem = new cc.LabelBMFont("<Back", res.fnt_fnt);  
        var backMenuItem = new cc.MenuItemLabel(backMenuItem, this.backMenu, this);  
        backMenuItem.x = size.width - 100;  
        backMenuItem.y = 100;  
  
  
        var mn = cc.Menu.create(backMenuItem);  
        mn.x = 0;  
        mn.y = 0;  
        mn.anchorX = 0.5;  
        mn.anchorY = 0.5;  
        this.addChild(mn);  
  
  
        this.pLabel =  new cc.LabelBMFont("", res.fnt_fnt);  
        this.pLabel.x = size.width /2;  
        this.pLabel.y = size.height  - 50;  
        this.addChild(this.pLabel, 3);  
  
  
        return true;  
    },  
    backMenu: function (sender) {  
        cc.director.popScene();  
    },  
    onEnterTransitionDidFinish: function () {  
        cc.log("Tag = " + this.flagTag);  
        var sprite = this.getChildByTag(SP_TAG);  
        var size = cc.director.getWinSize();  
  
  
       var system;  
        switch (this.flagTag) {                                         ②  
            case ActionTypes.kExplosion:  
                system = new cc.ParticleExplosion();  
                this.pLabel.setString("Explosion");  
                break;  
            case ActionTypes.kFire:  
                system = new cc.ParticleFire();  
                            system.texture = cc.textureCache.addImage(res.s_fire);              ③  
                this.pLabel.setString("Fire");  
                break;  
            case ActionTypes.kFireworks:  
                system = new cc.ParticleFireworks();  
                this.pLabel.setString("Fireworks");  
                break;  
            case ActionTypes.kFlower:  
                system = new cc.ParticleFlower();  
                this.pLabel.setString("Flower");  
                break;  
            case ActionTypes.kGalaxy:  
                system = new cc.ParticleGalaxy();  
                this.pLabel.setString("Galaxy");  
                break;  
            case ActionTypes.kMeteor:  
                system = new cc.ParticleMeteor();  
                this.pLabel.setString("Meteor");  
                break;  
            case ActionTypes.kRain:  
                system = new cc.ParticleRain();  
                this.pLabel.setString("Rain");  
                break;  
            case ActionTypes.kSmoke:  
                system = new cc.ParticleSmoke();  
                this.pLabel.setString("Smoke");  
                break;  
            case ActionTypes.kSnow:  
                system = new cc.ParticleSnow();  
                this.pLabel.setString("Snow");  
                break;  
            case ActionTypes.kSpiral:  
                system = new cc.ParticleSpiral();  
                this.pLabel.setString("Spiral");  
                break;  
            case ActionTypes.kSun:  
                system = new cc.ParticleSun();  
                this.pLabel.setString("Sun");  
                break;                                                  ④  
        }  
  
  
        system.x = size.width /2;  
        system.y = size.height /2;  
  
  
        this.addChild(system);  
    }  
});  
  
  
var MyActionScene = cc.Scene.extend({  
    onEnter: function () {  
        this._super();  
    }  
});
在头文件中第①行代码定义了LabelBMFont类型的成员变量pLabel,用来在场景中显示粒子系统的名称。

我们在MyActionLayer的onEnterTransitionDidFinish函数中创建粒子系统对象,而不是在MyActionLayer的onEnter函数创建,这是因为MyActionLayer的onEnter函数调用时,场景还没有显示,如果在该函数中创建爆炸等显示一次的粒子系统,等到场景显示的时候,爆炸已经结束了,我们会看不到效果。

代码第②~④行创建了11种粒子系统,这里创建粒子系统时候都采用了它们的默认属性值。其中this.pLabel.setString("XXX")函数是为场景中标签设置内容,这样在进入场景后可以看到粒子系统的名称。

另外,如果在Web浏览器中运行还需要为粒子系统添加纹理,我们只在代码第③行添加了火粒子纹理,其它的粒子纹理添加类似。

点击进入JS强化教程

【Cocos2d-x游戏引擎开发笔记(11)】粒子系统----实现下雪效果

转载于:http://blog.csdn.net/zhy_cheng/article/details/8289683 先来说说我对粒子系统的了解吧,粒子系统是为了模仿自然世界的真实显...

[VC] 【游戏编程】构架游戏中的粒子系统 图文教程

转载自:http://www.52pojie.cn/thread-165772-1-1.html Expression GameEngine Particle System的实现效果   动...

Cocos2d-x内置粒子系统

从类图中我们可以看到,Cocos2d-x中有内置的11粒子,这些粒子的属性都是预先定义好的,我们也可以在程序代码中单独修改某些属性,我们在上一节的实例中都已经实现了这些属性的设置。内置粒子系统内置的1...

Cocos2d-JS内置粒子系统

从类图中我们可以看到,Cocos2d-JS中有内置的11种粒子,这些粒子的属性都是预先定义好的,我们也可以在程序代码中单独修改某些属性,我们在上一节的实例中都已经实现了这些属性的设置。内置粒子系统内置...

Cult3D基础教程——4.粒子系统

CULT3D 粒子系统的相关设置:1. 颜色设置简单的说整体粒子的整个周期分为产生期、激活期和消亡期。在颜色设置项的下方的三角形颜色滑块,从左往右依次设置粒子系统产生的一个周期的颜色。上方的小圆圈是设...

用JavaScript玩转游戏物理(一)运动学模拟与粒子系统

用JavaScript玩转游戏物理(一)运动学模拟与粒子系统 2010-06-14 16:19 by Milo Yip, 28245 阅读, 78 评论, 收藏, 编辑 系列简介 也...
  • pi9nc
  • pi9nc
  • 2013年07月30日 20:09
  • 1105

用JavaScript玩转游戏物理(一)运动学模拟与粒子系统

// Framework.js var canvas, ctx, isContinue, timeoutID; function start(canvasName, func) { ...
  • mypongo
  • mypongo
  • 2014年08月05日 17:34
  • 719

用JavaScript玩转游戏物理(一)运动学模拟与粒子系统

系列简介 也许,三百年前的艾萨克·牛顿爵士(Sir Issac Newton, 1643-1727)并没幻想过,物理学广泛地应用在今天许多游戏、动画中。为什么在这些应用中要使用物理学?笔者认为,...

【Qt OpenGL教程】19:粒子系统

这次教程中,我们将创建一个简单的粒子系统,并用它来创建一种喷射效果。利用粒子系统,我们可以实现爆炸、喷泉、流星之类的效果,听起来是不是很棒呢!...
  • cly116
  • cly116
  • 2015年08月06日 17:47
  • 1578

iOS 5中的UIKit粒子系统教程(泰然翻译组出品)

免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播。同时,转载时不要移除本申明。如产生任何纠纷,均与本博客所有人、发表该翻译稿之人无任何关系。谢谢合作...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript强化教程—— 内置粒子系统
举报原因:
原因补充:

(最多只允许输入30个字)