Anzeige

Swing Copters Klon selbst programmieren – so geht’s [1]

    1

Swing Copters, das neue Spiel des Flappy Bird Machers, ist inzwischen erhältlich und viele Klone sind im Anmarsch.

Wir zeigen Euch in einer kleinen Serie, wie Ihr Euch Euren eigenen Swing Copters Klon auf und für Euren Mac programmieren könnt. Es ist keinesfalls so schwer, wie es scheint. Der Einfachheit halber wird ist unser Klon nicht ganz so wie das Original aussehen und funktionieren, der Ansatz aber erkennbar sein. Zur Programmierung selbst werden wir die Processing SDK verwenden, die komplett kostenlos und quelloffen verfügbar ist.

Hier geht es zum Original:

Swing Copters
Spiele
uni
(3846)
9.5 MB
Gratis

Schritt 1: Legt ein neues Projekt an (File->New) und speichert es unter einem beliebigen Namen. den leeren Bildschirm füllt Ihr dann erst mit den beiden notwendigen Funktionen

void setup()
{

}

void draw()
{

}

In den geschwungenen Klammern von setup() legt Ihr die Größe des Spiels fest. Der Einfachheit halber verwenden wir hier eine Standard-Größe von 480×800 Pixeln. Danach sollte die Funktion so aussehen:

void setup()
{
size(480,800);
}

SwingCopter Klon 1_1

Schritt 2: Nun benötigen wir einen fliegenden Protagonisten. Damit das Projekt übersichtlich bleibt, legen wir diesen in einer eigenen Klasse an. Dazu klickt Ihr auf den weißen Kreis mit dem Pfeil nach unten, der sich über dem geschriebenen Code befindet und wählt „New Tab“ aus. Als Name haben wir uns „Flyer“ ausgesucht. Was muss dieser alles können? Erstens muss er sich nach links und rechts bewegen können und zweitens soll er auch angezeigt werden. Außerdem sollen beim ersten Start ein paar Dinge festgelegt werden. Also schreibt Ihr in das leere Textfeld:

public class Flyer
{
void init()
{

}
void move()
{

}
void show()
{

}
}

Was hier passieren wird, kann leicht vorhergesagt werden – in der init() Funktion wird alles aufgesetzt, in der move() Funktion bewegt er sich und mit show() wird er angezeigt. Nun treibt ein lizenzfreies Bild auf, welches den Protagonisten repräsentieren soll und kopiert es in den Ordner, wo Euer Projekt gespeichert ist (Ideal wäre eine Größe des Bildes von etwa 50×50 Pixeln). Um das Bild anzuzeigen, werden neben der Datei noch zwei Werte benötigt – eine X und Y Koordinate. Das Bild selbst wird unter einem PImage-Wert gespeichert. Um das Bild zu laden, ändert Ihr den Code so um:

public class Flyer
{
PImage img;
float xPos = 50;
float yPos = 500;
void init()

{
img = loadImage(„NameEuresBildes.png“);
}
void move()
{

}
void show()
{
image(img,xPos,yPos);
}
}  

Wir haben jetzt also eine X- und Y-Koordinate sowie ein Bild erstellt, welches geladen und angezeigt wird. Die Werte für xPos und yPos könnt Ihr natürlich selbst wählen, allerdings passen die angegebenen recht gut. Damit es jetzt auch etwas zu sehen gibt, begebt Ihr Euch wieder zurück in den anderen Tab, in dem sich die Funktionen setup() und draw() befinden. Dort fügt Ihr nun ganz oben die Zeile hinzu:

Flyer Protagonist;

und die Funktion setup() ändert Ihr, dass sie so aussieht:

void setup()
{
size(480,800);
Protagonist = new Flyer();
Protagonist.init();
}

Damit Ihr dann auch Euer fliegendes Bild seht, müsst Ihr noch an der draw() Funktion ein paar kleine Anpassungen vornehmen:

void draw()
{
background(0,125,125);
Protagonist.show();

Die Funktion background(0,125,125) sorgt für die Hintergrundfarbe. Passt Ihr die drei Zahlen an, ändert sich diese auch. Drückt Ihr nun auf den „Run“ Button, der sich unter dem Menü „File“ befindet, solltet Ihr Euer Bild sehen, wie es einfach nur da steht und nichts tut.  Um die Bewegung kümmern wir uns dann dann in einer späteren Folge dieses Programmierkurses. Alles, was bisher erledigt wurde, könnt Ihr Euch hier herunterladen und selbst ausprobieren. So sollte Euer Projekt bisher aussehen –

und schon in Kürze geht es bei iTopnews mit dem nächsten Teil dieser kleinen Serie (und den nächsten Schritten) weiter. 

Swing Copter Klon Schritt1_2

 

Teile
in diesem Artikel

Anzeige

Deine Meinung ist wichtig

Die Kommentarfunktion von Disqus wird als Frame eingebunden. Wenn Sie eine Meinung/einen Kommentar abgeben wollen, verlassen Sie damit unsere Webseite/App und posten über Disqus.