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

2022-07-09 11:00:15 字數 1242 閱讀 5208

在pixi中,新增乙個精靈元素,你可能需要,先將貼圖load進來,然後才能新增到場景中去,所以一般會這麼操作

loader.add("

tree

","static/images/tree.png

").load(function());

}});

不難看出,上述**,往場景中加了6棵樹。

當要新增很多不同元素的時候,需要的貼圖可能會很多,而且load貼圖是不能同時load兩張以上的貼圖,會報如下錯誤

但是,我覺得這樣的話,所有的元素都會由於雪碧圖的原因,不得不將不同元素的業務邏輯集中寫在同乙個雪碧圖load後的**裡面,個人感覺很雞肋,耦合度過高!

於是,我想到了用事件佇列。

一、用事件佇列管理不同元素的業務邏輯

具體**,長這樣:

效果是這樣的:

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

松鼠自由運動,每3秒隨機換個方向;

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

一片水和6棵樹。

二、**解析

//

任務佇列物件

var tasklist =

},push:function(task)

};//

單個任務

function tasktree());

}});}//

任務佇列初始化和開始執行

tasklist.task=[taskground,taskwater,taskperson,tasktree,taskanimal];

tasklist.run();

該事件佇列機制的核心就在於利用陣列的shift()方法模擬了佇列的fifo規則,並且規避了不能同時load兩個以上貼圖的問題。

有了這個事件佇列機制,大大地降低了各個場景元素之間的雪碧圖載入的帶來的這種高耦合度問題。並且場景元素的載入與拆卸也會變得很便捷,只要不把這個任務放到事件佇列裡面那麼他就不會被被執行,並且不會影響其他**塊的執行。

事件佇列的理解

在前端的日常工作中,我們可能不會特別關注事件佇列這樣比較抽象的概念,初次接觸事件佇列是在面試的時候被問到,你知道的 一臉懵逼,然後就各種網上搜尋,以下是我的理解,如果有不正確的地方希望大神們指正 寫這篇部落格最主要的是參照了 逆光飛舞 的部落格 第一 首先我們得了解前端工程 js 與 程序 執行緒的...

js 事件迴圈,非同步,事件佇列

首先,現附上我查詢資料中用到較好的一張圖 這裡面就對事件迴圈,任務佇列,非同步操作介紹的很詳細.我的理解 較為粗略的一張圖 我認為的事件迴圈的主要邏輯 1.取乙個巨集任務來執行,執行完畢,下一步.2.取乙個微任務來執行,執行完畢,再取乙個微任務來執行,直到微任務全部取完.3.更新ui渲染 概念 巨集...

繫結事件 事件佇列 事件迴圈

一 繫結事件 1.html元素內繫結 2.js繫結事件 3.事件監聽繫結 1 點我一哈 2 我是js事件 3 我是監聽事件 4 二 定時器 1.settimeout延時器,延時執行,只執行一次 語法 settimeout callback,delay 2.清除延時器 cleartimeout 定時器...