The easiest way to layer images?

General Discussion Other

kingdrago..

The easiest way to layer images?

in General Discussion • Other • 9 months ago

Hi,

I am working on a puzzle game, and I'm having trouble layering the objects so that when one of the pieces is 'picked up' by the mouse, it is drawn to the front until another is placed on top. Now, I understand that the ones drawn last in the program will be the ones visible at the front, but the trouble is I don't know how to achieve this.

At the moment, I have made it so that the one being picked up is drawn to the front, but as soon as the mouse button is released it goes back to its normal depth. This would be fine, but as I create the pieces like this:

01, 02, 03,

04, 05, 06,

07, 08, 09.

... piece number 01 will always be drawn behind 02 etc., which gives the game away as it shows where the piece is meant to be.

I have been looking around for an answer to a similar question for a while, but I haven't found any which match my problem. Any help on how to alter the depth of objects would be greatly appreciated :)

Thanks in advance,

KingD.

P.S. Sorry if I have been a bit vague, please ask if something I've said doesn't make sense :)

Replies(2)

amnon.owed

Re: The easiest way to layer images?

9 months ago

Make a small class that can hold an image and it's position (and perhaps drag/display methods).

Always put the dragged image at the end of the arraylist.

Loop through the arraylist to draw the images.

Code Example

String urlOne = "http://www.fotografiewimvanvelzen.nl/sco/images/L20090805-017-018v2b.jpg";
String urlTwo = "http://0.tqn.com/d/landscaping/1/0/P/landscaping2.jpg";
String urlThree = "http://www.lifemartini.com/wp-content/uploads/2012/07/landscape.jpg";
ArrayList <ImageHolder> pieces = new ArrayList <ImageHolder> ();
ImageHolder selectedImageHolder;
void setup() {
size(600, 600);
pieces.add( new ImageHolder(urlOne, 100, 100) );
pieces.add( new ImageHolder(urlTwo, 150, 150) );
pieces.add( new ImageHolder(urlThree, 200, 200) );
}
void draw() {
background(0);
for (ImageHolder h : pieces) {
h.display(); // draw images from start to end of the list (aka last image is on top)
}
}
void mousePressed() {
for (int i=pieces.size()-1; i>=0; i--) {
ImageHolder h = pieces.get(i);
if (h.isOverImage()) {
selectedImageHolder = h;
pieces.remove(selectedImageHolder); // remove from list
pieces.add(selectedImageHolder); // place at the end of the list
break;
}
}
}
void mouseDragged() {
if (selectedImageHolder != null) {
selectedImageHolder.x += mouseX-pmouseX;
selectedImageHolder.y += mouseY-pmouseY;
}
}
void mouseReleased() {
selectedImageHolder = null;
}
class ImageHolder {
PImage img;
int x, y;
ImageHolder(String url, int x, int y) {
img = loadImage(url);
this.x = x;
this.y = y;
}
void display() {
image(img, x, y);
}
boolean isOverImage() {
return (mouseX >= x && mouseX <= x+img.width &&
mouseY >= y && mouseY <= y+img.height);
}
}

kingdrago..

Re: The easiest way to layer images?

9 months ago

Hi,

Wow, thanks a lot! :) I wasn't expecting so much help!

I've learnt loads just from looking at the example, and I'll now experiment with it - thanks :)

KingD.

Top Reply