Unityを使ってクリスマスカードを作ろうの話

Unity Advent Calendar 2019 その3の12/10の記事です。



みなさんはメールでおくれるグリーティングカードなるものを覚えていますでしょうか。
昔はFlashで作られたグリーティングカードをクリスマスに、記念日に送りあったものです。なつかしい〜〜〜。:envelope::relaxed:
~~え？しらない？きっとキミはとっても若いんだな！うらやましい！~~



しかし、時は２０１８年。グリーティングカードを目にすることはなくなってしまった。
**Googleで「グリーティングカード　メール」で検索トップに出てきたサイトがhttps通信じゃないことが、時代を私に感じさせた。**



でもせっかくなら、ツイッターやSNSでお世話になってる人にグリーティングカードを送りたいじゃない！
そうだ！自分でつくろう！でもFlashしらない！
#そうだ！僕らにはUnityがあるじゃないか！！！！！！

そういうわけで、Unityで簡単なグリーティングカードを作って、webGLで出力して、お世話になった人に送ろうと決めました。


早速ですが、つくったものがこちらとなります。
:innocent:[クリスマスのおはなし](https://unityroom.com/games/christmas_card)


#:snowman2:使用するツール、アセット、ソフトウェアなど
- Unity
 - 当然ながら
- PostEffect
 - Unity2018からPackageで最新のバージョンを落とすことができる
 - ゲーム画面全体の雰囲気を「それっぽく」することができる
- Particle
 - クリスマスといえば・・・雪！:snowflake:を降らせるため
- Fungus
 - キャラクター同士の会話に使用するAsset:couple:
 - 有名どころだと他には宴などがあげられる 
- Magicavoxel
 - 素材は自作でボクセルモデリングを行い、２D画像を用意する。とくにMagicavoxelである必要はないので、なにかイラストなどを用意しましょう。


PostEffectとMagicavoxelについては記事がおおいため、Particleで工夫したところとFungusに焦点をあてて紹介させていただこうとおもいます。

## 雪を降らせる
工夫したのはずばり奥行きです。

![スクリーンショット 2018-12-09 2.10.18.png](https://qiita-image-store.s3.amazonaws.com/0/311402/fb3689fd-1c9e-037d-2b7a-961cb7e86015.png)

２つのParticleを用意します。

- ほわほわした雪
>落下速度が遅い。粒度は大きい。透明度が高い。

![スクリーンショット 2018-12-09 21.52.25.png](https://qiita-image-store.s3.amazonaws.com/0/311402/cdfd66cc-7bf3-8d46-9def-5cf70b1a2e2a.png)


- パラパラした雪

>落下速度が早い。粒度は小さい。透明度は低い。

![スクリーンショット 2018-12-09 21.52.47.png](https://qiita-image-store.s3.amazonaws.com/0/311402/4e442e8e-03c6-f5b3-dcaa-f0bc0165a588.png)


この２つのParticleを用意して、画面に遠近感をつくります。

![スクリーンショット 2018-12-09 21.53.15.png](https://qiita-image-store.s3.amazonaws.com/0/311402/2ff458e4-3a06-a9d1-cfc0-3b0cc87843d1.png)


さらに、PostProcessのBloom効果をかけることにより、よりファンタジー感のある雪になります。

#おはなしを作る

いわゆるノベルゲームのような感じにしたかったので、それに値するAssetsを探しました。
###[Fungus](https://assetstore.unity.com/packages/templates/systems/fungus-34184)

![スクリーンショット 2018-12-09 21.57.39.png](https://qiita-image-store.s3.amazonaws.com/0/311402/e82f0f60-93f3-0f4b-4b7e-242692df80b4.png)

きのこがトレードマークの無料のアセット。
選択肢、メソッドの読み込み、フラグの管理、全てFungusのFlowchartウインドウで管理をすることができます。
膨大なゲームであったり、データ管理が複雑になってくる大きなゲームだと取り入れ方を考える必要がありますが、こういった短編のゲームをつくるにはもってこいのアセットでした。

事実、今回のこのクリスマスカードをつくるのに書いたコードはこれだけです。


```C#:Main.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Fungus;

public class Main : MonoBehaviour {

    [SerializeField] string m_Fungus;
    [SerializeField] Flowchart m_flowchart;
    [SerializeField] GameObject m_button;

    void Start()
    {
        Init();
    }

    public void
    Init ()
    {
        m_button.SetActive(false);

        m_flowchart.ExecuteBlock(m_Fungus);
    }
}

```

Start関数と、Retrｙボタンを押したときに動作する初期化関数のみ。ね、かんたんでしょ！！

実際のFlowchartはこのように管理されています。

![スクリーンショット 2018-12-09 22.03.07.png](https://qiita-image-store.s3.amazonaws.com/0/311402/4d1bcc35-a772-71fb-807c-bd640b022f17.png)

Flowchartの中身もコードを書くのではなく、Inspectorの＋ボタンから様々なコマンドを追加することができます。

![スクリーンショット 2018-12-09 22.04.46.png](https://qiita-image-store.s3.amazonaws.com/0/311402/c2fd4fd2-f92a-83bc-6091-acca9822cf19.png)

そうして私がつくったグリーティングカードがこちら！
:innocent:[クリスマスのおはなし](https://unityroom.com/games/christmas_card)


#最後に
ざっとした説明になりましたが、簡単なグリーティングカードレベルのものであれば、ほとんどコードを書かずに物語をつくることができます。
今年のクリスマスはUnityを使ったグリーティングカードで、あなたの大切な人に感謝の気持ちをつたえてみてはどうでしょう。
それでは、メリークリスマス！よいフユを！


![xmascard.png](https://qiita-image-store.s3.amazonaws.com/0/311402/546906d2-dc9b-3a5a-67d1-24659636a213.png)