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

This article describes in detail the third part of html5 game development, scroll and dialog implementation .,. To learn more about the last two articles, click:

Html5 game development-Zero-basic 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

In the first two articles, the development of RPG has implemented the addition of maps and the addition of game characters. In this article, the implementation of the scroll and dialogue of maps is achieved. The effect is as follows:

This development has updated the library parts to 1.3. Please click the link below to download the library parts version 1.3 or later

Http://code.google.com/p/legendforhtml5programming/downloads/list

Rolling a map

For details about the principle of map scrolling, refer

Follow the instructions to scroll the map. You only need to draw the forthcoming map (yellow in the figure) and then scroll the map, remove the part outside the screen (the green part in the figure)

First, you must add a variable to control whether the map is rolling.

1. // Map scrolling
   
2. Var mapmove = false;

Then, when the characters move, determine whether the map needs to be rolled.

1. /**
   
2. * Whether the map is rolling
   
3. **/
   
4. Character. prototype. checkMap = function (dir ){
   
5. Var self = this;
   
6. Mapmove = false;
   
7. // If it is not a hero, the map does not need to be rolled.
   
8. If (! Self. isHero) return;
   
9. 
   
10. Switch (dir ){
    
11. Case UP:
    
12. If (self. y + charaLayer. y> STEP) break;
    
13. If (mapLayer. y> = 0) break;
    
14. AddMap (0,-1 );
    
15. Mapmove = true;
    
16. Break;
    
17. Case LEFT:
    
18. If (self. x + charaLayer. x> STEP) break;
    
19. If (mapLayer. x> = 0) break;
    
20. AddMap (-1, 0 );
    
21. Mapmove = true;
    
22. Break;
    
23. Case RIGHT:
    
24. If (self. x <480-2 * STEP) break;
    
25. If (480-mapLayer. x> = map [0]. length * STEP) break;
    
26. AddMap (1, 0 );
    
27. Mapmove = true;
    
28. Break;
    
29. Case DOWN:
    
30. If (self. y <288-2 * STEP) break;
    
31. If (288-mapLayer. y> = map. length * STEP) break;
    
32. AddMap (0, 1 );
    
33. Mapmove = true;
    
34. Break;
    
35. }
    
36. };

During the movement process, you can determine whether the map is in the rolling state. If the map is in the rolling state, it will be rolled. Otherwise, the map will be moved.

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 a map step is moved, if the map is in the rolling state, remove unnecessary map blocks.
    
45. If (mapmove) delMap ();
    
46. Self. moveIndex = 0;
    
47. // If the move key has been released or the forward direction is an obstacle, stop moving. Otherwise, continue moving.
    
48. If (! IsKeyDown |! Self. checkRoad ()){
    
49. Self. move = false;
    
50. Return;
    
51. } Else if (self. direction! = Self. direction_next ){
    
52. Self. direction = self. direction_next;
    
53. Self. anime. setAction (self. direction );
    
54. }
    
55. // Whether the map is rolling
    
56. Self. checkMap (self. direction );
    
57. }
    
58. };

Finally, expand the map array and terrain to a size greater than the screen size.

1. // Map image Array
   
2. Var map = [
   
3. [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18],
   
4. [18,18, 18,17, 17,17, 17,17, 17,17, 17,17, 55,55, 17,17, 18],
   
5. [18, 18, 17,17, 17,17, 18,18, 17,17, 17,17, 55,55, 17,17, 18],
   
6. [, 17,17, 18, 18, 18, 18, 18, 18, 17, 17,55, 55,17, 17,17, 18],
   
7. [, 17, 17,18, 23, 23, 24, 18, 17,55, 55,17, 17,17, 18],
   
8. [, 18],
   
9. [, 17,17, 17,10, 11,12, 18,18, 55,55, 17,17, 17,17, 18],
   
10. [, 18],
    
11. [, 17, 17, 16, 16, 16, 21, 17, 17, 17, 17, 18],
    
12. [, 18],
    
13. [18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18, 18, 18, 18]
    
14. ];
    
15. // Map terrain Array
    
