白ニューモフィズムデザインのアプリをUnityで作った【制作編】

前回構想したので、作ります。

bibinbaleo.hatenablog.com

ストップウォッチ事例
素材とか
Unity
MacBuild
Github
最後に

ストップウォッチ事例

必要な要素はとか表示形式を調べる。

stopwatch.onl.jp

スタートボタンとクリアボタンがある。

f:id:bibinbaleo:20200723155228p:plain

スタートを押すとスタートボタンがクリアボタンに変わる

f:id:bibinbaleo:20200723155132p:plain

桁はhh:mm:ss.fff

ミリ秒はfffだって

C#：時刻をミリ秒まで表示する | 電脳産物

Androidに入っているストップウォッチはこんな感じ

f:id:bibinbaleo:20200723194206p:plain

最初はStartボタンしかない

StartするとStartボタンが一時停止になって、リセットとラップが出てくる。今回はラップは作らない。

f:id:bibinbaleo:20200723194204p:plain

数字は桁が増えると増えていく。

f:id:bibinbaleo:20200723194201p:plain

ちなみに円はラップをおすと円上の青い小さな円が回る。不思議なUIだ・・・

さてどうしよう、StartとStopを同じボタンにすべきなのかな？

めんどくさいな・・・

あと桁は時間は要らないっしょ

素材とか

パーツ制作

ニューモフィズムは以前XDで作ってみたのでそれを下に作って行く

f:id:bibinbaleo:20200723204100p:plain

bibinbaleo.hatenablog.com

右側、凹んで見える時もあれば凸に見える時もある。錯覚面白い！

f:id:bibinbaleo:20200723215320p:plain

f:id:bibinbaleo:20200723230843p:plain

とりあえず切り替わったら凹んだように見えるので、左が通常時、右が押した時にする

f:id:bibinbaleo:20200723215234p:plain f:id:bibinbaleo:20200723215230p:plain

f:id:bibinbaleo:20200723230850p:plain f:id:bibinbaleo:20200723230853p:plain

どっかで素材は改めて配布するけど、ご自由に使ってください。

配布しました

bibinbaleo.booth.pm

音

このボタンを押した時の音は何がいいんだろう。

モフって感じの音欲しい

もきゅならあった

otologic.jp

最初Button03aを使ってた

ゲーム・ボタン音〜フリー効果音・無料効果音素材

最終的にMRTKのAudioを使うことにした

github.com

MITライセンス！

フォント

Robotにした

fonts.google.com

f:id:bibinbaleo:20200723220920p:plain

ThirdParty表記

tablericons.com

f:id:bibinbaleo:20200723231036p:plain

アプリアイコン

f:id:bibinbaleo:20200724214208p:plain

https://material.io/resources/icons/?search=alarm&icon=alarm&style=baseline

Unity

コード

先にC#書く。

こちらを元に改造しました。

kerotan-factory.xblog.jp

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System;

public class Counter : MonoBehaviour
{
    public Image Button_Image;
    public Sprite Sprite_Start;
    public Sprite Sprite_Stop;
    public Text Text_StartStop;
    public Text Text_mmsss;
    public Text Text_ff;
    private float movetime;  //稼働時間用変数
    private bool moving;     //ストップウォッチ稼働フラグ

    void Start()
    {
        TimeReset();
    }
    void Update()
    {
        //スタートボタンを押したら稼働する
        if (moving)
        {
            //ストップウォッチ稼働時間
            movetime += Time.deltaTime;
            //デジタルテキスト表示
            TimeSet();
        }
    }


    //各ボタンの機能
    //ストップウォッチのスタート
    public void WatchStart()
    {
        moving = true;
    }
    //ストップウォッチのストップ
    public void WatchStop()
    {
        moving = false;
    }

    ///StartとStopボタンを一つで使う場合
    public void WatchStartStop()
    {
        moving = !moving;
        if (moving)
        {
            Text_StartStop.text = "Stop";
            Button_Image.sprite = Sprite_Stop;
        }
        else
        {
            Text_StartStop.text = "Start";
            Button_Image.sprite = Sprite_Start;
        }
    }
    //ストップウォッチのリセット
    public void TimeReset()
    {
        movetime = 0;
        Text_mmsss.text = "00:00";
        Text_ff.text = ".00";
    }


    //時・分・秒の表示方法を指定
    private void TimeSet()
    {
        //各種変数
        int provtime = 0;
        int twodecimal = 0;

        //稼働時間から小数点以下を取り出して二桁の整数にする
        provtime = Mathf.FloorToInt(movetime);
        twodecimal = Mathf.FloorToInt((movetime - provtime) * 100);

        //TimeSpanを使って　00：00Ï　の文字列を作る
        TimeSpan ts = new TimeSpan(0, 0, provtime);
        Text_mmsss.text = ts.ToString(@"mm\:ss");
        //切り離した小数点以下を文字化する
        Text_ff.text = "." + twodecimal.ToString("D2");

    }
}