Sign in to follow this  
Dauid

Large image splitting, onload event and javascript

Recommended Posts

Dauid    110
Greetings good people,

I am in need of a few pointers regarding the code design of my current game project.
I decided to try out javascript for the first time now that the wonderful canvas tag has been introduced.

My problem is as follows:
I'm creating type of 2D up- and sidescrolling spaceship game and the graphics of each level is a large image (PNG-format, varying dimensions but larger than the viewport). The images can get pretty large so I wonder if using javascript or/and [i]a[/i] canvas-tag I could split the image into smaller images and storing them in a two-dimensional array. Or if another solution is more optimal e.g just clipping the large image to fit the viewport.
Even if clipping the image is a better solution, the "large image into array of small images"-solution would be prominent to the loading of my collision data. I have two seperate images with the same dimensions to each level, one with the graphics and one with color-coded collision data.
At the moment my solution is a small C# program that reads the collision data image and saves it as a text-document which I in turn load with javascript as a string and read out the data. This is a bit inconvenient because I want to ease up the level-editing process.

I also have a problem I can't quite understand:
When I load the image to a level some of my math is using the dimensions of the image,
code snippet:

[code]function loadLevel(filename)
{
levelCollisionMap = new Image();
levelCollisionMap.src = filename+"CollisionMap.BMP";
levelCollisionMap.onLoad = collisionMapOnLoad(filename);
}
function collisionMapOnLoad(filename)
{
levelWidth = levelCollisionMap.width;
levelHeight = levelCollisionMap.height;
// .... doing other stuff
}[/code]

when the collisionMapOnLoad-function executes at browser-startup the width and height of levelCollisionMap is 0, but on a refresh it is loaded.

Grateful for help
David

Share this post


Link to post
Share on other sites
Adam_42    3629
Firstly you might want to fix this issue: http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called

Also look at comment 91 on that page. You could try setting a timeout if the width is zero to check it again later.

Make sure you test it on multiple browsers.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this