How to make an infinite scrolling background that changes theme? similar to to the game JetPack JoyRide on mobile

okay thanks ill give this a shot and see how it turns out

heres my code, it feels like it could work but i cant seem to set the offset to 0 after every texture switch, it just keeps incrementing.

i used 2 images for test purposes, the first image was 720 X 1280 and pitch black. the second image was the gradient which i had to make 3 times bigger on the y axis (720x3840) so that it smoothly transitioned from black to white,.. so the first 720x1280 was pitch black, the middle 720x1280 was the gradient from black to white, and the last was pitch white. The timer variables dont really matter at the moment because im just trying to transition from pitch black to white through the gradient. any ideas on how to reset the y offset back to 0 after every texture change?

     var scrollSpeed : float = 0.5;
     var themetimer  : float = 4.0;
     var gradienttimer : float = 2.0;
     var GradientOn : boolean = false;
     var $$anonymous$$ainImageOn : boolean = true;
     var texture : Texture;
     var gradient : Texture;
     var timer : float;
     var offset : float;
     
     function Start()
     {
     timer = themetimer;
     }
     
     
     function Update () 
     {
         offset += Time.deltaTime*scrollSpeed;
         timer -= Time.deltaTime;
         var offset : float = Time.time * scrollSpeed;
             renderer.material.SetTextureOffset ("_$$anonymous$$ainTex", Vector2(0,offset));
             if(timer <= 0 && $$anonymous$$ainImageOn == true)
             {
             Gradient();
             timer = gradienttimer;
             $$anonymous$$ainImageOn = false;
             GradientOn = true;
             renderer.material.SetTextureOffset ("_$$anonymous$$ainTex", Vector2(0,0));
             }
             else if (timer <= 0 && GradientOn == true)
             {
             $$anonymous$$ainImage();
             timer = themetimer;
             GradientOn = false;
             $$anonymous$$ainImageOn = true;
             
             }
     }
     
     
     function $$anonymous$$ainImage()
     {
     renderer.material.mainTexture = texture;
     renderer.material.mainTextureScale = Vector2(1,1);
     offset=0;
     }
     
     function Gradient()
     {    
     renderer.material.mainTexture = gradient;
     renderer.material.mainTextureScale = Vector2(1,-0.333);
     offset=0;
     }

i know the problem is in the line "offset += Time.deltaTime*scrollSpeed;" but im not sure what alternative to use.

got it to work using this method thanks mate.

what it does is smoothly transitions between black and white, using 4 textures.. if anyone wants to know how it works..

variable texture is 720x1280 and pitch black

variable gradient is 720x3840 , bottom third is black, middle is gradient, top is white.

variable white is pitch white

variable whitetoblacktex is the same as gradient with inverted colors.

heres the script ( it needs touching up but it gives an idea of how it works)

     var scrollSpeed : float = 0.5;
     var GradientOn : boolean = false;
     var $$anonymous$$ainImageOn : boolean = true;
     var WhiteOn : boolean = false;
     var WhiteToBlackon  : boolean = false;
     var texture : Texture;
     var gradient : Texture;
     var white : Texture;
     var WhiteToBlacktex : Texture;
     var offset : float;
     var reset : float;
     
 
     
     
     function Update () 
     {
         offset = reset += Time.deltaTime*scrollSpeed;
 
             renderer.material.SetTextureOffset ("_$$anonymous$$ainTex", Vector2(0,reset));
             if(offset >= 1.00 && $$anonymous$$ainImageOn == true)
             {
                 reset=0;
             Gradient();
             $$anonymous$$ainImageOn = false;
             GradientOn = true;
             
             }
             else if (offset >= 0.66 && GradientOn == true)
             {
             reset=0;
             White();
             GradientOn = false;
             WhiteOn = true;
             }
             else if (offset >= 1.00 && WhiteOn == true)
             {
                 reset=0;
             WhiteToBlack();
             WhiteOn=false;
             WhiteToBlackon = true;
             }
             else if (offset >= 0.66 && WhiteToBlackon == true)
             {
                 reset=0;
             $$anonymous$$ainImage();
             WhiteToBlackon = false;
             $$anonymous$$ainImageOn = true;
             }
     }
     
     
     function $$anonymous$$ainImage()
     {
     renderer.material.mainTexture = texture;
     renderer.material.mainTextureScale = Vector2(1,1);
     }
     
     function Gradient()
     {    
     renderer.material.mainTexture = gradient;
     renderer.material.mainTextureScale = Vector2(1,0.333);
     }
     
     function White()
     {
     renderer.material.mainTexture = white;
     renderer.material.mainTextureScale = Vector2(1,1);
     }
     
     function WhiteToBlack()
     {    
     renderer.material.mainTexture = WhiteToBlacktex;
     renderer.material.mainTextureScale = Vector2(1,0.333);
     }
     

so after every texture has scrolled its entire length it changes to the new texture.

So you figured it out? Awesome! Good luck with your game.

C# please...