Canvas problems

[astralaaron]

EDIT: when visiting the example links, press enter to get to level one (map screen)

 

Making a small game for fun/learning...but I ran into a problem. I am hoping someone can explain why this is happening.

 

Subject 1:

LevelOne.prototype.draw = function() { 		this.game.showMap();	for (var i=0; i < this.gameObjects.length; i++) {		this.gameObjects[i].draw();	}	}

If I leave out the showMap(); function, the game objects draw fine (small character that can walk around, and a couple stationary characters) When I add the showMap(); function, the map draws out fine, but the game objects are not there.

click here for example 1

 

 

 

Subject 2:

LevelOne.prototype.draw = function() { 		for (var i=0; i < this.gameObjects.length; i++) {		this.gameObjects[i].draw();	}	this.game.showMap();}

when I change this function to code above (draw objects first), the map draws, and so do the gameObjects, but as you would expect..the map is overlaying on top of my game objects...

click here for example 2

 

 

 

 

 

 

 

in case it will help diagnose... here is the showMap() function:

	this.showMap = function() {		for(var i=0; i < engine.tiles.length; i++) {			for(var j=0; j<engine.tiles[0].length; j++) {				var spriteOffset = {					'x': engine.tiles[i][j].W * (engine.tiles[i][j].type - 1),					'y': 0,					'w': engine.tiles[i][j].W,					'h': engine.tiles[i][j].H 				}				engine.getScreen().drawImage(engine.tileSheet, spriteOffset.x, spriteOffset.y, spriteOffset.w, spriteOffset.h, engine.tiles[i][j].X, engine.tiles[i][j].Y, engine.tiles[i][j].W, engine.tiles[i][j].H);			}		}	}

Really appreciate any help, this has my head spinning.

Edited October 8, 2013 by astralaaron

[Ingolme]

I'm getting an error in my console in the showMap function:

 

IndexSizeError: Index or size is negative or greater than the allowed amount

 

It seems that some of the values you're passing to drawImage() are negative or too large.

Maybe this line is resulting in a negative number

engine.tiles[i][j].type - 1

[astralaaron]

Ignolme, you are right.. I changed it to this and it works:

 this.showMap = function() {        for(var i=0; i < engine.tiles.length; i++) {            for(var j=0; j<engine.tiles[0].length; j++) {                if (engine.tiles[i][j].type==0) continue;                var spriteOffset = {                    'x': engine.tiles[i][j].W * (engine.tiles[i][j].type - 1),                    'y': 0,                    'w': engine.tiles[i][j].W,                    'h': engine.tiles[i][j].H                }                engine.getScreen().drawImage(engine.tileSheet, spriteOffset.x, spriteOffset.y, spriteOffset.w, spriteOffset.h, engine.tiles[i][j].X, engine.tiles[i][j].Y, engine.tiles[i][j].W, engine.tiles[i][j].H);            }        }    }

If it was a blank tile (0) then it was causing it to go -1. Thanks so much for your help. By the way, how did you see the error?

Edited October 8, 2013 by astralaaron

[Ingolme]

I use Firebug, but other browsers have their own developer tools. In most browsers pressing F12 will open developer tools, which include a console that shows Javascript errors. If you use Firefox but don't have the Firebug add-on, pressing Control+Shift+J will open the Javascript error console.

[astralaaron]

Thank you Ignolme