[JAVA] Récupérateur d'unité fabriqué par traitement

Cet article est une réorganisation du matériel présenté dans le cercle lorsque j'étais étudiant. Je prévois de le réparer de temps en temps

Préparation préalable

Installation de traitement

Télécharger depuis Site officiel

Télécharger les données d'image

Emprunté à Irasutoya, changez le nom de l'image comme suit

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

Qu'est-ce qu'un capteur d'unité?

Un jeu web diabolique développé par un ami quand il était étudiant, où les chimpanzés prennent désespérément des crédits

Vous pouvez jouer à partir du site suivant

https://ukya.tk/

Qu'est-ce que le traitement

Environnement de développement graphique open source et langage de programmation

Forces

• Simple et facile à comprendre avec un langage basé sur Java
• Mouvement léger --Structure de projet simple --Facile à générer dans un fichier exécutable

la faiblesse

• Ne convient pas au développement à grande échelle en raison de restrictions de développement

Hello World

//Courir une seule fois
void setup() {
  //Créer un écran 1280x720
  size(1280, 720);
  //Affiché sur l'écran de la console
  println("Hello, World");
  //Affiché sur l'écran d'exécution
  text("Hello, World", 100, 100);
}

De base

Tracer une ligne

void setup() {
  size(1280, 720);
  // (X, Y) = (0, 0)De
  // (X, Y) = (300, 300)Tracez une ligne jusqu'à
  line(0, 0, 300, 300);
}

Dessinez une ellipse

void setup() {
  size(1280, 720);
  // (X, Y) = (80, 200)À
  //Largeur 50px,Créez un cercle d'une hauteur de 80 px
  ellipse(80, 200, 50, 80);
}

Dessiner l'arrière-plan

void setup() {
  size(1280, 720);
  //0 (noir) à 255 (blanc)
  background(0);
}

Couleur

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

animation

La fréquence de dessin de base est de 60 ips

//Exécuter 60 fois par seconde (mise à jour)
void draw() {
  //...
}

Dessinez un cercle parfait qui suit la souris

Un cercle est dessiné à chaque image

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

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

Effacer le dessin de l'image précédente avec le remplissage d'arrière-plan

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

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

variable

//Préparez une variable qui peut contenir un entier
int number = 10;
//Modifier la valeur (seul un entier peut être attribué)
number = -50;
//Code qui incrémente la valeur de la variable de 1
number = number + 1;
number += 1;
number++;

Type de variable

float   //Fraction flottante
boolean //Valeur booléenne
String  //Chaîne
PImage  //Données d'image (traitement de l'original)

Cercle pour se déplacer

//Déclaration des variables
int positionX;

void setup() {
  //Initialisation variable
  positionX = 0;

  size(500, 500);
}

void draw() {
  //La valeur augmente de 1 pour chaque image
  positionX += 2;
  
  background(255);
  //Utilisez des variables plutôt que des nombres
  ellipse(positionX, 100, 50, 50);
}

Branche conditionnelle

int positionX;
//Se déplacer vers la gauche
boolean leftMove;

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

