Mizutama Conteにようこそ。 Please refer to here for English readme file.

Mizutama Conte [Demo Site]

React + Electron製の絵コンテエディタ&ビューアです。現在はビューアとしての機能のみ実装済みです。

Usage

Install

$ yarn

Development

$ yarn electron:dev

Build

$ yarn electron:build

Deploy GitHub Pages

$ yarn deploy

Feature

• 絵コンテファイル表示
• ファイル編集・保存・上書き保存
• 新規プロジェクト作成
• 外部ペイントアプリ連携
• ビデオコンテプレビュー
• ビデオコンテ書き出し
• setting.jsonファイルによるユーザー設定カスタマイズ

絵コンテファイル

Mizutama Conteでは、絵コンテをJsonファイル及びPSDファイルにより管理します。

conte/
├── [Your Project Name].json
│
├── c001.psd
├── c002.psd
├── c003.psd
├──   .
├──   .
├──   .
└──   .

Jsonファイルの構成

スタジオみずたま制作「君と一緒に」より

[
  {
    "action": { "fadeIn": "Black In", "fadeInDuration": 96 },
    "dialogue": "佑希「楽しみだな！」晴奈「そうだね」",
    "time": 168
  },
  {
    "cameraWork": {
      "position": { "in": { "x": 0, "y": 0 }, "out": { "x": -0.421875, "y": 0 } },
      "scale": { "in": 1.421875, "out": 1 }
    },
    "dialogue": "佑希「僕と晴奈は飛行機に乗っている。何でかっていうと、色々とあるんだ。」",
    "time": 156
  },
  {
    "cameraWork": {
      "position": { "in": { "x": 0, "y": 0 }, "out": { "x": 0, "y": 0 } },
      "scale": { "in": 1.269792, "out": 1 }
    },
    "dialogue": "佑希「まぁ一言で言えば駆け落ちみたいなもの。」",
    "time": 72
  },
  {
    "cameraWork": {
      "position": { "in": { "x": 0, "y": 0 }, "out": { "x": 0, "y": 0 } },
      "scale": { "in": 1, "out": 1.316145 }
    },
    "dialogue": "佑希「大学もあと卒業研究だけだったのに、ほっぽり出してきた。」",
    "time": 132
  },
  { "dialogue": "佑希「それぐらい晴奈が好きなんだけどさ……」", "time": 72 },
  { "dialogue": "佑希「これできっとよかったんだ」", "time": 228 },
]

アプリ内ではCut型のオブジェクトとして扱われます。

interface Cut {
  picture?: Psd;
  cameraWork?: CameraWork;
  action?: Action;
  dialogue?: string;
  time?: number;
}

interface Action {
  fadeIn?: 'None' | 'White In' | 'Black In' | 'Cross';
  fadeInDuration?: number;
  fadeOut?: 'None' | 'White Out' | 'Black Out' | 'Cross';
  fadeOutDuration?: number;
  text?: string;
}

interface CameraWork {
  position?: { in: { x: number; y: number }; out: { x: number; y: number } };
  scale?: { in: number; out: number };
}

Psd型は、ag-psdを利用しています。

PSDファイルの構成

キャンバスサイズ

実際のアニメと同じサイズで作ります。(1920 * 1080等)

レイヤー構成

• 最下層に背景レイヤーを置きます。
• 同一カット内に複数コマがある場合、時系列順に上から並べます。
• 1コマにつき1レイヤーとします。（将来的に1コマ1グループに変更予定）
• レイヤー名は任意です。
• 非表示レイヤーも読み込まれます。

コンテファイルのサンプル

サンプルファイルを以下のリンクよりダウンロードできます。

This sample is NOT under MIT License. ©︎ 2020 Studio Mizutama All Rights Reserved.

Google Drive

Electron版ではFile -> Open (Cmd or Ctrl + O)、Web版では左上のフォルダアイコンをクリックし、ダウンロードしたサンプルをフォルダごと選択してください。

Many thanks to

yhirose/react-typescript-electron-sample-with-create-react-app-and-electron-builder