mieki256's diary

Webブラウザ上でアニメ(パラパラ漫画)を作れる、Wick Editor なるサービス？を知ったので少し試用してみた。2016年頃から公開されていたサービスらしい。

_The Wick Editor
_Wicklets/wick-editor: A free and open-source tool for creating games, animations and everything in-between!
_小学生とThe Wick Editorでアニメーションを作る | プログラミング教室ハッピーコンピューティング
_JavaScript初心者に最適！パラパラ漫画アニメーションをプログラムで制御できる「Wick Editor」を使ってみた！ - paiza times

Firefox 128.0.3 上で動作確認。

ほんの少し触ってみたけれど、かなりイイ感じ。

• ユーザー登録しなくても、「Launch Web Editor」と書かれたボタンをクリックすれば、いきなり試用できる。
• オニオンスキン機能有り。前後フレームを半透明表示しながら作業できる。
• 描いた何かしらはオブジェクトとして扱われて、移動拡大縮小回転による変形ができる。
• Tween機能有り。キーフレームとキーフレームの間を自動中割り(?)してくれる。と言っても、移動拡大縮小回転での補間だけど。
• レイヤー機能有り。背景と手前のオブジェクトに分けて作業できる。
• アニメGIFファイルとしてエクスポートできる。

他にも、JavaScriptで制御したりできるらしいのだけど、そのあたりの機能は未確認。

せっかくだから、スクリーンショットに日本語で説明を入れてみた。

• オニオンスキン : 右下の「Onion Skinning」アイコンをクリックして有効無効を切り替える。現在フレームの左右の赤い部分をドラッグすれば、オニオンスキンで表示する枚数を変更できる。
• 拡大縮小回転変形 : 左上の「Cursor」ツールアイコンをクリックしてから、キャンバス上に描かれてるものをクリックして選択。周囲に枠や丸等が出てくるので、そこをドラッグすれば変形できる。また、Shift+ドラッグで縦横比を保持したまま変形できる。
• Tween機能 : 左下の「Add Tween」アイコンをクリックすれば、現在フレームにTweenを指定することができる。デフォルトではリニア(直線的)な動きだけど、in, out, in-out も指定可能。
• レイヤー追加 : 左下の「＋」ボタンをクリック。
• アニメGIFファイルとしてエクスポート : 右上の「export」をクリック。

一応、以下の2つの作業の様子をキャプチャしてみた。

• オニオンスキンを使ってパラパラ漫画を描く。
• Tween機能で補間して動きを作る。

_高解像度 1920x1080版

解像度が荒すぎて分からないかもしれないけれど、このへんをクリックすればこうなる、という雰囲気ぐらいは伝わるかなと…。Wick Editor のページを開いて実際に操作してみれば、「ああ。ハイハイ。そういうことね」と分かるかなと。

余談。なかなかイイ感じのサービスだなと思うのだけど、ググっても日本語で解説されてるページがほとんど出てこない…。何故。