Death ComingのOPの動きが気持ちいい

去年、Steam上で話題になった"Death Coming"というゲームがあります。

"事故死した主人公が死神代行として、人々を事故に見せかけながら殺害し、自らの復活を目指す"という内容の、なかなかインディーズっぽいゲーム。

Steam上ではWindows版のみのサポートだったので、プレイできなかったのですが、最近App Storeでも発売されることになったため、プレイしてみました。

ゲーム自体もちろん面白かったのですが、それよりオープニングのアニメーションが気持ちよく、自分が何を気持ちいいと感じたのか気になったのでまとめてみました。

フルバージョン

1. 主人公が事故にあった瞬間の円のアニメーション

最初のアニメーションはこれ。
・文字がふんわりと消えた後に事故の音
・ウロボロスが消え、それと同時に円状に広がるアニメーション
・遅れて現れる円形のアニメーション
・遅れて現れた円形のアニメーションがease-out(?)で消える

円状・円形のアニメーションが波状に流れるのが気持ちいいです。

2. 心電図の線が縦になり、広がるアニメーション

2つめのアニメーションはこれ。
個人的には一番好きなアニメーションです。
普通の心電図のグラフ→心停止した心電図のグラフ→画面遷移
と遷移させることで、シーンの切り替えを滑らかに行っています。

非ゲームアプリでも、同様のアニメーションは1Password などで実装されているので、実際に使えそうなアニメーションです。

3. 泣いている女性のアニメーション

女性がばね風アニメーションと共に登場し、後ろでハートが割れるアニメーションです。
これだけうまく自分の中で言語化できてないんですが、おそらく
・ハートが割れるまでのタメの長さ
・ハートが割れる速度
・ハートが割れる速度と同じ速度でエコーのように表示される薄いハートのアニメーション
の3つを気持ちよく感じたのではないかと思います。

4. 死神が登場する際のばね風のアニメーション

4つめのアニメーションは、死神の登場シーン。
ローブ→鎌→顔、という順序で表示が切り替わっていきますが、
アニメーションについても、
ローブ→鎌→顔の順にアニメーションのばねが強くなっています。

徐々にばねを強めることにより、インパクトを徐々に強めることに成功しています。
さすがに、非ゲームアプリの画面遷移等でこのようなアニメーションはウザくなるので使えませんが、演出としてはとてもいいアニメーションだと思います。

5. 死神の後光のアニメーション

4つめのアニメーションの後のアニメーションですね。
1. 死神がばね風アニメーションを徐々に強めて登場
2. 後光の円がlinearなアニメーションで差し込まれる
3. 後光の円がease-outアニメーションで消える
という流れでアニメーションが実行されています。

これにより、死神の登場と退場をインパクトあるものにできています。また、登場と退場が別のアニメーションで実行されているので、単調にもなっていません。そして、2. のアニメーションがlinearなものとなっているため、ユーザーの注意を不必要に引かないようにもなっています。
非ゲームアプリにおいては、linearに表示してease-outで消す、という処理は何かを消す際のアニメーションとして使えるかもしれません。
(アイテムの削除で使うにはくどい気がするので、ワンポイントで使うくらいな気はしますが...)

6. 表情が3つ出てくるアニメーション

3つの表情がそれぞればね風アニメーションを伴って飛び出し、奥に引っ込む際にもばね風アニメーションを伴っているので、非常にメリハリがついたアニメーションになっています。
また、表情の周りで図形が飛び出してくるばね風アニメーションについても、表情と同じようなばねの強さになっているため、とても滑らかで気持ちが良いアニメーションになっています。
非ゲームアプリにおいては、ユーザーが何かを達成した際に🎉を表示したラベルをばね風アニメーションで表示する→周囲に少し遅れてパーティクルを表示する、とかでなら使えそうだと思います。

まとめ

大好きなゲーム、Death Comingのオープニングにおける素敵なアニメーションを取り上げてみました。
メリハリの効いたアニメーションが滑らかに接続され、オープニングが進んでいくこと、しかもオープニング100秒のうち、半分の50秒でメリハリの効いたアニメーションが表示されていることを気持ちよく感じたのかなー、という結論です。

そしてアニメーションが気持ちいいだけでなく、ゲームも面白いので是非買いましょう。