HTML5 game development-Zero-basic development RPG games-Open Source lecture (4)-game scripted & map jump

First, this article is the fourth article in the series of open-source lectures on RPG games with zero basic development to implement scripting of games and switch map scenarios using game scripts, it seems that the last update has been a long time. Before reading the following text, you must first understand what the first three articles have done.

HTML5 game development-Zero-basic development RPG games-Open Source lecture (1)
Http://blog.csdn.net/lufy_legend/article/details/7063316
HTML5 game development-Zero-basic development RPG games-open-source lecture (2)-start a hero
Http://blog.csdn.net/lufy_legend/article/details/7076064
HTML5 game development-Zero-basic development RPG games-Open Source lecture (III)-scroll & conversation implementation
Http://blog.csdn.net/lufy_legend/article/details/7094567

I. What is a game script?

Simply put, a game script is an executable file written in a certain format. A game can execute the corresponding logic through its custom statements.
2. Why script the game?

Game scripts can make our games dynamic. For example, when we develop an RPG Game, including its plots, events, and maps, if we write all these scripts into the program, yes, of course. However, if a problem occurs, even a few typos, we need to correct these typos and re-compile and release the entire program, this process is quite objectionable, because if the game program is constantly modified with the game content, it will only make your program more and more complex. However, if we define this reusable data to files outside of the game program, when the game engine is developed, our game reads these external files, to execute the corresponding plots and events, we only need to modify these external files when a problem occurs in our game, and do not need to re-compile the entire program, this makes our game development more convenient and concise.

* Of course, for HTML5, there is no need to re-compile the program, but for RPG games, scripts are still indispensable, because the scripts of the Games cannot all be written into the program...

3. How to script the game

Now, let's take a look at how to create a game script. We have a variety of options: XML, JSON, and custom syntax,

Such as the development of the flash game script L # http://blog.csdn.net/lufy_legend/article/details/6889424

This time, I chose JSON that is easier to process for ease of use, because javascript can easily process JSON data.
Currently, the following content is implemented in the game: Map scenario addition, game character addition, and character conversation implementation. Then, when designing a game script, I must include the data before using these three functions to control them with scripts.
First, take a look at the following JSON

