今回は、FlashでいうEnterFrameのような仕組みを実装し、三角関数を使った円運動に挑戦します。

サンプルを見る

EnterFrameの実装

Flashでは、EnterFrameイベントというイベントを使って、あらかじめ設定したフレームレートに合わせてアニメーションさせることが出来ました。 それによって、リアルタイムに画面が動くゲームなどを作ることが出来ました。

しかしJavaScriptには、そういった仕組みがありません。 クイズゲーム辺りであれば問題は無いのですが、仮にちょっとしたシューティングゲームを作ったり、アクションゲームなどを作るとなると、フレームを実装できないと難しいです。

そこで、今回は、簡単なアニメーションを実装して、フレームレートでリアルタイムに処理するプログラムを作ってみます。

まずはフレーム処理ですが、下記のソースをご覧ください。

//フレームレートを設定
var FPS = 30;
var EnterFrameID;
$(function()
{
    EnterFrameID = setInterval(enterFrameTicker , 1000 / FPS);
});

function enterFrameTicker()
{
    //処理を記述。
}

JavaScriptでは、連続して処理する方法は「setInterval」しか存在しません。 そして、「setInterval」は「設定されたミリ秒毎に処理を繰り返す」関数です。

さらに、フレームレートとは、即ち「1秒間に何回描画を書き換えるか」の設定なので、たとえば「setInterval」に100ミリ秒を設定すると、1秒間に10回処理をするということになるので、10FPSとなります。

そうすると、たとえば30FPSにフレームレートを設定する場合、「setInterval」のミリ秒を「1000÷30」ミリ秒に設定すればいいのです。

後は三角関数の実装についてですが、三角関数の解説については数学の先生にお任せするとして、プログラムで三角関数を使う場合、 特にコンテンツ系で使う場合は、円・カーブ・緩急・バウンドなど、物理的な動きを実装するときに使います。

簡単な使い方としては、下記のような記述になります。

//フレームレートを設定
var FPS = 30;
var EnterFrameID;
var rot = 0;     //角度
$(function()
{
    EnterFrameID = setInterval(enterFrameTicker , 1000 / FPS);
});

function enterFrameTicker()
{
    rot += 5;
    //ラジアン角
    var rad = rot * Math.PI / 180;

    var COS = Math.cos(rad);
    var SIN = Math.sin(rad);
}

サンプルの上の方で、二つの四角形が左右に動いていますが、上記コードのようにサイン関数・コサイン関数を使うことで、「-1～1」の間でそれっぽい値を取得することが出来ます。

その際に「ラジアン」というものを使うのですが、これも解説してたらきりがないので、そこから先は数学の先生にお任せして、ここでは、ラジアンは「角度×Math.PI÷180」と覚えましょう。

ラジアンを計算するときに使う角度の値を、処理するたびに加算することで、サイン関数・コサイン関数を実行したときの値が変動するのです。

さらに、三角関数のいいところは、1と-1、つまり値の終点に近づくにつれて、値の変更に緩急が付きます。円運動をベースにしてるので当然といえば当然ですが。 これによって、自然界の物理法則に近いようなアニメーションを得られるのです。

また、サンプルを見ても分かるように、サインとコサインは、それぞれで逆の値を得られます。 これで、うまいこと円運動になってくれます。

ちなみにサンプルのアニメーションでは、三角関数の計算で「-1～1」の値に100をかけて、「-100～100」の値にします。 次に、その値を円の中心に加算して、半径100pxの円運動を実現させています。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナーの講師としてもおなじみ。