8bitrocket.com
30Sep/080

A Comprehensive List Of Documentaries/TV/Shows/Movies About Video Game and Computer History

If you know me, you know that I love a good movie or tv show that covers one of my favorite subjects, especially if it is non-fiction. However, the selection of these types of movies and tv programs that cover the world of video game and computer history has never been very expansive. Sure, crappy movies based on video games are plentiful, but not films in which you might actually learn something useful about the subject. However, there are some good titles to find (and few to avoid). Below is a list we have compiled of everything that either exists today, did exist at some point, or one day will exist.

(Note: A couple Cambridge Educational Films were removed from this list because they are too expensive, too short, and are geared towards the education market only).

Our top picks are in red.

  • Classic Computer Films (1956-1965): A set of of classic films about computers. A Computer propaganda film from 1965, an animated cartoon made by IBM for the 1958 World's Fair, and a pure Cold War piece about computers and the role protecting freedom. Cheap and interesting and now on DVD. Link
  • Hackers: Wizards Of The Electronic Age (1986): This short doc (26 minutes) was one of the first to cover the "hackers" and computer pioneers of the personal computer era. This one is short but fascinating as it captures some of these people long before the impact of their work would effect the general populace. Available on DVD. Link
  • Triumph Of The Nerds (1996): Bob Cringley's classic documentary about the "winners" of the personal computer revolution, based on his book Accidental Empires. While Cringley fails to note the significance of the 8-bit computers (Atari, Commodore) and the home market, the doc is still indispensable for the clarity it brings to the story of Bill Gates and the rise of Microsoft. It is nearly 3 hours long and available on DVD. Link
  • Stella At 20 (1997): A video documentary taped at a reunion of Atari staff on the 20th birthday of the VCS. Features many rare interviews with Atari game designers and programmers. Part II exists, but it is now out-of-print. Link
  • Nerds 2.0.1:A Brief History Of The Internet (1998) : A sequel (of sorts) to 1996's Triumph Of The Nerds (also from PBS), this doc covers the creation of the internet and how it was built into the age of the World Wide Web. A Good doc, but maybe created a bit too soon as the crash was looming a couple years down the line. Link
  • Pirates Of Silicon Valley (1999): Fictionalized account of the creation of Apple Computer and Microsoft. Mostly a disaster, but maybe worth a look just see Anthony Michael Hall play Bill Gates. Link
  • Modern Marvels: Video Games - Behind The Fun(2000) : Modern Marvels is a good show, and this episode is no exception. It's a bit old these days, but still worth a look. However the price may be too high compared to some of the other stuff on this list. Back in 2000, Game Critics liked it very much. Link
  • Takedown (2000): An insipid fictionalized account of Kevin Mitnick's arrest for computer crimes. I won't say whether or not I believe Mitnick was guilty of anything, but I will say that as a movie with a mostly fictional story, this thing is guilty of sucking big time. Link
  • The X Factor: Inside Microsoft's Xbox: (2003) An episode of Discovery Channel's "On The Inside" series. Includes many exclusive scenes from inside Microsoft. This seems to no longer be available. Link
  • Hackers: Outlaws And Angels (2002): A Discovery Channel special no longer available save for a very expensive copy here. Still, this is worth trying to find on TV if possible, as it is one of the few shows to try to tackle this subject.
  • G4: Game Makers (2002-2004): A flawed (mostly because of the short length of each episode) but ambitious series of short docs that focused on games, and game developers from the classic era to present day. G4 still runs this show on their network. Link
  • In The Realm Of The Hackers:(2003) Fictionalized account of 80's Australian hackers and how they invaded some of the world's most sensitive (but not the most secure) computer systems. http://www.imdb.com/title/tt1199631/
  • Once Upon Atari (2003) : Howard Scott Warshaw (Atari VCS programmer of Yar's Revenge among other (E.T.)games) produced this 4 part series about his time working for Atari in the early 80's. Filled with interviews of Atari staff and insider info, this is a must for any student of video game history or fan of Atari. It's available on DVD now. Link
  • Revolution OS:(2003). An 85 minute documentary that covers open source software. Interesting if you are into that kind of thing. Link
  • Video Game Invasion : (2004) A very good doc from GSN network on video game history. Narrated by Tony Hawk. Link
  • The Video Game Revolution: (2004)A good overview of video game history by Greg Palmer that had made it's run on most PBS stations.The tone is "light-hearted" so if you are looking for a an overly serious and academic study you might need to look else where.This one is available on DVD and the the site says the DVD has more footage than the show that aired. Link
  • Inside Nintendo (2004): BBC documentary from the Outrageous Fortunes series. A very critical look at Nintendo. This one seems to have disappeared off the face of the planet. It's no longer available from Google video and the links to the BBC site for it do not work any longer. Hmm... (GameSpot story link)
  • BBS The Documentary: (2005) 5.5 hour documentary about the world of computer Bulletin Board Systems. Dozens of interviews, video and photos of major players in the world of the BBS. If you had a computer in the late 70's through the early 90's you'll know what this one is all about. Currently available on DVD. Link
  • Modern Marvels: The Creation Of The Computer (2005):Follows computer history from the 19th to the 21st centuries. A good overview of the subject. Link
  • 8-Bit:(2006) Bills itself as a documentary about art and video games. This one is fully steeped in the world of 8-bit era (kind of like 8bitrocket.com).However, instead of covering things from corporate angle, it instead looks at the cultural impact of 8-bit on people and players. DIY, altered games, demos, chip tune music, etc. Here is great quote from the makers about their film:"8 BIT brings a global perspective on the new artistic approaches of the DIY generation which grew up playing Atari and Commodore 64." . This is not currently available, but they have a nice web site dedicated to it here: Link
  • Chasing Ghosts : (2006) This documentary had been making the rounds at film festivals but has yet to see a national or DVD release. This movie covers some of the same ground as King Of Kong, but it appears to be more of an overview than a character study. We here at 8bitrocket.com are awaiting any word of its release. Link
  • Rise Of The Video Game: (2007) A multi-part, comprehensive documentary on video games from The Discovery Channel. The tone is much more serious than The Video Game Revolution. (below) This is not available on DVD (yet). Link
  • King Of Kong :(2007) The "King" if you will of all video game documentaries. If you have not seen this one, then you need to get it and watch it as soon as possible. Word has come-out that some of the events depicted were time-compressed, and manipulated, etc. However the overall affect of the movie is not altered by any of this. As a study in obsession and of people protecting their own territory, the movie works brilliantly. Link
  • Playing To Win: Inside The Video Game Industry: (2008) (CNBC). The most recent doc on this list. It covers less history and more of the business side and controversy of modern video games. It's short at 42 minutes, but DVD is available and it's the freshest item on this list (from a release date stand point). Link
  • Get Lamp (In Development): An in-depth documentary about adventures games that is being developed by the maker of BBS The documentary. The web site shows interviews from nearly ever personality even remotely connected to the adventure game genre. Hopefully this will be out in 2008. Link
  • "King Of Kong" feature film adaptation (In Development):A feature film version of the events depicted in King Of Kong. If done right, this could be great, but seeing how Hollywood handled the feature version of Dogtown and Z-Boys, don't hold your breathe for anything worth seeing. Link
  • Atari Movie (In Development):Nolan Bushnell centered movie about Atari announced in June of 2008 with Leonardo DeCaprio attached to play Bushnell. IMHO, 50/50 chance of being developed and released. Link
  • Eniac Programmers (In Development): An in development movie about some of the first computer programmers (mostly women) who worked on the Eniac computer during WWII and the beginning of the Cold War. This one could be fascinating if handled correctly. Link

By the way, if we have missed something, please tell us so we can add it to our list.

Filed under: Atari Nerd No Comments
27Sep/080

Tutorial: N-way tile-based blit fine scrolling in AS3 (part 3)

Tutorial: N-way tile-based blit fine scrolling in AS3 (part 3)

This is a long tutorial, so it has been split into 3 parts:

In this tutorial we will discuss the theory and practice behind 360 degree n-way blit fine scrolling in AS3. What does that mean? N-way scrolling is a means by which you can scroll the screen in any direction based on the angle the main character of the game is facing. Part 3 demonstrates 4-way and 8-way techniques and provide some auxiliary methods and functions that I have used in creating these demos.

Part 1 explains the concepts of N-way blit scrolling
Part 2 adds a car and and let you drive it around the screen
Part 3 (this) demonstrates 4-way and 8-way techniques and provide some auxiliary methods and functions that I have used in creating these demos.

How to do a 4-way scroll with the same concept.
The only thing that changes for for a 4-way scrolling world is how we handle key presses and translate them into carDX and carDY values. First, we need to change what happens when the player pressed the up, down, left and right keys AND we need to change how the viewXOffset and viewYOffset are update to deal with the new key pressed. That is basically all we need to do.

[cc lang="javascript" width="550"]
private function checkKeys():void {

if (aKeyPress[38]){
trace("up pressed");

carRotation=-90;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[40]){
trace("down pressed");

carRotation=90;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[37]){
trace("left pressed");

carRotation=-180
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[39]){
trace("right pressed");

carRotation=0;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}

}

[/cc]

In this method, we change the carRotation to a pre-defined direction and then adjust the car speed. This will not be an accurate model for acceleration because as soon as you accelerate to the carMaxSpeed, there is no way to slow down, but it's just a demo. In a full game, I would store the last direction pressed and if it is not the same as the new direction, I would start the carSpeed back at 0.

Here is an example of 4-way movement running:

8-way scrolling example

8-way scrolling is not that much different that 4-way, except you will need to find some suitable input keys. In this example we will use the

QWE
ASD
ZXC
keys do all of the work. We will use the "S" to stop the car in this example.

Here are the changes needed to the checkKey() method:

[cc lang="javascript" width="550"]
private function checkKeys():void {

if (aKeyPress[81]){
trace("Q pressed");

carRotation=-135;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[87]){
trace("W pressed");

carRotation=-90;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[69]){
trace("E pressed");

carRotation=-45
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[65]){
trace("A pressed");
carRotation=-180;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}

if (aKeyPress[83]){
trace("S pressed");

carSpeed=0;

}
if (aKeyPress[68]){
trace("D pressed");
carRotation=-0;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}

if (aKeyPress[90]){
trace("Z pressed");
carRotation=135;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}

if (aKeyPress[88]){
trace("X pressed");
carRotation=90;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}

if (aKeyPress[67]){
trace("C pressed");
carRotation=45;
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
}

[/cc]

This is a little ugly, and can probably be handled in a much cleaner manner, but for demonstration purposes, I just want to show how easy it is to modify the scrolling engine to work with a variety of game types. Here is this example running:

The rest of the code

That's it for the explanation and the examples. What follows are some of the methods in the code that I use to tie the whole package together.
You certainly do not have to use these, and I only present them to paint a complete story. I would much rather you took the code above, looked at the examples and created your own engine.

 

run Game()
This function is called via a timer and is the main loop. This blog entry explains exactly what the timer does and how it works. It is optimized to display at consistent frame rate across browsers and other flash player mediums,
[cc lang="javascript" width="550"]

private function runGame(e:TimerEvent) {
//trace("running game");
_beforeTime = getTimer();
_overSleepTime = (_beforeTime - _afterTime) - _sleepTime;

checkKeys();
updatePlayer();
//checkCollisions();
canvasBD.lock();
drawBackground();
drawView();
drawPlayer();
canvasBD.unlock();

_afterTime = getTimer();
_timeDiff = _afterTime - _beforeTime;
_sleepTime = (_period - _timeDiff) - _overSleepTime;
if (_sleepTime <= 0) {
_excess -= _sleepTime
_sleepTime = 2;
}
gameTimer.reset();
gameTimer.delay = _sleepTime;
gameTimer.start();

while (_excess > _period) {
checkKeys();
updatePlayer();
checkCollisions();
_excess -= _period;
}

//frameTimer.countFrames();
//frameTimer.render();
e.updateAfterEvent();
}

[/cc]

setUpWorld()
This function takes the xml map data and puts it into the aWorld 2d array.
[cc lang="javascript" width="550"]

private function setupWorld():void {

//parse xmlMapData and create aWorld array
for (var rowCtr:int=0;rowCtr&kt;worldRows;rowCtr++) {
var tempArray:Array=new Array();
for (var colCtr:int=0;colCtr tempArray.push(XMLLevelData.tilerow[rowCtr].tilecol[colCtr])
}
aWorld.push(tempArray);
}

//trace("row0,col0=" + aWorld[0][0]);
}

[/cc]

init()
Init simply set's everything up and is run one time. I have code to show the mPanel on the screen in this, which is simply a MovieClip in the library that is added to the display list and shows the offsets and current tile that is the upper left-hand corner of the window. It is not needed for your game engine.

[cc lang="javascript" width="550"]
private function init():void {

viewWidth=240;
viewHeight=320;
mapTileWidth=16;
mapTileHeight=16;
worldCols=100;
worldRows=100;
worldWidth=worldCols*mapTileWidth;
worldHeight=worldRows*mapTileHeight;
viewCols=viewWidth/mapTileWidth;
viewRows=viewHeight/mapTileHeight;
viewXOffset=787;
viewYOffset=1249;

tileRect=new Rectangle(0,0,mapTileWidth,mapTileHeight);
tilePoint=new Point(0,0);

trace("viewCols=" + viewCols);
trace("viewRows=" + viewRows);

trace("setup map data");
setupMapData();
setupWorld();

trace("init and canvas");
canvasBD=new BitmapData(viewWidth,viewHeight,false,0x000000);
//canvasBD=new BitmapData(viewWidth+2*mapTileWidth,viewHeight+2*mapTileHeight,false,0x000000);
trace("init background");
backgroundBD = new BitmapData(viewWidth,viewHeight,false,0x000000);
backgroundRect=new Rectangle(0,0,viewWidth,viewHeight);
backgroundPoint = new Point(0,0);
trace("init buffer");
//bufferBD=new BitmapData(viewWidth+2*mapTileWidth,viewHeight+2*mapTileHeight,false,0x000000);
bufferBD=new BitmapData(viewWidth+mapTileWidth,viewHeight+mapTileHeight,false,0x000000);
bufferRect=new Rectangle(0,0,viewWidth,viewHeight);
bufferPoint=new Point(0,0);
trace("init 16x16 sprites");
sprites16x16_width=160;
sprites16x16_height=160;
sprites16x16=new sprites16x16_png(sprites16x16_width,sprites16x16_height);
sprites16x16_perRow=sprites16x16_width/mapTileWidth;

//car
carPNG=new car_png(31,21)
carSprite=new Sprite();
carBitmap=new Bitmap(carPNG);
carBitmap.x=-15.5;
carBitmap.y=-10.5;
carSprite.addChild(carBitmap);
carSprite.x=110;
carSprite.y=145;
carRotation=-90;
carTurnSpeed=.5;
carMaxSpeed=5;
carAcceleration=.02;
carDeceleration=.03;

//canvasBitmap
canvasBitmap=new Bitmap(canvasBD);
addChild(canvasBitmap);
addChild(carSprite);

//message panel
mPanel=new messagePanel();
mPanel.x=50;
mPanel.y=50;
addChild(mPanel);

gameTimer=new Timer(_period,1); //changed in part 3 from 50
gameTimer.addEventListener(TimerEvent.TIMER, runGame);
gameTimer.start();

//key listeners
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
stage.addEventListener(KeyboardEvent.KEY_UP,keyUpListener);
}

[/cc]

The variable definitions. This will give you an idea of how to set up all of the variables in the demo.

[cc lang="javascript" width="550"]

var mapTileWidth:int;
var mapTileHeight:int;

var playerObj:Object=new Object();
var canvasBD:BitmapData;
var backgroundBD:BitmapData;
var backgroundRect:Rectangle;
var backgroundPoint:Point;

//level xml
var XMLLevelData:XML;

//world
var aWorld:Array=new Array();
var worldCols:int;
var worldRows:int;
var worldTileWidth:int;
var worldTileHeight:int;
var worldWidth:int;
var worldHeight:int;

//the buffer is 2 tiles longer and higher than he view
//well first copy all of the tiles to the buffer
//then copy just the portion we need to the view
var bufferBD:BitmapData;
var bufferWidth:int;
var bufferHeight:int;
var bufferRect:Rectangle;
var bufferPoint:Point;

//view
var viewWidth:int;
var viewHeight:int;
var viewCols:int;
var viewRows:int;
var viewXOffset:Number;
var viewYOffset:Number;
//for drawing viewAreaTiles
var tileRect:Rectangle;
var tilePoint:Point;

//sprites16x16
var sprites16x16_width:int;
var sprites16x16_height:int;
var sprites16x16:BitmapData;
var sprites16x16_perRow:int;

//car stuff
var carPNG:BitmapData;
var carBitmap:Bitmap;
var carSprite:Sprite;
var carSpeed:Number=0;
var carAcceleration:Number=0;
var carDeceleration:Number=0;
var carMaxSpeed:Number=0;
var carRotation:Number=0;
var carDX:Number=0;
var carDY:Number=0;
var carTurnSpeed:Number=0;

//canvasBitmap
var canvasBitmap:Bitmap;

//message panel
var mPanel:MovieClip;

//Game Timer
public static const FRAME_RATE:int = 40;
private var _period:Number = 1000 / FRAME_RATE;
private var _beforeTime:int = 0;
private var _afterTime:int = 0;
private var _timeDiff:int = 0;
private var _sleepTime:int = 0;
private var _overSleepTime:int = 0;
private var _excess:int = 0;
private var gameTimer:Timer;

//keyboard input
var aKeyPress:Array=[];

[/cc]

With this code, you have 99% of what you need to re-create all three of the presented scrollers from scratch. The only thing left for you to do is create your own constructor for your class file. I have only left out one method, called setUpMapData(), because it simply is a giant embedded xml file that is placed in the XMLLevelData variable. You may not what to set up your map data this way, so you are free to fill the aWorld array with 2-d map data in any manner you choose.

That's it. please email us @ info[at]8bitrocket[dot]com or leave a comment below if you are having any trouble, or want to provide improvements to the code or examples.

Filed under: Tutorials No Comments
27Sep/080

Tutorial: N-way tile-based blit fine scrolling in AS3 (part 2)

Tutorial: N-way tile-based blit fine scrolling in AS3 (part 2)

In this tutorial we will discuss the theory and practice behind 360 degree n-way blit fine scrolling in AS3. What does that mean? N-way scrolling is a means by which you can scroll the screen in any direction based on the angle the main character of the game is facing.  Part 2 covers adding the car to the screen and driving it around the world.

This is a long tutorial, so it has been split into 3 parts:
Part 1 explains the concepts of N-way blit scrolling
Part 2 (this) adds a car and and let you drive it around the screen
Part 3 demonstrates 4-way and 8-way techniques and provide some auxiliary methods and functions that i have used in creating these demos.

Now, how do we move our car?
Our car has also been modeled after the yellow Volkswagen bug from the Super Bug classic arcade game: it has an export name of car_png.

There are many ways to place a car object on the screen. In most cases, if I feel that I am going to have 100's of independent objects moving on the screen, I will go to the trouble of blitting EVERY object to ensure I can keep a constant frame rate. There is no need to do that with this demo, or even a finalized game based on this demo as there are very few moving objects. In this instance, why not use the built in Sprite class that AS3 provides? It will offer us built in rotation and the ability to attach Bitmap object directly to its display list. In any case, it is a speedy way to prototype this engine. If the game started to lag down the line, the car sprite could be swapped out for a blitted sprite.

In the init() function, I set up the car this way: note that I have not created an object to hold all of the car data. In a final game I would probably create a Car class that extended Sprite to do this. It is not needed in this example.

[cc lang="javascript" width="550"]
//car
carPNG=new car_png(31,21)
carSprite=new Sprite();
carBitmap=new Bitmap(carPNG);
carBitmap.x=-15.5;
carBitmap.y=-10.5;
carSprite.addChild(carBitmap);
carSprite.x=110;
carSprite.y=145;
carRotation=-90;
carTurnSpeed=.5;
carMaxSpeed=5;
carAcceleration=.02;
carDeceleration=.03; addChild(carSprite); addChild(carSprite); [/cc]
[/cc]
The car surface is basically a just a 31x21 png that represents the car pointing to the right. We do that because that angle corresponds to the 0 angle that Flash uses for Display Objects. We need to store the car image in a Bitmap object and place it so its center is at .5* width x and .5* height y (-15.5x, -10.5y). We then attach it to the Sprite's display list and place the carSprite roughly in the center of out 240x320 output window (110x,145y).

We set carRotation to -90 to have it start pointing up the screen. The carTurnSpeed is how much to rotate the car in the left or right direction when the arrows keys are hit by the user. We set a max of 5 on our carSpeed. The carSpeed will be increased by our carAcceleration every time the up arrow is pressed and by the carDeceleration when the down arrow is pressed.

Finally, we add out carSprite to the main displayList. (this has to happen AFTER the canvasBD has been added).

Checking key presses
On every frame tick, we will need to check to see which of the arrow keys are still being held down by the user (if any).

In out init() we will need to add these event listeners:
[cc lang="javascript" width="550"]
//key listeners
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
stage.addEventListener(KeyboardEvent.KEY_UP,keyUpListener);
[/cc]

We also need to add in these event methods to correspond to the events:

[cc lang="javascript" width="550"]
private function keyDownListener(e:KeyboardEvent) {

//trace("down e.keyCode=" + e.keyCode);

aKeyPress[e.keyCode]=true;

}

private function keyUpListener(e:KeyboardEvent) {

//trace("up e.keyCode=" + e.keyCode);

aKeyPress[e.keyCode]=false;

}
[/cc]
In our main loop, we will have to call a checkKeys() method every frame tick:
[cc lang="javascript" width="550"]
if (aKeyPress[38]){
trace("up pressed");
carSpeed+=carAcceleration;
if (carSpeed >carMaxSpeed) carSpeed=carMaxSpeed;

}
if (aKeyPress[40]){
trace("down pressed");
carSpeed-=carDeceleration;
if (carSpeed <-carMaxSpeed) carSpeed=-carMaxSpeed;

}
if (aKeyPress[37]){
trace("left pressed");

carRotation-=(carSpeed+.1)*carTurnSpeed;

}
if (aKeyPress[39]){
trace("right pressed");

carRotation+=(carSpeed+.1)*carTurnSpeed;

}

[/cc]

If the up key is pressed we add the carAcceleration to the carSpeed and make sure it doesn't go over our carMaxSpeed. We do the same with the deceleration and 0, For the left and right keys, we update the carRotation value by the carTurnSpeed, but also add in the current speed of the car (plus a little extra). This, according to Gary Rosenzweig will help keep the game from being too frustrating. I used Gary's car physics model because his theory and my theory on car movement are very close, but his is more fun in actual game play. I would usually think that the car would not be able to turn unless the speed is greater than 0, but both Gary, and the original Super Bug programmers seem to think it is ok, and maybe even makes the game less frustrating to play.

The last method we need is the updatePlayer() method. This one is called every frame tick and is used to keep the background moving and the player rotated in the right direction. It also checks for collisions with the bounds of the world.
[cc lang="javascript" width="550"]
carSprite.rotation=carRotation;
var carRadians:Number=(carRotation/360)*(2.0*Math.PI);
carDX=Math.cos(carRadians)*carSpeed;
carDY=Math.sin(carRadians)*carSpeed;

viewXOffset+=carDX;
viewYOffset+=carDY;

if (viewXOffset <0) {
viewXOffset=0;
}else if (viewXOffset > (worldWidth-viewWidth)-1) {
viewXOffset = (worldWidth - viewWidth)-1;
trace("hit end of world width");
}

if (viewYOffset <0) {
viewYOffset=0;
}else if (viewYOffset > (worldHeight-viewHeight)-1) {
viewYOffset = (worldHeight-viewHeight)-1;
trace("hit end of world height");
}

[/cc]
This code is used to find the new dx (a vector value that describes the direction and speed of the movement of the car in the x direction) and the dy value (a vector for the y direction). The carDX and carDYmust be turned into radians from the angle provided by the carRotation value. The viewXOffset, and viewYOffset of our widow copyPixels from our buffer are set to these carDX and carDY values.

The rest of the code keeps the window from trying to scroll passed out last tile on the x any y directions, and also keeps us from trying go passed the first tile in each direction. I have no code in here to let the carSprite move from the middle to the edge of the game world once max widow size has been reached.

Here is the example of this type of n-way scrolling working. Use the up and down to accelerate and decelerate. Use the left and right to steer.

Go on to Part 3

Filed under: Tutorials No Comments
27Sep/080

Tutorial: N-way tile-based blit fine scrolling in AS3 (part 1)

Tutorial: N-way tile-based blit fine scrolling in AS3 (part 1)

In this tutorial we will discuss the theory and practice behind 360 degree n-way blit fine scrolling in AS3. What does that mean? N-way scrolling is a means by which you can scroll the screen in any direction based on the angle the main character of the game is facing. In this example we will talk about simulating an overhead 2-d car driving game, but this technique can be used for any game where the player can rotate to an angle before walking / moving. In our example the car will stay in the middle of the screen and the background will scroll beneath it. This can easily be modified for 4 or 8 way scrolling game because while the movement in those types of games is not based on a rotated direction, the method by which we scroll the screen is identical. We will also examine an example of both 4 and 8-way scrolling.

This is a long tutorial, so it has been split into 3 parts:

Part 1 (this) explains the concepts of N-way blit scrolling

Part 2 adds a car and and let you drive it around the screen

Part 3 demonstrates 4-way and 8-way techniques and provide some auxiliary methods and functions that I have used in creating these demos.

This is an advanced tutorial. I need to cover a lot of ground very quickly, so if you need to know the basics of blitting or how to create a game timer loop, please consult these tutorials first:

The Basics of Tile Sheet Blitting

Creating an Optimized Game Timer Loop

What is Blit scrolling?

Blit scrolling is a method by which we take a large tile map and only show and update the portion that fits on the output window. This is NOT the same as storing the ENTIRE world as one large BitmapData object and then cutting out the portion we need for the window. While that is a viable method for creating a scrolling world, it limits the physical size of the world we can create. With tile based blit scrolling (sometimes called dynamic or just in time scrolling), our world size has virtually no limitations. We will actually store the entire world map as a 2d array (read from xml). Each element of our 100x100 array will simply be an integer that corresponds to a tile on our tile sheet. To be accurate, we actually only show what's in the output window, but will update a window buffer that is one tile size longer and taller than out output window. This "scroll buffer", as will refer to it, is used to fine scroll the game play window.

Why only theory and practice?

By this I mean that is is more useful to understand the concepts presented than to be simply force-fed a full set of application code to copy and paste. The process of scrolling a tile-based blit screen is very complicated, but not so complicated that a good developer can't follow the theory and create his own version. It is much more important for the advanced developer to understand the theory and see it demonstrated than to peer at my .fla and .as files. It will be showing most all of the necessary code, but it is more important that you understand the theory to apply to your own code if needed. If you simply want an .fla file to copy, then this tutorial is definitely not for you. The purpose of this tutorial is to teach you the skills you need to write your own scrolling engine. That being said, you are free to use of of the code provided in your own games, but please do not use the assets provided as the copyright remains with Atari.

The world v. the window, v. the buffer

The world refers to the entire map of tiles that the player can scroll over. The window is the current set of tiles that is viewable to the user. The buffer is one extra tile width and height around the entire world. We first draw to the buffer, then figure out how many pixels to scroll over in the buffer and then draw that portion to the output window. We are not talking code here yet, but when I say draw, and scroll, I am referring to the copyPixels method of the AS3 BitmapData class and the Rectangle and Point used for that operation.

Fine Scrolling

Fine scrolling gives us the ability to scroll the screen 1 pixel at a time in any direction. This is opposed to "tile scrolling" where the screen is scrolled up, down, left, or right by one entire tile at at time. Tile scrolling (or coarse scrolling) is a much easier method to accomplish as you need only know what tile to start with in the upper left-hand corner and then how many to show in the horizontal and vertical directions. When the screen is scrolled, we start painting tiles based on an x an y offset value. If the x offset is 1, then the screen is scrolled by 1 tile in the x direction, If the y offset is 2, then the screen is also scrolled in the y direction by 2 tiles. Since 0x,0y is the upper left hand region of the screen, the xoffset and yoffset can never be less than 0. When the user presses the up key, the yoffset is decremented by 1, when the users pressed the down key, the yoffset is incremented by 1. The same holds true for the x direction, with left decrementing and right incrementing by 1. The max we scroll to the right is the world width - the window width. The max we scroll down is the world height - the widow height.

This is an example of coarse tile scrolling. Use the arrow keys to move around the world. It scrolls on tile at a time. (make sure to click on the Flash window first).

As you can see, tile by tile scrolling is FAST, and it is suitable for many type of games (Bounderdash, Phantasie, etc). An overhead driving game is not one such game though. For that type of game, we will want to use Fine Scrolling.

With fine scrolling we use the exact same concept, but we scroll the screen 1 pixel at a time (as opposed to one tile at a time). The easiest fine scrolling method is the 4-way method. In this method, when the user presses up, down, left, or right, the xoffset and yoffset are still adjusted by 1 accordingly. The next thing we must do is figure out what tiles to draw to the window and the scroll buffer. Much like the 1 tile at a time movement approach, we can use very simple arithmetic to figure out what tile we need to start the draw from the world to the buffer. We will be doing something a little more complicated. We are going to scroll the screen based on the acceleration and turning of a car. This will allow ue to scroll the screen in N directions based on the angle of the car and some simple trigonometry. If you are interested in 4 or 8-way scrolling, all of the below concepts are applicable. At the end of this tutorial, I will show the modifications necessary to do 4 and 8-way scrolling over the same world.

How is it done?

First, we have this tile sheet in out library: has an export name of: sprites16x16_png

It has room for many 16x16 tiles, but we are only going to use a few for this example. These *might* look familiar to a few people because they were re-drawn by me to resemble the tiles in the obscure Atari/Kee Games classic, Super Bug.

We also have a set of xml data that defines out 100x100 tile world. It looks a little like this:

[cc lang="javascript" width="550"]

00000
...

[/cc]

The data for the world has 100 tilerow elements, each with 100 tilecol elements. They element values range from 0-5, corresponding to a tile in the tile sheet above.

This xml data is parsed and put into a 2d array called aWorld. (the parsing method example is at the end of this tutorial);

First, let's set up the world and give us a place to paint the screen.

Here is our starting info about the world. We will start with some variable definitions: The following code is in the init() function for my game.

[cc lang="javascript" width="550"]
mapTileHeight=16;
mapTileWidth=16; // the output window width and height in pixels
viewWidth=240;
viewHeight=320;
//our scrollable world in tile height and width
worldCols=100;
worldRows=100;
worldWidth=worldCols*mapTileWidth; //world width: 16*100=1600 pixels
worldHeight=worldRows*mapTileHeight; //world height: 16*100=1600 pixels
viewCols=viewWidth/mapTileWidth; // columns in view:240/16=15
viewRows=viewHeight/mapTileHeight; //rows in view: // 320/16 = 20

[/cc]

So, we have a world that is 1600x1600 and a window that is 240x320. We will need a canvas (our output window) to blit to that is 240x320, and a buffer that is 240+(tileWidth) and 320+(tileHeight). We only need to store a buffer of 1 tile width in each direction because that is all we will ever need to scroll over to fine scroll be 1 pixel in each direction. We should note that the speed of our player should never be > that the tileWidth or tileHeight.

In this case, the buffer will be 256 x 336. We also need one display object to place the canvas on the screen.

[cc lang="javascript" width="550"]
canvasBD=new BitmapData(viewWidth,viewHeight,false,0x000000);
bufferBD=new BitmapData(viewWidth+2*mapTileWidth,viewHeight+2*mapTileHeight,false,0x000000);
canvasBitmap=new Bitmap(canvasBD);
addChild(canvasBitmap);
[/cc]

I have decided to place the car at the start of my track, which is in the lower middle of the world. The starting xoffset and yoffset is:

[cc lang="javascript" width="550"]
viewXOffset=787;
viewYOffset=1249;
[/cc]

So, when we start running the application, we will need to first find what tile represents that starting position, then paint the buffer and finally paint the output screen.

The following code resides in a function that I call drawView() and it is called once per frame tick. You would place a call to this method in your main loop. I will give an example of a main loop later in this tutorial.

[cc lang="javascript" width="550"]
//calculate starting tile position

var tilex:int=int(viewXOffset/mapTileWidth);

var tiley:int=int(viewYOffset/mapTileHeight);

//tilex=int(787/16). tilex=49;

//tiley=int(1249/16). tiley=78;

//set up loop counters var rowCtr:int=0;

var colCtr:int=0;

//tile num is used to hold the index of the current tile on the tile sheet

var tileNum:int;
[/cc]

The next thing we do is loop through the tiles that make up the current screen + buffer and paint them to the bufferBD.

[cc lang="javascript" width="550"]
for (rowCtr=0;rowCtr<=viewRows;rowCtr++) {
for (colCtr=0;colCtr<=viewCols;colCtr++) {
tileNum=aWorld[rowCtr+tiley][colCtr+tilex];
tilePoint.x=colCtr*mapTileWidth;
tilePoint.y=rowCtr*mapTileHeight;
tileRect.x = int((tileNum % sprites16x16_perRow))*mapTileWidth;
tileRect.y = int((tileNum / sprites16x16_perRow))*mapTileHeight;
bufferBD.copyPixels(sprites16x16,tileRect,tilePoint);
}

}

[/cc]

We start by looping through the rows from 0 through 20 (or 21 rows including the 1 needed for the buffer). The inner loop marches through 0 to 15 (or 15 columns + 1 needed for the buffer).

We use standard tile math to pick the correct tile to paint from our tile sheet (sprites16x16) . We move the tilePoint to the appropriate location in the window to paint, and move the rect x and y to the correct starting location for the tile on the sprites16x16 tile sheet.

The bufferBD now is 21 rows by 16 columns, but we only need to paint 15x20. The next thing we need to do is find the exact portion of the buffer that needs to be painted to the canvasDB (our window)

[cc lang="javascript" width="550"]
bufferRect.x=viewXOffset % mapTileWidth;
bufferRect.y=viewYOffset % mapTileHeight;
canvasBD.copyPixels(bufferBD,bufferRect,bufferPoint);

[/cc]

Here, we first simply must calculate the starting x and y positions to copyPixels from the buffer. For this first frame in our example, it would be:

787 % 16 = 3x

1249 % 16 = 1y

So, the rectangle used to copy Pixels from the bufferBD to the canvasBD would start at 3,1 and would copy 240x320 pixels. It would place those a 0,0 on the canvasBD.

Go on to part 2

Filed under: Tutorials No Comments
27Sep/080

RuneScape, First Impressions

RuneScape, First Impressions

RuneScape is a free Massively Multi-player RPG that I started to play off of the AddictingGames home page today. This British produced, Java based game plays very well on my New iMac. Considered to be the most popular MMORPG in the world, this title has been around a LONG time, but I just have now begun to try it out. I don't have much time for non-stop gaming, so I am unsure how much I will be able to get into the game, but it has been interesting so far.

After creating my free account, and dressing my character as an Abel Xavier clone, I set off to learn the basic tutorial skills that are necessary to survive in the RuneScape world. These included chopping trees, lighting fires, collecting shrimp and cooking up a lovely meal. After about 15 minutes of doing that and watching others, I graduated to the next tutorial level, Making Bread! Anyway, I usually want my games to be filled with quick action, but this is more of a Sims in the old world rather than a hack and slash Phanstsie fest.  Once you progress in the game, there are battles and quests and all that cool zarjaz, but at the beginning, you have to learn the necessary skills to survive.

The graphics are very well done, but obviously, this Java-based engine is not going to look an like XBox 360 rendered 1080P game. It looks nice for what it is and the game is very deep and engrossing. Will I play it more? I don't know, as I only have short time intervals for game playing. There seem to be over 150K players online at any one time, so if I continue to play or not, this game is going to be a massive success.

According to Wikipedia, the original game was was released in 1998 as an isometric MUD by Andrew Gower . It was later converted into 3-D with his brother Paul while at Cambridge University. Currently, the game is hosted on 150 servers world-wide, with capacity to host 300,000 players simultaneously (2000 per server). For $5.95 a month, players can upgrade to a premium membership that is being constantly upgraded with features not available to free users. The free game is pretty fun too, you will have a couple ads on the page while you play, but it is more than worth it.

Visit www.runescape.com if you are interested in trying it out.

Filed under: Game Reviews No Comments
24Sep/080

Willy Higinbotham, “Video Game” Pioneer Speaks (sort of)

This was pretty cool. Yesterday I received an email from William Higinbotham's son, Billy.

For those who are not students of ancient video game history, Willy Higinbotham is credited with being one of the first people to create a game that used a screen and could be played interactively via an electronic device. (Can you tell that I'm trying to skirt a commonly used term here?). Higinbotham created Tennis For Two at Brookhaven National Laboratory in 1958. The game was built with analog parts using an oscilloscope for the display. The game was a huge it in the lab and with outsiders who lucky enough to see it.

Anyway, Billy Higenbotham wrote to tell me a couple things:

1. I spelled his dad's name wrong in my interview with Ralph Baer (it's Higinbotham not Higginbotham). Fixed.

2. To make sure that I knew that in the future I should refer to his dad's game as something other than a "video game". Here is what he said:

"People refer my father's game as a video game. Video is a term used in association with TVs raster display"

I know what Higinbotham might have meant.  He meant that Ralph Baer does not think there were any video games before his invention.  Baer does not in fact like anything prior to his own inventions to be called "video games".  In the same interview mentioned above, Baer tried to make the distinction between his games and Higenbotham's perfectly clear:

"Analog computers were indeed elegant devices. I used them as did many other radio and TV engineers in the fifties and sixties. They were great for modeling dynamic motion problems....but they cost on the order of $10,000 or much more. So forget analog computers as a means of playing home "video" games, except in the context of a demo in a lab environment where one or more analog computers were sitting around and one could temporarily borrow one for a "fun" ballistics demo (like Higinbotham's so-called tennis game)."

"So-Called"? According to John Anderson's article on the subject, it seems that the game was fairly sophisticated:

"The implementation was very much more sophisticated than the first 'Pong' games. It was the hit of the Brookhaven 'visitors' days' for two years running."

-John Anderson, Creative Computing Spring 1983

So why is Baer so "down" on Hignbotham's invention? Well, I suppose it was because Baer was (is) an inventor and as an inventor his livelihood (and that of his employers) came (comes) from patents. To protect his patent on Pong he had to make sure that Higenbotham's creation was never seen as a video game. If Higinbotham had in fact created a "video game" then Baer's patent might have been null because there would have been "prior art".  As I rec all, Atari tried to defend their Pong games with the Higinbotham argument.  In the70's it did not fly, but in the 21st century, knowing what is known now, it might have been more successful.

However, does this really take anything away from the Higenbotham's amazing invention? I don't think so. In truth, I sensed a bit of sadness in Billy Higenbotham's note. Almost as if he is on a quest to make sure his father is not forgotten, but at the same time not step on the toes of the "very vocal" (and sometimes very litigious) others who also try to occupy the space of "video game inventor." Higenbotham need not worry though, as his dad's place in history is firmly set. I was still touched though. , I find it very comforting to know that Willy Higenbotham has a dedicated son who travels through the internet, trying to separate fact from fiction while keeping his father's memory alive. We should all be so lucky.

22Sep/080

Grand Theft Auto:Intellivision

Following closely on Jeff's post last week about Minus World's Modern Atari Classics  comes this YouTube video of Grand Theft Auto Intellivision.  (Thanks to Intellivision Lives for heads-up on this one)

(Note: This one is NOT FOR THE KIDS)

Filed under: Atari Nerd No Comments
22Sep/080

Flash Game Development Inter-web mash up:September 22, 2008

Flash Game Development Inter-web mash up:September 22, 2008

The latest in Blog entries and articles that might interest Flash game developers. This week I decided to find search out some new sites (or ones I haven't covered in a while), as well as cover the usual suspects...

This time we cover some a new As3 Key class;AS3 Gotchas;Quad trees;A Zinc Browser; Blitting v. Sprites; Psychology for game developers; AS2 tile game theory; a bunch of games ( including 5 by deflogic), retro stuff and more.

Broken Button is a relatively new blog where JC has added some pretty cool content. This week he unveils his own Key class to replace the non-existant one in AS3. Also, his AS3 Gotchas includes some work-arounds for the non-existant XMLSend() method, as well as a list of other things missing or annoying about AS3.

The Fatal Exception Blog has some a slew of new entries on Zinc, including this Zinc Browser Example , as well as a slightly older entry about Quad Trees with a nice example.

The hatu.biz site has a very interesting 80% complete game up for you to test out. Called WhiFlash, you play a golem with a Flail, kicking some ass in a dungeon (that's my description, there is a much better on on the site). It's got the makings of a fun action rpg!

Over at Photon Storm, Rich as busied himself with some tests on Blitting v. Sprites and has some interesting findings. I also point you in the direction of my own findings that while not completely contradictory, paint a slightly prettier picture for the blitting crowd. Mine  mostly covered ways to Blit and Animate: basically replicating MovieClip functionality, while Rich has replicated Sprite capability (no timeline animation to try and replicate with a blit).  I will summarize because it is a LONG boring article that I wrote: I compared 5 different types of rendering with animation. The ones that used BitmapData were the best. The two best methods included individual sprites or a single blit canvas (done two different ways). Now, both of these use BitmapData to animate, it is just that the Sprite Method keeps an individual BitmapData object for each sprite frame of animation in an array and loops through them. All of the individual sprites are added to the display list, while the Blit canvas uses just one display object. The two different blit versions use either an array of BitmapData objects to animate from or blit directly from the tile sheet. At 100 - 1000 objects on the screen, the blit and the the individual sprite methods had the same basic frame rate, but at 5000-10000 objects, the blit version starts to outpace the the individual sprites with less memory used and a higher frame rate. Now, what does this all mean? Not much, you can choose to make games anyway that you want, but if you want to create a lot of particles and effects, you will probably find yourself with the need for 1000's of particles on the screen. But remember, The traditional GotoAndStop methods started to CRAWL at 500 objects and died at 1000. After reading Rich's post, I cannot figure out if he was using GotoAndStop or array of BitmapData for his fish. I can't see if the fish in Rich's example were animating through a series of frames, but that will definitely have an impact on performance. I certainly feel that Rich has a good point. I think the ease of Sprites, combined with the beauty of blitting an animation could be combined (as I did with my game RetroBlaster in AS2). Recently though, I have gone the entire Blitting route, and while I feel the game engines are very solid, I yearn for the ease of sprites...

Squize has added to his ever growing game development diary with a post about his latest for Gimme5.

Mr. Sun has added to his list of skills all game developers need with
Skills that All Game Developers Need Part 2: Psychology.

Sokay.net's Bryson has added a cool PaperVision 3d Game demo to his growing list of accomplishments.

Emanuele Feronato has added parts 3, 4, 5 and player theory to his AS2 Tile-based platform series.

FrozenHaddock has added part 2 of their Avoiding game series. Actually is it done by Michael James Williams.

Here at 8bitrocket Towers, we have added a few new things in the last week:

Podcast #6, and a discussion on Tile-Based BitmapData fine scrolling.

Some Cool Retro Gaming stuff from around the Interweb-o-sphere
Steve added a simple beautiful fake commercial for an Intellivision version of Grand Theft Auto.

Recycled Gaming always has a nice selection of good reads. They have decided to add a bunch of 2600 content with reviews of Breakout, Hero, and Pitfall.

Retro Thing has a cool article on the little known Commodore 65 machine.

Classicgaming.com has news on Portal for the 2600 and and C64.

Some Fresh Kill From Mochi (games that are keeping me from working on my own)
Dante's Inferno - Kick ass Robotron like Action. This one is going in the Retro Showcase, pronto.
Flat Land - another retro masterpiece, destined for our Retro Showcase
(since the other two games were by deflogic, I decide to play the rest of his games on Mochi)
Check out Elecktra and Replicator and Swarm for absolute Retro action!!!

Look for all five to be added to our Retro Showcase later this week.

 

As always, check out Flashgameblogs.com for your daily dose.

18Sep/080

Great"General"Gaming Blog

I've talked a bit about Edge-Online in the past, but today they proved again that they are one of the best "general" game sites on the interbaun.  This week they started a new feature  by Colin Campbell that collects the best links from the gaming world.   Today's best quote is about piracy, and only Campbell could crystalize my thoughts so succinctly in one sentence:

"Either you're the sort of cheap fuck who wants something for nothing, or you're not."

Perfect.  This blog is definitely on my a "once a day" list.

 

Filed under: Game Reviews No Comments
17Sep/080

Minus World's Atari modern Classics

I had this buried in the Mash-up yesterday, but it is so good that I felt the need to give it space of its own. Check out the Minus World array of modern games re-done with 2600 pixel art. ABSO-FRICKIN-LUTEY fantastic!

Filed under: Atari Nerd No Comments
This site is protected by Comment SPAM Wiper.