Design and Development of game scripts-Chapter 4 reading and displaying images

This chapter describes how to use a script to read an image, display it to the image, and perform some operations such as easing and changing the image.

This chapter provides several scripts for implementation.

/* Game script design and development chapter 4 * // read image data load.img(backdata,lufy_legend.jpg); display image IMG. add (-, backimg01, backdata, 100,100, 1); the image is slowed down. transition (backimg01, {X: 350}, 1, strong. easeout );

1. How to read an image

View the following script

/* Chapter 4 of game script design and development */load.img(backdata,lufy_legend.jpg );

Previously, I used the load class in the script to read the script file. In order to use the load class as a dedicated read class, I still use it to read an image, first in scriptload. load. IMG analyzed:

ScriptLoad.analysis = function (value){var start = value.indexOf("(");var end = value.indexOf(")");ScriptLoad.data = value.substring(start+1,end).split(",");switch(LMath.trim(value.substr(0,start))){case "Load.img":ScriptLoad.loadImg();break;case "Load.script":ScriptLoad.loadScript();break;default:LGlobal.script.analysis();}};

Next, let's take a look at the scriptload. loadimg () function. In lufylegend. JS, read the image and use the lloader class.

ScriptLoad.loadImg = function (){ScriptLoad.loader = new LLoader();ScriptLoad.loader.addEventListener(LEvent.COMPLETE,ScriptLoad.loadImgOver);ScriptLoad.loader.load(ScriptLoad.data[1],"bitmapData");};

Because in scriptload. in the analysis function, I have saved all the parameters in scriptload. in data, one of the two parameters is to save the image name after reading, and the other is the image path, so the above scriptload. data [1] is the image path. After reading the image, you can call scriptload. the loadimgover function saves the image and looks at the following code.

ScriptLoad.loadImgOver = function (event){var script = LGlobal.script;script.scriptArray.bitmapdataList[ScriptLoad.data[0]] = new LBitmapData(ScriptLoad.loader.content);ScriptLoad.loader.imgLoader = null;script.analysis();};

Save the read image as an lbitmapdata object and save it in the scriptarray. bitmapdatalist array. Of course, you need to define this array in the lscriptarray repository at the beginning, as shown below.

