browser-based application, currently running on php/js/html5, jquery the only framework I’m using.
If I’ve got enough 64×64 images to fill up my screen about 100x, what technique would you recommend to move the images so that it looks like it’s scrolling?
Think oldschool top-down RPG’s if you will.
What I’m currently considering:
- HTML5 Canvas
- array1 with all the images, array keys being coords for each image
- array2 with just the images currently on the screen
- when moving to the left:
- move all images 64px to the right (so that it moves in increments)
- fetching the lacking images from the array1, stripping the ones that dropped off the screen
- removing the images that dropped off the screen from the canvas
It’s not an actual game, but that is the effect I’m trying to achieve.
I’ll take any hints/tips I can get for this; from “use html tables instead of Canvas” to “impossible to streamline this for the web”.
My main concern: speed. I’d like to be able to zoom out as well, to the point where I’d be using a LOT more images on the screen (32×32, perhaps even 16×16) but I’m aware that browser-based applications might not be up to that task.
I suggest using the MelonJS framework to handle this for you. It can use maps from Tiled Map Editor, which is just plain awesome.