How Camera works ?

[Jerkoco]

Hello ! I'm currently making a custom engine in JavaScript (canvas).

I already did sprites, particles, events (touch, keyboard, mouse) and a basic script to render tilemaps (no scrolling yet)

I want to code the scrolling, camera and world system. If I create a game with a world of 30,000 pixels width and 15,000 pixels height, and my camera is in 800x and 800y for exemple; should I:

-Call render and update functions for every element in the world (even if they are outside the canvas)

-Get elements who are in the camera to update and render them.

- Should I do something else ? What is the best thing to do ?

 

Thanks

[Firenibbler]

You should have a camera object, with a location and a size (x,y,width,height) only render what is in the camera reagan. Update everything else unless there is no need to. The camera acts as a 'viewport' into the game world. Ro only render what you need to, but remember that the rest of the world needs to update as well.

[DexterZ]

Aside from creating Tile Camera, it's a good idea to expose object position on screen and world position. for a device pointer to interact

TileSpriteObj.Pos.x // World postion X.
TileSpriteObj.Pos.y // World postion X.

TileSpriteObj.ScreenPos.x // Screen postion X.
TileSpriteObj.ScreenPos.y // Screen postion Y.

A drawable tile list is a nice addition for faster rendering, push all tile sprite on a drawable list which is culled from the camera you only do this when the camera moves. and draw all the tile list on render time. you do the culling when camera moves and test every tile-sprite if culled from camera on update.