How to create an HTML5 RPG Game Engine-Article 3: Use the backdrop to switch scenarios

Statement:

In RPG games, if there is a map switch, the canvas effect is usually used. The so-called curtain is actually to combine the two rectangles until the screen is covered, and then expand until all the rectangles are removed from the screen.

For the convenience of games, I added such a class to this engine.

Directory of this series of articles:

How to create an HTML5 RPG Game Engine-Article 1: Map implementation

Http://blog.csdn.net/yorhomwang/article/details/8892305

How to create an HTML5 RPG Game Engine-Article 2: Smoke and rain + snow Effect

Http://blog.csdn.net/yorhomwang/article/details/8915020

This engine is developed based on lufylegend. Learn about lufylegend first.

Official website address:Http://lufylegend.com/lufylegend

API address:Http://lufylegend.com/lufylegend/api

Today, let's first look at the implemented code:

var curtain = new LCurtainSample3();addChild(curtain);

The two rows are the simplest. Then let's take a look at how to implement it.

There are many kinds of curtain effects, so I only implement the three commonly used samples for you. You can refer to them to write more beautiful curtains.

1, lcurtainsample1

This is a basic backdrop, and the effect is the combination of left and right.

Look at the code in the constructor:

function LCurtainSample1(speed,onClosing,onComplete){var s = this;base(s,LSprite,[]);if(!speed)speed = LStage.width/100;if(!onClosing){s.onClosing = function(){};}else{s.onClosing = onClosing;}if(!onComplete){s.onComplete = function(){};}else{s.onComplete = onComplete;}s.mode = "close";s.width1 = 0;s.width2 = 0;s.isDoClosing = false;s.speed = speed;s.addEventListener(LEvent.ENTER_FRAME,s.onshow);}

This class is inherited from the lsprite class and has three parameters, namely, the combination speed of the canvas and the expansion speed. The function is called after the canvas is merged, and the function is called after the canvas is expanded.

The mode attribute, as its name implies, is used to represent the next job. If it is close, it indicates that it should be closed.
We define two attributes in the Table: width1 and wid22. they indicate the width of the two backdrop display and are combined by adjusting the width. In addition, isdoclosing is defined to determine whether the aggregation is successful. Use speed to save the canvas movement speed for future use.

Then we add a timeline event to ourselves and call the onshow method to paint the canvas in the timeline event.

Complete code in onshow:

LCurtainSample1.prototype.onshow = function(s){s.graphics.clear();s.graphics.drawRect(1,"black",[0,0,s.width1,LStage.height],true,"black");s.graphics.drawRect(1,"black",[LStage.width-s.width2,0,s.width2,LStage.height],true,"black");if(s.width1 >= LStage.width/2){s.mode = "open";if(s.isDoClosing == false){s.onClosing();s.isDoClosing = true;}}if(s.mode == "close"){s.width1 += s.speed;s.width2 += s.speed;}else if(s.mode == "open"){s.width1 -= s.speed;s.width2 -= s.speed;if(s.width1 < 0){s.mode = "stop";}}else if(s.mode == "stop"){s.graphics.clear();s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);s.onComplete();}}

First, we will clear our drawing area, and then draw a rectangular shape with the height of the canvas and the width of width1. Since the X coordinate is 0 and Y coordinate is 0, no processing is required.

Then draw a rectangle with the height of the canvas and wid2width in the same way. But since the painting starts at the far right of the screen, we have to calculate its X coordinate and then draw it again. The calculation method is simple. You can use the screen width minus the wid2's length to obtain the X coordinate starting from the paint brush.

Then, we will determine whether the first canvas has reached the midpoint. If yes, we will set the mode to "open", indicating that the next step is open and whether isdoclosing is false, yes, it is set to true, and the function called when the combination is called.

Next we will use the method to determine the mode Value to increase or decrease the curtain. When it is close, the width will increase and when it is open, it will become smaller. If the movement is complete, set the mode to stop, then judge whether the screen is cleared if it is stop, and then remove the timeline event to stop the event. The effect is as follows:

Although it is a bit ugly, it would be nice to put it in the game.

2, lcurtainsample2

