Original Post
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:
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
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