摘要：設(shè)置縮放比例的構(gòu)造函數(shù)還可以傳入第三個參數(shù)，這個可選的參數(shù)用來確保使用的坐標(biāo)將匹配畫布的縮放像素坐標(biāo)。將其設(shè)置為將再次啟用拖動。

Pixi 內(nèi)置一組功能有限的用于鼠標(biāo)交互和觸摸交互的方法，但是對于游戲和應(yīng)用程序所需的豐富交互性，建議使用第三方庫來簡化操作，這篇文章介紹的是 Tink 庫，它有通用的指針對象、拖放精靈、按鈕對象、鍵盤控制 等一些有用的功能。

要開始使用 Tink ，首先直接用 script 標(biāo)簽，引入 js 文件。

然后創(chuàng)建它的實例，它的構(gòu)造函數(shù)需要兩個參數(shù)，一個是 PIXI，另一個是渲染器的 view 屬性，也就是用作視圖的 canvas 元素。

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

變量 t 現(xiàn)在代表 Tink 實例，可以使用它來訪問 Tink 的所有方法。

接下來，在游戲循環(huán)中調(diào)用 Tink 的 update 方法，來更新交互的對象，如下所示：

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

這里提供一個 scaleToWindow 函數(shù)，它可以將畫布縮放到瀏覽器窗口的最大大小。

scaleToWindow 函數(shù)的源碼在這，使用方法如下所示：

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

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

scaleToWindow 函數(shù)還返回畫布縮放到的縮放值。

Tink 的構(gòu)造函數(shù)還可以傳入第三個參數(shù)，這個可選的參數(shù)用來確保 Tink 使用的坐標(biāo)將匹配畫布的縮放像素坐標(biāo)。在創(chuàng)建實例的時候可以直接使用 scaleToWindow 函數(shù)的返回值，作為第三個參數(shù)。

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

使用 Tink 的 makePointer 方法可以創(chuàng)建指針對象，它可以自動確定用戶是鼠標(biāo)交互還是通過觸摸進(jìn)行交互。

let pointer = t.makePointer();

通常，一個指針對象足以滿足大多數(shù)游戲或應(yīng)用程序的需求，但你也可以根據(jù)需要制作多個指針對象。

但是如果你的游戲或應(yīng)用程序需要進(jìn)行復(fù)雜的多點觸控交互，可以考慮使用 Hammer 庫。

指針對象有三種事件：

press：按下鼠標(biāo)左鍵或用戶將手指按到設(shè)備屏幕時觸發(fā)

release：釋放鼠標(biāo)按鍵時或者用戶將手指從屏幕上抬起時觸發(fā)

tap：單擊鼠標(biāo)左鍵，或者用戶點擊屏幕時觸發(fā)

用法：

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

指針對象還有 x 和 y 屬性，表示它在畫布上的位置。

pointer.x
pointer.y

它還有三個 Boolean 屬性，用于指示指針的當(dāng)前狀態(tài)：isUp，isDown 和 tapped 。

pointer.isUp
pointer.isDown
pointer.tapped

查看示例

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

pointer.hitTestSprite(anySprite);

如果指針位于精靈的矩形區(qū)域內(nèi)，則 hitTestSprite 將返回 true 。

查看示例

hitTestSprite 方法也適用于圓形精靈。只需將精靈的 circular 屬性設(shè)置為 true 即可。

anyCircularSprite.circular = true;

這樣 hitTestSprite 方法就使用圓形碰撞檢測算法，而不是默認(rèn)的矩形碰撞檢測算法。

查看示例

如果需要指針位于精靈上時顯示手形圖標(biāo)，可以將指針的 cursor 屬性設(shè)置為 pointer。當(dāng)指針離開精靈區(qū)域時將其設(shè)置為 auto 將顯示默認(rèn)箭頭圖標(biāo)。

示例：

if (pointer.hitTestSprite(anySprite)) {
    //當(dāng)指針在精靈上時顯示一個手形圖標(biāo)
    pointer.cursor = "pointer";
} else {
    //當(dāng)指針移出精靈區(qū)域時顯示默認(rèn)箭頭圖標(biāo)
    pointer.cursor = "auto";
}

pointer.cursor 只是引用 canvas 元素的 style.cursor 屬性來實現(xiàn)這一點。你也可以手動設(shè)置任何你喜歡的光標(biāo)樣式值。方法如下：

renderer.view.style.cursor  = "cursorStyle"

不過，這些光標(biāo)樣式僅適用于基于鼠標(biāo)的界面，在觸摸界面上，不會起作用。

示例：

在示例中可以看到將指針移到方形和圓形精靈上，光標(biāo)是變化的。文本還會根據(jù)指針接觸的內(nèi)容顯示 矩形! 或 圓形! 或 沒有接觸到精靈！。因為圓形精靈的 circular 屬性設(shè)置為 true，你能看到圓形的形狀會被準(zhǔn)確檢測到。以下是實現(xiàn)效果的關(guān)鍵代碼：

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";
}

查看示例

你可以使用 Tink 的 makeDraggable 方法向精靈添加拖放功能，它的參數(shù)是一個想要可以拖動的精靈或精靈列表。

示例：

t.makeDraggable(sprite1, sprite2, sprite3);

