Wie kann ich eine Schaltfläche in meinem Verarbeitungsprogramm erstellen, die beim Klicken mehr Bilder anzeigt?

Question

Ich entwerfe ein Videospiel für meinen Informatikunterricht. Bis jetzt funktioniert alles und das Spiel beinhaltet das Ziehen eines Bildes zu bestimmten Teilen des Bildschirms. Das Fenster ist jedoch nicht groß genug, um alle Bilder zu enthalten. Daher möchte ich eine "nächste" Schaltfläche erstellen, die eine neue Seite mit Elementen im selben Fenster öffnet und gleichzeitig zulässt, dass die gezogenen Bilder auf der Seite bleiben. Grundsätzlich möchte ich nur einen Teil des Bildschirms in der Lage sein, zu einem neuen Frame zu bewegen. So ähnlich wie ein Menüknopf, der zu einer neuen "Szene" des Programms führt.

Ich arbeite mit Eclipse.

import processing.core.PApplet; 
import processing.core.PImage; 
import java.awt.event.MouseEvent; 

@SuppressWarnings("serial") 
public class Step1 extends PApplet 
{ 
//curly brown 
float x = 900; 
float y = 30; 
float imageWidth = 175; 
float imageHeight = 175; 
//long brown 
float x2 = 800; 
float y2 = 30; 
//royal dress 
float x3 = 845; 
float y3 = 170; 
float imageWidth2 = 400; 
float imageHeight2 = 400; 
//flower dress 
float x4 = 850; 
float y4 = 145; 
//black and pink dress 
float x5 = 600; 
float y5 = 170; 
//black straight 
float x6 = 700; 
float y6 = 30; 

boolean mouseInImage = false; 
boolean mouseInImage2 = false; 
boolean mouseInImage3 = false; 
boolean mouseInImage4 = false; 
boolean mouseInImage5 = false; 
boolean mouseInImage6 = false; 

PImage img; 
//hairs 
PImage curlyBrown = loadImage("CurleyBrown.png"); 
PImage longBrown = loadImage("LongBrown.png"); 
PImage blackStraight = loadImage("BlackStraight.png"); 

//dresses 
PImage blackAndPinkDress = loadImage("BlackAndPinkDress.png"); 
PImage blackDress = loadImage("BlackDress.PNG"); 
PImage blackStripesDress = loadImage("BlackStripesDress.png"); 
PImage flowerDress = loadImage("FlowerDress.png"); 
PImage sparklyDress = loadImage("SparklyDress.png"); 
PImage royalDress = loadImage("RoyalDress.png"); 

public void setup() 
{ 
    size(1024, 576); 
    background(255, 255, 255, 255); 
    img = loadImage("Body1.png"); 

} 

public void draw() 
{ 
    background(255, 255, 255, 255); 
    image(img, 250, 50); 
    image(royalDress, x3, y3); 
    image(flowerDress, x4, y4); 
    image(blackStripesDress, 680, 70); 
    image(blackDress, 600, 65); 
    image(blackAndPinkDress, x5, y5); 
    image(sparklyDress, 500, 150); 
    //hair 
    image(longBrown, x2, y2, imageWidth, imageHeight); 
    image(curlyBrown, x, y, imageWidth, imageHeight); 
    image(blackStraight, x6, y6, 125, 145); 
} 

public void mousePressed(MouseEvent e) 
{ 
    if(mouseX > x && mouseX < x + imageWidth && mouseY > y && mouseY < y + imageHeight) 
     mouseInImage = true; 
    else if(mouseX > x2 && mouseX < x2 + imageWidth && mouseY > y2 && mouseY < y2 + imageHeight) 
     mouseInImage2 = true; 
    else if(mouseX > x3 && mouseX < x3 + imageWidth2 && mouseY > y3 && mouseY < y3 + imageHeight2) 
     mouseInImage3 = true; 
    else if(mouseX > x4 && mouseX < x4 + imageWidth2 && mouseY > y4 && mouseY < y4 + imageHeight2) 
     mouseInImage4 = true; 
    else if(mouseX > x5 && mouseX < x5 + imageWidth2 && mouseY > y5 && mouseY < y5 + imageHeight2) 
     mouseInImage5 = true; 
    else if(mouseX > x6 && mouseX < x6 + 125 && mouseY > y6 && mouseY < y6 + 145) 
     mouseInImage6 = true; 
} 

public void mouseDragged() 
{ 
    if(mouseInImage) 
    { 
     float deltaX = mouseX - pmouseX; 
     float deltaY = mouseY - pmouseY; 

     x += deltaX; 
     y += deltaY; 
    } 
    else if(mouseInImage2) 
    { 
     float deltaX = mouseX - pmouseX; 
     float deltaY = mouseY - pmouseY; 

     x2 += deltaX; 
     y2 += deltaY; 
    } 
    else if(mouseInImage3) 
    { 
     float deltaX = mouseX - pmouseX; 
     float deltaY = mouseY - pmouseY; 

     x3 += deltaX; 
     y3 += deltaY; 
    } 
    else if(mouseInImage4) 
    { 
     float deltaX = mouseX - pmouseX; 
     float deltaY = mouseY - pmouseY; 

     x4 += deltaX; 
     y4 += deltaY; 
    } 
    else if(mouseInImage5) 
    { 
     float deltaX = mouseX - pmouseX; 
     float deltaY = mouseY - pmouseY; 

     x5 += deltaX; 
     y5 += deltaY; 
    } 
    else if(mouseInImage6) 
    { 
     float deltaX = mouseX - pmouseX; 
     float deltaY = mouseY - pmouseY; 

     x6 += deltaX; 
     y6 += deltaY; 
    } 
} 

public void mouseReleased() 
{ 
    mouseInImage = false; 
    mouseInImage2 = false; 
    mouseInImage3 = false; 
    mouseInImage4 = false; 
    mouseInImage5 = false; 
    mouseInImage6 = false; 
} 

}

