mcpField
A
asciify-engine

asciify-engine

github.com/ayangabrylデザイン・UI6060 回インストール4 日前に更新
リポジトリ

asciify-engine について

asciify-engine は npm パッケージの利用を支援するスキルです。ASCII 風の UI コンポーネント、背景、メディア変換、作品のエクスポートに加え、設計や動き、アクセシビリティ、パフォーマンスを踏まえた導入方法を案内します。

主な機能

  1. 01ASCII 風 UI コンポーネントと背景
  2. 02画像・動画・GIF の変換
  3. 03アートスタイルとエクスポート
  4. 04メディアとテキストのレイヤー構成
  5. 05導入と設計のガイダンス

活用シーン

  1. 01UI 要素に動く文字表現を追加
  2. 02ページ上でメディアを ASCII 表示
  3. 03写真や動画からスタイル付き作品を作成
  4. 04プロジェクトへの導入方法を選定・確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/ayangabryl/asciify-engine --skill asciify-engine

インストール後、Claude Code で/asciify-engineを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
examples/
layered-hero.css
layered-hero.html
layered-hero.js
references/
applying-asciify.md
components.md
design-matching.md
glyph-field.md
hero-finish.md
kit.md
layered-hero.md
layered-projects.md
looks.md
media-api.md
performance.md
print-styles.md
project-integration.md
scenario-prompts.md
source-shaping.md
studio-effects.md
studio-workspace.md
upgrading.md

詳細

Asciify Engine

公開されている asciify-engine npm パッケージを使用してください。4.30.0 でテストされています。新しいオプションを使用する前に、アプリケーションにインストールされているバージョンと公開型定義を確認してください。ローカルのチェックアウトには、未公開の変更が含まれている場合があります。

npm install asciify-engine@latest

エントリーポイント:インターフェースコンポーネントと背景には /kit をそれぞれ 1 回呼び出します。メディアとテキストの変換には asciify-engine と /core を使用します。ウェブサイトのホバー効果とリビングイメージの動きには /hover を使用します。アートスタイル、見た目、エクスポートには /studio を使用します。生の GPU 文字フィールドには /field を使用します。各オプションのエントリーポイントは、インポート時にのみ読み込まれます。GIF のデコードでは、GIF API の呼び出し時に gifuct-js が読み込まれます。

まずはこちら:最初にキットを使う

ほとんどのリクエストは API ではなく、「ローディング状態を生き生きと見せたい」「料金プランの背後に落ち着いた背景がほしい」「asciify.org のような雰囲気にしたい」といった感覚的なものです。次の順序で進めます。

  1. UI コンポーネントですか、それとも背景ですか? ほとんどの場合、どちらかです。applying-asciify.md(文字を使う意味が生まれる場面、インク、クリアゾーンとベール、密度、角丸、動き、パフォーマンス、アクセシビリティ、各背景に適したサーフェスなど、基本となるデザイン)を読み、次に components.md から呼び出すものを選び、オプションは kit.md から選びます。その見た目に対応するオプションがキットにない場合を除き、そこで止めます。
  2. リクエストを読み取ります。 主題(ユーザーのメディア、単語、またはなし)、配置場所(ヒーロー、カード、コントロール、テキストの背後の背景)、雰囲気を表す言葉、インタラクション、参考サイトの有無を確認します。
  3. デザインを読み取ります。 プロジェクトのトークンを確認します。背景色とサーフェス色、テキスト色、1 色のアクセント、等幅フォントとディスプレイフォント、角丸、ライトテーマとダークテーマ、動きの時間とイージング、視差効果を減らす設定への対応を確認します。キットのインクトークン(--ascii-ink、--ascii-ink-strong、--ascii-success、--ascii-warning、--ascii-error)をそれらに対応付けます。ブランドカラーを追加してはいけません。
  4. 動きのある表現にするか、静止した表現にするかを決めます。 ユーザーの言葉に従います。テキストの背後、グリッド、データ表示ではアートを静止させ、視差効果を減らす設定では常に静止した表現にします。動きのある表現か静止した表現かを参照してください。
  5. 選んだものを一行で伝え、代案を一つ提示します。 メディアがない場合、または動きのないサイトに新たに動きを加える場合に限り、質問してください。

