HTML5ゲーム

近年、スマホゲームが停滞気味となっており、パブリッシャは次のプラットフォームを探っているように思います。そんな中、大きな賑わいを見せているのがFacebook Instant Gamesを始めとするHTML5ゲームです。これまでもHTML5ゲームは存在していましたが、ブラウザ上で遊ぶことをメインとしたものではなく、スマホのFacebook Messangerのアプリ内で動くものとなっています。またLINEも「LINE QUICK GAME」を準備しており、日本においてもHTML5ゲームが再熱しそうです。 iOSアプリを開発したことがある方であれば、リリースしたアプリの中でソースコードを追加ダウンロードしてもいいのか？と思われるかもしれないですね。スマホ市場の黎明期であれば物議を醸すような仕組みですが、それが実際に行われているのがFacebbook Messangerです。

Cocos2d-x(JS)

これまでスマホのゲームアプリを作っていたエンジニアが、新しくHTML5ゲームの開発に携わろうと思うと、新しい技術を学ばなければいけないと思ってしまいます。しかし、スマホゲームの開発にCocos2d-x(C++)を利用していた開発者であれば、開発言語をJavaScriptにするだけで直ぐにCocos2d-x(JS)を操ることができるでしょう。コンセプトはC++でもJavaScriptでも同じですので、プログラミング言語の違いのみ吸収して頂ければ、あなたももうHTML5ゲームの開発を行うことができます。

Cocos2d-x(JS)の開発環境

過去にCocos2d-x(C++)の開発環境を構築しようとして挫折したことがあるエンジニアも多数いるのではないかと思います。その方から見ると「Cocos2d-x(JS)の開発環境もたいへんなんでしょ。」と思われるかもしれないですが、実はビックリするほど簡単にその環境を手に入れることができます。なんとFireFoxだけインストールされていればいいのです。あとは好きなコードエディタをご利用下さい。ここではFireFoxを利用した開発の進め方を紹介したいと思います。

Cocos2d-x(JS)のダウンロード

Cocos2d-x(JS)のダウンロードは、よく他エンジニアがブログで紹介しているCocos2d-xのダウンロードページと異なります。まず下記URLにアクセスして下さい。 http://cocos2d-x.org/filecenter/jsbuilder/ ここではHTML5ゲーム向けのCocos2d-x(JS)をダウンロードすることができます。最新のCocos2d-xのバージョンは3.17であり、ここに表示されているバージョンはv3.13と古いものになりますが、主なバージョンアップはC++などアプリ向けのものになっているので、HTML5ゲーム向けにはv3.13でも全く問題ありません。 開発用にCocos2d-x(JS)をダウンロードするなら、Modeから「Full version」、Compressorから「Uncompressed」を選択したものをオススメします。開発中は何が必要になるかわからないので全て盛り盛りのものを、またゲームエンジンのソースコードを追いかけることもあるかと思うので、難読化・圧縮されていない状態のものとしましょう。準備ができたら「Download」ボタンを押下します。

Cocos2d-x(JS)でHelloWorld

ダウンロードが終わったらファイルを展開して下さい。そしてHelloWorld.htmlをFirefoxで開いて下さい。するとCocos2d-xのロゴの前面に「Hello World」と表示されている画面を見ることができるでしょう。 なぜ最初にFirefoxを指定したのかと言えば、FirefoxであればローカルにあるJavaScriptのソースコードも実行することができるからです。他のブラウザの場合、ローディング画面で止まってしまうでしょう。またメニューより「ウェブ開発 > 開発ツールを表示」を選択し「デバッガー」タブを見ると、ブラウザ上でデバッグすることもできます。あとはお好みのコードエディタで編集するだけです。

まとめ

Cocos2d-x(JS)を利用すると、Cocos2d-x(C++)を利用していたときと同じゲームエンジンを用いスマホアプリを作成できることを解って頂けたと思います。このCocos2d-x(JS)であれば、HTML5ゲームだけでなくスマホアプリも同時に開発することができます。ゲーム開発の幅が広がると思いますので、ぜひご利用下さい。