學習 PixiJS — 互動工具

說明

內建一組功能有限的用於，但是對於遊戲和應用程式所需的豐富互動性，建議使用第三方庫來簡化操作，這篇文章介紹的是 庫，它有通用的指標物件、拖放精靈、按鈕物件、鍵盤控制 等一些有用的功能。

使用 庫

要開始使用 ，首先直接用 script 標籤，引入 js 檔案。

<script src=""></script>

然後建立它的例項，它的建構函式需要兩個引數，一個是 PIXI，另一個是渲染器的 view 屬性，也就是用作檢視的 canvas 元素。

let t = new Tink(PIXI, renderer.view);

變數 t 現在代表 例項，可以使用它來訪問 的所有方法。

接下來，在遊戲迴圈中呼叫 的 update 方法，來更新互動的物件，如下所示：

function gameLoop(){
	requestAnimationFrame(gameLoop);
	state();
	t.update();
	renderer.render(stage);
}

scaleToWindow 函式

這裡提供一個 函式，它可以將畫布縮放到瀏覽器視窗的最大大小。

函式的，使用方法如下所示：

let scale = scaleToWindow(renderer.view, borderColor);

它需要兩個引數，一個是需要縮放的 canvas 元素，另一個引數是可選的，表示與畫布相鄰的瀏覽器背景的顏色，它可以是任何RGB，HSLA 或十六進位制顏色值，以及任何 HTML 顏色字串，例如 blue 或者 red 。

函式還返回畫布縮放到的縮放值。

設定縮放比例

的建構函式還可以傳入第三個引數，這個可選的引數用來確保 使用的座標將匹配畫布的縮放畫素座標。在建立例項的時候可以直接使用 函式的返回值，作為第三個引數。

let scale = scaleToWindow(renderer.view);
let t = new Tink(PIXI, renderer.view, scale);

指標物件

使用 的 makePointer 方法可以建立指標物件，它可以自動確定使用者是滑鼠互動還是透過觸控進行互動。

let pointer = t.makePointer();

通常，一個指標物件足以滿足大多數遊戲或應用程式的需求，但你也可以根據需要製作多個指標物件。

但是如果你的遊戲或應用程式需要進行復雜的多點觸控互動，可以考慮使用 庫。

指標物件有三種事件：

• press：按下滑鼠左鍵或使用者將手指按到裝置螢幕時觸發
• release：釋放滑鼠按鍵時或者使用者將手指從螢幕上抬起時觸發
• tap：單擊滑鼠左鍵，或者使用者點選螢幕時觸發

用法：

pointer.press = () => console.log("觸發 pressed 事件");
pointer.release = () => console.log("觸發 released 事件");
pointer.tap = () => console.log("觸發 tapped 事件");

指標物件還有 x 和 y 屬性，表示它在畫布上的位置。

pointer.x
pointer.y

它還有三個 Boolean 屬性，用於指示指標的當前狀態：isUp，isDown 和 tapped 。

pointer.isUp
pointer.isDown
pointer.tapped

指標物件與精靈的互動

指標物件有一個 hitTestSprite 方法，可以使用它來檢測指標是否正在接觸精靈。

pointer.hitTestSprite(anySprite);

如果指標位於精靈的矩形區域內，則 hitTestSprite 將返回 true 。

hitTestSprite 方法也適用於圓形精靈。只需將精靈的 circular 屬性設定為 true 即可。

anyCircularSprite.circular = true;

這樣 hitTestSprite 方法就使用圓形碰撞檢測演算法，而不是預設的矩形碰撞檢測演算法。

如果需要指標位於精靈上時顯示手形圖示，可以將指標的 cursor 屬性設定為 pointer。當指標離開精靈區域時將其設定為 auto 將顯示預設箭頭圖示。

示例：

if (pointer.hitTestSprite(anySprite)) {
    //當指標在精靈上時顯示一個手形圖示
    pointer.cursor = "pointer";
} else {
    //當指標移出精靈區域時顯示預設箭頭圖示
    pointer.cursor = "auto";
}

pointer.cursor 只是引用 canvas 元素的 style.cursor 屬性來實現這一點。你也可以手動設定任何你喜歡的游標樣式值。方法如下：

renderer.view.style.cursor  = "cursorStyle"

不過，這些游標樣式僅適用於基於滑鼠的介面，在觸控介面上，不會起作用。

示例：

在示例中可以看到將指標移到方形和圓形精靈上，游標是變化的。文字還會根據指標接觸的內容顯示 矩形! 或 圓形! 或 沒有接觸到精靈！。因為圓形精靈的 circular 屬性設定為 true，你能看到圓形的形狀會被準確檢測到。以下是實現效果的關鍵程式碼：

if (pointer.hitTestSprite(rectangle)) {
    message.text = "矩形!";
    pointer.cursor = "pointer";
} else if (pointer.hitTestSprite(circle)) {
    message.text = "圓形!";
    pointer.cursor = "pointer";
} else {
    message.text = "沒有接觸到精靈！";
    pointer.cursor = "auto";
}

拖放精靈

你可以使用 的 makeDraggable 方法向精靈新增拖放功能，它的引數是一個想要可以拖動的精靈或精靈列表。

示例：

t.makeDraggable(sprite1, sprite2, sprite3);

選擇可拖動的精靈時，其堆疊順序會發生變化，拖動的精靈會顯示在其他精靈上方。滑鼠箭頭圖示在可拖動的精靈上時也會變為手形。

