HTML5ゲームの種類とゲーム用エンジン・フレームワーク15選

HTML5といえば、Webサイトを作成するための言語と思いがちですが、HTML5でもゲームアプリの開発を行うことが出来ます。Webブラウザはもちろん、iPhone、Androidでも動作するゲームが作成可能です。今回のコラムでは、HTML5で作成できるゲームの種類と、ゲーム用エンジン、HTML5で使用出来るゲームフレームワークをご紹介していきます。 
 
【目次】
■HTML5でゲームを作れるのか
◆HTML5とは
◆従来のゲーム開発で使用する言語
◆HTML5で開発出来るゲームの種類
■HTML5でゲームを作るために必要なスキル
◆HTML5とJavaScript
◆ゲームエンジン・フレームワーク15選
◆HTML5でゲームを作るためのおすすめ教材5選
■HTML5で作成されたゲーム例5選
■ゲーム業界でのHTML5の需要と案件・求人例
◆ハイブリットアプリで注目されているHTML5
◆ゲームだけではなく、ゲーム関係のサイト作りにも活躍
■まとめ
 

HTML5でゲームを作れるのか

HTML5で作れるゲームに入る前に、HTML5とは何か、従来のゲーム開発に使用する言語は何かを簡単にご紹介していきます。
 

HTML5とは

HTML5とは、Webサイトを構築する際に使用するマークアップ言語の5回目の大幅改修が行われたバージョンです。基本的に、マークアップ、Webコーダーと呼ばれる技術者が触る言語であり、メモ帳やテキストエディタさえあれば、誰でも無料で使用することのできる言語です。このHMTL5では、HTMLだけではなく、XHEML、Document Object ModelのHTML関係、ECMAScriptのAPIも使用することが可能です。
 

従来のゲーム開発で使用する言語

コンシューマーゲーム

コンシューマーゲームで主に使用するプログラミング言語は、C言語・アセンブラ・Java・PHPなどがあります。特にC言語は汎用性が高く、ゲーム本体からソフトまで開発することが可能で、昔からゲーム開発に使用されています。詳しくは別コラムの「コンシューマーゲームの需要|4つの仕事と必要なスキル」をご参照ください。
 

ソーシャルゲーム

ソーシャルゲーム開発に用いるプログラミング言語は様々ですが、主にUnity、Lua、Java、Rubyなどが多いようです。デバイスやプラットフォームにより変動はありますが、フロントサイド、サーバーサイドの両方で使用出来る言語が採用されることが多いです。
 

HTML5で開発出来るゲームの種類

従来のゲーム開発で使用する言語にはHTML5が登場していませんが、じつはHTML5でもゲームを開発することは可能です。主に、Webブラウザゲーム開発に用いられますが、iPhone、Androidなどのソーシャルゲームが作成可能です。
 
では、開発できるゲームのジャンルはどうでしょうか。後ほど、（HTML5で作成されたゲーム例）でもご紹介いたしますが、RPG（ロールプレイング）はもちろん、シミュレーションやパズルゲーム、育成ゲーム、タイピングゲーム、ノベルゲームなど幅広いジャンルにも対応可能です。
 

HTML5でゲームを作るために必要なスキル

この項目では、HTML5でゲーム開発を行う際に一緒に覚えるべきプログラミング言語、ゲームエンジン、ゲームフレームワークなどの開発環境をご紹介します。
 

HTML5とJavaScript

HTML5でゲーム開発する際には、一緒に「JavaScript」も習得しておきましょう。HTML5との相性も良く、画像などの動的な動きやFlashのようなアニメーションを付けるのに最適です。また、JavaScriptはサーバーサイドにも使用出来るため、より高度なゲーム開発には欠かせません。また、JavaScriptには、ゲームで使用出来るエンジンやライブラリも存在しているため、効率良くゲーム開発を行うことが可能です。
 

ゲームエンジン・フレームワーク15選

HTML5でゲーム開発するために必要な、ゲームエンジンやフレームワークを簡単にご紹介します。
 

Cocos2d-JS

Cocos2d-JSは、Cocos2dのJavaScriptバージョンのフレームワークです。エディタがHTMLで出来ているうえ、一度コードを記述したらWebでもネイティブでも動作させることが可能です。また、Webブラウザとネイティブプラットフォームで動作することができ、有名なアプリストアのほとんどでゲーム配信をすることが可能です。
 

