インテル® XDK
ゲーム
HTML

インテル® XDK を使用する HTML5 ゲーム開発入門

同カテゴリーの次の記事

GCC 5.0 での x86 向けの最適化新機能: 32 ビット・モードにおける PIC

このお知らせは、インテル® デベロッパー・ゾーンに掲載されている「Getting Started with HTML5 Game Development Using the Intel® XDK」の日本語参考訳です。

インテル® XDK は、2D HTML5 ゲームを含むハイブリッド・モバイル・アプリを作成するための開発環境を提供します。ゲーム開発者の方々には、ゲーム・アセット・マネージャー、ゲーム関連のプラグイン API、サポートされているゲームエンジン用のゲームサンプルやテンプレート、ビルトイン・コード・エディターの自動補完ヒントなどの特別機能を、一般開発者の方々には、さまざまなプラットフォーム向けアプリ・パッケージ・ビルド機能などが含まれています。

ゲームエンジンとインテル® XDK によるゲーム開発

多くのゲーム開発者はゲームアプリの開発を簡素化するため、特定のゲームエンジンを使用して HTML5/JavaScript/CSS でゲームアプリを作成します。HTML5 ゲーム開発に、インテル® XDK よりも既存のツールセットを使用したいゲーム開発者の方もいらっしゃるでしょう。Construct 2* などのゲームエンジンは GUI インターフェイスを利用して、プログラミングなしでゲーム開発を提供しています。Construct 2* プロジェクトをインポートし、アプリケーション・ストアに公開できるアプリをインテル® XDKで作成する手順の概要については、https://software.intel.com/en-us/html5/export_contruct2_android (英語) か、後述の手順を参照してください。

開発環境をまだお持ちでない、あるいはインテル® XDK を使ってゲームを開発したい方は、インテル® XDK のゲーム・アセット・マネージャーにより、開発中のゲームアセットを管理できます。ゲーム・アセット・マネージャーは特定のゲームエンジンとバージョンをサポートしており、それらはインテル® XDK プロジェクト作成時に指定する必要があります。サポートされているゲームエンジン (およびそのバージョン) を使用する場合、インテル® XDK により選択したアセットのコードスニペットを生成し、ご自身の HTML5 ゲームのソース内で使うことができます。現在サポートしているゲームエンジンは以下の通りです。

既存のゲームエンジンのプロジェクトをインテル® XDKにインポートする際は、プロジェクトがゲーム・プロジェクトであることを指定して、ゲームエンジン名とそのバージョン (NNN形式) を入力します。サポートされているゲームエンジンおよびそのバージョンについては、インテル® XDK リリースノート (英語) を参照してください。

次のセクションでは、ゲーム・プロジェクトをインポートするための手順を説明します。

ゲームアプリのエクスポートとパッケージ化は行うが開発にインテル® XDK を使わない

インテル® XDK 以外の既存のツールセットを使って HTML5 ゲームアプリを開発した場合、あるいは Construct 2* のようにプログラミングを必要としないツールセットを使用して HTML5 ゲームアプリを開発した場合は、インテル® XDK の特定の部分のみを使用します。

  1. プロジェクトを現在のツールからエクスポートします。Construct 2* の場合は PhoneGap* プラットフォームを選択します。インテル® XDK 以外で HTML5 ゲームを開発した場合、開発システムの新規ディレクトリーにプロジェクト・ファイルの現在のセットをコピーします。
  2. インテル® XDK をダウンロードし、インストールして起動します。
  3. HTML5 のプロジェクト・ファイルをインテル® XDK にインポートし、インテル® XDK プロジェクトを作成します。
  4. アプリのファイルが正常に移行されたことを確認するため、Emulate タブで 1 つまたは複数の仮想デバイスでアプリを実行します。
  5. Projects タブで適切な Apache* Cordova* プラグインを選択して、アプリ設定とビルド設定を指定します。
  6. Build タブでは、アプリストア向けにアプリをパッケージ化します。例えば、Construct 2* ゲームを構築する場合には:
    • Android* プラットフォーム向けに Construct 2* ゲームをエクスポートした場合、Cordova 3.x Hybrid Mobile App Platforms の Crosswalk* for Android* を選択します。
    • Phonegap* プラットフォーム向けに Construct 2* ゲームをエクスポートした場合、Cordova 3.x Hybrid Mobile App Platforms の Crosswalk* for Android* か iOS* を選択します。

Construct 2* GUI またはインテル® XDK 以外の開発ツールで変更されたファイルを更新するには、プロジェクトのディレクトリー・ツリーからインテル® XDK プロジェクトのディレクトリー・ツリー内の対応した場所へ更新されたファイルをコピーします。

