カテゴリー別アーカイブ: ゲーム開発

CocosBuilderでH5ゲーム開発#1

cocos2d-js, ゲーム開発, , , , ,

H5ゲーム開発#1

そろそろドメイン名に沿った記事を書いていこうと思います。
忘備録として、お手軽ゲーム開発メモとして
後々役に立つと良いな。

H5ゲームとは？

HTML5の仕様上で動くゲームのことを指します。
最近のWebはほとんどHTML5に移行してきているので、
WEBゲームはほぼほぼH5ゲームでは？となりますが、
ここでの定義はHTML5のWebGL（画面描画機能）を使用して
ページ遷移なしでゲームやコンテンツが完結するものです。

更に言えばPCでしか動かないものではなく、
スマートフォンでも手軽に実行して遊べるものを指します。

WebGLがまともに動作するのは以下の端末とOSバージョン以降です。
iOS(iPhone/iPad):iOS8以上
Android:OS6.0以上

現在はiOSは12、Androidも8.0/9.0ですのですでに数年前から
動作環境が揃っていることがわかりますね。

HTML5コンテンツサンプル（脱出ゲーム）

シンプルな脱出ゲームの制作例です。
サンプルを差し替えました（2020/7/18）

操作方法：左右ボタンで部屋移動。画面タップでヒント表示

このようにページに埋め込んだり、スマホの全画面でネイティブアプリのように開けます。

全画面で開く

H5ゲーム/コンテンツの活用例

  • インタラクティブ広告
  • プレイアブル広告
  • ゲームアプリの体験版
  • 作品紹介ページ
  • WebViewを使ったネイティブアプリ化

H5ゲームの日本での現状

日本ではこの分野に詳しい一部の企業が
ゲームのプロモーションに利用していたり、
怪しげな開発会社が案件募集していたりするだけで
あまり個人には普及していない気がします。

中国では巨大市場ができているとの話もあります。

日本でも診断系のWebアプリは流行っていますし、
Webサービスの開発も盛んですので、それらと
組み合わせたりすれば可能性は広がると思います。

RPGツクールMVもこの形式で作られたものだったりしますが
スマホよりはPCに向けたUIなので、あまりスマホ版の
アプリは見かけないのが現状ですね。
RPGアツマールもHTML5を活用した事例です。

その他、大手の会社がHTML5専用ゲームサイトを立ち上げたり、
計画中などの話はありますが、まだ大きく注目されたりは
していない感じですね。

H5ゲームの作り方

このブログではなるべく簡単な方法で
スマホ対応のH5ゲームやH5コンテンツを
作る方法を紹介していきたいと思います。

開発環境

  • Mac（MacBook/Air/MacMini等なんでも可能）
  • CocosBuilder(Mac用画面UI＆アニメーション作成ソフト：無料)
  • Cocos2d-JS 3.13(ゲームエンジン)
  • テキストエディタ

＜あると便利＞
- ターミナル ：Mac標準装備CUI
- Tiled ：マップエディタ
- ParticleDesigner ：パーティクルエフェクト作成ツール

この記事ではメインのツールにCocosBuilderを使用するので必然的にMac環境が必須になります。

iPhoneのアプリ開発もAndroidのアプリ開発もできて
とても快適につかえるMacをお勧めします。

どうしてもWindowsが良い方は現在のCocos2d-x公式の開発ツールである
CocosCreatorというものがありますので、そちらを使用してみてください。
尚、このブログではCocosCreatorに関する情報は扱いません。

なぜCocosBuilderなのか？

CocosBuilderの利点

・オープンソースとして公開されていている
・アップデートなどでの仕様変更の心配がない。
・軽量で動作する。
・Javascriptとの連携に適した構成
・タイムラインアニメーションの構築が容易
・画面サイズを柔軟に定義可能
- ネイティブアプリ化（iOS/Android）が手軽

Cocos2d-X 開発ツールの歴史

元々、CocosBuilderはCocos2d-xの公式開発ツールでした。
作者さんが開発元を退職するにあたって更新が停止しましたが、
オープンソースのプロジェクトとして使用自体は可能となっており、
最新のCocos2d-xでも動作可能となっています。

その後、同様のツールはCocoStudio（後にCocosStudioに改名）となり、
発表当初は中国語しかサポートしておらず、Windows版が先行して開発されました。
Mac版は機能不足でとても使えるものではありませんでした。
その後機能が充実し公式ツールとして普及していきましたが、
ある日突然公開終了となりました。そのタイミングで出てきたのが
現在の公式ツールであるCocosCreatorです。

CocoStudioの時点で不信感を持っていた私はCocosBuilderから移行せず、
結局現在もCocosBuilderを使用しています。

一部新機能のオブジェクト（３D等）の配置などはできませんが、
全てJSのコーティングでカバーできる範囲なので問題ありません。

むしろ、アップデートの度に微妙な仕様変更などが入ったり、
突然公開を辞める可能性のあるツールよりは十分に使える
軽量なツールの方が使いやすいと判断しました。

基本機能であるシーンの作成、UIの配置、
タイムラインアニメーション、画面サイズ設定等、
シンプルに使用することができます。

iPhoneX対応（ネイティブアプリ）も簡単にできました。

開発環境セットをテスト的に配布してみようと思います。
興味のある個人クリエイターの方はTwitterまでご相談ください。

開発環境セット一式内容
- CocosBuilder本体
- エディット用プロジェクトファイル一式
- 公開用ファイル一式
- サンプルソース一式

連絡先：@a_ofuji

H5ゲーム作成手順

前置きがかなり長くなってしまいました。
ゲームエンジンの種類や使用ツールについては
特にこだわりがあるわけではなく、使いやすい軽いものを選んでいます。

以下にざっくりとした手順を書いてみました。

  • 1 画面を作成 (CocosBuilder)
  • 2 動作を作成（Javascript）
  • 3 動作確認　（サーバー＆ブラウザ）
  • 4 デバッグ・修正
  • 5 公開開始

続きは次回

次回からはサンプルや具体的なツールの操作方法なども掲載していければと思います。