Isometric game: screen to world transformation

[Arônimo]

Im working on an isometric project, so far it has a lighting system similar to old minecraft and the basics of an isometric game. Thing is, id like to have my own level editor built in Love2D specifically for this project. With this, id need a way to get the mouse position, to do that i need a way to get screen position and transform it into a tile position in the isometric world. I have a formula for getting a world position and output a screen position, and i have tried to do the inverse, but to no success:

Code: Select all

local a = (TILE_WIDTH / 2) -- a11
local b = -(TILE_WIDTH / 2) -- a12
local c = (TILE_WIDTH / 4) -- a21
local d = (TILE_WIDTH / 4) -- a22

function ToScreen(x, y, xtransform, ytransform)
    xtransform = xtransform or 0
    ytransform = ytransform or 0

    local xx = (x * a + y * b) - TILE_WIDTH / 2
    local yy = (x * c + y * d) - TILE_HEIGHT / 2

    return math.floor(xx + xtransform), math.floor(yy + ytransform)
end

function ToWorld(x, y)
    local scalar = 1 / (a * d - b * c)

    local aa = d * scalar
    local bb = -b * scalar
    local cc = -c * scalar
    local dd = a * scalar

    local xx = (x * aa + y * bb) + TILE_WIDTH / 2
    local yy = (x * cc + y * dd) + TILE_HEIGHT / 2

    return math.floor(xx), math.floor(yy)
end

Im scaling everything by 4 and shifting the map drawing to the center of the screen as well, heres the draw call:

Code: Select all

function love.draw()
    love.graphics.scale(SCALE, SCALE)

    for y = 0, ACTUAL_MAP_HEIGHT do
        for x = 0, ACTUAL_MAP_WIDTH do
            local tile_index = Map:GetIndexFromXY(x, y)
            local tile = Map[tile_index]

            light_color = tile.color

            love.graphics.setColor(light_color)

            local xx, yy = ToScreen(x, y, WINDOW_WIDTH / 2, WINDOW_HIEGHT / 4)
            love.graphics.draw(sheet, tilemap[tile.tileset], xx, yy)
        end
    end
end

function love.update()
    print(ToWorld(love.mouse.getPosition()))
end

Heres some screenshots and the code for the interested, any help is greatly appreciated, ive been stuck on this for the last 2 weeks :
https://github.com/Caue-Aron/Isometric

[dusoft]

Maybe check this engine's code for inspiration?
https://github.com/Sulunia/isomap-love2 ... 25-L247C25

[Arônimo]

Maybe check this engine's code for inspiration?
https://github.com/Sulunia/isomap-love2 ... 25-L247C25

Unfortunately i couldnt figure out anything from this code. I updated the screen transformation to the formula of Javidx9 in his isometric video: https://www.youtube.com/watch?v=ukkbNKT ... el=javidx9

Code: Select all

local xorigin = 5
local yorigin = 1

function toScreen(x, y)
    xtransform = xtransform or 0
    ytransform = ytransform or 0

    local xx = (xorigin * TILE_WIDTH) + (x - y) * (TILE_WIDTH / 2)
    local yy = (yorigin * TILE_HEIGHT) + (x + y) * (TILE_HEIGHT / 4)

    return math.floor(xx), math.floor(yy)
end

but still couldnt figure anything out

[togFox]

This is my iso game that is functional but is boring because I didn't create content. Code was written when I was even more noob than now. It might not help, but it does detect mouse over and click events on tiles.

https://github.com/togfoxy/IsoSurvivor/tree/main/source

[GVovkiv]

This is my iso game that is functional but is boring because I didn't create content. Code was written when I was even more noob than now. It might not help, but it does detect mouse over and click events on tiles.

https://github.com/togfoxy/IsoSurvivor/tree/main/source

Link is 404

[togFox]

Poop. Thanks for pointing that out. It's in a private repository.

This is some code I got:

Code: Select all

function ConvertGraphicsToGridXY(x,y)
-- Converts a screen co-ordinate (origin top-left corner) into an isometric grid co-ordinate
   local tilewidth = gintTileWidth	--! need to refactor this function to remove silly code
   local tileheight = 42.6
	
   TILE_WIDTH_HALF = tilewidth / 2
   TILE_HEIGHT_HALF = tileheight / 2

   isox = math.floor(math.floor(x / TILE_WIDTH_HALF + y / TILE_HEIGHT_HALF) / 2)
   isoy = math.floor(math.floor(y / TILE_HEIGHT_HALF -(x / TILE_WIDTH_HALF)) / 2) + 1

   return isox,isoy

end

It's not the best code in the world and you'll need to adjust but perhaps this will move you forward.