[JAVA] Unit Catcher von Processing

Dieser Artikel ist eine Neuorganisation der Materialien, die ich als Student im Kreis vorgestellt habe. Ich habe vor, es von Zeit zu Zeit zu beheben

Vorbereitungen

Installation der Verarbeitung

Download von [Offizielle Seite]

Bilddaten herunterladen

In Irasutoya ausgeliehen, ändern Sie den Bildnamen in den folgenden

• chimpanzee.png
• school.png
• tanni.png

Was ist ein Einheitsfänger?

Ein teuflisches Web-Spiel, das ein Freund als Student entwickelt hat und in dem Schimpansen verzweifelt Kredite aufnehmen

Sie können von der folgenden Seite spielen

https://ukya.tk/

Was ist Verarbeitung?

Open Source Grafikentwicklungsumgebung und Programmiersprache

Stärken

• Einfach und leicht zu verstehen mit Java-basierter Sprache
• Leichte Bewegung
• Einfache Projektstruktur
• Einfache Ausgabe in eine ausführbare Datei

die Schwäche

• Aufgrund von Entwicklungsbeschränkungen nicht für die großflächige Entwicklung geeignet

Hello World

//Nur einmal ausführen
void setup() {
  //Erstellen Sie einen 1280x720-Bildschirm
  size(1280, 720);
  //Wird auf dem Konsolenbildschirm angezeigt
  println("Hello, World");
  //Wird auf dem Ausführungsbildschirm angezeigt
  text("Hello, World", 100, 100);
}

Basic

Zeichne eine Linie

void setup() {
  size(1280, 720);
  // (X, Y) = (0, 0)Von
  // (X, Y) = (300, 300)Zeichnen Sie eine Linie bis zu
  line(0, 0, 300, 300);
}

Zeichne eine Ellipse

void setup() {
  size(1280, 720);
  // (X, Y) = (80, 200)Zu
  //Breite 50px,Erstellen Sie einen Kreis mit einer Höhe von 80 Pixel
  ellipse(80, 200, 50, 80);
}

Hintergrund zeichnen

void setup() {
  size(1280, 720);
  //0 (schwarz) bis 255 (weiß)
  background(0);
}

Farbe

void setup() {
  size(1280, 720);
  // R, G, B
  background(240, 180, 200);
  // R, G, B,A (Transparenz)
  background(240, 180, 200, 75);
}

Animation

Die Grundzeichnungsfrequenz beträgt 60 fps

//60 mal pro Sekunde ausführen (Update)
void draw() {
  //...
}

Zeichnen Sie einen perfekten Kreis, der der Maus folgt

In jedem Frame wird ein Kreis gezeichnet

void setup() {
  size(1280, 720);
}

void draw() {
  ellipse(mouseX, mouseY, 50, 50);
}

Löschen Sie die Zeichnung des vorherigen Rahmens mit der Hintergrundfüllung

void setup() {
  size(1280, 720);
}

void draw() {
  background(255);
  ellipse(mouseX, mouseY, 50, 50);
}

Variable

//Bereiten Sie eine Variable vor, die eine Ganzzahl enthalten kann
int number = 10;
//Wert ändern (nur Ganzzahl kann zugewiesen werden)
number = -50;
//Code, der den Wert der Variablen um 1 erhöht
number = number + 1;
number += 1;
number++;

Variablentyp

float   //Schwimmende Fraktion
boolean //Boolescher Wert
String  //String
PImage  //Bilddaten (Original verarbeiten)

Kreis zum Bewegen

//Deklaration von Variablen
int positionX;

void setup() {
  //Variable Initialisierung
  positionX = 0;

  size(500, 500);
}

void draw() {
  //Der Wert erhöht sich für jeden Frame um 1
  positionX += 2;
  
  background(255);
  //Verwenden Sie Variablen anstelle von Zahlen
  ellipse(positionX, 100, 50, 50);
}

Bedingte Verzweigung

int positionX;
//Ob nach links verschoben werden soll
boolean leftMove;

void setup() {
  positionX = 0;
  size(500, 500);
  leftMove = false;
}

