Simple Tiled Implementation - STI v1.2.3.0

Showcase your libraries, tools and other projects that help your fellow love users.
Jimlarck
Prole
Posts: 14
Joined: Wed Sep 14, 2016 10:30 pm

Re: Simple Tiled Implementation - STI v0.16.0.3

Post by Jimlarck » Wed Sep 14, 2016 10:57 pm

I have a bit of a problem. I'm using STI to load in an isometric tiled map and it renders it and draws the collisions and can load a player that interacts with the collisions but it everything is offset. I can walk out of bounds and the collisions aren't drawn properly (they're kind of stretched and in places where they shouldn't be.

Here is my main.lua

Code: Select all

function love.load()
    -- Grab window size
    windowWidth  = love.graphics.getWidth()
    windowHeight = love.graphics.getHeight()

    -- Set world meter size (in pixels)
    love.physics.setMeter(32)

    -- Load a map exported to Lua from Tiled
    map = sti(mapinfo[("map" .. mapnum)].mapdir, {"Box2D"})

    -- Prepare physics world with horizontal and vertical gravity
    world = love.physics.newWorld(0, 0)

    -- Prepare collision objects
    map:box2d_init(world)

    -- Create a Custom Layer
    map:addCustomLayer("Sprite Layer", 3)

    -- Add data to Custom Layer
    local spriteLayer = map.layers["Sprite Layer"]
    spriteLayer.sprites = {
        player = {
            image = love.graphics.newImage("assets/player.png"),
            x = 200,
            y = 200,
            r = 0,
        }
    }


    spriteLayer.sprites.player.body = love.physics.newBody(world, spriteLayer.sprites.player.x/2, spriteLayer.sprites.player.y/2, "dynamic")
    spriteLayer.sprites.player.body:setLinearDamping(10)
    spriteLayer.sprites.player.body:setFixedRotation(true)

    spriteLayer.sprites.player.shape   = love.physics.newRectangleShape(32, 20)
    spriteLayer.sprites.player.fixture = love.physics.newFixture(spriteLayer.sprites.player.body, spriteLayer.sprites.player.shape)

  

    -- Update callback for Custom Layer (movement for sprite happens here)
    function spriteLayer:update(dt)

    end

    -- Draw callback for Custom Layer
    function spriteLayer:draw()
       local image = self.sprites.player.image
        local x = math.floor(self.sprites.player.x)
        local y = math.floor(self.sprites.player.y)
        love.graphics.draw(image, x, y, r, 1, 1, 14, 25)
    end
end


function love.update(dt)


    --Update map
    world:update(dt)
        -- put the layout origin at position (100,100)
    --the layout will grow down and to the right from this point
    gui.layout:reset(100,100)
    --Move the sprite
    local sprite = map.layers["Sprite Layer"].sprites
    local down = love.keyboard.isDown
    
	-- Went through your code, I really liked how neat you made the movement code, nice :)
    local x, y = 0, 0
    if down("w") or down("up")      then y = y - 4000 end
    if down("s") or down("down")    then y = y + 4000 end
    if down("a") or down("left")    then x = x - 4000 end
    if down("d") or down("right")   then x = x + 4000 end
    sprite.player.body:applyForce(x, y)
    sprite.player.x, sprite.player.y = sprite.player.body:getWorldCenter()

    map:update(dt)
end

function love.draw()
    -- camera movement stuff/translation
    local sprite = map.layers["Sprite Layer"].sprites
    local ww = love.graphics.getWidth()
    local wh = love.graphics.getHeight()
    local tx = math.floor(-sprite.player.x + ww / 2 - 16)
    local ty = math.floor(-sprite.player.y + wh / 2 - 16)

    -- Draw sprite in centre of screen
    love.graphics.push()
    love.graphics.translate(tx, ty)
    map:setDrawRange(-tx, -ty, ww, wh)

    -- Draw the map and all objects within
    map:draw()

    -- Draw Collision Map (useful for debugging)
    love.graphics.setColor(255, 0, 0, 255)
    map:box2d_draw()

    -- Draw character lines
    love.graphics.polygon("line", sprite.player.body:getWorldPoints(sprite.player.shape:getPoints()))
    love.graphics.pop()

    --Font Size.
    local size = 12

    -- Reset color
    love.graphics.setColor(255, 255, 255, 255)

    --Sets font size.
    font = love.graphics.newFont(size)

    -- Sets the font.
    love.graphics.setFont(font)

end

function love.resize(w, h)
    map:resize(w, h)
end
Here is the tiled map I'm using to test things(both tmx, lua, and png for sprite sheet): https://app.box.com/s/k2tgeq286shozz5h2anlu2c8rekprs5b