Answer 1

Es gibt zwei Ansätze.

Ansatz 1: Zeichnen Sie alle Ihre Bilder und bieten Sie eine Möglichkeit, durch sie zu scrollen. Stellen Sie sich vor, wie ein Schieberegler funktioniert.

Hier ist ein stummes Beispiel die Punkte anstelle von Bildern verwendet:

ArrayList<PVector> points = new ArrayList<PVector>(); 

void setup() { 
    size(500, 500); 
    for (int i = 0; i < 1000; i++) { 
    points.add(new PVector(random(1000), random(height))); 
    } 
} 

void draw() { 
    background(0); 

    for (PVector point : points) { 
    ellipse(point.x, point.y, 10, 10); 
    } 
} 

void keyPressed() { 
    if (keyCode == LEFT) { 
    for (PVector point : points) { 
     point.x--; 
    } 
    } else if (keyCode == RIGHT) { 
    for (PVector point : points) { 
     point.x++; 
    } 
    } 
} 

In diesem Beispiel wird alle Punkte, aber man konnte translate() stattdessen einfach anrufen. Sie können auch in eine GUI-Bibliothek schauen, die einen Schieberegler für Sie implementiert.

In der Tat kommt Verarbeitung mit einem Beispiel für die Implementierung eines Schiebereglers. Gehen Sie von der PDE zu File > Examples und dann im Fenster Beispiele zu Topics > GUI > Scrollbar.

Vorgehensweise 2: Teilen Sie Ihre Bilder in Seiten auf und zeichnen Sie dann jeweils eine Seite.

Ein weiteres kleines Beispiel:

ArrayList<PVector> pageOne = new ArrayList<PVector>(); 
ArrayList<PVector> pageTwo = new ArrayList<PVector>(); 

boolean drawPageOne = true; 

void setup() { 
    size(500, 500); 
    for (int i = 0; i < 500; i++) { 
    pageOne.add(new PVector(random(width), random(height))); 
    pageTwo.add(new PVector(random(width), random(height))); 
    } 
} 

void draw() { 
    background(0); 

    if (drawPageOne) { 
    for (PVector point : pageOne) { 
     ellipse(point.x, point.y, 10, 10); 
    } 
    } else { 
    for (PVector point : pageTwo) { 
     ellipse(point.x, point.y, 10, 10); 
    } 
    } 
} 

void mouseClicked() { 
    drawPageOne = !drawPageOne; 
} 

In diesem Beispiel werden nur zwei getrennte ArrayList Instanzen und eine boolean zwischen ihnen zu wechseln, aber man konnte schicker erhalten und eine Reihe von Seiten und einen Index stattdessen verwenden.