galacean / effects-runtime

It can load and render cool animation effects

Galacean Effects

It can load and render cool animation effects, The APIs provided by effects-core allow your engine to quickly access animation data such as layer and particle animation.

Native · Changelog · Report Bug · Request Feature · English · 中文

What you see is what you get

Install

npm install @galacean/effects

pnpm add @galacean/effects

Usage

<div id="J-Container"></div>

import { Player } from '@galacean/effects';

// 1. Instantiate a player
const player = new Player({
  container: document.getElementById('J-Container'),
});

// 2. Load and play the animation resource
player.loadScene('./demo.json');

Get the demo.json by using the Galacean Effects editor.

Documentation

• Development Documentation
• Integration Guide
• API Documentation
• Useful Links:
  • Developing

effects-runtime's Issues

[Feature]

🕗 领域

Galacean Effects Runtime

功能

我想咨询下在galacean中对于文本自动换行应该如何来处理，有没有比较好的解决方案。

功能的场景是？

基于模板来占位符来动态替换数据文本数据，对于某些文本比较多的情况下无法实现自动换行。

需要符合什么样的标准？

希望通过占位符实现文字多时自动换行功能。

其它信息

No response

[Bug] 对 player 实例进行销毁后，报错问题

🔎 搜索关键词

1.对player实例进行销毁后，报错问题。2.减少一些无用的conslog.log

🕗 版本信息

1.1.5

🖥️ 平台信息

• iOS
• Android
• Web
• 小程序（支付宝/微信）
• 微信小游戏
• macOS
• Windows
• Linux
• Other

💻 示例代码

No response

🙂 预期行为

应该是正常销毁

🙁 实际行为

⏯ 复现步骤

player.value && (await player.value.dispose());

其它信息

No response

[Bug] 小程序，安装教程使用，构建npm后显示module 'pages/index/@galacean/appx-adapter/weapp.js' is not defined, require args is '@galacean/appx-adapter/weapp'

🔎 搜索关键词

微信小程序 appx-adapter/weapp

🕗 版本信息

1.1.5

🖥️ 平台信息

• iOS
• Android
• Web
• 小程序（支付宝/微信）
• 微信小游戏
• macOS
• Windows
• Linux
• Other

💻 Sample Code

node_modules/@galacean/effects-math/index.js: 未找到npm包入口文件
node_modules/@galacean/effects-webgl/index.js: 未找到npm包入口文件
"dependencies": { "@galacean/appx-adapter": "^0.0.9", "@galacean/effects": "^1.1.5" }

VM3651:11 页面【pages/index/index]错误: Error: module 'pages/index/@galacean/appx-adapter/weapp.js' is not defined, require args is '@galacean/appx-adapter/weapp' at q (WASubContext.js?t=wechat&s=1705295175808&v=3.3.1:1) at n (WASubContext.js?t=wechat&s=1705295175808&v=3.3.1:1) at index.js? [sm]:2 at WASubContext.js?t=wechat&s=1705295175808&v=3.3.1:1 at p.runWith (WASubContext.js?t=wechat&s=1705295175808&v=3.3.1:1) at q (WASubContext.js?t=wechat&s=1705295175808&v=3.3.1:1) at <anonymous>:8:5 at evaluateRes (index.js:1) at index.js:1 at Object.invoke (index.js:1)(env: macOS,mp,1.06.2401020; lib: 3.3.1)

🙂 预期行为

正常加载并播放资源

🙁 实际行为

报错，无法正常引用

⏯ Steps to Reproduce

https://developers.weixin.qq.com/s/YuJLbemR73OZ

加载代码片段到本地后，执行npm install ，然后使用微信开发者工具-工具-构建npm

其它信息

No response

支持抖音原生吗

引入依赖报错 Cannot read property 'prototype' of undefined

WeChat MiniProgram

GE's export of dataUrl in the WeChat mini program is displayed normally on Apple phones, while it is displayed as blank on Android phones.

[Bug] 跟踪的点击块在别的地方也会触发

🔎 搜索关键词

none

🕗 版本信息

1.14

🖥️ 平台信息

• iOS
• Android
• Web
• 小程序（支付宝/微信）
• 微信小游戏
• macOS
• Windows
• Linux
• Other

💻 Sample Code

interact_10交互元素和sprite_7元素绑定，而且一起移动。
但是添加点击事件的时候，sprite_1在移动的时候点击偶尔也会触发

🙂 预期行为

只有点击与10号元素绑定的7号元素时才触发

🙁 实际行为

点击元素1也触发了，但是没有一次点击元素3触发，元素3是静态元素

⏯ Steps to Reproduce

<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import { Player } from '@galacean/effects'
import js1 from '@/assets/ttt/tt1.json'
const cvsRef = ref(null);
let player;
onMounted(() => {
  // 在这里使用cvsRef.value
  player = new Player({
    container: cvsRef.value,
    interactive: true,
    onItemClicked: handleClick,
  })
  js1.images.forEach(v=> {
    v.url = imagesUrlChange(v.url)
    v.webp = imagesUrlChange(v.webp)
  })
  player.loadScene(js1)
})

const handleClick = (item) => {
  console.log(item);
  if (item.id === '10'){
    alert('你干嘛~')
  }
}

const imagesUrlChange = (url) => {
  let baseUrl = import.meta.env.VITE_BASE_PATH;
  return new URL(url.replace('.\/', '..\/assets\/ttt/'), import.meta.url)
}

onBeforeUnmount(() => {
  player.dispose()
})
</script>

<template>
  <div id="cvs" ref="cvsRef" class="w-screen h-screen">

  </div>
</template>

<style scoped>

</style>

其它信息

No response

「用户文档」内的文字有误

[Bug] 文本节点 setFontSize 里有一个常数计算错误 && 字号变化后位置出现错误

🔎 Search Terms

FontItem

🕗 Version Info

1.2.1

🖥️ Platform Information

• iOS
• Android
• Web
• Mini Program (Alipay/WeChat)
• WeChat Mini Game
• macOS
• Windows
• Linux
• Other

💻 Code Sample

// Your code here

🙂 Expected Behavior

31.43 / 20 = 1.5715
不是 1.5175

🙁 Actual Behavior

31.43 / 20 = 1.5715
this.textLayout.lineHeight = this.textStyle.fontSize * 1.5175;

⏯ Steps to Reproduce

https://github.com/galacean/effects-runtime/blob/main/packages/effects-core/src/plugins/text/text-item.ts#L77

Additional Information about the Issue

No response

准备支持Flutter吗[Feature]

🕗 领域

Galacean Effects Runtime

功能

准备支持Flutter吗

功能的场景是？

Flutter客户端

需要符合什么样的标准？

No response

其它信息

No response

[Feature] 请问对PC 大屏的支持怎么样？

🕗 领域

Galacean Effects Runtime

功能

想在PC上使用，请问对PC 大屏的支持怎么样？

功能的场景是？

PC 大屏

需要符合什么样的标准？

No response

其它信息

No response

预览问题

为何在点击预览后 上传打包的文件显示 离线产物解析失败？