可拖動的精靈有一個名為 draggable 的 Boolean 屬性，預設值為 true 。要禁用拖動，將draggable 設定為 false 即可。

anySprite.draggable = false;

將其設定為 true 將再次啟用拖動。

要從拖放系統中完全刪除精靈或精靈列表，需要使用 makeUndraggable 方法，如下所示：

t.makeUndraggable(sprite1, sprite2, sprite3);

按鈕

按鈕是一個重要的使用者介面（UI）元件。 有一個 button 方法，用來建立按鈕。在這之前讓我們先來了解下什麼是按鈕。

什麼是按鈕?

你可以將按鈕理解為可點選或者可觸控的精靈。它們具有狀態和動作。狀態定義按鈕的外觀，動作定義它的作用。

大多數按鈕具有以下三種狀態：

• up：指標未觸控按鈕時的狀態
• over：當指標在按鈕上時的狀態
• down：當指標按下按鈕時的狀態

如下圖所示

基於觸控的介面的按鈕只有兩種狀態： up 和 down。

你可以透過按鈕的 state 屬性訪問這些狀態，如下所示：

playButton.state

state 屬性可能有 up，over 或 down 這三個字串值，你可以在遊戲邏輯中使用它。

按鈕的動作，如下所示：

• press：當指標按下按鈕時
• release：指標從按鈕釋放時
• over：當指標移動到按鈕區域時
• out：當指標移出按鈕區域時
• tap：點選按鈕時

你可以為這些動作定義一個函式，當執行了相應操作時，會觸發這個函式，如下所示。

playButton.press = () => console.log("pressed");
playButton.release = () => console.log("released");
playButton.over = () => console.log("over");
playButton.out = () => console.log("out");
playButton.tap = () => console.log("tapped");

在按鈕物件中，使用 action 屬性可以知道當前是 pressed 操作還是 released 操作。

playButton.action

製作按鈕

首先，從定義三個按鈕狀態的三個影像開始。三個影像分別是 up.png，over.png 和 down.png 。然後將這三個影像做成 ，你可以使用 這個工具來製作。

接下來，載入紋理圖集到程式中。

//載入紋理貼圖集，載入完後執行 setup 函式
loader.add("images/button.json").load(setup);

然後，在初始化精靈的 setup 函式中，建立一個陣列，該陣列有個三個成員，按順序分別對應按鈕的 up, over, 和 down 的狀態。

let id = PIXI.loader.resources["images/button.json"].textures;
let buttonFrames = [
    id["up.png"],
    id["over.png"],
    id["down.png"]
];

陣列中的成員其實不必非要是紋理貼圖集中的幀，如果你願意，也可以使用任何單個影像紋理。

最後，使用 的 button 方法建立按鈕。使用 buttonFrames 陣列作為第一個引數。

第二個和第三個引數是按鈕的 x 和 y 座標，預設值都是0 。

let playButton = t.button(buttonFrames, 32, 96);

千萬不要忘記將按鈕新增到舞臺上！

stage.addChild(playButton);

示例：

在示例中可以看到將指標移到按鈕上時，游標變為手形圖示。而且在檢視中還會根據按鈕狀態和動作顯示相應的文字。

從本質上講，按鈕只是一個普通的 Pixi 動畫精靈，因此你可以像對待其他動畫精靈一樣對待它。

製作互動式精靈

有另一個名為 makeInteractive 的方法，它允許你向任何普通精靈新增按鈕屬性和方法。

t.makeInteractive(anySprite);

這可以將任何精靈轉換為類似按鈕的物件，然後你可以為精靈新增 press 或 release 事件方法。並且可以訪問它的 state 和 action 屬性，如下所示：

anySprite.press = () => {
    //當指標按下精靈時執行某些操作
};
anySprite.release = () => {
    //按下精靈後釋放指標時執行某些操作
};

function play() {
    stateMessage.text = `State: ${anySprite.state}`;
    actionMessage.text = `Action: ${anySprite.action}`;
}

鍵盤控制

keyboard 是一種監聽和捕獲鍵盤事件的方法。它實際上只是將原生的 keyup 和 keydown 事件封裝起來而已，以下是如何使用 keyboard 方法。建立一個新的鍵盤物件（keyObject ）：

let keyObject = t.keyboard(asciiKeyCodeNumber);

它的引數是你要監聽的，你可以在檢視每個鍵對應的編碼。然後你就可以為返回值（keyObject）定義 press 和 release 方法，如下所示：

keyObject.press = () => {
    //按鍵按下時執行某些操作
};
keyObject.release = () => {
    //按鍵釋放時執行某些操作
};

keyObject 還具有 isDown 和 isUp 布林屬性，你可以使用它們來檢查每個鍵的狀態。

還有另一個方便的方法 arrowControl ，可以讓你使用鍵盤方向鍵快速為精靈建立一個4個方向的控制器。這個方法需要兩個引數，第一個是需要控制的精靈，第二個是移動速度。

示例：

t.arrowControl(anySprite, 5);
anySprite.vx = 0;
anySprite.vy = 0;

因為 arrowControl 方法能讓精靈移動，用到了精靈的速度屬性（vx，vy），所以需要給這兩個屬性一個初始值，然後在遊戲迴圈中需要更新精靈的位置，如下所示：

function play() {
    anySprite.x += anySprite.vx;
    anySprite.y += anySprite.vy;
}

最後，就可以使用箭頭鍵在四個方向上移動精靈了。

注意：
使用高於 版本的 時，需要將 檔案中的 extras.MovieClip 改為 extras.AnimatedSprite 。