How to create an interactive world

General Discussion Other

azurevista

How to create an interactive world

in General Discussion • Other • 1 year ago

So I'm working on building and creating an interactive 2D world. I want the user to be able to move his cursor to the edge of the screen and scroll the world, as in the manner of a side scroller.

How do I go about this? Are there any libraries that are needed for something like this? Right now, I have a world composed of array objects that are displayed as blocks, as well as numerous other object classes that are displayed. How do I scroll the screen?

Thanks!

Replies(5)

asimes

Re: How to create an interactive world

1 year ago

No, you don't need a library and there are multiple ways of doing this. A simple one would be to have hotspots on the sides of your screen. If mouseX is inside of the left-hand hotspot then move all objects right and the opposite for when mouseX is inside the right-hand hotspot. Another method (might be easier) would be to always draw everything, even if it is off camera. Then instead have the left / right hotspots set a translate for left / right.

It is worth noting that you can do tests to see if something should be drawn with either of the methods really but this shouldn't matter too much unless you are doing very intensive drawings.

azurevista

Re: How to create an interactive world

1 year ago

So I would have to call a move function for every single object then? I have a massive amount of objects and objects stored in arrays, as well as collision functions, I would have to write multiple for loops and...it would get pretty messy.

Is there an easier way that I'm just not seeing?

I'd effectively have to do this:

Copy code

for (int i; i<worldXSize; i++) {
for (int j; j<worldYSize; j++) {
world[i][j].xPos+=4;
world[i][j].yPos+=4;
}
}

For every object I have

asimes

Re: How to create an interactive world

1 year ago

Then do the translate method (although the first method would not affect your collisions). Keep a "x" coordinate that represents your camera and have the hotspots affect that varaible. Then translate according to where the variable points.

For example, when your program starts, set the variable to "0". If you want to move 30 units left make it -30 and translate before you draw everything by that amount. If moving up / down matters then keep a "y" variable as well.

azurevista

Re: How to create an interactive world

1 year ago

Alright..now I store the x and y position of all of my objects with an xPos and yPos variable, which is what my collision system is based on...will the translate function adversely affect that?

asimes

Re: How to create an interactive world

1 year ago

No, it will just affect where it gets drawn to the screen.

http://processing.org/learning/transform2d/

EDIT: Here is a very simple navigation:

Copy code

int x = 0;
void setup() {
size(600, 200);
mouseX = width/2;
}
void draw() {
background(255);
// The "hotspots"
fill(255, 0, 0, 128);
rect(0, 0, 100, height);
if (mouseX < 100) x++;
rect(width-100, 0, 100, height);
if (mouseX > width-100) x--;
// This moves everything based on the mouse
translate(x, 0);
// The world
int boxSize = 20;
fill(255);
for (int i = 0; i < (width*3)/boxSize; i++) {
rect(-width+i*boxSize, i*2, boxSize, boxSize);
}
}

You can make x++ / x-- bigger to make it move faster. Better yet have "x" be affected by its proximity to the side of the screen.

Top Reply