【Unity】プログレスバーを使ったタイマー

2021/1/16 Sliderを使ったロッドタイプの内容修正 2021/1/16 ブログの下に追記しました 暖冬の影響で温かい今日この頃ですが、 ケロはスキーヤーなので、悲しいシーズンを送っております。 近場のスキー場なら1時間くらいで行けるのですが、 いつも行くスキー場には、雪がありませぬ。(ToT )( ToT) ウルウル わざわざ400㌔程離れた新潟まで足を延ばしております。(´`;) 愚痴っても仕方がないので、 本題の、プログレスバーを使ったタイマーについてまとめます。 サークルタイプ 白地の丸スプライトを一枚用意します。 スライド部分に絵を入れたい場合は、もう一枚用意しておくといいかと。 インポートが終わったら、CircleProgressをまとめる空オブジェクトを用意します。 この中にImageを追加して、CircleBackとでもしておいて下さい。 このスプライトに白地の丸をアタッチします。 Progressの部分より少し大きめにしておくといいかと思います。 今回は、Progressの部分を200×200にするので、 少し大きめの210×210にしました。 続いて、Imageを追加してProgressとして、CircleBackの上に設置します。 スプライトに白地の丸、もしくは、別のスプライトをアタッチします。 白地の場合は、カラーを好きな物に変更します。 このImageがProgr…

続きを読む

【Unity】アクション系タイマー

タイマー記事の続きでっす。 今回はアクション系のタイマーを説明していきます。 アクション系のタイマーって、何?と思われる方もおられるかと… タイマーって数値をカウントして0になれば終了するものですが、 数値が減少して行くのって分かりやすいですが、少々味気ないものです。 ローディングやダウンロードで数値だけが動いているとイライラしたり これって私だけ(;´▽`A`` セッカチナモンデ 少しキャラが動いたりしてると紛れるかと思います。 また通常タイマーと違って、可愛らしいキャラを使った、 視覚タイマーをアプリとして公開されている方もおられます。 簡単ですが、アクション系のタイマーを作ってみたいと思います。 タイマー動画で上げたキャラは、某メーカーのキャラに似ていますが、 違うので注意でっす。 パクパクまんと言うキャラです。(V)o\o(V)ふぉふぉふぉ パクパクまん、ボール、吹き出しのスプライトをインポートします。 ボールは、Green、Yellow、Red、の三色を用意します。 Redだけ大きいのは気にしないで下さい(;^_^A アセアセ・・・ 続いて、Canvasに空オブジェクトを作成してActionParentにリネーム、 この中に配置していきます。 Imageを追加して、パクパクを用意します。 スプライトは口を閉じている方を選択して、transformを設定します。 今回は、Y200 X-200に設定し…

続きを読む

【Unity】背景色を時間変化させる

いろいろなタイマーと言う事で、 4種類のタイマーを作ってみました。 ・デジタル ・背景色変化 ・アクション ・プログレスバー 前回デジタル表示に触れたので、 今回は、背景色変化について記事にします。 設定はandroidで行っています。 CanvasとImageを追加して、このImageを背景とします。 60秒でGreen→Yellow→Redと変化させていくので、 Imageの色をGreenにセットするのですが、 最初は、画像の赤枠の部分がRGB0-255になっていると思います。 Greenから色変化させる場合、RGBだと色変化させるのに かなりの手数が必要になります。 実際にバーを弄りながら色変化をさせると バーの操作が複雑なのが分かります。 そこで、 RGB色空間からHSV色空間に変更します。 RGBは、皆さんご存じ三原色です。 HSVは、色相、彩度、明度で表す色空間です。 HSVに切り替えると H(色相)部分がGreenからRedまで見えています。 この部分を操作すると、Green→Yellow→Redの色変化ができそうです。 難点は、Yellowの部分が短いのと このまま、HバーをYellowに合わせるとわかるのですが、 明度が低いので、黄土色と言うかうんこ色…… これでは見た目が残念なんで、明度も弄っていきます。 だいたい明度90くらいで、綺麗な黄色になります。(*_…

続きを読む

【Unity】いろいろなタイマー

ストップウォッチが無事に作れたと言う事で、 次はタイマーを作ってみたいと思います。 タイマーと一口に言っても、テキスト表示だけではストップウォッチと変わりません。 なので、いろいろと視覚的なタイマーを作ってみたいと思います。 タイマーの時間は、60秒からのカウントダウンで0になれば終了とします。 タイマーの視覚効果として、 ・色変化 ・プログレスバー ・アクション この辺を盛り込んでみたいと思います。 できたものを動画にしてみました。 TimerTest - TimerScene - Android - Unity 2019.3.0f3 Personal_ _DX11_ 2020-02-14 17-12-51_x264.mp4 それにしても目がチカチカする (@-@) 見て下さった方申し訳ないです。_(._.)_ ユルシテ 時間経過に合わせて、いろいろなタイマーを作ってみました。 各タイマーの作り方は、順次ブログに挙げる予定でっす。 今回の〆は、デジタルタイマーの作り方を まず、スタート用のButtonオブジェクトと時間表示用のTextオブジェクトを用意します。 Textには、60.00と入力しておきます。 続いて、スクリプトを作成します。 TimerManager using System.Collections; using System.Collections.Generic; using…

続きを読む

【Unity】ストップウォッチを作ってみる

前回、経過時間の取得を記事にしました。 折角なので、時間を使った物を作ってみたいと思います。 時間を使った物と言えば、ストップウォッチやタイマーでしょうか。 今回は、ストップウォッチを作ってみたいと思います。 ストップウォッチと言っても数値を表示するだけになりそうなので、 アナログとデジタルの両方を考えてみたいと思います。 Unityのセッティングをします。 プラットホームはandroidで、キャンバスの設置と白背景をセットします。 背景ができた所でパーツになるオブジェクトを配置します。 UIをまとめる為にキャンバスを追加して、CanvasUIにリネーム レイヤーを1にします。 パーツとしては、アナログディスプレイ、デジタルディスプレイ、ボタン類のペアレントを用意します。 アナログディスプレイは、メイン文字盤とメイン針をセットして秒に対応させます。 メイン文字盤の中にある赤いサブ文字盤は分計となります。 針は、支点を下端にする必要があるので、セットする際にYピボットを0にします。 これで、回転のz軸の角度を変えると針の下端を中心に回ってくれます。 サブの分計の針もYピボットを0にします。 アナログのパーツができたので、デジタルのパーツを用意します。 デジタルのパーツは、色付き背景とテキストを用意すれば問題ないかと思います。 デジタルの表示は、時:分:秒の表示にします。 秒は、小数点以下2位までの表示としま…

続きを読む