@clayzo/webgl-玩家

轻量级Clayzo WebGL2播放器. 它嵌入了引擎核心和内置效果,因此回放不需要认证请求,舞台WASM文件,或Clayzo账户.

对于iOS和macOS应用程序,同样的文档通过Swift软件包在本地播放 克莱佐/克莱佐-摇摆。 。 。 .

npm install @clayzo/webgl-player

import { createPlayer, checkCoverage } from "@clayzo/webgl-player";

// `loaders` is optional: a bundle's, or your own font and image loaders.
const coverage = await checkCoverage(document, loaders);
if (!coverage.supported) throw new Error(coverage.reasons.join("; "));

const player = await createPlayer({ canvas, document, loaders, interactive: true });
player.play();

稳定的公共表面是: createPlayer(), (中文(简体) ), checkCoverage(), (中文(简体) ), registerFont(), (中文(简体) ), CreatePlayerOptions,以及 PlayerHandle发动机手柄、遮光源、渲染器类、WASM ABI和上下文池内部是故意私密的.

React and Next 客户端可以使用可选客户端的切入点 :

import { ClayzoPlayer } from "@clayzo/webgl-player/react";

export function Hero() {
  return (
    <ClayzoPlayer
      document={document}
      poster="/hero.poster.webp"
      posterTick={240}
      label="A cube folding into the logo"
    />
  );
}

组件显示 poster 一次加载玩家,只当它靠近取景口时,然后淡出 posterTick 和游戏. clayzo package hero.json --poster 240 写入匹配 hero.poster.webp当读者要求减少其动议时 posterTick· ; reducedMotion="pause" 停止它现在的位置 "ignore" 反正还是会玩的. autoplay={false} 别动, decorative 隐藏在屏幕阅读器中而不是 label,以及 fallback 如果玩家无法创建,则显示. document 可能会是 null 并装入.

没有反应的页面可以使用 <clayzo-player> 元素,具有相同行为:

<script type="module">import "@clayzo/webgl-player/element";</script>
<clayzo-player src="/hero.clayzo" poster="/hero.poster.webp" label="A cube folding into the logo"></clayzo-player>

src 是引擎 JSON 文档或 .clayzo 捆绑 属性为 poster, (中文(简体) ), poster-tick (默认到滴答 捆绑的海报 是在), autoplay, (中文(简体) ), loop, (中文(简体) ), interactive, (中文(简体) ), reduced-motion, (中文(简体) ), label 财务报告和审定财务报表 decorative; 设置 autoplay="false" 关闭一个。 这个元素有 play(), (中文(简体) ), pause(), (中文(简体) ), seek(), (中文(简体) ), setInput() 财务报告和审定财务报表 fire()和火灾 ready 财务报告和审定财务报表 error。如果玩家无法创建,则显示其中的内容.

国家

有状态机器的文档一次播放一个状态,如闲置,徘徊,按住,加载和完成等. 指向活动、投入和 setState 将其移动到状态之间,玩家在显示每个变化的帧后打回.

const player = await createPlayer({
  canvas,
  document,
  onStateChange: ({ from, to }) => console.log(from.name, "→", to.name),
});
player.play();
player.setInput("loading", true);
player.setState("done", { instant: true });
player.currentState; // { id, name }

initialState 从另一个状态开始, onComplete 报告一旦达到尾声的状态 onPointer 报告帆布上和受打击地区的事件. setReducedMotion(true) 在最后一帧显示每个状态,而不是动画,当读者要求减少运动时,组件会这样做. stateMachine: false 播放简单的时间表.

页面上的许多玩家

玩家分享了GPU上下文,但每个像素仍需要内存,手机会关闭一个使用过多的页面. 玩家在屏幕附近保持由玩家绑定的内存,而不是在页面上有多少人:

• 屏幕外玩家停止绘图( O)pauseWhenOffscreen,默认为).
• 玩家不止一个取景口,还可以释放出他们的GPU内存和画布的像素(releaseWhenOffscreen,默认为). 画布保持其布局框. 在屏幕的半个取景口内,玩家再次绘制出相同的帧后才能被看到. 钟不跑而去,所以 tick 和游戏状态 正是它留下他们.
• resolution: "display" 封顶设备像素比 maxPixelRatio (默认) 2),在3x手机上所持有的像素还不到一半.
• 在玩家移动到新上下文时,丢失的GPU上下文保留了画布上的最后帧. 失败到 onError (或 onPlayerError 在反应中,没有东西被抛出.

// A player that must reappear instantly, and a crisper one on 3x screens.
await createPlayer({ canvas, document, releaseWhenOffscreen: false, maxPixelRatio: 3 });

当文档资产 URL 无法直接获取时, 提供字体或图像加载器 。 使用一个 .clayzo 当您想要将资产与文档打包时, 将进行捆绑 。 选择 @clayzo/canvaskit-player 何时 checkCoverage() 报告一个不支持的构造或完全的参考委托的忠诚度大于转移大小.