トレノキャンプ

JavaScript

2022.10.26

JavaScriptでゲーム開発は可能？作り方やおすすめライブラリを紹介

2023.11.15

1．JavaScriptでゲーム開発はできる？
2．JavaScriptで作れるゲームの例
3．JavaScriptでゲームを開発するための学習ステップ
4．JavaScriptでのゲームの作り方
5．ゲーム開発におすすめのJavaScriptライブラリ
6．JavaScriptでのゲーム開発の学習方法
7．JavaScriptでゲームを開発するメリット

JavaScriptは、WebサイトやWebサービスなどで使われる人気の高いプログラミング言語ですが、実はゲーム開発にもよく利用されています。

「JavaScriptでどんなゲームを作れる？」

「JavaScriptでのゲームの作り方は？」

といったことから、

「JavaScriptでゲームを開発するための学習ステップは？」

「JavaScriptでのゲーム開発の学習方法は？」

といった内容まで、初級者エンジニア向けに詳しく解説していきます。

1. JavaScriptでゲーム開発はできる？

JavaScriptは、Webページの作成や業務用アプリケーション開発以外に、ブラウザ上で動作するゲーム開発も可能です。

JavaScriptは高度なプログラミングスキルを必要とせず、簡単なゲームであれば比較的容易に制作可能なので、ゲーム開発するのにおすすめの言語です。

2．JavaScriptで作れるゲームの例

JavaScriptを使ったゲーム開発では、どのようなジャンルのゲームが作れるのでしょうか？以下にゲーム制作できるジャンルをまとめました。

　・タイピングゲーム

　・シューティングゲーム

　・ボードゲーム

　・ブロック崩しゲーム

　・アクションゲーム

　・RPG

JavaScriptで制作できるのはブラウザゲームになるため、3Dゲームではなくタイピングゲームやシューティングゲームといった2Dタイプのゲーム制作が可能です。

3．JavaScriptでゲームを開発するための学習ステップ

いざJavaScriptでのゲーム開発方法を学ぼうと思っても、さまざまなスキルが必要になるので、何をどんな順序で学習すればいいかわからない方も多いと思います。

そこで、次のようなステップで学習していくことをおすすめします。

　・開発環境を構築する

　・JavaScriptの基本構文を学ぶ

　・HTML/CSSを学ぶ

　・JavaScriptのライブラリについて学ぶ

　・サンプルを模写してゲームを作ってみる

ひとつずつ、順番に見ていきましょう。

①開発環境を構築する

まずは開発環境を構築しましょう。

JavaScriptで開発するのに重要な環境はエディタです。

メモ帳でも開発できますが、エディタで開発する方が、開発効率や品質の向上につながります。

VisualStudioCodeなど無償で使用できるエディタもあるので、使いやすいエディタを準備しましょう。

②JavaScriptの基本文法を学ぶ

JavaScriptでゲーム開発するためには、JavaScriptの基本文法を学ぶ必要があります。

主な学習方法は、書籍、プログラミングスクール、学習サイト・e-Learningです。

これらについては後ほど詳しく説明しますね。

③HTML/CSSを学ぶ

HTMLやCSSの知識もJavaScriptエンジニアには必須となります。

JavaScriptを学習するのにHTMLが記述されていることも多く、HTMLの知識なしではJavaScriptの学習が捗りません。

HTMLは習得しやすい言語ですので、書籍や学習サイトで学ぶことをおすすめします。

④JavaScriptのライブラリについて学ぶ

ゲーム開発は、通常のWebシステム開発と異なり、当たり判定・繰り返し処理・Canvasなど、特殊なプログラミング手法が必要になります。

ゼロからプログラムを書くこともできますが、一般的にはライブラリを使用して開発を行います。

ライブラリとは便利なプログラムを部品化して、ひとまとめにしたファイルのことです。

以下にライブラリの特徴をまとめます。

　・効率よくゲーム開発ができる

　・必要な機能を簡単に組み込める

　・バグが起きにくい

⑤サンプルを模写してゲームを作ってみる

①〜④の学習を終えたら、サンプルを模写してゲームを作ってみましょう。

サンプル模写を行うと、ゲーム開発におけるJavaScriptコードの基本構成、動作方法などを理解できるので、おすすめの学習方法です。

4．JavaScriptでのゲームの作り方

ここからは、JavaScriptでのゲームの作り方を以下のステップに分けて解説していきます。

　・機能の要件を洗い出して設計する

　・開発環境を構築する

　・表示画面を作る

　・機能を実装する

①機能の要件を洗い出して設計する

ゲーム開発において、要件定義や設計作業は非常に重要な工程です。

要件定義とは「どのようなゲームを作るのか」、「どのような画面レイアウトにするのか」などを具体的に決める工程です。

