Design and Development of game scripts-Chapter 7 quickly displays a battlefield Map

Today, the second part of script design is the development of war games. In war games, I especially love the glorious legend of heroes and the legend of Cao. My Three Kingdoms of multi-platform games were also developed based on the legend of the Three Kingdoms. This is no exception. It is developed based on the transplantation of Cao Zhuan and then extended to develop the game. Friends familiar with CaO Zhuan know that Cao Zhuan is divided into R plots and S battlefields, and r plots are based on stories. Good games cannot do without good plots, so I think the r plot is very important in the game. Of course, there are also many players who do not like too many plots. They like to skip the plots, enter the s battlefield, and start fighting directly. This is one of the diversity of such games.

Create start, battlefield Map Display

In the L # script, the scripts of the game start with sousou. Why is sousou? Because sousou is the Japanese pronunciation of "Cao" in Japanese, since it uses Cao as a template, I will continue to use sousou as a feature of this script. This development starts from the s battlefield. In the L # script, the initial version of the s battlefield begins and ends with the following scripts.

SouSouSMap.start();SouSouSMap.end();

First, create an lscriptslgsousou class to manage the war script.

/** Lscriptslgsousou. JS **/var lscriptslgsousou = function () {}; lscriptslgsousou. analysis = function (childtype, linevalue) {var start, end, Params; Switch (childtype) {Case "sousousmap": Start = linevalue. indexof ("("); End = linevalue. indexof (")"); Params = linevalue. substring (start + 1, end ). split (","); If (Params. length = 0 | parseint (Params [0]) <= 0) {// unfixed enemy level settings} else {// enemy level settings} var SMAP = new lsousousmap (); break; default: lglobal. script. analysis ();}};

In fact, the script sousousmap. Start (); can have parameters to set some necessary parameters, such as whether the above enemy level is fixed. I skipped it for the moment and will explain it in detail later.

The code above shows that when a sousousmap script is executed, an lsousousmap object will be instantiated. lsousousmap is a general class of the battlefield, including maps on the battlefield, military, weather, and so on.

As an engine, all JS files I developed will be eventually merged into one file. However, when developing such a large project, you must properly manage the code. Create the src/sousou/MAP/s folder and create the following three files in the S folder.

Lsousousmap. js
Lsousousmapbackground. js
Lsousousmapminiview. js

First, try to read an s battlefield map file, a complete s battlefield map file, including Map Images and map terrain attributes, create a new s01.smap file as an s battlefield map file.

{"data":[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"img-small":"01-small.png","img-big":"01-big.png"}

This file contains three attributes: terrain, map thumbnail, and map complete map. I first set the terrain of the battlefield to 0 and then expand it.

The battlefield map in the game is usually very large, and the network speed of most netizens is relatively slow. If the whole picture is displayed after it is read, it takes a relatively long time to wait. How can I quickly display a map to enter the battle? Since the map file contains thumbnails and complete graphs, we can read the thumbnail first. After the thumbnail is read, the thumbnail is displayed and directly enters the battlefield. At this time, the battlefield is blurred, after reading the complete image, replace the thumbnail with a beautiful battlefield.

In fact, it is very important for web games to enter the game for a long time. If the game is read for a long time, the players may lose a lot, therefore, we generally only read the images or data required by the current page, and the rest is read step by step during the game.

Let's take a look at the constructors of the lsousousmap. js class.

function LSouSouSMap(){var self = this;base(self,LSprite,[]);LSouSouObject.sMap = self;self._objectData = null;self._loadBar = null;self._mapData = null;self.mapW = 0;self.mapH = 0;self._mapLayer = new LSprite();self.addChild(self._mapLayer);LGlobal.script.scriptLayer.addChild(self);LSouSouSMapScript.analysis();}

Among them, lsousouobject is a common class of the game, including some common functions and attributes. After the instantiation is complete, perform the next step to parse lsousousmapscript. Analysis ();

Sousousmap. start (); performs initial battlefield instantiation, including initial map, initial army, initial weather, and initial battlefield events. Today we will talk about map display, the first step is to make the map initial. The initial map script is between the following scripts.

initialization.start;initialization.end;

Read the battlefield map as follows:

initialization.start;addMap(s01.smap);initialization.end;

The lsousousmapscript class is used to parse the initial battlefield scripts. The Code is as follows:

/** Lsousousmapscript. JS **/lsousousmapscript = function () {}; lsousousmapscript. analysis = function () {var script = lglobal. script; If (script. linelist. length = 0) return; var linevalue = lmath. trim (script. linelist. shift (); If (linevalue. length = 0) {lsousousmapscript. analysis (); return;} trace ("lsousousmapscript analysis linevalue =" + linevalue); Switch (linevalue) {Case "sousousmap. end () ": // return; Case" initialization. start ": lsousousmapscript. initialization (); break; default: lsousousmapscript. analysis () ;}}; lsousousmapscript. initialization = function () {var script = lglobal. script; var linevalue = lmath. trim (script. linelist. shift (); trace ("script. linelist = "+ script. linelist); If (linevalue. length = 0) {lsousousmapscript. initialization (); return;} If (linevalue = "initialization. end ") {lsousousmapscript. analysis (); return;} var Params, I; var start = linevalue. indexof ("("); var end = linevalue. indexof (")"); Switch (linevalue. substr (0, start) {Case "addmap": lsousousouobject. SMAP. addmap (linevalue. substring (start + 1, end ). split (","); break; default: lsousousmapscript. initialization ();}};

Of course, the content processed by lsousousmapscript is not limited to this, but will be extended later. We can see that when the addmap script is executed, the addmap function of the lsousousmap class will be called. As I mentioned earlier, to quickly display a map, first display the scale chart and then replace it. The specific implementation process is as follows.

/*** Read the map * Param [Map Name] **/lsousousmap. prototype. addmap = function (PARAM) {var self = This; var smapname = "images/SMAP/" + Param; // display the read progress self. _ loadbar = new loadingsample3 (); self. addchild (self. _ loadbar); // start to read the battlefield map file var urlloader = new lurlloader (); urlloader. parent = self; urlloader. addeventlistener (Levent. complete, self. loadmapfileover); urlloader. load (smapname + (lglobal. tracedebug? ("? "+ (New date ()). gettime (): ""), "text") ;}; lsousousmap. prototype. loadmapfileover = function (event) {var self = event.tar get. parent; // Save the battlefield Map File Content Self. _ objectdata = json.parse(event.tar get. data); // Save the terrain self. _ mapdata = self. _ objectdata. data; // depict the progress bar self. _ loadbar. setprogress (50); // obtain the battlefield Size Self. mapw = self. _ mapdata [0]. length * 48; self. maph = self. _ mapdata. length * 48; // start to read the battlefield thumbnail loader = new lloader (); loader. parent = Self; loader. addeventlistener (Levent. complete, self. loadmapsmallover); loader. load ("images/SMAP/IMGs/" + self. _ objectdata ["IMG-small"] + (lglobal. tracedebug? ("? "+ (New date ()). gettime (): ""), "bitmapdata") ;}; lsousousmap. prototype. loadmapsmallover = function (event) {var self = event.tar get. parent; // remove the progress bar self. removechild (self. _ loadbar); var bitmapdata = new lbitmapdata (event. currenttarget); // calculate the ratio of the thumbnail to the full graph var scale = self. mapw/bitmapdata. width; // display the thumbnail as the battlefield background map self. _ map = new lsousousmapbackground (); self. _ map. setsmall (bitmapdata, scale); self. _ maplayer. addchild (SE Lf. _ map); // display the battlefield thumbnail self. _ miniwindow = new lsousousmapminiview (bitmapdata); self. _ maplayer. addchild (self. _ miniwindow); // start to read the complete battlefield Map Loader = new lloader (); loader. parent = self; loader. addeventlistener (Levent. complete, self. loadmapbigover); loader. load ("images/SMAP/IMGs/" + self. _ objectdata ["IMG-big"] + (lglobal. tracedebug? ("? "+ (New date ()). gettime (): ""), "bitmapdata") ;}; lsousousmap. prototype. loadmapbigover = function (event) {var self = event.tar get. parent; self. removechild (self. _ loadbar); var bitmapdata = new lbitmapdata (event. currenttarget); // The complete battlefield map is read, replacing the battlefield map self. _ map. setbig (bitmapdata); trace ("loadmapbigover ");};

The battlefield map class lsousousmapbackground is as follows:

function LSouSouSMapBackground(){var self = this;base(self,LSprite,[]);}LSouSouSMapBackground.prototype.setSmall = function(bitmapData,scale){var self = this;self.map = new LBitmap(bitmapData);self.map.scaleX = self.map.scaleY = scale;self.addChild(self.map);};LSouSouSMapBackground.prototype.setBig = function(bitmapData){var self = this;self.map.bitmapData = bitmapData;self.map.scaleX = self.map.scaleY = 1;};

The battlefield preview class lsousousmapminiview is as follows:

function LSouSouSMapMiniView(bitmapData){var self = this;base(self,LSprite,[]);self._miniMap = new LBitmap(bitmapData);self._miniMap.x = self._miniMap.y = 15;self.addChild(self._miniMap);        self._miniBar = LSouSouObject.getBar(self._miniMap.getWidth()+30,self._miniMap.getHeight()+30);self.addChild(self._miniBar);}

The lsousouobject. getbar function is used to obtain a rectangular border. First, prepare the following border

The lsousouobject. getbar function combines the above image and returns the rectangular border of the desired size. The Code is as follows.

LSouSouObject.getBar=function(w,h){var barWidth = 500,barHeight = 380;var img,bar = new LSprite();if(w > 530){for(var i=15;i<15+(w-530)*0.5+1;i+=100){img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-up'],400,0,100,15));img.x = i - 100;bar.addChild(img);img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-down'],400,0,100,15));img.x = i - 100;img.y = h - 15;bar.addChild(img);}}else{img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-up'],(530 - w)*0.5,0,w-30,15));img.x = 15;bar.addChild(img);img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-down'],(530 - w)*0.5,0,w-30,15));img.y = h - 15;img.x = 15;bar.addChild(img);}if(h > 410){for(var i=15;i<(h-410)*0.5 + 1;i+=50){img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-left'],0,0,15,50));img.y = i;bar.addChild(img);img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-right'],0,0,15,50));img.y = i;img.x = w - 15;bar.addChild(img);}img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-left'],0,0,15,380));img.y = (h-380)*0.5;bar.addChild(img);img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-right'],0,0,15,380));img.y = (h-380)*0.5;img.x = w - 15;bar.addChild(img);for(var i=h-15;i>(h+410)*0.5;i-=50){img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-left'],0,330,15,50));img.y = i - 50;trace(img.y);bar.addChild(img);img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-right'],0,330,15,50));img.y = i - 50;img.x = w - 15;bar.addChild(img);}}else{img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-left'],0,(410 - h)*0.5,15,h-30));img.y = 15;bar.addChild(img);img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-right'],0,(410 - h)*0.5,15,h-30));img.x = w - 15;img.y = 15;bar.addChild(img);}img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-left-up'],0,0,15,15));bar.addChild(img);img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-right-up'],0,0,15,15));img.x = w - 15;bar.addChild(img);img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-left-down'],0,0,15,15));img.y = h - 15;bar.addChild(img);img = new LBitmap(new LBitmapData(LGlobal.imglist['bar-right-down'],0,0,15,15));img.x = w - 15;img.y = h - 15;bar.addChild(img);return bar;};

What is the running effect?

After the scale chart is read, the battlefield is displayed as follows:

After the complete graph is read, the transition rate chart shows the battlefield. The effect is as follows:

The test connection is as follows:

Http://lufylegend.com/demo/test/lsharp/08/game/index.html

As mentioned above, this chapter introduces this much more. The next chapter adds troops to the battlefield.

The source code as of this chapter is as follows, excluding the lufylegend. js engine source code. Please download it from the official website.

Http://lufylegend.com/demo/test/lsharp/08/08.rar

※Source code running instructions: server support is required. For details, see the preface and chapter 1 of this series.

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