Simple Tiled Implementation - STI v1.2.3.0

[Karai17]

STI is primarily a map loader and renderer, it won't really help you too much with game mechanics such as building grids or what have you.

[neenayno]

Thanks Karai17, figured as much. Still super awesome

[Pospos]

Can you check out this code?
I followed your tutorial step by step, but i didn't work.

Code: Select all

    -- Load map file
function playerload()

    -- Create new dynamic data layer called "Sprites" as the 8th layer
    local layer = map:addCustomLayer("Sprites", 8)

    -- Get player spawn object
    player = {}
    for k, object in pairs(map.objects) do
        if object.name == "Player" then
            player = object
            break
        end
    end

    -- Create player object
    sprite = love.graphics.newImage("graphics/tile.png")
    layer.player = {
        sprite = sprite,
        x      = player.x,
        y      = player.y,
        ox     = sprite:getWidth() / 2,
        oy     = sprite:getHeight() / 1.35
    }

    -- Add controls to player
    layer.update = function(self, dt)
        -- 96 pixels per second
        local speed = 96

        -- Move player up
        if love.keyboard.isDown("w") or love.keyboard.isDown("up") then
            self.player.y = self.player.y - speed * dt
        end

        -- Move player down
        if love.keyboard.isDown("s") or love.keyboard.isDown("down") then
            self.player.y = self.player.y + speed * dt
        end

        -- Move player left
        if love.keyboard.isDown("a") or love.keyboard.isDown("left") then
            self.player.x = self.player.x - speed * dt
        end

        -- Move player right
        if love.keyboard.isDown("d") or love.keyboard.isDown("right") then
            self.player.x = self.player.x + speed * dt
        end
    end

    -- Draw player
    layer.draw = function(self)
        love.graphics.draw(
            self.player.sprite,
            math.floor(self.player.x),
            math.floor(self.player.y),
            0,
            2,
            2,
            self.player.ox,
            self.player.oy
        )

        -- Temporarily draw a point at our location so we know
        -- that our sprite is offset properly
        love.graphics.setPointSize(5)
        love.graphics.points(math.floor(self.player.x), math.floor(self.player.y))
    end

    -- Remove unneeded object layer
    map:removeLayer("Spawn Point")
end



function playerdraw()-- Scale world

    local scale = 2
    local screen_width = love.graphics.getWidth() / scale
    local screen_height = love.graphics.getHeight() / scale

    -- Translate world so that player is always centred
    local player = map.layers["Sprites"].player
    local tx = math.floor(player.x - screen_width / 2)
    local ty = math.floor(player.y - screen_height / 2)

    -- Transform world
    love.graphics.scale(scale)
    love.graphics.translate(-tx, -ty)
    
    map:draw()

    -- Draw world
end

Playerdraw and playerload are respectively called by love.draw and love.load.

[Karai17]

That tutorial is unfortunately a bit out of date. tx and ty should now be args for map:draw().

Also note that adding that sprite layer as 8 implies that there are at least 7 layers before it. Make sure you replace 8 with whatever layer number you want your layer to be, making sure it is contiguous.

[Pospos]

args?

[Karai17]

arguments.

Code: Select all

function love.draw()
    local player = map.layers["Sprites"].player
    local tx = math.floor(player.x - screen_width / 2)
    local ty = math.floor(player.y - screen_height / 2)

    map:draw(tx, ty)
end

[Kyrremann]

I also tried following the tutorial, and yes, it's a bit outdated. Found out about the layer-thing after quite some time. Now I'm working on the movement. It helped adding the variables to `map:draw()`, but I still don't get the correct type of moving. My sprite dosn't stay in the middle of the map, but rather moves the other way.

I've tried to change some things, but no...
My code can be seen here: https://github.com/Kyrremann/sti_testin ... r/main.lua

Would be great if there was a working code example too look at.
Thank you.

Code: Select all

-- Include Simple Tiled Implementation into project
local sti = require "sti"

