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() 12                 play();
            }
        }        

        public function start():void {
            if(emitter){
                if(_setting && _setting.playDuration>0){
                    emitter.start(_setting.playDuration);//同時我們也讓IDE支持控制總播放時長 5                 }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表示在一幀中全部開始繪制 12                 }else{
                    _emitter.advanceTime(passedTime);
                }
            }
        }

 

3.最終效果：

這些數值最終導出到配置文件.part中（實質是JSON）

 

 

 4.在這個過程中有個曲折的地方就是，我想按官方的腳本方法來該IDE的屬性面板，結果粒子的屬性面板用腳本改不了，我以為沒有辦法了，就轉而用Laya編寫一個粒子編輯器，配合FileSaver.js將配置文件再保存出來，

最后再翻看的時候發現了可以直接爆改IDE。All Right! 條條大路通羅馬。。。

附上這個粒子編輯器的地址：https://github.com/ixenos/laya-particle-editor