Simplified Scrolling Line Graphic Background

Creating Games? Developing something for fun?

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
xAction
Posts: 86
Joined: Sun Oct 03, 2021 4:14 am

Simplified Scrolling Line Graphic Background

Post by xAction » Mon Oct 18, 2021 3:09 am

MountainShifterPreview.png
MountainPointsShifter.zip
(4.15 KiB) Downloaded 152 times
I was trying to get a smaller background line for my SHMUP game but attempting parallax scrolling, ie, background moves slower than foreground was not giving smooth results. However if all you need is a single line object to scroll at a nearly constant speed left or right infinitely, this trick will do it.
I notice now it's kind a jittery as the value of change is the exact value of the difference between the x values of being shifted.
I think a line with a higher fidelity would give smoother results.

Script in the card script, there's a button to take you there. But why not show it here?

Code: Select all

local lastSeconds --// used for getting more randomseed values than the seconds supplies
local mountainPoints   --// holds the mountain points from InitMountainPoints to carry over to CreateMountainLine
local flyDir --// will carry our checkbox choice over to the card script and inform PointShift of travel direction
CheckShift -- sent by left or right checkbox buttons on card to initiate auto PointShifting

Code: Select all

on CheckShift tDir
   if tDir is not empty then put tDir into flyDir
   if the hilite of button flyDir is true then
      pointsShift flyDir
      send checkShift to card (the currentCard of this stack) in 30 milliseconds
   end if
end CheckShift
InitSeed if you press the Create button too quickly, the random generator doesn't refresh quick enough, this gives it a boost

Code: Select all

--// more mountain variation while quickly pressing Create button with changes to randomSeeD
on InitSeed
   if the seconds is lastSeconds then
      add random(2) to lastSeconds
   else
      put the seconds into  lastSeconds
   end if
   set the randomSeed to lastSeconds
end InitSeed
ResetMountain -- Sets the mountain back to it's original state if you need to

Code: Select all

on ResetMountain
   set the points of graphic "mountain" to the ogPoints of of graphic "mountain"
   set the loc of graphic "mountain" to the loc of graphic "mountainFrame"
end ResetMountain
InitMountainPoints -- randomly jut ahead and dip up and down, the mountain hustle

Code: Select all

--// create  mountain range points across the width of the screen+200
on InitMountainPoints
   put the width of this stack into W
   put the height of this stack into H
   put H/2 into centerY
   put 0,centerY into mountainPoints
   put 0 into x
   put the height of this stack/2 into y
   repeat with i = 1 to 100
      add i+ random(50) to x
      put centerY+random(5)-random(5) into y
      put cr  & x  & comma & y after mountainPoints
      add 10+random(150) to x
      put cr  & x  & comma & y after mountainPoints
   end repeat
end InitMountainPoints
CreateMountainLine -- draw a mountain defined by the point values derived in InitMountainPoints

Code: Select all

on CreateMountainLine tName
   if exists (graphic tName) then delete graphic tName
   InitSeed
   InitMountainPoints
   create graphic 
   set the style of the last graphic to "line"
   set the points of the last graphic to mountainPoints
   set the width of the last graphic to the width of graphic "mountainFrame"+200
   set the loc of the last graphic to the loc of graphic "mountainFrame"
   set the height of the last graphic to 25+random(60)
   set the OGPoints of the last graphic to mountainPoints
   set the ogLoc of the last graphic to the loc of the last graphic
   set the ogBottom of the last graphic to the bottom of the last graphic
   set the name of the last graphic to tName
end CreateMountainLine
ArrowKey simply passes our intention along to PointShift

Code: Select all

on ArrowKey tKey
   switch tKey
      case "left"
         PointsShift tKey
         break
      case "right"
         PointsShift tKey
         break
   end switch
end ArrowKey
PointsShift shifts the first or last point of the list to the last or first line of the list to create the illusion of motion
The apparent motion is the inverse of the direction we are traveling, or the arrow key we pressed or checkbox selected