要件定義では主に次のようなことを決めます。

　・ゲームコンセプト（ゲームジャンルやターゲット、ルール設定など）

　・UI/UX（画面レイアウトや効果音など）

　・納期や費用

要件を洗い出した後、設計作業に移ります。

設計作業は大きくわけて「基本設計」と「詳細設計」の2種類です。

基本設計は主にゲーム画面やキャラクターの動きをどうするかなどを決めます。

詳細設計は、基本設計書をもとに、ゲーム判定ロジックや処理フローなどの詳細を決める工程です。

②開発環境を構築する

JavaScriptで必要な開発環境は、コードエディタとWebブラウザとなります。

コードエディタ

コードエディタにはVisualStudioCodeやEclipseなど無償で高機能なIDEがあり、作業効率向上・品質向上に繋がるので、ゲーム開発をするのであれば利用するようにしましょう。

Webブラウザ

Google ChromeやEdgeなどの主要なブラウザには、JavaScriptコードの構造を確認したり、エラーを発見したりするための開発者用ツールが備わっています。

本記事では、PCとモバイルでのシェアが高く、実際の開発現場で多く使用されているGoogle Chromeを推奨します。

③表示画面を作る

JavaScriptのゲーム開発に必要なファイルは、HTMLとCSS、JavaScriptの3つのファイルです。

HTMLはWebページの内容を記述するプログラム言語です。

CSSはスタイルシート言語であり、Webページ内の色や枠、文字の大きさなどを装飾するために用いられ、HTMLと組み合わせて使用します。

HTMLファイルのサンプルコードを確認してみましょう。

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>
</head>
<body>
  <canvas id="canvas" ></canvas>
</body>
</html>

JavaScriptプログラム(main.js)は<script>タグのsrc属性に指定し、CSSは<link>タグのhref属性に指定します。

またcanvasタグにゲームが表示されるようになります。

CSSのサンプルコードは次の通りです。

canvas { background: rgb(119, 202, 167); }

今回は、背景色を指定しています。

④機能を実装する

では、main.jsにソースコードを記述し、機能を実装してみましょう。

以下は、箱を動かすプログラムで、壁で跳ね返る仕様になっています。

var canvas, contxt;
var x1 = 0, y1 = 0, x2 = 1, y2 = 1;
//初期処理
function init(){
    canvas = document.getElementById("canvas");
    canvas.width = 480;
    canvas.height = 240;
    //コンテキスト
    contxt = canvas.getContext("2d");
    //フレーム処理
    requestAnimationFrame(reload);
}
//開始
window.onload = function(){
  init();
}
//更新処理
function reload(){
  render();
  requestAnimationFrame(reload);
}
//四角を描く
function drawRect(x, y, w, h){
    contxt.fillStyle = "#0095DD";
    contxt.fillRect(x1, y1, w, h);
}
//画面描画処理
function render(){
    //前の画面描画を削除
    contxt.clearRect(0, 0, canvas.width, canvas.height);

    x1 += x2;
    y1 += y2;
    //跳ね返り判定
    if(x1 >= canvas.width - 32){
        x2 = -1;
    }else if(x1 <= 0){
        x2 = 1;
    }
    if(y1 >= canvas.height - 32){
        y2 = -1;
    }else if(y1 <= 0){
        y2 = 1;
    }
    drawRect(x1, y1, 32, 32); 
}

実行結果：

このような画面が表示され、青枠が動いていると成功です。

5．ゲーム開発におすすめのJavaScriptライブラリ

JavaScriptには、ゲーム開発で使えるライブラリが多数用意されています。

ライブラリを使用するとコード量を減らせるだけでなく、プログラムの動作検証においての生産性向上などが見込まれます。

①Phaser.js

Phaser.jsはJavaScriptにおいて代表的なゲーム用ライブラリであり、主に2Dゲーム開発が可能です。無料でも利用できますが、有料プラグインも用意されており機能追加することもできます。

コミュニティが活発で、バージョンの更新が継続して行われているので、多くのゲームエンジニアに利用されているライブラリです。

②phina.js

phina.jsは初心者でも使いやすいゲーム用ライブラリです。

このライブラリは日本で開発されているので、ドキュメントが日本語で用意されており、また日本語サイトも豊富にあるため、初心者には最適なライブラリです。

③PixiJS

PixiJSは、ゲーム専用ライブラリではありませんが、2D視覚化に特化したライブラリでゲーム開発にも利用可能です。

リッチでインタラクティブなグラフィック処理を高速に実行できるのが特徴となっています。

④p5.js

p5.jsは、幾何学アートを簡単に作れる「Processing」に影響を受けて開発されたライブラリです。

