How to create an HTML5 RPG Game Engine-Article 1: Map implementation

I. Let's talk about the world's major events.

Not long ago, I sawLufyOn the blog, a friend wants an RPG Game Engine and is ready to work on it out of interest. Since I have been studying lufylegend for some time and have a certain degree of dependence on it, I am ready to base this engine on lufylegend. Temporarily named lufylegendrpg. After all, it is based on lufylegend. If the name does not contain the words lufylegend, it cannot be said... I recently released version 0.1.0, but it is not ideal. I am always encouraged and appreciated by Mr. lufy because of my sincere dissatisfaction. If you want to know about version 0.1.0, you can check it out here (in fact, it is best not to watch it, Because 1.0 has made great adjustments in usage ):

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

So I had to develop it again. I first thought of the map class. Today I will implement it.

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

In this case, we need a lot of map blocks. We usually put them on one. We will use an image on lufy's blog as an example to show you what a big image is like with a small map:

What is the effect we want to accomplish? I put it here to check the implementation degree:

2. How to Implement preparation:

First, you need to download lufylegend. The latest version is 1.7.5. You can use 1.7.3.

: Http://lufylegend.com/lufylegend

There are APIs and forums on them. You can check them out.

We also recommend a related book, written by lufy, called HTML5 canvas game development practices. It is good to learn the basics and understand development skills. There are also some good JS technical guidance. It is worth looking.

Books: http://lufylegend.com/book/view/1

Start writing

Because lufylegend is perfect, it is easier to encapsulate it. Let's take a look at the complete ltilemap constructor:

function LTileMap(data,img,width,height){var s = this;base(s,LSprite,[]);s.x = 0;s.y = 0;s.mapData = data;s.imgData = img;if(!width){var wbitmap = new LBitmapData(s.imgData);s.partWidth = wbitmap.image.width;}else{s.partWidth = width;}if(!height){var hbitmap = new LBitmapData(s.imgData);s.partHeight = hbitmap.image.height;}else{s.partHeight = height;}s.onshow();}

First of all, to reduce the engine size, we need to wait for the variables S and this. We can use s to implement this in the following places.

※Lufy reminds me recently that "the variables S and this are used to prevent the point of this from changing, rather than reducing the engine size. Because this does not always point to the current function ." Thanks again for the support of lufy.

First, let it inherit lsprite, so that if we change the X and Y attributes, we can directly change the position. Append two attributes: mapdata and imgdata.

Mapdata is assigned a value through the data parameter. The data value assignment 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. The graph block corresponding to 18 is different from the graph block corresponding to 55. We will discuss it in detail later.

Imgdata, as its name implies, is an image container.

Two other parameters are used to indicate the height and width of a map. For example, if each map block is 32*42, Set width to 32 and height to 42. In this way, images filled with map blocks are divided into small maps. For example, if we divide the image into 32*32 blocks for each small map, that is, if the width is set to 32 and the height is set to 32, the following format is displayed:

(I used the pictures in the lufy blog directly.) Now you can see what is corresponding to 18 and 55. 18 is a tree, and 55 corresponds to water, so we can make each map block display differently.

Next is the onshow method:

LTileMap.prototype.onshow = function(){var s = this;var mapdata = s.mapData;var partWidth = s.partWidth;var partHeight = s.partHeight;var i,j;var index,indexY,indexX;var bitmapdata,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 = 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);        }}}

Its function is simple, that is, to draw a map. The logic is simple. Mainly here:

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 = 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 the core of drawing a map. First, it traverses the map array, and then draws a map every time it traverses one, and then adds it to itself. Because the map itself is inherited from lsprite, the whole section is displayed when the map is added to itself and then added to the bottom layer or other Sprite.

Over, is it easy? How can we use it after implementation? See the following code:

<! Doctype HTML> <HTML lang = "en"> 
Run the code to get the following results:

In order to prevent people from thinking that my PS images are displayed, I will not give the test link in imitation. Let's take a look at it for yourself.
Test address: http://www.cnblogs.com/yorhom/articles/3063759.html
Few codes. You can copy and paste them on your own. Ha!

I have made a message board recently. You are welcome to give your comments.
Message Board address: http://www.cnblogs.com/yorhom/archive/2013/04/20/3033235.html

----------------------------------------------------------------
You are welcome to repost my article.
Reprinted Please note: transferred from yorhom's game box
Continue to follow my blog