[HTML5] uses lufylegend to implement the scroll in the game

[HTML5] uses lufylegend to implement the scroll in the game
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 (andLSpriteObject) 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 want to useif(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 character's speed.canvasThe displacement of the canvas is offset, and it looks static, and the map moves in the opposite direction along 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:

LInit (30, "mydemo", 700,480, main); // The moving direction. null indicates that var direction = null is not moved. // bird, stage layer, background object var bird, stageLayer, bg; // The length of each movement var step = 5; function main () {// resource list var loadList = [{name: "bird", path :". /bird.png "}, {name:" bg ", path :". /bg.jpg "}]; // loads the resource LLoadManage. load (loadList, null, demoInit);} function demoInit (result) {// initialize the stage layer stageLayer = new LSprite (); addChild (stageLayer ); // Add background bg = new LBitmap (new LBitmapData (result ["bg"]); bg. y =-100; stageLayer. addChild (bg); // Add bird = new LBitmap (new LBitmapData (result ["bird"]); bird. x = 100; bird. y = 150; stageLayer. addChild (bird); // Add and press the event stageLayer. addEventListener (LMouseEvent. MOUSE_DOWN, onDown); // Add the stageLayer event with the mouse. addEventListener (LMouseEvent. MOUSE_UP, onUp); // Add a timeline event stageLayer. addEventListener (LEvent. ENTER_FRAME, onFrame);} function onDown (e) {/** set the moving direction based on the click position */if (e. offsetX> LGlobal. width/2) {direction = "right";} else {direction = "left" ;}} function onUp () {// set the direction to no direction, indicates not moving direction = null;} function onFrame () {var _ step, minX, maxX;/** mobile bird */if (direction = "right ") {_ step = step;} else if (direction = "left") {_ step =-step;} else {return;} bird. x + = _ step;/** control the bird movement range */minX = 0, maxX = bg. getWidth ()-bird. getWidth (); if (bird. x <minX) {bird. x = minX;} else if (bird. x> maxX) {bird. x = maxX;}/** mobile stage */stageLayer. x = LGlobal. width/2-bird. x;/** control the moving range of the stage */minX = LGlobal. width-stageLayer. getWidth (), maxX = 0; if (stageLayer. x <minX) {stageLayer. x = minX;} else if (stageLayer. x> maxX) {stageLayer. x = maxX ;}}

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.