HTML5 game development-Zero-basic development RPG games-Open Source lecture (1)

In the development of lightning in the previous article, some friends did not quite understand it. This article will explain how to develop an RPG Game from a zero-base point of view.

In the gaming world, we can see various maps, various game characters, and figures walking and talking on maps. maps and figures are actually processed and displayed, by displaying different images on the screen, we can see different game interfaces. To make these images display on the screen at the same time, we need to process the layers so that they can display them hierarchically, as we can imagine, if a game character is displayed on the lower layer of the map, it will obviously be blocked by the map.
In an RPG Game, I simply divide it into map layer, character layer, effect layer (some spell effects, etc.), conversation layer, control layer (Button menu, etc ).

For example

We only need to draw pictures on the screen in sequence, and the game figures will stand on the map. If there is a conversation, the conversation will appear on the figures and maps, the buttons and other controls appear on the outermost layer of the game.

Next, we will develop a simple RPG Game step by step.

Preparations

1. Download the Repository

For this game development, open source libraries are required:Lufylegend, which is: Http://lufylegend.com/lufylegend

For the development process of the library, see here

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

Ii. Database Configuration

Create a folder RPG (you can also name it)

Decompress the downloaded library, decompress it, and put the legend folder in the same directory as the RPG folder.
Then, create an index.html file and a JS folder in the rpgfolder, and create a main. js file in the JS folder.

Add the following code to index.html.

<! Doctype HTML> 

Of course, you can also place the legend folder in other places, but you need to modify the legend_path value in the legend. js file under the legend folder to configure the library path


Game map implementation
Next, we will first draw the bottom layer of the map,
A map is composed of pictures. I have written a special article on how to display an image. The Code is as follows:

var loader;  function main(){      loader = new LLoader();      loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);      loader.load("map.jpg","bitmapData");  }  function loadBitmapdata(event){      var bitmapdata = new LBitmapData(loader.content);      var bitmap = new LBitmap(bitmapdata);      addChild(bitmap);  }  
For more details, refer to the following post.
Write HTML5 using the syntax similar to ActionScript-the first article shows an image
Http://blog.csdn.net/lufy_legend/article/details/6753032
A map in the game can be a relatively large image, that is, the whole picture is the map of the game. When a person or map moves, the range of the area displayed by the image is changed, in this way, you must prepare a map for each scenario.
In addition, maps can also be made up of many small map blocks. For example, we are familiar with some classic small RPG games, such as "Heaven and Earth" and "Dragon fights, we need to prepare one or more map blocks and combine these map blocks into maps for display, such



When the map is displayed, we first cut the image and then display it on the map layer based on the preset position, so that we can see a complete map.


Next, open main. js
Add

init(50,"mylegend",480,320,main);
In lufylegend. in the JS engine, use the init function to initialize the canvas. The code above indicates that a game interface with a speed of 50, named mylegend, and a size of 480*320 is initialized, after Initialization is complete, call main (). The speed value indicates the number of milliseconds that the game loops once. The smaller the value, the faster the game runs.
Because we need to call the main method, we need to write a main method, and do some simple preparation work in the main method.
Although only one

loader.load("map.jpg","bitmapData");  
However, many images are often used in the game. You can use either of them to load them all at once, and then start displaying the game.
In order to load the image at one time, I put the desired image in an array and set an index. Each time an image is loaded, I add 1 to the index, when the index is smaller than the length of the array, it continues to load until all the images in the array are loaded, and then proceed to the next step.
See the following code for specific implementation:

// Image path array var imgdata = new array (); // The read Image array var imglist ={}; function main () {// prepare to read the image imgdata. push ({name: "map", path :". /image/map.jpg "}); imgdata. push ({name: "mingren", path :". /image/mingren.png "}); imgdata. push ({name: "E1", path :". /image/e1.png "}); imgdata. push ({name: "E2", path :". /image/e2.png "}); // instantiate the progress bar layer loadinglayer = new lsprite (); loadinglayer. graphics. drawrect (1, "black", [50,200,200, 20], true, "# ffffff"); addchild (loadinglayer); // start reading the image LoadImage ();} function LoadImage () {// read all the images and start initializing the game if (loadindex> = imgdata. length) {removechild (loadinglayer); gameinit (); Return ;}// start to read the image loader = new lloader (); loader. addeventlistener (Levent. complete, loadcomplete); loader. load (imgdata [loadindex]. path, "bitmapdata");} function loadcomplete (event) {// loadinglayer is displayed on the progress bar. graphics. clear (); loadinglayer. graphics. drawrect (1, "black", [50,200,200, 20], true, "# ffffff"); loadinglayer. graphics. drawrect (1, "black", [50,203,200 * (loadindex/imgdata. length), 14], true, "#000000"); // stores the image data imglist [imgdata [loadindex]. name] = loader. content; // read the next image loadindex ++; LoadImage ();}
The above code is not hard to understand. When the image is not read, The LoadImage and loadcomplete methods will be cyclically iterated. After reading the image, remove the progress bar and use legendloadover to tell the game that the read is complete, then, call the gameinit method to initialize the game.
Check the gameinit method.