design-matching.mdでは、雰囲気を表す言葉を低レベル API の設定やメディアの見た目に対応付けています。

ユーザーの要望使用するもの
文字で構成された UI コンポーネント:ボタンのローディング、ステータス、トースト、タブ、ピル、オドメーター、チャート、AI の思考とストリーミング、トランジション、サインイン、料金プラン、404、イベントサイトのパーツ(文字が入れ替わるヘッダーや見出し、形が変化するハッチング付きヒーロー、ディザリングしたグロー、点描の地球儀、2 色の写真、組み上がるワードマーク、スプレーカーソル)asciify-engine/kit(applying-asciify.md、components.md、kit.md)
ヒーロー、料金プラン、ドキュメント、セクションの背後に置く明るい、または暗い背景キットの fieldBackground(el, { preset: 'hero', clear })(asciify.org のヒーロー)、または以下の厳選された 12 種類のプリセットから選んだ background(el, { preset, clear })
文字で表現したい単語やブランドキットの wordmark、または wordField を使った background()
ページ上で文字に変換したい動画キットの asciiVideo
カーソルへの反応を加えることもできる、変換した写真、動画、GIF上級:asciify / asciifyVideo / asciifyGif と、/hover の mountHover
キットに希望の見た目のオプションがない、画面いっぱいに広がるフィールド上級:/field の mountGlyphField(glyph-field.md)
「新聞印刷」「リソグラフ」「蛍光体」「彫刻」「レゴ」など、指定した見た目で仕上げた壁紙、ポスター、表紙、印刷物、ヒーローアートワークにしたい写真や動画/studio の mountStudio / exportStudio と looks.md の見た目
アートスタイル、保存した見た目、マスク、エフェクト、PNG/MP4/GIF のエクスポート上級:/studio の mountStudio(studio-workspace.md)
1 つのアートワーク内に複数のメディアレイヤーとテキストレイヤーを配置上級:/studio の mountStudioProject(layered-projects.md)
テキストバナーやレタリング上級:asciifyText / renderTextToCanvas
メディアアート越しに見える見出しテキスト上級:レイヤー化した HTML(layered-hero.md)

キットを一段落で説明

各キット関数は、要素の上または内部に aria-hidden フィールドをマウントし、そのサイズと角丸に追従させ、ライトテーマとダークテーマでテーマの色を適用します。画面外では一時停止し、動きを減らす設定に従い、WebGL2 が使えない場合は HTML をそのまま機能させる何もしないハンドルにフォールバックし、destroy() でクリーンアップします。components.md には、ユーザーが入力するプロンプトとともに、Components、AI、Text、Transitions、Media、Pages、Backgrounds の各カテゴリに分類された37個のコンポーネントが短いスニペットとして掲載されています。React では、エフェクト内でハンドルを作成し、その destroy を返します。

import { beam } from 'asciify-engine/kit';
const b = beam(card, { palette: 'mono', mode: 'pulse' });
// On unmount: b.destroy();

background()、そのプリセット、lazy、poster、setFieldBudget、setGlobalLook は4.14.0で追加されました。halo、ripple、mesh、interference、constellation、cascade、GPU の caustics と contour、および mark オプションは4.19.0で追加されました。インストール済みの asciify-engine/kit がこれらをエクスポートしているか確認してください。エクスポートしていない場合はアップグレードしてください(upgrading.md)。

背景

background(element, { preset }) は、asciify.org/backgrounds にあるすべての背景を、GPU グリフフィールドのシーンとして描画します。サイトのグラファイト色を使い、グローバルな見た目に追従します。プリセットは名前でインポートします。ページでコストが発生するのは、インポートしたプリセットだけです。どのプリセットがどのサーフェスに適しているか、また落ち着いた見た目にする方法については、applying-asciify.md を参照してください。

import { background, swell } from 'asciify-engine/kit';
const bg = background(pricing, { preset: swell, clear: pricingCopy });

