Shulou(Shulou.com)06/01 Report--

This article mainly explains "how html5 develops RPG games". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how html5 develops RPG games.

Preparatory work

First, download the library parts

In the development of this game, we need to use the open source library: LegendForHtml5Programming

Please go here to download the latest version of LegendForHtml5Programming, this development needs version 1.2 or above

For the development process of the library parts, please see here.

Second, the configuration of library parts.

First create a folder rpg (you can also give it another name)

Then extract the downloaded library parts 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 rpg folder, and a Main.js file in the js folder

Finally, add the following code to index.html

Rpg

Loading...

Of course, you can also put the legend folder somewhere else, but you need to change the value of LEGEND_PATH in the legend.js file under the legend folder to configure the path of the library.

The realization of Game Map

Next, let's draw the lowest layer.

Of course, a map is made up of pictures. How to display a picture on the screen? I have written a special article before. 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)

}

If you want to know more about it, see the following post

Use ActionScript-like syntax to write the first html5-- article, showing a picture

The map in the game can be a relatively large picture, that is, the whole picture is the map of the game. When the characters or the map move, change the area range of the picture display, so as to realize the scrolling and display of the map. In this case, a map must be prepared for each scene.

In addition, maps can also be made up of many small map blocks. For example, we are familiar with classic mini-rpg games such as "devour Heaven and Earth" and "Warriors fight Dragons". For such maps, we need to prepare one or more map blocks and combine them into maps to display them, such as the following image.

When the map is displayed, first cut the picture, and then display it on the ground layer according to the predetermined location, so that we can see a complete map.

Next, open Main.js

Add in it.

1. Init (50, "mylegend", 480, 320, main)

In legendForHtml5Progarmming, the init function is used to initialize canvas. The above code indicates that initializing a game interface with a speed of 50, a name of mylegend, and a size of 480 to 320, and calling main () after initialization is completed. This speed value means how many milliseconds each game loops, so the smaller the value, the faster the game will run.

Because we are going to call the main method, we will write a main method and do some simple preparatory work in the main method.

Although it only takes one to read the picture.

1. Loader.load ("map.jpg", "bitmapData")

But games often use a lot of pictures, you can use which one to load which one, or you can load them all at once, and then start to display the game

In order to load the pictures at once, what I do is to put the required pictures into an array, and then set an index. Each time a picture is loaded, add 1 to the index, and when the index is less than the length of the array, continue to load until all the pictures in the array are loaded, and then move on to the next step.

For the specific implementation, see the following code

/ / path array of pictures

Var imgData=new Array ()

/ / an array of read pictures

Var imglist= {}

Function main () {

/ / prepare to read the picture

ImgData.push ({name: "map", path: ""})

ImgData.push ({name: "mingren", path: ""})

ImgData.push ({name: "E1", path: ""})

ImgData.push ({name: "e2", path: ""})

/ / instantiate the progress bar layer

LoadingLayer=new LSprite ()

LoadingLayer.graphics.drawRect (1, "black", [50,200,200,20], true, "# ffffff")

AddChild (loadingLayer)

/ / start reading pictures

LoadImage ()

}

Function loadImage () {

/ / all the pictures have been read, start initializing the game

If (loadIndex > = imgData.length) {

RemoveChild (loadingLayer)

LegendLoadOver ()

GameInit ()

Return

}

/ / start reading pictures

Loader=new LLoader ()

Loader.addEventListener (LEvent.COMPLETE,loadComplete)

Loader.load (imgdata [loadIndex] .path, "bitmapData")

}

Function loadComplete (event) {

/ / Progress bar display

LoadingLayer.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")

/ / Save image data

Imglist [imgdata [loadIndex] .name] = loader.content

/ / read the next picture

LoadIndex++

LoadImage ()

}

The above code is not difficult to understand. Before the picture is read, the two methods loadImage and loadComplete will be looped constantly. After reading, remove the progress bar, use legendLoadOver to tell the game that it has been read, and then call the gameInit method to initialize the game.

Look at the gameInit method

Function gameInit (event) {

/ / Game layer display initialization

LayerInit ()

/ / add a map

AddMap ()

/ / add people

AddChara ()

}

In the gameInit method, initialize the game layer first, then add the game map, and then add characters

Game layer display initialization, as we said at the beginning, we initialize the map layer, figure layer, effect layer, dialogue layer, control layer at one time.

/ / Game layer display initialization

Function layerInit () {

/ / add at the bottom of the game

BackLayer=new LSprite ()

AddChild (backLayer)

/ / add map layer

MapLayer=new LSprite ()

BackLayer.addChild (mapLayer)

/ / add people layer

CharaLayer=new LSprite ()

BackLayer.addChild (charaLayer)

/ / add effect layer

EffectLayer=new LSprite ()

BackLayer.addChild (effectLayer)

/ / add conversation layer

TalkLayer=new LSprite ()

BackLayer.addChild (talkLayer)

/ / Control layer addition

CtrlLayer=new LSprite ()

BackLayer.addChild (ctrlLayer)

}

With the division of the game hierarchy, when we add game objects, we add the map to the map layer and the characters to the figure layer, and they will be displayed in the game interface in turn.

Let's start adding maps.

First, we need to prepare an array that displays the map.

/ / an array of map pictures

Var map= [

[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]

]

These numbers correspond to the following positions in the figure

Then look at the following code

/ / add a map

Function addMap () {

Var i,j,index,indexX,indexY

Var bitmapdata,bitmap

/ / Map picture data

Bitmapdata=new LBitmapData (imglist ["map"])

/ / split the map image to get the coordinate array of each small picture after the split

ImageArray=LGlobal.divideCoordinate (bitmapdata.image.width,bitmapdata.image.height,10,10)

/ / on the ground layer, draw a small picture of 15: 10

For (iSuppli)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.