Design and Development of game scripts-Chapter 2 text display [Hello world]

The previous chapter describes how to read and parse a script,

In fact, for a game, text display and operations are one of the most basic elements. In this chapter, let's start with text display.

To display a text, you can draw the text on the game interface. to display a text in the lufylegend. js engine, you only need to add the ltextfield object to the lsprite object.

First, to facilitate operations on all objects in the game, we create a new "repository" lscriptarray to save various objects in the game, as shown below.

/** LScriptArray.js**/function LScriptArray(){var self = this;self.textList = new Array();self.layerList = new Array();}

Here, textlist is used to save the ltextfield Text object, and layerlist is used to save the lsprite layer object. Of course, there must be more than a few types of objects in the game, such as slices and buttons, these objects will be added in subsequent chapters.

Modify the lscript constructor as follows:

function LScript(scriptLayer,value){var self = this;LGlobal.script = self;self.scriptLayer = scriptLayer;self.scriptArray = new LScriptArray();self.scriptArray.layerList["-"] = scriptLayer;self.dataList = new Array();var arr=[value];self.dataList.unshift(arr);self.toList(value);}

In this way, we can use lglobal. Script. scriptarray to get all the objects in the game.

The script syntax related to text operations in the L # script is as follows:

1. Add a line of text

Text.label(-,txt01,Hello World,0,0,30,#000000);

Several parameters are as follows:

Display layer, text name, text content, text coordinate X, text coordinate Y, text size, text color

2. Change the content of a line of text

Text.labelChange(txt03,Hello Change,40,#FF0000);

Several parameters are as follows:

Text name, text content, text size, text color

3. Remove a line of text

Text.remove(txt02);

The parameters are as follows:

Text name

Next, modify the switch part of the resolution function as follows:

switch(sarr[0]){case "Load":ScriptLoad.analysis(lineValue);break;case "Text":ScriptText.analysis(lineValue);break;default:self.analysis();}

In this case, the analysis function of the scripttext static class will be called in case of scripts related to text operations.

Next, let's take a look at the scripttext class and analysis functions.

/** ScriptText.js**/var ScriptText = function (){};ScriptText.analysis = function (value){var start = value.indexOf("(");var end = value.indexOf(")");switch(LMath.trim(value.substr(0,start))){case "Text.label":ScriptText.label(value,start,end);break;case "Text.labelChange":ScriptText.labelChange(value,start,end);break;                case "Text.remove":                        ScriptText.removeText(value,start,end);break;default:LGlobal.script.analysis();}};

In this function, when we encounter three defined scripts, we will call three different functions and parse the parts in the brackets as parameters, let's implement these functions one by one.
The first is scripttext. label, as shown below

ScriptText.label = function (value,start,end){var script = LGlobal.script;var lArr = value.substring(start+1,end).split(",");var layer,label,i;var layerStr = lArr[0];var nameStr = lArr[1];var textStr = lArr[2];layer = script.scriptArray.layerList[layerStr];var textArr = textStr.split("\\n");var textList = new Array();for(i=0;i<textArr.length;i++){label = new LTextField();label.size = lArr[5]-4;label.color = lArr[6];label.text = textArr[i];label.x = parseInt(lArr[3]);label.y = parseInt(lArr[4]) + label.getHeight()* i ;label.name = nameStr;layer.addChild(label);textList.push(label);}script.scriptArray.textList[nameStr] = textList;script.analysis();};

To explain the above Code:

var lArr = value.substring(start+1,end).split(",");

Splits parameters into Larr arrays.

var layerStr = lArr[0];var nameStr = lArr[1];var textStr = lArr[2];

In this way, the corresponding parameters are obtained from the Larr array.

layer = script.scriptArray.layerList[layerStr];

To obtain the display layer, only the "-" parameter is supported here, that is, the bottom layer. The display layer script is described in detail later, and other parameters are supported.

var textArr = textStr.split("\\n");var textList = new Array();for(i=0;i<textArr.length;i++){label = new LTextField();label.size = lArr[5]-4;label.color = lArr[6];label.text = textArr[i];label.x = parseInt(lArr[3]);label.y = parseInt(lArr[4]) + label.getHeight()* i ;label.name = nameStr;layer.addChild(label);textList.push(label);}

Here we take into account the line feed problem. When setting the text content, we can use "\ n" to line feed. Here, the split strings are displayed with ltextfield objects, and these ltextfield objects are pushed into the array.

script.scriptArray.textList[nameStr] = textList;script.analysis();

Save the array containing the ltextfield object to the script. scriptarray. textlist array, and then call script. Analysis () to continue parsing.

Next is scripttext. labelchange, as shown below

ScriptText.labelChange = function (value,start,end){var script = LGlobal.script,i;var lArr = value.substring(start+1,end).split(",");var nameStr = lArr[0];var textStr = lArr[1];var textList = script.scriptArray.textList[nameStr];var x = textList[0].x;var y = textList[0].y;layer = textList[0].parent;for(i=0;i<textList.length;i++){label = textList[i];label.parent.removeChild(label);}textList = new Array();textArr = textStr.split("\\n");for(i=0;i<textArr.length;i++){label = new LTextField();label.size = lArr[2];label.color = lArr[3];label.text = textArr[i];label.x = x;label.y = y + label.getHeight()* i ;label.name = nameStr;layer.addChild(label);textList.push(label);}script.scriptArray.textList[nameStr] = textList;script.analysis();};

Explain the code

var lArr = value.substring(start+1,end).split(",");var nameStr = lArr[0];var textStr = lArr[1];

This is the same as the previous one.

var textList = script.scriptArray.textList[nameStr];

Use the input text name to obtain the ltextfield object group stored in the script. scriptarray. textlist array.

var x = textList[0].x;var y = textList[0].y;

Obtain the coordinates of the ltextfield object.

layer = textList[0].parent;

Obtain the display layer of the ltextfield object.

for(i=0;i<textList.length;i++){label = textList[i];label.parent.removeChild(label);}

To change the text content, I first Delete the added ltextfield object.

textList = new Array();textArr = textStr.split("\\n");for(i=0;i<textArr.length;i++){label = new LTextField();label.size = lArr[2];label.color = lArr[3];label.text = textArr[i];label.x = x;label.y = y + label.getHeight()* i ;label.name = nameStr;layer.addChild(label);textList.push(label);}script.scriptArray.textList[nameStr] = textList;script.analysis();

The added ltextfield object has been deleted, and the rest is to re-Add the ltextfield object according to the new text content, so the above Code is the same as adding text.

Finally, let's look at scripttext. removetext. The Code is as follows:

ScriptText.removeText = function (value,start,end){var lArr = value.substring(start+1,end).split(",");var nameStr = lArr[0];var script = LGlobal.script;var textList = script.scriptArray.textList[nameStr];if(textList == null){script.analysis();return;}for(i=0;i<textList.length;i++){label = textList[i];label.parent.removeChild(label);}script.scriptArray.textList[nameStr] = null;script.analysis();};

It is relatively simple to delete objects, which is the same as the removal part in the previous scripttext. labelchange function.

Next, let's take a look at the effect,

Modify the code of the Main. ls script file as follows:

Text.label(-,txt01,Hello World,0,0,30,#000000);

Run the Code as follows:

If multiple texts are displayed, modify the code of the Main. ls script file as follows:

Text.label(-,txt01,Hello World,0,0,30,#000000);Text.label(-,txt02,Hello World,0,50,30,#000000);Text.label(-,txt03,Hello World,0,100,30,#000000);

Run the Code as follows:

Next let's take a look at how to modify the text content and modify the code of the Main. ls script file, as follows:

Text.label(-,txt01,Hello World,0,0,30,#000000);Text.label(-,txt02,Hello World,0,50,30,#000000);Text.label(-,txt03,Hello World,0,100,30,#000000);Text.labelChange(txt03,Hello \nChange,40,#FF0000);

Run the Code as follows:

Finally, let's take a look at the code for changing the delete text object and modifying the main. ls script file, as shown below:

Text.label(-,txt01,Hello World,0,0,30,#000000);Text.label(-,txt02,Hello World,0,50,30,#000000);Text.label(-,txt03,Hello World,0,100,30,#000000);Text.labelChange(txt03,Hello \nChange,40,#FF0000);Text.remove(txt02);

Run the Code as follows:

The test connection is as follows:

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

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

Http://lufylegend.com/demo/test/lsharp/02/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
Final ad time, prize collection series-HTML5 game programming tour]Http://blog.csdn.net/blogdevteam/article/details/8899926
Welcome to join us and have the opportunity to get my new book "HTML5 canvas game development practices"