概要
歪みエフェクトの簡単な概要。実装までの考え方、参考に。
※マスクや描画領域の確保が必要。
歪みエフェクトとは
※GIFアニメ
こんな演出。
正式な名称があるんだろうけど、僕は”歪み”と読んでいます。
2Dゲームの描画処理
超ざっくりな描画フロー
僕はだいたいこんな感じで、ゲームや演出の描画処理を実装することが多い。
※描画処理を１から作る事はなかなか無いけれども…
背景の描画処理を他のものと分けているのは、再描画時に転送回数を少なくする為
歪みエフェクトの実装サンプル
歪んでいるエフェクト自体を作るところから。
合成用の描画領域を用意
※チェックの所は透明なイメージ…
エフェクトを合成するための描画領域を作る。VRAMと呼ばれたりする。
マスクを描画する
円形の描画。マスクの描画方法は画像を作って転送してもいいし、arc()等の図形描画機能を使ってもイイ！
マスクは黒に近いほど透過がなくなるタイプと、RGBAのAlphaの値をそのまま透過度に適用するタイプがある。各描画APIにあわせてマスクを作る。
画面を元に、マスクに合成
BGとキャラなどを転送した描画領域を、作ったマスクに合成するとこうなる。
合成の方法は各APIにあわせる。
HTML5/Canvasであれば、globalCompositeOperationを変えたり、
DirectXであれば、ステンシルマスクを使ったり。
スクリーンに転送
上記で作った合成結果を、転送！
しかしそのまま同じ位置に上書きしてしまうと、まったく変化がない…
歪みエフェクトを120%に拡大
拡大や縮小を入れて、元の状態との差を出すことで、ソレっぽくなる！
アニメーションを加える
- 中央に穴の開いたマスクを徐々に拡大させる
- 元の画像を拡大させる
などなどのアニメーションを加えることで、サンプルのような感じに。
実装まとめ
ざっくばらん処理フロー
結果的にこんな感じで、描画処理を重ねる。
応用
実装言語やら、レンダラーやら、ソフトやらハードやらに合わせてアレンジしよう。
- マスクを後から描画する
- サンプルでは先にマスクを描画したが、後でマスクを重ねてもヨイ。
描画APIにあわせよう。
- サンプルでは先にマスクを描画したが、後でマスクを重ねてもヨイ。
- 元の画像と差異を出す
- 元の画像からひと手間加えることで、次元や歪みの説得力を出せる。
- 透過させる
- 解像度を下げる
- 格ゲーやアクションゲーム等でよくやる手段。マスクに使う描画領域の解像度を下げることで使用メモリを少なくしつつ処理速度UP＆細部をぼけた感じにする。
- 着色する
- たとえば薄い緑色をさらに重ねると風魔法のように見える
- 形を変える
- 円形だけではなく、横長の四角を使えばテレビのノイズ等に。三角のマスクを複数散らせば、割れたカメラの表現などが出来る
- さらに上にエフェクトを入れる
- 周りに白いフチを入れたり、黒いフチを減算で入れたり、中央で雷のアニメ絵を入れたり。
歪みのメリットデメリット
メリット
- 絵を必要としない。描き下ろしが必要ない
- 応用するといろんな表現ができる
- 火の揺らめき、水の揺らめき、風やら、宇宙やら
- うまく出せると、レベルが高いゲームに見える
デメリット
- 合成の実装が面倒くさい
- 別の事をしたほうが費用対効果があるかも
- 重い
- 合成に使う描画領域のメモリを確保する必要がある
- 2~3回描画する為、処理速度も落ちる
- 描画先の色の明暗がハッキリしてないと、出しても背景に溶けてしまう
- 極端な例で言えば、真っ黒や真っ白の上に出しても意味がない
- 背景などのデザインルールと相談
- 使いどころが難しい
- 見えづらくなると、ゲームのプレイを阻害する可能性もある
- この描画処理実装したからといって、必ずしもいい演出になるとは限らない