/** Lscriptarray. JS **/function lscriptarray () {var self = This; // used to save the ltextfield object self. textlist = new array (); // used to save the lsprite object self. layerlist = new array (); // used to save the variable self. varlist = new array (); // used to save the function self. funlist = new array (); // used to save the lbitmapdata object self. bitmapdatalist = new array (); // used to save the lbitmap object self. imglist = new array ();}

After reading and saving the image, you can use the following script to display an image.

/* Chapter 4 of game script design and development */IMG. Add (-, backimg01, backdata, 100,100, 1 );

The parameters are: Display layer, name of the added lbitmap object, name of the lbitmapdata object used, coordinate X, coordinate Y, length, width, and transparency.

The switch part of the parsing function must be modified as follows:

switch(sarr[0]){case "Load":ScriptLoad.analysis(lineValue);break;case "Text":ScriptText.analysis(lineValue);break;case "Var":ScriptVarlable.analysis(lineValue);break;case "Call":ScriptFunction.analysis(lineValue);break;case "Img":ScriptImg.analysis(lineValue);break;default:if(lineValue.indexOf("if") >= 0){ScriptIF.getIF(lineValue);}else if(lineValue.indexOf("function") >= 0){ScriptFunction.setFunction(lineValue);}else{self.analysis();}}

We can see that when an IMG script is encountered, the scriptimg class parsing function will be called. The function code is as follows:

/** ScriptImg.js**/var ScriptImg = function (){};ScriptImg.analysis = function (value,start,end){var start = value.indexOf("(");var end = value.indexOf(")");switch(value.substr(0,start)){case "Img.add":ScriptImg.addImg(value,start,end);break;}};

Next let's take a look at how to add an image in the scriptimg. addimg function. The Code is as follows:

Scriptimg. addimg = function (value, start, end) {var script = lglobal. script; var layer; // decomposition parameter var Larr = value. substring (start + 1, end ). split (","); var layerstr = Larr [0]; var namestr = Larr [1]; var datastr = Larr [2]; var bitdata; // obtain the lbitmapdata object bitdata = script. scriptarray. bitmapdatalist [datastr]; var xint = parsefloat (Larr [3]); var yint = parsefloat (Larr [4]); var wnum; var hnum; // obtain the width (not required) if (Larr. length> 5) {wnum = parsefloat (Larr [5]);} // get high (not required) if (Larr. length> 6) {hnum = parsefloat (Larr [6]);} var alphanum = 1; // get transparency. The default value is 1 (optional) if (Larr. length> 7) {alphanum = parsefloat (Larr [7]);} // obtain lsprite display layer = script. scriptarray. layerlist [layerstr]; var bitmap = new lbitmap (bitdata); // If the width is set, use scalex to calculate the lbitmap WIDTH If (wnum) bitmap. scalex = wnum/bitdata. width; // if the height is set, use scalex to calculate the high if (hnum) bitmap of lbitmap. scaley = hnum/bitdata. height; // sets the transparency of Bitmap. alpha = alphanum; // sets the coordinate bitmap. X = xint; bitmap. y = yint; bitmap. name = namestr; // Save the lbitmap object to the imglist array script. scriptarray. imglist [namestr] = bitmap; layer. addchild (Bitmap); script. analysis ();};

First, use commas to break down some strings in the brackets, obtain the corresponding parameters, create an lbitmap object, and save it to the imglist array. The detailed practices are all added with comments on the above Code.

Next, modify main. ls as follows:

// Read image data load.img(backdata,lufy_legend.jpg); // display image IMG. Add (-, backimg01, backdata, 100,100, 1 );

Run the program to get the following results:

2. Perform a gentle change on the Image

In the game, it is obviously not enough to display images in light. We need to perform various operations on images, such as coordinate transformation, rotation, gradual display, and gradual return. The following is a script to implement these operations, the script format is as follows.

Img.transition(backimg01,{x:350},1,Strong.easeOut,type);

The parameters are: the name of the lbitmap object to be operated, the Operation content, the time required for the transformation, and the easing type (For details, refer to ltweenlite ), whether to execute the next script immediately (if not set, the script will be executed only after it is paused)

Next we will implement this script. First, we will extend the switch part of the parsing function of IMG.

ScriptImg.analysis = function (value,start,end){var start = value.indexOf("(");var end = value.indexOf(")");switch(value.substr(0,start)){case "Img.add":ScriptImg.addImg(value,start,end);break;case "Img.transition":ScriptImg.transition(value,start,end);break;}};

The following describes the scriptimg. transition function.

Scriptimg. 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. imglist [namestr], time, toobj); // If runnow is 1, execute the next script if (runnow) script immediately. analysis ();};

Well, the slow-moving operation is very simple because ltweenlite is used in the lufylegend. js engine. Note that only one type of operation can be used here. If multiple types of operations are used, they should be implemented by using multi-row scripts. modify main. ls

Load.img(backdata,lufy_legend.jpg);Img.add(-,backimg01,backdata,0,0,100,100,1);Img.transition(backimg01,{x:350},1,Strong.easeOut,1);Img.transition(backimg01,{y:200},1,Strong.easeOut,1);Img.add(-,backimg02,backdata,50,50,50,50,0.5);Img.transition(backimg02,{y:200},1,Strong.easeOut,1);Img.transition(backimg02,{scaleX:1},1,Strong.easeOut);Img.add(-,backimg03,backdata,200,50,200,200,0.5);

Run the program and you can see the following effects:

The test connection is as follows:

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

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

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

Game script design and development articles

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

This chapter introduces so much. The next chapter describes how to use scripts to perform hierarchical operations and draw various shapes such as Rectangles and circles on the interface using scripts.

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