16. Var mapdata = [
    
17. [, 1],
    
18. [, 1],
    
19. [, 0, 1],
    
20. [, 1],
    
21. [, 1],
    
22. [, 1],
    
23. [, 0, 1],
    
24. [, 1],
    
25. [, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    
26. [, 1],
    
27. [, 1]
    
28. ];

To implement map scrolling, modify the map adding method and add the yellow map part of the above image according to the parameters.

1. // Add a map
   
2. Function addMap (cx, cy ){
   
3. Var I, j, index, indexX, indexY;
   
4. Var bitmapdata, bitmap;
   
5. Var mapX = mapLayer. x/STEP;
   
6. Var mapY = mapLayer. y/STEP;
   
7. Var mx = cx <0? -1:0, my = cy <0? -1:0;
   
8. If (imageArray = null ){
   
9. // Map image data
   
10. Bitmapdata = new LBitmapData (imglist ["map"]);
    
11. // Split the map image to obtain the coordinate array of each small image after the split
    
12. ImageArray = LGlobal. pideCoordinate (bitmapdata. image. width, bitmapdata. image. height, 10, 10 );
    
13. }
    
14. MapLayer. removeAllChild ();
    
15. // Draw a 15x10 small image on the map layer
    
16. For (I = my; I <9 + Math. abs (cy) & I-mapY <map. length; I ++ ){
    
17. For (j = mx; j <15 + Math. abs (cx) & j-mapX <map [0]. length; j ++ ){
    
18. // Obtain the image coordinates of the corresponding position from the map Array
    
19. Index = map [I-mapY] [j-mapX];
    
20. // The vertical coordinate of the small image
    
21. IndexY = Math. floor (index/10 );
    
22. // Horizontal coordinate of the small image
    
23. IndexX = index-indexY * 10;
    
24. // Get a small image
    
25. Bitmapdata = new LBitmapData (imglist ["map"], indexX * 32, indexY * 32, 32 );
    
26. Bitmap = new LBitmap (bitmapdata );
    
27. // Set the position of the small image
    
28. Bitmap. x = j * STEP-mapLayer. x;
    
29. Bitmap. y = I * STEP-mapLayer. y;
    
30. // Display the small image to the map layer
    
31. MapLayer. addChild (bitmap );
    
32. }
    
33. }
    
34. }
    
35. // Remove unnecessary map Blocks
    
36. Function delMap (){
    
37. Var bitmap, I;
    
38. For (I = 0; I
39. Bitmap = mapLayer. childList [I];
    
40. If (bitmap. x + mapLayer. x <0 | bitmap. x + mapLayer. x >=480 |
    
41. Bitmap. y + mapLayer. y <0 | bitmap. y + mapLayer. y >=288 ){
    
42. MapLayer. removeChild (bitmap );
    
43. I --;
    
44. }
    
45. }
    
46. }

The effect is as follows:

Character conversation

The implementation of the dialog is added when you click the square button of the control button. Therefore, when you move the cursor up, you can determine whether the square button is clicked.

1. Function onup (event ){
   
2. IsKeyDown = false;
   
3. If (event. offsetX> = ctrlLayer. x + 280 & event. offsetX <= ctrlLayer. x + 330 ){
   
4. If (event. offsetY> = ctrlLayer. y + 40 & event. offsetY <= ctrlLayer. y + 100 ){
   
5. // Dialog
   
6. AddTalk ();
   
7. }
   
8. }
   
9. }

When improving the addTalk () method, first prepare the conversation content.

1. Var talkScriptList = {
   
2. "Talk1": new Array (
   
3. {Img: "m", name: "Naruto", msg: "I am a Naruto from muye village. Who are you? "},
   
4. {Img: "n", name: "heiyi ninja", msg: "Are you Naruto? Are you still in your body? "}
   
5. ),
   
6. "Talk2": new Array (
   
7. {Img: "n", name: "", msg: "Naruto, I heard that the ninja war is about to begin. "},
   
8. {Img: "m", name: "Naruto", msg: "true? Be sure to find a solution. "}
   
9. )
   
10. };

The number next to the talk in talk1 and talk2, representing the number of the character. The img of each conversation unit is the avatar of the character, the name is the name of the character, and the msg is the content of the conversation.

When adding a dialog, you can click the square button to determine whether there is a person in front of the person. If there is a person, the number of the person will be taken out, obtain the corresponding dialog content from the array above, and then display the corresponding content on the game screen. The specific implementation code is as follows:

1. // Dialog content
   
2. Var talkScript;
   
3. Var talkScriptList = {
   
4. "Talk1": new Array (
   
5. {Img: "m", name: "Naruto", msg: "I am a Naruto from muye village. Who are you? "},
   
6. {Img: "n", name: "heiyi ninja", msg: "Are you Naruto? Are you still in your body? "}
   
7. ),
   
8. "Talk2": new Array (
   
9. {Img: "n", name: "", msg: "Naruto, I heard that the ninja war is about to begin. "},
   
10. {Img: "m", name: "Naruto", msg: "true? Be sure to find a solution. "}
    
11. )
    
12. };
    
13. // Dialog no.
    
14. Var talkIndex = 0;
    
15. // Dialog in progress
    
16. Var talking = false;
    
17. 
    
18. /**
    
19. * Add a dialog
    
20. **/
    
21. Function addTalk (){
    
22. // If the dialog content is blank, start to judge whether the dialog can be made
    
23. If (talkScript = null ){
    
24. Var key, tx = player. x, ty = player. y;
    
25. Switch (player. direction ){
    
26. Case UP:
    
27. Ty-= STEP;
    
28. Break;
    
29. Case LEFT:
    
30. Tx-= STEP;
    
31. Break;
    
32. Case RIGHT:
    
33. Tx + = STEP;
    
34. Break;
    
35. Case DOWN:
    
36. Ty + = STEP;
    
37. Break;
    
38. }
    
39. For (key in charaLayer. childList ){
    
40. // Determine whether there is no npc in the front. If yes, start the conversation.
    
41. If (charaLayer. childList [key]. x = tx & charaLayer. childList [key]. y = ty ){
    
42. If (talkScriptList ["talk" + charaLayer. childList [key]. index]) {
    
43. TalkScript = talkScriptList ["talk" + charaLayer. childList [key]. index];
    
44. TalkIndex = 0;
    
45. }
    
46. }
    
47. }
    
48. // If no npc exists, return
    
49. If (talkScript = null) return;
    
50. }
    
51. // Clear the dialog Layer
    
52. TalkLayer. removeAllChild ();
    
53. // When the conversation starts and starts in order
    
54. If (talkIndex <talkScript. length ){
    
55. // Obtain the dialog content
    
56. Var talkObject = talkScript [talkIndex];
    
57. // Dialog background
    
58. Bitmapdata = new LBitmapData (imglist ["talk"]);
    
59. Bitmap = new LBitmap (bitmapdata );
    
60. Bitmap. width = 330;
    
61. Bitmap. height = 70;
    
62. Bitmap. x = 100;
    
63. Bitmap. y = 20;
    
64. Bitmap. alpha = 0.7;
    
65. TalkLayer. addChild (bitmap );
    
66. // Dialog Avatar
    
67. Bitmapdata = new LBitmapData (imglist [talkObject. img]);
    
68. Bitmap = new LBitmap (bitmapdata );
    
69. Bitmap. x = 0;
    
70. Bitmap. y = 0;
    
71. TalkLayer. addChild (bitmap );
    
72. // Dialog character name
    
73. Var name = new LTextField ();
    
74. Name. x = 110;
    
75. Name. y = 30;
    
76. Name. size = "14 ";
    
77. Name. color = "# FFFFFF ";
    
78. Name. text = "[" + talkObject. name + "]";
    
79. TalkLayer. addChild (name );
    
80. // Dialog content
    
81. Var msg = new LTextField ();
    
82. Msg. x = 110;
    
83. Msg. y = 55;
    
84. Msg. color = "# FFFFFF ";
    
85. Msg. text = talkObject. msg;
    
86. TalkLayer. addChild (msg );
    
87. // The dialog content is displayed literally
    
88. Msg. wind ();
    
89. TalkLayer. x = 20;
    
90. TalkLayer. y = 50;
    
91. TalkIndex ++;
    
92. } Else {
    
93. // The conversation ends.
    
94. TalkScript = null;
    
95. }
    
96. }

Effect view

Game demo address

Http://fsanguo.comoj.com/html5/rpg3/index.html

Some modifications have been made elsewhere. For details about the modifications, see the source code. The updated source code is as follows:

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

This article