I didn’t talk about it in the previous post but I had added an Observer to the Java code that would highlight blocks in green when a collision was detected. Unfortunately, the code is a bit unclean although it works. I have a few global variables (common in Processing sketches) and some unused variables. So I never posted it.

Fast-forward to today and I have been playing around with ruby-processing (rp5) and porting some of my sketches. The code is not much smaller (300ish lines of Java, 265 lines of Ruby) but I didn’t optimize either code for line numbers. Neither code is really easier to read. This might be because I straight-up ported the code with only minor changes. Even if I were to do this from scratch, I’m not sure I could make it more ruby-like. Where I use arrays for x,y, I’m sure I could do something cooler like ruby Hashes, but a lot of the code is bound to JRuby and the Processing API so it ends up reading about the same.

One of the changes was to move the observer notification into the key_pressed method. When you run into a block, it does a few checks to see if you’re at the edge of the screen and if not, it notifies the BlockedHandler which will highlight the grid block at the proper location.

I was unable to export an applet from ruby-processing but I have the java version posted here. The controls are:

Arrow keys to move
Space to randomize grid

I also have a Mac app of the ruby version here. It should work stand-alone. I suggest running the code before looking at it so that you can see it in motion. It won’t make a whole lot of sense just by looking at the screenshot.

require 'java'
require 'observer'
require 'thread'
require 'pp'
include_class 'java.util.Random'
 
# port of deadgrid_refactor
class DeadGrid
  attr_accessor :block_size, :grid, :width, :height
 
  def initialize
    @block_size = $app.block_size
    @width = $app.width / $app.block_size - 1
    @height = $app.height / $app.block_size - 1
 
    @grid = Array.new
    0.upto(@width) do |i|
      grid[i] = Array.new
      0.upto(@height) {|j| @grid[i][j] = 0 }
    end    
  end
 
  def to_s
    string = ""
    string << "\nDeadGrid\n"
    string << "-" * @width << "\n"
    0.upto(@width) do |i|
      0.upto(@height) {|j| string << grid[j][i].to_s }
      string << "\n"
    end
    string
  end
 
  def draw
    $app.stroke(255,255,255,125)
    $app.stroke_weight(1)
 
    0.upto(@width) do |i|
      0.upto(@height) do |j|
        x = i * @block_size
        y = j * @block_size
 
        if (@grid[i][j] != 0)
          if (@grid[i][j] == 1)
            $app.fill(255,0,0)
          elsif (@grid[i][j] == 2)
            $app.fill(120,200,50)
          end
          $app.rect(x,y,@block_size,@block_size)
        end
      end
    end
 
  end
 
  def randomize
    rand = Random.new
    0.upto(@width) do |i|
      0.upto(@height) do |j|
        random_int = rand.nextInt(2)
        @grid[i][j] = random_int
      end
    end
  end
 
  def can_move?(player, distance)
    case player.direction
    when 0 #left
      check_x = player.x - distance
      check_y = player.y
      if player.x != 0
        return !is_there?(check_x, check_y)
      else
        return false
      end
    when 2 #right
      check_x = player.x + distance
      check_y = player.y
      if player.x < grid.size
        return !is_there?(check_x, check_y)
      else
        return false
      end
    when 1 #up
      check_x = player.x
      check_y = player.y - distance
      if player.y > 0
        return !is_there?(check_x, check_y)
      else
        return false
      end
    when 3 #down
      check_x = player.x
      check_y = player.y + distance
      if player.y <= grid.size 
        return !is_there?(check_x, check_y)
      else
        return false
      end
    end
  end
 
  def is_there?(x,y)
    begin
      return grid[x][y] != 0
    rescue NoMethodError
      return true
    end
  end
 
end
 
class Block
  attr_accessor :block_size, :x, :y, :width, :height, :direction
 
  def initialize(x,y)
    @block_size = $app.block_size
    @x = x
    @y = y
    @width = @block_size
    @height = @block_size
    @direction = 0
  end
 
  def draw
    $app.fill(55,0,255)
    $app.rect(@x * @block_size, @y * @block_size, @width, @height)
  end
 
end
 
# figures out which block to highlight on grid when player can't move
class BlockedHandler
  def update(player, deadgrid)
    case player.direction
    when 0
      if deadgrid.grid[player.x - 1][player.y] == 1
        deadgrid.grid[player.x - 1][player.y] = 2;
      end
    when 1
      if deadgrid.grid[player.x][player.y - 1] == 1
        deadgrid.grid[player.x][player.y - 1] = 2;
      end
    when 2
      if deadgrid.grid[player.x + 1][player.y] == 1
        deadgrid.grid[player.x + 1][player.y] = 2;
      end
    when 3
      if deadgrid.grid[player.x][player.y + 1] == 1
        deadgrid.grid[player.x][player.y + 1] = 2;
      end
    end
  end
end
 
