------- Xiaoji original, reprint please give me a face
The endless... empty scene is really uncomfortable to watch, why don't you add some background. If you really want to design the level background well, it is best to make a map editor, but after all, it is a bit complicated and boring to make a development tool, and we will talk about it in other series later. This article will make a very simple scrolling screen.
The idea of scrolling the screen is to have two background images A and B the same size as the screen, so that they are seamlessly spliced and move in the same direction. When A removes the field of view, the coordinates are set to the back of B. When B removes the field of view, the A behind can come to "forward and follow up", and then B runs behind A again, and the process is repeated. (Of course, if you have multiple backgrounds strung together, like running a train, it is also possible. Alternating two pictures is the simplest example.) Let's see how to do it.
First, create an empty object Bgs under Canvas, and then create an empty object bgLayer inside, because there may be layers other than the background (flowers and plants) in the later stage.
Put 2 images in it, bg1, bg2, and put a Text below each to display the text (the text is just for the convenience of observing the effect)
Both bg1 and bg2 are set like this, because the screen of Xiaoji is 1136X640, so the two backgrounds should also be the same size
Both Texts are set in this way, one displays the text "bg1", and the other displays the text "bg2"
This is what you see in the Scene scene. The red frame is the camera's field of view, and Bg2 is lined up behind to wait for admission.
The following is to add code to control these two background images. Xiaoji adds a script Scroll above bgLayer
1 using System.Collections; 2 using System.Collections.Generic; 3 using UnityEngine; 4 using UnityEngine.UI; 5 6 public class Scroll : MonoBehaviour { 7 8 public RectTransform[] bgTarget; 9 public float[] bgSpeeds; 10 11 public Vector3[] moveDis; 12 13 // Update is called once per frame 14 void Update () { 15 Move(); 16 } 17 18 Vector2 targetPos = Vector2.zero; 19 void Move() 20 { 21 for(int i = 0; i < bgTarget.Length; i++) 22 { 23 targetPos = bgTarget[i].localPosition; 24 if(targetPos.x <= -Screen.width * 0.5 - bgTarget[i].sizeDelta.x * 0.5) 25 { 26 bgTarget[i].localPosition += moveDis[i]; 27 } 28 else 29 { 30 bgTarget[i].Translate(bgSpeeds[i] * Time.deltaTime * Vector2.left); 31 } 32 } 33 } 34 }
very very simple code
bgTarget is an array, you can drag multiple background images and put them in it (put a few and a few will be queued outside the field of view)
bgSpeeds is an array in which the corresponding movement speed is placed. The seamless movement must be consistent with the speed, so there is no need for an array here. Write it like this here, you can let go of yourself as much as you want, and it may be interesting to have different speeds.
moveDis is the same array, which can set various moving positions. In this example, after A removes the field of view, it instantly moves to a new position (should be placed behind B)
The Move() method is always called in Update(), which is automatic scrolling. If you want to make the background scroll when you move, then when you control the movement of the protagonist, call the background movement here.
In the Move() method, it is to judge whether each background has exceeded the field of view (here, only the left movement is done to remove the field of view. If the direction of movement is different, the corresponding judgment logic is also different)
If it exceeds the field of view, set a new position. If not, Translate moves towards Vector2.left (left), and the speed can be controlled by yourself.
Drag bg1 and bg2 into it, the value of MoveDis is 1136 for one background, and 2272 for two
Click to run to see the effect
Is there a seam between the two pictures? ! (Why do I just read other people's code online, but no one mentions this, or demonstrates the effect? Maybe Xiaoji didn't find it? Anyway, I found a small hole when I encountered this piece)
(Xiaoji speculates that the moment bg1 removed the field of view, and when it moved to bg2, bg2 had already moved)
This pit is really a bit of a pit! ! ! ! ! ! ! !
Change the code this time to see how much the position coordinates of the two graphs differ when bg1 moves behind bg2!
(╯°O°)╯┻━┻ Can't solve it! ! ! ! ! ! ! ! ! ! ! !
In addition to using materials or enlarging the size of the background image, is there any way to solve this seam problem? ? ? ? ? ? ? ? ? ? ? ? ? ? Please advise Orz