These are chat archives for pixijs/pixi.js

11th
Jan 2016
Micheal Winger
@mordof
Jan 11 2016 01:10
@ivanpopelyshev yaay bug fixed ^_^ i'll post my code up somewhere now so you can see it
Micheal Winger
@mordof
Jan 11 2016 01:19
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:22
that's not the best way of working with isometric map
Micheal Winger
@mordof
Jan 11 2016 01:22
it is kinda clunky.. how would you propose it?
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:23
the same approach i used on hexagonal map
Micheal Winger
@mordof
Jan 11 2016 01:23
got a link?
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:24
did you ever play chess?
Micheal Winger
@mordof
Jan 11 2016 01:24
yep
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:24
imagine a chessboard
now take only black cells (x+y)%2==0
that's centers of your tiles
points that have (x+y)%2!=0 are corners
that way map is actually rectangle and not something from Age of Empires :)))
X map coordinate is the same as on screen
Y is twice less
I used that approach in https://github.com/ivanpopelyshev/railways too, but code is difficult
it doesnt have tiles but basically its isometric
if you use rectangular grid many things will become very easy
Micheal Winger
@mordof
Jan 11 2016 01:29
scratches head - i'm not really sure i follow. the tiles in this start out as squares and are shifted for perspective
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:30
you're rotating them
ok, let me draw it
Micheal Winger
@mordof
Jan 11 2016 01:30
45 degrees, yeah
which is what makes it isometric
part of it anyway
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:32
you see red grid? that's coordinates i use
points with (x+y)%2==0 are centers of tiles, while (x+y)%2==1 are corners
Micheal Winger
@mordof
Jan 11 2016 01:33
ah
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:33
so in tilemap you store only every 2nd point
*2nd cell
whats in (x+y)%2==1 doesnt matter
yes, thats 2x memory for tilemaps but that's not important :)
Micheal Winger
@mordof
Jan 11 2016 01:35
i understand the screenshot - but that explanation, i don't know why.. i just don't follow. doesn't the (x+y)%2==0 entirely depend on the size of the tiles?
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:35
ok, lets make (U,V) coords in tilemap
(u+v)%2==0 are centers, (u+v)%2==1 are corners
on screen X = u * half_tile_width, y = v * half_tile_height;
Micheal Winger
@mordof
Jan 11 2016 01:36
ah, right
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:36
and moreever
when my objects are something in-between of tiles
I use screen coordinates :)))
I just remember that distance between (x1,y1) and (x2,y2) is sqrt(sqr(x1-x2) + sqr((y1-y2)/2))
so my transition matrix from world coords to screen coords is trivial
I dont need to rotate it
Micheal Winger
@mordof
Jan 11 2016 01:38
so - the whole ignoring (u+v)%2 == 1 is only relevant when the screen coordinates are the same as in your picture. as they're stored now for the rotated map, it's the same amount of points as it is when you ignore half in your approach
true
i guess that's the biggest point
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:39
That's how I store them too :)
Micheal Winger
@mordof
Jan 11 2016 01:39
then the ignoring of (u+v)%2 == 1 is for an optimization so you don't end up with double the memory
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:39
no
we just dont create tiles for them
they are zeroes
its totally ok if your tilemap uses 2x memory
you dont need "rotation" at all
Micheal Winger
@mordof
Jan 11 2016 01:41
fair... it's easier to reference if the 0s are in there, since the x, y would match up with the tilemap storage indexes
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:41
yep
and that way whole map looks like a rectangle, not a diamond :)
Micheal Winger
@mordof
Jan 11 2016 01:43
you mean the storage of it? or the actual rendering
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:43
both
Micheal Winger
@mordof
Jan 11 2016 01:43
i like the drawing the way it is though
that's what i was aiming for
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:43
i mean that space between (0,0) <= (u,v) <= (width,height) where (u,v) are tile coords will look as rectangle on screen
and in your approach its a diamond
Micheal Winger
@mordof
Jan 11 2016 01:45
hmmm
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:46
do you know that many methods for tilemaps generation and other stuff are using both squares and diamonds?
Micheal Winger
@mordof
Jan 11 2016 01:47
not really that familiar with this area of things
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:47
its ok if your map is rectangle but tiles are diamonds
I worked with that kind of map in massiveassaultnetwork.com
Micheal Winger
@mordof
Jan 11 2016 01:47
i honestly can't think of what it would look like with rectangles..
looking for a google image currently
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:48
its only about code, render will look the same
that way you completely remove all problems with "ok, i know coords on tilemap, now, how can i find screen coordinates..."
or " now , what's distance between two points on screen"
Micheal Winger
@mordof
Jan 11 2016 01:49
right
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:49
isometric map is just rectangular map that consists of diamonds, and Y axis is scaled 0.5 times :)
Micheal Winger
@mordof
Jan 11 2016 01:49
you mentioned it was to do with rendering before, i got confused :p
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:50
its all about coordinate system.
also, I have that patch in pixi that wasnt accepted yet
with texture rotations and D8 group
D8 group is connected to rectangles-diamonds approach
Its a math that helps with all tile-based topologies
not the best explanation, but i'll write an article on that later :)
Micheal Winger
@mordof
Jan 11 2016 01:52
o.o
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:53
basically, its all rotations by 45 degrees
and reflections too
Micheal Winger
@mordof
Jan 11 2016 01:53
yep
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:54
If you look at tile (0,0) , its corners are West, South, East then North
of that point
In case of square tiles, its North-West, North-East, South-East, South-West
all that stuff can be rotated and reflected
something like that:
dx = [1,1,0,-1,-1,-1,0,1];
dy = [0, 1,1,1,0,-1,-1,-1];
if point is (x,y) then its k-th neighbour is (x+dx[k], y+dy[k])
Micheal Winger
@mordof
Jan 11 2016 01:58
there is no way i'm gonna be able to remember all this, lol.. i'm gonna save this conversation to reflect on
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 01:58
in square tiles corners are obtained by odd k , in diamond by even k :)
yep, that's difficult to grasp , but I hope i'll teach people that stuff :)
it saves a lot of time
and reflections. I love reflections i dont know why people arent using them. probably because they are too hard
please try to switch to rectangular coordinates :)))))
dont be greedy, tilemaps will be only 2x times bigger
Micheal Winger
@mordof
Jan 11 2016 02:02
yeah, i'm not worried about the memory use. i'll probably switch over - but it'll take some doing as i didn't write the tile creation code currently, lol
though now that i've got the stuff working the way i want, i may just re-write it so it's in my own style
thanks for taking the time to explain it to me ^_^ it definitely helps to understand the concept explained with diagrams and whatnot
Ivan Popelyshev
@ivanpopelyshev
Jan 11 2016 02:10
any tile in gameofbombs can be rotated or reflected. And portals are following that logic too :)