Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm making a web single player 2D top-down rpg using JavaScript (create js library) and have a couple questions.

For the background image, I've currently loaded a 1000x1000 bitmap to represent the background for my rpg world (per level). It's drawn in relation to the camera (aka the canvas - 500x500) so not all of it is on the screen at the same time. If it's not on the screen, is it still using resources to be drawn? I eventually want to have a much larger "world", which will require a much larger bitmap... What is the best way to load a background image?

And what about sprites? I'm assuming if I create several sprite objects with bitmaps... even if they aren't on the camera, they are still using resources? This may slow down the game.


Level loading: If I walk to another level, or go inside a building, I'd like to load that bitmap... Is there a specific way to architect level loading?

Thank you!

share|improve this question
add comment

1 Answer 1

up vote 2 down vote accepted

If it's not on the screen, is it still using resources to be drawn?

Yes

I eventually want to have a much larger "world", which will require a much larger bitmap... What is the best way to load a background image?

The best way is not have 1 image be your entire level but to have 1 image that contains tiles you piece together to create your level. This is called a tilemap. There are a lot of tools (personal favorite is Tiled) for this and its pretty easy to find a library to load and draw the tilemap for you.

And what about sprites? I'm assuming if I create several sprite objects with bitmaps... even if they aren't on the camera, they are still using resources? This may slow down the game.

Everything you draw uses resources. The simple solution to this is to see if its on the screen and only draw it when it is visible.

Level loading: If I walk to another level, or go inside a building, I'd like to load that bitmap... Is there a specific way to architect level loading?

Kinda. Usually people use a Finite State Machine or something logically equivalent to handle state. A FSM with a begin and end event allows you to load content that state needs and then clean up after yourself afterwards.

share|improve this answer
    
I'm using createJS/EaselJS right now for a library. But it doesn't seem to provide easy tilemap loading and drawing support. Which library is the easiest to implement the tilemap? Should I use Canvas Engine over Create JS? I tried following this tutorial (gamedev.tutsplus.com/tutorials/implementation/…) to write my own interpreter, but it's an Action Script 3 tut... so some of the methods/libraries he uses I don't have access to. –  Growler Aug 13 '13 at 18:06
    
Mejonjs supports Tiled tilemaps out of the box. Can't vouch for the rest of it though (haven't used it enough) –  Chris Oct 5 '13 at 8:47
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.