## Iso drawing help

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

### Iso drawing help

Hi
I'm new to Love coding and read a isometric tutorial. (Link here https://love2d.org/wiki/Tutorial:Isometric_Graphics) I got the code working (I think) and now want to change the dirt image to house image. But when I modify the code it doesn't look right anymore, the houses are way off from where they should be. Here's screenshot: https://imgur.com/a/DDK37Pf

And here's my code ( Most of my changes are in draw() )

Code: Select all



grass = love.graphics.newImage("grass.png")
dirt = love.graphics.newImage("dirt.png")
house = love.graphics.newImage("house.png")

block_width = grass:getWidth()
block_height = grass:getHeight()
block_depth = block_height / 2

grid_size = 20
grid = {}
for x = 1,grid_size do
grid[x] = {}
for y = 1,grid_size do
grid[x][y] = 1
end
end

grid[2][4] = 2
grid[6][5] = 2

grid_x = 350
grid_y = 250

end

function love.draw()

for x = 1,grid_size do
for y = 1,grid_size do
if grid[x][y] == 1 then
love.graphics.draw(grass,
grid_x + ((y-x) * (block_width / 2)),
grid_y + ((x+y) * (block_depth / 2)) - (block_depth * (grid_size / 2)) - block_depth)
else -- grid[x][y] == 2
bd = house:getHeight() / 2
bw = house:getWidth()
love.graphics.draw(house,
grid_x + ((y-x) * (bw / 2)),
grid_y + ((x+y) * (bd / 2)) - (bd * (grid_size / 2)) - bd)
end
end
end

end


can some one help to get it working?

thx!

raidho36
Party member
Posts: 2031
Joined: Mon Jun 17, 2013 12:00 pm

### Re: Iso drawing help

You should use the block_width and block_depth for all coordinate calculations, because they belong to the base grid rather than particular objects.

Also, since it's the same calculations for all types of objects, you can leave a single instance of that code and just change what type of object you will render.

Code: Select all

for x = 1,grid_size do
for y = 1,grid_size do
local sprite
if grid[x][y] == 1 then sprite = grass
elseif grid[x][y] == 2 then sprite = house end
love.graphics.draw(sprite,
grid_x + ((y-x) * (block_width / 2)),
grid_y + ((x+y) * (block_depth / 2)) - (block_depth * (grid_size / 2)) - block_depth)
end
end

Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

### Re: Iso drawing help

Ok thanks a lot! I updated the file with your code but now it looks like this: https://imgur.com/a/FVZt2d7

Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

### Re: Iso drawing help

Should probably add that the grass image size is 32x32 but house is 64x64

raidho36
Party member
Posts: 2031
Joined: Mon Jun 17, 2013 12:00 pm

### Re: Iso drawing help

I guess that's because your grass tile is straight square, not oblique isometric tile, so it renders on top of your house tile. But you might actually want to draw your terrain and objects in two passes - first terrain, then objects - so that overwrites like that don't happen.

Also, try adjusting image origin, so that it renders at the base, not at top right corner.

Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

### Re: Iso drawing help

Ok makes sense, thanks! But there's still something odd going on with the ground rendering. the dirt sprite shows it's drawn on length of two tiles?
https://imgur.com/a/ur7fakK

raidho36
Party member
Posts: 2031
Joined: Mon Jun 17, 2013 12:00 pm

### Re: Iso drawing help

I think that's actually one tile in size, but bottom half is overwritten by square grass tiles. Give the sprites diagonal edges in a graphics editor. Start with creating the graphics and then tweak the code to produce proper picture.

Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

### Re: Iso drawing help

Right, I have to start learning how to make isometric graphics

NotARaptor
Citizen
Posts: 59
Joined: Thu Feb 22, 2018 3:15 pm

### Re: Iso drawing help

You can find a veritable hoard of relevant information here : http://www-cs-students.stanford.edu/~am ... html#tiles

### Who is online

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