This is what it looks like:
Screen Shot 2016-09-14 at 5.50.38 PM.png
Screen Shot 2016-09-14 at 5.50.38 PM.png (92.66 KiB) Viewed 1525 times

This is what the map looks like in tiled(I made the other layers more opaque to show you which were the solid objects):
Screen Shot 2016-09-14 at 5.55.19 PM.png
Screen Shot 2016-09-14 at 5.55.19 PM.png (182.26 KiB) Viewed 1525 times
Let me know if you need anything else, any help is appreciated!

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

Re: Simple Tiled Implementation - STI v0.16.0.3

Post by Karai17 » Fri Sep 16, 2016 7:13 am

Can you send me your full love file?
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé

Jimlarck
Prole
Posts: 14
Joined: Wed Sep 14, 2016 10:30 pm

Re: Simple Tiled Implementation - STI v0.16.0.3

Post by Jimlarck » Fri Sep 16, 2016 2:16 pm

Karai17 wrote:Can you send me your full love file?
Yup, sent you a pm

Jimlarck
Prole
Posts: 14
Joined: Wed Sep 14, 2016 10:30 pm

Re: Simple Tiled Implementation - STI v0.16.0.3

Post by Jimlarck » Sat Sep 17, 2016 5:48 pm

Karai17 wrote:Can you send me your full love file?
Another thing, I'm trying to make "regions" where I can see if the player is inside that region and do something(for example if a player stands in front of a door block they can press b and enter the room). How would I do this? I tried to make an object with rectangles that would be considered the regions but I'm not sure how to check for when a player is standing inside that object rectangle/region.

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

Re: Simple Tiled Implementation - STI v0.16.0.3

Post by Karai17 » Sun Sep 18, 2016 3:44 am

I am completely baffled by this. I'll see if I can't find out what is going on...
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé

Jimlarck
Prole
Posts: 14
Joined: Wed Sep 14, 2016 10:30 pm

Re: Simple Tiled Implementation - STI v0.16.0.3

Post by Jimlarck » Mon Sep 19, 2016 11:43 pm

Karai17 wrote:I am completely baffled by this. I'll see if I can't find out what is going on...
I tried using an orthogonal map and it worked just fine and the collisions weren't distorted so I'm not sure why it's doing that for isometric maps. I tried other isometric maps (including your sample game's isometric map, it was missing collidable properties so I set one layer to collidable and it was shifted too).

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

Re: Simple Tiled Implementation - STI v0.16.0.3

Post by Karai17 » Mon Sep 19, 2016 11:49 pm

Hm. I must of buggered up the code somewhere then. I'll try to fix it.
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé

Jimlarck
Prole
Posts: 14
Joined: Wed Sep 14, 2016 10:30 pm

Re: Simple Tiled Implementation - STI v0.16.0.3

Post by Jimlarck » Wed Sep 21, 2016 10:22 pm

Karai17 wrote:Hm. I must of buggered up the code somewhere then. I'll try to fix it.
So I was messing around trying to figure out why it was doing that weird stretching. I made all the layers solid and this was the result:
Screen Shot 2016-09-21 at 5.16.12 PM.png
Screen Shot 2016-09-21 at 5.16.12 PM.png (125.84 KiB) Viewed 1332 times
It looks like it's stretching the outsides and like an isometric staggered map so it might just be a math error

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

Re: Simple Tiled Implementation - STI v0.16.0.3

Post by Karai17 » Wed Sep 21, 2016 10:36 pm

Can you try using the bump.lua plugin (requires bump.lua!) and see if the same issue occurs?
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé

Jimlarck
Prole
Posts: 14
Joined: Wed Sep 14, 2016 10:30 pm

Re: Simple Tiled Implementation - STI v0.16.0.3

Post by Jimlarck » Wed Sep 21, 2016 10:48 pm

Karai17 wrote:Can you try using the bump.lua plugin (requires bump.lua!) and see if the same issue occurs?
Couldn't find a bump tutorial for sti, but I can try. In the meantime I was messing around with the library and noticed that you can change the collision boxes being drawn in line 403-406 in the init.lua of the STI library. So I think there's probably something wrong with the math here.

Code: Select all

 elseif self.orientation == "isometric" then																	
	tileX = (x - y) * (tileW / 2) + tile.offset.x + layer.width * tileW / 2 - self.tilewidth / 2		
	tileY = (x + y - 2) * (tileH / 2) + tile.offset.y - layer.height	
Anyway, I'm gonna try to see if it does the same with bump.lua

Post Reply

Who is online

Users browsing this forum: No registered users and 10 guests