学习 PixiJS — 交互工具

说明

Pixi 内置一组功能有限的用于鼠标交互和触摸交互的方法，可是对于游戏和应用程序所需的丰富交互性，建议使用第三方库来简化操做，这篇文章介绍的是 Tink 库，它有通用的指针对象、拖放精灵、按钮对象、键盘控制 等一些有用的功能。

使用 Tink 库

要开始使用 Tink ，首先直接用 script 标签，引入 js 文件。

<script src="https://www.kkkk1000.com/js/tink.js"></script>

而后建立它的实例，它的构造函数须要两个参数，一个是 PIXI，另外一个是渲染器的 view 属性，也就是用做视图的 canvas 元素。

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

变量 t 如今表明 Tink 实例，可使用它来访问 Tink 的全部方法。

接下来，在游戏循环中调用 Tink 的 update 方法，来更新交互的对象，以下所示：

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

scaleToWindow 函数

这里提供一个 scaleToWindow 函数，它能够将画布缩放到浏览器窗口的最大大小。

scaleToWindow 函数的源码在这，使用方法以下所示：

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

它须要两个参数，一个是须要缩放的 canvas 元素，另外一个参数是可选的，表示与画布相邻的浏览器背景的颜色，它能够是任何RGB，HSLA 或十六进制颜色值，以及任何 HTML 颜色字符串，例如 blue 或者 red 。

scaleToWindow 函数还返回画布缩放到的缩放值。

设置缩放比例

Tink 的构造函数还能够传入第三个参数，这个可选的参数用来确保 Tink 使用的坐标将匹配画布的缩放像素坐标。在建立实例的时候能够直接使用 scaleToWindow 函数的返回值，做为第三个参数。

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

指针对象

使用 Tink 的 makePointer 方法能够建立指针对象，它能够自动肯定用户是鼠标交互仍是经过触摸进行交互。

let pointer = t.makePointer();

一般，一个指针对象足以知足大多数游戏或应用程序的需求，但你也能够根据须要制做多个指针对象。

可是若是你的游戏或应用程序须要进行复杂的多点触控交互，能够考虑使用 Hammer 库。

指针对象有三种事件：

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

查看示例

拖放精灵

你可使用 Tink 的 makeDraggable 方法向精灵添加拖放功能，它的参数是一个想要能够拖动的精灵或精灵列表。

示例：

t.makeDraggable(sprite1, sprite2, sprite3);

选择可拖动的精灵时，其堆叠顺序会发生变化，拖动的精灵会显示在其余精灵上方。鼠标箭头图标在可拖动的精灵上时也会变为手形。

查看示例

可拖动的精灵有一个名为 draggable 的 Boolean 属性，默认值为 true 。要禁用拖动，将draggable 设置为 false 便可。

anySprite.draggable = false;

将其设置为 true 将再次启用拖动。

要从拖放系统中彻底删除精灵或精灵列表，须要使用 makeUndraggable 方法，以下所示：

t.makeUndraggable(sprite1, sprite2, sprite3);

按钮

按钮是一个重要的用户界面（UI）组件。Tink 有一个 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 。而后将这三个图像作成纹理贴图集 ，你可使用 Texture Packer 这个工具来制做。

接下来，加载纹理图集到程序中。

//加载纹理贴图集，加载完后执行 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"]
];

数组中的成员其实没必要非要是纹理贴图集中的帧，若是你愿意，也可使用任何单个图像纹理。

最后，使用 Tink 的 button 方法建立按钮。使用 buttonFrames 数组做为第一个参数。

第二个和第三个参数是按钮的 x 和 y 坐标，默认值都是0 。

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

千万不要忘记将按钮添加到舞台上！

stage.addChild(playButton);

示例：

在示例中能够看到将指针移到按钮上时，光标变为手形图标。并且在视图中还会根据按钮状态和动做显示相应的文本。

查看示例

从本质上讲，按钮只是一个普通的 Pixi 动画精灵，所以你能够像对待其余动画精灵同样对待它。

制做交互式精灵

Tink 有另外一个名为 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 布尔属性，你可使用它们来检查每一个键的状态。

Tink 还有另外一个方便的方法 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;
}

最后，就可使用箭头键在四个方向上移动精灵了。

查看示例

注意：
使用高于 4.2.1 版本的 Pixi 时，须要将 tink.js 文件中的 extras.MovieClip 改成 extras.AnimatedSprite 。

上一篇 学习 PixiJS — 碰撞检测

下一篇 学习 PixiJS — 小精灵冒险