Camera-layers system

[verilog]

Hey guys!

I apologize in advance for this lengthy post. Recently I've been thinking about my camera-layers system, mostly ways of improving it, but also, I've been wondering if my approach is correct or efficient. While it currently works, I feel that my current system is a little bit complicated, and could use some simplifications.

Let me give you a little background of my problem: The goal of my camera-layers system is to implement the functionality of a basic camera scrolling through different “layers” of images that make up the current game scene. It is my version of a parallax scrolling system.

My original idea involved the splitting of every image layer in 800 x 600 (my current screen resolution) chunks, and the rendering of the current, previous and future scene images, according to the player's position. I call this image array, the “Middle row”. Refer to the following image for a visual explanation:



The system is always rendering and scrolling three images, this gives a sense of a continuous and large world. This covers the horizontal axis, I can apply the same idea to the vertical axis, adding two additional rows of images (Top and Bottom):



So, I end up with a 3 x 3 matrix that is constantly drawn. Each element is an 800 x 600 image, the contents are scrolled according to the player’s position, and I can add any number of layers as part of each matrix element. Check out the final matrix structure, the camera's current “focus” area (the only image currently on screen) is delimited by a red rectangle. For testing purposes I'm currently drawing a 3 x 2 matrix, since (for the moment) I really don't need a "bottom" row.

This works well, and I manage to draw only the necessary portions of images. However, I still feel this approach is somewhat complicated, as I draw 800 x 600 x 9 images, and that’s still a lot of data. The code is a little bit complex, too.

One potential simplification I've been thinking of is drawing just 5 images in the following “cross” array:



Also, as stated above, my current image resolution is 800 x 600, but I plan to switch to a default resolution of 960 x 540 and maybe I'll need to further break up these images into 512 x 512 chunks, what do you think?

I prepared a little demo of my camera-layers system, feel free to check it out and share your thoughts and comments below.

My camera system. Let me show you it :

Move camera with arrow keys.
Press "Z" to zoom out, this will show the entire canvas.
Press "X" to zoom in.

[rexjericho]

Hey, I was getting an error when running the .love file:
module 'game.lua' not found: no file "game/lua.lua" in LOVE game directories.

This was an easy fix of changing line 4: (require "game.lua") to
require "game"

I timed from the start of love.update() to the end of love.draw() and was averaging less than a millisecond per frame. At 60fps, that allows you for about 16.7ms per frame, so right now, that is taking up less than 6% of the frame time. I was able to execute object:draw() 16 times per frame before I saw a drop in framerate. If you're drawing 6 images for the foreground and 6 for the background, that means 192 800x600 images were being drawn each frame! I'm running this on a 6 year old nvidia gt 9600 graphics card for reference. Right now, this process does not seem like a performance issue at all.

If you're worried about performance, you can try splitting up your images into smaller tiles. For example, if you split your images into 200x150 pixel tiles then you can render like this:

Code: Select all

0 = image tiles
| = screen edges
  
  0000
0|0000|0
0|0000|0
0|0000|0
0|0000|0
  0000

So now you can draw 16 tiles for the screen and 16 tiles outside of the screen. It's like you're drawing and equivalent 2 800x600 images. There's even a tutorial on tile based scrolling:
https://love2d.org/wiki/Tutorial:Tile-based_Scrolling

[verilog]

Hey, rexjericho!

Thanks for your feedback man, I appreciate your timing analysis, this is really helpful. Sorry about the require error, it slipped past me.

I'll definitely split up my images into smaller chunks now that I plan to use a higher image resolution, thanks for the advice, this should be relatively easy to implement.

Thanks again for your time!