Jump to content

  • Log In with Google      Sign In   
  • Create Account

Interested in a FREE copy of HTML5 game maker Construct 2?

We'll be giving away three Personal Edition licences in next Tuesday's GDNet Direct email newsletter!

Sign up from the right-hand sidebar on our homepage and read Tuesday's newsletter for details!


We're also offering banner ads on our site from just $5! 1. Details HERE. 2. GDNet+ Subscriptions HERE. 3. Ad upload HERE.


Large image splitting, onload event and javascript


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
1 reply to this topic

#1 Dauid   Members   -  Reputation: 110

Like
0Likes
Like

Posted 21 February 2012 - 01:56 AM

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
David

Sponsor:

#2 Adam_42   Crossbones+   -  Reputation: 2563

Like
0Likes
Like

Posted 23 February 2012 - 05:02 PM

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.




Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS