How to make a HTML5 RPG game engine--the first, the realization of the map class __html

One, say the world big event

Shortly before seeing Lufy 's blog, a friend wanted an RPG game engine and was ready to do it out of interest. Since I have studied 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 bit to say ah ... Recently released the 0.1.0 edition, but not ideal, even one used to encourage and appreciate my lufy old gentleman is out of genuine dissatisfaction. Want to know 0.1.0 version of Friends can see here (in fact, it is best not to look, because 1.0 in the usage of a great adjustment):

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

So I had to develop it again. First thought of the map class, today to realize.

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

In this case we need a lot of pictures of the map blocks, and usually we put them on one sheet. We will use the Lufy Old Man blog on a picture as an example, to give you a look at this small map of the big picture is what kind of:

What kind of effect are we going to finish? I'll put it here, and when I'm done, I'll see how much of it is implemented:

two, how to achieve
preparatory work:

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

Download Address: Http://lufylegend.com/lufylegend

The above has its API and forum, you can see.

Also recommend a related book, Lufy wrote, called "HTML5 Canvas game development". It's good to learn the basics and understand the development techniques. There are some very good JS technical guidance. It's worth a visit.

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

Start Writing

Because the Lufylegend do more perfect, then we are more simple packaging. Look at the Ltilemap complete builder:

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, to reduce the size of the engine, we put the variable s and this, and so on, the place where we use this can be achieved with S.

※lufy recently prompted me: "The variable S and this is to prevent the point of this change, not a single reduction of the engine size." Because this point does not necessarily always point to the current function. "Thanks again for Lufy's support.

First we let it inherit 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 through the data parameter, the data 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 style of the map block, 18 corresponding tiles and 55 corresponding tiles are not the same. We'll talk about it later.

Imgdata, as its name suggests, is a container for pictures.

There are also two parameters, which are used to indicate the height and width of the map's speed. For example, each map block is 32*42, then the width should be set to 32,height set to 42. In this way, the picture that fills the map block will be divided into small maps. For example, we divided the above picture into each small map block is 32*32, that is, the width set to 32,height also set to 32, then the present form of the following:

(I used the pictures directly from the Lufy blog) to see what the 18 and 55 correspond to. 18 is a tree, and 55 corresponds to water, so we do it so that each piece of map is displayed 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 very simple, is to draw a map. The logic is simple. This is mainly:

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 the map, and first it traverses the map array, and then draws a picture of each one, then adds it to itself. Since it is inherited from Lsprite, when the map is added to itself, and then add itself to the bottom or other sprite, the entire section is displayed.

Over, very simple is not it. How do we use it after implementation? Look at the following code:

<! DOCTYPE html> 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 out, we see it.

Test Address: http://www.cnblogs.com/yorhom/articles/3063759.html

The code is very small, you can copy and paste it down to see. Ha.



recently made a message board, you are welcome to express their views

Message Board Address: http://www.cnblogs.com/yorhom/archive/2013/04/20/3033235.html


----------------------------------------------------------------

you are welcome to reprint my article. 

Reprint Please specify: Transferred from Yorhom ' s Game Box

Welcome to keep an eye on my blog