厳選された12種類のプリセットは、エクスポート名 → id(名前)の順に、すべて GPU グリフフィールドを使用します(WebGL2、コンテキスト予算を共有):swell(Swell、ドットまたは文字)、drift(Drift)、halo(Halo)、caustics(Caustics)、contour(Contour)、ripple(Ripple)、mesh(Mesh)、interference(Interference)、constellation(Constellation)、cascade(Cascade)、wordField → field(Field)、fluid(Fluid)。

廃止されたプリセット(aurora、halftone、dna、circuit、fire、grid、morph、noise、pulse、rain、silk、stars、terrain、veil、voidWell、wave、weave、dune、etch、facet、moire)も引き続きエクスポートされ、古いコードが動作するよう @deprecated としてマークされています。新規の実装では使用しないでください。kit.md では、それぞれの置き換え先を案内しています。fieldBackground は別のもので、その hero、brand、notFound プリセットは、それぞれ asciify.org のヒーロー背景、ブランドカラーを使った同じ背景、404ページです。

asciify.org/backgrounds からすでにダウンロードしたテンプレート(ローカルの ./wave.js からの asciiBackground)は、それを同梱しているアプリで引き続き動作します。ただし、サイトでは提供されなくなりました。各アプリを最も近いプリセットを使う background() に移行してください(対応関係は kit.md に記載されています)。

エージェントスキルをインストールする

npx skills add ayangabryl/asciify-engine --skill asciify-engine

この手順では Vercel Skills CLI を使用して、リポジトリのスキルとリンクされたリソースをインストールします。npm の依存関係とインストール済みのエージェントスキルは、それぞれ別個に更新されます。Asciify の更新を求められた場合、またはインテグレーションでより新しいオプションが必要な場合は、references/upgrading.md に従ってください。npm の現在の latest を確認し、プロジェクトのパッケージマネージャーで更新してから、インストール済みのスコープ内にあるこのスキルだけを更新します。このドキュメントで検証したバージョンが今後も常に最新版だと見なしたり、無関係なスキルや依存関係をアップグレードしたりしないでください。

引き渡す前に確認する

キットの作業では、applying-asciify.md の最後にあるチェックリストを実行してください。どのインテグレーションでも、実際のページで次の点を確認します。ライトテーマとダークテーマの両方で被写体とテキストが読みやすいこと、引き伸ばしや意図しない余白がないこと、ポインターとキーボードの操作が機能すること、モバイルでの切り抜き、動きを減らす設定、自動再生の失敗、WebGL が無効な場合の動作、ページ遷移後のクリーンアップです。数秒間の動きとループの境界も確認してください。FPS の数値を記載する場合は、測定したデバイスと設定を明記してください。スクリーンショットだけではパフォーマンスを確認できません。エンジンがホストページに保証する内容と、デフォルトの予算については、performance.md を参照してください。

createRecorder や recordAndDownload など、存在しないヘルパーをインポートしないでください。

高度な内容:低レベル API

メディア変換、アートスタイルや書き出し、またはキットでは表現できないフィールドのルックが必要な場合に使用します。テーマのインク、ポスター、コンテキスト予算、フォールバックは処理されません。結果には、引き続き applying-asciify.md のルールが適用されます。

インテグレーションを選ぶ

実行中のプロジェクトコンポーネントには、まず project-integration.md を参照してください。各ユースケースに適したレンダリングパイプラインを示し、インスタンスの所有権を説明するとともに、PNG/動画の書き出しをライブ再生から独立させる方法を解説しています。アートスタイル、マスク、背景、保存済み設定を使った新しいコンポジションには /studio を使用します。ホバー/モーションはすでに処理されるため、その上に別の /hover インスタンスを追加しないでください。

  • 静止画像:asciify(source, canvas, config) は Promise<() => void> を返します。静止画像の場合も含め、アンマウント時にクリーンアップ関数を呼び出してください。
  • 動画:asciifyVideo(source, canvas, config) は Promise<() => void> を返します。アンマウント時にその関数を呼び出してください。画面いっぱいに表示するヒーローには fitTo と objectFit: 'cover' を、被写体全体を表示するプレビューには contain を使用します。
  • GIF:asciifyGif(source, canvas, config) は非同期でクリーンアップ関数を返します。
  • 密度の高いカスタムレンダリング:imageToAsciiTextFrame と renderTextFrameToCanvas を使用します。変換時とレンダリング時には同じオプションを指定してください。セル単位の変更が必要な場合は、オブジェクトフレームを使用します。