Construct 2* プロジェクトについての詳細は下記を参照してください。

  • Construct 2* プロジェクトをエクスポートし、インテル® XDK へインポートしてビルドするには、http://shatter-box.com/documentation/construct-2-crosswalk-for-android/ (英語) を参照してください。
  • Construct 2* プロジェクトをインテル® XDK へインポートするには、Projects タブを使ってアプリ設定を行い、デバイス・エミュレーター (https://software.intel.com/en-us/xdkbook/devemulator) でテストし、Build タブでパッケージ化します。

テンプレート、デモ、またはインポートしたプロジェクトからゲーム・プロジェクトの開発とパッケージ化を行う

ゲーム開発者向けのインテル® XDK の特別機能は次の通りです。

  • ゲーム・アセット・マネージャー (インテル® XDK を開発環境として使う場合)
  • ゲーム関連 API プラグインへのアクセス
  • サポートされているゲームエンジンのいずれかを使用するゲームのサンプルとテンプレート
  • ビルトイン・コード・エディターにおけるゲーム関連の JavaScript API の自動補完ヒント
  • ゲーム以外の一般的なモバイル/Web アプリ開発者も利用できるインテル® XDK の豊富な標準開発機能

インテル® XDK の標準開発機能は次の通りです。

  • 利用可能なサンプルとテンプレートを用いて、Projects タブでインテル® XDK ゲームプロジェクトを作成
  • お好みのコードエディターまたはビルトイン・コード・エディターを使ってアプリを開発し、アプリのプレビューによりソースコードの変更を確認
  • 開発中のアプリを実際のモバイルデバイスまたはエミュレーターでシミュレートされた仮想デバイスで実行して、Chrome Developer Tools* (CDT) デバッガーでデバッグ
  • ローカルデバイス (Develop タブ) やサーバー上のアプリ (Test タブ) とインテル® XDK App Preview アプリを使ってモバイルデバイスでアプリをテスト
  • Build タブでアプリケーション・ストア向けにアプリをパッケージ化

ゲーム・プロジェクトの作成

アプリのコンテナーとしてプロジェクトを作成し、アプリの設定を適用します。インテル® XDK プロジェクトの作成時に、ゲームエンジンとバージョンを指定する必要があります。インテル® XDK のゲーム・プロジェクトを作成するには、次の方法のいずれかを選択します。

  • テンプレートから開始: サポートされているゲームエンジンでゲームアプリを作成するのに使用できるインテル® XDKプロジェクト
  • デモを利用: サポートされているゲームエンジンで作られたゲームアプリ (必要に応じて変更可能)
  • 既存の HTML5 プロジェクトのインポート: 既存の HTML5 ゲームアプリをお持ちの場合、インテル® XDK はプロジェクトを変換する前に、ソースファイルを調査します。
既存の HTML5 プロジェクトのインポートを選択する場合:
  • インポートされたプロジェクトがゲーム・プロジェクトで、インテル® XDK を使ってゲームアプリを開発したい場合、Yesを選びます。Yesを選択すると、Develop タブのゲーム・アセット・マネージャーにゲームアセットが表示されます。
  • インテル® XDK により検出されたゲームエンジンが正しいことを確認します。インテル® XDK はゲーム・アセット・マネージャーでコードスニペットを作成するときに、ここで指定されたバージョンを使います。そのため、バージョンを入力しなかったり、間違って入力すると、コードスニペットが利用できなかったり、無効になる可能性があります。
  • ゲーム・プロジェクトをインテル® XDK の Projects タブでインポートする場合は、「Import an Existing HTML5 Project」(英語) を参照してください。このリリースでサポートされているゲームエンジンのバージョンのリストは、インテル® XDK リリースノート (英語)をご覧ください。

インテル® XDK プロジェクト、プロジェクトのルートおよびソース・ディレクトリー、利用可能なデモサンプルとテンプレートについては、「Using the Projects Tab」(英語) を参照してください。

ゲーム・アセット・マネージャーの概要

インテル® XDK ゲーム・プロジェクト内からゲーム・アセット・ファイルを追加し管理できるように、インテル® XDK は Develp タブ内でゲーム・アセット・マネージャーを提供しています。

ゲーム・アセット・マネージャーには、アクティブ・プロジェクトに関連したゲームアセットのファイルツリーが表示されます。例えば、Cocos2d* ゲーム・デモ・アプリを使用してプロジェクトを作成した場合、Develop タブ の左ペインにゲーム・アセット・マネージャーが表示されます。

ゲーム・アセット・マネージャーのファイルツリーにこのプロジェクトの asset ソース・ディレクトリーにあるアセットが表示されます。ビルトイン・コード・エディターのコードビュー (下記表示) またはゲームアセットのギャラリービューを表示するには、 をクリックします。
アセットファイルをクリックするとレンダリング・ロック・ウィンドウがポップアップし、プレビューが表示されます 。アセットリストは、asset ディレクトリーにファイルが追加/削除されるたびに更新されます。
このペインには、ビルトイン・コード・エディターで使用できるように、プロジェクトに関連するすべてのファイルがツリー形式で表示されます。プロジェクト・ファイル・リストは、プロジェクト・ディレクトリーにファイルやフォルダーが追加/削除されるたびに更新されます。
ポップアップ・プレビュー・ペインには、選択したファイルが描画されます。ペイン下部にあるボタンを使って、このアセットに関連したコードスニペットを表示したり、コピーできます。コードスニペットは、インテル® XDK プロジェクト作成時に指定したゲームエンジンとバージョン専用です。
ビルトイン・コード・エディターのコードビュー (図示) は、ほとんどのファイルで表示されます。また、コードエディターは、ファイルを並べて表示する分割ビューをサポートしています。

アセットを追加するには、プロジェクトのアセット・ソース・ディレクトリーにファイルまたはディレクトリーをコピーするか、ゲーム・アセット・マネージャー・ペインの下部にある Import Assets をクリックして、プロジェクトの asset ディレクトリーを表示します。

ゲームアセットの表示については、「Using the Game Asset Manager in the Intel XDK」(英語) を参照してください。

インテル® XDK の標準開発機能の使用

ゲームアプリ開発者の方々は、すべてのアプリ開発者が利用可能な多くのインテル® XDK 標準開発機能も活用することができます。以下のセクションでは、これらの機能と対応するインテル® XDK のタブをまとめています。インテル® XDK 開発環境についての簡単なチュートリアルは、「Tutorial: Get Started with the Intel XDK」(英語) をご覧ください。

Projects タブでのプラグインとアプリ設定の選択

ゲーム関連の API は、Projects タブで Apache Cordova* プラグインを選択することで使用できます。Cordova 3.x Hybrid Mobile App 設定でプラグインを選択します。Google Play* ゲームサービス や PhoneGap* Admob* などのゲーム関連の API は Featured & Custom Cordova Plugins にも表示されています。Third-party Plugins を使えばローカルのカスタムプラグインをインポートしたり、Web から Admob* by Google* などのカスタム・サードパーティー・プラグインの追加もできます。

コードエディターの使用、変更のプレビュー、アプリケーションの実行

お気に入りのコードエディターまたは Develop タブ内のビルトイン・コード・エディターを使って開発できます。

Develop タブでは、開発しながら実際のモバイルデバイスやブラウザーでライブプレビューが可能です。また WiFi や USB ケーブルによりホストと接続したモバイルデバイスで開発中のアプリを実行したり、サーバー上でアプリの以前のバージョンにアクセスすることもできます。モバイルデバイスで実行/テストするには、インテル® App Preview (https://software.intel.com/en-us/html5/articles/app-preview-overview) と呼ばれるインテル® XDK ツールをテストデバイスにインストールする必要があります。

Develop タブでの Web サービスの管理と統合

インテル® XDK は、Develop タブで Web サービスを管理または統合 (https://software.intel.com/en-us/html5/article/using-the-services-tab) することができます。

デバイス・エミュレーターの使用

デバイス・エミュレーター (https://software.intel.com/en-us/xdkbook/devemulator) を使って仮想デバイスでアプリのテストとデバッグを行うことができます。デバイス・エミュレーターを使用するには、Emulate タブをクリックするか、Develop タブの Live Development Tasks ペインで Run My App > Run in Emulator を選択します。

アプリのデバッグとテスト

デバイス・エミュレーター (https://software.intel.com/en-us/xdkbook/devemulator) 内では、仮想デバイスでアプリのテストとデバッグを行うことができます。実際のモバイルデバイスでアプリを実行してデバッグすることもできます。デバイス・エミュレーターを使用する場合も、(Debug タブなどで) モバイルデバイスを使用する場合も、標準の Chrome Development Tools* (CDT) デバッガーが使用されます。

インテル® XDK App Preview (https://software.intel.com/en-us/html5/articles/app-preview-overview) アプリを利用して、WiFi や USB ケーブルで接続したローカルデバイス (Develop タブ) やサーバー上のアプリ (Test タブ)を使ってモバイルデバイスでアプリをテストできます。

アプリケーション・ストア向けにアプリをパッケージ化

Build タブを使ってアプリケーション・ストア向けにアプリをパッケージ化します。Cordova 3.x Hybrid Mobile Apps でプラットフォームを選んでパッケージ化する前に、Projects タブで各 OS プラットフォームのプラグインやアプリ設定、権限をご確認ください。

リソース (すべて英語)

* その他の社名、製品名などは、一般に各社の表示、商標または登録商標です。
サポートフォーラム (https://forums.html5dev-software.intel.com/) (英語)
このページに関するフィードバックを送信 (英語)

関連記事