After Effectsの拡張機能を開発しよう

After Effectsの拡張機能を作る上で勉強したことをまとめました．詳しいわけではないので間違いも含まれていると思います．間違いに気づかれましたら，コメントでご指摘いただけると幸いです．

After Effectsの拡張機能の種類

After Effectsの拡張機能には，

• ExtendScriptで書かれるScript
• C++で書かれるPlugin

が存在している．それぞれ出来ることが異なる．

Script

ScriptはExtendScript(古いECMAScript 3の拡張，javascriptの亜種)で書かれ，主に操作の自動化を行うものである．UIがあるものと，ないものがある．

UIがあるものは，UIの作り方によってさらに2つに分かれる．
1つ目は，従来から存在する，UIと操作の自動化すべてをjsxで書く方法である．名前がわからないので以降これを単にjsxと言う．
2つ目は，比較的新しい仕組みである，操作の自動化用のスクリプトをjsxで書き，UIをウェブ技術(html,css,javascript)で書く方法である．CEPという名前がついている．

jsx

.jsxbin という拡張子のものもあるが，これは jsx を難読化したものにつけられる．jsx という拡張子であっても，難読化されているものもある．

UIがないものは，(After Effectsのインストールフォルダ)/Support Files/Scripts に .jsx の拡張子で保存することで， Fileメニュー -> Scripts から呼び出せる．
中身は，難読化されていても，されていなくてもいい．ただし，難読化されていても拡張子を .jsxbin ではなく.jsx にしなければ表示されない．

UIがあるものは，(After Effectsのインストールフォルダ)/Support Files/Scripts/ScriptUI Panels に保存することで，Windowメニューからパネルとして呼び出せる．
中身は，難読化されていても，されていなあくてもいい．拡張子も .jsx でも .jsxbin でもいい．

利点

ファイル1つで実装でき比較的かんたんに作れる．実行できる．

欠点

複雑なUIを作るのが難しい．

例

• Motion Tools 2
  

• Ease and Wizz
  

• Duik Bassel.2
  

リソース

AE操作の自動化について

• サカモトのサイト - AfterEffects Scripts
• After Effects スクリプトリファレンス
  • 公式ドキュメントをWeb形式にしたもの．日本語．
• After Effects Script Reference
  • 公式ドキュメントをWeb形式にしたもの．英語．最新版だと思う．
• Duik
  • オープンソースのリギングScript．この完成度で無料はすごい．しかもソースが難読化されていないので，どのように実装されているか読める．
• rd: scripts
  • こちらもオープンソースのAfter Effectsのスクリプト群．やりたいことと似ているScriptがあったら実装を読んでみよう．
  • 50個もあったrd:scriptsの内容を少しわかりやすく説明する件50個もあるスクリプトの概要はこちら

UIについて

• サカモトのサイト - UIを作ろう！
  • Script UIについて様々なTipsや，Tutorialがある．とてもわかり易い．これだけ読んでいればUIについては事足りる気がする．
• ScriptUI Classes
  • 貴重なScript UIに関するドキュメント．英語．
• AE　ScriptUIを綺麗に作ろう！
  • 実際のScript UIの構成をわかりやすく図示している．また，上のドキュメントが掲載されていた．

CEP(Common Extensibility Platform)

UIをweb技術を使ってつくる．実際に操作の自動化を行うスクリプトはjsxである．

利点

• jsxと比べ，グラフやモーション付きのUIなど，web技術を使ったリッチなUIを作ることが出来る
• 他のソフトとの連携が出来る(ex.OverlordはIllustratorとAfter effectsで連携して動く．Animation ComposerはAfter EffectsとPremiere Proで同じScriptが動く)

例

• Adobe Color
  

• Flow

  • グラフをマウスで変更できるリッチなUIが特徴的．
    

• After Ease

• Motion-3
  

• Overlord

  • After EffectsとIllustratorの連携を行う．Creative Cloudのソフト間の連携はCEPのみで行える

リソース

• CEPスーパー メガ ガイド
  • 古い記事だが，CEPの概要について詳しく書かれている．最初に一通り読むとCEPについての概要が理解できる．開発環境については，情報が古くなっているので次の記事を読むと良い．
• CEP の準備
  • CEPの開発環境の作り方が載っている．VS Codeに，ExtendScript DebuggerとCC Extension Builderを入れて開発するものらしい．
• 2020年9月版　Adobe CEPの開発環境
  • 同じく開発環境の作り方について，最新の補足．
• Adobe-CEP/Samples
  • Adobeが公式で出しているCEPで作られたアプリのサンプル．様々なCCのアプリ用のものがある．とりあえず動かしてみたり，コードを読んでみると良いと思う．
• CEP-Resources
  • CEPに関するAdobeの公式ドキュメントのまとめ．

Plugin

Pluginは，

• Effect
• AEGP

の2種類がある．併用することも出来る？

C++で書かれているのでScriptと比べ高速で柔軟性が高い．

Effect

エフェクトとプリセットに表示されているやつ．

画像を受け取って，プロパティに応じた変更を行い，画像を出力するようなプラグインである．

AEGP

AEGPは，After Effectsのソフト自体に組み込まれ，様々な関数をフックし，AEの機能を拡張する.調べても，情報が少なくてよく分かりませんでした．