ASCIIを通してHTMLを重ねるヒーローについては、references/layered-hero.md を読み、付属の HTML、CSS、JavaScript を使用してください。これらは通常のVite/バンドラー入力であり、npm依存関係を追加するものではありません。メディアはご自身で用意してください。

クロップ、スクロール、Reactのライフサイクル、低レベルAPIの詳細については、references/media-api.md を参照してください。

読みやすいソースから始める

通常の画像や映像素材を使い、Asciifyで変換してください。画像/動画生成ツールにASCIIを事前に描画させないでください。暗い被写体に細いハイライトがあると輪郭線になりやすく、フルカラーに変更しても失われた中間調は戻せません。認識しやすい被写体、広く照らされた面、抑えたハイライト、安定したフレーミングを優先してください。

色は意図的に選択してください。

  • fullcolor:ソースの色を保持します。ソースのピクセルを先にグレースケール化しないでください。
  • grayscale:グレーの文字を使います。
  • accent:accentColor で単一のブランドカラーを指定します。
  • matrix:緑色の処理を適用します。

まずは fontSize: 7、fps: 24 または 30、maxRenderDimension: 960 から始めてください。これらは初期予算であり、FPSを保証する値ではありません。実際のビューポートと対象ハードウェアを確認してから、詳細度を上げてください。フラットなソースでは必要に応じて normalize: true を使用してください。すでにカラーグレーディングされた動画では、フレームごとの正規化で見た目が変わる場合があるため、false の場合と比較してください。

import { asciifyVideo } from 'asciify-engine';
const stop = await asciifyVideo('/hero.mp4', canvas, {
  fitTo: hero,
  objectFit: 'cover',
  objectPosition: 'center',
  fontSize: 7,
  fps: 24,
  maxRenderDimension: 960,
  options: {
    charset: ' .:-=+*#%@',
    colorMode: 'fullcolor',
    normalize: false,
    animationStyle: 'none',
    hoverStrength: 0,
  },
});
// On unmount: stop();

カスタム文字

options.charset は密度ランプです。customText は文字列を繰り返す機能であり、別の機能です。陰影記号を残しながらブランドの文字を取り入れるには、次のようなランプを作成します。

const letters = [...new Set('ASCIIFY'.toUpperCase().replace(/[^A-Z]/g, ''))].join('');
const charset = ` .:-=+${letters}#%@`;

プレビューしてください。文字のグリフは密度が異なるため、任意の単語を並べても均等に順序付けされたランプになるとは限りません。ユーザーが自分の名前でアートを描画したい場合は、キットの wordmark または wordField の背景機能を使用します。素の /field では、控えめなランプの後ろに単語を置き(' .,:-+' + word)、shade: 1 でインクを1色にし、明るさで画像を表現します(design-matching.md を参照)。先頭のスペースと、明るさ/密度を表す記号は残してください。適切な場合は、/core の厳選された CHARACTER_SETS.standard.chars、detailed.chars、blocks.chars、または braille.chars を使用してください。

エンジンエフェクトとスタジオエフェクト

コアの HoverEffect ID は spotlight、magnify、repel、glow、colorShift、attract、shatter、trail、glitchText です。これらは引き続き有効な API ですが、現在のウェブサイトの拡張インタラクションと同じものではありません。

