QB64.org Forum

Active Forums => Programs => Topic started by: bplus on March 27, 2019, 12:17:13 pm

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

Still some generalizations to make but I am liking results so far.
Title: Re: Draw Landscape with Parallax Effect
Post by: FellippeHeitor on March 27, 2019, 12:31:16 pm
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
Title: Re: Draw Landscape with Parallax Effect
Post by: FellippeHeitor on March 27, 2019, 12:31:54 pm
BTW: My only contribution to that thread was to send a cool link to [banned user]. No credit at all.
Title: Re: Draw Landscape with Parallax Effect
Post by: bplus on March 27, 2019, 01:00:46 pm
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! :)
Title: Re: Draw Landscape with Parallax Effect
Post by: FellippeHeitor on March 27, 2019, 01:19:14 pm
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.
Title: Re: Draw Landscape with Parallax Effect
Post by: johnno56 on March 27, 2019, 05:23:01 pm
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?
Title: Re: Draw Landscape with Parallax Effect
Post by: bplus on March 27, 2019, 07:31:53 pm
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.
Title: Re: Draw Landscape with Parallax Effect
Post by: TempodiBasic on March 27, 2019, 07:46:00 pm
@Bplus
but where have you put the horses and the knights? It's a fine scenario!
Title: Re: Draw Landscape with Parallax Effect
Post by: bplus on March 27, 2019, 08:18:29 pm
Quote
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.
Title: Re: Draw Landscape with Parallax Effect
Post by: bplus on March 27, 2019, 08:20:58 pm
@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.
Title: Re: Draw Landscape with Parallax Effect
Post by: _vince on March 28, 2019, 09:37:08 am
@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!
Title: Re: Draw Landscape with Parallax Effect
Post by: Ashish on March 29, 2019, 10:44:31 am
Hi bplus!
The parallax effect is awesome! I think it gives a bit depth to the scene or something like that.