Creating a Border using Sprite Blocks

[Shadow3489]

I'm trying to make this game, and I'm starting with implementing the borders, but it's harder than I thought. However, I'm able to make a layer for the bottom part of the screen, but I don't know what to do for the other three sides.

Here's what I've got so far:

Code: Select all

require 'Util'

Map = Class{}

TILE_BRICK = 2
TILE_EMPTY = -1

local x = 1

function Map:init()

    self.spritesheet = love.graphics.newImage('images/Blocks.png')
    self.sprites = generateQuads(self.spritesheet, 16, 20)

    self.tileWidth = 16
    self.tileHeight = 16
    self.mapWidth = 30
    self.mapHeight = 28
    self.tiles = {}


    self.mapWidthPixels = self.mapWidth * self.tileWidth
    self.mapHeightPixels = self.mapHeight * self.tileHeight

    for y = 1, self.mapHeight do
        for x = 1, self.mapWidth do
            self:setTile(x, y, TILE_EMPTY)
        end
    end

    for y = self.mapHeight / 2 + 1, self.mapHeight do
            for x = 1, self.mapWidth do
                    self:setTile(x, y, TILE_BRICK)
            end
    end

end

function Map:getTile(x, y)
    return self.tiles[(y - 1) * self.mapWidth + x]
end

function Map:setTile(x, y, id)
    self.tiles[(y - 1) * self.mapWidth + x] = id
end

function Map:render()
    for y = 1, self.mapHeight do
        for x = 1, self.mapWidth do
            local tile = self:getTile(x, y)
            if tile ~= TILE_EMPTY then
                love.graphics.draw(self.spritesheet, self.sprites[tile],
                    (x - 1) * self.tileWidth, (y - 1) * self.tileHeight)
            end
        end
    end
end

I've also attached a screenshot of the result.

[MrFariator]

You could do it in a single pass like the following.

Code: Select all

for y = 1, self.mapHeight do
  for x = 1, self.mapWidth do
    -- If the tile's x matches 1 or map width, we know it's along the edge of the map
    -- Same for y, except checking against map height
    if x == 1 or x == self.mapWidth or y == 1 or y == self.mapHeight then
      self:setTile(x, y, TILE_BRICK)
    else
      self:setTile(x, y, TILE_EMPTY)
    end
  end
end

Or alternatively if you want to handle them in separate loops (eq. maybe setting different looking tiles?), you could do something like

Code: Select all

-- Set the top and bottom borders
for x = 1, self.mapWidth do
  self:setTile ( x, 1, TILE_BRICK ) -- top border
  self:setTile ( x, self.mapHeight, TILE_BRICK ) -- bottom border
end

-- Set the left and right borders
-- We can skip the top and bottom rows because they were already handled by the loop above, hence y=2 and self.mapHeight-1
for y = 2, self.mapHeight-1 do
  self:setTile ( 1, y, TILE_BRICK ) -- left border
  self:setTile ( self.mapWidth, y, TILE_BRICK ) -- right border
end

However, in your attached screenshot 27 tiles fit on the screen horizontally, while your map dimensions specify 30 tiles. So your borders at the right and bottom may go off screen, if you intend everything to fit on a single screen.

[Shadow3489]

However, in your attached screenshot 27 tiles fit on the screen horizontally, while your map dimensions specify 30 tiles. So your borders at the right and bottom may go off screen, if you intend everything to fit on a single screen.

That actually worked! But you mentioned about my right and bottom border going off-screen (which they did) how do I fix that? I've tried changing the mapWidth but nothing happened.

[MrFariator]

Well, as I said, your map can fit up to 27 tiles on the screen horizontally. That means that in order to fit the rigtht border on the screen, mapWidth must be 27 or less. If you didn't see anything happening, then it's likely your dimensions were still out of bounds of the window. Basically, just divide the window resolution by 16 (your tiles' size), separately for horizontal and vertical axes, to get that maximum numbers you can work with.

[Shadow3489]

Well, as I said, your map can fit up to 27 tiles on the screen horizontally. That means that in order to fit the rigtht border on the screen, mapWidth must be 27 or less. If you didn't see anything happening, then it's likely your dimensions were still out of bounds of the window. Basically, just divide the window resolution by 16 (your tiles' size), separately for horizontal and vertical axes, to get that maximum numbers you can work with.

It worked! Thank you so much!