UnityちゃんをUnityで描画して、WebPlayerでPublishする


はじめに
======

先日[Unityちゃん](http://unity-chan.com/)が公開されました。

<img src="https://qiita-image-store.s3.amazonaws.com/0/11124/c4ff57db-eb62-784f-1f4d-a552c7558ade.png" width="200">

Unityちゃんはライセンス的にも自由度が高く、色々なアニメーションも付属しています。こういう高性能なデータが無料で使えるというのは日曜ゲームプログラマには非常に嬉しいものです。今回は、UnityちゃんをUnity内で表示して、Web Playerで表示する方法についてまとめてみようと思います。


各Version
------------

* Mac OSX: 10.9.2
	* Windowsでもほとんど同じようにできると思います。
* Unity: 4.3.4f1
* UnityChan: 1.0.0


環境とデータの準備
============

まず、Unity本体とUnityちゃんのデータをダウンロードしましょう。

* Unity本体: http://japan.unity3d.com/unity/download/
* Unityちゃん: http://unity-chan.com/download/guideline.html

Unity本体のInstall
------------------

Downloadしてきた dmg ファイルを実行して、普通にInstallしましょう。

Unityちゃん
-------------

Unityちゃんのデータは `UnityChan.unitypackage` というファイルでDLされていると思います。
これは後で使うのでとっておいてください。

Unity の Project作成
=========

* Unityを実行します
* [File] -> [New Project] を選びます

以下のようなダイアログがでるので、適当に保存するディレクトリとProject名を決めて[Create Project] を押しましょう。

![Project_Wizard__4_3_4f1__と_Scene2_unity_-_uchan_-_Web_Player.png](https://qiita-image-store.s3.amazonaws.com/0/11124/7b6c37f8-0538-f753-537a-c8433d68c57b.png "Project_Wizard__4_3_4f1__と_Scene2_unity_-_uchan_-_Web_Player.png")

すると、Projectが作成され以下の様な画面になります。

![貼り付けた画像_2014_04_14_22_40.png](https://qiita-image-store.s3.amazonaws.com/0/11124/41a7b4cb-e112-43de-c184-07acaa805527.png "貼り付けた画像_2014_04_14_22_40.png")


UnityちゃんのImport
==============

次に、先ほどDownloadした `UnityChan.unitypackage` を UnityのWindowにドラッグアンドドロップします。ちょっと待つと、

![Importing_package_と_Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/dd53e8c1-ee55-a8c1-c08e-3ed1011f662c.png "Importing_package_と_Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")

みたいなダイアログが表示されるので、右下の [import] ボタンを押します。
下記のような表示がされ、しばらく待つと、Importが完了します。
![aa.png](https://qiita-image-store.s3.amazonaws.com/0/11124/5b1ca28c-ae76-b794-c715-05aa572824ac.png "aa.png")

Importが完了すると、 `Assets` フォルダのところに `Standard Assets`と`UnityChan`というのが増えています。

![bb.png](https://qiita-image-store.s3.amazonaws.com/0/11124/8e09a0e3-3deb-c4c9-24e8-5fd77ab48a27.png "bb.png")

Unityちゃんの配置
============

`Assets/UnityChan/Prefabs` というフォルダを開くと Unityちゃんがおわします。

![Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/6d1d7a4c-e64d-4b4d-affa-0178c17f0ea1.png "Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")

このUnityちゃんをそのまま画面の真ん中にD&Dしましょう。

![Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/6e0e1124-f8e4-ec5b-0ea3-6b7c890fc722.png "Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")

とりあえず配置されたと思います。

Projectの保存
==========

`CTRL`+`s` で現在のScene（一つの場面のようなもの）を保存できます。
`demo1` という名前で保存しておきます。

Unityの基本的な操作
=========

ここで簡単にMac版のUnityの3D画面の操作について触れておきます。

視点の操作
---------

* 視点の回転: ALT + 左ドラッグ
* 視点の平行移動: ALT + COMMAND + 左ドラッグ
* Zoom： マウスのホイールをくるくるする
* Focus?： ある物体を選んで `f` を押すとその物体のところに視点が移動します。結構便利。

これくらい覚えていると迷子にならないと思います。

物体の操作
------

まず、操作したい物体を選択します。
物体の操作は、下図のアイコンが関係します。
左から `q` `w` `e` `r` のキーボードショートカットが割り当てられています。

![Menubar_と_Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/3bc82017-53ac-bc5e-91d1-d44bb6c5ca6e.png "Menubar_と_Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")


### 移動
`w`キーか、左から2つ目の十字アイコンをクリックする

![Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/059aa7d0-a97e-86e5-e813-22fcb7ab2d1c.png "Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")
このような矢印が出るので、それを掴んでドラッグします。

ちなみに、RGB(赤、緑、青）がそれぞれXYZ軸に対応しています。

または、Inspectorの `Position`の値を直接入力してもOKです。

![Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/256e3c0d-cb6e-d8b4-706f-f7053ff6d28e.png "Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")

### 回転

`e`キーか、左から3つ目のアイコンをクリックします。
![Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/0b92e678-a91b-9a01-23fe-a337bda320a4.png "Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")
こんな画面になるのでドラッグすると回転します。
または、Inspectorの`Rotation`に値を入れてもOKです。

### サイズ変更

`r`キーか、一番右のアイコンをクリックします。

![Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/0b571300-0d1c-d612-f553-007f30cc09ea.png "Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")

こんな画面になるので、ドラッグするとその方向に伸びます。
または、Inspectorの`Scale`に値を入れてもOKです。

カメラと光源の配置
=========

大きな画面の「Game」というTabに切り替えると、実際にゲームを開始したときの表示（カメラ視点の表示）がされます。

![Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/d9e5cf5d-3766-ab52-800c-254fd175358f.png "Untitled_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")

このように今は真っ暗ですし、なんだか遠いのでそこを調整します。

カメラの位置調整
------------

左上の`Main Camera`を選択します。

![demo1_unity_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/6178bde8-292d-9da9-5aee-788dcebd76d8.png "demo1_unity_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")

右上のInspectorのPositionを (x,y,z)=(0,1,-2) くらいにします。
もちろん好みで変えてもOKです。

Unityちゃんの位置調整
-------------

同様に左上のHierarchyで`unitychan`を選択します。
Positionを(0,0,0)、Rotationを(0,180,0)とします。 Y軸を180度回転させないと、カメラが手前にあって、UnityChanが奥を向いているので背中が写ってしまいます。

![demo1_unity_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/96127d42-11d4-9583-d4c1-51999932068a.png "demo1_unity_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")


光源の設置
-----------

[GameObject] -> [Create Other] -> [Directional Light]を選びます。
![GameObject_と_Menubar.png](https://qiita-image-store.s3.amazonaws.com/0/11124/1301c905-a05f-3cf8-0be0-ee5d11efc06a.png "GameObject_と_Menubar.png")

Directional Lightは太陽の光みたいなもので、位置を関係なく方向のみが影響します。
これも適当で良いのですが、

Rotation=(30,0,0) くらいにし、 Intensity=1 くらいにしておきます。

もう一度 「Game」Tabに切り替えると今度はちゃんと表示されているのではないでしょうか。

![demo1_unity_-_RoadRunner_-_Web_Player.png](https://qiita-image-store.s3.amazonaws.com/0/11124/6ae038e1-b851-538f-32ec-18210ce69a4f.png "demo1_unity_-_RoadRunner_-_Web_Player.png")

画面上部の三角形をクリックすると、Gameがスタートします。
と言っても、今は何も動きが定義されていないので何も起こらないですが。



Web Player用にPublish
===========

[File] -> [Build Settings] を選びます。

すると、以下の様なダイアログが表示されるので、「Web Player」を選択して、[Build And Run]をクリックします。

![Build_Settings_と_demo1_unity_-_RoadRunner_-_PC__Mac___Linux_Standalone.png](https://qiita-image-store.s3.amazonaws.com/0/11124/cb71ea0f-5efb-90db-9aec-d61c3f2c2d5c.png "Build_Settings_と_demo1_unity_-_RoadRunner_-_PC__Mac___Linux_Standalone.png")

ファイル名を聞かれるので、`demo1` とでもしておきます。
しばらくすると、Webブラウザが開いて、

![Unity_Web_Player___RoadRunner.png](https://qiita-image-store.s3.amazonaws.com/0/11124/2ca87f4b-f6aa-4976-8646-16d80f1fabd3.png "Unity_Web_Player___RoadRunner.png")

のような画面が表示されると思います。

付属のデモ表示
==========

実はこんなことをしなくても、もっと簡単に表示することができます。

`UnityChan/Scenes/ARPoseTest` というのをダブルクリックしてみましょう。

![demo1_unity_-_RoadRunner_-_Web_Player.png](https://qiita-image-store.s3.amazonaws.com/0/11124/c9544b4d-30c5-1fb3-6bce-db4f43f860fb.png "demo1_unity_-_RoadRunner_-_Web_Player.png")


上部の三角形をクリックして、開始すると下記のような画面が出てきます。

![ARPoseTest_unity_-_RoadRunner_-_Web_Player.png](https://qiita-image-store.s3.amazonaws.com/0/11124/775dc79e-b013-fd67-fa4e-065fc45be2fa.png "ARPoseTest_unity_-_RoadRunner_-_Web_Player.png")

色々ボタンを押すと色々ポーズを取ってくれます。

また、このSceneも簡単にWeb Player向けにPublishすることができます。
いろいろ試してみると楽しいです。

おわりに
=======

だいぶ長くなりましたが、Unityちゃんを自力で表示したり、デモが動かせるところをまでをまとめてみました。

ちなみに私はUnity歴3週間くらいなのですが、Unityを触っていると子供の頃BASICなどに出会って「何か楽しいことが出来そう！」とわくわくしたことを思い出させてくれます。とにかく何かわからないですが、楽しいです。

これからちょっとしたゲームを作っていこうかなと思っています。
なんとなく ロードランナーみたいなゲームをUnityちゃんで作ろうかなーとか思っていますが、どうなることやら。
日曜ゲームプログラマなので気長に進めていこうと思います。

Unity-Chan LICENSE
========

<div><img src="http://unity-chan.com/images/imageLicenseLogo.png" alt="ユニティちゃんライセンス"><p>本コンテンツは、『<a href="http://unity-chan.com/download/license.html" target="_blank">ユニティちゃんライセンス条項</a>』に基づいて公開・配布されるものです。本コンテンツをご利用される場合は、ユニティ・テクノロジーズ・ジャパン合同会社が定める『<a href="http://unity-chan.com/download/guideline.html" target="_blank">キャラクター利用のガイドライン</a>』をお守りいただく必要があります。</p></div>