JavaScript 향상 튜토리얼——내장 입자 시스템

이 글은 H5EDU 조직의 공식 HTML5 트레이닝 튜토리얼입니다. 주로 소개하는 내용은 다음과 같습니다: JavaScript 향상 튜토리얼 - 내장 파티클 시스템

클래스 다이어그램을 보면 11가지의 내장된 파티클 시스템이 있음을 알 수 있습니다. Cocos2d-JS의 입자에서 이러한 입자의 속성은 모두 사전 정의되어 있으며 프로그램 코드에서 특정 속성을 개별적으로 수정할 수도 있습니다. 이전 섹션의 예제에서 이러한 속성의 설정을 이미 구현했습니다.


내장 파티클 시스템

11개의 내장 파티클 시스템에 대한 설명은 다음과 같습니다.

ParticleExplosion. 반경 모드에 속하는 폭발 입자 효과.

입자 불. 화염 입자 효과는 중력 경로 모드에 속합니다.

입자폭죽. 불꽃놀이 입자 효과는 중력 모드에 속합니다.

파티클플라워. 꽃 입자 효과는 중력 모드에 속합니다.

파티클갤럭시. 반경 모드에 속하는 은하 입자 효과.

파티클메테오. 유성 입자 효과는 중력 모드에 속합니다.

입자나선형. 반경 모드에 속하는 소용돌이 입자 효과.

입자눈. 눈 입자 효과는 중력 모드에 속합니다.

입자 연기. 연기 입자 효과는 중력 모드에 속합니다.

파티클썬. 태양 입자 효과는 중력 모드에 속합니다.

파티클레인. 비 입자 효과는 중력 모드에 속합니다.

이 11가지 입자의 특성은 방출 모드에 따라 다른 효과를 나타냅니다.


예: 내장 입자 시스템

아래에서는 예제를 통해 이러한 11가지 내장 입자 시스템을 보여줍니다. 이 예는 그림에 나와 있습니다. 왼쪽 그림은 작업 메뉴 장면입니다. 메뉴를 선택하면 위 그림의 액션 장면으로 들어갈 수 있습니다. 선택한 파티클 시스템의 효과는 아래 그림의 액션 장면에서 보여줍니다. 메뉴 장면으로 돌아가려면 오른쪽 하단에 있는 돌아가기 버튼을 클릭하세요.

2.jpg

내장 파티클 시스템 예시

MyActionScene 장면에 집중해 보겠습니다. MyActionScene.js 코드는 다음과 같습니다.

var MyActionLayer = cc.Layer.extend({
flagTag: 0,                                                                   ① ① ctor: 함수(flagTag) {
                                             > This.flagtag =


cc.log ("MyActionLayer Init Flagtag" + this.flagtag) 치료


var backMenuItem = new cc.LabelBMFont(" 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.anchorX = 0.5;
mn.anchorY = 0.5; ;


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("태그 = " + this.flagTag);  
        var sprite = this.getChildByTag(SP_TAG);  
        var size = cc.director.getWinSize();  
  
  
       var 시스템;  
        스위치(this.flagTag) {                                     ② 
            케이스 ActionTypes.kExplosion:  
              시스템 = 새로운 cc.Particle 폭발();  
                this.pLabel.setString("Explosion");  
                휴식;  
            사례 ActionTypes.kFire:  
               system = new cc.ParticleFire();  
                           system.texture = cc.textureCache.addImage(res.s_fire);              ③  
                this.pLabel.setString("불");  
                휴식;  
            사례 ActionTypes.kFireworks:  
               system = new cc.ParticleFireworks();  
                this.pLabel.setString("불꽃놀이");  
                휴식;  
            사례 ActionTypes.kFlower:  
               system = new cc.ParticleFlower();  
                this.pLabel.setString("꽃");  
                휴식;  
            사례 ActionTypes.kGalaxy:  
               system = new cc.ParticleGalaxy();  
                this.pLabel.setString("Galaxy");  
                휴식;  
            사례 ActionTypes.kMeteor:  
               system = new cc.ParticleMeteor();  
                this.pLabel.setString("Meteor");  
                휴식;  
            사례 ActionTypes.kRain:  
               system = new cc.ParticleRain();  
                this.pLabel.setString("Rain");  
                휴식;  
            사례 ActionTypes.kSmoke:  
               system = new cc.ParticleSmoke();  
                this.pLabel.setString("연기");  
                휴식;  
            사례 ActionTypes.kSnow:  
               system = new cc.ParticleSnow();  
                this.pLabel.setString("눈");  
                휴식;  
            사례 ActionTypes.kSpiral:  
               system = new cc.ParticleSpiral();  
                this.pLabel.setString("나선형");  
                휴식;  
            사례 ActionTypes.kSun:  
               system = new cc.ParticleSun();  
                this.pLabel.setString("Sun");  
                휴식;                                                  ④  
        }  
  
  
        system.x = size.width /2;  
        system.y = size.height /2;  
  
  
        this.addChild(system);  
    }  
});  
  
  
var MyActionScene = cc.Scene.extend({  
    onEnter: function () {  
        this._super();  
    }  
}); 
代码第②~4行创建了11种粒子系统，这里创建粒子系统时候tour采用了它们的默认属性值。其中this.pLabel.setString("XXX")函数是为场景中标签设置内容，这样在进入场景后可以看到粒子系统的name称。 

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