eva-engine / eva.js

Eva.js is a front-end game engine specifically for creating interactive game projects.
https://eva.js.org
MIT License
1.75k stars 108 forks source link

lottie无法设置大小,点击区域不正确 #172

Closed KevinIvy closed 2 years ago

KevinIvy commented 2 years ago

lottie无法设置大小,点击区域不正确

const go = new GameObject('heart', {
     size: { width: 200, height: 200 }, // 不生效
})

绑定onTap事件后,只能在左上角触发点击事件

在lottieFiles上下载的lottie json文件,本地引入

Lottie.prototype.onTap = function (name, callback) {
        var _this = this;
        var g = new Graphics();
        this.on('success', function () {
            var ele = _this.anim.querySelector(name);
            var display = ele.display;
            g.beginFill(0xffffff);
            g.drawRect(0, 0, 100, 100);  // 感觉应该跟这里有关
            g.endFill();
            g.alpha = 0;
            display.addChild(g);
            ele.display.interactive = true;
            ele.display.on('pointertap', function () {
                callback();
            });
        });
    };

另外文档能否更详细一点,比如具体如何进行适配

fanmingfei commented 2 years ago

可以用 GameObject 第二个参数的 scale 来控制大小。 点击的问题可以给我有问题的代码,我来看一下

关于适配: 固定高度的可以用以下代码 全屏的高度的 width 设置750,height 设置 window.innerHeight / window.innerWidth * 750 游戏里面的尺寸用750设计稿里的元素尺寸就可以了 目前这个是比较推荐的方案。

<style>
  #canvas {
    width: 100%;
    height: auto;
  }
</style>
<canvas id="canvas"></canvas>
import { Game } from '@eva/eva.js'
import { RendererSystem } from '@eva/plugin-renderer'

// 创建渲染系统
const rendererSystem = new RendererSystem({
  canvas: document.querySelector('#canvas'), // 可选,自动生成canvas 挂在game.canvas上
  width: 750, // 必填
  height: 1000, // 必填
  transparent: false, // 可选
  resolution: window.devicePixelRatio / 2, // 可选, 如果是2倍图设计 可以除以 2
  enableScroll: true, // 允许页面滚动
  renderType: 0 // 0:自动判断,1: WebGL,2:Canvas,建议android6.1 ios9 以下使用Canvas,需业务判断。
})

// 初始化游戏
const game = new Game({
  frameRate: 60, // 可选
  autoStart: true, // 可选
  systems: [rendererSystem]
})
KevinIvy commented 2 years ago

谢谢。scale可以解决问题,是否只有lottie不支持设置size呢?我试过image是没问题的。

lottie绑定点击的代码如下:

...

resource.addResource([
{
  name: 'Astronaut',
  type: 'LOTTIE',
  src: {
    json: {
      type: 'data',
      data: AstronautJson,
    },
  },
  preload: true,
},
])

...

const Astronaut = new Lottie({ resource: 'Astronaut' })
Astronaut.play([0, 0], { repeats: 0 })
Astronaut.onTap('StarInHand_Baby_Astronaute', () => {
  console.log(
    'lottie click !',
    window.event.changedTouches[0].pageX,
    window.event.changedTouches[0].pageY,
  )
  Astronaut.play([1, 61], { repeats: 0 })
})
const AstronautGO = new GameObject('AstronautGO', {
  scale: { x: 0.5, y: 0.5 },
})

AstronautGO.addComponent(Astronaut)

lottle的json数据是下载到本地以data方式加载

lottie.json.zip

截屏2021-12-19 18 38 24

点击区域的问题我用教程中的lottile试了一下是可以的,但是我自定义的lottie就有问题,很奇怪

fanmingfei commented 2 years ago

龙骨动画和Spine动画都没有办法设置宽高。因为无法确定它的动画边界到底在哪里

KevinIvy commented 2 years ago

响应太快了,了解到了,多谢大佬

fanmingfei commented 2 years ago

点击问题等明天上班让同事看看 你可以尝试一下导入这个网站检查一下:https://design.alipay.com/lolita

KevinIvy commented 2 years ago

好的,我去试试

jasonChen1982 commented 2 years ago

https://github.com/eva-engine/eva.js/blob/eba3261c47e9b51b8e06ea135b646da0031dc848/packages/plugin-renderer-lottie/lib/Lottie.ts#L88-L103

应该是这里写死了

bohexigua commented 2 years ago

问题原因:eva-lottie 最外层的容器并非是由所有子元素撑出来的 Rect,Container Size 取决于 lottie 产物。这和 CSS 中的布局很像,如 “绝对定位”,“浮动定位”,是不会占据空间的。

解决思路:AE 工程文件中新增一个空对象,空对象面积需要覆盖整个动画场景,在 Astronaut 中通过 Astronaut.onTap(nm, () => {}); 对这个空对象绑定点击事件。

image

KevinIvy commented 2 years ago

问题原因:eva-lottie 最外层的容器并非是由所有子元素撑出来的 Rect,Container Size 取决于 lottie 产物。这和 CSS 中的布局很像,如 “绝对定位”,“浮动定位”,是不会占据空间的。

解决思路:AE 工程文件中新增一个空对象,空对象面积需要覆盖整个动画场景,在 Astronaut 中通过 Astronaut.onTap(nm, () => {}); 对这个空对象绑定点击事件。

image

我试试,谢谢

fanmingfei commented 2 years ago

如果是给整个lottie元素加事件,可以使用 @eva/plugin-renderer-event 如果是想给lottie里面的元素加事件,可以通过空对象的方式

这里存在一个bug有待修复,给空对象的子元素设置100*100宽高时,可以自动扩展到空对象宽高响应点击,但是正常对象有问题。 后续这个地方改为hitArea的形式,可以解决这个问题。

fanmingfei commented 2 years ago

通过空对象的方式 可以解决目前遇到的问题。

KevinIvy commented 2 years ago

发现对lottie动画的transform做rotation旋转的时候,即使对设置了origin: {x: 0.5, y: 0.5},依然无法围绕中心点旋转,图片是没问题的,这个是否也是无法断定lottie边界的原因?

fanmingfei commented 2 years ago

是的,这个origin点是在设计的时候确定的。

KevinIvy commented 2 years ago

好的,了解了