ツールを選んで、画像の上をドラッグ。
サンプルを編集中
1.25x
注目させたい部屋や区画をドラッグで囲みます
ライブプレビュー
導入
拡大
マーキング
余韻
4.30s / (100%)
01 画像を選ぶ →02 演出を重ねる →
Space
再生 / 停止
Ctrl Z
元に戻す
Ctrl D
枠を複製
はじめてのマップ演出

まずは、動かしてみましょう。

操作のイメージ

手元のマップでも、サンプルでも。

画像がなくても大丈夫。演出を設定済みのサンプルで、そのまま試せます。

細かな編集・書き出しはPCのChrome/Edgeを推奨します。

マップ・見取り図 演出スタジオ

マップを演出。3Dで空間を歩く。

画像1枚から、探索の流れが伝わる演出をつくれます。

基本の使い方 まずは通常マップから

  1. 01
    マップ画像を開く

    画像を選ぶ・ドロップ・貼り付け。サンプルでも試せます。

  2. 02
    経路や部屋マスクを重ねる

    画像上をドラッグ。U字・往復の経路は、点を順に指定します。

  3. 03
    再生して、書き出す

    右の一覧で演出を調整し、PNG・APNG・動画などに保存します。

もうひとつの見せ方 / ADVANCED 3D

見取り図の中を、
歩いて案内しよう。

部屋が緑の線画の立体に。現在地から目的地へ、空間を移動する動画をつくれます。

必要なときだけ使える追加モードです。

現在地目的地
線画3Dと移動経路のイメージ
  1. 1部屋・廊下

    マップ上を囲んで
    立体の範囲を指定

  2. 2入口

    通り抜けたい
    壁に入口を配置

  3. 3移動経路

    現在地・曲がり角・
    目的地を順にクリック

  4. 4再生・保存

    移動をプレビューし
    動画として保存

通常マップの部屋マスクを下書きに使えます。部屋名の表示はON/OFF可能です。

通常マップの詳しい操作

既存の枠はドラッグで移動、端のハンドルでサイズ変更。重なる位置に新しい枠を描くときは Shift を押しながらドラッグします。

細部を編集するときは「画面を広げる」「部分拡大」「選択枠へ」を使います。拡大後もそのまま枠を作成・調整できます。「手のひら」または中ボタンドラッグで表示位置を移動し、「全体」で戻します。矢印キーは元画像の1px、Shift併用で10px移動。表示の拡大は出力画像に影響しません。

黒塗り・ぼかしの濃度と、モザイクの粒の大きさは「演出の編集」のカードで個別に調整できます。「ツール設定」は新しく描く枠に適用されます。PCでは右側のパネル、狭い画面ではツールの下に表示します。

機密解除・抹消の「境界の演出」で、金色の光と粒子・従来のスキャン線・なしを選べます。「光の強さ」を調整すると、途中の状態で確認できます。光は動作中だけに表示され、APNG・動画・連番PNGにも反映されます。以前保存した作業は従来のスキャン線で開きます。

画像はブラウザー内で処理します。「作業を保存(.json)」で、通常マップと3Dの設定を一緒に残せます。

この案内は「使い方ガイド」から
いつでも開き直せます。

表示言語だけを端末に保存します。入力した部屋名・画像は翻訳せず、作業内容は自動保存しません。3Dサンプルの部屋名は翻訳表示し、画像内の文章は日本語のままです。

マップ・見取り図 演出スタジオ / INFORMATION

ご利用にあたって

マップ・見取り図 演出スタジオ / KIIN
LITE / PRO

試した演出を、作品に使うなら。

Pro 1,500円買い切り・月額料金なし

BOOTHでProを見る ↗

編集・再生はLiteで無料。Proなら透かしなしの素材や動画を保存できます。

Lite版とPro版でできること
できることLite無料Pro1,500円
通常マップ・3Dの編集/再生○○
PNG/APNG保存SAMPLE
透かしあり
透かしなし
通常動画 MP4/WebM保存—○
3D移動動画 MP4保存—○
部屋別・段階別・レイヤー別・連番PNGのZIP保存—○
作業ファイル(.json)の保存○○
作業ファイルを開く/再編集—○

プレビューは両版とも透かしなし。通常動画は30/60fps、X向け・3D動画は30fps。背景透過の通常動画はWebMです。

いま作った演出をProへ引き継ぐには

作業ファイル(.json)を無料保存できます。購入後、ダウンロードしたProの「作業を開く」で読み込むと、画像・演出・3D設定を引き継げます。

ProはZIPを展開してindex.htmlを開くダウンロード版です。購入後はProを使います。このLite画面が自動でProに切り替わる仕組みではありません。

PCのChrome/Edgeを推奨