enchant.js

enchantjsは、公式サイトにも記載されている通り、HTML5+JavaScriptで簡単にゲームやアプリを開発出来るフレームワークです。2Dはもちろん、3Dも開発することが出来るうえ、わかりやすいチュートリアルまで用意されています。2011年に公開されてから、数々の実績を残しているゲームフレームワークです。
 

Kiwi.js

Kiwi.jsは、HTML5のゲームエンジンです。JavaScriptはもちろん、Kiwi.js自体がTypeScriptで開発されている為、どちらでも使用可能です。ネイティブアプリ化するためにはCocoonJSが必要になりますが、ゲームエンジンのWordPressと言われるほど用意にゲームを開発することが可能です。
 

phina.js

phina.jsは、Twitter駆動開発なゲームライブラリです。Webブラウザはもちろん、ネイティブアプリの開発も可能なマルチプラットフォームです。公式サイトにテンプレートが揃っていて、誰でも容易に始めることが可能で、とりあえず試してみたいという方におすすめできます。
 

CreateJS

CreateJSは、HTML5でリッチコンテンツを作成するためのJavaScriptライブラリです。ドキュメントが充実しておりわかりやすいうえ、Flashから変換するためのツールが用意されているため、ゲーム会社での実績も多いライブラリです。既存ゲームの足りない部分を補うために使用するなど、細かい部分に使い分けるのに適しています。
 

PLAYCANVAS

PLAYCANVASは、クラウド上でホストされている3DHTMLのゲームエンジンです。ブラウザ内でのコード編集やワンクリックで公開できる機能があるうえ、どこでも実行できるリッチ広告を作成できる機能が備わっています。また、無料だけではなく有料サポートプランもあるため、開発するものによってサポート内容を選ぶことが出来ます。
 

Stage.js

Stage.jsは、HTML5の2Dレンダリングエンジンで、クロスプラットフォーム開発が可能です。高速かつ軽量なうえ、シンプルな機能ゆえに特に、パズルゲームなどで効力を発揮します。
 

Arctic.js

Arctic.jsは、株式会社DeNAが公開したスマートフォンブラウザ向けのゲームフレームワークです。ActionScript3に似たAPIを通じて使用されるため、Flash3の開発者には親しみやすい仕様になっています。「ガンダムロワイヤル」などのゲームで使用されており、注目されているフレームワークです。
 

Quintus

Quintusは、HTML5用の2Dゲームエンジンです。ダウンロードすると、あらかじめ数種類のデモが用意されており、触りながらどういうものか掴むことが出来ます。また、PC用だけではなく、モバイルにも対応しています。
 

DivGO

DivGOは、Div ゲームメーカーを元にした2D・3D用のゲームエンジンです。コードエディタ付きのIDE機能や関数一覧、実行プロセス一覧などが一式揃っています。ただし、日本語の記述の資料が少ないため、英語が読める人でないと厳しいかもしれません。
 

Construct 2

Construct 2は、HTML5ゲームエンジンです。純粋なHTML5とJavaScriptの出力が出来るうえ、JavaScriptプラグインで拡張することも可能です。また、Webブラウザで3次元グラフィックを表示させるWebGLも使用することが出来ます。
 

Isongenic Engine

Isongenic Engineは、多人数同時参加型マルチプレイヤーネットワークが可能なゲームエンジンです。Node.jsとMongoDBを使用して、ネット対戦や協力が可能なリアルタイムなゲームを開発することが出来るため、かなり注目されているゲームエンジンです。
 

WiMi5

WiMi5は、HTML5のゲームプラットフォームになります。ビジュアルエディタを使用しなくても開発できるため、プログラミング経験がない人でもHTML5のゲームを開発することが可能です。また、ソーシャルゲームなどに多い課金実装も無料でできます。基本的には2Dゲームであればどんなジャンルのゲームでも開発可能です。
 

MightyEngine

MightyEngineは、Webブラウザはもちろん、AndroidとiOSにも対応している2Dゲームエンジンです。HTML5でゲーム開発するだけではなく、プロジェクト管理、素材管理、地図管理などができるエディタも組み込まれていますので、自己管理がしやすいゲームエンジンとなっています。
 

