Maps and map collisions

Hi, thanks for reading this. I've been having trouble with map collisions and maps in general without using the Quick engine. I've only used them for backgrounds before.

So I have a key question that I would love to get an awnser for:D:

  1. How do I detect collisions between sprites and maps? As an example I could point out Meowy's Adventure and the Quick engine map collisions.

    Cheers, mrBoi

Well, first you need to find out your x and y position on the map. It can be tricky and it depends a lot on where the map is positioned on the screen and it's size and some other factors, and I'm not great with that (I just experiment until I get it working). Once you get the x and y on the map, you can use maps["(map_name)"].get(x, y) to find the tile you are currently standing on, and then do some logic saying something like:

if moving right
if moving left
if moving up
if moving down

to get the tile in front. Hope this helps, sorry if I made it sound more complicated than it is

Thanks for your help. It is really nice finally to understand something about it:D

But how do I exacly know my location on the map?

First, just in case you didn't know, there's a video tutorial that talks a bit about a simple collision solution.


The topic of collision starts at around 3:50 timestamp.

As for your question about location on the map - you basically need to switch from your normal coords system into "map coords" system. It's a bit tricky, because 1 unit on your map is multiple normal units.

I'll start from map -> normal translation, as I feel it's a little easier.

// function that returns an 2-element array.
// Number under index 0 is x component of game coord
// Number under index 1 is y component of game coord
getGameCoordsFromMap = function(mapX, mapY)
  // let's say your map is build out of tiles with 16x16 size
  tile_width = 16
  tile_height = 16

  gameCoord = []

  // first, multiply your map coord times the number of units in each tile.
  // then (and this depends on your game) add additional half of the tile size
  //      - multiplication alone will give you coords of upper-right corner of the tile. If that's what you need, you can leave it as is.
  //        If you want coords of the middle of the tile, add this extra half of tile size.
  gameX = mapX * tile_width + (tile_width/2)
  gameY = mapY * tile_height + (tile_height/2)

  // second, by default maps and game world use different coords systems - game world starts in the very middle and then positive value go up and right
  // while negative values go left and down
  // maps on the other hand have their (0,0) point in the down-left corner.
  // This strongly depends on your game again, but there's a good chance you'll have offset your normal coords by that difference.
  // I'll asume you draw your map on the (0,0) point of your normal game coords, which means the offset will be
  // exactly half of your screen size in both directions.
  gameX -= screen.width / 2
  gameY -= screen.height / 2

  // with all that done, store game coords in output table and return result

  return gameCoord

Not a trivial thing, I admit.

To translate your normal game coords into map coords, you need to do exactly the same things, but in reverse.

// function that returns an 2-element array.
// Number under index 0 is x component of map coord
// Number under index 1 is y component of map coord
getMapCoordsFromGame = function(gameX, gameY)
  // let's say your map is build out of tiles with 16x16 size
  tile_width = 16
  tile_height = 16

  mapCoord = []

  // first, apply the offset
  gameX += screen.width / 2
  gameY += screen.height / 2

  // second, divide your coords by size of the tile
  mapX = gameX / tile_width
  mapY = gameY / tile_height
  // a little catch - this division almost for sure will give you a fraction as a result, which is a problem, because maap coords are always
  // natural numbeers. The result is a fraction because in most cases game coords will fall into some of the 16x16 square that
  // creates one tile of the map. This fraction is the fraction of thee tile away from the uppeer-left corner of the map tile.
  // You need to get rid of the fraction part, as you cna do it easily using floor() function build into microScript
  mapX = floor(mapX)
  mapY = floor(mapY)

  // with all that done, store map coords in output table and return result

  return mapCoord

Hope I was able to explain it clearly enough...

A few notes though:

  • The code only works if your map is centered. If your map is off to the side (which it almost never is if you want to detect collisions, but maybe splitscreen or something?) than you need to offset the result
  • You can find the block width/height dynamically with map.block_width and map.block_height

Thank you all of your help, it cleared up some things about map collisions:D

Post a reply



Validate your e-mail address to participate in the community