Was ist p5.js?
p5 ist eigentlich ein JavaScript-Framework, welches dem interaktiven Zeichnungstool Processing nachempfunden ist. Ursprünglich wurde es von Lauren McCarthy entwickelt und wird heute von einer großen Community stetig weiterentwickelt. Generell kann man p5.js mit einer Animation vergleichen, welche auf Basis von Keyframes interagiert. Der Hauptbestandteil von p5 ist ein Canvas, welcher Frame by Frame einen Programmcode interpretiert. Je nach Wunsch können dadurch einfache 2D-Formen, Texte, Grafiken oder auch 3D-Formen (WebGL-basiert) animiert werden. Der Vorteil von p5 ist, dass bereits eine grosse Anzahl an vordefinierten Objekten vorhanden sind. Siehe folgendes Beispiel eines Kreises.
function setup() {
// Erstelle den Canvas
createCanvas(windowWidth, windowHeight);
}
function draw() {
// Zeichne einen Kreis in der Canvas Mitte
ellipse(windowWidth/2,windowHeight/2,50,50);
}
Natürlich ist dieses Beispiel sehr simplifiziert, aber so könnt ihr euch zumindest vorstellen, wie der Aufbau von p5 funktioniert. Um daraus ein Spiel zu entwickeln, braucht es natürlich noch viel mehr Funktionen – aber dazu später mehr. Wir bauen nun den oben definierten Programmblock respektive Sketch ein bisschen weiter aus, um euer Bild einer Animation zu vervollständigen.
function setup() {
// Erstelle den Canvas
createCanvas(windowWidth, windowHeight);
}
function draw() {
// Zeichne einen Kreis mit jedem Mausklick
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 50, 50);
}
Jetzt möchte ich euch aber wirklich noch die vordefinierten Objekte, mathematischen Funktionen, DOM-Interkationen, etc. von p5 vorstellen.
Was kann p5.js?
Auf dieser Seite findet ihr die Referenz von p5. Wie ihr sehen könnt, gibt es unendlich viel zu entdecken und wahrscheinlich schlägt das Herz eines Programmierers nun deutlich schneller. Von Farbumgebungen, Formen, Datenstrukturen bis hin zu Benutzer-Events findet man eigentlich alles, um eine benutzergesteuerte Animation zu programmieren.
Wofür kann man p5.js auch noch nutzen?
In den meisten Fällen wird p5 genutzt, um Visual Arts programmatisch zu generieren. In den weiten Ecken des World Wide Web findet man jedoch etliche andere Beispiele, was sich mit p5 alles programmieren lässt. Am besten nutzt ihr dazu die altbewährte Suchmaschine von Google oder falls Ihr euch zu der Spezies Anti-Alles-Vorallem-Anti-NSA zählt, nutzt einfach DuckDuckGo. Im nächsten Abschnitt erkläre ich euch nun endlich, wie ich das Spiel «Alinvaders» programmiert habe.
Wie habe ich das Spiel entwickelt?
Ich habe für die Umsetzung von «Alinvaders» objektorientiertes JavaScript verwendet. Dank der objektorientierten Programmierlogik (OOP) konnte sichergestellt werden, dass die verschiedenen Objekte wie Ufos, Munition und Spieler beliebig oft erstellt werden können. Im Detail ist damit die beliebige Replikation von deren Programmblöcken, sprich Objekteigenschaften und internen Funktionen gemeint. So kann man zum Beispiel einfach und schnell hunderte Gegner erstellen, die der Spieler töten muss. Würde man dies ohne OOP lösen, würde man wohl in einem endlosen Code-Dschungel enden und hätte mit Sicherheit keinen Überblick mehr. Anzumerken ist allerdings die relativ geringe Performanz von p5. Man sollte es also mit der Anzahl Objekten nicht übertreiben, ansonsten begibt sich der Browser in die unendlichen Weiten eines Whitescreens (Webprogrammierer und Interaction-Designer mögen dies überhaupt nicht). Hier ein Beispiel, wie ich das Munitions-Objekt erstellt habe.
function Munition(x,y) {
// Eigenschaften
this.x = x;
this.y = y;
this.radius = 2.5
this.toDelete = false;
this.show = function() {
// Main
fill(35, 210, 255);
ellipse(this.x, this.y, this.radius*2, this.radius*2);
}
this.move = function() {
// Bewege das Objekt mit einer konstanten Geschwindigkeit
this.y = this.y - 10;
}
this.erase = function() {
this.ToDelete = true;
}
this.hits = function(alien) {
var distance = dist(this.x, this.y, alien.x, alien.y);
if (distance < this.radius + alien.radius) {
return true;
} else {
return false;
}
}
}
Im folgenden Codeblock zeige ich euch, wie das Munitions-Objekt im Spiel erstellt wird und danach aufgrund einer Interaktion des Benutzers aufgerufen wird. Für die Interaktion des Benutzers habe ich einfache eine keyPressed-Funktion erstellt.
function keyPressed() {
if(key === ' ') {
// Erstelle Objekt
var munition = new Munition(ship.x, ship.y-100);
// Füge das Objekt dem Ammo-Array hinzu
ammo.push(munition);
// Sound
ammoSound.play();
}
}
Weiterführend habe ich das Sound-Addon p5.sound.js verwendet, um dem Spiel eine ereignisorientierte Spielmusik beizufügen. Die Musik steigert die User-Experience erheblich. Da ich langsam zum alten Eisen zähle, entschied ich mich für eine 8-Bit Spielmusik à la Zelda oder dem Arcade-Klassiker Space Invaders. Für das Spieler-Ranking habe ich eine kleine SQL-Datenbank erstellt. Jetzt aber genug gelabert. Zeit, endlich in die Tasten zu hauen. Hier geht es zum Spiel.
(ae)