このコラムでは企業のDX相談から映像制作のワークフロー改善まで、技術に関わることを幅広く扱うテクニカルディレクター集団「BASSDRUM(ベースドラム)」が、アニメ制作における技術活用の可能性を探ります。

実際の現場で起きているお悩みを例に、その課題を解決するためのプロトタイプを開発していきます。みなさんもぜひ、一緒に試してみてください。本企画で取り上げるお悩みも随時募集しております!

第3回となる今回は、After Effectsでのプリビズ制作における「コンポジション作成」や「ガイド生成」の手間を減らしたい、というお悩みを解決していきましょう。

記事の目次
    お悩み相談はこちらから

    森岡東洋志/BASSDRUM

    1981年生まれ。東京工芸大学博士課程満期退学。工学修士。メーカー勤務を経て、2014年からIoTデバイスの開発やスマートフォンアプリの開発、インスタレーションの開発に携わる。2015年、プロトタイピングに特化したワントゥーテンドライブを設立し、CTOとしてメーカーとの新製品開発やテクノロジーを使ったエンターテイメントの開発を行う。2020年に独立し、BASSDRUMに参画。大阪芸術大学にて非常勤講師も務める。

    今回のお悩み「コンポジションの際の定型作業を簡略化したい」

    アニメスタジオ勤務 ディレクター C氏の悩み

    3Dでのプリビズ制作も増えていますが、コマ落としや2Dのカメラワークは3DソフトよりもAfter Effects(以下、AE)のほうが扱いやすく、両者を組み合わせて進めるケースも少なくありません。 その一方で、2つのソフトの間でデータをやりとりする際には、AE側での‟素材を並べてコンポジションを組む”下準備が毎回必要になります。



    例えば1カットをプリビズ用に組むだけでもキャラクターの線画・塗り・影・背景などがそれぞれ別ファイルで届き、それをAE上で並べて構成したり、次工程に渡すためのカメラガイドを作成したりといった地味な手作業が続きます。どれもシンプルな作業とはいえ、カットごとに繰り返すことで時間も気力も確実に削られていきます。こうした定型作業をなんとか自動化できないでしょうか?」


    今回はこちらのお悩みを解決していきましょう!

    プリビズのカメラワーク準備を自動化する「AEスクリプト」

    AEでの素材整理や構成準備、ガイド生成といった一連の工程は創造的というよりむしろ定型的な処理が多く、自動化と非常に相性の良い領域です。そこで今回は、素材の読み込み・コンポ作成・カメラワークガイド生成までを一括で行えるAE用スクリプトを試作してみました。

    ★TIPS:カスタマイズしやすいアプリ・しづらいアプリ

    技術者視点で見ると、「アプリがカスタマイズできるかどうか」は非常に重要なポイントです。たとえば「AEにこの機能があったら便利なのに」と思ったとき、AEがカスタマイズ可能であれば、その機能だけを追加すれば済みます。しかしカスタマイズができない場合、「その機能が最初からついたAEをゼロからつくる」ことになり、開発コストは一気に跳ね上がります。これをエンジニアの間では「車輪の再発明」と呼んだりします。

    ★TIPS:iPadよりPCのほうが自動化しやすい

    近年、iPadはアニメ制作現場でもよく使われていますが、アプリのカスタマイズ性という点では、PC+液晶タブレット環境のほうに大きなアドバンテージがあります。iPadアプリはOSの制限が強く、自由に拡張したり外部スクリプトを使ったりといったカスタマイズが難しいため、「作業を自分仕様に整えたい」「自動化を検討したい」という方には、PC環境のほうが柔軟に対応できます。

    「カメラワーク制作用コンポジット自動作成スクリプト」とは?

    今回紹介するスクリプトは、Adobe ExtendScriptというしくみを使ってつくられたAE用のスクリプトです。2種類のスクリプトを使い分けて、素材の読み込みからガイド作成までを一気に自動化します。

    1:importAndSetup.jsx
    ・キャラクターごとの線画・塗り・影の素材を自動でまとめる
    ・背景素材と合わせて各種コンポジションを自動生成
    ・作業用コンポ「CombineComp」と、カメラワーク編集用の「CameraComp」をセットアップ

    2:guideGenerator.jsx
    ・編集が完了したコンポに対して、カメラワークをトレースしたガイド付きコンポを生成

    あらかじめ決められた形式で素材フォルダを整理しておくだけで、AEでの読み込み・整理・配置・ガイド生成といった下準備が一気に完了します。

    ★TIPS:Adobe ExtendScriptとは?

    ExtendScriptは、Adobe製品向けに用意されたスクリプト言語で、基本的にはJavaScriptとよく似ています。ただし厳密には別物なので、JavaScriptとして正しくてもExtendScriptでは動かないケースもあります。

    開発には Visual Studio Code と、以下の拡張機能を使うと便利です:
    ・Adobe Extension Development Tools
    ・ExtendScript
    ・ExtendScript Debugger

    これらを導入することで、VS Codeから直接コードを実行・デバッグできるようになります。また、ExtendScriptはAEだけでなくPhotoshop、Illustrator、InDesign、Bridge、Acrobatなど、様々なAdobeアプリで活用できます。

    このスクリプトが実現すること

    ・キャラクター素材や背景を読み込んで、コンポジションを自動生成
    ・線画・塗り・影といったレイヤー分け素材をまとめて整理
    ・タイムリマップ用のキーフレーム付き編集用コンポ「CombineComp」を作成
    ・カメラワーク編集用のコンポ「CameraComp」も自動生成
    ・編集完了後、カメラワークをトレースしたガイド付きコンポを自動生成
    ・繰り返していた手作業の時短・ミス防止・負担軽減を実現

    GitHubで公開中のサンプルプログラムはこちら
    github.com/bassdrum-org/2DCamerawork-AEScript

    プログラムの実行方法

    STEP 1|素材フォルダを指定のルールで整理する

    スクリプトを動かす前に、フォルダを決められたルールで整理しておきます。

    ====================================================
    ◼️フォルダ構成の例:
    カット名のフォルダ
    BG
    ***.png
    A
    Line
    ***0001.png
    ***0002.png

    Flat
    Shade
    B
    C
    ====================================================

    背景は必ず「BG」という名前のフォルダに入れ、画像はその中に直接置きます。

    ・キャラクターは「A」「B」など英字1文字のフォルダ名に。
    ・キャラクター内の各レイヤー(線画・塗り・影など)は、自由な名前のフォルダで分けてOKです。
    ・レイヤーフォルダには、連番画像でも静止画でも構いません。

    STEP 2|ガイド用AEファイルを準備する

    スクリプト実行時に使うガイド用のAEプロジェクトファイル(guide.aep)を用意します。このファイルには、カメラガイド用のフレームや目安となるライン(コマ数、秒数、枠線)が含まれています。カットに合わせてコンポジションのサイズやフレーム数を調整してください。一度設定しておけば、同じサイズのカットに使い回すこともできます。

    STEP 3|スクリプトを実行する

    AEを起動し、新規プロジェクトを作成します。その上で、以下の手順でスクリプトを実行します。

    ◼️importAndSetup.jsx を実行
    1. AE上部メニューから[ファイル→スクリプト→スクリプトファイルを実行]を選択

    2.importAndSetup.jsx を選択

    3.カットの素材フォルダを選択(STEP 1で用意したもの)

    4. 続いて、ガイド用の guide.aep ファイルを選択して[OK]で実行します

    実行が成功すると、下記が自動的に行われます。

    ・各素材のインポート
    ・各素材別のコンポジション(例:キャラクターA、B、BGなど)
    ・CombineComp:キャラクター・背景素材をタイムリマップ付きで統合
    ・CameraComp:カメラワークガイド付きの編集用コンポジション

    ⚠️ 注意点

    ・作成されたコンポジション名は変更しないでください
    ・CameraCompでは「位置」と「スケール」のキーフレームはセットで打つことが必要です

    STEP 4|カメラワークのガイドを作成する

    編集作業が完了したら、2本目のスクリプト guideGenerator.jsx を実行します。

    1. AE上で再度[スクリプトファイルを実行]→ guideGenerator.jsx を選びます

    2. ポップアップでガイド枠のサイズ(数値)を入力します
    ※未入力・誤入力があると実行できません

    3. 正しく入力できたら[RUN]ボタンをクリック

    これで、カメラワークガイド付きの「GeneratedComp」が生成されます!

    実行後、カメラワークのガイドがついたGeneratedCompというコンポジションが生成されます。

    ここまでの手順を一度マスターしておけば、素材整理 → コンポ生成 → ガイド付きコンポ出力までを一連の流れで自動化できるので、プリビズにかかる負担が大きく軽減されるはずです。

    まとめ:ちょっとした作業も、自動化でぐっと効率的に

    アニメ制作の現場では、「あと少しこうできたらラクなのに」と感じる、細かな工程がたくさんあります。今回のように、毎回同じ手順で行うコンポジションの準備やガイド作成などは、スクリプトによって自動化できる代表例です。

    「自分たちの現場では難しそう」と思っていたことも、意外とシンプルに解決できる可能性があります。もし似たような単純作業に日々時間を取られているなら、自動化の選択肢を考えてみてはいかがでしょうか? きっとよりクリエイティブな作業に集中できる時間が増えるはずです。

    最後に

    いかがだったでしょうか?

    この相談室では、アニメ制作に関する課題を技術で解決する記事を連載中です。「こんなことできないかな?」というご相談をお待ちしております!また、お仕事としても上記のようなアニメの業務効率化やワークフローの改善に関するお悩みをお受けしています。こちらもお気軽にご連絡ください。

    お悩み相談はこちらから

    BASSDRUM / ベースドラム株式会社

    体験施設・ショールームの企画から企業のDX支援、新規事業・プロダクト開発に至るまで、AIなどの先端分野と現場で培った知見の融合により、技術面からプロジェクトをリードする、世界初のテクニカルディレクター・コレクティブ、及びその中核にある会社組織。クリエイティブとテクノロジーを横断的に理解し、両者のコミュニケーションを媒介しながら、プロジェクトのあらゆる局面において技術を武器にチームの実現力を最大化します。2024年、日本のアニメ業界の未来を支えるチーム『ADX』を設立。
    bassdrum.org

    特別協力:おちゃのこ(UTUTU) ・迫田祐樹(スタジオコロリド京都)
    執筆:森岡東洋志
    設計:森岡東洋志・池田 航成
    プロジェクトサポート:福井彩加
    (BASSDRUM)
    編集:柳田晴香