ウェブサイトでは、オプションのスタジオサーフェスモジュールを通じて、Trail、Dissolve、Contour、Emboss、Ripple rings、Ink bleed、Water、Silk、Vortex、Magnetic Pull、Scatter、Elastic、Lens wake、Smudge、Loupe、Reveal、Repel、Tilt、Heat haze、Off を利用できます。それぞれに scope: 'all' | 'subject' | 'outside' があり、切り抜いた被写体の上、またはその周囲に効果を適用できます(rake は廃止され、Silk が再生されます)。写真に対応した静止画像モーションの 10 種類(Relight、Specular sweep、Highlight bloom、Glints、Parallax、Slow push、Focus pull、Mist、Drift、Develop)は、画像自体の光と深度を読み取ります(caustics などの廃止された ID は、最も近い代替効果として読み込まれます)。これらと細かなディザ処理は、同じ asciify-engine/hover モジュールに含まれています。表示名をエンジンの hoverEffect や animationStyle の値に変換せず、型付きオプションを使用してください。

これらのインタラクションを再現するには、references/studio-effects.md を参照してください。asciify-engine/hover から mountHover をインポートします。別途ダウンロードする必要はありません。エフェクトの二重適用を避けるため、これを使用する場合はエンジンの hoverStrength: 0 と animationStyle: 'none' を設定してください。Trail はサイトのデフォルトです。空間的な変位を伴わない軌跡をユーザーが求めている場合は、Trail や Dissolve のような静止グリッドのエフェクトを優先してください。

組み込みのホバー機能だけを使用する場合は、サポートされている options.hoverEffect と控えめなゼロ以外の hoverStrength を使い、ウェブサイトと同じ動作になると約束するのではなく、実際の動作を検証してください。

メディアアート上のテキストレイヤー

インターフェースの背景では、テキストをクリアゾーンとすりガラスのベールの上に配置します(asciify を適用する)。見出しをアートワーク越しに読めるメディアヒーローでは、実際の HTML と、分離した単一のヒーロー用スタッキングコンテキストを使用します。

  1. 見出しを z-index: 0 に配置します。
  2. 透明な ASCII キャンバス/ステージを z-index: 1 に配置します。
  3. 説明、CTA、モーションコントロールを z-index: 2 以上に配置します。

これらは兄弟レイヤーとして維持してください。変形または分離されたコンテンツラッパーを使うと、そのすべての子孫がキャンバスの下に閉じ込められることがあります。装飾用アートワークには pointer-events: none を設定し、オプションのホバー入力は位置指定されたヒーローのホストにアタッチしてください。コントロールはクリック可能かつフォーカス可能にし、見た目で隠れないようにしてください。キャンバスの背景は透明のままにしてください。不透明なキャンバスやステージは、その下の見出しを隠してしまいます。テキスト全体の背後に配置したほうが読みやすい場合は、アートワークをそのように配置してください。

パフォーマンスとライフサイクル

  • 元動画の再生 FPS を下げる前に、処理する解像度とセル数を減らしてください。24 fps の動画をデフォルトで 60 fps にしないでください。
  • 動画は 24~30 fps、処理解像度の上限は 720~960px から始めてください。処理するピクセル数を増やしても、元の映像にないディテールは生まれません。
  • 滑らかで高フレームレートのヒーローを求められた場合は、canvas パイプラインではなくキットまたは /field を優先し、canvas パイプラインはフォールバックとして残してください。
  • canvas のサイズは安定させてください。サイズ変更はレイアウトの変化時に行い、アニメーションフレームごとには行わないでください。
  • ポインターの移動時や React の各レンダリング時にレンダラーを再マウントしないでください。
  • メディアが画面外にあるときや、ドキュメントが非表示のときは再生を一時停止してください。動きを減らす設定を使用するユーザーには静止画を表示し、再生中の動画を CSS で隠すだけにしないでください。
  • 非同期セットアップを適切に処理してください。API の解決前にコンポーネントがアンマウントされた場合は、返されたクリーンアップ処理をただちに呼び出してください。HTML コンテンツや CTA を削除せずに、読み込みエラーを処理してください。
  • ASCII サンプリングに適した解像度でメディアを圧縮し、不要な音声を削除して、fast-start MP4 と小さなポスター画像を用意してください。不変キャッシュを使うには、コンテンツハッシュ付き URL が必要です。このスキルの URL は再検証可能な状態にしてください。
  • 細かいディザリングはテクスチャを加えられますが、動く映像ではちらつくことがあります。静止画とループを比較し、ディザリングなしのレンダリングも用意してください。
  • YouTube のページ URL と iframe プレーヤーは、canvas の直接的な動画ソースではありません。CORS に対応した、使用が許可されているメディアファイルを使ってください。https://asciify.org/docs/youtube を参照してください。
  • 決定論的なコンポジションを書き出すには、/studio を使ってください。既存のインタラクティブな canvas を録画するには、対応形式でブラウザーの MediaRecorder と canvas.captureStream() を使い、トラックをクリーンアップしてください。スナップショットの場合は、公開されている captureSnapshot / snapshotAndDownload の型を確認してください。

