« 時間厳守 | トップページ | 元気な毎日-挨拶編- »

2015年10月 1日 (木)便利な曲線について

皆さん、こんにちは。happy01本日当番のプログラマーのR.Hです。

さて、今日は曲線についていくつかお話ししたいと思います。
例として、二点間を移動する時のキャラクターの動きや、色(α値)の変化などを想像しながら読んでいただければと思います。

・直線(一次曲線)
一つ目は直線です。
直線は曲線に含まれるのか?という疑問はありますが、些細なことなので気にしないでおきましょう…。
直線の式は、二つの異なる点があれば簡単に割り出せますね。
最も一般的で、実装方法も簡単です。

・余弦曲線(cos曲線)
二つ目は余弦曲線です。もちろん正弦曲線(sin曲線)でも同様の計算結果を得ることができます。
直線と比べると、最初は緩やかにスタートして真ん中で一番速くなり、最後にまた緩やかに戻ります。
フェード、拡大縮小、インターフェースのIN/OUTなどの箇所に使用するとすごく気持ちの良い動きになります。
式としては、v(t) = 0.5*(1 - cos(t*π)) となりますが、実はほぼ同様の動きをするものとして、三次関数 v(t) = -2t^3 + 3t^2 があります。
二つの式はほぼ同様のグラフを描くため、どちらを使用しても問題はありませんが、後者のほうが計算負荷が軽いです。

・スプライン曲線
三つ目はスプライン曲線です。
これは与えられた複数の制御点を全て通る滑らかな曲線となります。
レースゲームのコースなどを作るのであれば適当に点を打つだけで綺麗なコースが完成します。
スプライン曲線の注意点として、二点間を通る時間がどこでも一定な為、キャラクターの移動などに使用してしまうと不均一な速度で移動してしまいます。
二点間の距離が短いところはゆっくり移動し、長いところは速く移動するといった感じです。
均一な速度で移動したい場合は少し工夫する必要があります。

・ベジェ曲線
最後はベジェ曲線です。
これはスプライン曲線に似ており、複数の制御点を使用するのですが、一般には両端以外の制御点は通らない曲線となります。
よく使うのは、二次ベジェ曲線や三次ベジェ曲線ですかね。
同じような曲線はスプライン曲線でも描けるので、どちらを使うのかはその時の状況と好みによるかと思います。
直線の変形等であればベジェ曲線を使ったほうが綺麗な曲線になると思います。

まだまだ曲線の種類はたくさんありますが、メジャーなものを抑えておけば困ることはあまりないと思います。
学生の方々でゲーム制作をされている方々がいれば、是非使ってみてください。catface

follow us in feedly
result = encodeURIComponent( "http://www.accessgames-blog.com/blog/2015/10/post-8f01.html" );document.write( "result = " , result );&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">

| | コメント (0) | トラックバック (0)

« 時間厳守 | トップページ | 元気な毎日-挨拶編- »

プログラマー」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/217647/62384993

この記事へのトラックバック一覧です: 便利な曲線について:

« 時間厳守 | トップページ | 元気な毎日-挨拶編- »