Code: Select all

on PointsShift tDir
   put the points of graphic "mountain" into tPOints
   put the loc of graphic "Mountain" into mmxy
   switch tDir
      case "left"
         if item 1 of line -1 of tPoints  > the right of graphic "MountainFrame" then
            put item 1 of line -1 of tPoints -item 1 of line -2 of tPoints into xdif
            put item 2 of line -1 of tPoints -item 2 of line -2 of tPoints into ydif
            put item 1 of line 1 of tpoints - xDif into newX
            put item 2 of line 1 of tpoints - yDif into newY
            put line 1 to -2 of tPoints into newPoints
            put newx & comma & newY & cr before newPoints
         end if
         break
      case "right"
         if item 1 of line 1 of tPoints  < the left of graphic "MountainFrame" then
            put item 1 of line 1 of tPoints -item 1 of line 2 of tPoints into xdif
            put item 2 of line 1 of tPoints -item 2 of line 2of tPoints into ydif
            put item 1 of line -1 of tpoints - xDif into newX
            put item 2 of line -1 of tpoints - yDif into newY
            put line 2 to -1 of tPoints into newPoints
            put cr & newx & comma & newY  after  newPoints
         end if
         break
   end switch
   lock screen
   set the points of graphic "mountain" to newPoints
   set the loc of graphic "Mountain" to the ogLoc of graphic "Mountain"
   set the bottom of graphic "Mountain" to the ogBottom of graphic "Mountain"
   unlock screen
end PointsShift
CheckBox Button Scripts Look like this

Code: Select all

on mouseUp
   set the hilite of button "Right" to false
   if the hilite of me is true then CheckShift (the short Name of me)
end mouseUp
Last edited by xAction on Tue Oct 19, 2021 3:26 am, edited 1 time in total.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9250
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Simplified Scrolling Line Graphic Background

Post by richmond62 » Mon Oct 18, 2021 8:07 am

Maybe other readers here are a bit more switched-on than I am, but to me, at least, this is so decontextualised that
I find things difficult to understand.

Also; as far as I can work out you have 2 concerns here which might be easier to deal with if they are teased apart:

1. Generating 'random' wobbly lines.

2. Getting previously generated wobbly lines to move at slightly different speeds as you scroll left or right.

Personally I am going to get stuck into part 2 without really worrying about part 1 at the moment.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9250
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Simplified Scrolling Line Graphic Background

Post by richmond62 » Mon Oct 18, 2021 2:51 pm


xAction
Posts: 86
Joined: Sun Oct 03, 2021 4:14 am

Re: Simplified Scrolling Line Graphic Background

Post by xAction » Tue Oct 19, 2021 3:26 am

The goal here is to create the graphics entirely in Livecode and to scoll them infinetly, while also having random numbers creating infinite content without any work beyond the initial programming, as seen in my epic SHMUP game.

There I use the same kind of mountain creation routine, stretch the mountain 14000 units to create psuedo rolling hills and then use group Hscroll to create the parallax effect.However turning on revs graphic effects for those simple 200 point line graphics slows the whole game down and I suspect it has something to do with calculating the effects across 14400 pixel units multiplied by 3 multiplied by size and spread of the effects. So I was looking for a way to create only the line I need for the screen but still be able to create the illusion of motion.

I believe the solution is to create a high resolution line. Currently the algorythm is jutting forward something like 25+random(50) per point of the line graphic so that is the kind of motion we see. What I need to do is get the jutting forward value, but then create that distance by adding 1 or 2 points along that line at at time, so the scrolling takes place 1 or 2 points/pixels at a time instead 25 to 75.

Using images you'd need giant images or at least two images set up in a sequence across the card to flip the one that is moved off screen to the opposite side of the screen to create the Hannah Barabara/Looney Tunes style cartoon repeating backgrounds illusion of motion, if you needed to scroll for more than a few seconds.

Post Reply

Return to “Games”