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

傅小灰發表於2020-12-24
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 (幀率) ，並且把你的精靈圖迴圈渲染完全從你的應用邏輯迴圈中分離出去。

相關文章