Discord
Login
Community
DARK THEME

How do I use a map array?

I can't figure out how to use a map array. Can someone tell me how I can draw/set up the array?

Okay, to begin you need to have your map like these

 grid = [
    [0,0,0,0,0],
    [0,0,0,0,0],
    [0,1,0,0,0],
    [0,0,0,0,0],
    [0,0,0,0,0]
  ]

0 will represent, for example, empty cells where you can walk, and 1, let's say, a wall What we want here is to check the player's x and y coordinates to determine if they land on cell 0 or cell 1 to perform an action. Therefore, we'll need a variable representing the map size. I suggest creating a map object with all its attributes; that would be easier.

init = function()
  map = object
    x = 0
    y = 0
    cellSize = 20
    width = 0
    height = 0
    maxScale = 100 
  end
end

You can create a player object and a cellSize variable, which will also represent your movement step (speed). As I mentioned, to perform an action, we need to know exactly which cell the player is on, so we'll create a collision function. First, we take the player's X and Y coordinates to track their location. Then, we convert these coordinates into grid indices (row and column) by dividing them by the cell size and rounding the result to the nearest integer. Finally, we check if these indices are within the map boundaries and if the target cell is a wall or a floor.

checkCollision = function(nextX, nextY)
  local col = floor((nextX + (map.maxScale/2)) / map.cellSize) 
  local row = floor(((map.maxScale/2) - nextY) / map.cellSize) 

  if row >= 0 and row < grid.length and col >= 0 and col < grid[0].length then
    // Return false if it's a wall (1)
    if grid[row][col] == 1 then
      return false
    end
  end
  return true
end

And now, each time the player moves forward, check which cell they are on.

update = function()
  if canMove then
    if keyboard.press.UP then 
      if checkCollision(player.x, player.y + map.cellSize) then player.y += map.cellSize end
    end
    if keyboard.press.DOWN then 
      if checkCollision(player.x, player.y - map.cellSize) then player.y -= map.cellSize end
    end
    if keyboard.press.LEFT then 
      if checkCollision(player.x - map.cellSize, player.y) then player.x -= map.cellSize end
    end
    if keyboard.press.RIGHT then 
      if checkCollision(player.x + map.cellSize, player.y) then player.x += map.cellSize end
    end
  end
end

So I'll give you just one small example... here it is.

init = function()
  map = object
    x = 0
    y = 0
    cellSize = 20
    width = 0
    height = 0
    maxScale = 100 
  end

  grid = [
    [0,0,0,0,0],
    [0,0,0,0,0],
    [0,1,0,0,0],
    [0,0,0,0,0],
    [0,0,0,0,0]
  ]
    
  canMove = true
  
  player = object
    x = 0
    y = 0
  end
end

checkCollision = function(nextX, nextY)
  // Convert pixels to array indices
  local col = floor((nextX + (map.maxScale/2)) / map.cellSize) 
  local row = floor(((map.maxScale/2) - nextY) / map.cellSize) 

  // Check array boundaries
  if row >= 0 and row < grid.length and col >= 0 and col < grid[0].length then
    // Return false if it's a wall (1)
    if grid[row][col] == 1 then
      return false
    end
  end
  return true
end

update = function()
  if canMove then
    if keyboard.press.UP then 
      if checkCollision(player.x, player.y + map.cellSize) then player.y += map.cellSize end
    end
    if keyboard.press.DOWN then 
      if checkCollision(player.x, player.y - map.cellSize) then player.y -= map.cellSize end
    end
    if keyboard.press.LEFT then 
      if checkCollision(player.x - map.cellSize, player.y) then player.x -= map.cellSize end
    end
    if keyboard.press.RIGHT then 
      if checkCollision(player.x + map.cellSize, player.y) then player.x += map.cellSize end
    end
  end
end

draw = function()
  screen.clear("white")
  
  // Draw Map Background
  screen.fillRect(map.x, map.y, map.maxScale, map.maxScale, "rgb(114,114,147)")
  screen.drawRect(map.x, map.y, map.maxScale, map.maxScale, "rgb(54,54,70)")
  
  // Draw Grid Lines
  for i = -map.maxScale/2 to map.maxScale/2 by map.cellSize
    screen.drawLine(i, -map.maxScale/2, i, map.maxScale/2, "rgb(54,54,70)")
    screen.drawLine(-map.maxScale/2, i, map.maxScale/2, i, "rgb(54,54,70)")
  end
  
  // Draw Walls from Grid Array
  for row = 0 to grid.length - 1
    for col = 0 to grid[row].length - 1
      if grid[row][col] == 1 then
        local wallX = -map.maxScale/2 + (col * map.cellSize) + map.cellSize/2
        local wallY =  map.maxScale/2 - (row * map.cellSize) - map.cellSize/2
        screen.fillRect(wallX, wallY, map.cellSize, map.cellSize, "rgb(54,54,70)")
      end
    end
  end

  // Draw Player
  screen.fillRect(player.x, player.y, map.cellSize, map.cellSize, "rgb(255,170,0)")
end

Post a reply

Progress

Status

Preview
Cancel
Post
Validate your e-mail address to participate in the community