Function gameinit (event) {// game layer display initialization layerinit (); // Add map addmap (); // Add character addchara ();}
In the gameinit method, first initialize the game layer, then add the game map, and then add the characters
Game layer display initialization. As we said at the beginning, we initialize the map layer, character layer, effect layer, conversation layer, and control layer at a time.
// Game layer display initialization function layerinit () {// Add backlayer = new lsprite (); addchild (backlayer); // map layer add maplayer = new lsprite (); backlayer. addchild (maplayer); // Add charalayer = new lsprite (); backlayer. addchild (charalayer); // Add effectlayer = new lsprite (); backlayer. addchild (effectlayer); // Add talklayer = new lsprite (); backlayer. addchild (talklayer); // Add ctrllayer = new lsprite (); backlayer to the control layer. addchild (ctrllayer );}
With the division of game layers, when we add game objects, we add maps to the map layer, and add characters to the character layer, which will be displayed on the game interface in turn.
Add a map
First, we need to prepare an array for displaying the map.

// Map image array var map = [[18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 18], [18, 18, 18, 17, 17,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], [, 23, 24, 18, 17, 18], [, 18], [, 17,17, 17,10, 11,12, 18,18, 55,55, 17,17, 18], [, 18, 17,17, 16,16, 11,55, 55,17, 17,17, 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];
The numbers correspond to the following positions respectively.



Then read the following code:

// Add map function addmap () {var I, j, index, indexx, indexy; var bitmapdata, bitmap; // map image data bitmapdata = new lbitmapdata (imglist ["map"]); // splits the map image to obtain the coordinate array imagearray = lglobal of each small image after splitting. dividecoordinate (bitmapdata. image. width, bitmapdata. image. height, 10, 10); // on the map layer, draw a small 15*10 image for (I = 0; I <10; I ++) {for (j = 0; j <15; J ++) {// obtain the image coordinate Index = map [I] [J] from the map array; // indexy = math. floor (index/10); // indexx = index-indexy * 10; // obtain bitmapdata = new lbitmapdata (imglist ["map"], indexx * 32, indexy * 32, 32); bitmap = new lbitmap (bitmapdata); // sets the bitmap position for the small image. X = J * 32; bitmap. y = I * 32; // display the small image to the map layer maplayer. addchild (Bitmap );}}}
In this way, the preset images are displayed on the game interface to form a map.
Add the addchara method first

// Add the character function addchara (){}
Then run the game
The following figure is displayed.

Game character implementation
To better control game characters, we create a game character. js
The Code is as follows:

Function character (data, row, Col, speed) {base (this, lsprite, []); var self = This; // you can specify the speed of a character. speed = NULL? 3: speed; self. speedindex = 0; // set the character size data. setproperties (0, 0, Data. image. width/COL, Data. image. height/row); // get the character image split array var list = lglobal. dividecoordinate (data. image. width, Data. image. height, row, col); // sets the animation self. anime = new lanimation (this, Data, list) ;}; character. prototype. onframe = function () {var self = this; if (self. speedindex ++ <self. speed) return; self. speedindex = 0; self. anime. onframe ();};
In legendforhtml5programming, there is a lanimation class used to realize sequential playback of image arrays to form an animation.
Using the lanimation class requires three parameters: one is the layer for displaying the animation, the other is the image, and the other is the coordinate array of the image.
Then, you can call the onframe method of the lanimation class to play the animation.
Introduce the character class in index.html and modify the addchara method,

// Add the character function addchara () {bitmapdata = new lbitmapdata (imglist ["mingren"]); player = new character (bitmapdata, 4, 4); player. X = 32*5; player. y = 32*6; charalayer. addchild (player );}
Add a loop event at the end of gameinit
// Add a drive event and start the game loop backlayer. addeventlistener (Levent. enter_frame, onframe );
Finally, add the onframe Method
/*** Loop **/function onframe () {player. onframe ();}
Run the code. Have you seen it?
An animated Naruto appeared on the game map.


Game demonstration
Http://lufylegend.com/demo/rpg/index.html

The lufylegend. js engine package contains this demo. Please download the lufylegend. js engine directly to view the source code in the engine package

Lufylegend. js Engine

Http://lufylegend.com/lufylegend

Next time, we need to add a control layer to implement the movement of people and the scrolling of maps. I hope you can provide more support.