旧 JSON タイムライン
既存プロジェクトの互換性用。新しく作る場合は React を使います。
.celesta.json は、既存プロジェクトの設定、素材、キャラクター、トラック、プロパティを定義する形式です。互換性のために読み込み機能は残っていますが、新しく作る場合は React コンポジションを使ってください。
settingsはサイズ、フレームレート、音声のサンプルレート、任意の長さを定義します。assetsはvideo、audio、image、fontの素材を ID で登録します。ローカルファイルと HTTP(S) の URL を指定でき、リモートのファイルはネイティブの素材キャッシュを使います。tracksは映像・音声・オーバーレイ・台詞のトラックと、その項目を持ちます。- 各項目は開始と長さを持つ
range、内容、任意のtransform、opacity、blendModeを持ちます。
時刻は { value, timescale } で表し、値を timescale で割ると秒数になります。たとえば { "value": 10, "timescale": 1 } は 10 秒です。
以下をプロジェクト内の project.celesta.json にコピーし、File Open… で開きます。
内蔵のタイトルプロジェクト全体を見る
{
"version": 0,
"settings": {
"width": 1280,
"height": 720,
"frameRate": {
"numerator": 60,
"denominator": 1
},
"sampleRate": 48000,
"duration": {
"value": 10,
"timescale": 1
}
},
"assets": {},
"characters": {},
"tracks": [
{
"id": "titles",
"name": "Titles",
"kind": "overlay",
"items": [
{
"id": "welcome",
"name": "Welcome",
"range": {
"start": {
"value": 0,
"timescale": 1
},
"duration": {
"value": 10,
"timescale": 1
}
},
"content": {
"type": "text",
"text": "Celesta",
"style": {
"fontSize": 96,
"fill": {
"type": "solid",
"color": "#FFA13BFF"
},
"align": "center"
}
},
"transform": {
"position": {
"x": 640,
"y": 360
}
}
}
]
}
],
"properties": {
"title": "Celesta editor demo"
}
}examples/minimal.celesta.json は空のひな形です。表示を確認するには上のタイトルプロジェクトからはじめ、テキストを変えて保存します。File Reload でプレビューを更新します。
celesta-exporter project.celesta.json output.mp4キーフレームで動かす
JSON の変換では position が項目の中心を配置します。変換の各値、opacity、音声の volume は固定値またはキーフレームです。時刻は項目の開始を基準にし、easing がそのキーフレームへ向かう曲線を定めます。
"opacity": {
"type": "keyframes",
"keyframes": [
{ "time": { "value": 0, "timescale": 30 }, "value": 0 },
{ "time": { "value": 15, "timescale": 30 }, "value": 1, "easing": "ease-out" }
]
}イージング名は React の Easings を kebab-case にしたもので、ease-in-out-cubic や ease-out-back などです。
JSON プロジェクトの台詞
JSON は characters にキャラクターを、dialogue トラックの項目に台詞を宣言します。立ち絵と字幕の変換は中心を配置します。
JSON の台詞プロジェクト全体を見る
{
"version": 0,
"settings": {
"width": 1920,
"height": 1080,
"frameRate": { "numerator": 30, "denominator": 1 },
"sampleRate": 48000,
"duration": { "value": 6, "timescale": 1 }
},
"assets": {
"mira-calm": { "type": "image", "source": { "type": "file", "path": "./mira/calm.png" } },
"mira-smile": { "type": "image", "source": { "type": "file", "path": "./mira/smile.png" } },
"line-01": { "type": "audio", "source": { "type": "file", "path": "./voices/line-01.wav" } },
"line-02": { "type": "audio", "source": { "type": "file", "path": "./voices/line-02.wav" } }
},
"characters": {
"mira": {
"name": "Mira",
"portrait": {
"defaultExpression": "calm",
"expressions": { "calm": "mira-calm", "smile": "mira-smile" },
"transform": { "position": { "x": 1460, "y": 420 } }
},
"subtitle": {
"style": {
"fontSize": 56,
"fill": { "type": "solid", "color": "#FFFFFFFF" },
"stroke": { "paint": { "type": "solid", "color": "#3A2D52FF" }, "width": 6 },
"align": "center"
},
"transform": { "position": { "x": 960, "y": 940 } },
"maxWidth": 1600
}
}
},
"tracks": [
{
"id": "dialogue",
"name": "Dialogue",
"kind": "dialogue",
"items": [
{
"id": "line-01",
"range": {
"start": { "value": 0, "timescale": 1 },
"duration": { "value": 3, "timescale": 1 }
},
"content": {
"type": "dialogue",
"character": "mira",
"text": "Welcome back. Shall we begin?",
"audio": "line-01"
}
},
{
"id": "line-02",
"range": {
"start": { "value": 3, "timescale": 1 },
"duration": { "value": 3, "timescale": 1 }
},
"content": {
"type": "dialogue",
"character": "mira",
"text": "Every scene starts with a single line.",
"audio": "line-02",
"expression": "smile"
}
}
]
}
],
"properties": {}
}JSON の台詞にも口パクを付けられます。立ち絵の lipSync に口画像の素材 ID を追加し、台詞に "lipSync": [{ "time": { "value": 0, "timescale": 30 }, "shape": "a" }] のような時間付きの形を並べます。時刻は台詞の開始が基準です。音声から自動で時間を生成するには React の loadLipSync() を使います。
プロジェクトと React を組み合わせる
React コンポジションには <ProjectTimeline /> を含められます。書き出し時に対応する JSON プロジェクトを渡して、タイムラインを解決します。
celesta-exporter --react with-project.tsx --project project.celesta.json output.mp4対応する React コンポジション全体を見る
import { Composition, Text } from '@celesta/react';
import { ProjectTimeline } from '@celesta/project';
export default function Root() {
return (
<Composition width={640} height={360} fps={30} durationInFrames={30}>
<ProjectTimeline />
<Text
x={320}
y={40}
anchorX={0.5}
anchorY={0.5}
style={{ fontSize: 24, fill: { type: 'solid', color: '#ffffff' } }}
>
React overlay
</Text>
</Composition>
);
}このコードを JSON と同じフォルダに with-project.tsx として保存してください。上のコマンドは celesta-exporter に PATH が通っている場合の例です。インストール先の実行ファイルのパスは動画を書き出すを参照してください。ひとつのトラックだけを描く場合は <ProjectTrack id="…" /> を使います。