tink.js # pixi辅助插件 — 中文翻译教程

本篇博客为中文翻译博客，转载请注明出处

Tink是Pixi渲染引擎的一套易于使用的交互工具。您可以使用Tink轻松创建:

• 拖放对象。
• 具有可定制动作的可点击、可触摸按钮。
• 一个通用的指针对象，同时适用于触摸和鼠标。
• 行为像按钮的交互式精灵。

(重要！这个库的目标是Pixi 3.0.11，这是Pixi最稳定的版本，也是唯一推荐使用的版本。当v4分支成熟时，这个库最终将升级到Pixi v4。)

安装配置

首先，链接到HTML文件中tink.js脚本。

<script src="tink.js"></script>

然后在JavaScript程序开始时创建一个新的Tink实例。它提供了对运行中的PIXI实例和renderer.view对象(HTML5 canvas)的引用。

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

变量t现在代表正在运行的Tink实例。一般来说，应该在所有资源加载完毕后创建一个新的Tink实例。

接下来在你的游戏循环中调用Tink的update方法来更新每帧Tink的所有交互对象。这里有一个简单的游戏循环可以达到这个目的:

译者注：在常规项目中，gameLoop是pixi的游戏循环函数，一秒60帧。结构是：资源加载的回调函数setup中，会执行循环刷新函数，循环刷新函数的回调函数就是gameLoop中。

function gameLoop(){
  //Start the loop
  requestAnimationFrame(gameLoop);

  //Update Tink
  t.update();

  //Optionally, you probably also want to render your root Pixi
  //container, the `stage` object, in this loop:
  //renderer.render(stage);
}

通用指针

Tink允许创建一个指针对象，它可以自动判断用户是用鼠标还是用触摸进行交互。使用Tink的makePointer方法创建一个指针。

pointer = t.makePointer();