選擇可拖動的精靈時，其堆疊順序會發(fā)生變化，拖動的精靈會顯示在其他精靈上方。鼠標(biāo)箭頭圖標(biāo)在可拖動的精靈上時也會變?yōu)槭中巍?/p>

查看示例

可拖動的精靈有一個名為 draggable 的 Boolean 屬性，默認(rèn)值為 true 。要禁用拖動，將draggable 設(shè)置為 false 即可。

anySprite.draggable = false;

將其設(shè)置為 true 將再次啟用拖動。

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

t.makeUndraggable(sprite1, sprite2, sprite3);

按鈕是一個重要的用戶界面（UI）組件。Tink 有一個 button 方法，用來創(chuàng)建按鈕。在這之前讓我們先來了解下什么是按鈕。

你可以將按鈕理解為可點擊或者可觸摸的精靈。它們具有狀態(tài)和動作。狀態(tài)定義按鈕的外觀，動作定義它的作用。

大多數(shù)按鈕具有以下三種狀態(tài)：

up：指針未觸摸按鈕時的狀態(tài)

over：當(dāng)指針在按鈕上時的狀態(tài)

down：當(dāng)指針按下按鈕時的狀態(tài)

如下圖所示

基于觸摸的界面的按鈕只有兩種狀態(tài)： up 和 down。

你可以通過按鈕的 state 屬性訪問這些狀態(tài)，如下所示：

playButton.state

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

按鈕的動作，如下所示：

press：當(dāng)指針按下按鈕時

release：指針從按鈕釋放時

over：當(dāng)指針移動到按鈕區(qū)域時

out：當(dāng)指針移出按鈕區(qū)域時

tap：點擊按鈕時

你可以為這些動作定義一個函數(shù)，當(dāng)執(zhí)行了相應(yīng)操作時，會觸發(fā)這個函數(shù)，如下所示。

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 屬性可以知道當(dāng)前是 pressed 操作還是 released 操作。

playButton.action

首先，從定義三個按鈕狀態(tài)的三個圖像開始。三個圖像分別是 up.png，over.png 和 down.png 。然后將這三個圖像做成紋理貼圖集 ，你可以使用 Texture Packer 這個工具來制作。

接下來，加載紋理圖集到程序中。

//加載紋理貼圖集，加載完后執(zhí)行 setup 函數(shù)
loader.add("images/button.json").load(setup);

然后，在初始化精靈的 setup 函數(shù)中，創(chuàng)建一個數(shù)組，該數(shù)組有個三個成員，按順序分別對應(yīng)按鈕的 up, over, 和 down 的狀態(tài)。

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

數(shù)組中的成員其實不必非要是紋理貼圖集中的幀，如果你愿意，也可以使用任何單個圖像紋理。

最后，使用 Tink 的 button 方法創(chuàng)建按鈕。使用 buttonFrames 數(shù)組作為第一個參數(shù)。

第二個和第三個參數(shù)是按鈕的 x 和 y 坐標(biāo)，默認(rèn)值都是0 。

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

千萬不要忘記將按鈕添加到舞臺上！

stage.addChild(playButton);

示例：

在示例中可以看到將指針移到按鈕上時，光標(biāo)變?yōu)槭中螆D標(biāo)。而且在視圖中還會根據(jù)按鈕狀態(tài)和動作顯示相應(yīng)的文本。

查看示例

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

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

t.makeInteractive(anySprite);

這可以將任何精靈轉(zhuǎn)換為類似按鈕的對象，然后你可以為精靈添加 press 或 release 事件方法。并且可以訪問它的 state 和 action 屬性，如下所示：

anySprite.press = () => {
    //當(dāng)指針按下精靈時執(zhí)行某些操作
};
anySprite.release = () => {
    //按下精靈后釋放指針時執(zhí)行某些操作
};

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

查看示例

keyboard 是一種監(jiān)聽和捕獲鍵盤事件的方法。它實際上只是將原生的 keyup 和 keydown 事件封裝起來而已，以下是如何使用 keyboard 方法。創(chuàng)建一個新的鍵盤對象（keyObject ）：

let keyObject = t.keyboard(asciiKeyCodeNumber);

它的參數(shù)是你要監(jiān)聽的鍵盤鍵編碼，你可以在這里查看每個鍵對應(yīng)的編碼。然后你就可以為返回值（keyObject）定義 press 和 release 方法，如下所示：

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

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

Tink 還有另一個方便的方法 arrowControl ，可以讓你使用鍵盤方向鍵快速為精靈創(chuàng)建一個4個方向的控制器。這個方法需要兩個參數(shù)，第一個是需要控制的精靈，第二個是移動速度。

示例：

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

因為 arrowControl 方法能讓精靈移動，用到了精靈的速度屬性（vx，vy），所以需要給這兩個屬性一個初始值，然后在游戲循環(huán)中需要更新精靈的位置，如下所示：

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

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

查看示例

注意：
使用高于 4.2.1 版本的 Pixi 時，需要將 tink.js 文件中的 extras.MovieClip 改為 extras.AnimatedSprite 。

上一篇 學(xué)習(xí) PixiJS — 碰撞檢測

下一篇 學(xué)習(xí) PixiJS — 小精靈冒險