Laya 爆改Laya IDE和Laya引擎使其支持2D粒子爆发模式

Laya 爆改Laya IDE和Laya引擎使其支持2D粒子爆发模式

@author ixenos 2019-11-01 19:47:26

1. 修改IDE的功能需要深入到/resources/app/out/vs/layaEditor路径下

　　1）其中，在/resources/app/out/vs/layaEditor/renderer/laya.editorUI.xml可以修改各个属性编辑器的开放属性，就像我们手动写IDE脚本一样，不过这个将会对应所有用到的实例；

 <Particle className="laya.editorUI.Particle" icon="Panel" groups="常用,通用,尺寸设置,发射范围,重力模式参数,gravity,半径模式,开始弧度,结束弧度,minStartColor,maxStartColor,minEndColor,maxEndColor,positionVariance" drag="0">
         <prop name="burstEnable" tips="是否爆发" type="bool" default="false" group="常用"/>
         <prop name="playDuration" tips="总播放时长" type="number" default="2147483647" group="常用"/>
 .....
 </Particle>

　　2）其中，比如粒子编辑器的播放模块就可以在/resources/app/out/vs/layaEditor/h5/renders/particle/editor.max.js进行修改

　　3）etc.  具体怎么修改IDE，直接用开发者工具进行调试定位功能代码模块

2.调试2D粒子功能得知，粒子的创建由发射基类EmitterBase的advanceTime方法负责：

 　　public function advanceTime(passedTime:Number = 1, burstNum:int = 1):void {
 　　　　_emissionTime -= passedTime;
 　　　　if (_emissionTime < 0) return;
 　　　　_frameTime += passedTime;
 　　　　if (_frameTime < minEmissionTime) return;
 　　　　while (_frameTime > minEmissionTime) {
 　　　　　　_frameTime -= minEmissionTime;
 8　　　　 　　emit();
 　　　　}
 　　}

这个方法在一个帧循环中进行，这意味着在限定时间内尽量绘制粒子，那么我们只需要在时间判断中直接输出所有粒子，那就等于在一帧中绘制所有粒子的运动，这就是爆炸效果：

 　　public function advanceTime(passedTime:Number = 1, burstNum:int = 1):void {
 　　　　_emissionTime -= passedTime;
 　　　　if (_emissionTime < 0) return;
 　　　　_frameTime += passedTime;
 　　　　if (_frameTime < minEmissionTime) return;
 　　　　while (_frameTime > minEmissionTime) {
 　　　　　　for (var i:int = 0; i < burstNum; i++) {
 　　　　　　　　_frameTime -= minEmissionTime;
 9 　　　　　　　　emit();
 　　　　　　}
 　　　　}
 　　}

这里开放burstNum参数用于控制爆炸效果(最大值是setting.maxParticles)

另外在ParticleSetting类中加入我们额外的参数:

 　　public class ParticleSetting {
 　　　　/**是否爆发*/
 　　　　public var burstEnable:Boolean = false;
 　　　　/**播放时长*/
 　　　　public var playDuration:Number = 2147483647;
 　　　　...
 　　}

同时需要修改粒子载体Particle2D：

         /**
          * 设置粒子配置数据
          * @param settings 粒子配置数据
          */
         public function setParticleSetting(setting:ParticleSetting):void {
             _setting = setting;

                     ...

             if (autoPlay) {
                 start();//这里将emitter.start()修改为我们自己封装的start()
                 play();
             }
         }        

         public function start():void {
             if(emitter){
                 if(_setting && _setting.playDuration>0){
                     emitter.start(_setting.playDuration);//同时我们也让IDE支持控制总播放时长
                 }else{
                     emitter.start();
                 }
             }
         }

         /**
          * 时钟前进
          * @param passedTime 时钟前进时间
          */
         public function advanceTime(passedTime:Number = 1):void {
             if (_canvasTemplate) {
                 _canvasTemplate.advanceTime(passedTime);
             }
             if (_emitter) {
                 if(_setting && _setting.burstEnable){
                     _emitter.advanceTime(passedTime, _setting.maxPartices);//这里传入maxPartices表示在一帧中全部开始绘制
                 }else{
                     _emitter.advanceTime(passedTime);
                 }
             }
         }

3.最终效果：

这些数值最终导出到配置文件.part中（实质是JSON）

4.在这个过程中有个曲折的地方就是，我想按官方的脚本方法来该IDE的属性面板，结果粒子的属性面板用脚本改不了，我以为没有办法了，就转而用Laya编写一个粒子编辑器，配合FileSaver.js将配置文件再保存出来，

最后再翻看的时候发现了可以直接爆改IDE。All Right! 条条大路通罗马。。。

附上这个粒子编辑器的地址：https://github.com/ixenos/laya-particle-editor