Simple Tiled Implementation - STI v1.2.3.0

Showcase your libraries, tools and other projects that help your fellow love users.
User avatar
Karai17
Party member
Posts: 930
Joined: Sun Sep 02, 2012 10:46 pm

Re: Simple Tiled Implementation - STI v0.18.2.1

Post by 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.
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé
neenayno
Prole
Posts: 2
Joined: Tue Aug 01, 2017 3:11 pm

Re: Simple Tiled Implementation - STI v0.18.2.1

Post by neenayno »

Thanks Karai17, figured as much. Still super awesome :)
User avatar
Pospos
Citizen
Posts: 73
Joined: Sun Jun 18, 2017 11:10 am
Location: Agadir

Re: Simple Tiled Implementation - STI v0.18.2.1

Post by 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.
User avatar
Karai17
Party member
Posts: 930
Joined: Sun Sep 02, 2012 10:46 pm

Re: Simple Tiled Implementation - STI v0.18.2.1

Post by 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.
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé
User avatar
Pospos
Citizen
Posts: 73
Joined: Sun Jun 18, 2017 11:10 am
Location: Agadir

Re: Simple Tiled Implementation - STI v0.18.2.1

Post by Pospos »

args?
User avatar
Karai17
Party member
Posts: 930
Joined: Sun Sep 02, 2012 10:46 pm

Re: Simple Tiled Implementation - STI v0.18.2.1

Post by 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
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé
User avatar
Kyrremann
Prole
Posts: 28
Joined: Fri Mar 01, 2013 2:17 pm
Location: Oslo, Norway
Contact:

Re: Simple Tiled Implementation - STI v0.18.2.1

Post by 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
User avatar
Karai17
Party member
Posts: 930
Joined: Sun Sep 02, 2012 10:46 pm

Re: Simple Tiled Implementation - STI v0.18.2.1

Post by Karai17 »

Can you link me a .love file?
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé
User avatar
Kyrremann
Prole
Posts: 28
Joined: Fri Mar 01, 2013 2:17 pm
Location: Oslo, Norway
Contact:

Re: Simple Tiled Implementation - STI v0.18.2.1

Post by 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.
Attachments
sti_testing.love
(113.1 KiB) Downloaded 181 times
User avatar
Kyrremann
Prole
Posts: 28
Joined: Fri Mar 01, 2013 2:17 pm
Location: Oslo, Norway
Contact:

Re: Simple Tiled Implementation - STI v0.18.2.1

Post by 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!
Post Reply

Who is online

Users browsing this forum: Google [Bot] and 49 guests