void draw() {
  //Modifiez le calcul de la valeur en vous déplaçant vers la droite
  if (leftMove == false) {
    positionX += 2;
  } else {
    positionX -= 2;
  }
  
  //Déplacer vers la gauche quand il dépasse 500
  if (500 < positionX) {
    leftMove = true;
  }

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

Branche conditionnelle

Notes d'évaluation de la valeur

a == b // 「=Notez que s'il n'y en a qu'un, ce sera une affectation.
a <= b //Plus grand égal. "=Est correct

Évaluation multiple

S && T             //S et T
S || T             //Trier
(a < b) && (b < c) // a < b <Synonyme de c

Branche conditionnelle de même valeur

instruction if / else

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

instruction switch

switch (number) {
  case: 0 {
    // ...
    break; //Attention à ne pas oublier de le mettre!
  }
  case: 1 {
    // ...
    break;
  }
  default: {
    // ....
  }
}

L'instruction for n'est pas utilisée cette fois, elle est donc omise.

Faisons un jeu

Mettre les données d'image

Mettez l'image dans (fichier projet) / data

Comment charger une image

PImage image = loadImage(nom de fichier);

Changer la taille d'affichage de l'image

image.resize(largeur,la taille);

Génération d'écran et paramètres d'arrière-plan

//Préparer des variables pour les images
PImage backgroundImage;

void setup() {
  //Démarrez en mode P2D axé sur les performances
  size(1280, 720, P2D);
  //Lire les données d'image
  backgroundImage = loadImage("school.jpg ");
  //Traité à la même taille que la taille de l'écran
  backgroundImage.resize(width, height);
}

void draw() {
  //Dessiner l'arrière-plan
  background(backgroundImage);
}

width / height est la largeur / hauteur de l'écran d'exécution, Identique à la valeur spécifiée par size ()

Disposition des images des joueurs

/**Ajoutez ce qui suit*/
PImage playerImage;

void setup() {
  /**Ajoutez ce qui suit*/
  playerImage = loadImage("chimpanzee.png ");
  playerImage.resize(200, 200);
}

void draw() {
  /**Ajoutez ce qui suit*/
  //PImage à afficher,Coordonnée X,Coordonnée Y
  image(playerImage, 640, 520);
}

Autoriser le mouvement horizontal avec la souris

void draw() {
  // image(playerImage, 640, 520);
  /**Changé le ci-dessus en ci-dessous*/
  image(playerImage, mouseX, 520);
}

Remplacez le point de référence des coordonnées du dessin d'image par le point central

void setup() {
  /**Ajoutez ce qui suit*/
  imageMode(CENTER);
}

Installation d'unités

/**Ajoutez ce qui suit*/
PImage tanniImage;

void setup() {
  /**Ajoutez ce qui suit*/
  tanniImage = loadImage("tanni.png ");
  tanniImage.resize(100, 100);
}

void draw() {
  /**Ajoutez ce qui suit*/
  image(tanniImage, 600, 300);
}

Déposez l'appareil

/**Ajoutez ce qui suit*/
float tanniY;

void setup() {
  /**Ajoutez ce qui suit*/
  //Si c'est 0, il restera(Taille verticale de l'image/ 2)Installé sur
  tanniY = -50;
}

void draw() {
  /**Ajoutez ce qui suit*/
  //Descendre de 8 pixels chaque image
  tanniY += 8;

  // image(tanniImage, 600, 300);
  /**Changé le ci-dessus en ci-dessous*/
  image(tanniImage, 600, tanniY);
}

Réapparaître l'unité

void draw() {
  /**Ajoutez ce qui suit*/
  //Lorsque l'image disparaît de l'écran
  if (height < tanniY - 50) {
    //Remplacez la valeur initiale
    tanniY = -50;
  }
}

Rendre la position d'apparence aléatoire

Méthode de génération de nombres aléatoires

random(100);        //Valeur flottante entre 0 et 100
random(-40.5, 10);  // -40.Valeur flottante entre 5 et 10

Rendre la position d'apparence aléatoire à chaque fois

/**Ajoutez ce qui suit*/
float tanniX;

void setup() {
  /**Ajoutez ce qui suit*/
  //Spécifiez la plage pour que l'image ne soit pas masquée
  tanniX = random(50, width - 50);
}

void draw() {
  // image(tanniImage, 600, tanniY);
  /**Changé le ci-dessus en ci-dessous*/
  image(tanniImage, tanniX, tanniY);

  if (height < tanniY - 50) {
    tanniY = -50;
    /**Ajoutez ce qui suit*/
    tanniX = random(50, width - 50);
  }
}

Jugement de collision avec le joueur

Méthode pour calculer la distance entre deux coordonnées

dist(Coordonnée X de A,Une coordonnée y,Coordonnée B x,Par coordonnée)

Abréviation de distance

Faire un jugement de collision avec le joueur

void draw() {
  /**Ajoutez ce qui suit*/
  //Distance de jugement définie sur 80 pixels
  if (dist(mouseX, 520, tanniX, tanniY) < 80) {
    tanniY = -50;
    tanniX = random(50, width - 50);
  }
}

Ajouter une fonction de score

/**Ajoutez ce qui suit*/
//0 est défini si rien n'est spécifié
int score;

void draw() {
  if (dist(mouseX, 520, tanniX, tanniY) < 80) {
    tanniY = -50;
    tanniX = random(50, width - 50);
    /**Ajoutez ce qui suit*/
    score++;
    println("score: " + score);     
  }
}

Le score est affiché sur la console

Afficher le score sur l'écran d'exécution

void setup() {
  /**Ajoutez ce qui suit*/
  //Remplissez en noir
  fill(0);
  //Spécifiez la taille de la police
  textSize(50);
  //Définissez le point de référence du caractère en haut à droite
  textAlign(RIGHT, TOP);
}

void draw() {
  if (dist(mouseX, 520, tanniX, tanniY) < 80) {
    tanniY = -50;
    tanniX = random(50, width - 50);
    score++;
    /**Supprimé ci-dessous*/
    // println("score: " + score);     
  }
  /**Ajoutez ce qui suit*/
  text("score: " + score, width, 0);
}

Mettons ensemble le même code

Ajout de la méthode suivante

/**Ajoutez ce qui suit*/
void resetTanni() {
  tanniY = -50;
  tanniX = random(50, width - 50);
}

Remplacez les trois codages suivants par des méthodes

  tanniY = -50;
  tanniX = random(50, width - 50);
  /**Changé le ci-dessus en ci-dessous*/
  resetTanni();

Faisons un écran titre et un écran résultat

Gérez l'écran dans lequel vous vous trouvez en le mettant dans une variable

/**Ajoutez ce qui suit*/
int state;

l'état est géré comme suit

state == 0 // =>écran titre
state == 1 // =>Écran de jeu
state == 2 // =>Écran de résultat

Créer une fonction appelée chaque état

/**Ajoutez ce qui suit*/

void titleScene() {
  
}

void gameScene() {
  
}

void resultScene() {
  
}

Déplacer un peu de traitement vers gameScene ()

void setup() {
  /**Supprimé ci-dessous*/
  textSize(50);
  textAlign(RIGHT, TOP);  
}

void draw() {
  background(backgroundImage);
  /**Supprimer tous les éléments suivants*/
  tanniY += 8;
  image(playerImage, mouseX, 520); 
  //(Omis ci-dessous)
}

void gameScene() {
  /**Ajoutez ce qui suit*/
  textSize(50);
  textAlign(RIGHT, TOP);  
  tanniY += 8;
  image(playerImage, mouseX, 520); 
}

Afficher les personnages dans chaque scène

void titleScene() {
  textSize(70);
  //Définir le point de référence des coordonnées au centre du texte
  textAlign(CENTER, CENTER);
  //Dessinez du texte au centre de l'écran
  text("Title Scene", width / 2, height / 2);
}

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

Q. Existe-t-il un bogue japonais?

A. Les polices doivent être chargées

void setup() {
  /**Ajoutez ce qui suit*/
  //Générer et charger une police Arial de taille 50
  textFont(createFont("Arial", 50));
}

Branche par la valeur de la variable d'état

void draw() {
  /**Ajoutez ce qui suit*/
  //Attention à ne pas oublier de faire une pause
  switch(state) {
    case 0:
      titleScene();
      break;
    case 1:
      gameScene();
      break;
    case 2:
      resultScene();
      break;
  }
}

La valeur initiale de l'état étant 0, l'écran titre s'affiche au démarrage.

Jugement du clavier

La touche est-elle enfoncée

isPressed()

Comparaison des touches de caractères saisies

//Veuillez noter que les deux suivants sont traités différemment
key == 'a'
key == 'A'

Comparaison des clés qualifiées saisies

keyCode == ENTER
keyCode == SHIFT

Écran titre-> Écran de jeu

Appuyez sur Entrée pour continuer

void titleScene() {
  /**Ajoutez ce qui suit*/
  //Afficher sous le titre en minuscules
  textSize(30);
  text("ENTER to Start", width / 2, height / 2 + 80);
  //Changer la valeur lorsque la touche enfoncée est la touche ENTRÉE
  if (keyCode == ENTER) {
    state = 1;
  }
}

Écran de jeu-> Écran de résultat

Continuez après avoir obtenu 10 crédits

void gameScene() {
  /**Ajoutez ce qui suit*/
  //Faisons ≤ au cas où le score augmenterait de 2 à la fois
  if (10 <= score) {
    state = 2;
  }
}

Écran de résultat

Entrez la clé pour quitter l'écran de jeu, la touche ESC pour quitter

void resultScene() {
  /**Ajoutez ce qui suit*/
  textSize(30);
  text("ENTER to play again / ESC to exit", width / 2, height / 2 + 80);
  //Changer la valeur lorsque la touche enfoncée est la touche ENTRÉE
  if (keyCode == ENTER) {
    //Réinitialiser le score
    score = 0;
    state = 1;
  } else if (keyCode == ESC) {
    //Terminez le jeu
    exit();
  }
}

Notez qu'il bouclera si vous ne réinitialisez pas le score

Exportons le fichier exécutable

"Fichier" / "Exporter en tant qu'application"

Résumé

Vous pouvez créer un jeu simple en utilisant Processing

Si vous souhaitez vous développer davantage à partir d'ici ...

• Fixez une limite de temps
• Déposer plusieurs unités --Faire des crédits obligatoires qui ne peuvent pas être abandonnés

etc…

Regarder en arrière

Le traitement a été le premier langage de programmation sur lequel j'ai travaillé correctement, mais je pensais que c'était un bon langage de programmation à apprendre avec bonheur car il enveloppe Java et est linguistiquement convivial, et surtout, vous pouvez créer rapidement des applications graphiques. ..