情報処理学会 インタラクション 2016
IPSJ Interaction 2016

163A06
2016/3/4

4coman：中割りアニメーション自動生成によるセルアニメーション制作支援ツール
古澤 知英†1

福里 司†1

森島 繁生†2,3

概要：本稿では，手描きイラストをもとに作られるセルアニメーションを中割り画像の自動生成により，わずか 4 枚のイラストからアニメーション制作を可能とするシステム，4coman を提案する．本システムは，シーンに登場する物
体をスクリーン上で絵を描くようにモデリングを行い，モデリングに関する専門的な知識を持たない人でも三次元形状を作ることが出来る．また，任意の角度から見た際の物体の形状を編集することで，モデリングを実現する．さらに，モデリング結果に中割りアニメーション生成手法を適用することで簡単にセルアニメーションを作ることが出来
るインタフェースを構築する．

4coman：Making automatically In-between animation systemfrom 4 hand-drawn frames
CHIE FURUSAWA†1 TSUKASA FUKUSATO†1 SHIGEO MORISHIMA†2,3

Abstract: This paper presents 4coman, a system that generates cel animations only from four hand-drawn frames.
The user draws several 2D freehand strokes interactively on a screen and the system automatically generates quasi-3D models. Our system has the potential to educational use for non-professionals and children. Furthermore,this system is able to interpolate and edit freehand drawing strokes between key frames of various camera angles.
With two interpolation algorithms (i.e., 2D interpolation algorithm and quasi-3D rotation interpolation algorithm),
it is possible to create cel-animation easily and quickly.

1. はじめにで制作される．一旦モデリングを行った物体は，他のシーンでも使用することが出来るため，作業の効率化が可能でアニメーションは，絵日記や絵画のような一枚の静止画あり，アニメーション業界で大きな支持を得ている．そのとは異なり，複数の絵を重ね合わせることで作られることような利点があるにもかかわらず，全てのアニメーション

から，ストーリー性を持った世界観を視聴者へ伝えること

スタジオの制作工程がセルアニメーションの制作の仕方かが出来る素晴らしいコンテンツといえる．特に，日本のアら CG アニメ―ションの制作の仕方に移り変わらない理由

ニメーションは世界規模で人気を博しており，その裏にはは，セルアニメーションが，物理的な矛盾表現をはじめ，原作となる多くの漫画が密接に関係していると考えられる．

アニメータの意図を十分に反映した映像が作ることが出来アニメーションはセルアニメーションと CG アニメーショることが挙げられる．さらに，CG アニメーションに比べンの大きく二つに分けられる．日本のアニメーションは長て専門的な知識を必要とせず，人々が幼いころから慣れ親

年，セルアニメーションが大多数を占めていた．しかし，しんでいる「絵を描く」という行為でアニメーションを制

セルアニメーション制作はセル画と呼ばれる，動きのもと作できることが，セルアニメーションを支持する大きな理となる静止画をアニメータが一枚一枚描く必要があるため，由であると考えられる．よって，制作の効率化およびセル

時間的なコストが高いという問題を抱えている．さらに，アニメーション制作の技術的難易度の敷居下げが出来る技

アニメータの不足の問題も抱えており，セルアニメーショ

術が登場すれば，CG アニメーションのように専門的なソン制作が危機的状態にあると言われている．一方で，Disney

フトウェアや，物理や数学的な知識を必要とせず，一般人

をはじめ，海外のアニメーションスタジオでは CG アニメにもアニメーション制作がより身近なものになりうるといーションの制作が普及している．CG アニメーションでは，える．

キャラクタ等のモデリングを行い，モデリングした物体をそこで，本稿では CG アニメーションで広く用いられる

各シーン中でカメラの設定，物体のポーズを指定することモデリング技術をセルアニメーションの制作工程に取り入れることで，セルアニメーション制作における時間的なコ†1 早稲田大学
Waseda University†2 早稲田大学理工学術院総合研究所
Waseda Research Institute for Science and Engineering†3 JST CREST
JST CREST© 2016 Information Processing Society of Japan

ストの問題を解決しつつ，ユーザの意図を反映した手描き
ならではの表現を保持したアニメーション制作を行うことが出来るインタフェースを提案する．概念図を図 1 に示す．

794

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

163A06
2016/3/4

