自作ゲームエンジンに挑戦①「画面の更新処理」

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

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

canvasとは?

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

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

とりあえずやってみる

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

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

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

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

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

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

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

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

sampleプログラム

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

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

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

まとめ

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

参考にした記事

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

コメントを残す

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