Isometric Mapping Demo

[SMcNeill]

I was thinking of working up a simple little game which utilizes isometric mapping to create a pseudo-3d environment, and I couldn't find a demo of anything similar on the forums.  So, in the spirit of "can do", I did, and here's what I came up with:

Code: QB64: [Select]

1. SCREEN _NEWIMAGE(1024, 720, 32)
2. _SCREENMOVE _MIDDLE
3.  
4. DIM SHARED GridSize AS INTEGER
5. DIM Kolor AS _UNSIGNED LONG
6. CONST Red = &HFFFF0000, Green = &HFF00FF00
7. GridSize = 16 'My demo map is only going to be 16x16 pixels
8.  
9.  
10. DIM grid(9, 9) AS _BYTE 'create a grid to layout our map
11.  
12. FOR i = 0 TO 9 'and let's create that map.  It's just going to be 4 walls and a floor...
13.     grid(i, 0) = 1 'wall
14.     grid(i, 9) = 1
15.     grid(0, i) = 1
16.     grid(9, i) = 1
17. NEXT
18.  
19. FOR y = 1 TO 8
20.     FOR x = 1 TO 8
21.         grid(x, y) = 2 'floor
22.     NEXT
23. NEXT
24.  
25.  
26. 'Now, let's just draw grids one at a time to compare.
27. _PRINTSTRING (100, 80), "Normal 2D grid"
28. FOR y = 0 TO 9
29.     FOR x = 0 TO 9
30.         'normal grid first
31.         IF grid(x, y) = 1 THEN Kolor = Red ELSE Kolor = Green
32.         xpos = x * GridSize + 100: ypos = y * GridSize + 100
33.         xpos2 = xpos + GridSize: ypos2 = ypos + GridSize
34.         LINE (xpos, ypos)-(xpos2, ypos2), Kolor, BF
35.         LINE (xpos, ypos)-(xpos2, ypos2), &HFFFFFFFF, B
36.         'and that's all it takes for the normal grid.  Can't get any simpler for 2d maps!
37.     NEXT
38. NEXT
39.  
40. SLEEP
41.  
42. _PRINTSTRING (350, 80), "Normal 2D grid in Isometic Perspective"
43. FOR y = 0 TO 9
44.     FOR x = 0 TO 9
45.         'And now, let's do the same thing with our isometic map.
46.         IF grid(x, y) = 1 THEN Kolor = Red ELSE Kolor = Green
47.         xpos = x * GridSize + 100: ypos = y * GridSize + 100
48.         xpos2 = xpos + GridSize: ypos2 = ypos + GridSize
49.         IsoLine xpos, ypos, xpos2, ypos2, 500, 0, Kolor
50.         'And that's basically all the takes to rotate our map to make it a 2D isometic perspective
51.     NEXT
52. NEXT
53.  
54. SLEEP
55.  
56. _PRINTSTRING (350, 360), "Normal 2D grid in 3D Isometic Perspective"
57. FOR y = 0 TO 9
58.     FOR x = 0 TO 9
59.         'And here, I'm going to make it a 3D isometic map
60.         IF grid(x, y) = 1 THEN Kolor = Red ELSE Kolor = Green
61.         IF grid(x, y) = 1 THEN z = 16 ELSE z = 0 'Give my walls a height of 16, for a cube
62.  
63.         xpos = x * GridSize + 100: ypos = y * GridSize + 100
64.         xpos2 = xpos + GridSize: ypos2 = ypos + GridSize
65.         IsoLine3D xpos, ypos, xpos2, ypos2, z, 500, 300, Kolor
66.     NEXT
67. NEXT
68.  
69.  
70.  
71.  
72.  
73.  
74.  
75.  
76.  
77. FUNCTION CX2I (x AS LONG, y AS LONG) 'Convert Cartesian X To Isometic coordinates
78.     CX2I = x - y
79. END FUNCTION
80.  
81. FUNCTION CY2I (x AS LONG, y AS LONG) 'Convert Cartesian Y To Isometic coordinates
82.     CY2I = (x + y) / 2
83. END FUNCTION
84.  
85. SUB IsoLine (x, y, x2, y2, xoffset, yoffset, kolor AS _UNSIGNED LONG)
86.     'since we're drawing a diamond and not a square box, we can't use Line BF.
87.     'We have to manually down the 4 points of the line.
88.     LINE (CX2I(x, y) + xoffset, CY2I(x, y) + yoffset)-(CX2I(x2, y) + xoffset, CY2I(x2, y) + yoffset), kolor
89.     LINE -(CX2I(x2, y2) + xoffset, CY2I(x2, y2) + yoffset), kolor
90.     LINE -(CX2I(x, y2) + xoffset, CY2I(x, y2) + yoffset), kolor
91.     LINE -(CX2I(x, y) + xoffset, CY2I(x, y) + yoffset), kolor
92.     PAINT (CX2I(x, y) + xoffset, CY2I(x, y) + 4), kolor 'and fill the diamond solid
93.     LINE (CX2I(x, y) + xoffset, CY2I(x, y) + yoffset)-(CX2I(x2, y) + xoffset, CY2I(x2, y) + yoffset), &HFFFFFFFF
94.     LINE -(CX2I(x2, y2) + xoffset, CY2I(x2, y2) + yoffset), &HFFFFFFFF
95.     LINE -(CX2I(x, y2) + xoffset, CY2I(x, y2) + yoffset), &HFFFFFFFF
96.     LINE -(CX2I(x, y) + xoffset, CY2I(x, y) + yoffset), &HFFFFFFFF
97. END SUB
98.  
99. SUB IsoLine3D (x, y, x2, y2, z, xoffset, yoffset, kolor AS _UNSIGNED LONG)
100.     'Like IsoLine, we're going to have to draw our lines manually.
101.     'only in this case, we also need a Z coordinate to tell us how THICK/TALL/HIGH to make our tile
102.  
103.     'Let's just do all the math first this time.
104.     'We need to turn those 4 normal points into 4 isometric points (x, y, x1, y1)
105.  
106.     TempX1 = CX2I(x, y) + xoffset: TempY1 = CY2I(x, y) + yoffset
107.     TempX2 = CX2I(x2, y) + xoffset: TempY2 = CY2I(x2, y) + yoffset
108.     TempX3 = CX2I(x2, y2) + xoffset: TempY3 = CY2I(x2, y2) + yoffset
109.     TempX4 = CX2I(x, y2) + xoffset: TempY4 = CY2I(x, y2) + yoffset
110.  
111.     'The top
112.     LINE (TempX1, TempY1 - z)-(TempX2, TempY2 - z), kolor 'draw the diamond
113.     LINE -(TempX3, TempY3 - z), kolor
114.     LINE -(TempX4, TempY4 - z), kolor
115.     LINE -(TempX1, TempY1 - z), kolor
116.     PAINT (TempX1, TempY1 - z + 4), kolor 'and fill the diamond solid
117.     LINE (TempX1, TempY1 - z)-(TempX2, TempY2 - z), -1 'and redraw the grid
118.     LINE -(TempX3, TempY3 - z), -1
119.     LINE -(TempX4, TempY4 - z), -1
120.     LINE -(TempX1, TempY1 - z), -1
121.  
122.     IF z <> 0 THEN 'no need to draw any height, if there isn't any.
123.         'the left side
124.         LINE (TempX4, TempY4 - z)-(TempX4, TempY4), kolor 'draw it
125.         LINE -(TempX3, TempY3), kolor
126.         LINE -(TempX3, TempY3 - z), kolor
127.         LINE -(TempX4, TempY4 - z), kolor
128.         PAINT (TempX3 - 2, TempY3 - z + 2), kolor 'fill it
129.         LINE (TempX4, TempY4 - z)-(TempX4, TempY4), -1 'redraw the grid lines
130.         LINE -(TempX3, TempY3), -1
131.         LINE -(TempX3, TempY3 - z), -1
132.         LINE -(TempX4, TempY4 - z), -1
133.         'and then for the right side
134.         LINE (TempX3, TempY3 - z)-(TempX3, TempY3), kolor 'draw it
135.         LINE -(TempX2, TempY2), kolor
136.         LINE -(TempX2, TempY2 - z), kolor
137.         LINE -(TempX3, TempY3 - z), kolor
138.         PAINT (TempX3 + 2, TempY3 - z + 2), kolor 'fill it
139.         LINE (TempX3, TempY3 - z)-(TempX3, TempY3), -1 'redraw the grid lines
140.         LINE -(TempX2, TempY2), -1
141.         LINE -(TempX2, TempY2 - z), -1
142.         LINE -(TempX3, TempY3 - z), -1
143.     END IF
144.  
145.  
146. END SUB
147.  