図 1．4coman の概念図
セルアニメーション制作の課題である時間的コストを削減成される物体に関してはキーフレーム間でアフィン変形をする方法の一つとして，数枚の絵(キーフレーム)から今の考慮した中割り画像生成を行うことで三次元的回転を伴う絵と次の絵の時間的経過を埋める連番画像(以下，中割り画

セルアニメーションの自動生成が可能となる．一度ユーザ像)を自動的に生成する手法が挙げられる．

がモデリングした物体は，何度でもキーフレームとして挿従来の中割りアニメーションの手法では，キーフレーム

入することができるため，CG アニメーション制作におけ間の形状はアフィン変換で近似することが多い．そのため，る長所を取り入れつつ，一般人でも簡単にアニメーション

キーフレームで描かれた形状の特徴を保持した中割り画像制作ができるインタフェースとなっている．

を簡易的に生成することが可能となっている．しかし，キーフレーム間で回転のような三次元的な動きを含む場合，ある視点から見た物体の形状は大きく変化するため，前述の中割り生成手法を適用しても適切な中割り画像を得るこ

2. 関連研究
本章では，代表的なセルアニメーション制作支援インタとが出来ない．その結果，三次元的な回転に特化した中割

フェースについて述べたのち，本インタフェース 4coman

り自動生成手法も提案されてきた．

の機能について検討する．LIVE2D では，入力画像上にメ

これらの研究背景から，中割り生成手法を用いたセルア

ッシュ情報を作成し，イラストを動かすシステムを提案しニメーション制作技術には，二次元平面内での物体変化のた．この技術によって，原画の持つ魅力を生かしつつ，動表現手法と，三次元的な回転を含む物体変化の表現手法にき（中割り画像も含む）の生成を実現した [1]．しかし，メ分ける必要があることがわかる．そこで本稿では，ユーザ

ッシュを手作業で作成する必要があることや，メッシュのがいくつかの視点からの物体の形状を描き，その絵をキー

変形には各頂点間の線形補間を用いていることから，一つフレームとした三次元回転における中割り生成手法を用いのシーンを制作するために多数の編集を要する．そこで，たモデリングを行う．これにより，一般人でも自らの意図

4coman ではユーザが描いたストローク上の特徴点を自動を反映したオブジェクトを簡単に作成することが出来る．

取得するアルゴリズムを加えることで，メッシュ作成の手

三次元回転の動きを含む物体については，ユーザが指定し間を省く．

た角度に対し，キーフレームを挿入し，平面的な動きで構© 2016 Information Processing Society of Japan

Dalstein らは，複数のベクターグラフィックスを入力と795

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

し，ベクターイメージ上のストロークの形状変化を時系列順に並べ，アニメーションを自動生成するインタフェース
を提案した[2]．中割り画像中のストロークの形状は，White
らの中割り生成アルゴリズムをもとに決定される[3]．手順
として，ストロークの制御点に基づく曲線フィッティングと接線ベースのワーピングを行う．そのため，ユーザが描いたフレームを基に生成した中割りストロークは，インタ

163A06
2016/3/4

3. ユーザインタフェース
4coman は 1) モデリングページ，2) 四コマ作成ページ，
3) 中割り自動生成結果表示ページの三つの工程から構成
されている．全てのページで表示されている右下部の矢印
ボタンを押すことで，選択中の工程の完了および次の工程への移動をすることが出来る．各工程でのインタフェースの機能等は，各節で説明する．

ラクティブかつ入力ストロークの特徴を保持することが出来る．しかし，フィッティング関数から得られる中割りス
トロークの形状変化量の許容幅が小さいため，キーフレー
ム間の変化量が大きい場合，中割りストロークの形状が大きく破綻する可能性がある．そこで，4coman では曲線フィッティングによるストローク形状ワーピングではなく，キーフレーム間でのストローク上の特徴点座標の変換による中割り生成アルゴリズムを導入する．
Xing らは，一枚目に描かれたストロークの形状と位置の情報を利用し，二枚目以降のストローク形状の予測及び提示することで，ストロークの形状特徴を保持した変形を許容し，中割り画像を簡単に作成できるインタフェースを提案した[4]．しかし，三次元的な動きを含むアニメーションを作成する場合，ストロークを考慮するだけでは，十分な予測が出来ず形状が破綻する場合も考えられる．そこで，我々のインタフェースでは，より多くのシーンに適用可能な中割り生成を目指すため，三次元的な動きにも対応した
中割りアルゴリズムも検討する．
三次元的な動きを表現する方法として，Rivers らは入力
ストロークごとに深度情報(離散的な z 値)を与えることで，

