ゲームエンジン開発① 画面の更新処理さえあればゲームはできる【javascript】

私は今までenchant.jsというゲームエンジンを使ってゲームを作ってきたんですけれども、そろそろjavascriptのcanvasをちゃんと理解したほうがいいのではないかと思ったので勉強を始めました。

そんなわけで私の勉強がてら記事を書いていこうかと思います。一応目標はゲームエンジン作成ですが、そのレベルのものは出来ないと思いますが、それなりにゲームらしいものが出来るようにはしたいと思っています。

canvasとは?

Canvasとは、ブラウザ上に図を描くために策定された仕様なんだそうです。図を描いたり線を描いたりすることは得意なようですが、ゲームを作ることは得意ではないみたいです。

なので私たちがゲームを作るにはゲーム用のプログラムを自分で作るか、もしくはゲームエンジンを使ったりしないと作れません。もどかしいですね。

とりあえずやってみる

まぁ、とりあえずやってみましょう(‘ω’)ノ

まずはHTMLファイルを準備。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <title>サンプル</title>
    <meta charset="utf-8">
    <script src="main.js"></script>
</head>
<body>
    <canvas id="canvas" style="background-color: black;"></canvas>
</body>
</html>

canvasタグがcanvasです。idもとりあえずcanvasにしときましょう。背景色はゲームらしく黒にしておきます。

ここで一つ要注意なのがcanvasのサイズの指定の仕方です。

canvasのサイズはcssでもjavascriptでも指定できるようになっているんですが、cssの方は表示エリアの指定になっていて、javascriptの方は解像度みたいな扱いになっています。

つまり表示エリアが300×300になっていて解像度が600×600になっていると300×300に収まるように縮小されます。これだとOKなんですが縦横の比率が違うように指定しますと変に伸びたり縮んだりしてしまいます。なので基本的にはcssでは幅だけ指定するのが良いと思います。

簡単なフレーム更新プログラム

まずは簡単なフレーム更新プログラムを作ってみました。

sampleプログラム

var canvas, ctx;
var x = 0, y = 0, vx = 1, vy = 1;
//初期処理
function init(){
    canvas = document.getElementById("canvas");
    canvas.width = 640;
    canvas.height = 900;
    ctx = canvas.getContext("2d");//コンテキスト
    
    requestAnimationFrame(update);//フレーム処理のお知らせを送る
}
//四角を描く
function drawRect(x, y, w, h){
    ctx.fillStyle = "white";
    ctx.fillRect(x, y, w, h);
}
//画面描画処理
function render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);//画面をクリア(前の画面描画を削除)
    x += vx;
    y += vy;
    if(x >= canvas.width - 64){
        vx = -1;
    }else if(x <= 0){
        vx = 1;
    }
    if(y >= canvas.height - 64){
        vy = -1;
    }else if(y <= 0){
        vy = 1;
    }
    drawRect(x, y, 64, 64); 
}
//更新処理
function update(){
    render();
    requestAnimationFrame(update);//フレーム処理のお知らせを送る
}
//開始
window.onload = function(){
    init();
}

今回このなかで大事なのはrequestAnimationFrameというメソッドです。これはおよそ60FPSになるような一定の間隔で引数に渡した関数を呼び出してくれるようです。

ただし、requestAnimationFrameは一回こっきりしか働いてくれないようで、ずっと更新処理をし続けるには毎回requestAnimationFrameを呼ぶ必要があるようです。

画面が更新されていても何も表示されていなければわからないので四角形を表示させて移動させてみました。DVDプレーヤーのアレみたいなやつを作ってみました。角に行ったら盛り上がってください(外国で流行っているらしいです)。

まとめ

とりあえず画面の更新処理が出来るようになったのでもうゲームは作れます。ゲームエンジンを作ろうと思うと先はものすごく長いですが、作りたいものに対して必要なものは何か?ってことがわかれば最低限のプログラムでゲームが作れるはずなので段階的に頑張っていきたいと思ってます。では(‘ω’)ノ

次回:ゲームエンジン開発②「さっそくゲーム作ってみる」

参考にした記事

JavaScriptでフルスクラッチゲーム開発しよう 第1回 準備編

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

マリオ風横スクロールアクションゲーム。地下から制限時間内に脱出しろ!
スマホ専用対戦ピンポンゲーム。タッチだけのイライラ操作が逆に楽しい?
ひったくり犯を追いかけるランゲー。道に落ちている障害物には気を付けて。
ブロックに挟まれないように画面上部にあるゴール目指すゲーム。めちゃくちゃ難しいです。

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記