ヒーローの仕上げ

/hover は、テキスト形状のチャコールの切り抜き(textMask)、周辺部の走査線/フリンジ制御(edgeEffect)、固定のアクセントインク、Prism のエッジの柔らかさ(edgeSoftness)、固定グリッドの流体 Trail に対応しています。完全な API、レイヤー構成の例、ライフサイクル、フォールバックの制限を参照してください。

Studio のコンポジションと書き出し

完成済みのアートワークをすぐ使える見た目(壁紙、ポスター、表紙、印刷物)で作る場合は、references/looks.md から始めてください。22 種類のルックがあり、それぞれにプロンプト、正確な設定、壁紙/ポスター/ループの書き出しサイズが記載されています。壁紙/背景、代替レンダラー、パレット、マスク、保存済みルック、テキストフォント、または決定論的な MP4/GIF 書き出しが必要な場合は、references/studio-workspace.md を読んでください。/studio は /hover や AsciiOptions とは別です。背景を追加するためだけに、既存のヒーローパイプラインを置き換えないでください。

GPU グリフフィールド

このキットは、asciify-engine/field の mountGlyphField を基盤としています。キットに該当するオプションがないルックの場合に限り、これを直接使用し、references/glyph-field.md と components.md の末尾にある raw-field ヘルパーを読んでください。画像、動画、または生成したモーションから、流体のウェイクを伴う WebGL2 上で、グリフランプ(単語や点字を含む)を描画します。24 種類のレンダリングスタイル、ディザリング、印刷スタイル、エフェクト、書き出しにおいて、/studio の代わりにはなりません。isGlyphFieldSupported() を確認し、ポスター画像とフォールバックを用意して、動きを減らす設定を尊重し、アンマウント時に destroy() を呼び出してください。キットの仕組みを使って独自のコンポーネントを作る場合は、mountSurface を使ってください(kit.md)。

現在のカタログ

1つのライブコンポーネントで複数のメディア/テキストレイヤーを使用する場合は、4.8以降のmountStudioProjectを使用し、layered-projects.mdを参照してください。最大8つの独立したスタイル設定が可能なレイヤー間で、1つの再生ループとレンダリング予算を共有します。ソースキーはメディアとは別に保持し、個別にエクスポートするにはexportStudioProjectを使用してください。レイヤーごとにStudioインスタンスをマウントしたり、アクセシブルなインターフェーステキストをラスタライズしたりしないでください。

従来のCHARSETS、ART_STYLE_PRESETS、CHARSET_SEQUENCES、LIVING_STYLE_PRESETSと、それらのキー型は削除されています。これらをインポートしたり、Katakana、Binary、Waves、Smokeなどの古い名前を生成したりしないでください。レンダースタイルのセレクターと/studioでのレンダリングには、24種類のSTUDIO_STYLESを使用してください。ASCII文字のみの文字ランプには、/coreのCHARACTER_SETSまたは/studioのSTUDIO_CHARACTER_SETSを使用してください。カスタムUnicodeとユーザー指定のフレーム配列は引き続きサポートされます。CoreのartStyleが受け付けるのはclassicのみです。プリセットのショートカットではなく、明示的なオプションを使用してください。指定されたバージョン番号が4.1.0であっても、これらの削除されたAPIへの移行は破壊的変更です。

バージョンに関する注意

インストール済みのバージョンがテスト済みのバージョンより古い場合、またはユーザーが特定の機能を指定した場合は、以下をお読みください。

