ループスクロールルーチン：AfterEffects

ゲームのスクロールっぽい画面を作るのに長いマップを用意するのは面倒なので配置したオブジェクトをループで流していく処理を作った。通常 エクスプレッションの loopOutなどを使うと思うが、もっと細かい制御を行うつもりなので別の対応をしている。

エクスプレッションの内容

外部jsxファイル

{
	loop(self){
		width=1024;
		padding=160;
		p1 = self.transform.position.value;
		p2 = self.thisComp.layer("SYSTEM").transform.position.value;
		p = [p1[0] + p2[0], p1[1] + p2[1]]
		while(p[0] < 0 - padding){
			p[0] += width;
		}
		while(p[0] > width + padding){
			p[0] -= width;
		}
		return p;
	}
}

jsx関数は汎用的でなくこのコンポジットシーン専用の処理になっている。たくさんのオブジェクトに複数行にわたるコードをコピーして置くと保守性が下がるので。

各背景オブジェクト（動画の柱）一のエクスプレッション共通コード

footage("test.jsx").sourceData.loop(thisLayer);

エクスプレッション詳細

SYSTEMというヌルレイヤーの位置を動かしてそれがスクロール制御になるようにしている。ここではアニメーションカーブを利用したが、ここもエクスプレッション制御でもいい。

オリジナルのオブジェクトの位置にSYSTEMレイヤーの移動量を加算するのでオブジェクトごとに配置位置を変えるとその位置関係を保ったまま移動する＝画面全体がスクロールしているように見える。右にも左にもある程度はみ出すと反対側にワープするようにしているので自動でいつまでもループするスクロールが完成する。

動画では簡単な見た目だが応用すると多重スクロールもできるので、少ないオブジェクト数で凝った画面構成を実現できると思う。

1画面以上あるような画像を配置してもワークするがどのくらい画面が外に出たら反対側にワープするか調整が必要になるのでオブジェクト全体画面からでたら反対側にワープさせる処理に修正するといいかもしれない。

Related Posts

AfterEffectsのExpressionに関するweb上の情報の新旧を見分ける 2022年度版AfterEffectsのスクリプトログ操作 データ駆動型動アニメのバッチレンダリング時はaerender.exeじゃなくafterfx.exeを使おう AfterEffectsのスクリプトリファレンスは2つある。 afterfxコマンド実行時のカレントフォルダ指定 AfterEffects：読み込んだcsvの行数を得る AfterEffects: VoluMax の疑似3Dに Trapcode Particular のカメラを合わせる １つのjsx関数でレイヤーごとの振る舞いを変える：AfterEffects