Tuesday, 30 July 2013

a java-script game, tech-spike

First of all, a special thanks to Ants the Java Monkey for pointing me to a most excellent
blog on the creation of a C64 classic game "Survivor" on http://www.schillmania.com
Go and have a read - it is very well written.

I will be taking a much more technical approach, and I am approaching the game more
from a technological point of view than a "faithful recreation" of something bygone.

I will not spend a lot of time on requirements gathering (typical programmer).  Assuming
this is already done, I will show you how a programmer implements such requirements.

MDA (Model Driven Architecture) is my design philosophy as an expert programmer.
Without too much fanfare, it basically boils down to:

1.  talk to the customer / gather your requirements (Business Analysis work)
2.  design your object model (object oriented data modelling)
3.  put your functions on top of this model (encapsulate behavior etc.)
4.  come up with a deployment plan
5.  deploy it, rinse and repeat till you get it right.

There is actually one more step which I personally like to do before any of this.
For peace of mind, and to build confidence.  Its what I call a "tech-spike" - it basically
means that before approaching the problem, I try and conceive all the things that might be
"difficult" technically, and solve them individually ahead of time.  Thus removing the potential roadblocks.

A game typically requires the following high level things;

i.   rending (animations, drawing)
ii.  double buffering to do the rendering smoothly
iii. user input
iv.  loading images
v.   loading other assets (like levels)
vi.  a game logic loop (doing something)
vii. sounds

We're going to keep it simple as possible.  And I will address each of these issues in turn as a tech-spike with a little sample to show you how it works.

So to finish off this post, lets take a quick look at the first item which might take a few posts, but is well worth understanding.

The game we're writing will be a 2d game.  3d is a little more difficult and still a little more shaky when it comes to html 5.  The mathematics is also a bit more difficult.

Drawing in java-script

I am terrible at graphics, and laying out interfaces etc.  There are some programmers that have the gift but that isn't me.  Games design and writing is a skill in its own right.  The last games development company I worked for had 20 graphic artists (3d artists, animators, 2d artists, art directors etc.)  If you want a professional looking game you need to mix your talents with theirs.

Html 5 introduces a new element called a canvas.  A canvas is basically a rectangular surface on your page where you can draw 2d (or 3d) objects.  2d objects typically consist of images, text, rectangles, circles, lines etc.

Lets take a look at a typical canvas inside an html page.

<html>
<body>
  <canvas id="gameCanvas" width="200" height="200" style="border:1px solid #000000;">
  </canvas>
</body>
</html>

This creates a canvas 200 pixels wide and 200 pixels high with a black border around it.  The canvas can be referred to as "gameCanvas" (its "id").

Java-script is an incredibly power language.  It might not be the fastest on the planet, but its got really good performance these days.  Couple that with hardware accelerated drawing (hidden from you), any java-script drawing you execute is going to be very fast on a modern machine.

One last thing on browsers.  Html 5 is new.  Some older browsers aren't good at either following standards or aren't that fast drawing (no hardware acceleration) or running java-script (badly implemented java-script engines).

My advice, stay away from anything less than Internet Explorer 9 (e.g. IE 8, 7, 6 are out).  Generally, the latest browsers are your best bet if you're a developer.  Think of it this way.  Games take a while to write, especially if you've got a lot of graphics and big plans for a story.  If it is going to take you a year to write (big titles take many years), you can plan ahead a little.  We typically developed against high end video cards in C++ / DirectX and made the assumption that what is high end now, will be average in a year or two.

Lets change the above example with some embedded java-script (java-script inside the html page).  This is not my preferred way of writing - I will show you a better way further down the road.  This is just to demonstrate the "tech-spike" of drawing.

<html>
<body>
  <canvas id="gameCanvas" width="200" height="200" style="border:1px solid #000000;">
  </canvas>

  <script language="javascript">
    // get the game canvas dom element
    var screenCanvas = document.getElementById("gameCanvas");
    // get the 2d version of the canvas of this object to draw into
    var screenContext = screenCanvas.getContext("2d");
    // set the current drawing (lines, text, points) colour to lightish grey
    screenContext.fillStyle = "#aaaaaa";
    // use a 12 pixel high Tahoma font
    screenContext.font = "12px Tahoma";
    // write some text from the top left corner 50 pixels across, and 50 pixels down
    screenContext.fillText( "Hello world!", 50, 50 );
  </script>

</body>
</html>

The output of this looks something like


In terms of a coordinate system, we're looking at


That's all we have time for tonight.  Next time we'll really dig deep into drawing in java-script.

No comments:

Post a Comment