Uhr mit farbigen Sekundenbalken erstellen

[andylpz 0]

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"));


    }
}

   

[Sascha 2,553]

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:

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

[andylpz 0]

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:

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. 

 

 

[andylpz 0]

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:

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.