投稿者 tel | 2013年12月31日

Unityで2時間くらいで2014年カウントダウンタイマーを作った

2014年までの残り時間を表示するカウントダウンタイマーをつくってみた。だいたいこんな感じ。

countdown_ss

https://dl.dropboxusercontent.com/u/43049781/Unity/CountDown/WebPlayer.html

動機

年の瀬だし、なんか作りたくなった。

素材の用意

ほぼ文字だけにするのでフォントを選んでテクスチャを作る。
数字はフォント用のテクスチャ、その他の文字は固定なのでスプライト用のテクスチャにする。

NumberFont

前に作ったフォントをテクスチャにするので作った。
http://jsdo.it/sapphire_al2o3/6MYK

caption

実際は背景が透明で512×128の大きさ。フォントは「うつくし明朝体」を使用させていただきました。
Inkscapeで描いてPNGで出力。

スプライトの設定をする

spriteeditor

Sprite ModeをMultipleにしてスプライトをこんな風に分割する。
適当な範囲を選択してTrimを押すとぴったりの矩形になる。

シーンに配置

3D TextとSpriteをシーンに配置する。

scene

カウントダウンするスクリプトを書く

void Update()
{
 DateTime now = DateTime.Now;
 if (now.Second != _sec)
 {
 var delta = _newYear - now;
 days.text = delta.Days.ToString();
 hours.text = delta.Hours.ToString("D2");
 mins.text = delta.Minutes.ToString("D2");
 secs.text = delta.Seconds.ToString("D2");
 _sec = now.Second;
 }
}

シーンの適当なオブジェクト(とりあえずカメラ)にスクリプトをつけて日時の3D Textを変数に設定する。

カウントダウンの音を鳴らす

Audio Sourceコンポーネントを追加して表示が変わるタイミングで音がなるスクリプトを追加する。

スピーカーのアイコンのスプライトをシーンに追加してBox Collider 2Dをつける。
ボタンを押したら別のスプライトの表示をオン・オフする。

public class Speaker : MonoBehaviour
{
    public GameObject sound;
    public GameObject countdown;
    bool _mute = false;

    void OnMouseDown()
    {
        _mute = !_mute;
        sound.renderer.enabled = !_mute;
        countdown.SendMessage("Mute", _mute);
    }
}

Tweetボタンをつける

この辺を参考にした。
http://qiita.com/p_chin/items/9c0ad6aee4d9689f8e4d

Tweetのボタンを追加してボタンを押したら次の関数を呼び出す。

void Tweet()
{
DateTime now = DateTime.Now;
var delta = _newYear - now;
string text = String.Format("今年もあと{0}日と{1}時間{2}分{3}秒です。",
delta.Days,
delta.Hours,
delta.Minutes,
delta.Seconds);
Application.OpenURL("http://twitter.com/intent/tweet?text=" + WWW.EscapeURL(text));
}

パーティクルを作る

なんかちょっと寂しい気がしたので雪っぽいパーティクルを作る。

particle_ss

画面の上の方にエミッターを置いて下方向に向けてパーティクルを発生されている。

まとめ

  • 賞味の時間は2時間位で収まっていると思うけど、実際は半日くらいかかった。
  • 途中でおひるご飯食べたり、パソコンのセットアップをしてたりしたいたせい。
  • ゲーム性が皆無なのでなんかインタラクティブな機能をつけてみたい。

https://github.com/sapphire-al2o3/CountDown


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。