A preface first: I want to say that in retrospect, I should have probably created a Camera class rather than rely on the TileMap to be the camera. The scrolling concept remains the same though.
I just remembered, I created an image explanation for scrolling.
The basic concept is that there are two different coordinates: the game coordinates, and the screen coordinates. Whenever I draw to the screen, I first have to translate everything over from game position to screen position.
So instead of drawing at say:
g.drawImage(image, x, y, null);
I draw at:
g.drawImage(image, x - cameraX, y - cameraY, null);
If anyone's ever done OpenGL, it's similar to applying the (model)view matrix to transform game coordinates to camera space.
Hey Mike!
ReplyDeleteI'm a huge fan of you, and I love your tutorials. You inspired me to become a programmer! I was wondering if you could make a camera class tutorial? I know that the tilemap handles the camera function, but I'm a begginer programmer, and working on developing a terraria remake. Since it uses random world generation, there is no tilemap. I would really appreciate if you could make me a tutorial, explanation, or just a reply to help me out. Thanks! And keep up the amazing work!
Sincerely,
Griffin
Making a 2D Camera really isn't much different from what I have with the TileMap. I just used the TileMap as a fake camera because that's the way I saw it before, but now I think it's a little awkward. I really should have used a Camera class.
DeleteThe concept remains the same though.
<=================================>
This is a simple example that I haven't tested:
Your basic Camera class. Only contains the position of the camera.
public class Camera() {
public static double x; // top left x
public static double y; // top left y
}
When you update, set the Camera position to anywhere you want.
Here I set the Camera to center on the Player.
Camera.x = player.getx() - Game.WIDTH / 2;
Camera.y = player.gety() - Game.HEIGHT / 2;
Then when you are rendering your game objects, you need to remember to translate them into the correct coordinates using the Camera position.
Example draw() method from some enemy class.
public void draw(Graphics2D g) {
g.drawImage(enemyImage, (int) (x - Camera.x), (int) (y - Camera.y), null);
}
The math behind this is simple.
If the enemy is at game position x = 200, and the Camera position x = 150, then the enemy should be translated to screen position x = 50.
~mike
Thank you for tutorials and this explanation about camera mechanics.
DeleteThank you for your contributions!
ReplyDeleteHello from France. Many many thanks for all this.
ReplyDeleteI wanted to let you know that I'm porting your work to c# in a forms application atm.
I have the game state manager, the scoling backgound menu and the tileset displayed (tutorial 2 ported).
Working on the played now(and global object class)
Mistralkriss at jeemail doht kom
Hello Mike!
ReplyDeleteI have one question to ask, if I want to implement also a Y-axis scrolling camera, is it already made as it is implemented? should I change the HEIGHT of the map to be higher or how?
Thanks in advance.