細かなディザとクリエイティブコントロール(4.2)

Studioでは、hex、led、cmykのレンダースタイル、方向性/放射状のディザパターン、追加パレット、輝度マッピング、RGB分離、シャープ化、静止画像のモーション強度の調整が可能です。正確なオプション、密度の予算、プレビューとエクスポートの一貫性については、studio-workspace.mdを参照してください。これらはローカルのCanvas/WebGLエフェクトであり、AIによる生成でも、競合するすべてのカタログとの同等性を示すものでもありません。

4.5以降、dither.algorithm: 'blue-noise'は、白色のnoiseとは別に、事前計算された分散しきい値タイルを使用します。Studioのcolorでは、変換前にディテールを調整するためのblackPoint、whitePoint、gamma、shadows、highlightsも指定できます。これらはすべてデフォルトで中立です。これらのコントロールを追加する前に、tonal detail and blue noiseをお読みください。これらは/studio用であり、coreのAsciiOptions用ではありません。

4.6以降、Studioではcolor.curves(RGB、red、green、blue)と、オプションのエッジ保持型color.denoiseが使用できます。player.settingsは、更新後の保存やエクスポートに使える分離されたスナップショットを返します。ポイント数の制限、更新のセマンティクス、処理予算については、channel curves and source noiseを参照してください。ノイズ低減をデフォルトで有効にしたり、すでにレンダリングされた文字に再度適用したりしないでください。

4.7以降、Studioでは順序を指定できる最大8つのソースワープをサポートしています。種類はTwirl、Pinch、Spherize、Ripple、Zigzag、Shear、Smudge、Polar、Fragmentです。コントロールはSTUDIO_WARPSから構築し、配列の順序を保持してください。境界、アルファ/エッジのポリシー、キャッシュされたマップのパフォーマンスについては、source shapingを参照してください。これらはソースの形状を変える機能です。静止画像に動きを加えるにはmotion.typeを、ポインター操作に反応させるにはhover.effectを使用してください。これらは独立して保ち、ワープスタックはデフォルトで空にしてください。

4.9以降、Studioではオプションとして、Stipple、Engraving、Crosshatch、Woodblock、Risograph、Pointillismと、これらに共通するprint設定グループが追加されています。正確なコントロール、薄いインクと濃いインクの極性、静止モーションとの連携、密度の高いレンダリングの制限については、print and illustrationを参照してください。これらは実際に追加されたレンダーパスです。IDの代わりにディザプリセットを使用しないでください。

生き生きとした画像とインタラクションの開始点(4.10)

STUDIO_ANIMATION_PRESETSは、/studioと/hoverを通じて、編集可能なモーション/ホバーの組み合わせを6種類提供します。ソースとアートスタイルを維持するには、既存のStudioプレーヤーにmotionとhoverを適用してください。これらの組み合わせを追加のアートスタイルとして扱わないでください。新しいID、ループの制限、ライブコンポーネントの例については、studio-effects.mdを参照してください。

GPU グリフフィールド(4.11)とキット(4.13)

asciify-engine/field では、4.11 で mountGlyphField、isGlyphFieldSupported、glyphFieldTier が追加され、4.12 で mark、clear、pulse() が追加されます。asciify-engine/kit は 4.13 で導入されます。background() とそのプリセット、lazy、poster、コンテキスト予算、グローバルな外観は、その後に追加されます。古いバージョンにはこれらの項目はありません。使用する前にアップグレードしてください。

シナリオプロンプト

scenario-prompts.md を使用すると、画像、ヒーロー、キャラクター、すべてのスタイル、ディザ、背景、動画/GIF、スクロール、レイヤー、テキスト、エクスポート、フレームワーク、プロシージャルトレイル、参照との一致、トラブルシューティング、アップグレード、保存した外観、アクセシビリティを網羅した、コピーして使えるブリーフを確認できます。プロンプトはユーザーの意図に合わせて調整し、無関係な機能は追加しないでください。公開済みレンダラーのネイティブな Trail を使用してください。別個のトーンリボンオーバーレイは追加しないでください。

コメント