hdnine

I'm having problems seeing how to solve the particular issue of returning the tile size to the caller. I have my own namespace called "goon" where i've added different functions, for example Tile below which i use to build my level. If i try:

console.log(goon.Tile.size); // This returns undefined.
console.log(goon.Tile.getTileSize()); // Throws the error: goon.Tile.getTileSize is not a function

[source lang="jscript"]goon.Tile = function(type, col, row) { this.type = type; this.size = 30; this.top = row * this.size; this.left = col * this.size; this.bottom = row * this.size + this.size; this.right = col * this.size + this.size; this.getTileSize = function() { return this.size; };}[/source]

So i tried adding a prototype and removed the above but this till doesn't work so obviously i'm doing something wrong here. I just need to get the size value from the function, is this even possible?

[source lang="jscript"]goon.Tile = function(type, col, row) { this.type = type; this.size = 30; this.top = row * this.size; this.left = col * this.size; this.bottom = row * this.size + this.size; this.right = col * this.size + this.size;}goon.Tile.prototype.getTileSize = function() { return this.size;};[/source]

Is the problem that i need to invoke or call the function first? Maybe you can't have a function within a function. Anyway, any help would be apprecieated.

Hey everyone,

As i was trying to implement my tile based level in the game i started thinking about performance. Right now the level is set up like this:

[source lang="jscript"]map: [ [2,2,2,0,0,0,0,0,0,0,0,0,0,0,2,2,2,1,1,1,0,0,0,0,0,0,0,0,0,0,0,2,2,2], [2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2], [2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2], [0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,0,0,0,0], [0,0,2,0,0,2,0,0,0,0,0,2,2,0,0,0,0,0,0,2,0,0,2,0,0,0,0,0,2,2,0,0,0,0], [0,0,0,2,2,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,2,0,0,0,0], [2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2], [2,0,0,0,0,0,0,2,2,2,0,0,0,0,0,0,2,2,0,0,0,0,0,0,2,2,2,0,0,0,0,0,0,2], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]],[/source]
The width of the screen is equal to 17 of the above 23 tiles in width. Right now, all of the above are pushed into a current level array which the drawing routine later renders to screen. This basically means that all tiles that are not 0 have their own X-Y positions and as the player moves right, all of them are updated with new X positions. I was figuring if this was a bad approach since there are so many tiles to keep track of. Half of them are rendered off-screen but still...

Would it be better to just render the first 17 columns and then have a routine that pushes the next column set into the current level array and remove the "left most" ones as the player moves right and vice versa? Would this improve performance?

The thing is that i would first have to find which column of tiles that are the next in line, pull them out, set their X-Y positions and then push them into the current level array and lastly render them out. Seems equally taxing from a performance stand point so what do you guys think?

The demo can be tested here (it also has a syntax highlighter)
http://www.wonderwor...y-and-friction/

Hey everyone,

I've yet again started a small game project where immediately i got stuck on the same subject as before, collision detection. I know that i'm not that good at math so i went with the approach i assumed as being correct. That is testing the player object against all tile objects on screen to see if there is a collision:

The syntax highlighter went mad on me so i pasted the code as text instead (it can however be viewed at the link above)

// If moving up
for(var index in Level.currentLayout) {
var obj = Level.currentLayout[index];

if(87 in Game.keys || Player.vel.y < 0 || Player.airborn) {
if(((Player.right >= obj.left && Player.right <= obj.right) || (Player.left <= obj.right && Player.left >= obj.left)) && (Player.top - distance >= obj.top && Player.top - distance <= obj.bottom)) {
Player.pos.y = obj.bottom + 1;
Player.collision.top = true;
break;
} else {
Player.collision.top = false;
}
}
}
// If moving left
for(var index in Level.currentLayout) {
var obj = Level.currentLayout[index];

if(65 in Game.keys || Player.vel.x < 0) {
if((Player.left - distance <= obj.right && Player.left - distance >= obj.left) && ((Player.bottom >= obj.top && Player.bottom <= obj.bottom) || (Player.top >= obj.top && Player.top <= obj.bottom))) {
Player.vel.x *= -1;
Player.collision.left = true;
break;
} else {
Player.collision.left = false;
}
}
}
// If moving down
for(var index in Level.currentLayout) {
var obj = Level.currentLayout[index];

if(((Player.right >= obj.left && Player.right <= obj.right) || (Player.left <= obj.right && Player.left >= obj.left)) && (Player.bottom + distance >= obj.top && Player.bottom + distance <= obj.bottom)) {
Player.pos.y = obj.top - Player.height - 1;
Player.collision.bottom = true;
Player.airborn = false;
break;
} else {
Player.collision.bottom = false;
Player.airborn = true;
}
}
// If moving right
for(var index in Level.currentLayout) {
var obj = Level.currentLayout[index];

if(68 in Game.keys || Player.vel.x > 0) {
if((Player.right + distance >= obj.left && Player.right + distance <= obj.right) && ((Player.bottom >= obj.top && Player.bottom <= obj.bottom) || (Player.top >= obj.top && Player.top <= obj.bottom))) {
Player.vel.x *= -1;
Player.collision.right = true;
break;
} else {
Player.collision.right = false;
}
}
}

It kinda works but i keep having this feeling that the code is just too complicated for a tile based 2D platform game, or, simply that it's badly written? Without physics it works really well but with it i get stuck on edges between tiles and on tiles. Alos, the gravity seems too slow but if i increase it, other things like the jumping starts to act up so i in turn have to increase that to compensate and all of a sudden everything gets messed up.

I have some code that generates the level tiles and displays them on canvas which works nicely. The problem is somewhere with the collision detection and since my math really suck, i have been reading and reading about different approaches and i just don't understand most of them.

I would really appreciate if someone could give me some input on a more correct way to handle this, preferably with example code or demo pages. Thanks a bunch!

Also: please add Javascript/Canvas to the Topic Prefix ^^