It's a simple enough little demo with nothing more than a green floor and red walls, but I think it highlights the process well enough for us.

My question for all you math folks out there: What's a simple little formula to use to get a paint point inside those boxes?  I really don't care for the hardcoded + 2 which I used, as it can paint the wrong things if the user draws a box too small for it.  There should be a simple, failsafe method which we can use that won't paint out of bounds, like this little demo does, but I'll be danged if I can come up with it at the moment.  It's too early in the morning, and I haven't drunk enough coffee, for my brain to work good enough for any more math already...

[STxAxTIC]

My first thought on this is - what's the end result supposed to look like? That totally influences the beginning...

... Because insert spiel about doing things in proper 3D ... but forgetting that for a second ...

It seems that getting the pseudo-height correct isn't going to be the main problem, but is instead going to be plotting. If you have monsters, projectiles, speech bubbles, or whatever else, the question is how to do draw them in the proper layers so you don't have overlaps? The quick solution I see is to stick your data layers together like a cake, and then slice the scene not horizontally, but in the so-called z-direction (int the screen) from background to foreground. That way, you can just do the painter's algorithm, which is especially easy because of the locked perspective.

[SMcNeill]

You draw it farthest to closest, or, in this case, from 0 to 9.

No need for a spiel on “proper 3D” here; that’s not what we’re doing.  All we’re shooting for here is something like the screenshot below, which is a nice isometric map:

