Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use HTML5+lufylegend to achieve scrolls in the game. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Lufylegend is an open source HTML5 engine, it implements the use of ActionScript3.0 syntax for HTML5 development, including LSprite,LBitmapData,LBitmap,LLoader,LURLLoader,LTextField,LEvent and other AS developers are familiar with the class, support Google Chrome,Firefox,Opera,IE9,IOS,Android and other popular environments. Using lufylegend can easily use object-oriented programming, and can cooperate with Box2dWeb to make physical games, in addition, it also has built-in LTweenLite ease class and other very practical functions, now start to use it, it can let you enter the world of HTML5 faster!

What is a scroll?

Students who have played RPG or horizontal fighting should know that when the character walks to the center of the screen, the map will move because the map is too large, and the character will be relatively motionless. This is the legendary scroll. For example, the following picture is a scroll from my game "three Kingdoms Front":

With the above introduction, you should understand what a scroll is. To put it bluntly, it is the effect of the camera following the protagonist. Next, we will use the lufylegend.js game engine to achieve this effect.

Introduction of principle

In fact, the key to achieving this effect lies in how to make the character stand still, when to move the map, and how to move the map. Before exploring these two questions, let's create a well-structured stage layer (and a 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 ground layer and the character layer, and the character layer is above the ground 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 you move the parent object, the child object will move with it. We need to understand this first.

How to make the characters stand still? When do I move the map? How to move the map? You may think, first of all, use if (xxx) {...} to determine whether the character's coordinates reach the center of the screen, if so, move the map object, if not, move the character object. It would be troublesome to do so. In fact, there is a simpler way:

When scrolls / non-scrolls, our characters are all moving, but if the character reaches the center of the screen and starts to scroll, our stage layer moves in the opposite direction and the same size as the character's speed, then the displacement of the character relative to the canvas canvas is offset and appears to be still, while the map moves in the opposite direction with the parent class. This is similar to making a costume movie in which two people talk while riding a horse. If the person and the horse are moving forward and the camera follows at the same speed, then the picture is that the character is not moving, while the scenery behind the character is moving.

Next, let's look at the implementation code.

Implementation code

The following is the code with detailed comments:

LInit (30, 'mydemo', 700480, main)

/ / moving direction. "null" means it has not moved.

Var direction = null

/ / Bird, stage layer, background object

Var bird, stageLayer, bg

/ / the length of each move

Var step = 5

Function main () {

/ / Resource list

Var loadList = [

{name: 'bird', path:'. / bird.png'}

{name: 'bg', path:'. / bg.jpg'}

]

/ / load resources

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)

/ / join the bird

Bird = new LBitmap (new LBitmapData (result ['bird']))

Bird.x = 100

Bird.y = 150

StageLayer.addChild (bird)

/ / add a mouse down event

StageLayer.addEventListener (LMouseEvent.MOUSE_DOWN, onDown)

/ / add mouse pop-up event

StageLayer.addEventListener (LMouseEvent.MOUSE_UP, onUp)

/ / add Timeline event

StageLayer.addEventListener (LEvent.ENTER_FRAME, onFrame)

}

Function onDown (e) {

/ * * set the movement direction according to the click position * /

If (e.offsetX > LGlobal.width / 2) {

Direction = 'right'

} else {

Direction = 'left'

}

}

Function onUp () {

/ / set the direction to no direction, which means no movement

Direction = null

}

Function onFrame () {

Var _ step, minX, maxX

/ * * move birds * /

If (direction = = 'right') {

_ step = step

} else if (direction = = 'left') {

_ step =-step

} else {

Return

}

Bird.x + = _ step

/ * * Control the range of bird movement * /

MinX = 0

MaxX = bg.getWidth ()-bird.getWidth ()

If (bird.x

MaxX) {

Bird.x = maxX

}

/ * * move the stage * /

StageLayer.x = LGlobal.width / 2-bird.x

/ * * Control the range of stage movement * /

MinX = LGlobal.width-stageLayer.getWidth ()

MaxX = 0

If (stageLayer.x

MaxX) {

StageLayer.x = maxX

}

}

This is the end of this article on "how to use HTML5+lufylegend to achieve scrolls in the game". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.