例えば，Compositionメニューに表示されるNewton 3がその例である．

リソース

• Adobe Developer Conosole
  • Adobe After Effects SDKがダウンロードできる．WindowsはVisual Studio，MACはX Codeようのプロジェクトになっている．コンパイルすれば動かせるサンプルプログラムが多数収録されている．
• AfterEffectsSDK プラグイン開発開始まで
• Pluginの作り方を動画で解説している．英語．今の所Part.4まである．ところどころコードが間違っているので注意．詳細をあとの章で書きます．
  • Episode 1
  • Episode 2
  • Episode 3
  • Episode 4
• Adobe After Effects SDK Guide!
  • 従来SDK内にPDFで収録されていたドキュメントがweb形式になったもの．英語．公式のSDKに入っているリンクは切れている...．
• Smooth
  • オープンソースのAfter Effects Plugin．
• F's Plugins
  • オープンソースのAfter Effects Plugin集．かなり大量にある．

jsxbinについて

jsxbinは，ExtendScriptの文字列を置き換えて難読化したものです．Scriptを配布するとき，ソースコードを他人に読まれないようにするために存在します．
JSXBINってなに？

難読化の方法

難読化のヘッダーを確認したところ，@JSXBIN@ES@2.0@と@JSXBIN@ES@2.1@の2種類のバージョンが確認できました．

バージョン2.0

2.0のバージョンの難読化は，ExtendScript Debuggerを導入したVS Codeでテキストエリアを 右クリック -> バイナリとして書き出し... から行えます．

バージョン2.1

2.1のバージョンの難読化は，ExtendScript Debuggerを導入したVS Codeで，難読化したい箇所を選択した後， Ctrl+Shift+Pを押しTextToJSXBINを選択することで可能です．

参考: https://community.adobe.com/t5/after-effects/how-to-export-jsxbin-es-2-1-from-extendscript/td-p/10610202?page=1

難読化の解除

文字列を置き換えているだけなので，以下のように難読化されたコードを読むことが可能です．
難読化された .jsxbin ファイルを読んでみる

難読化の解除は利用規約等で禁止されている場合があります．行う際は，利用規約等をよく確認し，自己責任で行ってください．

難読化を解除するツールも開発されています．バグが有り，完全に難読化を解除することは出来ませんが，どのようなことを行っているかを覗くことが出来ます．@JSXBIN@ES@2.0@のみに対応しているようです．
jsxbin-to-jsx-converter

Plugin EverythingのPluginの作り方チュートリアル

Episode 1

After Effects SDKをダウンロードし，Skeletonテンプレートに直線を書くプラグインを実装する．とても素朴なサンプルだが，その分応用範囲が広い．

Adobe After Effects SDKのサンプルをVisual Studio2019でコンパイルする上で，以下の修正が必要だった

文字コード関係でエラーが出るので©を消去

デバッグ前にスタートアッププロジェクトを変更

Episode 2

2Dグラフィックライブラリ Cairo を導入し，それを用いて円を書くプラグインを作る．
Cairoのコンパイル済みバイナリは，https://github.com/preshing/cairo-windows/releases ここから入手できる

cairoCopy8関数内で，longの型のまま除算をしており，小数が切り捨てられているため，色が正しく描画されない．以下のようにキャストをすることで修正した．

before3.cpp

	for (int x = 0; x < data->output.width; x++) {
		worldPtr->alpha = rowP[x] >> 24;
		if (worldPtr->alpha > 0)
		{
			worldPtr->red	= A_u_char(rowP[x] >> 16)  / worldPtr->alpha * PF_MAX_CHAN8;
			worldPtr->green = A_u_char((rowP[x] >> 8)  / worldPtr->alpha * PF_MAX_CHAN8;
			worldPtr->blue  = A_u_char((rowP[x] >> 0)  / worldPtr->alpha * PF_MAX_CHAN8;
		}
		worldPtr++;
	}

after3.cpp

	for (int x = 0; x < data->output.width; x++) {
		worldPtr->alpha = rowP[x] >> 24;
		if (worldPtr->alpha > 0)
		{
			worldPtr->red	= A_u_char(static_cast<double>((rowP[x] >> 16) & 0xff) / worldPtr->alpha * PF_MAX_CHAN8);
			worldPtr->green = A_u_char(static_cast<double>((rowP[x] >> 8) & 0xff)  / worldPtr->alpha * PF_MAX_CHAN8);
			worldPtr->blue  = A_u_char(static_cast<double>((rowP[x] >> 0) & 0xff)  / worldPtr->alpha * PF_MAX_CHAN8);
		}
		worldPtr++;
	}

Episode 3

Cairoを用いてベジェ曲線を書くプラグインをつくる．途中コードにミスが多く，最後にまとめて修正するので，最後まで見てからコードを写経を行うことをおすすめする．

Episode 4

GPUの概要と，GPUを用いるライブラリの紹介，そのライブラリ一つであるOpenGLを使ったサンプルのコードの概要をコードを追いながら紹介する．次のエピソードでは実際に実装を行うらしいが，まだ公開されていない．

最後に

様々なシェイプを1クリックで導入するScriptを作りました．よろしければお使いください
Add Shape Layers