Skip to content

Wall Tiles

noooway edited this page May 28, 2017 · 22 revisions

In this part I want to add tiles for the walls.

There are two vertical walls on the sides of the bricks area and one horizontal at the top. Instead of using images covering full length of the walls, I use short repeating segments. The segments for the vertical walls are slightly different in thickness from the one for the horizontal wall. Besides, two separate tiles for the corners are used.



Wall tiles: vertical, horizontal, top-left and top-right corners.

The tileset description and quads creation are placed in the walls.lua

local image = love.graphics.newImage( "img/800x600/walls.png" )
local wall_vertical_tile_width = 32
local wall_vertical_tile_height = 96
local wall_vertical_tile_x_pos = 0
local wall_vertical_tile_y_pos = 0
local wall_horizontal_tile_width = 96
local wall_horizontal_tile_height = 26
local wall_horizontal_tile_x_pos = 64
local wall_horizontal_tile_y_pos = 0
local topleft_corner_tile_width = 64
local topleft_corner_tile_height = 64
local topleft_corner_tile_x_pos = 64
local topleft_corner_tile_y_pos = 32
local topright_corner_tile_width = 64
local topright_corner_tile_height = 64
local topright_corner_tile_x_pos = 128
local topright_corner_tile_y_pos = 32
local tileset_width = 192
local tileset_height = 96
local vertical_quad = love.graphics.newQuad(
   wall_vertical_tile_x_pos,
   wall_vertical_tile_y_pos,
   wall_vertical_tile_width,
   wall_vertical_tile_height,
   tileset_width, tileset_height )
local horizontal_quad = love.graphics.newQuad(
   wall_horizontal_tile_x_pos,
   wall_horizontal_tile_y_pos,
   wall_horizontal_tile_width,
   wall_horizontal_tile_height,
   tileset_width, tileset_height )
local topright_corner_quad = love.graphics.newQuad(
   topright_corner_tile_x_pos,
   topright_corner_tile_y_pos,
   topright_corner_tile_width,
   topright_corner_tile_height,
   tileset_width, tileset_height )
local topleft_corner_quad = love.graphics.newQuad(
   topleft_corner_tile_x_pos,
   topleft_corner_tile_y_pos,
   topleft_corner_tile_width,
   topleft_corner_tile_height,
   tileset_width, tileset_height )

Each wall is drawn a bit differently. The top one uses different quads and different number of segments than the right and left. Unlike the left, the right needs to change it's appearance when the "Next Level" bonus is active. It is possible to define separate drawing functions for each wall. Instead, I add an unique tag layout to each one, which I'll later use in the walls.draw_wall function to distinguish between them.

function walls.new_wall( position, width, height, layout )
   return( { position = position,
             width = width,
             height = height,
             layout = layout } )
end

function walls.construct_walls()
   local left_wall = walls.new_wall(
      vector( 0, 0 ),
      walls.side_walls_thickness,
      love.graphics.getHeight(),
      "left"
   )
   local right_wall = walls.new_wall(
      vector( walls.right_border_x_pos, 0 ),
      walls.side_walls_thickness,
      love.graphics.getHeight(),
      "right"
   )
   local top_wall = walls.new_wall(
      vector( 0, 0 ),
      walls.right_border_x_pos,
      walls.top_wall_thickness,
      "top"
   )
   walls.current_level_walls["left"] = left_wall
   walls.current_level_walls["right"] = right_wall
   walls.current_level_walls["top"] = top_wall
end

In the walls.draw_wall function check of the layout field is performed.

function walls.draw_wall( single_wall )
   if ( single_wall.layout == 'top' ) then 
      .....
   elseif single_wall.layout == 'left' then 
      .....
   elseif single_wall.layout == 'right' then
      .....
   end
end

The top wall is responsible for drawing corner tiles. After that, 4 horizontal segments are drawn.

function walls.draw_wall( single_wall )
   if ( single_wall.layout == 'top' ) then 
      love.graphics.draw( 
         image, topleft_corner_quad,
         single_wall.position.x, single_wall.position.y )
      love.graphics.draw(
         image, topright_corner_quad,                     
         single_wall.position.x + single_wall.width - topleft_corner_tile_width / 2,
         single_wall.position.y )
      local repeat_n_times = 4
      for i = 0, repeat_n_times do
         shift_x = topleft_corner_tile_width + i * wall_horizontal_tile_width
         love.graphics.draw(
            image, horizontal_quad,
            single_wall.position.x + shift_x, single_wall.position.y )
      end
   elseif .....
end

For the left wall, vertical segment is repeated several times. An y-displacement is necessary to accommodate for the corner tile height. The necessary number of segments is calculated dynamically.

function walls.draw_wall( single_wall )
   .....
   elseif single_wall.layout == 'left' then 
      local repeat_n_times = math.floor(
         (single_wall.height - topright_corner_tile_height) 
            / wall_vertical_tile_height )
      for i = 0, repeat_n_times do
         shift_y = topright_corner_tile_height + i * wall_vertical_tile_height
         love.graphics.draw( image,
                             vertical_quad,
                             single_wall.position.x,
                             single_wall.position.y + shift_y )
      end
   elseif .....
end

The drawing procedure for the right wall is mostly similar to the left. The only exception is a situation, when "Next Level" bonus is active. In that case, one of the tiles - last but one - is not drawn.

function walls.draw_wall( single_wall )
   .....
   elseif single_wall.layout == 'right' then
      local repeat_n_times = math.floor(
         (single_wall.height - topright_corner_tile_height) /
            wall_vertical_tile_height )
      for i = 0, repeat_n_times do
         if not ( single_wall.next_level_bonus and i == repeat_n_times - 1 ) then
            shift_y = topright_corner_tile_height + i * wall_vertical_tile_height
            love.graphics.draw( image,
                                vertical_quad,
                                single_wall.position.x,
                                single_wall.position.y + shift_y )
         end
      end
   end
   .....
end

    Home
    Acknowledgements
    Todo

Chapter 1: Prototype

  1. The Ball, The Brick, The Platform
  2. Game Objects as Lua Tables
  3. Bricks and Walls
  4. Detecting Collisions
  5. Resolving Collisions
  6. Levels

    Appendix A: Storing Levels as Strings
    Appendix B: Optimized Collision Detection (draft)

Chapter 2: General Code Structure

  1. Splitting Code into Several Files
  2. Loading Levels from Files
  3. Straightforward Gamestates
  4. Advanced Gamestates
  5. Basic Tiles
  6. Different Brick Types
  7. Basic Sound
  8. Game Over

    Appendix C: Stricter Modules (draft)
    Appendix D-1: Intro to Classes (draft)
    Appendix D-2: Chapter 2 Using Classes.

Chapter 3 (deprecated): Details

  1. Improved Ball Rebounds
  2. Ball Launch From Platform (Two Objects Moving Together)
  3. Mouse Controls
  4. Spawning Bonuses
  5. Bonus Effects
  6. Glue Bonus
  7. Add New Ball Bonus
  8. Life and Next Level Bonuses
  9. Random Bonuses
  10. Menu Buttons
  11. Wall Tiles
  12. Side Panel
  13. Score
  14. Fonts
  15. More Sounds
  16. Final Screen
  17. Packaging

    Appendix D: GUI Layouts
    Appendix E: Love-release and Love.js

Beyond Programming:

  1. Game Design
  2. Minimal Marketing (draft)
  3. Finding a Team (draft)

Archive

Clone this wiki locally