class MySketch < Processing::App
  include Observable
  attr_accessor :deadgrid, :player, :block_size
 
  def setup
    @block_size = 16
    @deadgrid = DeadGrid.new
    @player = Block.new 7,7
    puts @deadgrid
    @blocked_state = Array.new
    self.add_observer(BlockedHandler.new)
  end
 
  def draw
    self.update
    background 0
    self.draw_grid_lines
    @deadgrid.draw
    @player.draw
  end
 
  def update
    @blocked_state.each {|s| s = false}
  end
 
  def draw_grid_lines
    x,y = 0
    strokeWeight 1
    stroke(40)
 
    # for each block in deadgrid, draw lines
    0.upto(@deadgrid.width) do |i|
      x = i * @block_size
      # vertical line
      line(x, 0, x, $app.height)
 
      0.upto(@deadgrid.height) do |j|
        y = j * @block_size
        # horizontal line
        line(0, y, $app.width, y)
      end
    end
  end
 
  # 38up 39right 40down 37left
  def key_pressed
 
    case key_code
 
    when 32 # space
      puts 'Randomize.'
      @deadgrid.randomize
      # if grid spawns under player, remove it
      if (@deadgrid.grid[@player.x][@player.y] != 0)
        @deadgrid.grid[@player.x][@player.y] = 0
      end
 
    when 37 # left
      @player.direction = 0
      # check bounds, old java code uses OutOfBoundsException trick
      if player.x > 0
        if (@deadgrid.can_move?(@player, 1)) && @player.x > 0
          @player.x = @player.x - 1
        else
          changed
          notify_observers(@player, @deadgrid)
        end
      end
 
    when 39 # right
      @player.direction = 2
      # check bounds
      if player.x < @deadgrid.width
        if (@deadgrid.can_move?(@player, 1))
          @player.x = @player.x + 1
        else
          changed
          notify_observers(@player, @deadgrid)
        end
      end
 
    when 38 # up
      @player.direction = 1
      # check bounds
      if player.y > 0
        if (@deadgrid.can_move?(@player, 1))
          @player.y = @player.y - 1
        else
          changed
          notify_observers(@player, @deadgrid)
        end
      end
 
    when 40 # down
      @player.direction = 3
      if player.y < @deadgrid.height
        if (@deadgrid.can_move?(@player, 1))
          @player.y = @player.y + 1
        else
          changed
          notify_observers(@player, @deadgrid)
        end
      end
    end
 
  end
 
end
 
MySketch.new :title => "DeadGrid", :width => 256, :height => 256, :full_screen => false

I had watched Alicia Silverstone ‘hack’ a system recently and decided to make a mostly functional mock up like they do in the movies. I’m getting pretty comfortable in Processing and even though I really can’t stand Java anymore, I wanted to get this thing done and out of my head. I was just going to skip over this idea but inspiration just started flowing and I was idly solving it while getting coffee etc and I just had to get it on paper/code.

So here are the things it does:

• Switches between two GameState objects login and success
• Separate the view and the state (more on this)
• Has a super cool blinking cursor
• Handles shift, ctrl and meta (windows key) gracefully
• Handles backspace
• When you type muffin, it takes you to the super secret database … or whatever
• Goes fullscreen (which you can’t see in this shot)

This could get out of hand real quick. First, I reused a ton of code from Tatris. But in Tatris, the game state was tied to a view. I had pictured this project having different views. Like instead of a password prompt, maybe there’d be a keypad with a combo. Same state object (authorized vs unauthorized) so I didn’t need to recreate the wheel. The problem is, I don’t really have a controller so I’m kinda breaking MVC. But I didn’t want this thing to bloat up so I just went with it.

Next, UI layer. Not great. I’m drawing text boxes and blinking cursors. It’s really pretty messy. I’d be better off picking some UI components or something and using those. It’s tough. Even in games, there’s so many UI differences. Different scrollbars, different OK type buttons. What a usability nightmare. But I’m trying to create an old school terminal so all the weirdness is actually good.

Anyway, it was a fun little diversion. There’s more on the github page.

As I said in the TODO part of the Making Tetris post, a better way to do collision detection is to have the blocks on the field be bits. This is typically what I saw in academic assignments and student presentations. This is probably the right way to do it in other words. It’s more efficient and it’s more simple (KISS).

Even though this isn’t how I did it in the game, I still wanted to play around with the concept so I made a little prototype that demonstrates the basic gist. Instead of a piece, it’s a single block. Instead of a tetris grid of finished blocks, it’s random blocks. It’s really the same thing, it just looks and plays with different shapes.

So here it is. Space randomizes the grid and the arrow keys move. Play It!

Backstory

In my last job, I was a hourly contractor who had finished a project and was transitioning off to other things. By a chance of fortune, I had an opportunity to take some time off and do whatever. I had one week on, one week off for a period of over a month. I was extremely excited because I have a lot of hobbies that are bound by time and this was exactly what I wanted. Time to do whatever. I was curious to see whether I’d waste it or actually produce something. I’m happy to say that I did not waste the time I had and I produced the most intense gamedev learning experience I’ve ever had. By no means, am I claiming to be an expert. I’m just documenting a very large personal effort.

