Jump to content
  • Advertisement
Sign in to follow this  

Large image splitting, onload event and javascript

This topic is 2793 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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

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

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

Share this post

Link to post
Share on other sites
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
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!