ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「タイムリフレイン」グリッチ表現の実装事例

こんにちは、ちょこです!

 

「タイムリフレイン」にて、バナーを表示する際に「グリッチ表現」が使われていました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

グリッチ表現とは…

グリッチエフェクトとは、動画にノイズや歪み、ストライプの効果を付けるエフェクトです。

今流行り!動画にグリッチエフェクトを入れるには?

です!

 

ソシャゲだと、最近流行りのSFの世界観のゲームでよく見かけます。
しばしばこのブログでも紹介しています。 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

グリッチフィルタ カテゴリーの記事一覧 - ゲームアプリのUIデザイン

 

 

ノイズと歪みで表現している

さて、「タイムリフレイン」の演出を動画で確認するとこんな感じの見た目になっています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

ちょっと見づらいですね。

該当の箇所を拡大します!

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

エフェクトを見る感じ「ノイズ」と「歪み」の表現が用いられているように見えます。
汎用的なノイズの上に、歪ませた背景画像をフェードさせた感じでしょうか。

 

色差収差やブラウン管を表現するようなストライプは確認できません。

 

右側にキャラクターがランダムで表示されていますが、キャラの方はフィルタの影響を受けておらず、背景よりやや遅れて表示を開始しています。

 

 

実装方法はフィルタではない?

この表現の実装方法ですが「タイムリフレイン」の場合はここぐらいしかこの表現が使われていません。

アプリの規模感的に、フィルタを実装して動的に表示するのではなく、動画なり静止画で固定で表示しているようにうかがえます。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

▲フィルタではなく固定?

 

人気のフィルタなので、用途に合わせてうまく取り入れられると良いのかな、と思いました。

以上、グリッチ表現の実装を検討する際の参考までに。

 

 

以下は同じような実装方法で過去に紹介したグリッチ表現を取り入れているゲームです。こちらも参考になれば幸いです。

 

appgameui.hatenablog.com

 

appgameui.hatenablog.com