Unity vs HTML5

アドベンチャーゲームエンジンの開発手法

及び、２つの環境のメリットとデメリット

 

2014/12/8  シケモクMK

こんにちは。

自己紹介

Nagatani Hiroshi

Twitter： @shikemokumk

 

プログラマー

 

PHP   Java  C#   Perl  

JavaScript HTML5 

 

最近、Unity にも足を突っ込む

 

 

主に作ってるもの

使用例

 

 

http://tyrano.jp/home/example

Tyrano Builder

ドラッグ＆ドロップで

簡単にアドベンチャーゲームが作れるツール

 

ボタンひとつで

デスクトップ・スマホ・ブラウザゲームに対応

 

無料

ティラノビルダー新画面

JOKER

Unityでアドベンチャーゲームを作るためのフレームワーク

 

MMDや３Dを使った

アドベンチャーゲームも対応

 

OccurasLift にも対応予定

 

無料

 

JOKERの画面

先週リリースJOKER製のゲーム

ステッカー作りすぎた（白目

 

その他は

http://strikeworks.jp

ここから本題

本日のテーマ

HTML5とUnity向けに

マルチプラットフォーム対応のゲームエンジンを作った経験から

 

マルチプラットフォーム化の手法について

UnityとHTML５を横断的に比較と検証する

 

そこから、UnityとHTML5の適した場面について

検討してみたい。

アジェンダ

 

①　前置き

　　→ アドベンチャーゲーム？　マルチプラットフォーム？

②　ADVゲームエンジンの動作の仕組み

        → ゲームエンジンの動作原理について解説

③　マルチプラットフォームへのリリース方法

　　→各環境へのビルド作成方法についてHTML5とUnity全部解説

④　Unity vs HTML5  まとめ

　　→具体的な事例から有利なケースを検討する

 

 

①　前置き

　　→ アドベンチャーゲーム？　マルチプラットフォーム？

②　ADVゲームエンジンの動作の仕組み

        → ゲームエンジンの動作原理について解説

③　マルチプラットフォームへのリリース方法

　　→各環境へのビルド作成方法についてHTML5とUnity全部解説

④　Unity vs HTML5  まとめ

　　→具体的な事例から有利なケースを検討する

 

アドベンチャーゲームって何？

呼び方

アドベンチャーゲーム

ノベルゲーム

ADV

サウンドノベル

ビジュアルノベル

 

 

２つのアドベンチャー制作エンジンを作った

なんで

HTML5 ?

UNITY？

 

 

マルチプラットフォーム対応

させたかったから

Write once, run anywhere

（一度書けばどこでも動く）

マルチプラットフォーム

パソコン（Windows Mac)

スマートフォンアプリ（iphone Android）

ブラウザゲーム

スマートフォンブラウザ

 

すべて１つのソースで動かす

マルチプラットフォームを

実現するための

主要な選択肢

or

どっちでも作れそうなケース

 

 

 

　どっち使えばいいの？

どっちでもええんちゃう？

その考え方は

死亡フラグです

よくある会話

死亡フラグです

一見、どちらでもよいパターンにみられる
アドベンチャーゲーム（シンプルな２Dゲーム）

それぞれ、強み・弱みがはっきり存在する。

そこを十分把握して選択しないと詰む可能性あり

next

 

①　前置き

　　→ アドベンチャーゲーム？　マルチプラットフォーム？

②　ADVゲームエンジンの動作の仕組み

        → ゲームエンジンの動作原理について解説

③　マルチプラットフォームへのリリース方法

　　→各環境へのビルド作成方法についてHTML5とUnity全部解説

④　Unity vs HTML5  まとめ

　　→具体的な事例から有利なケースを検討する

 

ティラノスクリプトでは、

どうやってゲームを作るのか？

スクリプトの例　

吾輩は猫である[r]

名前はまだない[p]

[bg storage="sky.jpg"]

どこで生れたかとんと見当けんとうがつかぬ[p]

吉里吉里/KAG の構文を継承

テキストと特別な意味を持つ

タグを組み合わせてゲームを作る

標準搭載のタグ数

約１００種類

[playbgm] 　BGMの再生

[if][else]     　分岐

[movie]      　動画の再生

[wait]         　ゲームを一定時間停止する

[edit]         　 テキストボックス等の入力部品

[macro]   　  命令を組み合わせてサブルーチンを作成

 

etc ... 

動作順序

スクリプトファイル

そういう仕組みで動くものを

どうやってマルチプラットフォーム化していくか。

 

 

Next

 

①　前置き

　　→ アドベンチャーゲーム？　マルチプラットフォーム？

②　ADVゲームエンジンの動作の仕組み

        → ゲームエンジンの動作原理について解説

③　マルチプラットフォームへのリリース方法

　　→各環境へのビルド作成方法についてHTML5とUnity全部解説

④　Unity vs HTML5  まとめ

　　→具体的な事例から有利なケースを検討する

 

まずは

で

スマホアプリ化

PCアプリ化

ブラウザゲーム化

