Lernpfad:Einführung in Processing/12

Vorheriger Schritt

Nächster Schritt

Wir haben schon eine Menge der grundlegenden Programmierkonzepte erarbeitet. Nun wollen wir alles in einem kleinen Miniprojekt zusammenbringen: <colorize size="0">Raindrops</colorize> (Regentropfen).

Bei Raindrops fallen aus dem "Himmel" einzelne "Regentropfen" in Richtung "Erde". Auf der Erde versucht der Spieler die Tropfen mit seinem "Eimer" zu fangen. Für jeden Tropfen gibt es Punkte, bis zu viele Tropfen auf den Boden gefallen sind.

In deinem Projekt müssen keine Regentropfen in einen Eimer fallen. Es können auch Äpfel in einen Korb, Kühe in einen Stall oder Shuttles in das Dock der NCC-1701-D.

Was du in diesem Schritt lernst

• Ein komplexeres Projekt strukturiert entwickeln.
• Bilder verwenden.
• Kollisionen erkennen.

Ein Projekt dieser Art zu entwickeln erfordert einiges an Planung. Du solltest dir erst Teilprobleme überlegen, die du lösen musst und zum finalen Projekt zusammensetzen kannst. Implementiere jedes Teilproblem als eine eigene Methode.

Du kannst jederzeit im Lernpfad zurückgehen, um etwas nachzuschlagen.

Wenn du dich schon sicher fühlst im Umgang mit den bisherigen Programmierkonzepten, dann kannst das vorgeschlagene Miniprojekt gerne variieren. Nimm dir aber nicht zu viel vor! Besprich deine Ideen am besten vorher mit deiner Lehrperson.

Das Projekt strukturieren

Arbeitsauftrag

Überlege dir zunächst genau, aus welchen Teilen das Programm besteht. Möchtest du einen Hintergrund zeichnen? Dann benötigst du eine Methode void zeichneHintergrund(). Sicherlich brauchst du eine Methode void zeichneRegentropfen( double x, double y ), die einen Regentropfen an die Position (x|y) zeichnet.

Notiere dir weitere Methoden, die implementiert werden müssen.

Bilder benutzen

Du kannst in Processing leicht Bilder einfügen und in deinen Programmen benutzen. Dazu benötigst du die Befehle loadImage(), um die Bilddatei zu laden und {{Processing Ref|image()}, um das Bild auf die Zeichenfläche zu zeichnen. Um ein Bild in einer Variablen zu speichern wird der Datentyp PImage verwendet.

Für unser Spiel benötigen wir zwei Bilder: Einen Regentropfen und einen Eimer.

• 
• 

Lade die beiden Bilder runter (Rechtsklick -> Speicher unter..) und kopiere sie in deinen Projektordern (erstelle zunächst ein leeres Projekt und speichere es einmal ab). probiere dann folgenden Code aus:

PImage tropfen;
PImage eimer;

void setup() {
  size(400, 600);
  
  eimer = loadImage("bucket_02.png");
  tropfen = loadImage("droplet.png");
}

void draw() {
  background(0,150,255);
  
  image(tropfen, random(50, 350), random(50, 300), 50, 50);
  image(tropfen, random(50, 350), random(50, 300), 50, 50);
  image(tropfen, random(50, 350), random(50, 450), 50, 50);
  
  image(eimer, mouseX, 530, 50, 50);
}