ゲームソフト分野で２年生を担当している生島です。
ゲームソフト分野は「ゲーム業界一直線！」を合言葉に、１年生の時からプログラミングに特化したカリキュラムを実践します。
また、１年次から作品制作に力を入れて取り組みゲーム業界への就職を目指すことになります。
以前、ゲーム画面を粉々にする演出について解説しましたが、今回は１年生にも挑戦できそうな画像処理について解説してみます。
画像を波打たせる！
さて、ここに神戸電子の写真があります。
これをリアルタイムにグニャグニャにしてしまいます。
これも静止画ではわかりにくいので、動画を少し観てみてください。
我々の世代にとっては「ドラゴンクエスト」シリーズの旅の扉の演出として定番でした。
先日発売された「ドラゴンクエストXI」でも、3DS版なら観れるようですね。
どうやって歪める！？
ではどうやって画像を歪めているのでしょうか。
画像というのは小さな四角形の粒（ピクセル）がたくさん集まって構成されています。
今回の処理を実現するには、画像１枚を一気に描くのではなく、横１行ごとに分割して表示します。
たとえば横６４０ピクセル×縦４８０ピクセルの画像なら、横６４０ピクセル×縦１ピクセルずつ計４８０回表示するわけですね。
そして１行ごとに少しずつ左右にズラしていけば、画像全体として波打っているように見えるのです。
ここで数学の知識を活用！
画像を１行ごとにズラして表示するのはいいとして、綺麗な波になるようにするにはどうすればいいのでしょうか。
実は一定間隔で行ったり来たりさせるのに非常に便利な数学があります。
それがサインです。
サインというのは高校で習う「三角関数」のひとつで、角度ごとに値が決まっています。
サイン０度＝０．００００
サイン１度＝０．０１７５
サイン２度＝０．０３４９
：
：
サイン８９度＝０．９９９８
サイン９０度＝１．００００
サイン９１度＝０．９９９８
サイン９２度＝０．９９９４
：
：
サイン１７９度＝０．０１７５
サイン１８０度＝０．００００
角度の値を増やしていくと、サインの値は「－１ ～ ＋１」の範囲を滑らかに変化します。
これをグラフにすると、綺麗に往復するカーブを描きます。
これをサインカーブと呼びます。
この滑らかな変化を、画像の横ズレ量に利用するのです。
そのままでは「－１ ～ ＋１」という小さな幅でしか変化しないので、サインの値を１００倍するなどして使います。
三角関数をはじめとし、ゲームの処理に役に立つ数学というものはたくさんあります。
自分の知識内で何かが作れないか考えてみる
一見、難しそうな処理であっても、よくよく分解して考えてみると、結局は自分が知っている知識と技術の複合技だったりします。
「とても真似できなさそう」と投げ出すのではなく、どういう理屈で出来上がっているかを推測し、少しでも似たような結果が作り出せないかを考えてみると勉強になります。
せっかく湧いた好奇心を放置するのではなく、その都度いろいろと実験しておくと、いざゲームを作り出したときに使えるネタになったりします。
- Date：
- Tag：
- この記事を
友だちに教える - LINE
- - HatenaBookmark
- GooglePlus
