C#
Unity
ネタ
Unity2D
Unity #3Day 10

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

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

みなさんはメールでおくれるグリーティングカードなるものを覚えていますでしょうか。

昔はFlashで作られたグリーティングカードをクリスマスに、記念日に送りあったものです。なつかしい〜〜〜。:envelope::relaxed:

え?しらない?きっとキミはとっても若いんだな!うらやましい!

しかし、時は2018年。グリーティングカードを目にすることはなくなってしまった。

Googleで「グリーティングカード メール」で検索トップに出てきたサイトがhttps通信じゃないことが、時代を私に感じさせた。

でもせっかくなら、ツイッターやSNSでお世話になってる人にグリーティングカードを送りたいじゃない!

そうだ!自分でつくろう!でもFlashしらない!


そうだ!僕らにはUnityがあるじゃないか!!!!!!

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

早速ですが、つくったものがこちらとなります。

:innocent:クリスマスのおはなし


:snowman2:使用するツール、アセット、ソフトウェアなど


  • Unity


    • 当然ながら



  • PostEffect


    • Unity2018からPackageで最新のバージョンを落とすことができる

    • ゲーム画面全体の雰囲気を「それっぽく」することができる



  • Particle


    • クリスマスといえば・・・雪!:snowflake:を降らせるため



  • Fungus


    • キャラクター同士の会話に使用するAsset:couple:

    • 有名どころだと他には宴などがあげられる



  • Magicavoxel


    • 素材は自作でボクセルモデリングを行い、2D画像を用意する。とくにMagicavoxelである必要はないので、なにかイラストなどを用意しましょう。



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


雪を降らせる

工夫したのはずばり奥行きです。

スクリーンショット 2018-12-09 2.10.18.png

2つのParticleを用意します。


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

スクリーンショット 2018-12-09 21.52.25.png


  • パラパラした雪


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


スクリーンショット 2018-12-09 21.52.47.png

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

スクリーンショット 2018-12-09 21.53.15.png

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


おはなしを作る

いわゆるノベルゲームのような感じにしたかったので、それに値するAssetsを探しました。


Fungus

スクリーンショット 2018-12-09 21.57.39.png

きのこがトレードマークの無料のアセット。

選択肢、メソッドの読み込み、フラグの管理、全てFungusのFlowchartウインドウで管理をすることができます。

膨大なゲームであったり、データ管理が複雑になってくる大きなゲームだと取り入れ方を考える必要がありますが、こういった短編のゲームをつくるにはもってこいのアセットでした。

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


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関数と、Retryボタンを押したときに動作する初期化関数のみ。ね、かんたんでしょ!!

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

スクリーンショット 2018-12-09 22.03.07.png

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

スクリーンショット 2018-12-09 22.04.46.png

そうして私がつくったグリーティングカードがこちら!

:innocent:クリスマスのおはなし


最後に

ざっとした説明になりましたが、簡単なグリーティングカードレベルのものであれば、ほとんどコードを書かずに物語をつくることができます。

今年のクリスマスはUnityを使ったグリーティングカードで、あなたの大切な人に感謝の気持ちをつたえてみてはどうでしょう。

それでは、メリークリスマス!よいフユを!

xmascard.png