Tiny Unity (Tiny Mode) を使ってみる

# 注意

この記事は2018/12/5時点の情報です。
Unity`2018.3.0.b12`、Tiny Mode`0.13.2`に基づいて記載しています。
Tiny Modeは現在プレビュー版のため、この情報は日が経つにつれ古くなる可能性が高いです。


# Tiny Unity について

※この章は前置きが長いので、すぐに使いたい方は [#使ってみる](#使ってみる) に飛んでください。


## Tiny Unity (Tiny Mode) って何

ドキュメント（0.13）
https://docs.unity3d.com/Packages/com.unity.tiny@0.13/manual/index.html

ブログ
https://blogs.unity3d.com/jp/2018/12/05/project-tiny-preview-package-is-here/

Solution (Instant 2D: Games & Playable Ads)
https://unity.com/solutions/instant-games/2d-games-and-playables

コアランタイムのサイズが72KBと言われているUnityの軽量版です。
ドキュメントには`Tiny Mode`とあるので、以降は`Tiny Mode`と記載します。

現在はTiny ModeではHTML5出力しかできません。
上記のSolutionのページの下の方にQAがあるのですが、そこに以下の記述があります。

> **What platforms are supported?**
Project Tiny supports HTML5 targets. It support 2D WebGL and 2D Canvas rendering targets with the option to default to WebGL and fall back to 2D Canvas. The engine has been designed to be multiplatform. Native runtime support is planned for 2019.

これを見ると、まずはHTML5（WebGL、Canvas）に注力して開発し、その後ネイティブランタイムもサポートする予定のようです。


## Tiny Modeの用途

上記のドキュメントでは以下の記述があります。

> Your decision on whether to use Tiny Mode for your project will depend very much on the type of game or app you're making, and the characteristics and limitations of the platforms that you want to target. If you're making a game or app for consoles, MacOS or Windows, VR, or as a standalone smartphone release, Tiny Mode is probably not the best choice. However, if you want to create messenger games, ads, or other HTML5 projects with a very small file size and memory footprint, Tiny Mode is the right choice.

また、SolutionページのQAには以下の記述があります
> **What kinds of projects is Project Tiny best suited for?**
Right now, 2D messaging or social app games and playable ads. The initial features are focused on these first two main use cases.

> **Can I use Project Tiny for other use cases outside of those two use cases?**
Yes, right now Project Tiny only has the ability to export to a generic web target. While we focus our efforts on our initial two use cases, the result is that the majority of the features we create will benefit a much wider audiences.


諸々の情報を基に考えると、初期の機能では、**[インスタントゲーム](https://unity.com/ja/solutions/insutantokemu)**と呼ぶカテゴリをターゲットにしているようです。
将来的にTiny Modeの機能は増えていくようなので、シンプルなゲームであればTiny Modeで作れるようになっていくのかもしれません。

なお、[インスタントゲーム](https://unity.com/ja/solutions/insutantokemu)とは以下のようなゲームのことです

* メッセージングゲーム
* インタラクティブ広告（プレイアブル広告）
* HTML5ゲーム


メッセンジングゲーム、インタラクティブ広告については少し説明しておきます。

### メッセージングゲーム

[Facebook Messenger のインスタントゲーム](https://developers.facebook.com/docs/games/instant-games?locale=ja_JP)等の、メッセージングアプリ内でプレイできるゲームのことです。
Lineも[LINE QUICK GAME](https://lqg.game.line.me)という機能を始めました。
中国で代表的なメッセンジャーアプリのWeChatも、**WeChat Mini Game**という機能を実装しており、
WeChat Mini Gameは[ユーザ数が3億1000万](https://japan.cnet.com/release/30282667/)になるそうです。

> [余談] WeChat Mini Gameについて
https://www.youtube.com/watch?v=Y_sUSlf428I
WeChat Mini Gameについては、この動画で開発周りの解説がされていました。
WebView実行ではなく、JavaScript Bindingでレンダリング等はネイティブで実行しているようです。
使用されるゲームエンジンはCocosが47%、Layaが29%ということで、中国発のゲームエンジンが大半を占めています。


### インタラクティブ広告

ゲームの場合、プレイアブル広告と言われることが多く、モバイル広告上で実際にゲームをプレイできる広告です。
実際に見たことのある方も多いかもしれませんが、これらの広告は通常HTML5で実装されています。
インタラクティブ広告は最近では主要な広告会社はほとんど対応しており、今後さらに増えていくはずです。

UnityはUnityAdsという広告サービスを持っているため、UnityAdsでプレイアブル広告を出稿する際に
Tiny Modeを使うことを想定しているのかもしれません。


## Tiny Modeの制限

現状は以下の制限があるようです。

* 現在は2Dのみ。今後3DやARも対応予定
* Entity Component System (ECS) で実装必須
* TypeScriptのみ。今後C#に移行予定。

C#対応についてはブログの方で以下の記載があります。

> It is important to note that we will be removing Typescript once support for C# is ready.

TypeScriptはあくまで一時的なもので、C#が対応されたらTypeScriptは削除する予定のようです。



# 使ってみる

## 1. Unityインストール

[Changelog](https://docs.unity3d.com/Packages/com.unity.tiny@0.13/changelog/CHANGELOG.html)を見ると、Tiny Mode`0.13`では、`Unity 2018.3.0.b12`以上が必要なようなので入れます。
Tiny Modeのバージョンが上がるにつれ、対応するUnityのバージョンも上がっていくので、基本的には最新のベータ版を入れるのが良いかと思います。

Unityをインストールしたら、プロジェクトを作成してください。
作成したプロジェクトのPlayer Settingsの`Scripting Runtime Version` の設定値を確認し、
もし`.Net 4.x Equivalent`になっていなかったら変更します。
ただ、`2018.3.0.b12`ではデフォルトでそうなっているようです。


## 2. Tiny Mode パッケージのインストール

Tiny Mode は PackageManagerでインストールするため、Unityのメニューから `Window -> PackageManager` を開きます。

デフォルトの状態では `Tiny Mode` は選択できないため、`Advancded -> Show preview packages` を選択します。

<img width="400" alt="スクリーンショット 2018-12-05 22.19.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/19872/b8be66ae-148c-e9c8-35b8-7edc513b0077.png">

するとPreview版のパッケージが表示されるようになるので、`Tiny Mode`を選択し、`Install`ボタンを押します。

<img width="400" alt="スクリーンショット 2018-12-05 22.21.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/19872/90d0e682-8a2c-2790-b4f5-07d363c360ca.png">

インストールが完了すると、Unity Editorのメニューに、`Tiny`という項目が追加されます。

<img width="612" alt="スクリーンショット 2018-12-05 22.28.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/19872/768dc022-03a7-f07d-4c84-eba9a1bfadeb.png">


## 3. サンプルプロジェクトの実行

メニューの`Tiny`から、`Import Samples`を選択し、サンプルプロジェクトをインポートしてみましょう。

<img width="154" alt="スクリーンショット 2018-12-05 22.30.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/19872/e25fe7d9-5b1b-a374-0760-94f91c07a1a1.png">

複数のプロジェクトがインポートされます。

<img width="165" alt="スクリーンショット 2018-12-05 22.32.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/19872/f51e186b-6f51-f489-943d-ded0bb89890a.png">

どれでも良いですが、ここでは `FlyingYolk`というプロジェクトを実行してみます。
`FlyingYolk/FlyingYolk.utproject` を開き、UnityEditorのPlayボタンを押します。
すると、Gameビューで実行される....かと思いきや、ブラウザが立ち上がり以下のようなHTML5ゲームが実行されます。

<img width="300" alt="スクリーンショット 2018-12-05 22.37.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/19872/bd0a6d95-b00c-3538-a90e-eb38625b9ffc.png">

UnityのGameビューには以下のようにQRコードとローカルIPのURLが表示されており、
スマートフォン等で読み込んでアクセスすることができるようになっています。

<img width="250" alt="スクリーンショット 2018-12-05 22.41.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/19872/9692b021-6718-8206-7ff1-d66898ade56a.png">

将来的にはGameビューで実行できるようになるのかもしれませんが、現状ではこのように
HTTPサーバを立ててブラウザで実行するという方式になっています。


## 4. ビルドする

実行することはできたので、次はビルドしてみたいと思います。
しかし、TinyModeは通常のプラットフォーム毎のビルドはできないようです。
メニューに`File -> Tiny -> Build`というものがあり、見た感じこれでビルドするのだと思われます。

<img width="300" alt="スクリーンショット 2018-12-05 22.50.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/19872/15af6e38-b639-5421-e78f-f7c902f7599c.png">

実行してみると、どうもこの`Build`は先ほどのPlayボタンと同じ処理をしているように見えます。
Playも結局HTML出力をしてブラウザで実行しているので、当然と言えば当然ですが。

さて、どこかにHTML/JavaScriptファイル等が出力されているはずです。
ログを見ると `<プロジェクト>/FlyingYolk/html5/development/bin` というパスのようです。
このパスを見ると、`index.html`や.jsファイルがあるので、`index.html`を実行すればいけそうです。

HTTPサーバで実行した方が良いので、`bin`ディレクトリでHTTPサーバを立ち上げます。
pythonの`SimpleHTTPServer`とかが便利です。

```
python -m SimpleHTTPServer 8000
```

サーバを立ち上げたら、ブラウザで実行してみます。8000ポートで立ち上げているので、
URLは `http:://localhost:8000` です。

実行するとエラーが出てしまいました。以下のファイルが見つからないようです。

`~project/TinyExport/FlyingYolk/html5/development/ScriptAssemblies/tsc-emit.js`

`~project`というパスが謎ですが、Unityプロジェクトのパスが割り当てられれば良さそうなので、
`bin`ディレクトリで以下のコマンドを実行し、シンボリックリンクを張ってみました。

```
ln -s ../../../../../ ~project
```

もう一度ブラウザで実行すると表示されました。


# 感想

初期段階のTiny Modeでは、HTML5用という感じで機能も少ないため、使う用途はかなり限られそうです。
しかし将来的には機能が増えていき、ネイティブ対応もされる予定ということなので、
その頃になるとだいぶ使い道も増えていくのではないかと思われます。