3.1 モデリングページ
モデリングページ図を図 2 に示す．図 2 中の左下部のモ
デリング視点設定部にてキーフレームとするアングルを設定した後，メインパネルにて設定したキーアングルにおける物体形状を描く．対称性のある物体を作成する場合，ユーザがストロークの一部を描き，設定した軸をもとにしてストローク情報を反転し，ストロークの複製を形成するモデリングのための絵描き補助機能を実装した．鏡越しにス
トロークを連結するか否か，モードを選択することが出来るため，ユーザは適宜手間を削減しつつキーフレームを作成することが出来る．また，ページ右上部の深度情報設定
パネルにて各ストロークの深度情報を設定できる．パネルの下部に行くほどレイヤーは視点に対して手前に設定される．二枚以上のキーフレームを描いた後，右下部の『compute』
ボタンを押すと，ユーザが描いたキーフレームが，ストロークの座標情報と深度情報をもとに物体形状がモデリングされる．モデリング結果がある視点からの形状が所望の形状でない場合，その視点での形状を逐次修正することが出来る．

擬似的な三次元モデリングを行うインタフェース，2.5D
cartoon models を提案した[5]．ストロークの深度情報の変化
および，ストロークの形状変化，位置変化をユーザがイン
ラクティブに設定することが出来る．2.5D cartoon models
は，ストロークを自在に描くのではなく，頂点の位置を指定し，頂点間を曲線と直線の二種類で連結する仕様になっている．そのため，自在な形状を描くにはユーザが多数の頂点を設定する必要があり，手間がかかる．同様に，擬似的な物体のモデリングを行うインタフェースを Kitamuraらが提案した[6]．Kitamura らのインタフェースでは，あらかじめ制作者により自由に描かれたイラストを入力画像として用いるため，Rivers らのインタフェース上の問題を解決している．しかし，キャラクタの特徴点については，対応付けを手動で行う必要がある．そこで，4coman ではユーザが自由にストロークを描くことで入力ストローク上の特徴点の自動サンプリングを行う機能を備えたインタフェー
スを提案する．また，Xing らと Rivers らの研究にて，二次元平面内の動きと三次元回転を含む動きでそれぞれのアルゴリズムが必要であることが確認できるため，本インタフ
ェースでは，これらの動きをそれぞれ作成するインタフェ

3.2 四コマ作成ページ
四コマ作成ページ図を図 3 に示す．モデリングページにて構築した物体以外で，アニメーション中に登場させたい
他の物体のキーポーズを四コマパネル上にそれぞれ描く．
モデリングページでモデリングを行った物体は，この段階で挿入することで，三次元的な動きを含ませつつ，メイン
アニメーションに登場させることが出来る．各コマで挿入
したい角度を選択し，右中央部の『insert』ボタンを押すことで，指定のコマに挿入することが出来る．モデリングされた物体とその他のシーンに登場する物体が描かれたコマには，モーションペンシルと呼ばれる各ストロークの動きを指定するペンで物体の動きを指定することで，三次元回転の変化やストロークの形状変化だけでなく，キーフレー
ム間での物体の動作を付加することが出来る．モーション
ペンシルについては，4 章 3 節にて述べる．セルアニメー
ション制作では，同じ動作を繰り返す場合でも，どのフレ
ームをどのタイミングで表示するのか繰り返しの回数分設定を行う必要があるが，4coman ではその手間を省きつつ，物体に動作を付加することが出来る．

ースの構築を行った．

© 2016 Information Processing Society of Japan796

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

163A06
2016/3/4

図 5. 三次元的な動きの補間について
図 2. モデリングページ

3.3 中割り自動生成結果表示ページ
中割り自動生成結果表示ページを図 4 に示す．四コマページで作成した四コマの対応関係とモーションペンシルによる動きの付加情報から自動生成される中割りアニメーシ
ョンをメインパネルにて確認できる．右上部の中割りパラ
メタを動かすことで，制作した中割りアニメーションを見ることが出来る．

4. アルゴリズム
本章では，モデリングページにて導入されている三次元
回転を含む中割りアルゴリズムと，四コマ作成ページにて導入されている中割りアルゴリズムについて述べる．
4.1 モデリングアルゴリズム
第一章にて述べたように．三次元的な動きを含む中割り
図 3. 四コマ作成ページ

