The development of the main scene parallax effect of Unity3d game development experience

AnalysisWhat is parallax scrolling? Degree Niang explanation: lets the multi-layer background move at different speed, forms the three-dimensional movement effect. as can be seen, the home scene background is broadly divided into3layer, grassland, mountains and rivers and clouds, each layer of speed are different. then the analysis, although the degree Niang explanation is explained by the speed, but uses the speed to calculate is not suitable, because the main layer (namely grass layer) The rolling is follows our finger the movement, therefore should convert the speed to the displacement to calculate. Since the displacement is used to calculate the displacement of each layer, how can we synchronize the multiple layers, I use the normalization method, the whole scene of the scroll as a0~1the normalized displacement between each layer is simply multiplied by the maximum displacement of the respective layer. with the normalized displacement to realize the Parallax scrolling, the next step is to let the scene scroll following the finger movement, now actually very good implementation, just according to the distance of the finger movement (Xdirection) and the maximum displacement calculation of the main layer. The final analysis is inertia, after the finger left the screen after the scene will still scroll for a period of time, in fact, is a deceleration movement. (finally analyzed, people will not analyze, suppressed to now have internal injuries ) ImplementThe first step is to achieveSetPosition ()method, set the normalized position by this method, and then move all the layers to the correct location. Public transform[] layers;//each layer of Transform. Public float[] offsets;//corresponds to the maximum displacement of each layer. int count; Float location;//defines a normalized position. void Start () { Count = Layers.length; } public void SetPosition (float position) { Location = MATHF.CLAMP01 (position); for (int i = 0; i < count; i++) { Layers[i].localposition = new Vector3 (offsets[i] * location, 0, 0); } } Copy Code

whenLocationto be0The leftmost content of each layer is displayed,1displays the rightmost content of each layer. Assign the root node of each layer to theLayersproperty. As shown in the following: The overall effect is as follows: then move the layer to the left until the rightmost content is displayed, at which point the root nodeXThe coordinates are the maximum displacements we want, assigning this value to the correspondingOffsets(this value is a negative number). The second step is to realize the scrolling of the finger following. BOOL dragged; float Lasttouch; float Dragoffset; float Touchtopos; void Start () { Count = Layers.length; dragged = false; Touchtopos = 1f/screen.width * camera.orthographicsize * 2f * CAMERA.ASPECT/MATHF.ABS (offsets[0]); } void Update () { if (Input.getmousebuttondown (0)) { dragged = true; Lasttouch = input.mouseposition.x; } if (input.getmousebuttonup (0)) { dragged = false; } if (dragged) { float Currtouch = input.mouseposition.x; Dragoffset = Lasttouch-currtouch; Lasttouch = Currtouch; Dragoffset *= Touchtopos; Location + = Dragoffset; SetPosition (location); } } Copy Code

This code is to calculate the change in the position of the scene when each finger is moved.--dragoffsetAnd adds that amount to the currentLocationuse after addingSetPositionto update each layer. The third step is to realize inertia. For more highlights, please click here ."Dog Planing Learning Net"

2. BOOL tweened;
   
4. float Tweentime;
   
6. const float maxtweentime = 0.5f;
   
8. void Start ()
   
10. {
    
12. Count = Layers.length;
    
14. dragged = false;
    
16. tweened = false;
    
18. Touchtopos = 1f/screen.width * camera.orthographicsize * 2f * CAMERA.ASPECT/MATHF.ABS (offsets[0]);
    
20. }
    
22. void Update ()
    
24. {
    
26. if (Input.getmousebuttondown (0))
    
28. {
    
30. dragged = true;
    
32. tweened = false;
    
34. Lasttouch = input.mouseposition.x;
    
36. }
    
38. if (input.getmousebuttonup (0))
    
40. {
    
42. dragged = false;
    
44. tweened = true;
    
46. Tweentime = 0f;
    
48. }
    
50. if (dragged)
    
52. {
    
54. ......
    
56. } else if (tweened)
    
58. {
    
60. Tweentime + = Time.deltatime;
    
62. if (Tweentime > Maxtweentime)
    
64. {
    
66. tweened = false;
    
68. } else
    
70. {
    
72. float offset = Dragoffset * (1-tweentime/maxtweentime);
    
74. Location + = offset;
    
76. SetPosition (location);
    
78. }
    
80. }
    
82. }

Copy Code

This is used in the second step to calculate theDragoffset, the last calculation (that is, before the finger leaves the screen)Dragoffsetat maximum inertia timeMaxtweentimeinternal reduction to0and accumulate toLocationto achieve the effect of deceleration movement, and the distance of movement is related to the speed of the finger movement. finally finished, or the code is cool 

The development of the main scene parallax effect of Unity3d game development experience