簡単なコードでグラフィック処理を実行できるのが特徴で、Webブラウザ上で遊べるミニゲームを開発するのに最適です。

キーボード入力やタッチの制御、イベント処理、カメラ制御など幅広い開発にも対応できます。

⑤Babylon.js

Babylon.jsは、Microsoft社製のJavaScriptを使用したリアルタイム3Dエンジンで、ゲーム開発にも利用できます。

軽量でGPUの能力を最大限に発揮しやすくなっているので、高速なグラフィック処理ができます。

6．JavaScriptでのゲーム開発の学習方法

JavaScriptでのゲーム開発を習得するとなれば、さまざまな学習方法があります。

短期間で集中したスキル取得する方法もあれば、マイペースに学ぶ方法もあります。

ここでは、JavaScriptでのゲーム開発の学習方法をいくつか紹介しますね。

①書籍で学習する

書籍で学習するメリット、デメリットは何があるのでしょうか？メリットは、コストパフォーマンスが良い、情報の信頼性が高い、体系的な知識を得られるといったことです。

デメリットは、わからないことがあっても質問ができない点。

書籍以外の学習方法を併用して理解していくことが必要になりますが、マイペースで手軽に学びたい方には、おすすめの学習方法となっています。

ここで、おすすめの書籍を3冊紹介します。

・[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門

楽しく遊べる2Dゲームの開発を進めながら、グラフィックプログラミングの基本が学べる入門書です。

リアルタイムに動く画像を描くために求められる技術や考え方をやさしく解説しています。

豊富な図解とモダンJavaScriptの基本文法、これだけは知っておきたい数学知識など、現場で活かせる技術をわかりやすく説明してくれる実践解説書です。

・7大ゲームの作り方を完全マスター! ゲームアルゴリズムまるごと図鑑

家庭用ゲーム機やスマホで人気のある7つのジャンルのゲームを取り上げ、それぞれのゲームを開発する際に必要なアルゴリズムを、図解を使ってわかりやすく解説しています。

ゲーム開発の基本となるアルゴリズムだけでなく、キャラクターの操作やグラフィック表現などのアルゴリズムもたくさん紹介されているので、本書の内容を学ぶだけで本格的なゲーム開発に必要な知識を習得できます。

プログラムはJavaScriptで書かれおり、コーディング技術も学べるので、ゲーム業界への就職・転職を目指す人にもおすすめの一冊です。

・ゲームで学ぶ JavaScript 入門 HTML5＆CSS も身につく！

JavaScriptを使用したWebブラウザゲームのノウハウを解説する入門書です。

ゲームを作りながら、JavaScriptだけでなくHTML5やCSSといったWeb技術の基本をしっかり学習できます。

また「楽しさ」を感じられて「飽きさせない」ことを重視した構成になっているので、初心者におすすめです。

②プログラミングスクールに通う

プログラミングスクールに通うメリットは、目的に合わせて効率よく学べる、講師に質問がしやすい、独学に比べて挫折しにくいといったことです。

デメリットは受講費用が高額、教室へ通学するので時間や移動費がかかることが挙げられます。

独学より短期間で目的のプログラム言語を学べますが、通学する必要があるので、ご自身の生活スタイルや学習期間を考慮してスクールを選びましょう。

③学習サイト・e-Learningを活用する

e-Learningとは、インターネットと電子デバイスを活用した学習サービスのことです。

パソコンやタブレットを使って動画講義を視聴する形態で、インターネット環境があればどこでも学習できます。また何度も繰り返し受講できるので、理解度の定着が見込まれます。

e-Learningは時間や場所を選ばず自分のペースで学習できるので、忙しい社会人におすすめの学習方法です。

それでは、おすすめのe-Learningサイトを紹介します。

TRAINO CAMP

TRAINO CAMPは、ITエンジニア、プログラマー志望の初心者から現役エンジニアまで対応するe-Learningサービスです。

現役エンジニア講師による現場の業務に即した研修で、実践的なトレーニングを行います。

e-Learningは動画視聴がメインになりますが、TRAINO CAMPの動画は、説明スライドの効果的な切り替えやアニメーションにより飽きのこない演出を組み込んでいます。

また、サンプルデータや演習環境が提供され、実際に手を動かしながらやり取りができるので、スキルが身に付きやすいでしょう。

7．JavaScriptでゲームを開発するメリット

ここでは、JavaScriptでゲーム開発するメリットを3つにまとめたので、参考にしてください。

①開発のハードルが低い

JavaScriptは習得するのが容易な言語のひとつです。

またJavaScriptで開発できるゲームはブラウザゲームなので、スマホゲームよりも開発するハードルは低めです。

C++もゲーム開発できますが、JavaScriptと比べ言語の習得が難しく、開発環境を構築するのが難しいので開発ハードルが高くなります。