void draw() {
  //Ändern Sie die Wertberechnung, indem Sie nach rechts gehen
  if (leftMove == false) {
    positionX += 2;
  } else {
    positionX -= 2;
  }
  
  //Bewegen Sie sich nach links, wenn 500 überschritten werden
  if (500 < positionX) {
    leftMove = true;
  }

  background(255);
  ellipse(positionX, 100, 50, 50);
}

Bedingte Verzweigung

Hinweise zur Wertbewertung

a == b // 「=Beachten Sie, dass es sich um eine Zuweisung handelt, wenn nur eine vorhanden ist.
a <= b //Größer gleich. ""=Ist richtig

Mehrfachauswertung

S && T             //S und T.
S || T             //S oder T.
(a < b) && (b < c) // a < b <Synonym für c

Bedingter Zweig mit demselben Wert

if / else-Anweisung

if (number == 0) {
  // ...
} else if (number == 1) {
  // ...
} else {
  // ...
}

switch-Anweisung

switch (number) {
  case: 0 {
    // ...
    break; //Vergessen Sie nicht, es anzuziehen!
  }
  case: 1 {
    // ...
    break;
  }
  default: {
    // ....
  }
}

Die for-Anweisung wird dieses Mal nicht verwendet, daher wird sie weggelassen.

Lass uns ein Spiel machen

Bilddaten einfügen

Fügen Sie das Bild in "(Projektdatei) / Daten" ein

So laden Sie ein Bild

PImage image = loadImage(Dateiname);

Ändern Sie die Anzeigegröße des Bildes

image.resize(Breite,Höhe);

Bildschirmgenerierung und Hintergrundeinstellungen

//Bereiten Sie Variablen für Bilder vor
PImage backgroundImage;

void setup() {
  //Starten Sie im leistungsorientierten P2D-Modus
  size(1280, 720, P2D);
  //Bilddaten lesen
  backgroundImage = loadImage("school.jpg ");
  //Auf die gleiche Größe wie die Bildschirmgröße verarbeitet
  backgroundImage.resize(width, height);
}

void draw() {
  //Hintergrund zeichnen
  background(backgroundImage);
}

width / height ist die Breite / Höhe des Ausführungsbildschirms. Entspricht dem durch size () angegebenen Wert

Anordnung der Spielerbilder

/**Fügen Sie Folgendes hinzu*/
PImage playerImage;

void setup() {
  /**Fügen Sie Folgendes hinzu*/
  playerImage = loadImage("chimpanzee.png ");
  playerImage.resize(200, 200);
}

void draw() {
  /**Fügen Sie Folgendes hinzu*/
  //Bild zur Anzeige,X-Koordinate,Y-Koordinate
  image(playerImage, 640, 520);
}

Erlaube horizontale Bewegung mit der Maus

void draw() {
  // image(playerImage, 640, 520);
  /**Oben nach unten geändert*/
  image(playerImage, mouseX, 520);
}

Ändern Sie den Referenzpunkt der Bildzeichnungskoordinaten auf den Mittelpunkt

void setup() {
  /**Fügen Sie Folgendes hinzu*/
  imageMode(CENTER);
}

Installation von Einheiten

/**Fügen Sie Folgendes hinzu*/
PImage tanniImage;

void setup() {
  /**Fügen Sie Folgendes hinzu*/
  tanniImage = loadImage("tanni.png ");
  tanniImage.resize(100, 100);
}

void draw() {
  /**Fügen Sie Folgendes hinzu*/
  image(tanniImage, 600, 300);
}

Lassen Sie das Gerät fallen

/**Fügen Sie Folgendes hinzu*/
float tanniY;

void setup() {
  /**Fügen Sie Folgendes hinzu*/
  //Wenn es 0 ist, wird es herausragen(Bild vertikale Größe/ 2)Installiert auf
  tanniY = -50;
}

void draw() {
  /**Fügen Sie Folgendes hinzu*/
  //Bewegen Sie sich in jedem Bild um 8 Pixel nach unten
  tanniY += 8;

  // image(tanniImage, 600, 300);
  /**Oben nach unten geändert*/
  image(tanniImage, 600, tanniY);
}

Zeigen Sie das Gerät wieder an

void draw() {
  /**Fügen Sie Folgendes hinzu*/
  //Wenn das Bild vom Bildschirm verschwindet
  if (height < tanniY - 50) {
    //Ersetzen Sie den Anfangswert
    tanniY = -50;
  }
}

