HTML5 + lufylegend implements the scroll in the game, html5lufylegend

HTML5 + lufylegend implements the scroll in the game, html5lufylegend
Lufylegend is an open-source HTML5 engine that enables HTML5 development using the syntax similar to ActionScript3.0, including LSprite, LBitmapData, LBitmap, LLoader, LURLLoader, and LTextField, LEvent and other classes familiar to AS developers. It supports Google Chrome, Firefox, Opera, IE9, IOS, Android, and other popular environments. With lufylegend, you can easily use object-oriented programming and use Box2dWeb to create a physical game. In addition, it also has built-in LTweenLite easing and other very useful functions. Now let's start using it, it allows you to enter the HTML5 world faster!
What is a scroll?
Those who have played RPG or horizontal Combat games should know that when the figure goes to the center of the screen, the map will be moved because the map is too large, and the figure will be relatively static. This is the legendary scroll. For example, the scroll in my game "Three Kingdoms:

With the above introduction, you should understand what a scroll is. To put it bluntly, the camera follows the main character. Next, we will use the lufylegend. js game engine to achieve this effect.
Principles
In fact, the key to achieving this effect is how to make the characters static, when to move the map, and how to move the map. Before exploring these two problems, we should first create a well-structured stage layer (and an LSprite object) for future operations. The stage structure is as follows:
+-Stage Layer
|
+-Map layer
|
+-Character Layer
It can be seen that the stage layer is the parent element of the map layer and the character layer, and the character layer is above the map layer. After all, the character is standing on the map. We know that the coordinates of sub-objects are relative to the parent object, so moving the parent object will follow. This must be understood first.
How can we hold people static? When will the map be moved? How can I move a map? You may think, first use if (xxx ){...} to determine whether the coordinates of a person reach the center of the screen. If yes, move the map object. If not, move the person object. This is troublesome. In fact, there are simpler methods:
Scroll/No scroll, our characters are moving, but if the character reaches the center of the screen, it will start to scroll, our stage layer moves in the opposite direction and the same size as the velocity of the character, so the displacement of the character against the canvas is offset, and it looks static, the map moves in the opposite direction with the parent class. This is similar to a costume movie, where two people talk while riding a horse. If people and horses are moving forward and cameras are shooting at the same speed, the picture is that the characters are not moving, and the scenery behind the characters is moving.
Next, let's look at the implementation code.
Implementation Code
The following code contains detailed Annotations:
Copy XML/HTML Code to clipboard

1. LInit (30, 'mydemo', 700,480, main );
2. // The direction of movement. null indicates no movement.
3. Var direction = null;
4. // Bird, stage layer, background object
5. Var bird, stageLayer, bg;
6. // The length of each movement
7. Var step = 5;
8. Function main (){
9. // Resource list
10. Var loadList = [
11. {Name: 'bird ', path:'./bird.png '},
12. {Name: 'bg ', path:'./bg.jpg '}
13. ];
14. // Load Resources
15. LLoadManage. load (loadList, null, demoInit );
16. }
17. Function demoInit (result ){
18. // Initialize the stage Layer
19. StageLayer = new LSprite ();
20. AddChild (stageLayer );
21. // Add background
22. Bg = new LBitmap (new LBitmapData (result ['bg ']);
23. Bg. y =-100;
24. StageLayer. addChild (bg );
25. // Add a bird
26. Bird = new LBitmap (new LBitmapData (result ['bird']);
27. Bird. x = 100;
28. Bird. y = 150;
29. StageLayer. addChild (bird );
30. // Add a mouse-down event
31. StageLayer. addEventListener (LMouseEvent. MOUSE_DOWN, onDown );
32. // Add a mouse bullet event
33. StageLayer. addEventListener (LMouseEvent. MOUSE_UP, onUp );
34. // Add a timeline event
35. StageLayer. addEventListener (LEvent. ENTER_FRAME, onFrame );
36. }
37. Function onDown (e ){
38. /** Set the direction of movement based on the click position */
39. If (e. offsetX> LGlobal. width/2 ){
40. Direction = 'right ';
41. } Else {
42. Direction = 'left ';
43. }
44. }
45. Function onUp (){
46. // If the direction is set to no direction, it indicates that the data is not moved.
47. Direction = null;
48. }
49. Function onFrame (){
50. Var _ step, minX, maxX;
51. /** Mobile bird */
52. If (direction = 'right '){
53. _ Step = step;
54. } Else if (direction = 'left '){
55. _ Step =-step;
56. } Else {
57. Return;
58. }
59. Bird. x + = _ step;
60. /** Control the bird's moving range */
61. MinX = 0,
62. MaxX = bg. getWidth ()-bird. getWidth ();
63. If (bird. x <minX ){
64. Bird. x = minX;
65. } Else if (bird. x> maxX ){
66. Bird. x = maxX;
67. }
68. /** Mobile stage */
69. StageLayer. x = LGlobal. width/2-bird. x;
70. /** Control the moving range of the stage */
71. MinX = LGlobal. width-stageLayer. getWidth (),
72. MaxX = 0;
73. If (stageLayer. x <minX ){
74. StageLayer. x = minX;
75. } Else if (stageLayer. x> maxX ){
76. StageLayer. x = maxX;
77. }
78. }

Running result:

You can view the Online Demo here. Click the left half of the screen to control the bird moving to the left, click the right half of the screen, control the bird moving to the right. When the bird reaches the center of the screen, the scroll starts.