3.html5とjavascriptでゲームを作る準備
ゲームを作るには、メインループを作らないといけません。
なので、まずメインループから作りたいと思います。
ゲームループを実装する
ゲームループを実装する関数として、javascriptには
setInterval
setTimeOut
などの関数がありますが、グラフィックスを実装する場合は
requestAnimationFrame
がいいらしいので、それを利用して、ループを作成したいと思います。
↓参考記事
http://www.ibm.com/developerworks/jp/java/library/j-html5-game2/#download
main.js
/*
グローバル変数
*/
var g_Canvas;
var g_Ctx;
var g_Scene; // シーン
var g_bLoaded; // ロード
/*
fps
*/
var g_LastAnimationFrameTime = 0,
g_LastFpsUpdateTime = 0,
g_FpsElement;
/*
定数
*/
var LOAD = 1;
/*
onload
最初に呼び出される関数
*/
onload = function () {
// キャンバスに代入
g_Canvas = document.getElementById('id_canvas1'); // JavaScript uses the id to find the <canvas> element:
g_FpsElement = document.getElementById("fps"); // 読み込まれていない
// cavasに対応していない
if (!g_Canvas || !g_Canvas.getContext) {
alert("html5に対応していないので、実行できません");
return false;
}
g_Ctx = g_Canvas.getContext('2d'); // ctx?
g_Ctx.fillStyle = "rgb(200,200,200)"; // 塗りつぶし
g_Scene = LOAD; // ロードシーンに移行
g_bLoaded = false;
LoadTex(); // texture load
requestNextAnimationFrame(animate); // loopスタート
// キーの登録
//window.addEventListener('keydown', KeyDown, true);
//window.addEventListener('keyup', KeyUp, true);
};
/*
LoadTex
テクスチャのロード
*/
function LoadTex(){
}
function animate(now) {
var fps = calculateFps(now);
requestNextAnimationFrame(animate);
}
/*
Reprinted from Core HTML5 Canvas
オリジナルインターバル設定
*/
window.requestNextAnimationFrame =
(function () {
var originalWebkitRequestAnimationFrame = undefined,
wrapper = undefined,
callback = undefined,
geckoVersion = 0,
userAgent = navigator.userAgent,
index = 0,
self = this;
// Workaround for Chrome 10 bug where Chrome
// does not pass the time to the animation function
if (window.webkitRequestAnimationFrame) {
// Define the wrapper
wrapper = function (time) {
if (time === undefined) {
time = +new Date();
}
self.callback(time);
};
// Make the switch
originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;
window.webkitRequestAnimationFrame = function (callback, element) {
self.callback = callback;
// Browser calls the wrapper and wrapper calls the callback
originalWebkitRequestAnimationFrame(wrapper, element);
}
}
// Workaround for Gecko 2.0, which has a bug in
// mozRequestAnimationFrame() that restricts animations
// to 30-40 fps.
if (window.mozRequestAnimationFrame) {
// Check the Gecko version. Gecko is used by browsers
// other than Firefox. Gecko 2.0 corresponds to
// Firefox 4.0.
index = userAgent.indexOf('rv:');
if (userAgent.indexOf('Gecko') != -1) {
geckoVersion = userAgent.substr(index + 3, 3);
if (geckoVersion === '2.0') {
// Forces the return statement to fall through
// to the setTimeout() function.
window.mozRequestAnimationFrame = undefined;
}
}
}
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback, element) {
var start,
finish;
window.setTimeout( function () {
start = +new Date();
callback(start);
finish = +new Date();
self.timeout = 1000 / 60 - (finish - start);
}, self.timeout);
};
}
)
();
/*
fpsの計算
*/
function calculateFps(now) {
var fps = 1000 / (now - g_LastAnimationFrameTime);
g_LastAnimationFrameTime = now;
if (now - g_LastFpsUpdateTime > 1000) {
g_LastFpsUpdateTime = now;
g_FpsElement.innerHTML = fps.toFixed(0) + ' fps';
}
return fps;
}
上の記事をまるまる使いました。
fpsのidを拾ってfpsを入力してくれているので、fpsが表示されます。
時々fpsが極端に下がることがありますが、ブラウザなので、それはしょうがないと思ってあきらめるしかなさそうです。
main.js解説
onload関数が最初に実行される関数で、その中に定義したrequestNextAnimationFrame関数が入っています。
その中にanimate関数を渡しているので、animate関数の中にゲームループを実装していけばいいことになります。
これで、ゲームループの実装は終わりです。