Machen Sie die Erscheinungsposition zufällig

Methode zur Erzeugung von Zufallszahlen

random(100);        //Gleitkommawert zwischen 0 und 100
random(-40.5, 10);  // -40.Gleitkommawert zwischen 5 und 10

Machen Sie die Erscheinungsposition jedes Mal zufällig

/**Fügen Sie Folgendes hinzu*/
float tanniX;

void setup() {
  /**Fügen Sie Folgendes hinzu*/
  //Geben Sie den Bereich an, damit das Bild nicht ausgeblendet wird
  tanniX = random(50, width - 50);
}

void draw() {
  // image(tanniImage, 600, tanniY);
  /**Oben nach unten geändert*/
  image(tanniImage, tanniX, tanniY);

  if (height < tanniY - 50) {
    tanniY = -50;
    /**Fügen Sie Folgendes hinzu*/
    tanniX = random(50, width - 50);
  }
}

Kollisionsurteil mit dem Spieler

Methode zur Berechnung des Abstands zwischen zwei Koordinaten

dist(X-Koordinate von A.,Eine y-Koordinate,B x -Koordinate,Durch Koordinate)

Abkürzung für Distanz

Machen Sie ein Kollisionsurteil mit dem Spieler

void draw() {
  /**Fügen Sie Folgendes hinzu*/
  //Beurteilungsabstand auf 80 Pixel eingestellt
  if (dist(mouseX, 520, tanniX, tanniY) < 80) {
    tanniY = -50;
    tanniX = random(50, width - 50);
  }
}

Score-Funktion hinzufügen

/**Fügen Sie Folgendes hinzu*/
//0 wird gesetzt, wenn nichts angegeben ist
int score;

void draw() {
  if (dist(mouseX, 520, tanniX, tanniY) < 80) {
    tanniY = -50;
    tanniX = random(50, width - 50);
    /**Fügen Sie Folgendes hinzu*/
    score++;
    println("score: " + score);     
  }
}

Die Punktzahl wird auf der Konsole angezeigt

Zeigen Sie die Punktzahl auf dem Ausführungsbildschirm an

void setup() {
  /**Fügen Sie Folgendes hinzu*/
  //Schwarz ausfüllen
  fill(0);
  //Geben Sie die Schriftgröße an
  textSize(50);
  //Stellen Sie den Zeichenreferenzpunkt oben rechts ein
  textAlign(RIGHT, TOP);
}

void draw() {
  if (dist(mouseX, 520, tanniX, tanniY) < 80) {
    tanniY = -50;
    tanniX = random(50, width - 50);
    score++;
    /**Unten gelöscht*/
    // println("score: " + score);     
  }
  /**Fügen Sie Folgendes hinzu*/
  text("score: " + score, width, 0);
}

Lassen Sie uns den gleichen Code zusammenstellen

Folgende Methode wurde hinzugefügt

/**Fügen Sie Folgendes hinzu*/
void resetTanni() {
  tanniY = -50;
  tanniX = random(50, width - 50);
}

Ersetzen Sie die folgenden drei Codierungen durch Methoden

  tanniY = -50;
  tanniX = random(50, width - 50);
  /**Oben nach unten geändert*/
  resetTanni();

Lassen Sie uns einen Titelbildschirm und einen Ergebnisbildschirm erstellen

Verwalten Sie den Bildschirm, in dem Sie sich befinden, indem Sie ihn in eine Variable einfügen

/**Fügen Sie Folgendes hinzu*/
int state;

Zustand wird wie folgt verwaltet

state == 0 // =>Titelbildschirm
state == 1 // =>Spielbildschirm
state == 2 // =>Ergebnisbildschirm

Erstellen einer Funktion namens jeder Status

/**Fügen Sie Folgendes hinzu*/

void titleScene() {
  
}

void gameScene() {
  
}

void resultScene() {
  
}

Verschieben Sie einige Verarbeitungen nach gameScene ()

void setup() {
  /**Unten gelöscht*/
  textSize(50);
  textAlign(RIGHT, TOP);  
}

void draw() {
  background(backgroundImage);
  /**Löschen Sie alle folgenden Punkte*/
  tanniY += 8;
  image(playerImage, mouseX, 520); 
  //(Unten weggelassen)
}

