deepkolos/platformize

pixi 真机不显示 text,也不响应点击事件

seekcx opened this issue · 6 comments

复现代码:

// pixi.ts
import * as PIXI from '@pixi/core';
export * from '@pixi/core';
export * from '@pixi/text';
export * from '@pixi/events';
import { TickerPlugin } from '@pixi/ticker';
import { install } from '@pixi/unsafe-eval';
import { Application } from '@pixi/app';
import { Renderer, BatchRenderer } from '@pixi/core';
import { InteractionManager } from '@pixi/interaction';

function initializePixi() {
  // 注册插件
  install(PIXI);
  Application.registerPlugin(TickerPlugin);
  Renderer.registerPlugin('batch', BatchRenderer);
  Renderer.registerPlugin('interaction', InteractionManager);
}

/**
 * 创建 Pixi 应用
 *
 * @param canvas 画板
 * @returns 应用
 */
export function createApplication(canvas: any) {
  initializePixi();

  const app = new Application({
    view: canvas,
    width: canvas.width,
    height: canvas.height,
    backgroundColor: 0xffffff,
    antialias: true,
    resolution: window.devicePixelRatio,
  });

  return app;
}
// game.ts

import * as Pixi from './pixi';
import { Text } from '@pixi/text';
import { Graphics } from '@pixi/graphics';
import { WechatGamePlatform, PlatformManager } from 'platformize-pixi';

// 微信小游戏适配层
const canvas: any = wx.createCanvas();
const platform = new WechatGamePlatform(canvas);
PlatformManager.set(platform);
platform.init(Pixi, wx.createCanvas());

const app = Pixi.createApplication(canvas);

const textSprite = new Text('Hello, world!');
textSprite.position.set(100, 100);
app.stage.addChild(textSprite);

const boxSprite = new Graphics()
  .beginFill(0x00aaaa)
  .drawRect(50, 150, 250, 250)
  .endFill();
boxSprite.interactive = true;
boxSprite.on('pointerdown', () => {
  wx.showToast({ title: 'pointerdown' });
});
app.stage.addChild(boxSprite);

开发工具渲染结果:

image

真机渲染结果:
281648350362_ pic

开发工具点击方块:
image

真机点击没有任何反应,控制台也没有报错:
291648350365_ pic

@seekcx 应该是可以的, 只是依赖小游戏canvas 2d 绘制text的能力, 点击的问题注意下使用的版本是否为最新的platformize-pixi@6.2.2 pixi版本是否为: @pixi/core@6.2.1

实例可以参考这个 pixi 微信小游戏demo

https://github.com/deepkolos/platformize/tree/main/examples/pixi-wechat-game

真机运行效果

origin_img_v2_bffaf387-e25d-491f-90f2-d24953630e5g

模拟器

image

小程序真机

origin_img_v2_40926b89-b5c8-4a0f-b2f4-3659aba0a2cg

@seekcx 关于所提供的代码, 我这边的测试结果

origin_img_v2_41cf06c4-d1be-44ea-a1db-806feb4e3f5g

基于https://github.com/deepkolos/platformize/tree/main/examples/pixi-wechat-game

image

// text.ts
import * as PIXI from './pixi';

export function HelloWorldText(canvas) {
  PIXI.__init__();

  const app = new PIXI.Application({
    view: canvas,
    width: canvas.width,
    height: canvas.height,
    backgroundColor: 0xffffff,
    antialias: true,
    resolution: window.devicePixelRatio,
  });

  const textSprite = new PIXI.Text('Hello, world!');
  textSprite.position.set(100, 100);
  app.stage.addChild(textSprite);

  const boxSprite = new PIXI.Graphics().beginFill(0x00aaaa).drawRect(50, 150, 250, 250).endFill();
  boxSprite.interactive = true;
  boxSprite.on('pointerdown', () => {
    wx.showToast({ title: 'pointerdown' });
  });
  app.stage.addChild(boxSprite);

  return app;
}

是不是系统的原因?我测试的机器是ios。

在我这 example 打开是这个样子,无法正常运行:
311648390000_ pic

使用 example 改的 demo,运行状况和我前面描述的一样,文字不显示,事件不响应。

我测试用的版本是6.2.2,example 用的版本是 6.2.1

@seekcx 我这边没有IOS测试机, 估计是系统问题了, 或者说没适配到的系统问题

由于ios无法调试,我在 EventTarget 里加了一些console.log,发现ios上触发的事件名称比较奇葩,比如 touchstart,在 ios 上触发出来的名字叫 ontouchstart,这里看怎么兼容一下,我写了一小段兼容代码在ios上成功响应了事件(图2),但是没考虑其它地方的 break change 问题。

image

image

image