ブロックエディタ操作ガイド（図解）
このページでは、kaedevn エディタのブロック操作を画像付きで解説します。各ブロックの見た目・設定項目・操作方法をスクリーンショットで確認できます。
エディタ画面の全体像
エディタは 3 つのエリアで構成されています。
- 左サイドバー（ページ構成） — ページ一覧とブロックのアウトライン表示
- 中央（ブロック一覧） — シナリオを構成するブロックカードが縦に並ぶ
- 右パネル（プロパティ / プレビュー） — 選択中ブロックの詳細編集やプレビュー表示
上部のタブ（ブロック / キャラ / アセット / フロー / レイアウト / 設定）で表示モードを切り替えます。
ブロックをクリックしたとき（右パネル）
ブロックカードをクリックすると、画面右側に プロパティ（上部）と プレビュー（下部）の 2 つのパネルが表示されます。何も選択していない場合は「ブロックを選択してください」と表示されます。
プロパティパネル（上部）
選択中のブロックの設定項目が表示され、その場で編集できます。各ブロックのスクリーンショットで右パネルの内容を確認できます。
プレビューパネル（下部）
16:9 のアスペクト比で、選択中のブロック時点の画面を表示します。背景・キャラ・テキストなど、その時点での見た目を、選択ブロックまで累積した状態でスナップショット描画します。リロードボタンで再描画できます。
START ブロック
各ページの先頭に 1 つだけ 自動配置されるブロックです。編集・削除・移動・複製はすべて不可。グレーのバッジで表示されます。
START ブロックの下にシナリオの本体（背景・テキスト・キャラなど）を配置していきます。
背景ブロック（BG）
背景画像が設定されると、サムネイル と アセット名 がカード上に表示されます。緑の「背景」バッジで識別できます。
- サムネイル — 設定中の背景画像のプレビュー
- アセット名 — ファイル名またはスラッグ
- 「変更」ボタン — 別の画像に差し替えるときに押す
- 「削除」ボタン — ブロックを削除
- ↑↓ ボタン — ブロックの並び順を変更
画像選択モーダル
「変更」ボタンを押すと画像選択モーダルが開きます。
- プロジェクトアセット: 自分でアップロードした画像
- 公式アセット: kaedevn が提供する素材集（テキスト検索・タグフィルタ・AI 検索に対応）
- サムネイルをクリックすると即座に反映されます
テキストブロック
テキストブロックは通常、本文の先頭行だけが見えるコンパクトな状態で表示されます（紫の「テキスト」バッジ＋本文プレビュー）。カード全体をクリックすると展開され、テキスト入力エリアとオプション設定が表示されます。
- テキストエリア — セリフやナレーションを入力。複数行対応
- フレームカラー — テキスト枠の色を変更できる（カラーピッカー）
- 「リセット」ボタン — フレームカラーをデフォルトに戻す
- 「閉じる」ボタン — 編集を終えてカードを折りたたむ
- 「削除」ボタン — ブロックを削除
キャラブロック（CH）
キャラクターの立ち絵を表示・切り替えるブロックです。青の「キャラ」バッジで識別できます。
- 表情サムネイル — 現在の表情差分の画像
- キャラクター名 — 設定中のキャラ名
- 表情名 / ID — 表情差分の識別名
- 位置 — L（左）/ C（中央）/ R（右）
- 表示状態 — 「表示」または「非表示」
- 「+ 新規作成」ボタン — 新しいキャラクターを追加
キャラクターと表情は、あらかじめ「キャラ」タブで登録しておく必要があります。
演出ブロック（FX）
画面揺れやフラッシュなどの視覚演出を追加するブロックです。すべての設定がインライン（1行）で完結します。オレンジの「FX」バッジで識別できます。
- エフェクト選択 — ドロップダウンで種類を選択
- 強度 — 1〜5 の数値（デフォルト: 3）。フェード系と
flashは強度を持たないため非表示 - 時間(ms) — 持続時間。100〜5000ms（デフォルト: 500）。
vignette/blurは時間経過で自動解除
エフェクト一覧
- shake — 画面を振動させる（強度・時間あり）
- flash — 白いフラッシュ（時間のみ）
- fade_black — 画面を黒くフェードアウト（時間のみ）
- black_in — 黒からフェードイン（時間のみ）
- fade_white — 画面を白くフェードアウト（時間のみ）
- white_in — 白からフェードイン（時間のみ）
- vignette — 画面周囲を暗くする（強度・時間あり / 時間経過で解除）
- blur — 画面をぼかす（強度・時間あり / 時間経過で解除）
ブロック追加メニュー
ブロック一覧の下部にある「+ ブロック追加」ボタンを押すと、各種ブロックがグリッド表示されます。
- 基本 — テキスト、キャラ、背景、OVL
- 制御 — 選択肢、変数、IF 文、ジャンプ
- 演出 — FX、フィルター、フィルター重ね掛け、色調補正、カメラ、パーティクル、斬撃
- キャラ拡張 — Live2D、VRM
追加したいブロックをクリックすると、一覧の末尾に新しいカードが追加されます。
選択肢ブロック（Choice）
プレイヤーに分岐選択を提示するブロックです。黄色の「選択肢」バッジで識別できます。
- 選択肢テキスト — 各選択肢に表示するテキストを入力
- 表示条件（オプション） — 特定の変数条件を満たすときだけ選択肢を表示（例:
affection >= 3） - 実行内容 — 選択時に実行するアクション（変数操作・セリフなど）
- 「+ 選択肢を追加」ボタン — 新しい選択肢を追加
- 「削除」ボタン — 個別の選択肢を削除
右パネルには選択肢テキストの一覧が表示されます。選択肢の編集はブロックカード上で直接行います。
IF文ブロック（条件分岐）
変数の値に応じて処理を分岐するブロックです。水色の「IF文」バッジで識別できます。
- 条件 — 変数名・比較演算子・値を設定
- then ブロック — 条件が真のときに実行するブロック群
- else ブロック — 条件が偽のときに実行するブロック群（省略可）
条件が未設定の場合、オレンジ色の警告ボーダーが表示されます。
変数ブロック（Set Variable）
変数の値を設定・演算するブロックです。紺色の「変数」バッジで識別できます。すべての設定がインライン（1行）で完結します。
- 変数名 — 対象の変数名（例:
gold,hasKey） - 演算子 —
=（代入）,+（加算）,-（減算） - 値 — 設定する値
左サイドバーの「変数一覧」に、プロジェクト内で使われている変数名が自動表示されます。
ジャンプブロック（Jump）
別のページへ移動するブロックです。琥珀色の「ジャンプ」バッジで識別できます。
- ジャンプ先 — ドロップダウンでページを選択
- 未選択時 — 警告マーク（!）が表示される
シナリオの分岐やルート切り替え、エンディング後のタイトル戻りなどに使用します。
カメラブロック（Camera）
画面のカメラワーク（ズーム・パン）を制御するブロックです。スカイブルーの「カメラ」バッジで識別できます。
- X / Y — カメラの移動位置（スライダー）
- Z（ズーム） — 拡大率。1.0 が等倍
- 時間 (ms) — アニメーション時間
- イージング — Ease In/Out などのイージング関数
- シェイク強度 — 画面振動の強さ（0 で無効）
- リセット — 初期位置に戻すチェックボックス
オーバーレイブロック（OVL）
背景の上にレイヤーとして重ねる画像を配置するブロックです。フクシアの「OVL」バッジで識別できます。
- 画像選択 — 「変更」ボタンで画像を選択
- 表示状態 — チェックボックスで表示 / 非表示を切り替え
- 未選択時 — 「画像未選択」と警告マーク（!）が表示される
雨・雪・光線などのエフェクトや、UI フレームの重ね表示に使用します。
フィルターブロック（Screen Filter）
画面全体にフィルター効果をかけるブロックです。紫の「フィルター」バッジで識別できます。すべての設定がインライン（1行）で完結します。
- フィルター種類 — セピア / モノクロ / ブラーなどをドロップダウンで選択
- 既定 — プリセット設定（「既定」ボタン）
回想シーン（セピア）、夢の中（ブラー）、モノクロ演出などに使用します。
Live2D キャラブロック
⚠️ アセットは固定・テスト中: 現在は同梱の公式サンプルのみ利用可能で、独自モデルの取り込みには未対応です。動作・UI は検証中のため、リリース対象外として扱っています。
Live2D モデルを表示するブロックです。静止画キャラクターでは表現できない、まばたき・呼吸・リップシンクなどの自然な動きを演出できます。公式フリーサンプル 6〜7 種類が同梱されています。
- モデル選択 — 使用する Live2D モデルを選択
- モーショングループ — Idle / TapBody など、再生するモーション
- モーションインデックス — グループ内の複数モーションを切り替え
- 位置・サイズ — X（0〜1280）/ Y（0〜720）座標とスケール（0.05〜0.5）をスライダーで調整
- visible — 一時的に非表示にできる切り替え
VRM 3D キャラブロック
⚠️ アセットは固定・テスト中: 現在は同梱の VRM モデルのみ利用可能で、独自モデルの取り込みには未対応です。動作・UI は検証中のため、リリース対象外として扱っています。
VRM 形式の 3D キャラクターモデルをシーンに配置するブロックです。VRM 1.0 / 0.x の両方に対応し、14 種類の表情アニメーション、髪・スカートの自然な揺れ、アニメ調のトゥーン表現をブロックひとつで利用できます。
主なプロパティ:
- モデル選択（modelId） — 使用する VRM モデルを選択（例:
hero） - 位置（pos） —
L（左）/C（中央）/R（右）でキャラ配置 - 表情（expression） —
neutral/happy/angry/sad/relaxed/surprisedほか計 14 種 - ポーズ（pose） —
aPose（A ポーズ）/idle（アイドル） - Y 軸回転（rotY） — 度単位で左右に回転
- X / Y / スケール — 位置と大きさの微調整（スライダー）
- フェード時間（fadeMs） — 登場時のフェードイン時間（ミリ秒）
- visible — 表示/非表示トグル
エディタのライブプレビュー: プロパティパネルのスライダー（X/Y/S・表情・Y 軸回転）を操作すると、エディタ画面内の VRM プレビューがその場で追従します。スライダー操作のたびにモデルを再読み込みする必要はありません。
パーティクルブロック
戦闘・演出系のパーティクルエフェクトを追加するブロックです（雪・桜などの環境系は Screen Filter 側にあります）。
- プリセット — バトル系（
fire_sparks/ice_crystal/explosion/heal）とガチャ系（gacha_burst/gacha_rainbow/gacha_stars）の 7 種から選択 - 位置 (x / y) — 発生位置
- 大きさ (s) — 粒子サイズ倍率（0.1〜5.0）
- 範囲 (range) — 発生範囲倍率（shape の radius / width / height に乗算、0.1〜5.0）
- 強度 (intensity) — 発生量（1〜3）
- 持続時間 — エフェクトの再生時間（ミリ秒）
- 追加エミッター — 同時に複数プリセットを発火（例: 爆発 + 火の粉）
斬撃ブロック（Slash）
剣戟・斬撃の軌跡を 1 振りぶん再生します。三日月スプライトを指定角度方向へ振り抜き、残像を残します。パーティクルとは別ライフサイクル。
- 位置 (x / y) — 弧の中心
- 角度 (angle) — 振りの中心角（度）。
0= 右水平、-30= 斜め下右、90= 下 - 振り幅 (length) — 弧の長さ（px）
- 振り抜き時間 (duration) — 1 振りの時間（ms）
- 太さ (width) — 三日月スプライトの scale 倍率
- 色 (color) —
#RRGGBB形式 - 合成モード — normal / add
フィルターブロック — 46 種のフィルター
画面全体にフィルターをかけるブロックです。1 枚の背景画像から、朝・夕・夜・雨・紅葉・冬・回想・ホラーなど多彩なシーンを演出できます。
8 カテゴリ・46 種のフィルター:
| カテゴリ | フィルター例 |
|---|---|
| 時間帯（5種） | 朝・夕方・黄昏・夜・月明かり |
| 天候（2種） | 雨・曇り |
| パーティクル（5種） | 雪・花びら・蛍・キラキラ・塵（色ピッカー / 大きさ / 風 等の固有スライダー対応） |
| 季節感（2種） | 紅葉・冬 |
| 雰囲気（8種） | ほんわか・緊張・哀愁・懐かしい・ロマンチック・ホラー・ミステリアス・穏やか |
| 色調（9種） | セピア・モノクロ・色褪せ・暖色・寒色・鮮やか・くすみ・明るく・暗く |
| 特殊効果（10種） | ぼかし・ビネット・ノイズ・グリッチ・色収差・古いフィルム・ブルーム 等 |
| レトロ（5種） | PC-98・ゲームボーイ・ファミコン・CRT・ピクセレート |
- 強度スライダー — フィルターの適用度合いを 0〜1 で調整
フィルター重ね掛け（Filter Mix）
スクリーンフィルターを 2 スロット固定（ベース層 + 動き層）で重ね掛けするブロックです。「夜 + 雨」「紅葉 + 哀愁」のような複合的な雰囲気を作れます。
- スロット 1（ベース層） — 色調・雰囲気・季節感・レトロなど画面全体のトーンを決めるフィルター
- スロット 2（動き層） — 雨・雪・桜・蛍などの天候・パーティクル系（粒の動きが入るフィルター）
- 同種フィルターの衝突（例: 夜 + 朝）を防ぐため、スロット 2 に置けるのは動き系のみ。組み合わせは UI 側で許容セットを誘導します
色調補正ブロック
画面全体の色味をスライダーで微調整するブロックです。フィルタープリセットでは表現できない細かい調整に使います。
- 明るさ — 画面を明るく / 暗くする
- コントラスト — 明暗の差を強める / 弱める
- 彩度 — 色の鮮やかさを調整（0 でモノクロ）
- 色温度 — 暖色（プラス）/ 寒色（マイナス）に寄せる
このページのスクリーンショットは UI 変更があったときに撮り直されます。