void gameScene() {
  /**Fügen Sie Folgendes hinzu*/
  textSize(50);
  textAlign(RIGHT, TOP);  
  tanniY += 8;
  image(playerImage, mouseX, 520); 
}

Zeigen Sie Zeichen in jeder Szene an

void titleScene() {
  textSize(70);
  //Setzen Sie den Koordinatenreferenzpunkt auf die Mitte des Textes
  textAlign(CENTER, CENTER);
  //Zeichnen Sie Text in die Mitte des Bildschirms
  text("Title Scene", width / 2, height / 2);
}

void resultScene() {
  textSize(70);
  textAlign(CENTER, CENTER);
  text("Result Scene", width / 2, height / 2);
}

F. Gibt es einen japanischen Fehler?

A. Schriftarten müssen geladen werden

void setup() {
  /**Fügen Sie Folgendes hinzu*/
  //Generieren und laden Sie Arial-Schriftarten der Größe 50
  textFont(createFont("Arial", 50));
}

Verzweigen Sie nach dem Wert der Statusvariablen

void draw() {
  /**Fügen Sie Folgendes hinzu*/
  //Vergessen Sie nicht, eine Pause einzulegen
  switch(state) {
    case 0:
      titleScene();
      break;
    case 1:
      gameScene();
      break;
    case 2:
      resultScene();
      break;
  }
}

Da der Anfangswert von state 0 ist, wird beim Starten der Titelbildschirm angezeigt.

Tastaturbeurteilung

Ist die Taste gedrückt

isPressed()

Vergleich der eingegebenen Zeichentasten

//Bitte beachten Sie, dass die folgenden beiden unterschiedlich behandelt werden
key == 'a'
key == 'A'

Vergleich der eingegebenen qualifizierten Schlüssel

keyCode == ENTER
keyCode == SHIFT

Titelbildschirm-> Spielbildschirm

Drücken Sie die Eingabetaste, um fortzufahren

void titleScene() {
  /**Fügen Sie Folgendes hinzu*/
  //Anzeige unter dem Titel in kleinen Buchstaben
  textSize(30);
  text("ENTER to Start", width / 2, height / 2 + 80);
  //Ändern Sie den Wert, wenn die gedrückte Taste die ENTER-Taste ist
  if (keyCode == ENTER) {
    state = 1;
  }
}

Spielbildschirm-> Ergebnisbildschirm

Fahren Sie fort, nachdem Sie 10 Credits erhalten haben

void gameScene() {
  /**Fügen Sie Folgendes hinzu*/
  //Lassen Sie uns ≤ tun, falls die Punktzahl gleichzeitig um 2 steigt
  if (10 <= score) {
    state = 2;
  }
}

Ergebnisbildschirm

Eingabetaste zum Verlassen des Spielbildschirms, ESC-Taste zum Beenden

void resultScene() {
  /**Fügen Sie Folgendes hinzu*/
  textSize(30);
  text("ENTER to play again / ESC to exit", width / 2, height / 2 + 80);
  //Ändern Sie den Wert, wenn die gedrückte Taste die ENTER-Taste ist
  if (keyCode == ENTER) {
    //Punktzahl zurücksetzen
    score = 0;
    state = 1;
  } else if (keyCode == ESC) {
    //Beende das Spiel
    exit();
  }
}

Beachten Sie, dass es eine Schleife gibt, wenn Sie die Partitur nicht zurücksetzen

Exportieren wir die ausführbare Datei

"Datei" / "Als Anwendung exportieren"

Zusammenfassung

Mit Processing können Sie ein einfaches Spiel erstellen

Wenn Sie von hier aus weiter expandieren möchten ...

• Legen Sie ein Zeitlimit fest
• Mehrere Einheiten fallen lassen
• Machen Sie obligatorische Credits, die nicht fallen gelassen werden können

etc…

Zurückblicken

Die Verarbeitung war die erste Programmiersprache, an der ich richtig gearbeitet habe, aber ich dachte, es ist eine gute Programmiersprache, um glücklich zu lernen, da sie Java umschließt und sprachfreundlich ist. Vor allem können Sie schnell grafische Apps erstellen. ..