Jump to content
Unity Insider Forum

Uhr mit farbigen Sekundenbalken erstellen


Recommended Posts

Hallo,

Ich stehe vor einem Fragezeichen,

und zwar möchte ich mit Unity eine Uhr erstellen, welche anstatt einen Sekundenzeiger,

Farbbalken hat.

Ich hatte vor Jahren zwar schon eine Animation erstellt (siehe hier). Aber als "echte"

Uhr, gibt mir dies schon ein Rätsel.

Als C#-Script, liegt mir ein allgemeiner Code vor, welchen ich mal unten einfüge.

Photoshop und Cinema4d wären vorhanden.

Über Antworten, wäre ich sehr erfreut. :-D.

Das ganze ist natürlich für den reinen Privatgebrauch.

LG.

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

public class Clock : MonoBehaviour
{

    public GameObject secondHand;
    public GameObject minuteHand;
    public GameObject hourHand;
    string oldSeconds;

    void Update()
    {

        string seconds = System.DateTime.UtcNow.ToString("ss");


        if (seconds != oldSeconds)
        {
            UpdateTimer();
        }
        oldSeconds = seconds;

    }

    void UpdateTimer()
    {

        int secondsInt = int.Parse(System.DateTime.UtcNow.ToString("ss"));
        int minutesInt = int.Parse(System.DateTime.UtcNow.ToString("mm"));
        int hoursInt = int.Parse(System.DateTime.UtcNow.ToLocalTime().ToString("hh"));
        print(hoursInt + " : " + minutesInt + " : " + secondsInt);

        iTween.RotateTo(secondHand, iTween.Hash("z", secondsInt * 6 * -1, "time", 1, "easetype", "easeOutQuint"));
        iTween.RotateTo(minuteHand, iTween.Hash("z", minutesInt * 6 * -1, "time", 1, "easetype", "easeOutElastic"));
        float hourDistance = (float)(minutesInt) / 60f;
        iTween.RotateTo(hourHand, iTween.Hash("z", (hoursInt + hourDistance) * 360 / 12 * -1, "time", 1, "easetype", "easeOutQuint"));


    }
}

   

Link to post
Share on other sites

Moin!

Wenn du dafür UnityUI benutzt, wird es einfach. Dann kannst du einen simplen, vollständigen Kreis als Grafik machen und diesen von einer Image-Komponente anzeigen lassen. Da stellst du den Modus auf "Filled" und den Fill Type auf "Radial"... oder so :) Dann kannst du mit einem Wert zwischen 0 und 1 beim "Fill Amount" genau diesen Effekt erzeugen. Im Code kannst du mit einem steigenden Wert für Image.fillAmount genau dasselbe tun.

Wenn's außerhalb der UI-Welt passieren soll, dann würde ich es zuerst mit einem Alpha Cutout Shader probieren, dem du eine Textur gibst, auf dessen Alpha-Kanal ein Kreis ist, der einen Graustufen-Farbverlauf hat:

grafik.png

Dann kannst du den Cutoff-Wert animieren, um diesen Effekt zu erzeugen.

Link to post
Share on other sites
vor 3 Minuten schrieb Sascha:

Moin!

Wenn du dafür UnityUI benutzt, wird es einfach. Dann kannst du kannst einen simplen, vollständigen Kreis als Grafik machen und diesen von einer Image-Komponente anzeigen lassen. Da stellst du den Modus auf "Filled" und den Fill Type auf "Radial"... oder so :) Dann kannst du mit einem Wert zwischen 0 und 1 beim "Fill Amount" genau diesen Effekt erzeugen. Im Code kannst du mit einem steigenden Wert für Image.fillAmount genau dasselbe tun.

Wenn's außerhalb der UI-Welt passieren soll, dann würde ich es zuerst mit einem Alpha Cutout Shader probieren, dem du eine Textur gibst, auf dessen Alpha-Kanal ein Kreis ist, der einen Graustufen-Farbverlauf hat:

grafik.png

Dann kannst du den Cutoff-Wert animieren, um diesen Effekt zu erzeugen.

Hallo @Sascha

Danke dir erstmal für die Antwort. 🙂

Ich werde mir das mal anschauen. 

Zufälligig, habe ich grad Unitiy geöffnet.

Da weiss, ich ja was ich gleich mal probieren kann. 

 

 

Link to post
Share on other sites
  • 2 weeks later...
Am 8.4.2021 um 14:50 schrieb Sascha:

Moin!

Wenn du dafür UnityUI benutzt, wird es einfach. Dann kannst du einen simplen, vollständigen Kreis als Grafik machen und diesen von einer Image-Komponente anzeigen lassen. Da stellst du den Modus auf "Filled" und den Fill Type auf "Radial"... oder so :) Dann kannst du mit einem Wert zwischen 0 und 1 beim "Fill Amount" genau diesen Effekt erzeugen. Im Code kannst du mit einem steigenden Wert für Image.fillAmount genau dasselbe tun.

Wenn's außerhalb der UI-Welt passieren soll, dann würde ich es zuerst mit einem Alpha Cutout Shader probieren, dem du eine Textur gibst, auf dessen Alpha-Kanal ein Kreis ist, der einen Graustufen-Farbverlauf hat:

grafik.png

Dann kannst du den Cutoff-Wert animieren, um diesen Effekt zu erzeugen.

Nabend, danke nochmals.

nun der aktuelle status schaut so aus:

ich habe mir erstmal mit photoshop eine farbliche radial png erstellt.

über unity habe ich nun auch  die filled-methode gefunden.

nun muss natür der codescript gemacht werden. 

mal schauen ob ich es  gebacken bekomme.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...