無料GitHub で公開

example-pixi

PixiJS integration patterns for Helios. Use when creating high-performance WebGL 2D animations with PixiJS.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/heliosスター 123(GitHub 123 + cccskills 0)

実行スコア未検証

インストール方法を見る

含まれるファイル（1）

SKILL.md1.8 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

PixiJS + Helios

Integrate Helios with PixiJS by driving the Pixi scene properties from the Helios subscription loop.

Quick Start

import { Helios } from '@helios-project/core';
import { Application, Graphics } from 'pixi.js';

// 1. Initialize Pixi
const app = new Application();
await app.init({ resizeTo: window });
document.body.appendChild(app.canvas);

// 2. Initialize Helios
const helios = new Helios({ fps: 30, duration: 5 });

// 3. Create Scene
const rect = new Graphics().rect(0, 0, 100, 100).fill(0xff0000);
rect.pivot.set(50, 50);
rect.position.set(app.screen.width / 2, app.screen.height / 2);
app.stage.addChild(rect);

// 4. Bind Timeline (Crucial for Renderer)
helios.bindToDocumentTimeline();

// 5. Drive Animation
helios.subscribe((state) => {
  const t = state.currentTime;

  // Update properties based on time
  rect.rotation = t * 1.5;
  rect.x = (app.screen.width / 2) + Math.sin(t) * 100;
});

Key Patterns

Bind to Document Timeline

PixiJS and other WebGL libraries often have their own internal tickers. To ensure frame-perfect rendering during export (via Renderer), you must bind Helios to the document.timeline.

helios.bindToDocumentTimeline();

This allows the Renderer (via CdpTimeDriver) to control the global clock, which PixiJS respects if properly synchronized.

Disable Internal Ticker (Optional but Recommended)

If you are strictly driving the scene via helios.subscribe(), you might not need Pixi's internal ticker for animation logic, though Pixi still needs to render. The standard pattern is to let Pixi render naturally but update state in the Helios subscriber.

Source Files

Example: examples/pixi-canvas-animation/

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

同じリポジトリのスキル

animated-video-philosophy

無料

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

日本語の概要は準備中です。原文の説明を表示しています。