MSX風YS3OP:AfterEffects作例

最近のAE関連の投稿ラッシュの解説した技術を使って上記のムービーが作られている。解説がしんどかったがこれをやっておかないと自分でも後でなにをしていたか忘れてしまうのである。またいつかフェイクゲームのムービーは作りたいと思う。次はファミコンかPCエンジンか。

エクスプレッションの解説

まだ説明していないものを。

{

	move_enemy: function(self){
		self.seedRandom(self.index * 4567, true)
		p = self.transform.position.value;
		f = self.timeToFrames(self.time);
		f += self.random() * 1000;
		dir = -1;
		if (self.essentialProperty("左右反転")==1){
			dir = 1
		}
		speed = 2.0;
		p[0] = p[0] - f * dir * speed;
		while(p[0] < -32){
			p[0] += 320;
		}
		while(p[0] > 320 - 32){
			p[0] -= 320;
		}
		p[1] += Math.sin(f*0.1) * 8 + Math.sin(f*0.02) * 24;
		return this.grid_snap(p);
	},

}

↑ 外部jsの一部抜粋。空を飛んでいる敵の移動処理で、敵の数だけレイヤーが用意してあり、共通でこのmove_enemy関数を呼び出している。selfで渡ってくるのはレイヤー参照。レイヤー番号をランダムシードにして開始位置からどのくらいのフレーム数だけ動いたかを決定。右左にはみ出した部分は自動でループするようにする。最後に8ピクセルごとの吸着処理を呼び出している。

p = thisLayer.transform.position.value[1];
v = numframe = thisComp.layer("CONTROLLER").effect("story index")("スライダー");
ratio = v - Math.floor(v);
dur = 0.15;
w = 192;
if(ratio < dur){
	ratio *= 1 / dur;
	p = p + w - w * ratio;
}
else if(ratio > 1 - dur){
	ratio -= 1 - dur; 
	ratio *= 1 / dur;
	p = p - w * ratio;
}
Math.floor(p/8)*8;

↑ 英語のストーリの位置制御。細かい動きをアニメーションカーブで制御するのが面倒なのでエクスプレッションで制御した。何回目の文言表示をなのかの進行具合は0.0~7.0未満まで変化するエクスプレッション用スライダーにアニメーションキーが打ってありそれを利用する。最後に8ピクセルごとの吸着処理を呼び出している。

thisComp.layer("CONTROLLER").effect("story index")("スライダー")

↑ 同じく英語のストーリーの進行具合。数値をエッセンシャルグラフィックスのパラメータに渡すと対応した文言に切り替わるようになっている。

numframe = thisComp.layer("CONTROLLER").effect("story index")("スライダー");
ratio = numframe - Math.floor(numframe);
dur = 0.15;
if(ratio < dur || ratio > 1 - dur){
    numframe = -1;
}
numframe;

↑ これは日本語ストーリー表示部分の切り替えと表示非表示を切り替えるエクスプレッション。英語のストーリーと同様に数値をエッセンシャルグラフィックスのパラメータに渡すと対応した文言に切り替わるようになっている。ここでマイナスの値を渡すと表示が消えるようにしているので表示されたり表示されなかったりを繰り返しながら文言が変化する動きになる。