PixiJS教程（四）：事件交互

Pixi.js是一个强大的JavaScript库，用于创建交互式2D游戏和图形。在Pixi.js中，事件交互指的是用户通过鼠标、触摸屏或其他输入设备与页面上的元素进行交互时触发的事件。以下是一些Pixi.js中常见的事件交互类型及其使用方式

鼠标事件

click	鼠标点击事件
mousedown	鼠标按下事件
mousemove	鼠标移动事件
mouseout	鼠标移出元素事件
mouseover	鼠标经过元素事件
mouseup	鼠标松开事件
rightclick	鼠标右键点击事件
rightdown	鼠标右键按下事件
rightup	鼠标右键松开事件

//初始化pixi容器添加到网页
const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight })
document.body.appendChild(app.view)

//创建一个精灵
const texture = PIXI.Texture.from('/public/player.png')
const sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite);

//为这个对象启用交互模式
sprite.interactive = true;


//设置点击事件
sprite.on('click', () => {
    console.log('被点击了');
})

当我鼠标点击精灵时，触发点击事件

如果要为精灵设置事件交互，需设置 interactive = true 否则无效

触摸屏事件

touchstart	触摸开始事件
touchmove	触摸移动事件
touchend	触摸结束事件

兼容鼠标和触摸屏的共同触发事件

pointerdown	触发按下事件
pointermove	触发移动事件
pointerout	触发移出事件
pointerover	触发经过事件
pointertap	触发点击事件
pointerup	触发松开事件

在Pixi.js中，你可以使用on()方法为对象添加事件监听器，并使用off()方法移除事件监听器。

此外，Pixi.js还支持更复杂的事件交互，如拖拽、旋转和缩放等。对于这些更复杂的交互，你可能需要使用额外的库，如Hammer.js，来帮助你实现这些功能。

注意

1. 指针对象：

   Pixi.js提供了makePointer方法用于创建指针对象，它可以自动确定用户是通过鼠标还是触摸进行交互。这有助于创建跨平台、跨设备的交互式应用程序。

2. 事件监听器参数：

   当为Pixi.js对象添加事件监听器时，回调方法通常会接收一个事件对象作为参数。这个事件对象包含了关于事件的详细信息，如事件的类型（type）和触发事件的对象（currentTarget）等。

3. 事件冒泡：

   在Pixi.js中，当事件被触发时，它可能会向上冒泡到父容器或更高级别的对象。这意味着，如果你在一个子对象上监听了一个事件，但它没有被处理（即没有调用event.stopPropagation()），那么父对象上的相同事件监听器也可能会被触发。

4. 事件解绑：

   使用off()方法可以解绑之前使用on()方法绑定的事件监听器。这对于在特定条件下停止监听事件或避免内存泄漏非常有用。

5. 第三方库：

   对于更复杂的交互效果，如拖拽、旋转和缩放等，Pixi.js提供了基本的支持，但使用第三方库（如Hammer.js）可能会更容易实现这些效果，并提供更多的功能和选项。

6. 自定义事件：

   除了内置的事件类型外，Pixi.js还支持自定义事件。你可以使用dispatchEvent方法触发自定义事件，并使用on和off方法来监听和处理这些事件。

7. 事件传递：

   在Pixi.js中，事件是通过事件队列进行传递的。这意味着当多个事件同时发生时，它们会按照特定的顺序（如先进先出）进行处理。

结尾

该教程采用PixiJS 7.2版本，本教程展示基本功能，更多功能请查阅官方API文档

https://pixijs.download/v7.x/docs/index.html

本人使用Vue3＋PixiJS开发的2D闯关打怪游戏，喜欢可以看看

Vue3＋PixiJS开发2D闯关打怪游戏，开发时长为6天，成功推出v1.0正式版