プログラミング言語のJavaScriptを学習中の方やこれから学ぼうという方の中には
「JavaScriptでゲーム制作してみたい！」
と思っている方もけっこういるんじゃないかと思います。
この記事ではJavascriptを使ったゲームの作り方やどんなゲームが作れるかなどを解説していきます。
※サンプルプログラムについてはカテゴリーにまとめたのでそちらを参照してください。
JavaScriptでゲームは作れる？
JavaScriptはウェブサイト上でアニメーションなどの動きをつけたり、何らかの操作に対してアクションを起こすようなプログラムを作るのに使われているプログラミング言語です。
具体的な例で言うと、メニューボタンを押したらメニューが開いたり、スライドショーの写真が順番に動いたり、GoogleMapの地図をぐりぐり動かしたりなどに使われています。
このようにJavaScriptはウェブサイトに動きをつけるプログラミング言語なので、その動きをゲーム的なことに使えばゲームも作れるのは想像できると思います。
JavaScriptで作ったゲームはブラウザ上で動くのでブラウザゲームやWEBゲームなどと呼ばれます。
JavaScriptのゲームはcanvasに作る
HTML5(HTMLのバージョン5)からcanvasというタグが追加されました。
このcanvasタグは線や図形、画像などを表示して動かすことに特化したエリアをブラウザのページに作成することができます。
canvasはブラウザ上でグラフの表示や動きのある背景の表示などいろいろなところに使われています。
この描画処理に非常に優れたcanvasは当然ゲームにも利用することができます。
JavaScriptでのゲーム開発は基本的にこのcanvasを利用して行います。
HTML/CSSは必要ない
canvasを使ったゲーム開発では他のエンジニア系サイトの記事に書いてあるようなHTMLとCSSの学習は基本的に必要ありません。
canvasでゲームを作る場合はHTMLとCSSを使いません。
canvas上で動くのでHTML・CSSを使う必要が無いです。
もちろんcanvasタグを表示するページを作る必要がありますがその程度です。
※canvasを使わずにHTML要素を使ってゲームを作る場合にはHTML/CSSの学習が必要です。ただし、この方法ではcanvasほど自由にゲームは作れません。
※canvasでゲームを作るにしてもUIだけをHTML/CSSで作る方法もありますが構造が複雑になるので初心者向けではありません。
JavaScriptでどんなゲームが作れる？
canvas上で動作するゲームならアクションゲーム・シューティングゲーム・RPGなど基本的になんでも作ることは可能です。
ゲームパッドに対応したゲームももちろん作ることができます。
ゲーム開始時にロードすることを考えるとデータ量が小さくなる低解像度なレトロ風ゲームなどが相性が良いと思います。
WebGLで高速な画像処理が可能に
以前は、JavaScriptはブラウザ上で動作するため直接本体の処理能力を利用できずに処理が遅いと言われていました。
しかし現在はWebGLという非常に高速に画像を処理してくれる機能を使うことができるようになりました。
このWebGLを使えばかなり激しい描画のゲームも作ることができるようになっています。
WebGLは個人で一から扱うのは難しいですが対応しているライブラリを使うと簡単に扱えます。
JavaScriptでもよほど高い処理能力を要求されるようなゲームでない限りはどんなゲームでも作ることができるようになっています。
JavaScriptで作られたゲームが遊べるサイト
筆者自身JavaScriptでゲームを作って自分のサイトで公開しています。ブラウザゲームでは珍しいアクションゲームやシューティングゲームをたくさん作っています。
どんなゲームが作れるのか気になる方や、この記事を疑っている方は一度私のサイトでゲームを遊んでいただけると良いかと思います。
サイト自体も面白く見せるためにJavaScriptを使ってアニメーションなどいろいろ仕掛けを入れているのでその辺も意識して見てもらえると嬉しいです(普通のサイトよりは頑張っている自信ある！！)。
他にもJavaScriptで作られたゲームを遊べるサイトを私のゲームサイトのリンク集ページにリンクをたくさん載せています。
企業・個人いろいろなサイトがいろんなゲームを公開しているので遊んでみてください。
※サイトを訪れるのが面倒な方はこのブログのトップページにゲームを埋め込んでいるので遊んでみてください(スマホでは非表示になってます)。
JavaScriptでゲームを作るメリット・デメリット
JavaScriptでゲームが作れるのはわかったけれど、そもそもJavaScriptでゲームを作るとなにか良いことあるの？
と考える方もいると思うのでJavaScriptで作るメリット・デメリットを解説します。
他の言語と比べて学習難度が低く入門者向け
JavaScriptはプログラミング言語としては学習難度が他の言語よりも比較的低く入門者向きと言われています。
変数の型の扱いが厳格でなかったりいろいろ最初に躓きやすい部分が緩い設定になってたりします(良くも悪くもって感じではあるけど)。
また、ブラウザ上で動作するため開発環境の構築もほとんど必要なくテキストエディターさえあれば始められる手軽さも初心者向きと言えます。
しかし、初心者向けだと言っても「他の言語と比べて初心者向け」なだけであって決して簡単ではないです。
簡単だと勘違いして取り掛かると挫折するので気を付けてください。
スマホ・タブレット・PCで遊べる
JavaScriptはブラウザ上で動くプログラミング言語なのでJavaScriptで作ったゲームはブラウザがあれば遊べます。
つまりパソコンでもスマホでもandroidでもiPhoneでもタブレットでもブラウザがあれば関係なく遊ぶことができます。
本来であればそれぞれの機種向けに開発しなければならないものが、ブラウザ上で動くJavaScriptなら一つで済むわけです。
これがJavaScriptでゲームを作る最大のメリットと言って良いと思います。
スマホアプリにすることもできる
JavaScriptで開発したゲームはブラウザ上で動きます。
一見スマホアプリとは全く無縁のようですが、実はブラウザ上で動くならブラウザの機能込みでアプリ化してしまえばスマホアプリにすることができます。
そのような形で作られたアプリをハイブリッドアプリと言います。
JavaScriptでゲームを作ってから「やっぱりアプリにもしたいな」と思ってもハイブリッドアプリにすれば一からスマホアプリを開発しなおす必要はありません。
このハイブリッドアプリを簡単に作れるようにしてくれているサービスとしてMonacaがあります。
ハイブリッドアプリを作るには本来は専門の知識が必要ですがMonacaを使えばさっくり出来てしまいます。
JavaScriptで作ったゲームをMonacaでスマホアプリにする方法はこちらの記事に書いています。
デメリット
最後にデメリットも解説しておきます。
一つは処理能力では絶対にアプリやPCゲームに劣ります。
WebGLを使えば高速に描画できると言っても同じレベルではないです。
ものすごくキレイなグラフィックでバリバリ動くようなゲームが作りたいのであれば他の開発環境で作りましょう。
もう一つのデメリットは収益化が難しいこと。
ブラウザゲームではアプリのような広告(Googleの広告)をゲーム内に入れることができません(法人はできるが個人ではできない)。
収益を第一に考えているのであればやはり他の開発環境で作りましょう。
JavaScriptのおすすめライブラリ
JavaScriptだけで一からすべてをプログラミングしてゲームを作っていくことはもちろん可能ですが、それはあまりにも大変です。
JavaScriptにはゲームを作るためのライブラリ(またはゲームエンジン、フレームワークと呼ばれてたりする)というものがいくつか公開されていて無料で使うことができます。
これらのライブラリはゲーム開発で必要な基本的なプログラムをあらかじめ作ってくれているので効率よく開発を進めることができます。
基本的にはこれらのライブラリを使ってゲームを作ります。
ではJavaScriptのゲーム開発向けのおすすめライブラリをいくつか紹介します。
enchant.js
enchant.jsはもうかなり古いのですが一時期とても人気があったゲームエンジンです。
現在は更新が停止してしまい公式サイトも無くなってしまいましたが今でも使うことはできます。
とても人気があったためネット上に多くの情報が残っているので初心者でも独学で調べて作りやすいです。
古いゲームエンジンなのでスルーされがちですがJavaScriptで初めてゲームを作るなら一番おすすめです。
筆者も最初はこのenchant.jsから入りました。
筆者がenchant.jsで作ったゲーム ▷ コスモファイター
enchant.jsについて筆者が試行錯誤したすべてをまとめた記事があるので良ければ参考にしてください。
PixiJS
ブラウザ上で高速に画像を描画できるWebGLという技術を使って画像を描画してくれる機能を持った2D描画に特化したライブラリです。
ゲーム用ライブラリではないため必要な部分を自分で作らなくてはいけませんがとても扱いやすいです。
音楽再生用のpixi-sound.jsも公開されていて一緒に使うことができます。
筆者は現在PixiJSを使ってゲームを作っています。
筆者がPixiJSで作ったゲーム ▷ 連射ソルジャー
PixiJSの基本的な使い方はこちらの記事に書いてあります。
phaser.js
上記のpixi.jsをコアに作られたゲームエンジンです。
オープンソースで開発されていて無料で使うことができます。
JavaScriptのゲームエンジンとしては世界で一番利用されているらしいのですが国内での情報はかなり少ないように思います。
JavaScriptのゲーム開発環境を作る
※追記＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
オンラインエディタのCodePenでゲーム作る方法書きました。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝追記終わり＝＝
実際にJavaScriptでゲームを作るための準備をしましょう。
JavaScriptの開発環境はとても簡単でプログラミング用のテキストエディターとブラウザがあればOKです。
テキストエディターを用意する
JavaScriptはwindowsのメモ帳でも書けますが専用のテキストエディターがあった方が作業が圧倒的に楽になります。
最近はVisual Studio Codeというエディターが人気のようなのでこれを使いましょう。
ブラウザを用意する
ブラウザはwindowsならChromeかEdge、Macならsafariを使ってください。
他のブラウザでもほとんど同じに動作しますが、ごくまれに挙動が違うことがあります。
とりあえず一番利用者が多いブラウザで開発しましょう。
ファイルの構成と起動の仕方
JavaScriptはウェブページ上で起動するので簡単なHTMLファイルを作ります。
名前はindex.htmlなど「○○.html」の形になっていればOKです。
<!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>の部分にゲームが表示されます。
JavaScriptのプログラムは○○.js(例ではmain.js)というファイルを作ってそこに書いていきます。
このindex.htmlとmain.jsを一つのフォルダに入れて管理してください。
そして起動するときはindex.htmlをブラウザにドラッグ＆ドロップすると起動します。
ローカルサーバー
使うライブラリによってはローカルサーバーが必要なものがあります。
上で紹介したテキストエディターのVisual Studio Codeにローカルサーバーの機能を追加できるプラグインがあるのでそれを使うと楽にできます。
まとめ
以上のような感じでJavaScriptでゲームを作ることができます。
具体的な作り方についてはサンプルプログラムで解説しているのでそちらを参照してください。