Ok, enough of all that personal crap. In reading game development community sites (like gamedev.net and idevgames.com), something that was a near cosmological constant is the post “OMG I wnt to make mmo, pls halp!”. It’s like a nuclear clock. Someone does some subscription revenue math, gets excited with dreams of being rich, tries to start something ridiculously complicated, gets stuck and runs to a forum looking for members or advice. On a forum like idevgames.com, there are exceptional members (who should be praised for their patience and humanity) that take the time to respond to this never-ending line of questioning. The most effective response is, “have you made tetris yet?”. Usually the person has not made a simple game and I doubt that they end up doing so. However, eventually this idea sunk in and I realized: I do not want to make an MMO but I should make Tetris. Because someday I might want to make something more complicated (not an MMO). So let’s do this.

The Plan

Firstly, I had been doing Java at my job for a while now and am fairly comfortable with it. Outside of this, I had been messing around with a project called Processing which makes graphics and generative art really easy. I knew this was going to be complicated so instead of diving into code, I made a plan first. I started breaking down what Tetris is and mapped out classes and responsibility. This planning bit I’ve always been bad at and I spent maybe a day thinking and writing down like “what a tetris piece is” and what minimal features there should be. The gameplay and design is already done and this fact is a big step compared to coming up with something by yourself.

For sure, the lesson I learned is: “it’s just a plan”. You can change it as you go and eventually it’s best to throw it away after things are sufficiently started. As the code grew, the plan was put away; which is good because my plan wasn’t really all that special or well organized. I had some ideas about pieces to be written and what the hard parts were but honestly the best lesson I learned was “it’s just a plan”. You’re not going to pre-write and pre-solve all the problems.

Next was research and learning. I studied other processing games (like MonkeyPatrol by Joshua Minor) and white papers from university CS classes. I played Quinn (a mac OSX clone) a bit. I knew a few things to start with. For example, game objects should draw themselves. There are 7 piece types (which look similar to the letters: I L O J S Z T) and many things are similar between them so I planned for a base Piece class and named the pieces after the letters they looked like (IPiece, LPiece, etc). I collected some screenshots of existing games to use as inspiration.

Drawing a Piece

Ok, I had my plan and similar stuff done. Ok, where to start? I like to start from the top down. IE: from the interface backwards. So I start with a graphical mockup and then make the mockup actually function. So started out with drawing. First, I created a Block class. This is a single square with an x,y,height,width,color etc. It’s a component of a Piece. Before going any further. I have to explain that I intentionally did not do Tetris the easy way. The easy way is having a bitmap style grid of blocks and simply moving the bits down and around. Then you just represent the bitmap with graphics. I did not do it this way because I wanted an excuse to do sorta a “2d model” where the piece is constructed from a central point, rotated etc more like what someone would do with a 3d model in a modern game. This single decision made things extremely complicated for me but it also made it a more useful learning experience for when I want to do something like a platformer or a shooter because these game types use collision detection in a 2d/3d space similar to how I did it. So a Piece consists of Blocks with a model describing the shape of the Piece. For example, an LPiece looks like this:

1
2
34

And the IPiece looks like this:
1
2
3
4

And the OPiece looks like this:
12
34

So I created all the Pieces and eventually had a test app that looked like this:

Next, let’s move on to piece movement.

The person sprite (on that line there) is currently a placeholder. He paths over to wait for the elevator but I don’t have the “AI” done for him to wait.

This has lost a bit of traction since I’ve been cranking on the iPhone class.

Updated this a bit. Added sound, scanlines, mouse following, bird sprite thing. Made a few performance tweaks. It still runs a bit slow, it’s better under OpenGL but you can’t embed it in a web page. The code is from a while back and I just polished it a bit so the source is fugly, fugly, fugly. I like the tune though. The ableton live demo has turned into a musical idea notebook and a short idea is all I seem to grind on.

The music is original (no samples).

View it here.

Download here – Mac, if you want to run it fullscreen.

Car called, doors open.

Some shots from a work in progress. Elevator simulator. People are going to get on and off and ride the cars down. It’s an exercise in 3d, queuing, event detection (without using events) and a boat load of other stuff. It’s coming along nicely. The car motion is really convincing.

Anyway, check out the reading thing here.

So the magic triangle again. It seems it has endless uses. I started trying to draw one programmatically. But my trig skills are lacking and I needed to create a test program. My math didn’t work out that great so I asked yahoo answers. Someone named Mathmom28 answered my question perfectly and the above sheet of paper shows the end result of her answer. It’s a bit disheartening to be relying on a homework forum for answers from “Mathmom28″ but I don’t think I’m going to pass judgement on my superiors. Suddenly I feel like I’m in high school again.

The magic to this madness was a formula she posted which is something I’ve since long-forgotten: the point-slope form of a line. A line 90º perpendicular to another one is it’s negative reciprocal. In other words, y = 3x/5y at 90º is y=-5y/3x. Once I got that, it was cake to finish something that’s pretty polished.

Try out Triangle Building. The instructions are at the bottom of the screen.

At lunch I was thinking about how I’d trace a square. Suddenly, it seemed rather difficult. I had to break out trig (again) and draw it out a few times. The hard part is when it flips. My math is a bit off and the distance calc isn’t right quite yet.

Check it out here: square trace