[STxAxTIC]

If you were just shooting for the screenshot, the project must be finished.

What was the question again?

[Cobalt]

set your grid size to 10 and you get some issues in the Iso3d view. and the height doesn't seem to be affected by changing the gridsize either.

[SMcNeill]

set your grid size to 10 and you get some issues in the Iso3d view. and the height doesn't seem to be affected by changing the gridsize either.

That’s from the current paint fill routine, as I mentioned above.  I’ll work in a different fill method later, which won’t suffer from that problem.  ;)

(Honestly, I think all I really need to do is draw the grid in a separate step and not during the line drawing/painting process.  It’s those stray white lines that act as a boundary, which I think is the issue.  I’ll do some testing later to see if my assumption is correct, or not.). ;)

[Cobalt]

Ah, Rereading that its clicking now, must have just been not quite awake the first time through(nightmares of Frost Blossom keeping me up! XD ).

Wonder how hard it would be to make a LINE()-(),,BF that could be used for NON-Square shapes made, which would probably be easier with a TRIANGLE()-()-(), LINECOLOR, FILLCOLOR kind of thing, where FILLCOLOR would act like BF in the line statement so if a fill color is present it would fill otherwise it would just be lines. Would take 2 calls to make a "box" but might be easier in the end. maybe manipulating the image memory directly to fill it.

[Petr]

Hi Steve.
Thank you for a nice demonstration. I would solve the textures differently. I would use MAPTRIANGLE 2D because it uses the same coordinate system as normal 2D graphics. I have to study your code deeply because I still miss the Z-axis calculation, even though I'm on steps... At the moment, I have come across the ceiling of my abilities.

I do now some experiments with this total pseudo 3D code:

Code: QB64: [Select]

