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