VaR script = {stage01: {map: [[18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18], [18, 18, 18, 18, 17, 17, 17, 17,17, 17,17, 55,55, 17,17, 18], [random, 17,17, 17,17, 18,18, 17,17, 17,17, 55,55, 17,17, 18], [, 17,17, 18,18, 18, 18,, 17, 17,55, 55,17, 17,17, 18], [, 23, 23, 24, 18, 17,55, 17, 17,17, 18], [, 17,18, 25, 28, 27,18, 55,55, 17,17, 17,17, 18], [18,17, 17,17, 17,10, 11,12, 18,18, 55,55, 17,17, 17,17, 18], [18, 18, 17,17, 16, 16, 11,55, 55,17, clerk, 17,17, 18], [18, 18, 17,17, 77,16, 16,16, 16,21, 17,17, 17,17, 17,17, 18], [, 17, 16, 16, 16, 55, 17, 17, 17, 17, 17, 18], [, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 18, 18, 18, 18, 18, 18, 18], mapdata: [[, 1,, 1,, 0, 1], [, 1], [, 1, 1], [, 1], [, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [, 1, 1], add: [{chara: "Player", IMG: "mingren", X: 5, Y: 6}, {chara: "NPC", IMG: "npc1", X: 7, Y: 6}, {chara: "NPC", IMG: "npc1", X: 3, Y: 3}], talk: {talk1: [{IMG: "M", name: "Naruto", MSG: "I am a Naruto in muye village. Who are you? "},{ IMG:" N ", name:" heiyi ninja ", MSG:" Are you the Naruto? Are you still in your body? "}], Talk2: [{IMG:" N ", name:" heiyi ninja B ", MSG:" Naruto, I heard that the ninja war is about to begin. "},{ IMG:" M ", name:" Naruto ", MSG:" true? Be sure to find a solution. "}] }};

I defined the script as a variable. during actual game production, the script should be stored in an external document. Here I will only explain the theory and how to improve it.
As you can see, JSON contains map-related map arrays and mapdata arrays, adding data related to characters, and dialogue arrays. In this way, when displaying a game, I only need to read JSON data and then display the game screen based on the content. Then, I can define an initscript function to perform these operations.

Function initscript () {// map position initialization maplayer. X = 0; maplayer. y = 0; // map layer initialization maplayer. removeallchild (); // The character layer initializes charalayer. removeallchild (); // The effect layer initializes the effectlayer. removeallchild (); // The talklayer is initialized in the dialog layer. removeallchild (); // map data acquisition map = stage. map; mapdata = stage. mapdata; // obtain talkscriptlist = stage. talk; // Add map addmap (0, 0); delmap (); // Add character addchara ();}

The removeallchild method is unique to the lufylegend engine and can be used to remove all sub-objects on the lscript display layer to initialize the display layers of the game.
Modify the addchara method as follows:

// Add the character function addchara () {var charalist = stage. add; var chara, charaobj; For (VAR I = 0; I <charalist. length; I ++) {charaobj = charalist [I]; If (charaobj. chara = "Player") {// Add the hero bitmapdata = new lbitmapdata (imglist [charaobj. img]); chara = new character (true, I, bitmapdata, 4, 4); player = chara;} else {// Add npcbitmapdata = new lbitmapdata (imglist [charaobj. img]); chara = new character (false, I, bitmapdata, 4, 4);} chara. X = charaobj. x * 32; chara. y = charaobj. y * 32; charalayer. addchild (chara );}}

That is, add characters in the game according to the Add array in the JSON script.

Okay. Run the game and you can see that the game is displayed normally. It is exactly the same as before and implements the same function.

4. Map Switching Using Game scripts

To help you see the convenience of the game script, you can use the script to switch the scenario in the game.
Modify the JSON script as follows:

VaR script = {stage01: {map: [[18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18], [18, 18, 18, 18, 17, 17, 17, 17,17, 17,17, 55,55, 17,17, 18], [random, 17,17, 17,17, 18,18, 17,17, 17,17, 55,55, 17,17, 18], [, 17,17, 18,18, 18, 18,, 17, 17,55, 55,17, 17,17, 18], [, 23, 23, 24, 18, 17,55, 17, 17,17, 18], [, 17,18, 25, 28, 27,18, 55,55, 17,17, 17,17, 18], [18,17, 17,17, 17,10, 11,12, 18,18, 55,55, 17,17, 17,17, 18], [18, 18, 17,17, 16, 16, 11,55, 55,17, clerk, 17,17, 18], [18, 18, 17,17, 77,16, 16,16, 16,21, 17,17, 17,17, 17,17, 18], [, 17, 16, 16, 16, 55, 17, 17, 17, 17, 17, 18], [, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 18, 18, 18, 18, 18, 18, 18], mapdata: [[, 1,, 1,, 0, 1], [, 1], [, 1, 1], [, 1], [, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [, 1, 1], add: [{chara: "Player", IMG: "mingren", X: 5, Y: 6}, {chara: "NPC", IMG: "npc1", X: 7, Y: 6}, {chara: "NPC", IMG: "npc1", X: 3, Y: 3}], talk: {talk1: [{IMG: "M", name: "Naruto", MSG: "I am a Naruto in muye village. Who are you? "},{ IMG:" N ", name:" heiyi ninja ", MSG:" Are you the Naruto? Are you still in your body? "}], Talk2: [{IMG:" N ", name:" heiyi ninja B ", MSG:" Naruto, I heard that the ninja war is about to begin. "},{ IMG:" M ", name:" Naruto ", MSG:" true? Be sure to find a solution. "}]}, Jump: [{at: {X: 6, Y: 5}, to:" stage02 "}]}, stage02: {map: [[0, 0,, 0], [, 0], [, 4,, 0,, 0], [, 0, 0], [, 4, 4, 9, 1, 0], [,], mapdata: [[, 1], [1 ,], [, 1], [, 1,, 1,, 1,, 1], [,], add: [{chara: "Player", IMG: "mingren ", x: 7, Y: 8}, {chara: "NPC", IMG: "npc1", X: 8, Y: 3}, {chara: "NPC", IMG: "npc1", X: 10, Y: 3}], talk: {talk1: [{IMG: "M", name :" Naruto ", MSG:" What are you doing? "},{ IMG:" N ", name:" heiyi ninja ", MSG:" We are drinking tea. "}], Talk2: [{IMG:" N ", name:" heiyi ninja B ", MSG:" We are drinking tea. Don't bother us. "},{ IMG:" M ", name:" Naruto ", MSG :"..... "}]}, jump: [{at: {X: 7, Y: 8}, to:" stage01 "}]};

As you can see, I added stage02, the second scenario, and introduced the jump node in the script to control game scenario switching. The at in jump indicates the coordinates of the arrival of the game hero's movement, to indicates the name of the image to jump to after the coordinates are reached. Here, jump is an array because one scenario can jump to multiple other scenarios.
The preceding script enables stage01 and stage02 to redirect each other.
In order to read this jump and implement the jump, we need to determine whether the jump should be made after the hero moves a step and modify the onmove method of the character class.

/*** Start to move **/character. prototype. onmove = function () {var self = This; // sets the number of moves in a moving step. var ml_cnt = 4; // calculates the length of a move. var ML = Step/ml_cnt; // start to move the switch (self. direction) {Case up: If (mapmove) {maplayer. Y + = ML; charalayer. Y + = ML;} self. y-= ML; break; case left: If (mapmove) {maplayer. X + = ML; charalayer. X + = ML;} self. x-= ML; break; case right: if (mapmove) {maplayer. x-= ML; charalayer. x-= ML;} self. X + = ML; bre AK; case down: If (mapmove) {maplayer. y-= ML; charalayer. y-= ML;} self. Y + = ML; break;} self. moveindex ++; // when the number of moves is equal to the set number of times, start to determine whether to continue moving if (self. moveindex> = ml_cnt) {// after a map step is moved, determine whether the map is redirected to If (self. ishero & self. moveindex> 0) checkjump (); self. moveindex = 0; // after a map step is moved, if the map is in the rolling status, remove the unnecessary map block if (mapmove) delmap (); // if the move key has been released, or if the front is an obstacle, stop moving. Otherwise, move if (! Iskeydown |! Self. checkroad () {self. Move = false; return;} else if (self. direction! = Self. direction_next) {self. direction = self. direction_next; self. anime. setaction (self. direction);} // whether the map is rolling self. checkmap (self. direction );}};

I added a row.

if(self.isHero && self.moveIndex > 0)checkJump();

Indicates that after the move, if the character is the hero of the game, the jump will be judged.
Therefore, we need to add a checkjump Method

// Game scenario jump test function checkjump () {var jump = stage. jump; var jumpstage; For (VAR I = 0; I <jump. length; I ++) {jumpstage = jump [0]; If (player. X = jumpstage. at. x * 32 & player. y = jumpstage. at. y * 32) {// obtain the script data for this scenario. Stage = script [jumpstage. to]; // start to jump to initscript (stage); Return ;}}}

All right, everything is simple. Run the game to see the effect. The part where Xiaoming goes to the small room door on the map is that the scene jumps.

Game test URL:

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

No basic development RPG games-Open Source lecture series, closed post, if you have any questions, you are welcome to correct, also welcome to leave a message to discuss the game production and improvement methods.