駅メモのCMっぽい演出をARで作る

# 完成イメージ

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/JH7mf2RJD20/0.jpg)](http://www.youtube.com/watch?v=JH7mf2RJD20)
https://youtu.be/JH7mf2RJD20


# 用意するもの
- Unity  
割と新しいやつ
- Vuforia 6.2.10  
https://developer.vuforia.com/downloads/sdk
- iTween 2.0.7  
https://www.assetstore.unity3d.com/jp/#!/content/84
- 画像とか  
よしなに


# マーカーを登録する
Vuforia公式サイトからマーカーを登録する．
https://developer.vuforia.com/target-manager

TargetManagerからデータベースを作成し，適当な静止画[^1]をマーカーとして登録する．
<img src=https://qiita-image-store.s3.amazonaws.com/0/178486/bd0679f3-fc9e-a550-4311-347b6d720832.png width=300>

widthが0.08なのはスマホの横幅に合わせている(≒8cm)からであるが，実際なんでもいい．
小さすぎるとUnityで作業しづらい．

登録したらunitypackageをダウンロードしてUnityに導入しておく．


# マーカーをベースに演出を追加する

## ARCameraを置く

HierarchyにVuforiaのARcameraを配置し，設定を行う．

Vuforia Behaviorコンポーネントの設定項目は初期状態では隠れているので，
Open Vuforia configurationを押して展開する．
<img src=https://qiita-image-store.s3.amazonaws.com/0/178486/1b4e4505-00dc-963e-29a2-389f3893a294.png width=300>


API License Keyは無くても動く（ロゴが入る）．
重要なのはDatasetsを有効にしておくこと．

`Load xxxxx（TargetManagerで登録したデータベース名） Database` と， `Active` の両方をチェックする．

<img src=https://qiita-image-store.s3.amazonaws.com/0/178486/dab94950-1450-f84b-0128-e4e55bfbf895.png width=300>


## ImageTargetを配置する

場所はどこでもいい．

Image Target Behaviourコンポーネントの `Database` ， `Image Target` それぞれを，
TargetManagerで登録したデータベース名およびImage Target名にする．

<img src=https://qiita-image-store.s3.amazonaws.com/0/178486/dda09061-8962-a45c-f7e3-cb7c228f73d7.png width=700>


### ImageTargetが真っ白になる時
ちょっと前<sup>[いつ？]</sup>から， ImageTarget の Texture Shape のデフォルト値がCubeになっている．
これだとImageTargetが真っ白になってしまう．

<img src=https://qiita-image-store.s3.amazonaws.com/0/178486/a77b139c-3075-45b9-8749-2a5d6106bb05.png width=300>

真っ白でも正常に動くので問題ないが，Scene上で正常に表示したければ，`Texture Shape`の値を`2D`にするとよい．

<img src=https://qiita-image-store.s3.amazonaws.com/0/178486/c75fab1c-600d-dcf4-bd4d-a8d5543c2b81.png width=300>


## Spriteを置く

よしなに．

<img src=https://qiita-image-store.s3.amazonaws.com/0/178486/9dd1f795-06ac-724e-75e6-c2bca2c7c740.png width=600>

リンク解除されてて草．

## オープンアニメーションを設定する

iTweenで，5秒後にを0.2秒かけて開くように設定する．
10秒後に0.2秒かけて閉じるものも一緒に設定しておく．

以下のようなコードを用意してInspectorからスプライトごとに適宜値を設定する．
各画像ごと0.2秒のズレを設定した（4.8秒後，5秒後，5.2秒後の３つ）．


```csharp:OpenTween.cs
using UnityEngine;

public class OpenTween : MonoBehaviour {

	[SerializeField]
	private float scalex;

	[SerializeField]
	private float scaley;

	[SerializeField]
	private float scalez;

	[SerializeField]
	private float time;

	[SerializeField]
	private float delay;

	void Start () {
		iTween.ScaleTo(this.gameObject, iTween.Hash("x", scalex, "y", scaley, "z", scalez, "time", time, "delay", delay));
	}

}
```

値が暴力的なのは気にしないでほしい．
ImageTargetをUploadするときに0.08にした報いである．

![スクリーンショット 2017-05-18 20.52.35.png](https://qiita-image-store.s3.amazonaws.com/0/178486/43a4e5ab-15c8-b16b-2ad8-57f2a1aa0390.png)

上がオープン，下がクローズ．
クローズにも使ってるので`OpenTween.cs`という名前が悪い．

設定が終わったら，閉じ状態（x=0)をデフォルトにしておく．

<img src=https://qiita-image-store.s3.amazonaws.com/0/178486/3ff433e2-41a5-b190-5c7b-3fcca98de4cf.png width=500>

## 動確

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/hSL6bPc4wJA/0.jpg)](http://www.youtube.com/watch?v=hSL6bPc4wJA)
https://youtu.be/hSL6bPc4wJA


# ビルドして端末で確認

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/d5HKyQZEsic/0.jpg)](http://www.youtube.com/watch?v=d5HKyQZEsic)
https://youtu.be/d5HKyQZEsic



# 謝辞

OLのお姉ちゃんをでんこで出してください．

<br>


---

<br>


[^1]: <img src=https://qiita-image-store.s3.amazonaws.com/0/178486/9fe2ce52-ee51-6464-fa68-295c557be916.png width=100> 実際のゲーム画面をマーカーに使ってもなんとなく動く．結構特徴点が似てるので．