メインループとcanvasの実装

4.メインループとcanvasの実装

今回は、canvasの設定をします。
canvasはdirectXサイズである640×480pxで表示したいと思います。
index.html上で以下を記入します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mario</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/base.css" rel="stylesheet" type="text/css" />
<script lang="JavaScript" src="javascript/main.js"></script>
</head>
<body>
<!--  wrapper start -->
<div id="wrapper">

<!-- header start -->
<div id="header">

</div>
<!-- header end -->

<!-- gameCanvas start -->
<div id="gameCanvas">
<canvas id="id_canvas1" width="640" height="480"></canvas>
</div>
<!-- gameCanvas end -->

<!--  footer start -->
<div id="footer">
</div>
<!--  footer end -->

</div>
<!-- wrapper end -->
</body>
</html>

index.htmlの解説

gameCanvas内にcanvasのタグが入っています。
canvasのidがjavascript内で指定した要素になります。そのidに対してjavascript側で描画処理をすることになります。
widthとheightは画面縦、横のピクセル数です。もちろんcss上で定義することもできます。
このキャンバス内にゲーム画面の描画がされていくことになります。

では、次にmain.jsで描画しているところを見ていきます。

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_Scene = LOAD;      // ロードシーンに移行
    g_bLoaded = false;
    LoadTex();           // texture load
    requestNextAnimationFrame(animate);		// loopスタート
    // キーの登録
    //window.addEventListener('keydown', KeyDown, true);     
    //window.addEventListener('keyup', KeyUp, true);      
};

function Draw(){
	g_Ctx.fillStyle = "rgb(255,0,0)";		// 赤に設定
	g_Ctx.fillRect(0,0,640,480);			// 塗りつぶす
}

main.js解説

onload関数で
g_Canvas = document.getElementById('id_canvas1');
とありますが、これはindex.htmlで指定したcanvasの内容を読み取っています。

    // cavasに対応していない
    if (!g_Canvas || !g_Canvas.getContext) {
        alert("html5に対応していないので、実行できません");
        return false;
    }

    g_Ctx = g_Canvas.getContext('2d');          // ctx

if文でie8などcanvasに対応してないブラウザに対しメッセージを出すようにしています。
g_Ctx = g_Canvas.getContext('2d');
で、描画のコンテキストを作成しています。
これで、描画オブジェクトができあがりました。

function Draw(){
	g_Ctx.fillStyle = "rgb(255,0,0)";		// 赤に設定
	g_Ctx.fillRect(0,0,640,480);			// 塗りつぶす
}

g_Ctx.fillStyleで塗りつぶす色の決定
g_Ctx.fillRectで塗りつぶす範囲を指定して、描画しています。

これで、描画とゲームループという基本的な部分が出来上がりました!
ここまでの実行結果を見る

contents

4.メインループとcanvasの実装

index.htmlの解説

main.js解説