Pixi Minigames Adapter

PixiJS v8适配器，支持微信小游戏、抖音小游戏和 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 或 vite.config.ts 中使用配套的插件：

import { defineConfig } from 'vite'
import { resolve } from 'node:path'
import replace from '@rollup/plugin-replace'
import { miniGameConfigPlugin } from 'pixi-minigames-adapter/vite'

export default defineConfig({
  esbuild: {
    legalComments: 'none',
  },
  resolve: {
    alias: [
      // 这里根据项目需求配置业务 alias
      { find: /^~\//, replacement: `${resolve('src')}/` },
      { find: '@', replacement: resolve('.') },
    ]
  },
  plugins: [
    replace({
      preventAssignment: false,
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    // 所有的构建与运行配置（如 outDir, jsTarget, 别名, define, 剪枝等）都在这里自动注入
    miniGameConfigPlugin() 
    
    // 如果需要自定义输出目录，可以传参覆盖：
    // miniGameConfigPlugin({ outDir: 'my-custom-dist' })
  ]
})

常见问题

Web 拉伸窗口后点击偏移

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

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

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