Google+ もご覧ください
ユーザーアイコン

ピックアップ

[PR] Herlock - OpenGL×JavaScriptでiOS/Android対応ゲームをワンソース開発!

[PR] Herlock - OpenGL×JavaScriptでiOS/Android対応ゲームをワンソース開発!

iOS/Androidアプリをワンソースで。何と甘美な響きでしょう。過去様々なプロダクトがその道に挑んできましたが、現在まで生き残り、かつシェアを獲得しているのはごくわずかです。

有名なところではTitanium、PhoneGap(Cordova)があり、3D/2DゲームではUnityも有名です。TitaniumやPhoneGapの場合Webの技術がそのまま活かせるのが利点なのですが、その際に常に言われるのがJavaScriptやWebViewを使っているために速度面でのデメリットが大きいということです。ハードウェアも進化していますがそれは否めません。

そんな中、次なる選択肢が登場しています。それが今回紹介するHerlockです。開発言語としてはJavaScriptを使いつつも、WebViewを使わずに実行されるので速度面も申し分ありません。ゲーム分野など高い反応性が求められる分野でも利用できます。

今回はそんなHerlockの魅力と実際にチュートリアルアプリを試すことでその実力をお見せしたいと思います。

押さえておきたいHerlock、3つの特徴

まずはHerlockについてです。開発はソニックムーブ社(新宿区)が行っており、純国産のプラットフォームになります。特徴として、以下の3つがあります。

  • JavaScriptで書ける
  • Webブラウザでアプリ開発
  • iOS/Androidアプリをワンソースで

いずれのキーワードも興味深いのではないでしょうか。例えばあんぐりぃばばぁ(怒)があります。これがJavaScriptで作られているとはそうそう感じられないはずです。

JavaScript + OpenGLで高パフォーマンスを実現!

HerlockはJavaScriptで記述してOpenGLを直接実行する仕組みになっています。それによって高いパフォーマンスを誇っています。APIはActionScript3に似せて作られており、Flasherであれば有名なCreateJSをそのまま使えます(間もなく公開予定とのこと!)。Flashの表現力を活かした高品質なアニメーションが素早く実行できます。

JavaScriptを使うということは、これまでのWebで培ってきたナレッジがそのまま活かせるということです。さらにWebViewを使いませんのでHTMLでデザインするといった作業はありません。同じHTML5といってデバイスごとに微妙に表示が崩れて大変といった苦労はありません。

Webブラウザ上での開発、コンパイルレス!

HerlockはWebベースのIDEを提供しています。プロジェクトの作成からコンパイル、実機テスト、アプリストア向けのコンパイルまで全てHerlock上で行えるのが特徴です。

WebIDE
WebIDE

特に実機テストではコンパイルも必要なくソースコードを変更してテスト用のビューワーアプリで読み込み直すだけで反映されます。後述しますが、このコンパイルレスというのはとても良いです。WebIDE上で編集した内容がすぐに反映されますのでコンパイルして実機転送して確認といった良くある面倒な作業が大幅に短縮されます!

iOS/Androidアプリがワンソース

HerlockのWeb IDEで開発されたアプリはワンソースでiOS/Androidの両デバイスで動作します。さらにネイティブAPIとも連携ができますので、カメラや加速度、ファイルアクセス、位置情報と言ったネイティブ機能を活用できます。

ワンソースで作る場合、他のフレームワークでは速度面を犠牲にしてきたかと思います。しかしHerlockであれば速度面を十分に考慮した上でワンソースによる開発を可能にしています。さらにネイティブAPIを使うことでゲーム以外の分野でもHerlockが利用できます

下のアプリねこ穴(App Store/Google Play)はワンソースからiOS/Androidに対応したゲームとなっています。iOS 6/Android 2.3以上と十分なシェアのOSに対応してくれるのもメリットの一つでしょう。

作り込めばここまでできる!

先に挙げた二つのアプリはタップとスワイプをメイン操作にしたシンプルなゲームですが、もっと本格的なゲームとしてそれゆけ!ヤンキッキーがあります。ガチャやキャラクターパワーアップの仕組みもあって長い時間やり込める要素が詰まっています。

ここまでできればゲームアプリとしては十分ではないでしょうか。しかもそれがJavaScriptで、さらにiOS/Androidの両プラットフォームに対応しているとなれば試してみたくなりますよね?

さっそく試してみる!

さくっと登録

Herlockは現在ベータ版が無料提供中です。ユーザ登録は簡単で、ユーザ名、メールアドレス、パスワードだけではじめられます。さらにOAuthを使った場合はFacebook/Google/Twitter/GitHub/BitBucketのアカウントを使って登録が行えます。

