内容简介:要开始使用然后创建它的实例,它的构造函数需要两个参数,一个是 PIXI,另一个是渲染器的 view 属性,也就是用作视图的 canvas 元素。
说明
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 — 交互工具》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 以太坊交互工具
- Goscan:一款功能强大的交互式网络扫描工具
- 基于Python实现交互式数据可视化的工具(用于Web)
- Ctftool:一款功能强大的交互式CTF漏洞利用工具
- GNU Wget 1.20 发布,非交互式命令行下载工具
- iOS 12 人机交互指南:交互(User Interaction)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。