Good Morning!
I’m Abel, working with a little team in a 2D game for Android. Our game try to be really cheap in terms of cpu/gpu.
In order to made a infinite background, i’ve made two gameobjects inside of canvas render of new Unity UI (To easily fill the screen), and made them fall together unitl each one arrives to the end of the camera, then its moved to the begining of the screen space, and this loops forever.
Basically it is what you can see on the image… Sky1 - Sky2 are the two parts of the whole image, and them scroll down until the top part of each, arrives to the top image bottom position of the bottom background. (Don’t know if it’s clear…). Well, basically what i said at the begining…
This has two important problems:
-First: It is too lagged… It doesn’t seem to lag the whole game, but the way it scrolls seems really lagged.
-Second: At the moment of the repositione, maybe becouse of a small delay during Update function, it creates a small line between the two background pices, and with some of our backgrounds it looks horrible…
I’ve seen also this tutorial:
But this tutorial does it with 3D components, and our small sprites (that are scalled on unity) gets blured, and also I’m not sure if using 3D elements will be good for the game performance…
Here there is the code that scroll the backgrounds, it’s attached to sky2 (Not important, i selected it randomly…):
var speed : int;
var mainCamera : Camera;
var skyOne : UI.Image;
var skyTwo : UI.Image;
function Start () {
mainCamera = Camera.main;
skyTwo.transform.position = Camera.main.ViewportToWorldPoint(new Vector3(0.5,1.5, 1));
skyOne.transform.position = Camera.main.ViewportToWorldPoint(new Vector3(0.5, 0.5, 1));
topPosition = skyTwo.transform.position;
bottomPosition = Camera.main.ViewportToWorldPoint(Vector2(0, -0.5));
}
function FixedUpdate () {
skyOne.transform.Translate(Vector2(0, 10 * -1 * Time.deltaTime * speed/10));
skyTwo.transform.Translate(Vector2(0, 10 * -1 * Time.deltaTime * speed/10));
if(skyOne.transform.position.y <= bottomPosition.y + offsetCorrector){
offsetCorrector+=0.1;
skyOne.transform.position = topPosition;
}
if(skyTwo.transform.position.y <= bottomPosition.y + offsetCorrector){
offsetCorrector+=0.1;
skyTwo.transform.position = topPosition;
}
}
The var offsetCorrector was created to corrent the line between both backgrounds… i don’t like it but it was the only solution i found…
Anyone know a better way for doing that or what i’ve made wrong?
Thanks to everyone!!
Abel!