SQUARISM

Icon

addicted to pixels

Making Tetris

tatris_03

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:
tatris_block_test

Next, let’s move on to piece movement.

Read the rest of this entry »

Elevator Sim update

elevator_sim_2
Quick update about the elevator sim post. Currently the cars are animating fine. IE: you press 3 and car #1 goes to floor three, stops, opens the door and waits. If you press 1, the car closes the door, moves to floor 1 and opens the door. The building controller is aware of the care state as evidenced by the little labels you see.

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.

Parallax Clouds

paraclouds

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.

Stanford iPhone class on iTunes U

cs193p
Going through the CS193P Stanford iTunes U class as if I’m taking it. It was done in April but I’m going to use the assignment due dates as deadlines for May. If it’s due on April 9, then it’s due on May 9 for me. So far the content is good. The introductory stuff I got from the book&fail method but it’s nice hearing someone explain it.

Assignment 1B is a good API doc researching exercise.

Elevator Sim [wip]

Car idle:
elevator_sim_wip_1

Car called, doors open.
elevator_sim_wip_2

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.

Reading style tween test

tweentest
Using the tween library from megamu, I think I finally get how to use it. Going to use it for an elevator sim. Yes, I’m building an elevator. It just struck me while riding one. “I could make this.”

Anyway, check out the reading thing here.

OpenCV in Eclipse

I was getting a weird runtime error about native library something in Eclipse while messing around with OpenCV (using Processing.org).
!!! library OpenCV not found
Exception in thread "Animation Thread" java.lang.UnsatisfiedLinkError: capture

I found the answer was to configure native libraries in my project. This is something I’ve never done in Eclipse so I thought I’d post it in case someone googles this error message. First, I set up my project like the following. Notice that I created a folder named “native”. I moved the shared library files (.dll, .so, .jndilib) into this folder. I am on a mac but I moved the DLL files anyway.
opencv_eclipse_1

Then I went into my project properties and set the Native Library Location as this folder. Viola. The processing applet launches.
opencv_eclipse_2

Triangle Building

triangle_building_1
I got distracted while working on an actual game and started messing around with image recognition. I was greatly inspired by the LevelHead tech demo and thoroughly depressed by Julian Oliver’s talent. I started messing around with OpenCV and wanted to track rotation of objects. I figured out that a triangle would be the best way to track rotation because a right-triangle is unique when rotated 90º four times.

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.

triangle_building

Square Tracing

square_trace

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

Boom Threads

boomthreads_sshot
I was messing around with threaded drawing. I really don’t know how much of an advantage this gives. I needed to figure out a way to animate something on the side for performance gains. I think this is how I’d do it (not with 78 threads running).

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.
boomthreads_threads

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.

Archives