RPG Maker MV

RPG Maker MVは、KADOGAWAと尾島陽児エンジニアによって開発されたRPG制作メーカーです。JavaScriptで制作されており、カスタムコードやアドオンの追加が可能です。また、アニメとマンガ風のモデルも使用可能なうえ、音楽データも含まれているので、このRPG Maker MVひとつで自由なゲームが開発出来ます。
 

HTML5でゲームを作るためのおすすめ教材5選

・ゲーム制作速報
HTML5+Javascriptで作成するゲームについてを項目ごとに細かく記載してあるサイトになります。RPGとシューティングゲームがメインで解説されていますが、項目が細かい為必要に応じて逆引きも出来ます。また、HTML5以外のプログラム言語でのゲーム開発についても同サイト内で紹介されていますので、ゲームに興味がある人にはおすすめ出来ます。
 
・初めてのHTML5ゲーム作成
HTML5が書けること前提のサイトですが、どんなゲームが作れるか、基本処理はどういうものがあるかなどを、画像を交えて詳しくご紹介しています。スマートフォン対応のゲームにする際のよくある注意点も掲載されています。
 
・初心者向けJavaScript/HTML5ゲームプログラミング
こちらもHTML5がある程度わかることが前提ですが、初めてゲームを作成する人向けのスライドになっています。また、学習しながら開発することが前提ですので、フルスクラッチ（フレームワークなどの開発を簡単にする機能は使用せず、全て手書き）での記述についてをご紹介しています。
 
・ゲームで学ぶJavaScript入門 HTML5&CSSも身に付く!（著：田中賢一郎）
スター数：3.6/レビュー数：10/値段：\2,592
HTML5+Javascriptでゲーム開発する際に必要なポイントを押さえることが出来ます。また、短いコードで記述して動かくSampleゲーム開発を行うことが出来ますので、作りながら学習することが出来ます。
 
・JavaScript版Cocos2d-x かんたんゲーム開発（著：Emanuele Feronato）
スター数：3.6/レビュー数：5/値段：\2,592
Cocos2d-JSに特化した教材で、海外で人気が高いシリーズの翻訳教材です。ゲーム作りの基本から応用テクニックまで学習出来ます。また、サンプルコードが豊富です。英語が読める方は原本シリーズの方が内容が細かいので、おすすめ出来ます。
 
教材だけでは手詰まりになってしまうという方は、ゲームショーなどのイベントや参加型セミナーに参加してみることも検討してみて下さい。他の人が作ったゲームを体験できるだけではなく、どうすれば良いのかを教えてくれることもあるので、開発のヒントになります。
 

ゲーム業界の案件・求人

• 50万円～
  【テスター】ゲームアプリテスト設計

  

  テスター

  

  ゲーム

  

  渋谷区

  

  東京その他駅

  応募する詳細を見る
• 60万円～PHP
  【PHP】Native ソーシャルゲームタイトルの運用・開発

  

  サーバーエンジニア

  

  その他業界

  

  港区

  

  東京その他駅

  応募する詳細を見る
• 60万円～PL/SQL
  【PL/SQL】某大手ゲーム会社向け管理システム開発 案件

  

  サーバサイドエンジニア

  

  WEBサイト

  

  品川区

  

  品川

  応募する詳細を見る
• 50万円～Ruby
  【Ruby】ソーシャルゲームのシステム開発業務案件

  

  サーバサイドエンジニア

  

  ゲーム

  

  目黒区

  

  目黒

  応募する詳細を見る
• 60万円～PHP
  【PHP/Perl】ウェブトークRPGゲーム制作

  

  サーバサイドエンジニア

  

  ゲーム

  

  台東区

  

  東京その他駅

  応募する詳細を見る
• 60万円～
  【プランナー】ゲームプランナー

  

  ゲームプランナー

  

  ゲーム

  

  千代田区

  

  東京その他駅

  応募する詳細を見る

HTML5で作成されたゲーム例5選

・ガンダムロワイヤル（バンダイナムコ）

Arctic.jsでHTML5+JavaScriptで記述されており、短期間で開発が可能なうえ、AndroidとiOSの両法で対応可能なソーシャルゲームが開発されています。
 
