How to make a HTML5 RPG engine--first, the implementation of the Map class

One, saying the world is big

Shortly before seeing Lufy 's blog, a friend wanted an RPG engine, ready to do it for interest. Since I have been studying lufylegend for some time and have a certain dependence on it, I am prepared to base this engine on lufylegend. Temporarily named LUFYLEGENDRPG. After all, based on Lufylegend, if the name does not add lufylegend these words, a little bit of a word ... Recently released 0.1.0 version, but not ideal, even a habit is to encourage and praise my lufy old gentleman is out of the sincere express dissatisfaction. Want to know the 0.1.0 version of the Friends can see here (in fact, it is best not to look, because 1.0 in the use of a great adjustment):

http://blog.csdn.net/yorhomwang/article/details/8738733

So I had to re-develop it. First think of the map class, today to realize.

Our map should not be a large map, but a small map mosaic, so that we easily modify the map.

In this case we need a lot of pictures of the map blocks, usually we put them on one sheet. We use a picture of lufy old man's blog as an example to show you how this large map filled with small maps is:

What is the effect we have to accomplish? I'm going to put it here, and then I'll see how much it's done:

Second, how to achieve the preparatory work:

First you need to download the Lufylegend, the latest version is 1.7.5, with 1.7.3 all line.

: Http://lufylegend.com/lufylegend

There are APIs and forums on it that you can look at.

Also recommended a related book, Lufy wrote, called "HTML5 Canvas Game development combat." It's good to learn the basics and learn about development techniques. There are some very good JS technical guidance. Worth a look.

Book Description: HTTP://LUFYLEGEND.COM/BOOK/VIEW/1

Start writing

Since Lufylegend is perfect, it's easier to encapsulate. Look at the Ltilemap full constructor:

functionLtilemap (data,img,width,height) {vars = This;    Base (s,lsprite,[]); S.x= 0; S.y= 0; S.mapdata=data; S.imgdata=img; if(!width) {        varWbitmap =NewLbitmapdata (S.imgdata); S.partwidth=Wbitmap.image.width; }Else{s.partwidth=width; }    if(!height) {        varHbitmap =NewLbitmapdata (S.imgdata); S.partheight=Hbitmap.image.height; }Else{s.partheight=height; } s.onshow ();}

First, in order to reduce the size of the engine, we put the variable s and this and so on, the following is used in this place can be implemented with S.

※lufy the Great God recently prompted me: "Put the variable s and this together to prevent the direction of this change, not a single reduction of the size of the engine." Because the point of this does not always point to the current function. "Thanks again for Lufy's support here.

First we let it inherit the lsprite so that if we change the X and Y properties, we can transform the position directly. Add two additional attributes: MapData and Imgdata.

MapData is assigned by the data parameter, the assignment of data should be a two-dimensional array, in the following format:

[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],  [18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],  [ 18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],  [18,17,17,17,18,18,18,18,18,17,17,55,55,17,18] ,  [18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],  [ 18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],  [18,17,17,17,17,10,11,12,18,18,55,55,17,17,18 ],  [18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],  [ 18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],  [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]

It is loaded with the map block style, 18 corresponding tiles and 55 corresponding tiles are different. We'll talk about it later.

Imgdata as the name implies, it is a container for pictures.

There are also two parameters, which are used to represent the fast height and width of the map. For example, if each map block is 32*42, then set width to 32,height to 42. In this way, the pictures filled with the map blocks will be divided into small maps. For example, we put the above picture into each small map block is 32*32, that is, width set to 32,height is also set to 32, then the present form:

(I used the pictures in Lufy Blog directly) and then you can see what the 18 and 55 correspond to. 18 is a tree, and 55 corresponds to water, so we do it so that each map block is displayed differently.

Next is the OnShow method:

LTileMap.prototype.onshow =function(){    vars = This; varMapData =S.mapdata; varPartwidth =S.partwidth; varPartheight =S.partheight; vari,j; varIndex,indexy,indexx; varBitmapdata,bitmap;  for(i=0;i<mapdata.length;i++){         for(j=0;j<mapdata[0].length;j++) {Index=Mapdata[i][j]; Indexy= Math.floor (index/mapdata.length); Indexx = index-indexy*mapdata.length; BitmapData=NewLbitmapdata (s.imgdata,indexx*partwidth,indexy*partheight,partwidth,partheight); Bitmap=NewLbitmap (BitmapData); Bitmap.x= J*partwidth +s.x; BITMAP.Y= I*partheight +S.y;            S.addchild (bitmap); }    }}

Its function is very simple, is to draw a map. The logic is simple. The main is here:

 for  (I=0;i<mapdata.length;i++ for  (J=0;j<mapdata[0].length;j++ =        MAPDATA[I][J];        Indexy  = Math.floor (index/mapdata.length);        Indexx = Index-indexy*mapdata.length; BitmapData  = new  lbitmapdata (s.imgdata,indexx*partwidth,indexy*partheight,partwidth,partheight);        Bitmap  = new   Lbitmap (BitmapData);          bitmap.x  = j*partwidth + s.x;        Bitmap.y  = i*partheight + S.y;    S.addchild (bitmap); }}

This piece of code is to draw the core of the map, first it iterates over the map array, then draws one for each iteration, and then adds it to itself. Since it is inherited from Lsprite, when the map is added to itself and then added to the underlying or other sprite, the entire section is displayed.

Over, it's simple, isn't it? How do we use it after implementation? Look at the following code:

<! DOCTYPE html>Init (480,320, "Legend",, main); Lglobal.setdebug (true); varBacklayer,loadinglayer; varmap; varLoadData =[{name:"Map", Path: "./map.jpg"}    ]; varImglist = []; varMapData = [          [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],          [18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],          [18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],          [18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],          [18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],          [18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],          [18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],          [18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],          [18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],          [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]    ]; functionMain () {//Join the progress barLoadinglayer =NewLoadingSample1 ();         AddChild (Loadinglayer); //load pictures and show Progresslloadmanage.load (LoadData,function(Progress) {loadinglayer.setprogress (progress);     }, Gameinit); }    functionGameinit (Result) {removechild (Loadinglayer); Imglist=result; //initialization LayerBacklayer =NewLsprite ();        AddChild (Backlayer); //Join the MapAddmap (); }    functionAddmap () {map=NewLtilemap (mapdata,imglist["Map"],32,32);    Backlayer.addchild (map); }    </script> 
Run the code to get the following effect:
In order to prevent people think I PS pictures, then I do not imitate the test link to give, we see it.
Test Address: http://www.cnblogs.com/yorhom/articles/3063759.html
The code is very few and can be copied and pasted down to see. Ha!
How to make a HTML5 RPG engine--first, the implementation of the Map class