Error: plugin 'spine' not found.

[Yang03]

import { registerCanvas } from "@galacean/appx-adapter/weapp";
import {
  Player,
  AbstractPlugin,
  registerPlugin,
} from "@galacean/effects/weapp";

import "@galacean/effects-plugin-spine";

[yiiqii]

小程序暂不支持插件的使用

[yiiqii]

已支持 Spine 插件：https://github.com/galacean/effects-miniprogram-demo/tree/wechat/miniprogram/pages/spine

[Yang03]

@yiiqii 目前是不是还不支持点击，小程序

[yiiqii]

所有的插件引入路径也要加平台

[Yang03]

加了 '@galacean/effects-plugin-spine/weapp'

'onItemClicked' does not exist in type 'PlayerConfig'

[yiiqii]

runtime 升级到 2.0 了，事件系统改造了，可以参考 https://github.com/galacean/effects-runtime/blob/main/web-packages/demo/src/interactive.ts#L16 改一下，比较简单

[Yang03]

我看了下，这个demo ，new player 的时候传递一个小程序的view node 给container 会报错 Container is not an HTMLElement 这个和我小程序环境有关， 如果我传递一个 canvas node ，绑定的事件没反应

import { registerCanvas } from '@galacean/appx-adapter/weapp';
import { Player } from '@galacean/effects/weapp';
import '@galacean/effects-plugin-spine/weapp';

export default () => {

  useReady(async () => {
    // try {
      const query = Taro.createSelectorQuery();
      const nodeCanvas = await new Promise(resolve => {
        query
          .select('#J-webglCanvas')
          .node()
          .exec(res => {
            resolve(res[0].node);
          });
      });

      const canvas = await registerCanvas({ id: nodeCanvas });

      const player = new Player({
        canvas,
        renderFramework: 'webgl',
        interactive: true,

        // reusable:true
      });
      // player.on('message', e => {
      //   console.info(`[player message] - item [${e.name}] trigger message, type [${e.phrase}].`);
      // });

      player.on('click', e => {
        console.info(`[player click] - item [${e.name}] clicked.`);
      });
      // .then((res) => {
      //   console.log(res);

      // })

      // const composition = await player.loadScene("https://mdn.alipayobjects.com/mars/afts/file/A*PHr2S4nmAM8AAAAAAAAAAAAADlB4AQ")
      const composition = await player.loadScene("https://mdn.alipayobjects.com/mars/afts/file/A*2rNdR76aFvMAAAAAAAAAAAAADlB4AQ")

      console.log(composition);

      const item = composition.getItemByName('lotteryBtn');

      item?.on('click', e => {
        console.info(`[item click] - item [${e.name}] clicked.`);
      });

  })

  return (
    <View style="width: 100vw; height: 100vh; background-color: black">
      <Canvas 
      type="webgl"
           id="J-webglCanvas"
          style="width: 100%; height: 100%;">
      </Canvas>
    </View>
  )

}

[yiiqii]

https://github.com/galacean/effects-miniprogram-demo/blob/wechat/miniprogram/pages/interactive/index.ts

[Yang03]

谢谢你的耐心回答，按照修改，报错了 TypeError: ele.getBoundingClientRect is not a function， getBoundingClientRect 我看appx-adapter 没有兼容

[yiiqii]

有的哦，看看你的 appx-adapter 是不是最新的版本

[Yang03]

@galacean/appx-adapter 0.3.0 最新版本，还是会报这个错

[yiiqii]

demo 都是正常的，根据 demo 检查一下自己的代码吧

[Yang03]

https://github.com/galacean/effects-runtime/blob/b23cc10423fa713635bf50b9e801954bebaaa46d/packages/effects-core/src/plugins/interact/event-system.ts#L91

  const canvas = await registerCanvas({ id : '#J-webglCanvas' });  // 这种有  getBoundingClientRect

 const canvas = await registerCanvas({ id : nodeCanvas });  // 这种没有

改成 传递id 的形式，点击事件回调也没有执行