pixi.js 簡單交互事件(點擊、縮放、平移)

注意：本文代碼使用的Pixi.js版本為PixiJS 5.3.3

pixi中常用的鼠標交互事件：

//兼容鼠標和觸摸屏的共同觸發
type InteractionPointerEvents = "pointerdown" | "pointercancel" | "pointerup" | "pointertap" | "pointerupoutside" | "pointermove" | "pointerover" | "pointerout";
//觸摸屏觸發事件
type InteractionTouchEvents = "touchstart" | "touchcancel" | "touchend" | "touchendoutside" | "touchmove" | "tap";
//鼠標觸發事件
type InteractionMouseEvents = "rightdown" | "mousedown" | "rightup" | "mouseup" | "rightclick" | "click" | "rightupoutside" | "mouseupoutside" | "mousemove" | "mouseover" | "mouseout";

點擊事件

首先，我們再Stage中添加一個圓形按鈕，將其interactive屬性設置為true，並給它綁定一個點擊事件。

interactive 默認為false，不會響應交互事件。buttonMode屬性，默認為false，設置為true時，鼠標懸浮會變成手型。或者可以直接設置cursor來修改光標樣式

const point = new Graphics();
point.beginFill(0x0bef47)
point.drawCircle(300, 300, 50)
point.endFill()
point.interactive = true;//響應交互
point.buttonMode = true;//鼠標變手型
point.on("pointerdown", (event: PIXI.InteractionEvent) => {
    console.log("graphics")
})
app.stage.addChild(point)

同樣的還可以給舞台stage也添加一個點擊事件，因為stage其實就是一個特殊的Container

app.stage.interactive = true;//這個不能忘記
app.stage.on("pointerdown", (event: PIXI.InteractionEvent) => {
    console.log("stage")
})

先測試下，上面的點擊事件。

• 點擊point按鈕，控制台輸出graphics -> stage。由於點擊事件傳遞，觸發了按鈕和舞台的點擊事件。
• 點擊stage空白處，控制台無輸出。 這個原因其實是因為Container本身是無法被點擊的，需要有一個hitArea。graphics繼承於Container，在設定了圖形范圍后，其實就是確定了hitArea。或者可以直接設定點擊區域app.stage.hitArea = new PIXI.Rectangle(0, 0, 300, 300);

還可以在renderer上添加點擊事件,這個就可以直接響應在stage空白處的點擊事件。

app.renderer.plugins.interaction.on("pointerdown", (event: PIXI.InteractionEvent) => {
    console.log("renderer", event)
})

當然最外面還可以用window的點擊事件。

window.addEventListener("pointerdown", (event: any) => {
    console.log("window")  
})

最后，點擊point按鈕就可以看到控制台依次輸出的graphics -> stage -> renderer -> window。

平移事件（拖拽）

知道了全屏的點擊事件后，拖拽平移就簡單了。通過dragFlag判斷當前是否處於拖拽狀態，綁定mousemove事件，移動后修改stage的position即可。

let dragFlag = false;
let startPoint: any;
app.renderer.plugins.interaction.on("mousedown", (event: PIXI.InteractionEvent) => {
    dragFlag = true
    startPoint = { x: event.data.global.x, y: event.data.global.y }
})

app.renderer.plugins.interaction.on("mousemove", (event: PIXI.InteractionEvent) => {
    if (dragFlag) {
        const dx = event.data.global.x - startPoint.x;
        const dy = event.data.global.y - startPoint.y;
        app.stage.position.x += dx;
        app.stage.position.y += dy;
        startPoint = { x: event.data.global.x, y: event.data.global.y }
    }
})

app.renderer.plugins.interaction.on("mouseup", (event: PIXI.InteractionEvent) => {
    dragFlag = false
})

縮放事件

縮放就直接綁定到window上，每次鼠標滾動修改stage的scale即可。

window.addEventListener("mousewheel", (event: any) => {
    const step = event.wheelDelta > 0 ? 0.1 : -0.1
    if (app.stage.scale.x + step >= 0.1) {
        app.stage.scale.x += step
        app.stage.scale.y += step
    }
})

總結

總的來說pixi內置的交互方法還是比較簡單的，只能滿足一些簡單使用場景，更多使用樣例，可以到 https://pixijs.io/examples/#/interaction/dragging.js 進行預覽。
更復雜的使用場景可以引入第三方庫Tink來實現。

下面列舉一些好用的pixi第三方插件

• Bump: 一個為了游戲准備的完整的2D碰撞函數集.
• Tink: 拖放, 按鈕, 一個通用的指針和其他有用的交互工具集。
• Charm: 給Pixi精靈准備的簡單易用的緩動動畫效果。
• Dust: 創建像爆炸，火焰和魔法等粒子效果。
• Sprite Utilities: 創建和使用Pixi精靈的一個更容易和更直觀的做法，包括添加狀態機和動畫播放器。讓Pixi的工作變得更有趣。
• Sound.js:一個加載，控制和生成聲音和音樂效果的微型庫。包含了一切你需要添加到游戲的聲音。
• Smoothie: 使用真正的時間增量插值實現的超平滑精靈動畫。它也允許為你的運行的游戲和應用指定 fps (幀率) ，並且把你的精靈圖循環渲染完全從你的應用邏輯循環中分離出去。