- Home /
How to make an infinite scrolling background that changes theme? similar to to the game JetPack JoyRide on mobile
How would i go about making an infinite scrolling background that can seamlessly change to a random theme? for example say i had 4 themed settings i want to scroll through, Grass, ice, fire, metal. how could i make it so it started off grassy, scrolled for say 10 or so seconds then seamlessy changed setting to either ice,fire or metal and then repeat this process infinitely. If you're fimiliar with the jetpack joyride game you may notice how you start in the laboratory and then through the window the scene seamlessy changes to trees, boxes, buildings etc. i know how to make an unlimited scrolling texture through textureoffset but only for 1 theme, what would i use to make it so it changes to a random scene? i thought about something similar to a sprite sheet that had all the scenes on it but idk if/how that would work. any help would be appreciated, thanks.
Answer by fifthknotch · Mar 07, 2014 at 04:04 AM
You would need a seemless texture for each theme to scroll through. To link each theme you need to create custom textures that will seamlessly link two theme textures. If you had four scenes, you would need at least seven different textures. One for each theme and three to link themes.
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.
Your answer
![](https://koobas.hobune.stream/wayback/20220613135604im_/https://answers.unity.com/themes/thub/images/avi.jpg)