Iso drawing help

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

Iso drawing help

Post by Coder567 » Sun Apr 07, 2019 12:40 pm

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



function love.load()
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!

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

Re: Iso drawing help

Post by raidho36 » Sun Apr 07, 2019 2:23 pm

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

Post by Coder567 » Sun Apr 07, 2019 2:51 pm

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

Post by Coder567 » Sun Apr 07, 2019 3:03 pm

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

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

Re: Iso drawing help

Post by raidho36 » Sun Apr 07, 2019 3:54 pm

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

Post by Coder567 » Sun Apr 07, 2019 5:34 pm

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

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

Re: Iso drawing help

Post by raidho36 » Sun Apr 07, 2019 6:35 pm

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

Post by Coder567 » Sun Apr 07, 2019 7:08 pm

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

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

Re: Iso drawing help

Post by NotARaptor » Mon Apr 08, 2019 8:07 am

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

Post Reply

Who is online

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