From zero to Bombuzal - step 3

February 26, 2008 by Emanuele Feronato
Filed Under Flash, Game design, Users contributions •  

In the previous step we had the problem of the level panning away if the mouse is outside the movie.

The first solution come from souled that created a button in the entire stage to manage the panning

PLAIN TEXT
ACTIONSCRIPT:
  1. //create an invisible movie clip across the entire stage using API
  2. _root.createEmptyMovieClip("base", 1);
  3. with (base) {
  4.     lineStyle(2, 0x0000000, 0);
  5.     beginFill(0x00000000, 0);
  6.     lineTo(Stage.width, 0);
  7.     lineTo(Stage.width, Stage.height);
  8.     lineTo(0, Stage.height);
  9.     lineTo(0, 0);
  10. }
  11. //whether to pan or not
  12. level_pan = false;
  13. //tile size
  14. tile_size = 50;
  15. // pan variables
  16. pan_dist = 50;
  17. pan_speed = 5;
  18. // tiles array generation
  19. tiles = [[0, 1, 0, 0], [1, 1, 2, 1], [1, 2, 1, 2], [0, 0, 1, 0]];
  20. // bombs array generation
  21. bombs = [[0, 1, 0, 0], [0, 1, 0, 1], [1, 0, 1, 0], [0, 0, 1, 0]];
  22. // creating the level movieclip
  23. _root.createEmptyMovieClip("level", _root.getNextHighestDepth());
  24. // placing tiles
  25. for (x=0; x<tiles.length; x++) {
  26.     for (y=0; y<tiles[x].length; y++) {
  27.         if (tiles[y][x]) {
  28.             placed = level.attachMovie("tile", "tile"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
  29.             placed.gotoAndStop(tiles[y][x]);
  30.         }
  31.     }
  32. }
  33. // placing bombs
  34. for (x=0; x<bombs.length; x++) {
  35.     for (y=0; y<bombs[x].length; y++) {
  36.         if (bombs[y][x]) {
  37.             level.attachMovie("bomb", "bomb"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
  38.         }
  39.     }
  40. }
  41. // centering level
  42. level._x = (Stage.width-tiles.length*tile_size)/2;
  43. level._y = (Stage.height-tiles[0].length*tile_size)/2;
  44. level.onEnterFrame = function() {
  45.     //if mouse is on stage
  46.     if (level_pan) {
  47.         //stopping level leaving screen
  48.         //too high
  49.         if (level._y<=0) {
  50.             level._y = 0;
  51.         }
  52.         //too low
  53.         if (level._y>=Stage.height-level._height) {
  54.             level._y = Stage.height-level._height;
  55.         }
  56.         //too far to the left
  57.         if (level._x<=0) {
  58.             level._x = 0;
  59.         }
  60.         //too far to the right
  61.         if (level._x>=Stage.width-level._width) {
  62.             level._x = Stage.width-level._width;
  63.         }
  64.         // panning level
  65.         // pan right
  66.         if (_root._xmouse<pan_dist) {
  67.             level._x += pan_speed;
  68.         }
  69.         // pan left
  70.         if (_root._xmouse>Stage.width-pan_dist) {
  71.             level._x -= pan_speed;
  72.         }
  73.         // pan down
  74.         if (_root._ymouse<pan_dist) {
  75.             level._y += pan_speed;
  76.         }
  77.         // pan up
  78.         if (_root._ymouse>Stage.height-pan_dist) {
  79.             level._y -= pan_speed;
  80.         }
  81.     }
  82. };
  83. //when mouse is on stage pan
  84. base.onRollOver = function() {
  85.     level_pan = true;
  86. };
  87. //when mouse leaves stage stop panning
  88. base.onRollOut = function() {
  89.     level_pan = false;
  90. };

Maybe it's not the best solution ever, because it may require you to redesign mouse pointer, but at the moment it works.

Now it's time to add the main sprite, Bombuzal itself! I'll create an object to store all its information. If you have troubles with objects, refer to Understanding Flash Objects tutorial.

At the moment the only information about Bombuzal I need are its x and y position

PLAIN TEXT
ACTIONSCRIPT:
  1. //create an invisible movie clip across the entire stage using API
  2. _root.createEmptyMovieClip("base", 1);
  3. with (base) {
  4.     lineStyle(2, 0x0000000, 0);
  5.     beginFill(0x00000000, 0);
  6.     lineTo(Stage.width, 0);
  7.     lineTo(Stage.width, Stage.height);
  8.     lineTo(0, Stage.height);
  9.     lineTo(0, 0);
  10. }
  11. //whether to pan or not
  12. level_pan = false;
  13. //tile size
  14. tile_size = 50;
  15. // pan variables
  16. pan_dist = 50;
  17. pan_speed = 5;
  18. // tiles array generation
  19. tiles = [[0, 1, 0, 0], [1, 1, 2, 1], [1, 2, 1, 2], [0, 0, 1, 0]];
  20. // bombs array generation
  21. bombs = [[0, 1, 0, 0], [0, 1, 0, 1], [1, 0, 1, 0], [0, 0, 1, 0]];
  22. // main sprite
  23. bombuzal_obj = {xpos:0, ypos:1};
  24. // creating the level movieclip
  25. _root.createEmptyMovieClip("level", _root.getNextHighestDepth());
  26. // placing tiles
  27. for (x=0; x<tiles.length; x++) {
  28.     for (y=0; y<tiles[x].length; y++) {
  29.         if (tiles[y][x]) {
  30.             placed = level.attachMovie("tile", "tile"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
  31.             placed.gotoAndStop(tiles[y][x]);
  32.         }
  33.     }
  34. }
  35. // placing bombs
  36. for (x=0; x<bombs.length; x++) {
  37.     for (y=0; y<bombs[x].length; y++) {
  38.         if (bombs[y][x]) {
  39.             level.attachMovie("bomb", "bomb"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
  40.         }
  41.     }
  42. }
  43. // placing bombuzal
  44. level.attachMovie("bombuzal", "bombuzal", level.getNextHighestDepth(), {_x:bombuzal_obj.xpos*tile_size, _y:bombuzal_obj.ypos*tile_size});
  45. // centering level
  46. level._x = (Stage.width-tiles.length*tile_size)/2;
  47. level._y = (Stage.height-tiles[0].length*tile_size)/2;
  48. level.onEnterFrame = function() {
  49.     //if mouse is on stage
  50.     if (level_pan) {
  51.         //stopping level leaving screen
  52.         //too high
  53.         if (level._y<=0) {
  54.             level._y = 0;
  55.         }
  56.         //too low   
  57.         if (level._y>=Stage.height-level._height) {
  58.             level._y = Stage.height-level._height;
  59.         }
  60.         //too far to the left   
  61.         if (level._x<=0) {
  62.             level._x = 0;
  63.         }
  64.         //too far to the right   
  65.         if (level._x>=Stage.width-level._width) {
  66.             level._x = Stage.width-level._width;
  67.         }
  68.         // panning level   
  69.         // pan right
  70.         if (_root._xmouse<pan_dist) {
  71.             level._x += pan_speed;
  72.         }
  73.         // pan left   
  74.         if (_root._xmouse>Stage.width-pan_dist) {
  75.             level._x -= pan_speed;
  76.         }
  77.         // pan down   
  78.         if (_root._ymouse<pan_dist) {
  79.             level._y += pan_speed;
  80.         }
  81.         // pan up   
  82.         if (_root._ymouse>Stage.height-pan_dist) {
  83.             level._y -= pan_speed;
  84.         }
  85.     }
  86. };
  87. //when mouse is on stage pan
  88. base.onRollOver = function() {
  89.     level_pan = true;
  90. };
  91. //when mouse leaves stage stop panning
  92. base.onRollOut = function() {
  93.     level_pan = false;
  94. };

And here it is!

I know, Bombuzal sprite sucks, but I'll fix it later. Now, I want it to move using arrow keys. If Bombuzal steps off the floor, then he dies and at the moment I want it to be redrawn at its starting position.

PLAIN TEXT
ACTIONSCRIPT:
  1. //create an invisible movie clip across the entire stage using API
  2. _root.createEmptyMovieClip("base", 1);
  3. with (base) {
  4.     lineStyle(2, 0x0000000, 0);
  5.     beginFill(0x00000000, 0);
  6.     lineTo(Stage.width, 0);
  7.     lineTo(Stage.width, Stage.height);
  8.     lineTo(0, Stage.height);
  9.     lineTo(0, 0);
  10. }
  11. //whether to pan or not
  12. level_pan = false;
  13. //tile size
  14. tile_size = 50;
  15. // pan variables
  16. pan_dist = 50;
  17. pan_speed = 5;
  18. // tiles array generation
  19. tiles = [[0, 1, 0, 0], [1, 1, 2, 1], [1, 2, 1, 2], [0, 0, 1, 0]];
  20. // bombs array generation
  21. bombs = [[0, 1, 0, 0], [0, 1, 0, 1], [1, 0, 1, 0], [0, 0, 1, 0]];
  22. // main sprite
  23. bombuzal_obj = {xpos:0, ypos:1};
  24. // creating the level movieclip
  25. _root.createEmptyMovieClip("level", _root.getNextHighestDepth());
  26. // placing tiles
  27. for (x=0; x<tiles.length; x++) {
  28.     for (y=0; y<tiles[x].length; y++) {
  29.         if (tiles[y][x]) {
  30.             placed = level.attachMovie("tile", "tile"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
  31.             placed.gotoAndStop(tiles[y][x]);
  32.         }
  33.     }
  34. }
  35. // placing bombs
  36. for (x=0; x<bombs.length; x++) {
  37.     for (y=0; y<bombs[x].length; y++) {
  38.         if (bombs[y][x]) {
  39.             level.attachMovie("bomb", "bomb"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
  40.         }
  41.     }
  42. }
  43. // placing bombuzal
  44. level.attachMovie("bombuzal", "bombuzal", level.getNextHighestDepth(), {_x:bombuzal_obj.xpos*tile_size, _y:bombuzal_obj.ypos*tile_size});
  45. level.bombuzal.onEnterFrame = function() {
  46.     // moving left
  47.     if (Key.isDown(Key.LEFT)) {
  48.         bombuzal_obj.xpos--;
  49.     }
  50.     // moving right
  51.     if (Key.isDown(Key.RIGHT)) {
  52.         bombuzal_obj.xpos++;
  53.     }
  54.     // moving down
  55.     if (Key.isDown(Key.DOWN)) {
  56.         bombuzal_obj.ypos++;
  57.     }
  58.     // moving up
  59.     if (Key.isDown(Key.UP)) {
  60.         bombuzal_obj.ypos--;
  61.     }
  62.     update_bombuzal_position();
  63. };
  64. // centering level
  65. level._x = (Stage.width-tiles.length*tile_size)/2;
  66. level._y = (Stage.height-tiles[0].length*tile_size)/2;
  67. level.onEnterFrame = function() {
  68.     //if mouse is on stage
  69.     if (level_pan) {
  70.         //stopping level leaving screen
  71.         //too high
  72.         if (level._y<=0) {
  73.             level._y = 0;
  74.         }
  75.         //too low         
  76.         if (level._y>=Stage.height-level._height) {
  77.             level._y = Stage.height-level._height;
  78.         }
  79.         //too far to the left         
  80.         if (level._x<=0) {
  81.             level._x = 0;
  82.         }
  83.         //too far to the right         
  84.         if (level._x>=Stage.width-level._width) {
  85.             level._x = Stage.width-level._width;
  86.         }
  87.         // panning level         
  88.         // pan right
  89.         if (_root._xmouse<pan_dist) {
  90.             level._x += pan_speed;
  91.         }
  92.         // pan left         
  93.         if (_root._xmouse>Stage.width-pan_dist) {
  94.             level._x -= pan_speed;
  95.         }
  96.         // pan down         
  97.         if (_root._ymouse<pan_dist) {
  98.             level._y += pan_speed;
  99.         }
  100.         // pan up         
  101.         if (_root._ymouse>Stage.height-pan_dist) {
  102.             level._y -= pan_speed;
  103.         }
  104.     }
  105. };
  106. //when mouse is on stage pan
  107. base.onRollOver = function() {
  108.     level_pan = true;
  109. };
  110. //when mouse leaves stage stop panning
  111. base.onRollOut = function() {
  112.     level_pan = false;
  113. };
  114. // update bombuzal position
  115. function update_bombuzal_position() {
  116.     level.bombuzal._x = bombuzal_obj.xpos*tile_size;
  117.     level.bombuzal._y = bombuzal_obj.ypos*tile_size;
  118.     if ((tiles[bombuzal_obj.xpos][bombuzal_obj.ypos] == undefined) or (tiles[bombuzal_obj.xpos][bombuzal_obj.ypos]<1)) {
  119.         bombuzal_obj.xpos