Gedankenquerbeet
Vor 3 Jahren

Partikeleffekte für Applikationen

In diesem Artikel geht es um Partikel, welche in Applikationen Verwendung finden. Dieser Artikel soll allerdings keine explizite Anleitung, für das erstellen von Partikeleffekten, darstellen. Das hier soll mehr als Inspiration bzw. Denkanstoß dienen.

Partikel? Effekt? Was soll das sein?

Ein Partikel beschreibt in der deutschen Sprache, ein kleines Teilchen. Partikel in Videos, Bildern und Applikationen sind im Grunde genommen nichts anderes als eben genau das, kleine Teilchen, kleine Grafiken. Ein Partikel Effekt ist die Ansammlung mehrerer Partikel, welche einem vorgegebenen Verhalten folgen.

Verwendung

Am meisten werden Partikel wohl in Videos und Videospielen verwendet, um einen "Wow" Effekt zu erzielen. Aber auch um Dinge wie beispielsweise "Magie" magischer darzustellen.

Hier wurden Partikel verwendet, um dem Pfeil eine Feuerspur zu geben.

 

Oft handelt es sich bei den Partikeln in Videospielen um in Echtzeit berechnete Partikel. Das heißt, dass das Verhalten eines einzelnen Partikels in dem Moment, wo die Anwendung ausgeführt wird, berechnet wird. Dies ist aber nicht immer der Fall, es gibt auch Partikel Effekte die sich als ganzes in einer Grafik befinden.

Jedenfalls finden Partikel nicht nur in Videospielen sondern auch in Video, Film und Bildern Verwendung. Bei diesen Medien werden beispielsweise die Partikel und ihr Verhalten vor berechnet.

Demonstration

Das Verhalten von Partikeln zu realisieren ist keine Zauberei. Im Gegenteil, mit einfacher Physik erreicht man schon schöne Ergebnisse. Hier wurde HTML 5 & Javascript verwendet, um die Demos zu realisieren. Natürlich kann die dahinter stehende Logik in jede Programmiersprache adaptiert werden. Ich werde allerdings hier nicht großartig auf die Programmierung eingehen.

Magie

In dieser Demo werden Partikel durch die Bewegung des Mauszeigers generiert und bewegen sich dann mit einer zufällig bestimmten Geschwindigkeit nach unten.

Explosion

Diese Demo simuliert einen Explosions Partikeleffekt, welcher durch einen Mausklick ausgelöst wird.


Lagerfeuer

In dieser Demo wird eine Lagerfeuer Flamme simuliert.


Schnee

Lass es schneien.

Realisierung der letzten Demo. Schnee.

Die Partikel Klasse
Im Grunde genommen arbeiten alle Demos mit folgender Klasse.

function Particle()
{
    var posX, posY, dirX, dirY, speed;
    var birthtime, lifetime, alpha;
    
    this.create = function(x, y, dx = 0, dy = 0)
    {
        posX = x;
        posY = y;
        dirX = dx;
        dirY = dy;
        alpha = 1;
        
        birthtime = Date.now();
        lifetime = 0;
    }
    
    this.setDirection = function(dx, dy)
    {
        dirX = dx;
        dirY = dy;
    }
    
    this.setSpeed = function(from, to)
    {
        speed = Math.random() * to + from;
    }
    
    this.setLifetime = function(from, to)
    {
        lifetime = Math.random() * to + from;
    }
    
    this.getAlpha = function()
    {
        return alpha;
    }
    
    this.isDead = function()
    {
        if(alpha == 0) return true;
        return false;
    }
    
    this.logic = function(ctx)
    {
        if(lifetime != 0)
        {
            alpha = (lifetime - ((Date.now() - birthtime) / 1000)) * (1 / lifetime);
            if(alpha < 0) alpha = 0;
        }
        
        posX += dirX * speed;
        posY += dirY * speed;
    }
    
    this.draw = function(ctx)
    {
        ctx.save();
        ctx.globalAlpha = alpha;
        ctx.drawImage(particleImg, posX, posY);
        ctx.restore();
    }
}

 

Diese besteht aus Position, Richtungsvektor, Geschwindigkeit, Lebenszeit und einem Transparenzwert. Der Transparenzwert dient dazu, die Partikelgrafik (bei Bedarf) verblassen zu lassen. Das verblassen ist das vielleicht einzig "besondere" an dieser Klasse, jenes funktioniert nämlich über die verstrichene Zeit seit der Geburt und der Lebenszeit. Das heißt, dass der Partikel relativ zu seiner Lebenszeit verblasst.

Partikel relativ zur Lebenszeit verblassen lassen

Eine kurze Erklärung: Wir subtrahieren die verstrichene Zeit in Sekunden (das teilen durch 1000 dient zur Umrechnung von Millisekunde in Sekunde) mit der Lebenszeit des Partikels und multiplizieren dieses Ergebnis mit dem Faktor, der sich durch den maximal erreichbaren Wert von alpha (in diesem Fall 1, in manch anderen Sprachen 255) und der Lebenszeit ergibt.

Angenommen unser Partikel lebt also genau eine Sekunde und wurde gerade neu erstellt. Dann sieht die Formel mit diesen Werten eingesetzt so aus:


alpha = (maxAlpha - (elapsedTime - lifetimeSinceBirth) / 1000) * (lifetime / maxAlpha)


alpha = (1 - (0 - 0) / 1000) * (1 / 1)
alpha = (1 - 0) * 1
alpha = 1 * 1
alpha = 1

Ist eine halbe Sekunde verstrichen (500 Millisekunden), also die halbe Lebenszeit, sieht das ganze so aus:

alpha = (1 - (500 - 0) / 1000) * (1 / 1)
alpha = (1 - 0.5) * 1
alpha = 0.5 * 1
alpha = 0.5

Und schon wäre unser Partikel, nach dem verstreichen seiner halben Lebenszeit, um 50% Transparent.

Um jetzt den Schnee zu erzeugen, erstellen wir einfach in jedem Frame ein neues Schnee Partikel.

var p = new Particle();
p.create(Math.random() * canvas.width, -(Math.random() * 500));
p.setDirection(0, 1);
p.setSpeed(0.2, 0.5);
p.setLifetime(10, 20);


Diese Partikel positionieren wir außerhalb des Sichtbereiches, indem wir einen zufälligen Y Wert im Minusbereich generieren. Dann sagen wir, dass sich dieser Partikel nach unten bewegen soll, setzen die mögliche Geschwindigkeit (zufälliger Wert im Bereich beider Parameter) und die mögliche Lebenszeit.

Und dass war es schon. Die vollständigen Quelltexte zu allen Demos können in der Demo Liste unter dem Punkt "Quelltext" eingesehen werden.

Kommentar verfassen



Kommentare
cialis tablets for s - 19.08.2020 09:25
Online Pharmacy Uk Tadalis Sx Soft reogErerty https://asocialiser.com/ - buy generic cialis online cheap Excefs levitra pharmacie place monge Uniomoeffolo <a href=https://asocialiser.com/#>Cialis</a> poepaftese How To Purchase Propecia
Was sind Partikel? Partikel Effekte in HTML5 Partikel Effekte Beispiele Partikel Effekte Javascript