1. 'Pseudo3D Cube
2. SCREEN _NEWIMAGE(640, 480, 32)
3. 'rotation point is 320, 240. Rotation radius is 100.
4. 'is needed 8* X, 8* Y, 8* Z
5.  
6. DIM X(8), Y(8), Z(8)
7.  
8.  
9. texture = _NEWIMAGE(100, 100, 32)
10. _DEST texture
11. CLS , &H0DEED0C4
12. FOR f = 0 TO 100 STEP 20
13.     LINE (50 + f, 50 + f)-(50 - f, 50 - f), _RGB32(RND * 255, RND * 255, RND * 255), B
14. NEXT
15. _DEST 0
16. r1 = 100
17. r2 = 50
18.  
19. DO
20.     i$ = INKEY$
21.     SELECT CASE i$
22.         CASE " ": fill = fill + 1: IF fill > 1 THEN fill = 0
23.         CASE "+": r1 = r1 + 1: r2 = r2 + 1
24.         CASE "-": r1 = r1 - 1: r2 = r2 - 1
25.         CASE "*": XX1 = XX1 + 1
26.         CASE "/": YY1 = YY1 + 1
27.         CASE "9": XX2 = XX2 + 1
28.         CASE "8": YY2 = YY2 + 1
29.  
30.         CASE "7": XX1 = XX1 - 1
31.         CASE "6": YY1 = YY1 - 1
32.         CASE "5": XX2 = XX2 - 1
33.         CASE "4": YY2 = YY2 - 1
34.  
35.  
36.  
37.     END SELECT
38.  
39.     FOR L = 1 TO 4
40.         angle = angle + _PI / 2
41.         X(L) = XX1 + 320 + SIN(angle + r) * r1
42.         Y(L) = YY1 + 170 + COS(angle + r) * r2
43.  
44.         X(4 + L) = XX2 + 320 + SIN(angle + r) * r1
45.         Y(4 + L) = YY2 + 240 + COS(angle + r) * r2
46.     NEXT
47.     angle = 0
48.     CLS
49.     SELECT CASE fill
50.         CASE 0
51.             FOR d = 1 TO 3
52.                 LINE (X(d), Y(d))-(X(d + 1), Y(d + 1))
53.                 LINE (X(d + 4), Y(d + 4))-(X(d + 5), Y(d + 5))
54.                 LINE (X(d), Y(d))-(X(d + 4), Y(d + 4))
55.             NEXT
56.             LINE (X(1), Y(1))-(X(4), Y(4))
57.             LINE (X(5), Y(5))-(X(8), Y(8))
58.             LINE (X(4), Y(4))-(X(8), Y(8))
59.  
60.         CASE 1
61.             FOR d = 1 TO 3
62.                 '   EXIT FOR
63.                 _MAPTRIANGLE (0, 0)-(99, 0)-(0, 99), texture TO(X(d), Y(d))-(X(d + 1), Y(d + 1))-(X(d + 4), Y(d + 4))
64.                 _MAPTRIANGLE (99, 0)-(0, 99)-(99, 99), texture TO(X(d + 1), Y(d + 1))-(X(d + 4), Y(d + 4))-(X(d + 5), Y(d + 5))
65.  
66.  
67.             NEXT
68.  
69.  
70.             _MAPTRIANGLE (0, 0)-(99, 0)-(0, 99), texture TO(X(1), Y(1))-(X(4), Y(4))-(X(5), Y(5)) 'last side
71.             _MAPTRIANGLE (99, 0)-(0, 99)-(99, 99), texture TO(X(4), Y(4))-(X(5), Y(5))-(X(8), Y(8)) 'last side
72.  
73.             _MAPTRIANGLE (0, 0)-(99, 0)-(0, 99), texture TO(X(1), Y(1))-(X(4), Y(4))-(X(2), Y(2)) 'ceil
74.             _MAPTRIANGLE (99, 0)-(0, 99)-(99, 99), texture TO(X(4), Y(4))-(X(2), Y(2))-(X(3), Y(3))
75.  
76.             _MAPTRIANGLE (0, 0)-(99, 0)-(0, 99), texture TO(X(5), Y(5))-(X(8), Y(8))-(X(6), Y(6)) 'bottom
77.             _MAPTRIANGLE (99, 0)-(0, 99)-(99, 99), texture TO(X(8), Y(8))-(X(6), Y(6))-(X(7), Y(7))
78.  
79.  
80.     END SELECT
81.     r = r + .01
82.     _DISPLAY
83.     _LIMIT 25
84. LOOP
85.  

(Use space, +,-,*,/,9,8,7,6,5,4)

Of course, this is just an experimental program, nothing miraculous is expected of it.

[bplus]

Nice work Petr! That space option is really cool!

I am trying to find your post on your start to real 3D rendering that STxAxTIC made comment to a month or 2 ago?

[Petr]

This? It use hardware images + hardware MAPTRIANGLE https://www.qb64.org/forum/index.php?topic=300.msg102623#msg102623

[bplus]

Steve could you just stack cube images, back to front, bottom to top?

[Lucky_Strikez]

Super cool work guys! Keep it going

[AndyA]

@Steve

The easiest way to do isometric cubes that I can think of is to:

1) Draw an isometric cube, paint the three iso-squares facing viewer with desired color.

2) GET the image.

3) PUT the cubes using grid coordinates plus appropriate X/Y offsets.

Using this method allows you to create as many different colored iso-cubes as desired at run time.

The other thing is that using PUT is a whole lot faster than painting each individual cube face.

Just my 2 cents :)

[SMcNeill]

What I’ll probably end up using is just a bunch of textures for the walls and then _MAPTRIANGLE them to the proper coordinates.  It seems the fastest/easiest way to go.

[bplus]

Forget PAINT use fquad (fill quadrilateral) which is just a double ftri (fill triangle):

Code: QB64: [Select]

1.  
2. 'this text was fetched
3. SUB ftri (x1, y1, x2, y2, x3, y3, K AS _UNSIGNED LONG)
4.     DIM a&
5.     a& = _NEWIMAGE(1, 1, 32)
6.     _DEST a&
7.     PSET (0, 0), K
8.     _DEST 0
9.     _MAPTRIANGLE _SEAMLESS(0, 0)-(0, 0)-(0, 0), a& TO(x1, y1)-(x2, y2)-(x3, y3)
10.     _FREEIMAGE a& '<<< this is important!
11. END SUB
12.  
13. 'need 4 non linear points (not all on 1 line) list them clockwise so x2, y2 is diagonal of x4, y4
14. SUB fquad (x1, y1, x2, y2, x3, y3, x4, y4, K AS _UNSIGNED LONG)
15.     ftri x1, y1, x2, y2, x4, y4, K
16.     ftri x3, y3, x2, y2, x4, y4, K
17. END SUB
18.  

Here is demo: https://www.qb64.org/forum/index.php?topic=1905.0