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時，鼠標懸浮會變成手型。

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 (幀率) ，而且把你的精靈圖循環渲染徹底從你的應用邏輯循環中分離出去。