用事件隊列來處理pixi中的場景元素入場

時間 2019-11-08

標籤事件隊列處理 pixi 場景元素入場简体版

原文原文鏈接

在pixi中，添加一個精靈元素，你可能須要，先將貼圖load進來，而後才能添加到場景中去，因此通常會這麼操做json

                   Loader.add("tree","static/images/tree.png").load(function(){
                        for (var i = 0; i < 6; i++) {
                            let sprite = new PIXI.Sprite(
                                Resources.tree.texture
                            );
                            sprite.x = (i%8)*128;
                            sprite.y = ~~(i/8 + 2)*64;
                            sprite.type = 'tree';
                            sprite.scale.x = 0.1;
                            sprite.scale.y = 0.1;
                            sprite._zIndex = -1;
                            sprite.buttonMode = true;
                            sprite.interactive = true;
                            sprite.on('pointerdown', function(){
                                console.log(this)
                            });
                            app.stage.addChild(sprite);
                        }
                    });

不難看出，上述代碼，往場景中加了6棵樹。數組

當要添加不少不一樣元素的時候，須要的貼圖可能會不少，並且load貼圖是不能同時load兩張以上的貼圖，會報以下錯誤app

因此，雪碧圖就產生了，將多張資源貼圖整合在一塊兒，生成一張圖（用texturepacker工具能夠附帶生成一個json，不用手動計算每一幀所需的圖片在雪碧圖中的位置，很方便）工具

可是，我以爲這樣的話，全部的元素都會因爲雪碧圖的緣由，不得不將不一樣元素的業務邏輯集中寫在同一個雪碧圖load後的回調裏面，我的感受很雞肋，耦合度太高！this

因而，我想到了用事件隊列。spa

1、用事件隊列管理不一樣元素的業務邏輯3d

具體代碼，長這樣：code

效果是這樣的：對象

人物由上下左右鍵控制運動；blog

松鼠自由運動，每3秒隨機換個方向；

寸草不生的土地由136個精靈拼接而成；

一片水和6棵樹。

2、代碼解析

//任務隊列對象
var tasklist = {
            task:[],
            run:function(){
                var task = this.task.shift();
                if(task){
                    task();
                }
            },
            push:function(task){
                this.task.push(task)
            }
};

//單個任務
function tasktree(){
      Loader.add("tree","static/images/tree.png").load(function(){
            tasklist.run(); for (var i = 0; i < 6; i++) {
                 let sprite = new PIXI.Sprite(
                     Resources.tree.texture
                 );
                 sprite.x = (i%8)*128;
                 sprite.y = ~~(i/8 + 2)*64;
                 sprite.type = 'tree';
                 sprite.scale.x = 0.1;
                 sprite.scale.y = 0.1;
                 sprite.buttonMode = true;
                 sprite.interactive = true;
                 sprite.on('pointerdown', function(){
                      console.log(this)
                 });
                 app.stage.addChild(sprite);
            }
       });
}

//任務隊列初始化和開始運行
tasklist.task=[taskground,taskwater,taskperson,tasktree,taskanimal];
tasklist.run();