アニメーションは線形補間では表現することが出来ない．
理由として，三次元的な動きでは，視点または物体の回転により遮蔽パーツが生まれるため，各ストロークの形状・位置と共に深度情報の補間も行う必要があるからである．
三次元的な動きを二次元平面上にて見た際の様子を図 5 に示す．図 5 中のキャラクタの左目に注目すると，左向きに回転により，左目が向かって右に移動した後に，左に折り返しつつ，左目の深度情報が輪郭の深度情報よりも後方に来ることで，左目が遮蔽されることが確認できる．よって，三次元的な動を表現するには，一方向の座標移動を示す線
形補間のみでは表現が出来ないことが確認できる．
Rivers らは，深度，形状，位置の三つの情報を個別に補間を行った．我々も同様に，深度，形状，位置の三つの情報を分けて考える．ただし，位置情報の補間方法に関して
は，Rivers らの手法と異なる手法を用いる．Rivers らの手

図 4. 中割り自動生成結果表示ページ

法では，深度情報を設定し，設定された深度情報と各キーフレームでの角度をもとに位置を決定する．しかし，彼ら© 2016 Information Processing Society of Japan797

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

は簡易的な三次元モデルを仮定しているため，視点を変更
した後のストロークの位置が適切でない場合がある．そこ
で，我々は，ストローク上の各点の位置，および形状の情報の決定は，キーフレームのストローク上の点の座標値のみから算出するアルゴリズムを導入する．
Furusawa らは遮蔽パーツの軌跡に着目し，COS 関数を用いて正面と側面の二枚のキャラクタ顔画像から三次元回転
アニメーションを生成している[7]．本インタフェースも，二枚のキーフレームからモデリングを行う際は，この手法を用いる．ただし， Furusawa らの手法はキャラクタの顔の深度情報を用いていないため，領域の一部が他のパーツによって部分的に遮蔽される表現が出来なかった．そこで，深度情報をストロークごとに与え，深度情報についてのみ
線形補間を行う．キーフレームが三枚以上だった場合や，
一旦モデリングを行った場合，挿入されたキーフレームを全て用いて補間を行う．

163A06
2016/3/4

5. 生成結果
以上の手順で制作したアニメーション結果の一例を図 6，7 に示す．これらの結果から，中央のキャラクタに対して三次元的な動きを導入し，周りの物体にも中割りアニメー
ションを付加することによって，中割りアニメーションの生成を実現したことが確認できる．また，処理速度に関しては，ストロークの本数(制御点数)やサンプリング間隔に依存するが，図 6 および 7 の場合，各フレームで 40 本以上のストロークがあり，総特徴点数が 400 点を越えていたが，いずれも 30[fps]以上を実現した．そこで，ユーザテストとして，本システムをタブレット端末上で数名のユーザに使用してもらい，簡単なフィードバックを得た．タブレット
端末上でも十分な処理速度等の遅延は感じられなかった．
ユーザテストの結果，「自分が手で描いた絵にあらゆる動きを付加が出来るため，面白い．」「ハイスペックな機器を必要とせずにアニメーション制作が出来るのが嬉しい．」といったポジティブな意見が得られている．一方で，モーショ

4.2 四コマ間補間アルゴリズム
二次元平面内での形状補間を行う際，現在，非常に有効

ンペンシルの動きの結果の確認やサンプリング間隔についての改善の希望の意見も得られた．

な手法をして注目されているのが，Alexa らをはじめとした，As-Rigid-As-Possible Mesh Interpolation と呼ばれる手法
である[8]-[13]．これらの手法はメッシュモデルの最小単位で6. まとめと今後の課題ある三角形間のアフィン変換をもとに，物体の全体形状の本研究は，ユーザが描いたストロークを対象とした中割変形を行うアルゴリズムとなっている．しかし，この手法

り画像の自動生成システム，4coman を提案した．三次元的はストロークのように対応づいた制御点二点から回転情報

な動きを付加する物体のモデリング，およびストロークにを含むアフィン変換行列を算出するのは困難であるといえ特化した中割りアルゴリズムを検証した．ユーザが描いたる．そこで Fukusato らは，垂直方向に仮想的な頂点ベクト

手描き画像をもとに，gif アニメーション等のシンプルなアルを定義し，三角形メッシュを生成することで，ストロー

ニメーションを簡易的に生成するお絵かきインタフェース

クに適用可能な擬似的な三角形構造を構築することを提案の実装を行った．

している

[14]

．そこで本インタフェースでも，Fukusato らの今後の課題について検討を行う．まず，本インタフェー

手法を用いて，ユーザが描いたストロークに対し擬似的な

スでは，ユーザが描いたストロークに等間隔サンプリング

