Ladekreis - Animator

[Felix K.]

Hi.

Da ich mich in letzter Zeit mal ein wenig in den Animator eingearbeitet habe, hatte ich das Bedürfnis einen kleinen Ladekreis mit dem Animator zu entwerfen.

 

Hier ist ein Video dazu. Sry, aber ich bin nicht so der Youtuber! Das Video ist unerwartet lang geworden.

 

https://www.youtube.com/watch?v=U-SglrYz7n8

 

Hier ein Download-Link falls ihr den Ladekreis haben wollt oder auch ändern wollt.

 

https://1drv.ms/u/s!AiiZxpCrXAaowyF3XEetDdg9BL6i

 

Freue mich über Feedback, also zum Ladekreis! Verbesserungen oder andere Ideen sind herzlich willkommen!

 

MfG Felix

[MaZy]

Also du hast im Video nach Tipps gefragt. Ich glaube du kannst als Bild Farbübergang machen in deinem Fall die kleinen Kästchen von 100% nach 0% immer durchsichtiger (oder auch dunkler) machen.

Danach kann man das als Progressbar verwenden und auch als Ladekreis benutzen. Da muss man bissel tricksen und die Zahl in je nach Segmentenanzahl erhöhen. Allerdings würde man hier nicht alles gleichzeitig anzeigen können, da ja ein Teil durchsichtig(er) ist.

 

Aber für schönere Animationen wie bei dir kann man halt mit mehreren Objekten in Unity machen als nur mit einem Bild.

[Felix K.]

Da muss man bissel tricksen und die Zahl in je nach Segmentenanzahl erhöhen. Allerdings würde man hier nicht alles gleichzeitig anzeigen können, da ja ein Teil durchsichtig(er) ist.

 

Hi.

Das verstehe ich nicht ganz. Was genau meinst Du damit?

[TobLine]

Ich denke Mazy Spricht von dem alpha wert, der sich je nach Segment über die Animation von 255 gegen 0 geht (von sichtbar über transparent auf unsichtbar).

[MaZy]

Ja TobLine hat das da schon richtig gesagt.

 

Schau dir die Seite mal an (zufällig Beim Googlen gefunden)

http://preloaders.net/en/search/circle

Einfach mit der Maus rüber fahren.

 

Da sieht man es wie ich es meine. Allerdings sind das hier Gif animationen. In Unity müsste man einfach im Kreisform drehen.

[TobLine]

Haha die Seite ist ja krass, wenn man mal animate all drückt

[Felix K.]

Mhh,

ich wollte den Kreis eigentlich genau so machen, wie ich ihn gemacht habe.

[malzbie]

Ich glaube den Jungs geht es nicht darum, wie der Kreis aussieht, sondern wie man das Ganze macht.

Ich persönlich hätte jeden einzelnen Zustand des ganzen Kreises in einem Grafikprogramm gemacht, alles zusammen dann zum Spritesheet verbunden und dann einfach diese Bilder in einem einzigen Sprite (30-40 Bilder) oder in 3 Sprites (4-7 Bilder) abgespielt.

Das kostet dann natürlich etwas mehr Speicher (je nach Auflösung des Spritesheets), spart aber aber das Manipulieren des Alphakanals für 10 Objekte.

Und selbst wenn man es wie bei deinem Beispiel macht, braucht man nicht 10 Sprites auf den Schirm sondern nur 3. Ein Sprite was die 3 inneren Flächen beinhaltet, die immer hell sind, und je eines für die Ecken, die von hell nach dunkel oder von dunkel nach hell gehen.

Immer wenn ein Max-Zustand der Ecke erreicht wurde, werden einfach alle 3 Sprites um 36° im Urzeigersinn gedreht und der andere Maximalzustand der Ecken eingestellt, damit das Spiel von vorne anfangen kann. Das wären 2 Texturen, wo eine immer gefadet wird, oder aber 4-7 Texturen im Spritesheet, je nach Abstufung der Grauwerte an den Ecken wenn nur animiert und dabei die Textur an den Ecken ausgetauscht wird.

 

So wie du das machst, ist es voll ok. Du hast mit deinem Aufbau die maximale Kontrolle, denn du kannst ja jetzt die dollsten Muster erzeugen.

 

Es gibt aber eben auch andere Wege, die Grafik- und Prozessorleistung sparen können.

[Felix K.]

Hi Malzbie.

Dein Ansatz mit den 3 Sprites klingt auch super! Das werde ich auch mal probieren.

 

Der Ladekreis soll eigentlich auch anders aussehen. Es sollen quasi 7 Felder sichtbar sein wobei das erste den Alpha-Wert 1 hat und die anderen nach hinten im Alphawert abklingen. Das mache ich heute eh noch. Das könnte man dann auch über gleich über Änderung des Winkels realisieren. Danke für den Tipp!

 

Wie gesagt, wichtig bei der Sache war für mich: Viel Animator und wenig Code. Das hat aus meiner Sicht eigentlich gut funktioniert.

[Zer0Cool]

Schönes Beispiel für die Benutzung der Animationskomponente von Unity

[Overdozed (Dimitri)]

Hallo Bemmi,

bei Kreisanimation speziell als Ladekreis ist es eine gute Idee Sprite-Filled-FillAmount in animation zu benutzen. Die animation an sich sieht dann zwar nicht ganz wie du es möchtest aus, dafür ist die aber viel ressourcensparender und man kann damit ganz coole Sachen machen, z.B. zwei gegeneinander sich drehende Halbkreise oder so. Die Mitte muss mann dann nur extra machen und den Außenkreis in einem Bild oder auch nicht wenn die einzeln noch gefärbt werden sollen. Außerdem ist es ganz toll wenn du die Scene additiv ladest und in Mitte des Kreises dann den Fortschritt anzeigst. Die Code dafür sieht so aus:

 

private AsyncOperation ao = null;
public Text _text;

   IEnumerator AsynchronousLoad(int scene)
   {
    yield return null;
    ao = SceneManager.LoadSceneAsync(scene);
    ao.allowSceneActivation = true;
    while (!ao.isDone)
    {
	    // [0, 0.9] > [0, 1]
	    float progress = Mathf.Clamp01(ao.progress / 0.9f);
	    _text.text = "LOADING...\n" + (progress * 100).ToString("0.0") + "%";
	    yield return null;
    }
   }
   public void Foo()
   {
    StartCoroutine(AsynchronousLoad(0));
   }

[Overdozed (Dimitri)]

Ansonsten eine Maske drehen anstatt einzelne Kreise ein und auszuschalten ist auch eine gute Idee und die Maske kann dann auch noch einen Verlauf von Transparenz haben. Sind nur so Ideen, kann man aber ganz lustige Sachen damit machen

[Sascha]

Wenn du nachträglich noch etwas zu einem deiner Beiträge hinzufügen willst, nutze bitte den "Bearbeiten"-Knopf