Lcurtainsample2 is similar to lcurtainsample1, but one is horizontal and the other is vertical.

Directly run the Code:

/***LCurtainSample2.js*/function LCurtainSample2(speed,onClosing,onComplete){var s = this;base(s,LSprite,[]);if(!speed)speed = LStage.height/100;if(!onClosing){s.onClosing = function(){};}else{s.onClosing = onClosing;}if(!onComplete){s.onComplete = function(){};}else{s.onComplete = onComplete;}s.mode = "close";s.height1 = 0;s.height2 = 0;s.isDoClosing = false;s.speed = speed;s.addEventListener(LEvent.ENTER_FRAME,s.onshow);}LCurtainSample2.prototype.onshow = function(s){s.graphics.clear();s.graphics.drawRect(1,"black",[0,0,LStage.width,s.height1],true,"black");s.graphics.drawRect(1,"black",[0,LStage.height-s.height2,LStage.width,s.height2],true,"black");if(s.height1 >= LStage.height/2){s.mode = "open";if(s.isDoClosing == false){s.onClosing();s.isDoClosing = true;}}if(s.mode == "close"){s.height1 += s.speed;s.height2 += s.speed;}else if(s.mode == "open"){s.height1 -= s.speed;s.height2 -= s.speed;if(s.height1 < 0){s.mode = "stop";}}else if(s.mode == "stop"){s.graphics.clear();s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);s.onComplete();}}

The effect is as follows:

3, lcurtainsample3

Lcurtainsample3 is a combination of lcurtainsample1 and lcurtainsample2. The implementation method is similar. You can see:

/***LCurtainSample3.js*/function LCurtainSample3(speed,onClosing,onComplete){var s = this;base(s,LSprite,[]);if(!speed)speed = LStage.width/100;if(!onClosing){s.onClosing = function(){};}else{s.onClosing = onClosing;}if(!onComplete){s.onComplete = function(){};}else{s.onComplete = onComplete;}s.mode = "close";s.height1 = 0;s.height2 = 0;s.width1 = 0;s.width2 = 0;s.isDoClosing = false;s.speed = speed;s.addEventListener(LEvent.ENTER_FRAME,s.onshow);}LCurtainSample3.prototype.onshow = function(s){s.graphics.clear();s.graphics.drawRect(1,"black",[0,0,LStage.width,s.height1],true,"black");s.graphics.drawRect(1,"black",[0,LStage.height-s.height2,LStage.width,s.height2],true,"black");s.graphics.drawRect(1,"black",[0,0,s.width1,LStage.height],true,"black");s.graphics.drawRect(1,"black",[LStage.width-s.width2,0,s.width2,LStage.height],true,"black");if(s.height1 >= LStage.height/2 ){s.mode = "open";if(s.isDoClosing == false){s.onClosing();s.isDoClosing = true;}}if(s.mode == "close"){s.height1 += s.speed;s.height2 += s.speed;s.width1 += s.speed;s.width2 += s.speed;}else if(s.mode == "open"){s.height1 -= s.speed;s.height2 -= s.speed;s.width1 -= s.speed;s.width2 -= s.speed;if(s.height1 < 0){s.mode = "stop";}}else if(s.mode == "stop"){s.graphics.clear();s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);s.onComplete();}}

The effect is as follows:

4. Switch scenario

We have implemented the backdrop class above, and we will take a look at it.

First, let's look for several images:

There is another

Then we use our canvas class to implement switching scenarios. The Code is as follows:

<! Doctype HTML> <HTML lang = "en"> 
As follows:
Close

After expansion

Xi ~ Nice.
5. Source Code
Although there are many codes for this development, they are all similar. Put them below and you can test them as follows:

