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

fanmingfei commented 3 years ago

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

注意

在使用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 commented 1 year ago

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

fanmingfei commented 1 year ago

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

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

zhiqiuyiye commented 1 year ago

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

fanmingfei commented 1 year ago

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

zhiqiuyiye commented 1 year ago

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

fanmingfei commented 1 year ago

@zhiqiuyiye 可以参考这个项目

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

zhiqiuyiye commented 1 year ago

@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了。可以还是点击不到。能告诉我更多的情况吗？

eva-engine / eva.js

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

注意

常见问题