search
LoginSignup
2

More than 3 years have passed since last update.

posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2