HTML5 lufylegend implements scrolls in the game _html5 tutorial skills-H5 Tutorial-php.cn

HTML5 lufylegend implements scrolls in the game _html5 tutorial skills

WBOY

Release： 2016-05-16 15:45:57

Original

1960 people have browsed it

lufylegend is an HTML5 open source engine that implements HTML5 development using ActionScript 3.0-like syntax. It includes LSprite, LBitmapData, LBitmap, LLoader, LURLLoader, LTextField, LEvent and many other classes familiar to AS developers. It supports Google Chrome. , Firefox, Opera, IE9, IOS, Android and other popular environments. You can use lufylegend to easily use object-oriented programming, and can cooperate with Box2dWeb to create physics games. In addition, it also has built-in LTweenLite easing class and other very practical functions. Start using it now, it will allow you to enter the world of HTML5 faster. !
What is a scroll?
Students who have played RPG or side-scrolling fighting should know that after the character walks to the center of the screen, the map will move due to the large size of the map, while the character will remain relatively stationary. This is the legendary scroll. For example, the picture below is the scroll in my game "Three Kingdoms Front":

With the above introduction, everyone should understand what a scroll is. To put it bluntly, it is the effect of the camera following the protagonist. Next, we will use lufylegend.js game engine to achieve this effect.
Principle introduction
In fact, the key to achieving this effect lies in how to make the character still, when to move the map, and how to move the map. Before exploring these two issues, we first create a well-structured stage layer (and an LSprite object) for later 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 in Above the map layer, after all, the character is standing on the map. We know that the coordinates of the child object are relative to the parent object, so if the parent object is moved, the child object will move accordingly. This needs to be understood first.
How to make a character still? When do you move the map? How to move the map? Maybe you would like to first use if(xxx){...} to determine whether the character's coordinates have reached the center of the screen. If so, move the map object. If not, move the character object. It would be troublesome if you do this. In fact, there is a simpler method:
When scrolling/not scrolling, our characters are moving, but if the character reaches the center of the screen and starts scrolling, our stage layer will move in the opposite direction and size to the character's speed. With the same movement, the character's displacement relative to the canvas will be offset, and it will appear to be stationary, while the map will follow the parent class and move in the opposite direction. This is similar to filming a costume movie, where two people are riding horses and talking at the same time. If a man and a horse are moving forward and the camera follows them at the same speed, the resulting picture will be that the characters are not moving, but the scenery behind the characters is moving.
Let’s look at the implementation code next.
Implementation code
The following is the code with detailed comments:

XML/HTML CodeCopy content to clipboard