JavaScriptでゲーム開発に必要な基礎とライブラリ活用術

JavaScriptでプログラミングが書けるようになってきたら、オリジナルのゲーム開発をしてみたいと考える人も少なくないでしょう。ただし、ゲーム開発は一般的なWeb開発に比べて学習しなければいけいない事が多く、特殊なプログラミング手法も覚えなければいけません。

できるだけ簡単に効率よくゲームを作る方法はないのでしょうか？

こんにちは！インストラクターの井上です。

この記事では、初心者でも今日から簡単にゲーム開発ができるオススメのライブラリについて分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

この記事はこんな人のために書きました

JavaScriptによるゲーム開発とは？

この章では、素のJavaScriptでゲーム開発を行う時に必要な基礎部分について見ていきましょう。主に、画面描画に使うCanvas要素、ゲームのループ処理、当たり判定について学んでいきます。

Canvas

JavaScriptでゲーム開発を実現するためにもっとも重要な要素がCanvasです。HTML5から導入されたCanvasはスプライト描画を可能にするので、ゲームを思い通りにブラウザの画面へ表示することができます。

例えば、画面に四角形を描画するには次のように記述します。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillRect(10, 10, 150, 100);

まずはHTMLに配置したcanvasタグを取得し、そこから2Dコンテキストを取り出せば自由に描画を命令することが可能になります。この例では、X座標10・Y座標10の位置に幅150・高さ100の四角形を描画しています。

Canvasが導入されたことで自由な描画を実現できるようになったわけですが、以下の点を踏まえて学習が必要になってくるでしょう。

繰り返し処理

ゲーム開発において一般的なWebプログラミングとの大きな違いとして、繰り返し処理によるループの作成が挙げられます。

基本的にゲームというのは描画して消してまた描画して…というのを高速に繰り返すことで動きのある画面を表現しています。そのため、自分で描画を繰り返しループさせる処理を実装する必要が出てくるわけです。

近年、一般的に用いられている繰り返し処理として、requestAnimationFrame()というメソッドを使う方法があります。

function loop() {
    window.requestAnimationFrame(loop);
}

loop();

引数に繰り返し処理したい関数を設定することで、ユーザーのデバイスに最適化されたループを自動的に実現してくれるのが特徴です。ただし、繰り返し処理する内容はすべて自分で決める必要があり、実装内容によってパフォーマンスにも影響が出て来る部分でもあります。

当たり判定

シューティングやアクションなど、ゲームに必要な要素の1つに当たり判定処理があります。

これは自機と敵、弾と敵、自機と壁…など、何らかの接触が行われた時に任意の処理を実行するという内容になります。しかしながら、Web開発を前提に作られているJavaScriptには標準でそのような判定処理は無いので、自分で工夫しながら実装しなければなりません。

基本的な当たり判定の考え方としては、Canvasで座標による衝突判定を実装することが多いです。例えば、自機と敵の当たり判定だと次のような処理を考えます。

これを毎フレームごとに高速でチェックしながらゲームを進行させていくのが基本になります。

ライブラリってなに？

さて、JavaScriptでゲームを開発するうえで必要となるCanvas、繰り返し処理、当たり判定について見てきました。

もちろんこれ以外にもたくさんの学習が必要になるので、自分でゼロからゲームを開発するのは非常に困難な道となるでしょう。そこで、今回ご紹介するオススメのライブラリを活用すると非常に簡単で効率の良いゲーム開発が実現します。

ライブラリとは、プログラムを部品化して必要な機能を簡単に使えるようにした、いわば「カット済み野菜」のようなものです。

ライブラリの特徴を簡単にまとめると以下のようになります。

前章で解説した画面の描画・繰り返し処理・当たり判定…などについても、わずか数行のプログラムで高速で安全性の高い実装が可能になるのです。

そんなライブラリの概要や、詳しい使い方などをまとめた記事もありますので、まだイメージが湧きづらい方は先にこちらもご参考ください。

【使い方まで徹底解説】おすすめJavascriptライブラリ厳選10選！

更新日：2024年11月18日

enchant.js

ライブラリの特徴は？

公式サイトでは以下のように説明されています。

カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。
2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。
オープンソース (MITライセンス) で、無料で利用できます。
ドキュメント・書籍・チュートリアルサイトが充実しています。
たくさんのプラグインで機能を拡張できます。
UEI/ARC を中心としたメンバによって開発・メンテナンスされています。
プログラミング教育のためにも利用されています。
公式ページ

ひとことで言うと、手軽にゲームが作れるお手軽ゲームライブラリです。

作れるもの

２Dのシンプルなゲームが簡単に動かせます。

次の記事で様々なサンプルが紹介されていますので詳しく知りたい方は是非チェックしてみてください。

enchant.jsのサンプル

学習方法は？

こちらで書籍も紹介しています。

エンジニア御用達の学習サイト、「ドットインストール」にも学習用の動画が有りますので是非使ってみましょう！
JavaScript入門

CreateJS

ライブラリの特徴は？

公式サイトでは以下のように紹介されています。

A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.
公式ページ

これも英文になっていますが、一言で言うと、表現の幅が広がるゲーム開発可能なライブラリです。

作れるもの

簡易シューティングゲームのサンプルが入門サイトで公開されています。

描画に強いので工夫次第でとても綺麗な見栄えのゲームを作成することが出来ます。

学習方法は？

上記シューティングゲームのサンプルを公開しているサイトが分かりやすいのでぜひ見てみて下さい。

CreateJS入門サイト

Kiwi.js

ライブラリの特徴は？

公式サイトでは以下のように紹介されています。

Kiwi.js is a fun and friendly Open Source HTML5 Game Engine. Some people call it the WordPress of HTML5 game engines…
公式ページ

このライブラリを一言で例えると、テクニカルな表現を簡単に実現できるゲームライブラリです。

作れるもの

Kiwi.jsのサンプルページで様々なアクションゲーム等に使用できるサンプルソースが公開されています。

本格的なシューティングゲームや2Dアクションを作成可能です。

学習方法は？

英語になってしまいますが、本家の英語の解説がかなり充実しています。

あまり日本語サイトが充実していないので英語アレルギーのない方はこちらが無難でしょう。

DOCUMENTATION

phina.js

ライブラリの特徴は？

公式サイトでは以下のように紹介されています。

phina.js って何？

ゲームやツールを簡単に作る事ができる JavaScript ゲームライブラリだよ♪
PC とスマートフォンどちらでも動くんだ
『プログラミングって気軽にできるもんなんだ』『ゲームってこんなに簡単に作れるんだ』って感じてもらえると嬉しいな
公式ページ

一言でいうと、ゲーム作成初心者にもとてもとっつきやすいライブラリです。

個人的に特にオススメしたいライブラリになっています。

作れるもの

タイピングゲーム・ブロック崩しなどなど、簡単に様々なゲームを作成することが出来ます。

公式サイトに幾つものサンプルアプリとサンプルソースが公開されているので、興味が有る方は是非見てみましょう。

学習方法は？

HTML/CSS/JavaScriptの基礎が分かる方は公式サイトと、開発者の下記ブログ記事を参照することで本格的なゲームも作ることができます。

phiary

まとめ

JavaScriptのおすすめゲームライブラリはいかがでしたでしょうか？

ゲームってこんなに簡単に作ることが出来るんです。興味のわくものがあれば是非使ってみてくださいね。