function love.load()
   -- Load map file
   map = sti("test_map.lua")

   -- Create new dynamic data layer called "Sprites" as the 4th layer
   local layer = map:addCustomLayer("Sprites", 4)

   -- Get player spawn object
   local player
   for k, object in pairs(map.objects) do
      if object.name == "Player" then
	 player = object
	 break
      end
   end

   -- Create player object
   local sprite = love.graphics.newImage("medievalUnit_01.png")
   layer.player = {
      sprite = sprite,
      x      = player.x,
      y      = player.y,
      ox     = sprite:getWidth() / 2,
      oy     = sprite:getHeight() / 1.35
   }

   -- Add controls to player
   layer.update = function(self, dt)
      -- 96 pixels per second
      local speed = 96

      -- Move player up
      if love.keyboard.isDown("w") or love.keyboard.isDown("up") then
	 -- self.player.y = self.player.y - speed * dt
	 self.player.y = self.player.y + speed * dt
      end

      -- Move player down
      if love.keyboard.isDown("s") or love.keyboard.isDown("down") then
	 -- self.player.y = self.player.y + speed * dt
	 self.player.y = self.player.y - speed * dt
      end

      -- Move player left
      if love.keyboard.isDown("a") or love.keyboard.isDown("left") then
	 -- self.player.x = self.player.x - speed * dt
	 self.player.x = self.player.x + speed * dt
      end

      -- Move player right
      if love.keyboard.isDown("d") or love.keyboard.isDown("right") then
	 -- self.player.x = self.player.x + speed * dt
	 self.player.x = self.player.x - speed * dt
      end
   end
   
   -- Draw player
   layer.draw = function(self)
      love.graphics.draw(
	 self.player.sprite,
	 math.floor(self.player.x),
	 math.floor(self.player.y),
	 --math.floor(self.player.x - love.graphics.getWidth() / 2),
	 --math.floor(self.player.y - love.graphics.getHeight() / 2),	 
	 0,
	 1,
	 1,
	 self.player.ox,
	 self.player.oy
      )

      -- Temporarily draw a point at our location so we know
      -- that our sprite is offset properly
      love.graphics.setPointSize(5)
      love.graphics.points(math.floor(self.player.x), math.floor(self.player.y))
   end

   map:removeLayer("Spawn Point")
end

function love.update(dt)
   -- Update world
   map:update(dt)
end

function love.draw()
   -- Scale world
   local scale = 2
   local screen_width = love.graphics.getWidth() / scale
   local screen_height = love.graphics.getHeight() / scale

   -- Translate world so that player is always centred
   local player = map.layers["Sprites"].player
   local tx = math.floor(player.x - love.graphics.getWidth() / 2)
   local ty = math.floor(player.y - love.graphics.getHeight() / 2)

   -- Translate world
   -- love.graphics.scale(scale)
   -- love.graphics.translate(-tx, -ty)

   -- Draw world
   map:draw(tx, ty)
end

[Karai17]

Can you link me a .love file?

[Kyrremann]

Below is a working love-file. I'm going to work some more on it now, to see if I can figure out what more I'm doing wrong.

Edit: Finally got scale'ing also working. Just need to find out how to center the player in the middle of the screen. As it now travel the opposite of the camera.

[Kyrremann]

Found my mistake! Had not seen the following change from one code example to the other one.

Code: Select all

local screen_width = love.graphics.getWidth() / scale
   local screen_height = love.graphics.getHeight() / scale

So I wasn't using these two variables.

To sum up the example, all I had to change from the tutorial was to use

Code: Select all

map:draw(-tx, -ty, scale, scale)

and to use the correct index on the new layer.

And of course removing the following:

Code: Select all

   -- Translate world                                                                                                                                                                          
   -- love.graphics.scale(scale)                                                                                                                                                               
   -- love.graphics.translate(-tx, -ty) 

Thanks for a great library!