Draw Landscape with Parallax Effect

[bplus]

Fellippe's Locomotive thread has me thinking about drawing moving backgrounds.

I have a Parallax Effect worked out:

Code: QB64: [Select]

1. _TITLE "Drawlandscape Parallax test" 'started 2019-03-27
2. 'test if can get end of landscape level to start for big looping background
3. '2019-03-27 a more gentle adjustment back to Mountain starting height for
4. 'more seamless connect of back end to front
5. '2019-03-27 start this file with parallax drawing test
6.  
7.  
8. RANDOMIZE TIMER
9. SCREEN _NEWIMAGE(1200, 600, 32)
10. _SCREENMOVE 100, 20
11. TYPE parallaxType
12.     handle AS LONG
13.     rate AS SINGLE 'number of pixels per frame added to le (leading edge)
14.     le AS SINGLE
15. END TYPE
16. DIM SHARED nLevels AS INTEGER
17. nLevels = 6
18. DIM SHARED para(1 TO nLevels) AS parallaxType
19.  
20. DIM SHARED scape&
21. LoadLandscape
22. scapeWidth = _WIDTH(para(1).handle)
23. scapeHeight = _HEIGHT(para(1).handle)
24.  
25. WHILE t < 6000
26.     CLS
27.     FOR i = 1 TO nLevels
28.         IF para(i).le + 800 > scapeWidth THEN
29.             te = scapeWidth - para(i).le
30.             _PUTIMAGE (0, 0)-(te, scapeHeight), para(i).handle, 0, (scapeWidth - te, 0)-(scapeWidth, scapeHeight)
31.             _PUTIMAGE (te, 0)-(800, scapeHeight), para(i).handle, 0, (0, 0)-(800 - te, scapeHeight)
32.  
33.         ELSE
34.             _PUTIMAGE (0, 0)-(800, scapeHeight), para(i).handle, 0, (para(i).le, 0)-(para(i).le + 800, scapeHeight)
35.         END IF
36.  
37.         para(i).le = para(i).le - para(i).rate
38.         IF para(i).le < 0 THEN para(i).le = scapeWidth
39.     NEXT
40.     t = t + 1
41.     _DISPLAY
42.     _LIMIT 120
43. WEND
44.  
45. SUB LoadLandscape
46.     cur& = _DEST
47.     xmax = 800 * 3.25: ymax = 600
48.     hdl& = 1
49.     para(hdl&).handle = _NEWIMAGE(xmax, ymax, 32)
50.     _DEST para(hdl&).handle
51.  
52.     FOR i = 0 TO ymax
53.         midInk 0, 0, 128, 128, 128, 200, i / ymax
54.         LINE (0, i)-(xmax, i)
55.     NEXT
56.     'the land
57.     startH = ymax - 200
58.     rr = 70: gg = 70: bb = 90
59.     FOR mountain = 1 TO nLevels
60.         IF mountain > 1 THEN
61.             para(mountain).handle = _NEWIMAGE(xmax, ymax, 32)
62.             _DEST para(mountain).handle
63.         END IF
64.         Xright = 0
65.         y = startH
66.         COLOR _RGB(rr, gg, bb)
67.         WHILE Xright < xmax - 50
68.             ' upDown = local up / down over range, change along Y
69.             ' range = how far up / down, along X
70.             upDown = (RND * .8 - .4) * (mountain * .5)
71.             range = Xright + rand%(15, 25) * 2.5 / mountain
72.             IF range > xmax - 50 THEN range = xmax - 50
73.             lastx = Xright - 1
74.             FOR x = Xright TO range 'need less flat tops
75.                 test = y + upDown
76.                 test2 = y - upDown
77.                 IF ABS(test - startH) < .13 * startH THEN y = test ELSE y = test2: upDown = -upDown
78.                 LINE (lastx, y)-(x, ymax), , BF 'just lines weren't filling right
79.                 lastx = x
80.             NEXT
81.             Xright = range
82.         WEND
83.         x = lastx + 1
84.         dy = (startH - y) / 50 'more gentle adjustment back to start of screen
85.         WHILE x <= xmax
86.             y = y + dy
87.             LINE (lastx, y)-(x, ymax), , BF 'just lines weren't filling right
88.             lastx = x
89.             x = x + 1
90.         WEND
91.         rr = rand%(rr - 15, rr): gg = rand%(gg - 15, gg): bb = rand%(bb - 25, bb)
92.         IF rr < 0 THEN rr = 0
93.         IF gg < 0 THEN gg = 0
94.         IF bb < 0 THEN bb = 0
95.         startH = startH + mountain * rand%(2, 10)
96.         para(mountain).le = xmax - 800
97.         para(mountain).rate = mountain * .5
98.     NEXT
99.     _DEST cur&
100. END SUB
101.  
102. FUNCTION rand% (lo%, hi%)
103.     rand% = INT(RND * (hi% - lo% + 1)) + lo%
104. END FUNCTION
105.  
106. SUB midInk (r1%, g1%, b1%, r2%, g2%, b2%, fr##)
107.     COLOR _RGB(r1% + (r2% - r1%) * fr##, g1% + (g2% - g1%) * fr##, b1% + (b2% - b1%) * fr##)
108. END SUB
109.  
110.  

Still some generalizations to make but I am liking results so far.

[FellippeHeitor]

That looks really good bplus! I'm gonna have a look at your code later at home.

I dealt with some parallax in my incomplete Platform game. To do so I have a Camera variable that gets added to everything drawn, then I shift the Camera by adding/subtracting from the variable: https://raw.githubusercontent.com/FellippeHeitor/Platform/master/mrJumpS.bas

[FellippeHeitor]

BTW: My only contribution to that thread was to send a cool link to [banned user]. No credit at all.

[bplus]

Thanks Fellippe,

As a matter of fact I was looking at that starting Platform program to "steal" for Locomotive background but it was a bit too much and my hack left a nasty long pause between end of last and start of new. I do really like being able to draw in code, scenes with objects and backgrounds and yours was a keeper!

I was wondering if you drew that locomotive, [banned user] did a fine job with that link.

Keep the cool links coming! :)

[FellippeHeitor]

I was wondering if you drew that locomotive, [banned user] did a fine job with that link.

Not at all. That was just a link to a reddit thread.

[johnno56]

Logged on this morning and was presented with THIS little gem. Very cool indeed... I particularly like the fact that the 'landscapes' are random and drawn. Unlike looping images. Nicely done.

I noticed that there are 6 'landscapes' but most of the time I could only see 5 as the 'front' landscape can cover the second and sometimes the third. Even so... This gem is brilliant! (IMHO)...

Will there be more?

[bplus]

Logged on this morning and was presented with THIS little gem. Very cool indeed... I particularly like the fact that the 'landscapes' are random and drawn. Unlike looping images. Nicely done.

I noticed that there are 6 'landscapes' but most of the time I could only see 5 as the 'front' landscape can cover the second and sometimes the third. Even so... This gem is brilliant! (IMHO)...

Will there be more?

Thanks Johnno, there will be more improvements to make it usable in different situations. Depends allot on interest to see more.

[TempodiBasic]

@Bplus
but where have you put the horses and the knights? It's a fine scenario!

[bplus]

Very nice bplus, but on my screen I get a 1200x600 screen where the right side is all black.  Is that normal?

I was just testing code for a proof of concept. An application of the code might use that space for something???

My next challenges for this:
Change directions of screen movement with arrow keys. (easy I think)
Generalize for any screen size. (easy)
Find objects on background, say for collisions with them. (hard) I am thinking Flappy Bird.

[bplus]

@Bplus
but where have you put the horses and the knights? It's a fine scenario!

Ha! The horses and knights are waiting for you to get your QB64 code going! ;-))

I was thinking flocking Boids.

[_vince]

@Bplus
but where have you put the horses and the knights? It's a fine scenario!

We should use it in the game where I've got a bigger boy!

[Ashish]

Hi bplus!
The parallax effect is awesome! I think it gives a bit depth to the scene or something like that.