{"id":625,"date":"2025-06-13T09:00:00","date_gmt":"2025-06-13T07:00:00","guid":{"rendered":"https:\/\/staratnight.de\/blog\/?p=625"},"modified":"2025-06-07T15:08:55","modified_gmt":"2025-06-07T13:08:55","slug":"partikeleffekte","status":"publish","type":"post","link":"https:\/\/staratnight.de\/blog\/partikeleffekte\/","title":{"rendered":"Partikeleffekte"},"content":{"rendered":"\n<p>Unser Spiel wird immer lebendiger! Wir haben <em>Soundeffekte <\/em>und zus\u00e4tzliche <em>Animationen <\/em>hinzugef\u00fcgt, um das Einsammeln von M\u00fcnzen noch befriedigender zu machen. Doch wir k\u00f6nnen noch einen Schritt weiter gehen, um visuelles Feedback zu verbessern: mit <strong>Partikeleffekten<\/strong>.<\/p>\n\n\n\n<p>Partikeleffekte k\u00f6nnen einem Spiel unheimlich viel Leben einhauchen. Sie sind perfekt, um kurze, dynamische visuelle Ereignisse darzustellen, wie Explosionen, Rauch, Funken oder eben das Aufsammeln einer M\u00fcnze.<\/p>\n\n\n\n<p>In diesem Artikel wirst du:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Das Konzept von Partikelsystemen in Godot kennenlernen.<\/li>\n\n\n\n<li>Den <strong><code>GPUParticles2D<\/code><\/strong> Node verwenden, um einen Partikeleffekt f\u00fcr unsere M\u00fcnze zu erstellen.<\/li>\n\n\n\n<li>Die verschiedenen Eigenschaften eines Partikelsystems konfigurieren<\/li>\n\n\n\n<li>Den Partikeleffekt \u00fcber unser Script ausl\u00f6sen, wenn eine M\u00fcnze eingesammelt wird.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Was sind Partikelsysteme in Godot?<\/h3>\n\n\n\n<p>In Godot erstellst du Partikeleffekte meist mit einem <strong><code>GPUParticles2D<\/code><\/strong> Node (f\u00fcr 2D-Spiele). Dieser Node allein macht noch nichts. Er ben\u00f6tigt zwei Hauptkomponenten, um Partikel zu erzeugen und zu steuern:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Texture<\/strong>: Das ist das Bild, das f\u00fcr jeden einzelnen Partikel verwendet wird (oft ein kleiner Kreis, Stern, Punkt, etc.).<\/li>\n\n\n\n<li><strong>ProcessMaterial<\/strong>: Eine Ressource, die definiert, wie sich die Partikel \u00fcber ihre Lebenszeit verhalten (Geschwindigkeit, Richtung, Schwerkraft, Farbe, Gr\u00f6\u00dfe etc.). <\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Darauf achten: CPUParticles2D vs. GPUParticles2D<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CPUParticles2D<\/strong>: Auf dem Prozessor berechnet. Gut f\u00fcr <strong>wenige<\/strong> Partikel oder <strong>individuelle Kontrolle<\/strong>. Langsam bei vielen. Wird jedoch seitend Godot nicht mehr aktiv weiterentwickelt.<\/li>\n\n\n\n<li><strong>GPUParticles2D<\/strong>: Auf der Grafikkarte berechnet. Sehr <strong>schnell<\/strong> f\u00fcr <strong>viele<\/strong> Partikel (Zehntausende). Weniger direkte Code-Kontrolle (oft Shader n\u00f6tig).<\/li>\n<\/ul>\n\n\n\n<p><strong>Empfehlung:<\/strong> Nimm <strong>GPUParticles2D<\/strong> f\u00fcr die meisten Effekte; <strong>CPUParticles2D<\/strong> nur f\u00fcr spezielle F\u00e4lle mit wenigen Partikeln und volle Partikelkontrolle per Code notwendig.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 1: Partikel-Effekt zur M\u00fcnze hinzuf\u00fcgen<\/h3>\n\n\n\n<p>Diese Partikel sollen von der M\u00fcnze ausgehen, wenn sie eingesammelt wird. Der <code>CPUParticles2D<\/code> Node geh\u00f6rt also in die Coin-Scene.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u00d6ffne deine Szene <strong><code>coin.tscn<\/code><\/strong>.<\/li>\n\n\n\n<li>W\u00e4hle im Scene Dock den Root-Node <strong>Coin<\/strong> (<code>Area2D<\/code>) aus.<\/li>\n\n\n\n<li>F\u00fcge als Kind einen <strong><code>GPUParticles2D<\/code><\/strong> Node hinzu. Klicke auf den <strong>&#8222;+&#8220;<\/strong> Button (Child Node hinzuf\u00fcgen), suche <strong><code>GPUParticles2D<\/code><\/strong> und klicke <strong>&#8222;Create&#8220;<\/strong>. Benenne ihn zum Beispiel in <strong><code>CollectParticles<\/code><\/strong> um.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 2: Den Partikeleffekt konfigurieren<\/h3>\n\n\n\n<p>Nachdem wir den <code>GPUParticles2D<\/code> Node hinzugef\u00fcgt haben, m\u00fcssen wir ihn im Inspector konfigurieren, um das gew\u00fcnschte Verhalten zu erzielen.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>W\u00e4hle den <strong><code>CollectParticles<\/code><\/strong> Node im Scene Dock aus und gehe in den Inspector. Hier konfigurieren wir das System:\n<ul class=\"wp-block-list\">\n<li><strong>Emitting<\/strong>: Deaktiviere das H\u00e4kchen. Wir wollen die Partikel per Script starten, nicht dauerhaft emittieren.<\/li>\n\n\n\n<li><strong>Amount<\/strong>: Die Anzahl der Partikel, die bei einem &#8222;Schuss&#8220; erzeugt werden (z.B. 25).<\/li>\n\n\n\n<li><strong>Time -&gt; Lifetime:<\/strong> Wie lange jedes einzelne Partikel existiert (z.B. <code>1.0<\/code> Sekunden).<\/li>\n\n\n\n<li><strong>Time -&gt;<\/strong> <strong>One Shot<\/strong>: Aktiviere das H\u00e4kchen. Das sorgt daf\u00fcr, dass die Partikel nur einmalig als &#8222;Burst&#8220; ausgesendet werden, wenn <code>Emitting<\/code> von <code>false<\/code> auf <code>true<\/code> wechselt.<\/li>\n\n\n\n<li>Drawing -&gt; Visibility Rect<\/li>\n\n\n\n<li><strong>Process Material<\/strong>: Klicke auf das leere Feld -&gt; <strong>&#8222;New ParticleProcessMaterial&#8220;<\/strong>. Klicke dann auf die neu erstellte Ressource, um ihre Eigenschaften zu \u00f6ffnen.\n<ul class=\"wp-block-list\">\n<li><strong>ParticleProcessMaterial Eigenschaften<\/strong>: Hier kannst du das Verhalten der Partikel einstellen. Experimentiere sp\u00e4ter damit! F\u00fcr jetzt:\n<ul class=\"wp-block-list\">\n<li><strong>Spawn -&gt; Position -&gt; Emission Shape<\/strong>: Fl\u00e4che, auf der die Partikel entstehen. W\u00e4hle <strong>Sphere<\/strong>.<\/li>\n\n\n\n<li><strong>Spawn -&gt; Position -&gt; Emission Sphere Radius<\/strong>: Die gr\u00f6\u00dfe des <strong>Emmision Shape<\/strong>s  (z. B. 48, was die Gr\u00f6\u00dfe unserer M\u00fcnze entspricht.<\/li>\n\n\n\n<li><strong>Spawn -&gt; Velocity -&gt; Spread: <\/strong>Die Streuung der Partikel. 180 bedeutet in alle Richtungen, 0 in einem Halbkreis (z. B. 180.).<\/li>\n\n\n\n<li><strong>Accelerations -&gt; Gravity<\/strong>: Setze <strong>&#8222;Gravity&#8220;<\/strong> auf <code>(0, 0)<\/code>, damit die Partikel nicht nach unten fallen.<\/li>\n\n\n\n<li><strong>Accelerations -&gt; Radial Accel<\/strong>: Legt die kreisf\u00f6rmige Beschleunigung fest. Da wir eine runde M\u00fcnze haben, ist dies hier passend (z.B. min: 50; max: 150)<\/li>\n\n\n\n<li><strong>Display -> Scale: <\/strong>Gr\u00f6\u00dfe der einzelnen Partikel (z.B. min: 0,05; max 0,1)<\/li>\n\n\n\n<li><strong>Scale<\/strong>: Setze z.B. <strong>&#8222;Scale Min&#8220;<\/strong> und <strong>&#8222;Scale Max&#8220;<\/strong> auf <code>0.5<\/code> und <code>1.0<\/code>, damit die Partikel eine zuf\u00e4llige Gr\u00f6\u00dfe haben.<\/li>\n\n\n\n<li><strong>Texture<\/strong>: Gehe zur\u00fcck im Inspector zum <strong><code>CollectParticles<\/code><\/strong> Node. Suche die Eigenschaft <strong>&#8222;Texture&#8220;<\/strong>. Klicke auf das leere Feld -&gt; <strong>&#8222;Load&#8220;<\/strong>. W\u00e4hle eine kleine Textur f\u00fcr die Partikel aus. Einr einfache wei\u00dfe Stern-Grafik (z.B. star_06.png von  <a href=\"https:\/\/opengameart.org\/content\/particle-pack-80-sprites\">OpenGameArt.org<\/a>, hier muss der schwarze Hintergrund allerdings in transparent ge\u00e4ndert werden) funktioniert gut.\n<ul class=\"wp-block-list\">\n<li>W\u00e4hlst du keine Textur aus, werden kleine W\u00fcrfel als Partikel erzeugt. Diese kannst du dann via <strong>Display -&gt; Scale<\/strong> in der Gr\u00f6\u00dfe anpassen (z.B. min: 0,15; max  0,3).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 3: Partikel im Script ausl\u00f6sen<\/h3>\n\n\n\n<p>Jetzt verbinden wir den Partikeleffekt mit dem Einsammeln der M\u00fcnze in unserem <code>coin.gd<\/code> Script.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u00d6ffne das Skript <strong><code>coin.gd<\/code><\/strong>.<\/li>\n\n\n\n<li>F\u00fcge eine <code>@onready<\/code> Variable f\u00fcr den Partikel-Node hinzu, damit wir ihn im Script referenzieren k\u00f6nnen:<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:python decode:true \">class_name Coin extends Area2D\n# Deklariere ein neues Signal, das ausgesendet wird, wenn die M\u00fcnze eingesammelt wird. \nsignal collected\n\n@onready var collect_sound = $CollectSound\n@onready var collect_particles = $CollectParticles\n\n# ... (Deine bestehenden Funktionen) ...<\/pre><\/div>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><\/div>\n\n\n\n<p>Gehe zur Funktion <code>_on_Coin_body_entered(body)<\/code>. Innerhalb des <code>if body.is_in_group(\"players\"):<\/code> Blocks, f\u00fcge den Code ein, um die Partikel zu starten, nachdem der Sound abgespielt wurde und bevor die M\u00fcnze entfernt wird.<\/p>\n\n\n\n<p>Dein <code>_on_Coin_body_entered<\/code> sollte nun so aussehen:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:python decode:true \">class_name Coin extends Area2D\n# (...)\nfunc _on_Coin_body_entered(body):\n    if body.is_in_group(\"players\"):\n        print(\"M\u00fcnze ber\u00fchrt!\")\n        \n        # --- Partikel starten ---\n        collect_particles.emitting = true # Startet den Partikel-Burst\n\n        emit_signal(\"collected\")\n        collect_sound.play()\n        animation.hide() # nur die Animation verstecken, nicht den gesamten Node\n        await collect_sound.finished\n\n        queue_free() # Jetzt die M\u00fcnze entfernen<\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Darauf achten: <code>emitting = true<\/code> f\u00fcr <code>One Shot<\/code> Partikel<\/h4>\n\n\n\n<p>Da wir die <code>One Shot<\/code>-Eigenschaft  im<code> ProcessMaterial <\/code>des <code>GPUParticles2D<\/code> aktiviert haben, wird der Partikeleffekt nur einmal als &#8222;Burst&#8220; ausgesendet, wenn wir <code>emitting<\/code> von <code>false<\/code> auf <code>true<\/code> setzen. Die Partikel werden dann ihre <code>Lifetime<\/code> lang existieren und verschwinden. Dies ist ideal f\u00fcr einmalige Effekte wie das Einsammeln unserer M\u00fcnze.<\/p>\n\n\n\n<p><strong>Darauf achten: hide() versteckt auch die Partikel<\/strong><\/p>\n\n\n\n<p>Damit wir die Partikel auch sehen k\u00f6nnen, d\u00fcrfen wir nicht mehr einfach nur den Node verstecken (vorher: <code>hide()<\/code>), sondern wie verstecken lediglich die Animation. Der Node wird erst zerst\u00f6rt, wenn der Soundeffekt fertig abgespielt ist (<code>await collect_sound.finished<\/code>). Partikel, die dann noch existieren, werden ebenfalls ausgeblendet.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 4: Speichern und Ausf\u00fchren<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Speichere dein <code>coin.gd<\/code> Skript (Strg + S) und die Szene <code>coin.tscn<\/code> (Strg + S).<\/li>\n\n\n\n<li>F\u00fchre das Projekt aus (F5).<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Ergebnis:<\/h4>\n\n\n\n<p>Wenn du nun M\u00fcnzen einsammelst, sollten dort Partikel erscheinen, die den Effekt des Einsammelns visuell verst\u00e4rken!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Dein n\u00e4chster Schritt<\/h3>\n\n\n\n<p>Fantastisch! Du hast gelernt, wie man <strong>Partikeleffekte<\/strong> in Godot erstellt und steuert. Wir haben nun ein noch dynamischeres Spielerlebnis geschaffen. Du hast gelernt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die Grundlagen des <strong><code>GPUParticles2D<\/code><\/strong> Nodes.<\/li>\n\n\n\n<li>Wie man eine <strong><code>ParticleProcessMaterial<\/code><\/strong> konfiguriert, um das Verhalten der Partikel zu steuern (Geschwindigkeit, Gr\u00f6\u00dfe, Lebenszeit, etc.).<\/li>\n\n\n\n<li>Wie man Partikel-Texturen zuweist.<\/li>\n\n\n\n<li>Wie man <code>One Shot<\/code>-Partikel per Script ausl\u00f6st.<\/li>\n<\/ul>\n\n\n\n<p>Als N\u00e4chstes werden wir unserem Spiel ein grundlegendes <strong>User Interface (UI)<\/strong> hinzuf\u00fcgen, um den Fortschritt unserer Spieler:innen anzuzeigen. Wir erstellen ein <strong>HUD (Heads-Up Display)<\/strong>, das die Anzahl der gesammelten M\u00fcnzen darstellt. Das f\u00fchrt uns in die Welt der <strong>Control Nodes<\/strong> und wie wir Text und Zahlen auf dem Bildschirm aktualisieren k\u00f6nnen.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unser Spiel wird immer lebendiger! Wir haben Soundeffekte und zus\u00e4tzliche Animationen hinzugef\u00fcgt, um das Einsammeln von M\u00fcnzen noch befriedigender zu machen. Doch wir&hellip;<\/p>\n","protected":false},"author":2,"featured_media":633,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[35,43,34,45],"class_list":["post-625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-godot","tag-2d-game","tag-animation","tag-godot","tag-partikeleffekte"],"_links":{"self":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/comments?post=625"}],"version-history":[{"count":11,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/625\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/625\/revisions\/655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/media\/633"}],"wp:attachment":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/media?parent=625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/categories?post=625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/tags?post=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}