JavaScriptでゲームを作ろう!おすすめのライブラリも紹介

    • このページをはてなブックマークに追加

    公開日:2021年11月05日 最終更新日:2021年11月10日

    JavaScriptでゲームを作りたいと考えている方へ、いざゲームを作ろうとした際には、ライブラリと使うことで大きく開発効率を上げることも可能です。今回は、JavaScriptで作成された人気ゲームの例から始まり、JavaScriptでのゲーム制作におすすめのライブラリ4選、さらに、おすすめの資格や求人動向なども合わせて、ご紹介致します。

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

    JavaScriptでゲームを作ろう!おすすめのライブラリも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    JavaScriptでのゲーム開発は可能なのか、まず結論から言うと可能です。JavaScriptで開発されたゲームはブラウザ上で動作するため、いわゆる「ブラウザゲーム」の一種となります。3Dモデルをごりごり扱うゲームなどには不向きですが、2Dイラストに動きをつけて表示するタイプのゲーム開発に利用されています。JavaScriptでゲームを開発することにより、PCからでもスマートフォンからでも遊べるクロスプラットフォームなブラウザゲームを作ることが可能です。

    ▲ページトップへ戻る

    1.1 JavaScriptで作成可能なゲームの例

    JavaScriptでゲームを開発する際に利用されるライブラリの代表的なものといえば、「Phaser 3」です。主に2DのアクションやRPG、ノベルゲームの開発時に利用されており、次のようなゲームの基本機能が作成できるセットが用意されています。


    ■ こんなアクションが作成可能

    キーボード操作でキャラクターが動くマリオのようなゲームを簡単に作ることができます。


    ■ こんなRPGが作成可能

    スタート画面があり、それをクリックするとゲーム本編が始まり、イベントや移動用マップ、戦闘画面が表示される…といった、昔懐かしいドラクエ風のゲームなどが簡単に作成可能です。マップチップを配置していくなど、RPGツクール風といえば分かりやすい方もいるかもしれません。


    ■ こんなノベルゲームが作成可能

    スタート画面があり、それをクリックするとゲーム本編が始まるところまではRPGと同じですが、本編では背景画像にキャラクターの立ち絵をレイヤー表示し、さらにノベル本文をテキストボックスに表示します。ノベルの途中で選択肢を表示しプレイヤーに選ばせることでシナリオを分岐させ、最後にエンディングを表示して終了します。この一連のノベルゲームの基本機能がPhaser3には備わっているほか、さらにプレイを快適にする機能がとり揃えられています。

    もちろんここで紹介したのはごく一部の基本機能であり、豊富にある機能を活用してオリジナリティのあるシステムが採用されたゲームも多数あります。

    ▲ページトップへ戻る

    1.2 JavaScriptによるゲーム開発の「実装」で検討すべきこと

    それでは実際にゲームを開発していく前に、あらかじめ決めておくべきことをご紹介します。


    ■ ライブラリ選び

    JavaScriptを使って最終的にどのようなゲームを作りたいかに加えて、アップデートの頻度や日本語ドキュメントの充実度などを考慮して選ぶことがおすすめです。アップデートの頻度が高ければ次々と新機能がリリースされたり、せっかく作ったのにサポートが終了してしまった…というような事態を防ぐことができます。また日本語のドキュメントが豊富にあったり、ウェブ上の日本語コミュニティで積極的にやりとりが行われているライブラリについては、困った時の解決方法を探しやすいという利点があります。

    なお2Dゲーム制作において代表的なライブラリとしておすすめなのは「Phaser 3」です。また日本発祥のライブラリとしては「enchant.js」が有名ですが、開発元の解散に伴い最終更新が5年前となっていますので、ご注意下さい。


    ■ 開発環境

    JavaScriptのコードを書くだけなら、PC付属のメモ帳アプリだけでOKです。しかし適切な統合開発環境(IDE)を用意することで、ファイルを系統だてて保存し、テスト実行し、さらに強力な入力補助機能で作業を効率化することが可能です。

    筆者のおすすめは、「Glitch」という無料でも使えるオンラインエディタです。このエディタを使うと、自分の作成したWebページを無料で公開することが可能です。後述のサーバーの準備を個人で行う必要なく、作成したゲームを公開できるという利点があります。


    ■ Webサーバーの準備

    前述した「Glitch」のようなクラウド型統合開発環境(IDE)を使わずにローカルで開発環境を構築していく場合は、別途「XAMPP」などのローカルサーバー環境の準備が必要です。

    「XAMPP」のインストールから初期設定の手順については、次の記事も参考にしてみて下さい。


    ■ 注意点

    JavaScriptと組み合わせて利用されるのはHTML5ですが、このHTML5用のゲームエンジンとして国内でメジャーなのは、やはり「Unity」と「PlayCanvas」の2つであると言えます。そのためJavaScriptのライブラリは全体的に国内の利用者が少ないのが状況で、日本語の参考資料が少ないという難点があります。

    またライブラリ自体にエラーがあるケースもたまにあるので、その場合は英語で修正リクエストを出す必要があります。ただし「Phaser 3」などはOSS(オープンソース)であるため、自分で修正して使用してしまうという手もあります。

    なお「Unity」などは無料版に制限があったり容量が大きかったりと、ちょっとした2Dゲームの開発には向かないという面もあります。そのため作りたいゲームがJavaScriptに向いている場合や、そもそもJavaScriptの練習のためにゲームを作るという場合には、やはりJavaScriptの選択がおすすめです。

    ▲ページトップへ戻る

    2.【ゲーム開発向け】おすすめのJavaScriptライブラリ4選

    ゲーム開発向けのJavaScriptライブラリのうち、人気かつ実用性の高いおすすめライブラリを4つご紹介します。

    2.1 Phaser 3

    Phaser 3【フリーランスエンジニア案件情報 | プロエンジニア】

    ■ 概要

    ここまでの説明に例として使用していた、2Dゲーム開発の場面で人気のライブラリです。有料のプラグイン販売もありますが、基本は無料で豊富な機能が提供されています。公式によるアップデートも盛んに行われています。コミュニティの動きも活発で、英語中心になりますが情報収集しやすいという利点もあります。

    なおRPGやノベルゲームの開発で有名ですが、アクションゲームなど動きの多いゲームも作ることができます。アクションゲームの作り方については、公式のチュートリアルで紹介されています。日本語版はありませんが、キーボード操作でキャラを動かす方法などが実例を交えて詳しく解説されていますので、ぜひ一通り目を通しておくのがおすすめです。

    参照:Making your first Phaser 3 game


    ■ 公式サイトURL

    https://phaser.io/phaser3


    ■ ライブラリの使用例

    Phaser 3【フリーランスエンジニア案件情報 | プロエンジニア】

    【参考】はじめのPhaser3作成チュートリアル|なんとなしにこころむ
     ・ゲームのURL:https://blog.t-haku.com/phaser3/first-tutorial/
     ・サイトのURL:https://blog.t-haku.com/dabble-in-phaser3/


    ■ インストール方法

    「Phaser 3」を開発環境にインストールする方法として、今回はNode.jsのパッケージ管理ツールである「npm(Node Package Manager)」を使用します。Node.js導入済みの状態からの「Phaser 3」をインストールするコマンドは、次の通りです。

    npm install phaser」コマンドを実行する

    なお実際にインストールする際には、その他のライブラリと同様に「nmp init」コマンドを実行して「package.json」を生成するなどの下準備も行って下さい。

    またJavaScriptでゲーム開発を行う場合には、増殖しやすいファイルをひとまとめにしてくれる「バンドル」というツールである「webpack」なども、同時にインストールしておくと便利です。

    ▲ページトップへ戻る

    2.2 Babylon.js

    Babylon.js【フリーランスエンジニア案件情報 | プロエンジニア】

    ■ 概要

    「Babylon.js」は正確にはゲーム用のライブラリではなく、ゲーム開発にも使えるwebレンダリングエンジンです。特に3Dゲームの開発において、オブジェクトの表面の質感やメッシュの表現などに利用可能です。こちらは単体でゲーム開発を行うというよりは、他のゲーム開発用のライブラリと組み合わせて利用することで、さらに効果を発揮します。


    ■ 公式サイトURL

    https://www.babylonjs.com/


    ■ ライブラリの使用例

    Babylon.js【フリーランスエンジニア案件情報 | プロエンジニア】

    【参考】完成した迷路ゲームの実行/Babylon.jsで3Dゲームを作成してみた|Qiita
     ・ゲームのURL:https://to-fujita.github.io/Babylon.js_3D_Graphics/BabylonJS_maze_07.html
     ・サイトのURL:https://qiita.com/halboujp/items/8b4b07136420c5defb13


    ■ インストール方法

    前述のPhaserと同様に、パッケージ管理ツール「npm」を使用した場合のインストール方法は、次の通りです。

    npm install babylonjs」コマンドを実行する

    ▲ページトップへ戻る

    2.3 PixiJS

    PixiJS【フリーランスエンジニア案件情報 | プロエンジニア】

    ■ 概要

    PixiJSは2Dに特化した描画ライブラリです。特徴はその軽量さで、ゲームの動作において最重要である描画の高速化を実現できます。そのため、ゲーム開発専用に作られたライブラリではありませんが、ゲーム開発の場面でよく利用されています。


    ■ 公式サイトURL

    https://pixijs.com/


    ■ ライブラリの使用例

    PixiJS【フリーランスエンジニア案件情報 | プロエンジニア】

    ヴィジュアル操作で多様なゲームを開発することができるソフトウェアである「RPGツクールMZ」に採用されているほか、前述のゲーム開発用ライブラリ「Phaser」にも採用されています。


    ■ インストール方法

    前述のPhaserと同様に、パッケージ管理ツール「npm」を使用した場合のインストール方法は、次の通りです。

    npm install pixi.js」コマンドを実行する

    なおこちらも、合わせて「webpack」などもインストールしておくと便利です。

    ▲ページトップへ戻る

    2.4 Kiwi.js

    Kiwi.js【フリーランスエンジニア案件情報 | プロエンジニア】

    ■ 概要

    「Kiwi.js」は、TypeScriptで開発されたHTML5ゲームフレームワークです。実は前述のPhaserはKiwi.jsの軽量版(KIWI LITE)として先行公開されたもので、こちらは完全版のような存在です。

    Kiwi.js【フリーランスエンジニア案件情報 | プロエンジニア】

    そのためKiwi.jsの方が幅広い開発が行えるのですが、現時点でPhaserの方が多くのユーザーを獲得している状況です。機能の多さをとるかコミュニティの活発さをとるか、お好みで選んで下さい。

    なおKiwi.jsには、公式で各APIやプラグインのサンプルコードが豊富に用意されています。

    参照:KIWI.JS EXAMPLES


    ■ 公式サイトURL

    http://www.kiwijs.org/


    ■ ライブラリの使用例

    公式で用意された、Blueprintと呼ばれるアプリのテンプレートが現時点で6本公開されています。それを改造してオリジナルのゲームにしていくという使い方もできるので、初心者の方が勉強しながら使っていくのにもおすすめです。

    参照:HTML5 GAME BLUEPRINTS


    ■ インストール方法

    前述のPhaserと同様に、パッケージ管理ツール「npm」を使用した場合のインストール方法は、次の通りです。

    npm install kiwi-js」コマンドを実行する

    ▲ページトップへ戻る

    3. ゲーム関連のライブラリを扱う際は「TypeScript」がおすすめ

    JavaScriptでゲームを作ろう!おすすめのライブラリも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    JavaScriptでゲームを開発する際には、TypeScriptの利用がおすすめです。理由には、次のようなものが挙げられます。

    • TypeScriptは関数名の入力補完やヒント(関数の説明や引数)の表示が行われるため、コーディングの効率が格段に上がる。

    • 静的型付け言語なので、データ型と値が一致しないとエラーになってすぐ分かる。

    • クラスを使うことができ、オブジェクト指向っぽい開発ができる。

    • Kiwi.jsなど、そもそもTypeScriptで開発されているため、親和性が高い。

    そもそもTypeScriptは、JavaScriptでの開発を便利にするために作られたという背景があります。TypeScriptに少しでも興味があるという方であれば、TypeScriptを使うことがおすすめです。

    ▲ページトップへ戻る

    4. JavaScript関連のおすすめ資格

    JavaScriptには、2つのおすすめ資格があります。「HTML5プロフェッショナル認定試験」と「CIW JavaScriptスペシャリスト」の2つですので、ご紹介します。


    ■ HTML5プロフェッショナル認定試験

    HTML5プロフェッショナル認定試験【フリーランスエンジニア案件情報 | プロエンジニア】

    HTML5プロフェッショナル認定試験は、「LPI-Japan」が提供する認定制度です。「LPI-Japan」は、ほかにLinuCなどの資格試験を実施しています。HTML5やだけでなく、JavaScriptも試験範囲に含まれており、マークアップに関する知識や技術を幅広く問われる試験です。

    運営団体 LPI-Japan
    受験資格 レベル1:特になし
    レベル2:レベル1試験に認定済であること
    試験時期 随時
    費用 ¥16,500(税込)
    受験方法 ピアソンVUEのサイトから、希望する会場と日時を指定して予約する。試験はCBT方式で行われる
    公式サイトURL https://html5exam.jp/

    ■ CIW JavaScriptスペシャリスト

    CIW JavaScriptスペシャリスト【フリーランスエンジニア案件情報 | プロエンジニア】

    「CIW(Certified Internet Web Professional) 試験」のうち一つである「CIW JavaScriptスペシャリスト」は、アメリカに本社のあるCertification Partner社が提供するJavaScriptの認定試験です。現時点で英語のみの出題ですが、世界的な人気試験であり、合格することでJavaScriptに関するスキルを広く証明できる試験となっています。

    運営団体 Certification Partner
    受験資格 特になし
    試験時期 随時
    費用 150USD
    受験方法 ピアソンVUEのサイトから、希望する会場と日時を指定して予約する。試験はCBT方式で行われる
    公式サイトURL https://www.ciwcertified.com/ciw-certifications/web-development-series/javascript-specialist

    これらの資格2件についてもっと詳しく知りたい方は、次の記事も合わせてご覧下さい。

    ▲ページトップへ戻る

    5. JavaScript関連の求人動向

    JavaScriptでゲームを作ろう!おすすめのライブラリも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    プロエンジニアに掲載されているフリーランスエンジニア向けで、JavaScriptに関するおすすめ案件を3つピックアップしてみました。

    なお現在の求人動向としては、月額単価が高めの案件ではライブラリを名指しで使用経験が求められるケースが多く見られました。さらに安定して単価の高い案件ではJavaScriptなどフロントエンドのスキルだけでなく、PHPなどサーバーサイドのスキルも持ち合わせていることが求められる傾向にありました。

    また、近年の出社率を抑制する施策により、特にフリーランスは完全在宅で行える案件の割合が高まっていることも特徴として挙げられます。


    ■ HTML/CSS/JavaScriptの案件

    HTML/CSS/JavaScriptの案件【フリーランスエンジニア案件情報 | プロエンジニア】

    HTML/CSS/JavaScriptを用いて、転職支援サービス開発を行うエンジニアを募集する案件です。詳しくは案件情報ページをご覧下さい。

    案件情報:フロントエンドエンジニア★ITエンジニア向け転職支援サービスの開発


    ■ JavaScript/React/HTML/CSSの案件

    JavaScript/React/HTML/CSSの案件【フリーランスエンジニア案件情報 | プロエンジニア】

    JavaScript/React/HTML/CSSを用いて、小説投稿システムの開発を行うエンジニアを募集する案件です。詳しくは案件情報ページをご覧下さい。

    案件情報:フロントエンドエンジニア★toC向け小説投稿サイトの開発


    ■ JavaScript(Vue/React)/Ruby(Ruby on Rails)の案件

    JavaScript(Vue/React)/Ruby(Ruby on Rails)の案件【フリーランスエンジニア案件情報 | プロエンジニア】

    JavaScript(Vue/React)/Ruby(Ruby on Rails)を用いて、多様な企業から受託開発を行うエンジニアを募集する案件です。詳しくは案件情報ページをご覧下さい。

    案件情報:フロンエンドエンジニア★受託開発企業での開発

    ▲ページトップへ戻る

    6. まとめ

    今回はJavaScriptでのゲーム開発について、その作成例や検討しておくべき事項、そしておすすめライブラリについてご紹介しました。JavaScriptを使ったゲーム開発は日本語コミュニティではあまりメジャーではありませんが、まだまだ可能性の広がる分野です。ゲーム開発専用の言語よりも実務に役立つ、趣味と実益の両立するものですので、JavaScriptとゲームの両方に興味のある方は、ぜひ開発にチャレンジしてみて下さい。

    ▲ページトップへ戻る


    最新の求人情報をチェック!

    月額単価80万円〜
    勤務地 東京都 渋谷区
    月額単価40万円〜
    勤務地 東京都 渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Unity/C#/C++】ゲームプログラマー★オンラインパーティゲームのクライアント開発

    月額単価 :80万円〜

    同社で運営するオンラインゲームのクライアント側の 設計と開発を担当していただきます。 主な使用...

    フリーランス

    【LAMP】ゲームプログラマー★戦国系ソーシャルゲームの新規開発、デバッグ、イベント準備他

    月額単価 :50万円〜

    参画当初は同社のサービス(戦国系ソーシャルゲームアプリ、 大人数参加型オンラインゲーム)の運営と...

    フリーランス

    【HTML/CSS/JavaScript】フロントエンドエンジニア★ソーシャルゲームの改修

    月額単価 :40万円〜

    ・毎月のイベントや商品の投入に伴う機能改修作業 ・新規イベント、新機能追加に伴う機能開発

    正社員

    【UNIX】システムエンジニア|サーバーの設計・構築 NEW

    年収 :300万円〜

    ■サーバーの設計/構築を中心としたシステム全般の関連業務やデータベース関連業務(AI技術も増えています...

    GHソリューション株式会社