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.

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.

I did see a ton of threads created though. You can see below out of Activity Monitor. Each of the boxes displayed is a thread that draws itself. They all maintain elapsed which might be a design flaw. I couldn’t figure out a way to sync the drawing to all the threads running by themselves.

Animation is done with timeElapsed in mind. That’s so it runs about the same on fast and slow computers.

Hit the link here to check it out: BoomThreads

UPDATE: I was thinking about this and this is not actually accomplishing any threaded performance gains. It sequentially calls draw which doesn’t thread the drawing itself. I need to take out the random waits and have it look like this. Right now, there is artifical randomness (which is why all the boxes move at different speeds). I’ll update this soon if drawing can be threaded.

Sometimes, I’ve wondered if the patterns I see in some subject translate (either by divine will or mathematics) into other subjects. For example, if the 80/20 rule applies in software, does it apply to business or biology or anything else? The author covers these kinds of things in a much more journalistic approach than my everyday speculation and casual daydreaming could. It was reinforcing in a way.

Towards the end of the book, the author has a diagram of a three-point triangle. He relates the node map to society and members of society as connectors and hubs. The chapter covered topics like infection and how certain hub-people will transmit disease faster than others. It’s a bit more complicated than how I’m summarizing but the diagram caught my attention none-the-less. The author started with a node and then added nodes recursively (whether he knew it or not). So I fired up the processing.org program and tried to draw what he had made but make it configurable with depth. Here’s the result, was fun.

The depth goes 1,2,4,8. After that it becomes a white mess.

int scale = 100;  // size of initial triangle
int w = 500;
int h = 500;

void setup()
{

  background(40);
  size(w,h);
  noStroke();
  smooth();
  noLoop();
}

void draw()
{
  drawHorseshit(w/2, h/2, 9, scale);
}

class tri {
  int ax;
  int ay;
  int bx;
  int by;
  int cx;
  int cy;
}

void drawHorseshit(int x, int y, int depth, int s)
{
  fill(140);
  stroke(255);

  stroke(255,5);
  line(0,y,w,y);  //horizontal line
  line(x,0,x,h);  //vertical line
  stroke(255);

  // interior lines
  tri outline = new tri();

  //center
  ellipse(x, y, s/4, s/4);

  //top
  ellipse(x, y-s, s/8, s/8);
  outline.ax = x;
  outline.ay = y-s;

  //right
  float ra = s * sin(60);
  float rb = s * cos(60);
  ellipse( (x-rb), (y-ra), s/8, s/8);
  outline.bx = (int)(x-rb);
  outline.by = (int)(y-ra);

  //left
  float la = s * sin(60);
  float lb = s * cos(60);
  ellipse( (x+lb), (y-la), s/8, s/8);
  outline.cx = (int)(x+lb);
  outline.cy = (int)(y-la);

  stroke(255,50);
  line(outline.ax, outline.ay, x,y);
  line(outline.bx, outline.by, x,y);
  line(outline.cx, outline.cy, x,y);
  stroke(255);

  if(depth > 1) {
    depth--;
    s = s/2;
    drawHorseshit(outline.ax, outline.ay, depth, s);
    drawHorseshit(outline.bx, outline.by, depth, s);
    drawHorseshit(outline.cx, outline.cy, depth, s);
  }

}

My goal was to create the curves above. I knew if I could draw it then I could move a box or game object along that path. It took me about two weeks of casual time and many math questions posted to yahoo answers.

The problem is, implementing a math formula in C++. It’s just not as pretty as the equation and any algebra tricks are hard to express in code. Not to mention remembering algebra period. ?

Eventually, I ended up with this. I specified the starting point, the ending point and how tall I want the curve. A series of horrible equations builds the rest into a vector of x,y point structs. There’s an LOD thing too that says how pretty the curve should be.

Of course, it’s pixilated and kinda ugly. I tried anti-aliasing it but it doesn’t look much better. Also, I might have some math issues because in some places there seems to be small humps. I might be running into precision problems again. ?

Overall, I’m pretty exhausted. I don’t know what my next project will be, I don’t know if I want to make more of a game that’s interactive instead of these little graphics tests.

Also, C++ is pretty ugly imo. It’s used everywhere, I understand but I might pick up an actionscript book and see how much of this graphics stuff could be wrapped up in flash. I bet you can do some cool low-level drawing in flash; and then it’d be more ‘portable’ than an OSX app.

Anyway … it’s a thing of goddamn beauty for now. Except the code, which is ugly, untidy and probably doesn’t compile by itself. I’ll update it so it’s stand-alone.