Zero-basic development open-source RPG games lecture (IV)-game scripted & map jump-

For more information about the three articles, click "Listen 5cn. orgar ...,. To learn more about the three articles, click:

Html5 [color = rgb (68, 68, 68 )! Important] Game Development-Zero-infrastructure development RPG games-Open Source lecture (1)

Http://www.html5cn.org/article-1737-1.html

Html5 game development-Zero-basic development RPG games-open-source lecture (2)-start a hero

Http://www.html5cn.org/article-1738-1.html

Html5 game development-Zero-basic development RPG games-Open Source lecture (III)-scroll & conversation implementation

Http://www.html5cn.org/article-1740-1.html


First of all, this article is the fourth article in the series of open-source lectures on RPG games with no basic development to implement scripting of games and switch map scenarios with game scripts. We should first understand the following.

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,

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

1. Var script = {
   
2. Stage01 :{
   
3. Map :[
   
4. [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18],
   
5. [18,18, 18,17, 17,17, 17,17, 17,17, 17,17, 55,55, 17,17, 18],
   
6. [18, 18, 17,17, 17,17, 18,18, 17,17, 17,17, 55,55, 17,17, 18],
   
7. [, 17,17, 18, 18, 18, 18, 18, 18, 17, 17,55, 55,17, 17,17, 18],
   
8. [, 17, 17,18, 23, 23, 24, 18, 17,55, 55,17, 17,17, 18],
   
9. [, 18],
   
10. [, 17,17, 17,10, 11,12, 18,18, 55,55, 17,17, 17,17, 18],
    
11. [, 18],
    
12. [, 17, 17, 16, 16, 16, 21, 17, 17, 17, 17, 18],
    
13. [, 18],
    
14. [18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18, 18, 18],
    
15. Mapdata :[
    
16. [, 1],
    
17. [, 1],
    
18. [, 0, 1],
    
19. [, 1],
    
20. [, 1],
    
21. [, 1],
    
22. [, 0, 1],
    
23. [, 1],
    
24. [, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    
25. [, 1],
    
26. [,],
    
27. Add :[
    
28. {Chara: "player", img: "mingren", x: 5, y: 6 },
    
29. {Chara: "npc", img: "npc1", x: 7, y: 6 },
    
30. {Chara: "npc", img: "npc1", x: 3, y: 3}],
    
31. Talk :{
    
32. Talk1 :[
    
33. {Img: "m", name: "Naruto", msg: "I am a Naruto from muye village. Who are you? "},
    
34. {Img: "n", name: "heiyi ninja", msg: "Are you Naruto? Are you still in your body? "}
    
35. ],
    
36. Talk2 :[
    
37. {Img: "n", name: "", msg: "Naruto, I heard that the ninja war is about to begin. "},
    
38. {Img: "m", name: "Naruto", msg: "true? Be sure to find a solution. "}
    
39. ]
    
40. }
    
41. }
    
42. 
    
43. 
    
44. };

I defined the script as a variable. during actual game production, the script should be stored in an external document. Here I just want to 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.

1. Function initScript (){
   
2. // Map location Initialization
   
3. MapLayer. x = 0;
   
4. MapLayer. y = 0;
   
5. 
   
6. 
   
7. // Map layer Initialization
   
8. MapLayer. removeAllChild ();
   
9. // Initialize the character Layer
   
10. CharaLayer. removeAllChild ();
    
11. // Effect layer Initialization
    
12. EffectLayer. removeAllChild ();
    
13. // Initialize the dialog Layer
    
14. TalkLayer. removeAllChild ();
    
15. 
    
16. // Map Data Acquisition
    
17. Map = stage. map;
    
18. Mapdata = stage. mapdata;
    
19. // Obtain dialog data
    
20. TalkScriptList = stage. talk;
    
21. 
    
22. // Add a map
    
23. AddMap (0, 0 );
    
24. DelMap ();
    
25. // Add a character
    
26. AddChara ();
    
27. }

The removeAllChild method is unique to the legendForHtml5Programming engine and can be used to remove all sub-objects on the LScript display layer to initialize each display layer of the game.

Modify the addChara method as follows:

1. // Add a character
   
2. Function addChara (){
   
3. Var charaList = stage. add;
   
4. Var chara, charaObj;
   
5. For (var I = 0; I
6. CharaObj = charaList [I];
   
7. If (charaObj. chara = "player "){
   
8. // Add a hero
   
9. Bitmapdata = new LBitmapData (imglist [charaObj. img]);
   
10. Chara = new Character (true, I, bitmapdata, 4, 4 );
    
11. Player = chara;
    
12. } Else {
    
13. // Add the npc
    
14. Bitmapdata = new LBitmapData (imglist [charaObj. img]);
    
15. Chara = new Character (false, I, bitmapdata, 4, 4 );
    
16. }
    
17. Chara. x = charaObj. x * 32;
    
18. Chara. y = charaObj. y * 32;
    
19. CharaLayer. addChild (chara );
    
20. }
    
21. }

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:

1. Var script = {
   
2. Stage01 :{
   
3. Map :[
   
4. [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18],
   
5. [18,18, 18,17, 17,17, 17,17, 17,17, 17,17, 55,55, 17,17, 18],
   
6. [18, 18, 17,17, 17,17, 18,18, 17,17, 17,17, 55,55, 17,17, 18],
   
7. [, 17,17, 18, 18, 18, 18, 18, 18, 17, 17,55, 55,17, 17,17, 18],
   
8. [, 17, 17,18, 23, 23, 24, 18, 17,55, 55,17, 17,17, 18],
   
9. [, 18],
   
10. [, 17,17, 17,10, 11,12, 18,18, 55,55, 17,17, 17,17, 18],
    
11. [, 18],
    
12. [, 17, 17, 16, 16, 16, 21, 17, 17, 17, 17, 18],
    
13. [, 18],
    
14. [18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18, 18, 18],
    
15. Mapdata :[
    
16. [, 1],
    
17. [, 1],
    
18. [, 0, 1],
    
19. [, 1],
    
20. [, 1],
    
21. [, 1],
    
22. [, 0, 1],
    
23. [, 1],
    
24. [, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    
25. [, 1],
    
26. [,],
    
27. Add :[
    
28. {Chara: "player", img: "mingren", x: 5, y: 6 },
    
29. {Chara: "npc", img: "npc1", x: 7, y: 6 },
    
30. {Chara: "npc", img: "npc1", x: 3, y: 3}],
    
31. Talk :{
    
32. Talk1 :[
    
33. {Img: "m", name: "Naruto", msg: "I am a Naruto from muye village. Who are you? "},
    
34. {Img: "n", name: "heiyi ninja", msg: "Are you Naruto? Are you still in your body? "}
    
35. ],
    
36. Talk2 :[
    
37. {Img: "n", name: "", msg: "Naruto, I heard that the ninja war is about to begin. "},
    
38. {Img: "m", name: "Naruto", msg: "true? Be sure to find a solution. "}
    
39. ]
    
40. },
    
41. Jump :[
    
42. {At: {x: 6, y: 5}, to: "stage02 "}
    
43. ]
    
44. },
    
45. Stage02 :{
    
46. Map :[
    
47. [, 0],
    
48. [, 0],
    
49. [, 0],
    
50. [,],
    
51. [,],
    
52. [,],
    
53. [, 0],
    
54. [,],
    
55. [, 0],
    
56. Mapdata :[
    
57. [, 1],
    
58. [, 1],
    
59. [, 1],
    
60. [, 1],
    
61. [, 1],
    
62. [, 1],
    
63. [, 1],
    
64. [, 1],
    
65. [, 1],
    
66. Add :[
    
67. {Chara: "player", img: "mingren", x: 7, y: 8 },
    
68. {Chara: "npc", img: "npc1", x: 8, y: 3 },
    
69. {Chara: "npc", img: "npc1", x: 10, y: 3}],
    
70. Talk :{
    
71. Talk1 :[
    
72. {Img: "m", name: "Naruto", msg: "What are you doing? "},
    
73. {Img: "n", name: "heiyi ninja", msg: "We are drinking tea. "}
    
74. ],
    
75. Talk2 :[
    
76. {Img: "n", name: "", msg: "We are drinking tea. Do not disturb us. "},
    
77. {Img: "m", name: "Naruto", msg :"....."}
    
78. ]
    
79. },
    
80. Jump :[
    
81. {At: {x: 7, y: 8}, to: "stage01 "}
    
82. ]
    
83. }
    
84. 
    
85. 
    
86. };

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.

1. /**
   
2. * Start to move
   
3. **/
   
4. Character. prototype. onmove = function (){
   
5. Var self = this;
   
6. // Set the number of moves in a step.
   
7. Var ml_cnt = 4;
   
8. // Calculate the length of one Movement
   
9. Var ml = STEP/ml_cnt;
   
10. // Start moving Based on the moving direction
    
11. Switch (self. direction ){
    
12. Case UP:
    
13. If (mapmove ){
    
14. MapLayer. y + = ml;
    
15. CharaLayer. y + = ml;
    
16. }
    
17. Self. y-= ml;
    
18. Break;
    
19. Case LEFT:
    
20. If (mapmove ){
    
21. MapLayer. x + = ml;
    
22. CharaLayer. x + = ml;
    
23. }
    
24. Self. x-= ml;
    
25. Break;
    
26. Case RIGHT:
    
27. If (mapmove ){
    
28. MapLayer. x-= ml;
    
29. CharaLayer. x-= ml;
    
30. }
    
31. Self. x + = ml;
    
32. Break;
    
33. Case DOWN:
    
34. If (mapmove ){
    
35. MapLayer. y-= ml;
    
36. CharaLayer. y-= ml;
    
37. }
    
38. Self. y + = ml;
    
39. Break;
    
40. }
    
41. Self. moveIndex ++;
    
42. // When the number of moves is equal to the set number of times, start to determine whether to continue moving
    
43. If (self. moveIndex> = ml_cnt ){
    
44. // After moving a map step, determine whether the map is redirected.
    
45. If (self. isHero & self. moveIndex> 0) checkJump ();
    
46. Self. moveIndex = 0;
    
47. // After a map step is moved, if the map is in the rolling state, remove unnecessary map blocks.
    
48. If (mapmove) delMap ();
    
49. // If the move key has been released or the forward direction is an obstacle, stop moving. Otherwise, continue moving.
    
50. If (! IsKeyDown |! Self. checkRoad ()){
    
51. Self. move = false;
    
52. Return;
    
53. } Else if (self. direction! = Self. direction_next ){
    
54. Self. direction = self. direction_next;
    
55. Self. anime. setAction (self. direction );
    
56. }
    
57. // Whether the map is rolling
    
58. Self. checkMap (self. direction );
    
59. }
    
60. };

I added a row.

1. 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

1. // Game scenario jump test
   
2. Function checkJump (){
   
3. Var jump = stage. jump;
   
4. Var jumpstage;
   
5. For (var I = 0; I
6. Jumpstage = jump [0];
   
7. If (player. x = jumpstage. at. x * 32 & player. y = jumpstage. at. y * 32 ){
   
8. // Obtain script data for this scenario
   
9. Stage = script [jumpstage. to];
   
10. // Start the jump
    
11. InitScript (stage );
    
12. Return;
    
13. }
    
14. }
    
15. }

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://fsanguo.comoj.com/html5/rpg5/index.html

Download the source code for this update:

Http://legend-demo.googlecode.com/files/rpg5.zip

This article