/***LCurtainSample1.js*/function LCurtainSample1(speed,onClosing,onComplete){var s = this;base(s,LSprite,[]);if(!speed)speed = LStage.width/100;if(!onClosing){s.onClosing = function(){};}else{s.onClosing = onClosing;}if(!onComplete){s.onComplete = function(){};}else{s.onComplete = onComplete;}s.mode = "close";s.width1 = 0;s.width2 = 0;s.isDoClosing = false;s.speed = speed;s.addEventListener(LEvent.ENTER_FRAME,s.onshow);}LCurtainSample1.prototype.onshow = function(s){s.graphics.clear();s.graphics.drawRect(1,"black",[0,0,s.width1,LStage.height],true,"black");s.graphics.drawRect(1,"black",[LStage.width-s.width2,0,s.width2,LStage.height],true,"black");if(s.width1 >= LStage.width/2){s.mode = "open";if(s.isDoClosing == false){s.onClosing();s.isDoClosing = true;}}if(s.mode == "close"){s.width1 += s.speed;s.width2 += s.speed;}else if(s.mode == "open"){s.width1 -= s.speed;s.width2 -= s.speed;if(s.width1 < 0){s.mode = "stop";}}else if(s.mode == "stop"){s.graphics.clear();s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);s.onComplete();}}/***LCurtainSample2.js*/function LCurtainSample2(speed,onClosing,onComplete){var s = this;base(s,LSprite,[]);if(!speed)speed = LStage.height/100;if(!onClosing){s.onClosing = function(){};}else{s.onClosing = onClosing;}if(!onComplete){s.onComplete = function(){};}else{s.onComplete = onComplete;}s.mode = "close";s.height1 = 0;s.height2 = 0;s.isDoClosing = false;s.speed = speed;s.addEventListener(LEvent.ENTER_FRAME,s.onshow);}LCurtainSample2.prototype.onshow = function(s){s.graphics.clear();s.graphics.drawRect(1,"black",[0,0,LStage.width,s.height1],true,"black");s.graphics.drawRect(1,"black",[0,LStage.height-s.height2,LStage.width,s.height2],true,"black");if(s.height1 >= LStage.height/2){s.mode = "open";if(s.isDoClosing == false){s.onClosing();s.isDoClosing = true;}}if(s.mode == "close"){s.height1 += s.speed;s.height2 += s.speed;}else if(s.mode == "open"){s.height1 -= s.speed;s.height2 -= s.speed;if(s.height1 < 0){s.mode = "stop";}}else if(s.mode == "stop"){s.graphics.clear();s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);s.onComplete();}}/***LCurtainSample3.js*/function LCurtainSample3(speed,onClosing,onComplete){var s = this;base(s,LSprite,[]);if(!speed)speed = LStage.width/100;if(!onClosing){s.onClosing = function(){};}else{s.onClosing = onClosing;}if(!onComplete){s.onComplete = function(){};}else{s.onComplete = onComplete;}s.mode = "close";s.height1 = 0;s.height2 = 0;s.width1 = 0;s.width2 = 0;s.isDoClosing = false;s.speed = speed;s.addEventListener(LEvent.ENTER_FRAME,s.onshow);}LCurtainSample3.prototype.onshow = function(s){s.graphics.clear();s.graphics.drawRect(1,"black",[0,0,LStage.width,s.height1],true,"black");s.graphics.drawRect(1,"black",[0,LStage.height-s.height2,LStage.width,s.height2],true,"black");s.graphics.drawRect(1,"black",[0,0,s.width1,LStage.height],true,"black");s.graphics.drawRect(1,"black",[LStage.width-s.width2,0,s.width2,LStage.height],true,"black");if(s.height1 >= LStage.height/2 ){s.mode = "open";if(s.isDoClosing == false){s.onClosing();s.isDoClosing = true;}}if(s.mode == "close"){s.height1 += s.speed;s.height2 += s.speed;s.width1 += s.speed;s.width2 += s.speed;}else if(s.mode == "open"){s.height1 -= s.speed;s.height2 -= s.speed;s.width1 -= s.speed;s.width2 -= s.speed;if(s.height1 < 0){s.mode = "stop";}}else if(s.mode == "stop"){s.graphics.clear();s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);s.onComplete();}}
This lecture is here. Next time, we will implement essential conversation classes. Don't miss it !!!


Thank you for reading this article. Support is the greatest encouragement.

----------------------------------------------------------------
You are welcome to repost my article.
Reprinted Please note: transferred from yorhom's game box
Http://blog.csdn.net/yorhomwang
Continue to follow my blog