Pixi Minigames Adapter

PixiJS v7适配器，支持微信小游戏、抖音小游戏和 Web 环境。

特性

• 多端统一的 platform API（Web / WeChat / TT），用于系统信息、文件、音频等能力的兼容封装
• 一致的渲染初始化：createRenderer() 基于平台 SystemInfo 创建 Pixi Renderer，并统一 resolution/devicePixelRatio
• 交互（Interaction）插件：统一 pointer/touch/mouse 事件模型，支持 Pixi 常用交互事件（pointerdown/up/move/cancel、pointertap/tap、pointerenter/leave/over/out、pointerupoutside）
• 多点触控：事件携带 id（pointerId / touch identifier），可用于同时拖拽/按钮+摇杆等组合操作
• 坐标映射：将原生事件坐标映射到 Pixi 场景坐标系，兼容 Web canvas CSS 缩放、小游戏模拟器等差异
• Resize 同步：Web 环境 onWindowResize 时统一更新 renderer 以及交互映射的 viewRect，避免窗口拉伸后点击偏移

安装

npm install pixi-minigames-adapter

使用

在项目入口文件最顶部引入：

import 'pixi-minigames-adapter';

或者使用导出的方法：

import { createRenderer, platform } from 'pixi-minigames-adapter';

createRenderer

createRenderer() 会基于平台系统信息创建 Pixi Renderer，并在 Web 环境下监听窗口变化来同步：

• renderer.resize(width, height)
• renderer.__viewRect（canvas 的 DOM rect，用于交互坐标映射）

示例：

import * as PIXI from 'pixi.js'
import { createRenderer } from 'pixi-minigames-adapter'

const { renderer } = createRenderer()
const stage = new PIXI.Container()
PIXI.Ticker.shared.add(() => renderer.render(stage))

platform

platform 会在运行时指向 tt / wx / Web mock：

import { platform } from 'pixi-minigames-adapter'

const sys = platform.getSystemInfoSync()
console.log(sys.windowWidth, sys.windowHeight, sys.devicePixelRatio)

交互与坐标映射

本适配器将 Interaction 注册为 Pixi Renderer 插件（renderer.plugins.interaction），并提供：

• 事件：pointerdown/up/move/cancel、pointertap/tap、pointerupoutside、pointerenter/leave/over/out
• 事件数据：e.id、e.data.global、e.data.getLocalPosition(displayObject)

典型用法：

sprite.interactive = true
sprite.on('pointerdown', (e) => {
  const p = e.data.getLocalPosition(sprite.parent)
  sprite.position.set(p.x, p.y)
})

设计分辨率建议

适配器本身负责“真实屏幕尺寸渲染 + 输入坐标映射”。如果你希望像 Cocos 那样统一一个设计分辨率（例如 750x1334），建议在业务层使用一个根容器做缩放/偏移（fit/fill/fixedWidth 等策略），并在 onWindowResize 时重算布局。

Vite 配置

在 vite.config.js 中使用配套的工具：

import { getBuildEnv, getPlatformAdapterAlias, getPlatformDefine, miniGameConfigPlugin } from 'pixi-minigames-adapter/vite';

const env = getBuildEnv();
const { target, outDir } = env;

export default {
  define: getPlatformDefine(env),
  resolve: {
    alias: {
      ...getPlatformAdapterAlias(target)
    }
  },
  plugins: [
    miniGameConfigPlugin(target, outDir)
  ]
};

常见问题

Web 拉伸窗口后点击偏移

原因通常是 canvas 的 DOM 尺寸变化但交互映射未同步。适配器在 Web mock 的 platform.onWindowResize 中会同步：

• renderer.resize(...)
• renderer.__viewRect 更新

如果业务侧还有 UI 布局依赖窗口宽高（例如摇杆/按钮定位），需要在 platform.onWindowResize 中自行重排布局。