Eva.js 常见问题以及解决方案

[fanmingfei]

欢迎大家贡献常见问题和小技巧，在评论中添加哦～

注意

• 在使用Eva.js的时候，要保证官方仓库里的所有的插件和@eva/eva.js的npm包版本号保持一致。
• 一般图片尺寸建议在 1024*2048 以内，不然低性能会出现图片无法渲染问题。
• 一般组件创建后，会在第二帧生效，例如图片组件添加到游戏对象后，会在第二帧才会真正的创建图片的渲染对象，所有组件的属性修改一般都要在第二帧生效。
• 目前不支持多个 Game 实例，如果想渲染到多个 Canvas 可使用Game.prototype.loadScene

常见问题

• eva.js.esm.js:1431 can only add System
• Uncaught Error: addComponent recieve Component and Component Constructor

以上两个问题可能是引用了多个版本的 eva.js 导致此问题，保证 package.json 里面 eva 仓库内的 npm 包版本号一致。
一般遇到这种问题，保持 package.json 版本号一致，然后重装一下所有的npm包即可解决。

• You must specify the url property.
  addResource传入的资源，url属性是空的或者没设置。

• Texture Error: frame does not fit inside the base Texture dimensions

这个问题是因为帧动画的图片的宽高和 json 描述文件里面的宽高不一致导致的。一般图片尺寸建议在 1024*2048 以内。

• ios10 以下图片/帧动画不显示

图片尺寸过大，导致显存问题，降低图片尺寸可解决，一般图片尺寸建议在 1024*2048 以内。

• lottie动画不支持图片蒙层

可以将图片改成矢量形状

• lottie动画不支持文字图层

暂时可以使用图片解决

• 如何不使用url而是使用真实数据当作资源
  type值为data，使用data属性描述真实数据

resource.addResource([{
  name: 'resourceName',
  type: RESOURCE_TYPE.XXXX,
  src: {
    image: {
      type: 'data',
      data: new Image // 这里是Image对象
    },
    json: {
      type: 'data;,
      data: {xxx:'xxx'} // 这里是json对象
    }
  }
}])

• 如何更换Spine的Slot

import {Texture} from 'pixi.js'

// spine 为SpineComponent
spine.on('loaded', async () => { // 要确保Spine 加载成功，如果已经在在成功的话，后续代码可以放在任意位置。
    const pixiSpine = game.getSystem(RendererSystem).containerManager.getContainer(gameObject.id).children[0] // 获取pixiSpine
    const image = (await resource.getResource('imageName')).data.image // 获取你想要替换的图片，这个图片需要在resource里面加载
    const texture = PIXI.Texture.from(a.data.image) // 把图片转换成texture
    pixiSpine.hackTextureBySlotName('slotName', texture) // 替换slot的texture
})

[web-jv2020]

在超出父元素gamobject大小时，position定位的子元素如何在父内滑动，类似滚动条一样

[fanmingfei]

在超出父元素gamobject大小时，position定位的子元素如何在父内滑动，类似滚动条一样

如果不涉及复杂动画和渲染，可以考虑用DOM实现

[zhiqiuyiye]

你好，我想问问，怎么没有文本输入框控件？

[fanmingfei]

@zhiqiuyiye 没有做～ 输入框控件的原理就是在页面上创建一个input标签，放到对应的位置，你可以依照这个原理来做，当然欢迎提交自己的PR～

[zhiqiuyiye]

你好，我想问问，那个横屏的话，要怎么设置，我旋转了canvas过去，不过事件点击看着不对。

[fanmingfei]

@zhiqiuyiye 可以参考这个项目

https://github.com/eva-engine/FlashArrowMan
这两个文件
src/page/index.tsx:35
src/utils.ts

[zhiqiuyiye]

@zhiqiuyiye 可以参考这个项目

https://github.com/eva-engine/FlashArrowMan 这两个文件 src/page/index.tsx:35 src/utils.ts

为什么我放了你的utils进去执行了，可以还是点击不到。就是
let canvas = document.querySelector('#canvas');
makeHorizental(canvas);

const rendererSystem = new RendererSystem({
canvas: document.querySelector('#canvas'),
width: 1792,//横屏
height: 750,//
// width: 750,//竖屏
// height: 1792,//
antialias: true,
transparent:true,
// resolution: window.devicePixelRatio/2,
// backgroundColor: 0x101010,
enableScroll: false, // 允许页面滚动
});
// 横屏
game.scene.transform.size.width = 1792;
game.scene.transform.size.height = 750;

canvas，我不像你那么创建，只是放在html了。
可以还是点击不到。能告诉我更多的情况吗？