チュートリアルですぐに試してみよう

ログインすると最初に表示されるのがダッシュボードです。ここではプロジェクトの作成や開発の流れが確認できます。今回はチュートリアルとして登録されているアプリをベースにします。

ダッシュボード
ダッシュボード

タッチで動かすの横にある作ってみるをクリックします。

新規プロジェクト
新規プロジェクト

そうすると新規プロジェクトに必要な情報を入力する画面になります。プロジェクト名は適当に、テンプレートはTouchSampleのままとして作成ボタンを押しましょう。

プロジェクト編集画面
プロジェクト編集画面

ボタンを押した後に表示されるのはプロジェクトの編集画面です。ここまでほんの数分です。

Web IDEの使い方

HerlockのWeb IDEは2ペインの構成になっています。左側がファイルブラウザ、右側がファイルエディタです。左側のファイルブラウザでファイルをクリックするとエディタ部で開きます。フォルダは開閉できます。

ファイルエディタはコードハイライターが入っています。関数の折り畳みもできますので効率的に編集できそうです。

画像はプレビューできます
画像はプレビューできます

何はともあれ実機で確認してみる

まだプロジェクトを開いただけで編集などは行っていませんが、実はすでに実機で試せる状態になっています。iOS/Androidそれぞれにデバッグ用のビューワーアプリが公開されていますのでそれをインストールしましょう。

インストールしたら起動し、先ほど新規登録したHerlockアカウントでログインしましょう。

iOSアプリ
iOSアプリ

ログイン後
ログイン後

ログインすると先ほど作成したプロジェクトがリストアップされているのでタップします。プロジェクトが起動したら実際試してみましょう。タップするとその位置にラベルが動き、その座標が表示されるはずです。

実行画面
実行画面

修正してすぐに結果を確認する!

現在赤い文字で出ている位置情報を変えてみましょう。ff0000となっている部分(15行目)を00ff00としてみます。編集したら保存します。Mac OSXからであればコマンド+Sで保存できます。

修正
修正

保存したらビューワーアプリでリロードします。手順は、まず画面上に出ている矢印をスワイプしてさらにその下にある矢印をスワイプします。その中に出てきたメニューから更新ボタンをタップします。

リロード
リロード

そうするともう文字色が変わっているのが分かるかと思います。Herlock上での修正が瞬時に反映されるのです。これは実際に試すと軽く感動的ですらあります。

その場ですぐに反映されている!
その場ですぐに反映されている!

JavaScriptらしくデバッグ

開発である以上デバッグは必ず必要です。Herlockでは専用のデバッガーを用意しています。といってもWebブラウザでよく使っているDevToolsに似ています。まず最低条件として実機とデスクトップが同じLAN内にいるものとします。その状態で実機のIPアドレス(ビューワーアプリの矢印をスワイプすると確認できます)をHerlockのコンソールの設定に入力します。これで準備は完了です。

アプリの上にIPアドレスが表示されています
アプリの上にIPアドレスが表示されています

コンソール設定を行います
コンソール設定を行います

後はconsole.logが使えますので必要なところにデバッグメッセージを埋め込んでいくだけです。console.errorconsole.infoも使えます。その他Androidであればスクリプトのデバッグ、プロファイルなどができます。

console.logを使ってデバッグ出力
console.logを使ってデバッグ出力

リモートビルドに挑戦!

さて後は実際にビルドしてダウンロードするのみです。今回はAndroid版をデバッグビルドしました。プロジェクトデバッグメニューから実行できます。

デバッグビルド
デバッグビルド

なおiOSの場合は証明書の設定が必要になります。

生成されたapkファイルをダウンロードし、Androidで実行すれば確かに普通に利用できます!

実機実行
実機実行

まとめ

いかがでしょうか。Herlockの面白さを感じてもらえたでしょうか。JavaScriptだけで開発できる点、さらにその動きの高速さ、デバッグの容易さが分かったかと思います。興味を持たれたらすぐに登録、チュートリアルを試せますのでぜひHerlockのサイトに行ってみてください!

Herlockの公式サイトでは多数のチュートリアルの他、ドキュメントもありますのでまずは登録して色々触ってみると良いでしょう。OpenGLというと敷居が高く感じますが、それらをHerlockはラッピングしていますので複雑な印象はまったくなくなるはずです!

Herlock - JavaScriptクロスプラットフォームゲームエンジン

Cover

記事をリクエストする

関連記事

コメント