Jump to content


Recommended Posts

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 :)

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...