スマホアプリ化

phonegapとは

HTML5を

ネイティブアプリに変換できるツール

 

iphone 

andoroid

Amazon FireOS

WindowsPhone

など

phonegap API

音楽　カメラ　振動　ストレージ　等

ネイティブ特有の機能を操作する事ができる

 

例えば

音は HTML5のAudioを使うとスマホブラウザだと、同時に鳴らせられない場合がある

 

ティラノでは

ブラウザで動作する時 Audio FLASH

アプリ化した時は phonegap Media API 

のような実装をしている

PCアプリ化

NodeWebKitとは

ざっくり

 

Webをデスクトップアプリとして動かせる

＋

NodeJSが動く

＋

GUIへの制御APIが用意されている

ティラノード

ティラノでは

HTML5ゲームをボタンひとつで

パッケージ化できるツールがある

 

（NodeWebKit自体の使い方はシンプル）

ブラウザゲーム化

HTML5製のゲームを

マルチに展開するための環境はかなり整備されてきつつある

HTML5まとめ

Next

で

スマホアプリ化

PCアプリ化

ブラウザゲーム化

スマホアプリ化

簡単！

アプリ設定もUnityで設定できる

画面の表示方向（左右上下）

アイコン

スプラッシュスクリーン　

等

Andoroid は Eclipseをインストールしなくても

GooglePlayでの公開まで可能！！

PCアプリ化

簡単！

これも色々設定できる

 

起動時の画面サイズ

フルスクリーン設定

等

ブラウザゲーム化

これも簡単！

 

HTMLファイルとして出力される

 

それを参考にして自サイトなどへの埋め込みは必要

 

 

Unityはビルドを選択するだけ！

 

ワンポイント

Unityはビルド環境によっては

 使用するライブラリや

処理を分ける必要がある場合

 

→２つの解決方法がある

 

 

 

 

①動作環境を取得して分岐

#if UNITY_IPHONE
      Debug.Log("iPhone");
#endif

②プラットフォーム依存コンパイル

if (Application.platform == RuntimePlatform.WindowsWebPlayer){
​　Debug.log("WebPlayer");

}

 

マルチプラットフォーム化　まとめ

・各環境への出力はUnityの方がシンプルで簡単

　PhoneGapのほうが若干、複雑と言えなくもない。

 

ただし、HTML5とUnity双方とも

ビルドによって、コードを使い分ける必要はある。

 

ティラノやジョーカーでは

ユーザが意識しなくても自動的に処理を変換するように

作っている。

 

next

 

①　前置き

　　→ アドベンチャーゲーム？　マルチプラットフォーム？

②　ADVゲームエンジンの動作の仕組み

        → ゲームエンジンの動作原理について解説

③　マルチプラットフォームへのリリース方法

　　→各環境へのビルド作成方法についてHTML5とUnity全部解説

④　Unity vs HTML5  まとめ

　　→具体的な事例から有利なケースを検討する

 

具体的なケースで考えてみる

どっち？！

理由

ブラウザゲームの場合

Unityは大きなハンデ

 

 

 

プラグインがインストールされていない場合の表示

スマホブラウザ

Unity はスマホブラウザから閲覧してもプレイできない

 

TwitterやSNSからの流入を考えると

スマホでアクセスしてプレイできないのは致命的

HTML5

リンクを踏むだけで、ゲームを開始させる事ができる

 

とりあえず、遊んでもらえる率は圧倒的に有利

即ゲーム開始

次のケース

どっち？！

理由

HTML5の弱点はアニメーションだと感じている

 

最近のアニメーション制作ツールは

HTML5　Unity の両方の形式に書き出せる場合が多い。

 

しかし

 

Canvasアニメーションは

実行環境によってパフォーマンスに大きな開きがある

 

 

 

課題はアンドロイド

PC向けであれば、Canvas出力されたHTML5も動作に大きな問題はない。

 

スマホの場合は

対応端末において、問題なく再生できるアニメーションの数やFPSを検証しておく必要がある

 

アニメーションツールの出力する

HTML5向けのライブラリにも左右される

 

 

まとめると

キーワードが見えてくる

HTML5が輝くキーワード

「ブラウザゲーム」

「ゲーム起動の敷居の低さ」

「動作端末数」

「無料」

「資産の活用（HTML&CSS3&JavaScript）」

「Web親和性」

Unityが輝くキーワード

「アニメーション」

「アクション」

「動作速度」

「3Dグラフィックス」

「シンプルなビルド」

つまり

どっちが優勢といえる状態になっていない

 

要件を見極めて

ある程度の、トレードオフが発生する

 

今回の内容が少しでも参考になれば幸いです。

 

 

 

今後

HTML5　

　WebGL により 3D機能強化

　iOS 8 から WebGLのサポート開始

 

 

Unity 

　2Dゲーム用の本格サポート開始

    Unity5 から WebGL向けの出力機能が

　提供される模様

 

 

 

 

 

個人的にはHTML5＆WebGLに期待してます！

fin

ご清聴ありがとうございました。