通常一个指针对大多数游戏或应用程序来说就足够了，但是你可以根据需要做很多。(您的游戏或应用程序是否需要复杂的多点触控手势交互？然后考虑使用一个优秀的名为hammer.js的插件。

pointer对象有三种用户可定义的方法，可以对其进行编程:press、release和tap。当鼠标左键被按下，或者用户将他的手指按到设备屏幕上时，press被触发。当鼠标按钮被释放，或者用户从屏幕上抬起他或她时，release被触发。如果点击鼠标左键，或者用户点击屏幕，就会触发tap。

这里有一个如何在指针上定义这些方法的例子:

pointer.press = () => console.log("The pointer was pressed");
pointer.release = () => console.log("The pointer was released");
pointer.tap = () => console.log("The pointer was tapped");

也可以使用tap方法来捕捉鼠标点击。

pointer还有x和y属性，告诉你它在画布上的位置

pointer.x
pointer.y

它还有三个布尔属性，告诉你指针的当前状态:isUp、isDown和tapped。

pointer.isUp
pointer.isDown
pointer.tapped

如果出于某种原因需要隐藏指针，请使用布尔类型的visible可见属性。

//Hide the pointer
pointer.visible = false;

//Make the pointer visible
pointer.visible = true;

指针与精灵的交互

pointer有一个hitTestSprite方法，您可以使用它来确定指针是否正在接触一个精灵。

pointer.hitTestSprite(anySprite);

如果指针在一个精灵的矩形区域内，hitTestSprite将返回true。
hitTestSprite也适用于圆形精灵。只需给一个叫做circular的精灵添加一个属性，并将其设置为true。

anyCircularSprite.circular = true;

这标志着hitTestSprite使用循环碰撞检测算法，而不是默认的矩形算法。如果您想在指针位于精灵上方时显示手形图标，您可以将指针的cursor属性设置为“pointer”。当指针离开精灵的区域时，设置为“auto”将显示默认的箭头图标。这里有一些示例代码，您可以在游戏循环中使用它们来启用这个特性。

if (pointer.hitTestSprite(anySprite)) {
  
  //Display a hand icon while the pointer is over the sprite
  pointer.cursor = "pointer";
}
else {
  
  //Display the default arrow icon when the 
  //pointer moves outside the sprite's area
  pointer.cursor = "auto";
}

pointer. cursor只引用HTML5画布元素的style.cursor属性来实现这一点，使用HTML5规范中的两个标准值:“pointer”和“auto”。你可以指定任何你喜欢的光标样式值。(在网上搜索“超文本标记语言风格光标”将会找到一个完整的可能值列表。)如果你想通过Pixi的renderer.view查看对象，也可以手动设置。方法如下:

renderer.view.style.cursor = "cursorStyle";

这些光标样式仅在基于鼠标的界面上可见；在触摸界面上，它们被忽略了。

拖放精灵

你可以使用Tink的makeDraggable方法向精灵添加拖放功能。只要给它提供一个精灵，或者一个精灵列表，你就可以把它做成可拖动的。

t.makeDraggable(cat, tiger, hedgehog);

然后，可以使用鼠标或触摸拖动画布周围的精灵。

当选择一个可拖动的精灵时，它的堆叠顺序会改变，这样它就会出现在其他精灵之上。当鼠标经过一个可拖动的精灵时，它的箭头图标也会变成一只手。

可拖动精灵有一个称为draggable的布尔属性，该属性设置为true。要禁用拖动，请将draggable设置为false。

anySprite.draggable = false

将它设置回true将启用再次拖动。

要从拖放系统中完全删除一个精灵(或精灵列表)，请使用makeUndraggable方法，如下所示:

t.makeUndraggable(cat, tiger, hedgehog);

拖放是一个基本的交互功能，可用作制作拼图游戏、匹配游戏或复杂用户界面的基础。

按钮

按钮是一个重要的用户界面组件，你肯定想在游戏和应用程序中使用它。Tink有一个有用的按钮方法，可以让你快速创建它们。在展示如何制作按钮之前，先来看看什么是真正的按钮，以及如何使用它们。

什么是按钮？
你可以把按钮想象成“可点击/可触摸的精灵”。关于按钮，你需要知道的最重要的事情是它们有状态和动作。状态定义按钮的外观，动作定义按钮的功能。大多数按钮有三种状态:

• up:当指针没有碰到按钮时。
• over:当指针在按钮上时。
• down:指针按下按钮时。

基于触摸的界面只需要两种状态:up和down。

将在下一节中学习制作的button对象，可以通过button的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");

在我们将要制作的button对象中，能够在字符串属性中访问按钮的“按下”和“释放”操作，如下所示:

playButton.action

明白了吗？很好！那么我们实际上是如何制作按钮的呢？

制作按钮

首先，从定义三个按钮状态的三个图像开始。你可以称它们为“up.png”、“over.png”和“down.png”。然后将这三个图像添加到一个tileset中，或者作为纹理图谱中的帧。

虽然有三种图像状态是标准的，但有时按钮只有两种图像状态。对于只有触摸的按钮来说尤其如此，它们没有“过度”状态。我们将要制作的按钮对象将使用三个图像，如果它们可用的话，但是如果它只有两个，Tink将把它们分配到“向上”和“向下”状态。

接下来，发布纹理图谱并将其加载到您的程序中:

PIXI.loader
  .add("images/button.json")
  .load(setup);

然后在初始化你的精灵的setup函数中，创建一个数组，按顺序引用三个按钮框中的每一个:向上、向上和向下。

function setup() {

  //Create an alias for the texture atlas frame ids
  let id = PIXI.loader.resources["images/button.json"].textures;

  let buttonFrames = [
    id["up.png"],
    id["over.png"],
    id["down.png"]
  ];
}

这些不一定是帧id:你可以使用任何Pixi纹理的数组。

最后，使用Tink的button方法创建按钮。提供buttonFrames数组作为第一个参数。

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

第二个和第三个可选参数是按钮的x和y位置。别忘了把按钮添加到stage上(Pixi的根容器对象)！

stage.addChild(playButton);

你现在有了一个有用的按钮对象，可以在任何游戏或应用程序中使用。

制作互动精灵

Tink还有另一个有用的方法叫做makeInteractive，它允许添加按钮属性和方法到任何普通的精灵中。

t.makeInteractive(anySprite);

这可以让你把任何精灵变成一个按钮状的物体。您现在可以为精灵分配press或release方法，并访问它的state和action属性，如下所示:

anySprite.press = () => {
  //Do something when the pointer presses the sprite
};

anySprite.release = () => {
  //Do something when the pointer is released after pressing the sprite
};

如果你想让任何精灵表现得像一个按钮，使用makeInteractive！

键盘控制

keyboard是一种监听和捕获键盘事件的方法。它实际上只是一个方便的包装函数，用于HTMLkeyup键和keydown键事件，这样你就可以保持你的应用程序代码整洁，更容易写和读。这里是如何使用keyboard的方法。创建新的keyboard对象，如下所示:

let keyObject = t.keyboard(asciiKeyCodeNumber);

它的一个参数是你想听的键盘按键的ASCII码。为键盘对象指定按压和释放方法，如下所示:

keyObject.press = () => {
  //key object pressed
};
keyObject.release = () => {
  //key object released
};

键盘对象还具有isDown和isUp布尔属性，可以使用它们来检查每个键的状态。

Tink还有另一个方便的方法，叫做arrowControl，它可以让你用键盘上的箭头键快速创建一个4方向的精灵控制器。这对于快速制作游戏创意的原型很有用。为箭头控制方法提供您想要控制的子画面和您想要它移动的每帧像素:

t.arrowControl(anySprite, 5);

然后在你的游戏循环中更新你的精灵的速度，就像这样:

function gameLoop() {
  requestAnimationFrame(gameLoop);

  anySprite.x += vx;
  anySprite.y += vy
}

然后你可以使用箭头键在所有四个方向移动精灵。(为了让arrowControl方法起作用，你的精灵需要有vx和vy属性来引用精灵的速度。)