Help with tile-based collision detection

[raenset]

Greetings, I would like to implement some sort of collision detection between character and tiles in this sample tile-based-world code, but I am not getting it.

 

Just for testing purposes, I tried to make the character hide when he collides with GRASS state tiles, as you can see in the code, but it doesn't work. I am certainly missing something...

 

Here it is: 

http://www.retroinvaders.net/tileCollisions.html

 

Website is mine, but sample code and library (SimpleGame.js) are taken from the book "HTML Game Development for Dummies", by A. Harris. 

 

Anyone can help? Thanks.

[Deban]

First try to say which line is the problem, and please remove the things that doesn't do anything (like gravity).

Going through all your code to find what you want to do is not fun.

 

In your library:

 this.collidesWith = function(sprite){    //check for collision with another sprite....}

And then in your code:

if (character.collidesWith(tileset) && (tileset.state == 0)){  character.hide();}

tileset is an array, and you should send an image.

I thing that what you want to do is something like: 

character.collidesWith(tileset[Math.floor(character.x / tilesize)][Math.floor(character.y / tilesize)]

[raenset]

Thank you for your answer.........Please excuse me for the unnecessary code, but I think that the main focus is here: 
 

tCharacter.checkCollisions = function (){if (this.collidesWith(tileset.state(GRASS)))  //which is another way that i recently tried, but it does not work....          {this.hide();          }                                        }

I would like the character disappear (hide), just for collision testing purposes, when it encounters the GRASS state tile, in other words when he "goes out" of the street. But I am not getting it right, how to do this? Once this is done and working, instead of making it hide, i can make it do some predictive collision detection, i.e. making it stay in the road, but first I have to work out the "tile-based" collision, which does not work.  

[Deban]

You seems to don't understand JavaScript.

 

tileset is an array. tileset.state does not exist.

 

An array is a group of things put together in one place. You can see an array as a street with lot's of buildings in it.

You are trying to ask if the street is a specific building (if the array is a specific tile).

 

That doesn't make sense to the program, of course a street will never be a building. The building is that street? yes, but is not the street itself.

You are using the array and not what it's inside the array. You need to specify directions in the array. Say which is the address you want to go:

tileset[x][y]

That means: in the array, look for the tile that is at the position x and y.

 

 

Here you are using it correctly:

currentVal = map[row + offRow][col + offCol];tileset[row][col].setState(currentVal);tileset[row][col].update();

Second, as I already told you. Your collidesWith is asking for a sprite, you need to send it a sprite.

 

Third, tileset.state(GRASS) does not exist. You are using a variable as if it was a function. What you meant is state === GRASS.

 

Fourth, you are using the if wrong. You should use an and (&&), but instead you are trying to paste all in one sentence.

 

I think that what you are trying to do is check if the character collides with any grass tile. But that goes against the idea of using tiles. If you use tiles, just check the tile that the character is currently on (or about to move to for the matter) and not all the tiles.

Anyway, to check all the tiles you would have to check them one by one, you can't send the array and hope for the best.

 

 

 

You have so much bugs, and so much confusion about how things work in you own code that I think that you don't really know about JavaScript and basically you are trying to bite off more than what you can chew.

Start with the basics. You can't hack your way into a game. You need at least to understand the very basics of an array and difference between a function an a value.

If you just want to make a game and you don't really care about JavaScript, that is perfectly fine. Is a perfectly honest opinion, and you can use things like Game Maker or even Construct 2, they are pretty good tools.

 

If you still want to know how to right that particular line here it's:

if (tileset[characterCurrenTileX][characterCurrenTileY].state === GRASS) {  character.hide();} 

For that you need to get in which tile the character is standing.

 

But I can't assure that it'll work, you probably have a lot of bugs elsewhere.

[raenset]

I often read that games are a great way to start learning how to program... 
 

[raenset]

I am a beginner in JavaScript and programming in general. 

[raenset]

You seems to don't understand JavaScript.

 

tileset is an array. tileset.state does not exist.

 

An array is a group of things put together in one place. You can see an array as a street with lot's of buildings in it.

You are trying to ask if the street is a specific building (if the array is a specific tile).

 

That doesn't make sense to the program, of course a street will never be a building. The building is that street? yes, but is not the street itself.

You are using the array and not what it's inside the array. You need to specify directions in the array. Say which is the address you want to go:

tileset[x][y]

That means: in the array, look for the tile that is at the position x and y.

 

 

Here you are using it correctly:

currentVal = map[row + offRow][col + offCol];tileset[row][col].setState(currentVal);tileset[row][col].update();

Second, as I already told you. Your collidesWith is asking for a sprite, you need to send it a sprite.

 

Third, tileset.state(GRASS) does not exist. You are using a variable as if it was a function. What you meant is state === GRASS.

 

Fourth, you are using the if wrong. You should use an and (&&), but instead you are trying to paste all in one sentence.

 

I think that what you are trying to do is check if the character collides with any grass tile. But that goes against the idea of using tiles. If you use tiles, just check the tile that the character is currently on (or about to move to for the matter) and not all the tiles.

Anyway, to check all the tiles you would have to check them one by one, you can't send the array and hope for the best.

 

 

 

You have so much bugs, and so much confusion about how things work in you own code that I think that you don't really know about JavaScript and basically you are trying to bite off more than what you can chew.

Start with the basics. You can't hack your way into a game. You need at least to understand the very basics of an array and difference between a function an a value.

If you just want to make a game and you don't really care about JavaScript, that is perfectly fine. Is a perfectly honest opinion, and you can use things like Game Maker or even Construct 2, they are pretty good tools.

 

If you still want to know how to right that particular line here it's:

if (tileset[characterCurrenTileX][characterCurrenTileY].state === GRASS) {  character.hide();} 

For that you need to get in which tile the character is standing.

 

But I can't assure that it'll work, you probably have a lot of bugs elsewhere.

 

All other considerations about my understanding and knowledge apart, and assumed that this is the right way to go, what to put insead of "characterCurrenTileX" to make this code work? I mean, is there a more down to earth way to express this concept, so that the JavaScript will understand it? 

[Deban]

I often read that games are a great way to start learning how to program... 

 

That could be true, but it can also become a real nightmare.

Some games are really complex, so it depend in what game you are making.

Also take in mind that with games you are handling a lot of things that have nothing to do with programming it self, like images, sound, loading files, keyboard, mouse, etc...

 

I think when they say that, they mean more a snake or a minesweeper.

 

 

All other considerations about my understanding and knowledge apart, and assumed that this is the right way to go, what to put insead of "characterCurrenTileX" to make this code work? I mean, is there a more down to earth way to express this concept, so that the JavaScript will understand it? 

The easy way is: world position of the character / size of tiles

The size of the tiles is 32 but the world position of the hero does not exist in your library.

 

By world position I meant the position respect of the world 0,0.

Your character has a position that is the position of the sprite, not the real position of the character; and you update this position (the one of the sprite).

The difference is that the position of the sprite is measure with the screen, the same values will always be in the same position of the screen no mater where your hero has move before.

The world position is absolute to the world, for example your character can always be beside a river or a tree with the same values. Even if it's out of screen or the world is scrolled and it's in a different part of the screen.

 

 

Let me tell you some basics about games that can help you:

-First the game exist even if no one is looking at it. I'm no trying to be Zen here, what I mean is that your games run, things move and live, combats happens and maybe things die AND you have to show that to the player. The and is the main part, your game exist and lives by it's own, and a second part of making a game is that you have to show what is happening.

What this means in concrete terms is that the way you represent your game, the way you show it, should be separated from the game itself. A character is not a sprite. A character contains a sprite that is it's graphical representation. The position of the sprite is not the position of the character.

The graphic of something is not that something; and you should think them as separate things. This is one of the most strange things to people that start making games.

There lot's of reason for this separation, one really important is that doing things with sprites (like moving) is more intensive that just doing it to normal number. In a normal game you may move your character (or a lot of characters) 4 times (move, collide with something and move out of collision, get hit and move back and use a skill and teleport to another place for example) and it will be much faster if you just update the graphic at the final position only.

 

-The world is absolute, it doesn't move and everything exist in a coordinate in that world. When you move in the world you character moves for real in the world (change position) and, possible, a camera moves. The camera is what gets move, not the world. The function of the camera is what it sounds, show a specific part of the world. The most close thing to this that you have is the offCol and offRow (the distance of the camera from the 0,0 of the world, but in tiles).

 

Your library does not respect this things, hence it make things really complicated to code.

 

The code is:

var characterCurrentTileX = Math.floor(character.x / 32) + offCol;var characterCurrentTileY = Math.floor(character.y / 32) + offRow;

I really admire you resolution and perseverance, good luck.

[HotNoob]

Games are definitely a good way to learn to program / a language. 

2nd program that i wrote in C# aside from "hello world" was an XNA Based Game ( MMO RTS ). 

The idea is that you are challenging yourself through re-inventing the wheel and understanding every little bit, completing the picture, rather than going through a million boring, completely useless tutorials / lessons, that ultimately only teach you to copy and paste. 

 

Hell, i used to do people's project finals for freaking university, and i can confidentially tell you that 1 month of programming on a challenging project will provide you with more befits than a 2 year computer science degree, or really... any 2 year programming related degree.
The people who come fresh out of university can't program worth shit; something that i do in a week, would take them half a year. 
It really truely is a complete waste of time to get a computer science degree...aside from the stupid bureaucracy... wasting 2 years learning only to copy and paste. 

Anywho lol. 

OP; if i were you, i would start from scratch, without a game engine or a framework. A good programmer can write one of those stupid frameworks in a day anyways, and you won't be wasting weeks trying to figureout how someone else's code works. 

Sorry if im offensive; i offend most people by nature. 

[raenset]

That's what I was thinking, to concentrate on coding and game coding without any library or game engine, for some reasonable time. 

 

Most geeks are aggressive by nature, anyway...no worries...