三角形構造を構築することで，四コマ間のストロークの中を施し，特徴点を取得している．これにより，ストローク

割り画像を生成する．

の特徴的な形状を取得し損なう可能性がある．今後は，ストロークの曲率や勾配情報を用いた自動サンプリング手法

4.3 モーションペンシルアルゴリズムを開発する予定である．次に，キーフレーム間のストロー

キーフレーム中のストロークに対する動きの割り当てにクの対応関係を，現在，書き順をベースに取得している．

ついて記述する．インタフェース中のお絵かきモードを解前後のフレーム間で対応付けが行われなかったストローク除すると，モーションペンシルモードに切り替わる．モーに関しては，フェードアウト(α 値補間)または，効果を付加

ションペンシルでスクリーン上に軌跡を描くことで，そのしない設定を適用させている．そこで，今後は，ストロー

始点と最も近いストロークに対し，移動情報を付与する機

クの描き順のみではなく，ストロークの座標や長さを考慮能を追加した．これにより，四コマのキーフレーム中にあした対応付けを行うことで，よりユーザにやさしいキーフ

るストロークに，中割り用の対応情報を与えずに動きを割

レーム制作を行えるように実装を加えたい．さらに，本イ

り当てることが出来る．また，モーションペンシルの軌跡

ンタフェースでは，色情報の補間として RGB 表色系の線

は，中割りアニメーション生成前に確認，および修正を行

形補間を用いている．今後は，色の変化が，よりユーザにうことが出来る．

とって自然な色の補間になるよう，その他の表色系や導入した表色系における補間方法についても今後検討を行っていきたい．

© 2016 Information Processing Society of Japan798

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

163A06
2016/3/4

図 6. 中割り自動生成結果の例(その 1)

図 7. 中割り自動生成結果の例(その 2)

謝辞

本研究の一部は情報処理推進機構(IPA)の 2014 年

度未踏人材発掘・育成事業の支援を受けて実施されたもの
である．

参考文献
1) LIVE2D. 2014. http://www.live2d.com/en/
2) B.Dalstein, R.Ronfard, and M. van de Panne. Vector graphics animation with time-varying topology. ACM TOG 34, 4, 145. 2015.
3) B.White, G.Noris, M.Simmons, R.Sumner, M.Gross, and J.Rossignac.
BetweenIT: An Interactive Tool for Tight Inbetweening. Computer
Graphics Forum, 29, 2, 605-614. 2010.
4) J.Xing, L.Wei, T.Shiratori, and K.Yatani. Autocomplete hand-drawn
animations. ACM TOG 2015 34, 6, 169. 2015.
5) A.Rivers, T.Igarashi, and F. Durand. 2.5D cartoon models. ACM
TOG 29, 4, 59. 2010.
6) M.Kitamura, and R.Tsuruno, 2.5D Modeling from Illustrations ofDifferent Views, International Journal of Asia Digital Art and Design,8,4, 74-79, 2015.

© 2016 Information Processing Society of Japan

7) C.Furusawa, T.Fukusato, N.Okada, T.Hirai, and S.Morishima. Quasi
3D rotation for hand-drawn characters. ACM SIGGRAPH 2014 Posters,
12. 2014.
8) M.Alexa, D.Cohen-or, and D.Levin. As-Rigid-As Possible MeshInterpolation. ACM SIGGRAPH. 157-164. 2000.
9) T.Igarashi, T.Moscovich, and J.F.Hughes. J.F. As-Rigid-As-Possible
Shape Manipulation. ACM TOG 24, 3, 1134-1141. 2005.
10) W.Baxter, P.Barla, and K.Anjyo. Rigid Shape Interpolation using
Normal Equations. In Proc. NPAR. 59-64. 2008.
11) S.Kaji, S.Hirose, S.Sakata, Y.Mizoguchi, and K.Anjyo. Mathmatical Analysis on Affine Maps for 2D Shape Interpolation. In Proc. SCA.
71-76. 2012.
12) R.Chen, O.Weber, D.Keren, and M.B.Chen. Planar Shape Interpolation with Bounded Distortion. ACM TOG 32, 4, 108. 2013.
13) Z.Levi, and C.Gotsman. Smooth Rotation Enhanced
As-Rigid-As-Possible Mesh Animation. IEEE TVCG, 21, 2, 264–277.
2015.
14) T.Fukusato, and S.Morishima. Active Comicing for Freehand
Drawing Animation. Lecture Notes in Mathematics-for-Industry, Vol.64,
6-15, 2015.

799