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