・インベーダーブブリッツ（楽天ゲーム）

楽天が配信している、HTML5ベースでゲーム開発が行われているプロジェクトの1タイトルです。他にもR Gamesで公開されているゲームのほとんどがHTML5+JavaScriptで開発されています。
 
・FIVE MINUTES（G-SHOCK）

かなり本格的なグラフィックのゲームです。マウスでカーソルを移動させてゾンビを攻撃したり、選択肢の中から回答を選択したりなど、かなりやり込み要素が高いHTML5ゲームになっています。ホラーが苦手な人は要注意です。
 
・魔王のヤボウ(エーステクノロジー)

Flash非対応であるAndroidとiOSの両法に対応させた、HTML5+JavaScriptのパズルゲームです。イラストもゴシックポップで、10代や20代に人気が出ている回転パズルです。
 
・GAIABREAKER（ユビキタスエンターテインメント）

GAIABREAKERは、HTML5+JavaScriptのゲームエンジンであるenchant.jsで開発されたWii U専用のシューティングゲームです。太Playerとのスコア競争や、敵機への自動ロックオン、追尾ミサイルなど多彩な機能が満載です。
 

ゲーム業界でのHTML5の需要と案件・求人例

ハイブリットアプリで注目されているHTML5

HTML5はゲーム開発だけではなく、ハイブリットアプリ開発でも注目されています。その理由は、プラットフォームに依存しないアプリ開発が可能だからです。今回ご紹介したHTML5ゲームでも言えるように、WebブラウザだけではなくAndroidやiOSなどでの動作が可能です。
 
ハイブリッドアプリとは、ネイティブアプリとwebアプリの特性を組み合わせたようなアプリです。詳しくは、別コラムの「ハイブリットアプリとは|おすすめ開発環境とフレームワーク比較」をご参照ください。
 

ゲームだけではなく、ゲーム関係のサイト作りにも活躍

HTML5はゲーム開発だけではなく、ゲーム関係のWebサイト作成にも活躍します。自分で開発したゲームのWebサイトを作成し、ゲームタイトルの知名度UPや、攻略サイトの運営なども行うことが出来ます。
 
マルチプラットフォームかつ、OSごとにコードを分ける必要がないため開発効率の大幅アップが見込めるHTML5の汎用性は、実はかなり高いことがわかります。無料かつ誰でも使うことができるHTML5ですので、少しでも興味があればまず触ってみてください。
 

ゲーム業界の案件・求人

• 50万円～
  【テスター】ゲームアプリテスト設計

  

  テスター

  

  ゲーム

  

  渋谷区

  

  東京その他駅

  応募する詳細を見る
• 60万円～PHP
  【PHP】Native ソーシャルゲームタイトルの運用・開発

  

  サーバーエンジニア

  

  その他業界

  

  港区

  

  東京その他駅

  応募する詳細を見る
• 60万円～PL/SQL
  【PL/SQL】某大手ゲーム会社向け管理システム開発 案件

  

  サーバサイドエンジニア

  

  WEBサイト

  

  品川区

  

  品川

  応募する詳細を見る
• 50万円～Ruby
  【Ruby】ソーシャルゲームのシステム開発業務案件

  

  サーバサイドエンジニア

  

  ゲーム

  

  目黒区

  

  目黒

  応募する詳細を見る
• 60万円～PHP
  【PHP/Perl】ウェブトークRPGゲーム制作

  

  サーバサイドエンジニア

  

  ゲーム

  

  台東区

  

  東京その他駅

  応募する詳細を見る
• 60万円～
  【プランナー】ゲームプランナー

  

  ゲームプランナー

  

  ゲーム

  

  千代田区

  

  東京その他駅

  応募する詳細を見る

 

まとめ

HTML5で開発するゲームについてご紹介してきましたがいかがでしたでしょうか。HTML5自体がわからないという人も、パズルのように組み立てて作成するためのフレームワークやツールも開発されていますので、プログラミング不要で簡単に作ることも可能です。ですが、やはり自由度が高いゲームにする場合は、HTML5+JavaScriptは必要になってきます。徐々に作りながら学んでいくことも可能ですので、ゲームに興味ある方は、ご自身のパソコンに入っているメモ帳で簡単なHTML5を書いてみることから始めてみてください。