Design and Development of game scripts-Chapter 5 display layer, drawing

More than onceArticleThe importance of game layering has been mentioned in, and the Division of game display layers and the sequence of these display layers can be well controlled to perfectly control the display and occlusion of each element in the game, this chapter uses scripts to divide the game display layer and draw various graphics on the display layer. Several scripts to be implemented in this article are as follows.

 

 
/* Chapter 5 of game script design and development * // Add a display layer. add (-, layer01, 100,100); // clear the display layer. clear (layer01); // remove the display layer. remove (layer01); // draw a solid rectangular layer. drawrect (layer02, 100,100, 0xff0000); // draw a layer with a hollow rectangle. drawrectline (layer02, 100,100, 0xff0000); // draw a rectangular layer with solid rounded corners. drawroundrect (layer01, 100,100, 880000, 10, 0 x); // draw the rectangular frame layer of the hollow rounded corner. drawroundrectline (layer01, 100,100, 880000, 10, 0 x); // draw a solid triangle layer. drawtriangle (layer03, 100,100, 50,150, 0xff0000); // draw a layer with a hollow triangle frame. drawtriangleline (layer03, 0, 0, 100,100, 50, 0, 0xff0000); // The display layer is slowed down. transition (layer03, {X: 50}, 1, strong. easeout );
 

Next we will implement the parsing of these scripts one by one.

 

1. Add, clear, and delete a display Layer

To achieve game layering, you must first add the display layer to the game, and first modify the parsing function of the scriptlayer class.

 

 
Scriptlayer. analysis = function (value) {var start = value. indexof ("("); var end = value. indexof (")"); Switch (value. substr (0, start) {Case "layer. add ": // Add the display layer scriptlayer. setlayer (value, start, end); break; Case "layer. remove ": // remove the display layer scriptlayer. removelayer (value, start, end); break; Case "layer. clear ": // clear the display layer scriptlayer. clearlayer (value, start, end); break; default :}};
 

1. Add a display Layer

The easiest way to add a display layer is to look at the followingCode

Scriptlayer. setlayer = function (value, start, end) {var Params = value. substring (start + 1, end ). split (","); var parentstr = Params [0]; var namestr = Params [1]; var xint = parseint (Params [2]); vaR yint = parseint (Params [3]); var script = lglobal. script; var layer, parent, I; parent = script. scriptarray. layerlist [parentstr]; layer = new lsprite (); layer. X = xint; layer. y = yint; layer. name = namestr; parent. addchild (layer); script. scriptarray. layerlist [namestr] = layer; script. analysis ();};
 

The following script shows that four parameters are required for adding a display layer, namely, the parent layer of the added display layer, the name of the added display layer, and the coordinate X, y.

 
Layer. Add (-, layer01, 100,100 );
 

Scriptlayer. in the setlayer function, the parameters are first decomposed according to the comma, And the names are extracted from the script. scriptarray. find the parent display layer object in layerlist, create an lsprite, add it to the parent display layer, and save it to the layerlist array.

Next, let's test it. Modify the script file as follows:

Invocation); IMG. add (layer01, backimg01, backdata, 0,0, 100,100, 1); IMG. add (layer02, backimg02, backdata, 0,0, 100,100, 1); IMG. add (layer03, backimg03, backdata, 0,0, 100,100, 1 );
 

Test connection

Http://lufylegend.com/demo/test/lsharp/05/index01.html

Run the script to get the following results:

2. Clear the display layer.

Clear the display layer is to remove all subclasses on the display layer. See the following code.

 scriptlayer. removefromarray = function (OBJ) {If (obj. childlist = NULL) return; var COUNT = obj. childlist. length; For (VAR I = 0; I 
  

In fact, clearing an lsprite object is very simple. Calling the die function can remove all events and calling removeallchild can remove all sub-objects. However, in addition to clearing this object, you still need to remove the removed sub-objects and sub-objects from the layerlist array. Therefore, I added the removefromarray function, which recursively loops all sub-objects, clear all of them from layerlist, so that an lsprite object is actually cleared from the script engine.

3. Remove the display layer.

To remove an lsprite object, you only need to removechild from its parent display layer object. However, like clearing the display layer above, you also need to clear sub-objects. See the following code.

 
Scriptlayer. removelayer = function (value, start, end) {var namestr = lmath. trim (value. substring (start + 1, end); var script = lglobal. script; var layer, parent; layer = script. scriptarray. layerlist [namestr]; If (! Layer) {script. analysis (); return;} parent = layer. parent; scriptlayer. removefromarray (layer); parent. removechild (layer); script. scriptarray. layerlist [namestr] = NULL; script. analysis ();}
 

Removing the display layer is one step more than clearing the display layer, that is, removing yourself. Next, we will test the clearing and removal operations. The modification script is as follows:

Invocation); IMG. add (layer01, backimg01, backdata, 0,0, 100,100, 1); IMG. add (layer02, backimg02, backdata, 0,0, 100,100, 1); IMG. add (layer03, backimg03, backdata, 0,0, 100,100, 1 );
 

Test connection

Http://lufylegend.com/demo/test/lsharp/05/index02.html

Run the script to get the following results:

You can see that the clearing and removal of the display layer have been successfully executed.

2. Draw rectangles, rounded rectangles, and triangles.

The following describes how to use a script to draw a graph, starting with a simple rectangle.

The script for drawing a solid rectangle and a hollow rectangle is as follows:

 
Layer. drawrect (layer02, 100,100, 100,100, 0xff0000); layer. drawrectline (layer02, 0xff0000, 2 );
 

Several parameters are: Display layer, starting coordinate X, starting coordinate Y, width, height, and color.

If the rectangle is drawn, one more parameter is used to set the line width.

First modify the parsing function of the scriptlayer class

 

Scriptlayer. analysis = function (value) {var start = value. indexof ("("); var end = value. indexof (")"); Switch (value. substr (0, start) {Case "layer. add ": // Add the display layer scriptlayer. setlayer (value, start, end); break; Case "layer. remove ": // remove the display layer scriptlayer. removelayer (value, start, end); break; Case "layer. clear ": // clear the display layer scriptlayer. clearlayer (value, start, end); break; Case "layer. drawrect ": // draw a solid rectangle scriptlayer. drawrect (value, start, end); break; Case "layer. drawrectline ": // draw a scriptlayer with a hollow rectangle. drawrectline (value, start, end); break; default :}};
 

 

The following describes the code of the drawrect and drawrectline functions.

Scriptlayer. drawrect = function (value, start, end) {var Params = value. substring (start + 1, end ). split (","); var namestr = Params [0]; var color = Params [5]; color = color. replace ("0x", "#"); var script = lglobal. script; var layer = script. scriptarray. layerlist [namestr]; layer. graphics. drawrect (1, color, [parseint (Params [1]), parseint (Params [2]), parseint (Params [3]), parseint (Params [4])], true, color); script. analysis () ;}; scriptlayer. drawrectline = function (value, start, end) {var Params = value. substring (start + 1, end ). split (","); var namestr = Params [0]; var color = Params [5]; color = color. replace ("0x", "#"); var num = 1; if (Params. length> 6) num = parsefloat (Params [6]); var script = lglobal. script; var layer = script. scriptarray. layerlist [namestr]; layer. graphics. drawrect (Num, color, [parseint (Params [1]), parseint (Params [2]), parseint (Params [3]), parseint (Params [4]); script. analysis ();};
 

The principle is very simple. We use semicolons to separate the parameters and obtain the corresponding display Layer Based on the name of the display layer. Then, we use the drawing function of lgraphics to draw on the display layer.

The principle of drawing a rounded rectangle and a triangle is the same as that of the surface. They all use the corresponding drawing function of lgraphics. The specific implementation is as follows:

 

Scriptlayer. analysis = function (value) {var start = value. indexof ("("); var end = value. indexof (")"); Switch (value. substr (0, start) {Case "layer. add ": // Add the display layer scriptlayer. setlayer (value, start, end); break; Case "layer. remove ": // remove the display layer scriptlayer. removelayer (value, start, end); break; Case "layer. clear ": // clear the display layer scriptlayer. clearlayer (value, start, end); break; Case "layer. drawrect ": // draw a solid rectangle scriptlayer. drawrect (value, start, end); break; Case "layer. drawrectline ": // draw a scriptlayer with a hollow rectangle. drawrectline (value, start, end); break; Case "layer. drawroundrect ": // draw a solid rounded rectangle scriptlayer. drawroundrect (value, start, end); break; Case "layer. drawroundrectline ": // draw the scriptlayer of the hollow rounded corner rectangle. drawroundrectline (value, start, end); break; Case "layer. drawtriangle ": // draw a solid triangle scriptlayer. drawtriangle (value, start, end); break; Case "layer. drawtriangleline ": // draw the scriptlayer of the hollow triangle frame. drawtriangleline (value, start, end); break; default :}}; scriptlayer. drawroundrect = function (value, start, end) {var Params = value. substring (start + 1, end ). split (","); var namestr = Params [0]; var color = Params [6]; color = color. replace ("0x", "#"); var script = lglobal. script; var layer = script. scriptarray. layerlist [namestr]; layer. graphics. drawroundrect (1, color, [parseint (Params [1]), parseint (Params [2]), parseint (Params [3]), parseint (Params [4]), parseint (Params [5])], true, color); script. analysis () ;}; scriptlayer. drawroundrectline = function (value, start, end) {var Params = value. substring (start + 1, end ). split (","); var namestr = Params [0]; var color = Params [6]; color = color. replace ("0x", "#"); var num = 1; if (Params. length> 7) num = parsefloat (Params [7]); var script = lglobal. script; var layer = script. scriptarray. layerlist [namestr]; layer. graphics. drawroundrect (Num, color, [parseint (Params [1]), parseint (Params [2]), parseint (Params [3]), parseint (Params [4]), parseint (Params [5]); script. analysis () ;}; scriptlayer. drawtriangle = function (value, start, end) {var Params = value. substring (start + 1, end ). split (","); var namestr = Params [0]; var color = Params [7]; color = color. replace ("0x", "#"); var script = lglobal. script; var layer = script. scriptarray. layerlist [namestr]; layer. graphics. drawvertices (1, color, [[parseint (Params [1]), parseint (Params [2])], [parseint (Params [3]), parseint (Params [4])], [parseint (Params [5]), parseint (Params [6])], true, color); script. analysis () ;}; scriptlayer. drawtriangleline = function (value, start, end) {var Params = value. substring (start + 1, end ). split (","); var namestr = Params [0]; var color = Params [7]; color = color. replace ("0x", "#"); var num = 1; if (Params. length> 8) num = parsefloat (Params [8]); var script = lglobal. script; var layer = script. scriptarray. layerlist [namestr]; layer. graphics. drawvertices (Num, color, [[parseint (Params [1]), parseint (Params [2])], [parseint (Params [3]), parseint (Params [4])], [parseint (Params [5]), parseint (Params [6]); script. analysis ();};

In addition, the circle and polygon are all the same. I will add them directly in the future. I will not go into details here. If you are interested, you can implement them first.

Below we will test these scripts and modify the script file as follows:

 
Layer. add (-, layer01, 0, 0); layer. drawrect (layer01, 0xff0000); layer. drawrectline (layer01, 0,100,100, 60, 0xff0000, 5); layer. drawroundrect (layer01, 880000, x); layer. drawroundrectline (layer01, 150,100,100, 60, 10, 0x88133, 5); layer. drawtriangle (layer01, 60, 0xff0000); layer. drawtriangleline (layer01, 350,100,300,160,400,160, 0xff0000, 5 );
 

Test the function as follows:

Below is the test connection

Http://lufylegend.com/demo/test/lsharp/05/index03.html

 

3. Perform a gentle transformation on the display Layer

Here, the easing and image easing are basically the same. The difference is that the image easing is targeted at a single image, here, the easing is for the entire display layer.

 

 
Layer. Transition (layer03, {X: 50}, 1, strong. easeout );
 

The parameters are the same as those in the previous section.

Let's take a look at the specific implementation method.

 

 
Scriptlayer. transition = function (value, start, end) {var script = lglobal. script; var Larr = value. substring (start + 1, end ). split (","); var namestr = Larr [0]; // restore the JSON object var toobj = eval ('+ Larr [1] + ')'); // obtain the easing time var time = parsefloat (Larr [2]); var eases = Larr [3]. split (". "); var runnow = false; // whether to execute the next script if (Larr. length> 4) {runnow = (Larr [4] = "1 ");} toobj ["attributes"] = leasing [eases [0] [eases [1]; If (! Runnow) {toobj ["oncomplete"] = function () {script. analysis () ;};} ltweenlite. to (script. scriptarray. layerlist [namestr], time, toobj); // If runnow is 1, execute the next script if (runnow) script immediately. analysis ();};
 

 

Finally, let's test it. Modify the main. ls script file as follows:

 

/* Chapter 5 of game script design and development */development); IMG. add (layer01, backimg01, backdata, 0,0, 100,100, 1); layer. drawrectline (layer02, 0, 0, 100,100, 0xff0000); layer. clear (layer01); layer. drawroundrectline (layer01, 100,100, 880000, x); layer. drawtriangle (layer03, 0,0, 100,100, 50,150, 0xff0000); layer. drawrect (layer03, 100,0, 100,60, 0xff0000); layer. drawroundrect (layer03, 880000, x); layer. transition (layer03, {X: 50}, 1, strong. easeout); layer. drawtriangleline (layer03, 100,100, 50, 0, 0xff0000 );
 

RunProgramExpected results

The test connection is as follows:

Http://lufylegend.com/demo/test/lsharp/05/index.html

The above is the content of this chapter. In the next chapter, let's take a look at the buttons and pause and search scripts.

 

 

The source code of lufylegend. lsharp. js as of this chapter is as follows:

Http://lufylegend.com/demo/test/lsharp/05/lufylegend.lsharp.js

Game script design and development articles

Http://blog.csdn.net/lufy_legend/article/details/8888787

 

 

This chapter is here. Welcome to continue to follow my blog

 

Reprinted Please note:From lufy_legend's blog http://blog.csdn.net/lufy_legend