Tires are one of those objects most modelers and texturers seem to have trouble with. So let’s look at how to model and texture this quickly.

The tools we need of course are your favorite modeling package (I prefer 3ds max for that so my explanations with tools will use that, but the principle is perfectly applicable to other tools), the edit poly tool, the UVW Map and Unwrap UV tool. So let’s get going:

Initial Setup and Modeling:

1. The first thing we build is a cylinder. Keep the resolution low, we can always mesh smooth later. Set is height segments to 1 and give it a 1 cap division and 16 corners.
   
2. Set it’s size to look like the dimensions of a tire, bets you grab yourself some references for that.
   
3. I now set up my face ID’s and make everything except the inner circle shape of my cap to ID 2. I do this because I will use a multi/sub-object texturing for this model later. It’s quicker at this stage to just grab your images and use them in max this way as it means I don’t have to bother with photoshop. If you like of course a decent texture can be built later on, but this if for rough and quick building.
   
4. Add an edit poly modifier and use the face select tool to scale the inner cap segments (that’s why you want to have a cap subdivision of the ends of your cylinder) upwards so its edge can define the border between rims and tire rubber.
   
5. Now use the inset and scale tools to build the inner shapes of the rim. If you use a reference, this should be quite easy.
   
6. When you are done, use the edge loop select on that outer subdivision of your cylinder and scale it up, this will make your tire more rounded looking.
   
7. We don’t have a good transition yet for the surface of our tire rubber to the side of the wheel. To fix this, again edge loop select the corner edge where cap meets side of cylinder and user the chamfer tool to break up this hard edge.
   
8. If you used your reference well then you have almost a finished tire shape on one side of the cylinder.
9. We want to work quick so lets apply a symmetry tool and mirror one side of the cylinder to the other side.
   
10. Voila the rough mesh is done and we will go on texturing and make any adjustments later.

Texturing:

1. For speed’s sake I just grabbed two images I liked from the web that will serve for now as my texture. We can adjust them later to look proper:
   
2. I go ahead and delete the bottom of my cylinder as we won’t need it at all (save yourself some trouble as well).
3. Next up I go back to my model and set up my UV’s. Channel 1 I use a planar projection, so select this surface ID and add your UVW Map onto it. For channel 2 I will use a cylindrical projection. Apply as usual buy selecting that ID and apply another UVW Map.
   
4. Next we want to ensure our UVs are not stretched so much. I generally add a little checkerboard material onto it to help me quickly. Let’s do that and then use the UVW Map settings to help get proper mapping. You want to make sure at this stage to not get any stretching as much as possible. You will get some stretching that is unavoidable at this stage but don’t worry, everything goes through an ugly phase and we fix that in a moment.
   
5. Add a Unwrap UVW and let’s adjust some of that stretching. Make sure your checkers are as good as possible square.
   
   
6. I set up a multi/sub-object in my material editor next, using the wheel rim on channel 1 and the rubber surface in channel 2.
   
7. Drop you multi/sub-object material onto your tire now.
8. As you can see the positioning of our UV’s is not correct yet so go back to your Unwrap UVW and move your UV’s into the right place.
   
9. When you done, we have a roughly unwrapped tire. Now we can adjust our texture to look proper and our mesh to fit the texture better and we are done. And If you really just want to have something super fast and don’t mind stretching, you can adjust your UV’s to just match our reference images we used.
   
   

Hope you enjoyed this little tutorial and modeling and texturing a tire or something like it becomes a breeze.

The final Image with a neater texture: I won’t leave you hanging cheaply.

The Problem:

Flixel can load animated sprites and can generate rotated sprites from a single image. It can’t however easily create a rotated sprite sheet of a loaded animation sprite sheet. We will attempt to find a solution on how to combine rotation AND animation into one sheet.

Limitations:

Pixel buffer size limitation of bitmap. 16,777,216 pixels (4096×4096) with a maximum length of 8191 pixels per side.

Thus:

Creating rotation Spritesheets for large graphics is essentially difficult because you quickly can exceed the buffer limit for a BitmapData object.

Solution:

Below Limitation for Bitmap:

For samples where spritesheets can contain animation AND rotation and the total pixel amount is less than the limitation, we are fine and can generate rotations easily and assemble in a rotated spritesheet.

Above Limitation for Bitmap:

For samples that exceed the limitation we can either manually generate rotated sheets and load depending on what angle we need we load the actual graphic.

Advantage:

No need to generate samples through code and quicker implementation. Can reduce memory load as we need only make what we really need. Can allow for odd angle samples depending on need.

Disadvantage:

No flexibility in quickly adjusting sample rotation sheets, manually rendering and creating the sheets before use and updating of code manually each time we change the sample rate. Possibly create samples we might never use. Possibility of artifacts during generation, diffuse and alpha needs to be handled separately. Complex code.

Existing Solutions:

An implementation that uses a pre-built rotation/animation sprite sheet was created by by Hectate and can be found here:

http://flashgamedojo.com/wiki/index.php?title=Mouse-Aim_Tutorial_(Flixel)

He uses the prebuilt sheet and sets how the animation is to be played, adding animation sequences based on row and columns.

In this example we have the rotation along the horizontal, and the fading of the red line on the vertical. Playing now the animation labeled X will rotate the shape, whereas the animation labeled 0 will make the red line fade out and back in.

1
2

addAnimation("X", [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], 30, true);
addAnimation("0", [0, 16, 32, 48, 64, 80, 96, 112, 96, 80, 64, 48, 32, 16], 30, true);

As explained, we have some advantages and disadvantages here.

Generating an animation/rotation sprite sheet from an animation sprite sheet

Basic Conversion from Single Image to Rotation Sprite Sheet

In Flixel, loadRotatedGraphic allows loading a simple sprite and generate X rotation samples from it. We can then set an angle property to find an appropriate rotation for this sheet position.

This illustration shows how a sprite sheet with 64 samples is created in Flixel from a single image. We can rotate in 360/64 = 5.625 degrees:

As we can see, Flixel arranges the generated sheet in equal rows and columns. This makes it in fact easier to ensure we don’t accidentally exceed any of the bitmap limit too quickly. Assume that we always work in a square then the sheet dimensions can be expressed as:

sheetMaxDimesion(Width,Height) =  Ceil(Sqrt(amount of rotation samples))

for those who can’t imagine how to use this formula to set the actual pixel dimensions of the rotation sheet, this is how you generate it from our original image sample:

1
2

rotationSheet.width = originalImage.width * sheetMaxDimesion;
rotationSheet.height = originalImage.height * sheetMaxDimesion;

Going further

Now that we know what a rotation sheet looks like we can convert it into a sheet that we cold quickly animate.
In Flixel Animation sheets follow the same concept applies. Animations are played either on the vertical or the horizontal depending on how you set up the frames in addAnimation();

Since the setup is usually quite manual, we want to of course generate what animation sequences need to be played automatically.

What we established before, is that Flixel can’t combine animation and rotation in a simple way. So we have to find a way that allows us to load an animation and generate the rotations for it.

The obvious question that will appear is of course the following:
Why can’t we just load the entire animation sheet with loadRotatedGraphic?

Lets look at what the generated sprite sheet would look like if we loaded the following animated sequence:

When we load the entire thing, what we would get is the following:
We of course right away notice the gigantic empty space. Now here we only used 4 samples, creating 90 degree rotations only. Imagine this using 32 or 64 samples. We would quickly not just run out of buffer space due to the bitmap size, but now knowing where out tiles are will be insanity.

You might say, OK how about we pre-pack it in a square shape for the animation, so 2×2. Unfortunately that won’t work either as the ENTIRE image will be rotated, not the individual samples and still resulting in a mess.

So what should be do???

What to do to make it work

First and foremost there could be a few approaches. But lets look at a straight forward one:
Breaking up the animation in separate images first instead of keeping it in a sprite sheet and load each as a rotated graphic, or load four times for each frame, and store it within seperate bitmapData containers and swap pixel data on runtime for the flixel sprite depending on what animation we are using. That would mean. We have a default rotation. When animating, we replace the current pixel data with he one from the prebuilt bitmapData container. We of course need to know at what frame we are and do this each time we change position to a new frame in the sheet. So what we would get is the following using this sheet:

• One FlixelSprite
• Containing 4 instances of bitmapData each containing a rotation sheet for each frame. So one rotation sheet for white, red, green and blue. What we would get for the last rotation sheet if we have 4, 8 an 9 samples respectively:
  
• We would only have a sequence of 4 frames total, but we need to swap the pixel buffer.
  addAnimation(“0″,[0,1,2,3],30,true);
  won’t do us any good now as this thing is not considered an animation in flixel. We need to manually animate. Something like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

private static var frames:uint = 4;
 
private var frameCounter:uint = 0;
 
override public function update():void
 
{
 
if(frameCounter > frames){
 
frameCounter = 0;
 
}
 
super.update();
 
pixels = rotationRefA[frameCounter];
 
frameCounter++;
 
}

• Assume we generated 8 samples now for each frame (thats rotations of 45 degrees in the sheet). If we rotate 45 degrees to the right we would have to pick rotation frame 1 in each sheet. Flixel will automaticaly know as long as make sure we keep the thing alive as a rotatedGraphic.
• Each frame update we check if we need to replace the current pixel of our object with the ones from the buffer.

The code for this would be the following:

1
2
3
4
5
6
7
8
9
10
11
12
13

var rotations:uint = 9; //Amount of rotation samples we want.
for(var i:uint = 0; i < 4; i++){//i refers to the frame position in the animation sheet
 
loadRotatedGraphic(AssetsList.CircleBlinkAni,rotations,i,true,false);
 
var bmd:BitmapData = new BitmapData(width,height,true);//Create a bitmapData container
 
bmd.draw(pixels);//pase the current pixel data into the bitmapdata container
 
rotationRefA.push(bmd);//store it for reference.
 
}
pixels = rotationRefA{0];

The Problem: Swapping Pixel Data

Unfortunately in this approach all our clipping goes out the window. What we will see is exactly what the screenshots above show.
This unfortunately just also kicked out our rotation samples. So what can we do? It seems we are straight back to square one.
What we need to remember is that we can’t just move the bitmapData straight back into the pixels buffer. If we do that, we get this problem as Flixel autoadjusts width and height to the new pixel data.
On top of this, we lose when we do that all the ALPHA information. Outch.

Now obviously that can’t be the approach we want. We need to find a way, that doesn’t just replace the pixels bitmapdata reference but correctly copies the pixel data.

Alas we can revert to good old blitting.

Essentially what we want to do is NOT:

1

pixels = rotationRefA{0];

But:

1

pixels.copyPixels()

So where is the difference here. Reassigning pixels.bitmapData to a new bitmapData object will automatically destroy all the nicely set up properties Flixel made for us and on top render the entire bitmap. Not what we want at all.

Using copyPixels we just duplicate pixel we created in the for loop over into our existing bitmapData object without Flixel automatically adjusting the FlxSprites properties.

copyPixels to the rescue

Lets set up anew to have a good creation of our sample BitmapData array that contains proper samples of rotations for all our animated frames:

1
2
3
4
5
6
7
8
9
10
11

for(var i:uint = 0; i < framesAmount; i++){
loadRotatedGraphic(animatedAsset,rotations,i,true,false);
 
var bmd:BitmapData = new BitmapData(width*sheetMaxDimesion, height*sheetMaxDimesion, true, 0x00000000);
 
rect = new Rectangle(0,0,width*sheetMaxDimesion,height*sheetMaxDimesion);
bmd.copyPixels(pixels,rect,new Point(0,0),pixels,new Point(0,0),true);
 
rotationRefA.push(bmd);
 
}

To understand fully what we have done now:

• The FOR loop simply cycles through all the frames in our asset (see later how we know how many frames there are).
• we run the loadrotated graphic based on a specific frame in the animatedAsset, generate the amont of rotations, i represents what frame in the animation we are processing, antialiasing is set to true by default here, and we don’t buffer because anyway we this somewhere else later.
• Now we create a new bitmapData same as before.
• Into this bitmapData object we not copyPixels at the size (rect) of the sprite sheets size, we set the source and alpha bitmap to this objects pixels (set via the loadRotatedGraphics)
• And store the bitmapData in our array for later use.
• Wash rinse repeat for all our frames.

Now that we have the references created properly how to we play back?

Exactly the same way just this time instead of doing copyPixel from the source to the reference, we go from reference to source in our update loop.

Playing back our rotated animated graphic

We simply cycle through our frames in the update loop and copyPixels back into the bitmapData object of our FlxSprite.

1
2
3
4
5
6
7
8
9
10
11

if(frameCounter > framesAmount-1){
frameCounter = 0;
}
 
pixels.fillRect(rect,0x00000000);//clear out blank to avoid artefacts
pixels.copyPixels(rotationRefA[frameCounter],rect,new Point(0,0),
 
rotationRefA[frameCounter], new Point(0,0),true);
 
drawFrame(true);
frameCounter++;

Note two things:

1. There is no specific framerate set yet in this class. That means at whatever framerate your application is playing back, at the same speed this graphic will play. It is NOT a time based animation
2. Notice the call to drawFrame(true). As this is not an animated frame in the common sense of Flixel, changing the bitmap data won’t force a redraw of this graphic. We must manually force Flixel to redraw this sprite. You can try to comment this line out and notice how nothing updates until you change the ANGLE of the graphic, which forces a redraw.

Last words

This is essentially it. For the users convenience I added some extra things.

Creating an instance

To load an animation as a rotatable asset, simple create a new instance directly in your code and pass your asset in the constructor along with the amount of rotation samples you want like this:

1
2

var aniRotSprt:FlxSpriteAniRot = new FlxSpriteAniRot(YouGraphics, HowManyRotationSamples,
posX, posY);

You can freely adjust the angle now of this FlxSprite and the animation will play along.

Some words of caution

I haven’t fully tested this with very large images and long animations. Some problems might still show up and by all means this might be far from the ideal and final solution. It is also quite memory intensive as you will potentially create a lot of bitmapData. So use it only if you HAVE TO.

Future Development

Surely some improvements can be made, first and foremost playback of animation based independent of your flash files frame rate and at a fixed speed.
Some testing on performance should be done as well and possibly a better overall writing of this. Somehow I feel it is still a bit of a hack.

Special Thanks

I want to thank Hectate for providing the above mentioned resource that sparked my idea and especially Adam Saltsman for creating and maintaining Flixel. Also my thanks go out to my friends and colleagues, Florian at codeflow.org, and Sean wyrdysm.com for introducing me to Flixel in the first place.

LICENSE:

Since Flixel is free for personal and commercial use, so is this little extention. Please use, edit, reuse, change, eat, lick and anything else you like. And if you like, give me a bit of credit after you done manhandling this code ^__^d

SOURCE CODE

Find the source for the entire class here. Feel free to check out my entire sandbox of what I am messing with.
https://bitbucket.org/Levantulee/sandbox/src/548fbaddb47c/FlixelSandbox/src/assets/FlxSpriteAniRot.as

I though, well then, lets create a little game like demo setup to render planet earth the same way we did in garden planet. No fancy shaders or anything. Just a few tricks etc.

After a few hours of work and tweaks the result is what you see in the images. Ok admitted, I did use earth photographs from NASA, and after a few tweaks I had separate layers for Landmasses, water, shorelines and clouds. And for a bit of visual fun, a very large version of the moon as a visual gimmick. Mind you, it’s it not scale, just make it look nice.

Hope you enjoy. The setup on how I did it will come in a separate post.

Take a for loop for example. Add in a bunch of remote file downloads that get started in this loop.

1
2
3
4

for(var i:int = 0; i < counter; i++)
{
	Loader.addEventListener(Event.Complete, doStuff);
}

Since they are flash events, you wait until the event triggers and then you got your data. You will end up with missing data.

Why? I don’t know. Third base.

What I do know is, things become asynchronous due to the nature of flash events, and even worse so due to filsize and download speeds. What to do instead…make it state driven! Ok, you don’t get simultaneous downloads inside of a flash application, but then, seems it can’t relly handle it anyway.

How to make it state driven without using the loops in AS3 the way you would usually do it. Simple:

Replace the loop through an ENTER_FRAME event and call your data processing method that way. When done, don’t forget to remove the event again.

Within the method called by the event, use a simple switch to keep track of different states of your loader:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

addEventListener(Event.ENTER_FRAME,update);
 
private function update (e.Event):void
{
	switch(state)
	{
		case "initload":
			initTheLoader();
			break;
		case "loading":
			break;
		case "finished":
			cleanUpYourself();
			break;
	}
}
 
private function initTheLoader():void
{
	state="loading";
	Loader.addEventListener(Event.Complete, doStuff);
}
private function doStuff(e.Event):void
{
	//Loading finished
	//Do stuff to your loaded that form here on out
	//When you are done change the state again
	state="finished";
}
 
private function cleanUpYourself():void{
	removeEventListener(Event.ENTER_FRAME,update);
}

Now you wont get any more funky missing data, everything is referenced and loads properly. You can even put this in a class that you init multiple tiles and it will still work.

One MAJOR thing you must know, that events are dependant on EventDispatcher in AS3. That means you can only ADD event in a class that EXTENDS the EventDispatcher such as Sprites, Bitmaps, the Stage etc. This means that the eventListener must be added to the DISPLAYLIST.

The best way to handle this in classes that are NOT part of the display list, is by adding the listener to the STAGE. Do remember that when you are done to remove the listener again before the class instance is destroyed. Else it will keep lfoating around in memeory and cause trobule.

Thats all folks. Happy coding

For fun’s sake I built a very small demo level to play around with the new light features and getting a hang of using the new Editor (haven’t touched it for like 6 +years). Turns out, few changes that really threw me off. I do miss the SkyBox though…. Oh well, can’t get everything. Here a small taste of the demo level. next up. Build a better unreal level

• First it is challenging
• It’s is a simple concept of destruction/survival dynamics and it can be competitive
• Touches base on all fundamental game structures apart from story, strategy and complex stats

Some of the functions I wanted to explore especially in regards to Actionscript are the following:

• Multiple Class Structures
• Code and Timeline
• XML Loading and Saving
• Level Design
• Different types of collisions in AS3
• SIN/COS/ATAN2 for movement
• Tracking of units
• Event Handlers
• Scoring/HUD/Healthbars
• Screen Navigation
• Bosses
• Upgrades
• Z Coordinates in Flash

In regards to teaching I want to communicate the following in particular in regards to game design:

• Programming for Game Designers (who don’t have programming experience and won’t become game designers)
• Rapid digital prototyping
• Understanding basic programming building blocks for games
• Flowcharting the game logic
• Understanding technical limitations of game engines
• Basic balancing
• Documenting and planning the implementation of a design

This sounds like a lot to digest, but it is not as much as it might appear. With this entry I wanted to share as a first step the initial technical design document I have put together before I started programming. I didn’t write a full Game Design Document since the game is so simple. But let me summarize for educational purposes anyway:

Game Summary:

Triangular is a 2.5D vertical, top down, space shoot-em-up. The player defeats oncoming waves of enemy ships and a boss at the end of each level. The player tries to beat all levels and gain a high-score. He can fly up,down,left,right as well as fly depth in order to attack enemies and avoid obstacles. The player can pick up upgrades to restore health, lives and change weapons.

So, here you get a sample of the current game:

Buttons:

• Navigation: Up,Down,Left,Right, Spacebar
• Cheat: P – to self destruct

NOTE: Highscores are disabled and there is just one level currently.

You may look at the initial design doc here: Initial Design Document

So what went wrong:

Game Design overturned, often without knowing by upper management.

This definitely the worst thong to do. You should never ever be in the situation where your boss  (investigator) goes around behind your back and issue changes in the game design without ever discussing it with you. Especially when he has no experience or knowledge about game design and running a production. Issuing instructions to the production team without it going through an approval process, especially when it involved the design of the game, is asking for disaster, not to mention destroying trust, alienating the team and frustrating.

Last minute  changes for no good reason.

Changing the games direction when alpha is over and it has been tried and tested to work well, is suicide. Especially when the project timeline is 12 months and 8.5 months are done. Worse even, when the change comes from the boss without sound reason and proof that the game is not working. I am not advocating to keep beating a dead horse, but you should never kill the horse thats still running hard and far ahead.

Functional Prototype not built early enough.

Having built a paper prototype to prove the game works is one thing and an important thing but we should have built a simple prototype (even in 2d) to prove practically that the game works, have a proof of concept really. Additionally, it would serve as a constant reminder to look at what the vision of the game is, and refer back to it. It also could have helped as a tool to help keep production on track and remind everyone what we are aiming for.

Not enough skilled staff

This is not to say people involved have no skill, just not the skill required by this project. Some people should have not been involved in doing certain work, like programmers do animating, effects designer do programming.

Distractions from other duties

When you work on a project like this, you should have to be able to focus the majority of your attention to it. Having people distracted by mundane tasks, or other projects that interfere with your production cycle is never good. Avoid if at all possible to pull people off their primary assignment to work on something that someone else could take care of unless you have very very good reasons. If you do, remember it will disrupt the current production and communication.

Bad team communication

It was not so much people talking past each other, but everyone on the team was location in different rooms and even different floors in the building. This made communicating difficult and a lot of running around for nothing happened. This could have been avoided by either having everyone work int he same room, of if not possible, have IM communication permanently between all members active and status of the person is at the desk or not. Also meetings should be held to a minimum and to the point. Anything that takes more then 15 minutes, only relevant members should be involved. And come to meetings with a clear agenda!

Technology unsuited

The game technology ended up being not suited for a lot of the visual features we wanted to have, even though it was advertised to work the way we wanted. Make sure you test and know your technology throughly before deciding to run your production on it. If you have time, prepare your own small demos (if you built a prototype before, that should be relatively easy).

No feasible scheduling and clear guidance by upper management

Make sure you have a realistic and reasonable schedule. Forcing features and extra work into an already crammed schedule and then shortening it is naturally a bad idea. Remind your management that they should listen to the leads when it comes to scheduling. They know what their teams are capable of. Keep buffer time available in case things go wrong or you need extra.
What went right:

Clear design

Having set out clearly of what kind of game we wanted was crucial. Despite setbacks and radical changes, we always strives and had a solid design that everyone in the production team understood and followed.

Strong code base and structure

Coding as logical as it is, it is messy. Comments and great documentation helped when structures were passed around between people, it was clear what was to be found where and how it works, even months after it was touched. This helped when changes needed to be made and other people worked on similar parts of the code.

Clear Task Breakdowns

Everyone had a clear task breakdown and always knew what was on their plate. Tracking, reviewing and signing off of work meticulously reduced idle time and having to redo work. It also ensures the team stays on schedule and less things were overlooked.

Independent work attitude of team members

You team should be composed of people who can run on their own and don’t need constant hand holding. The team always was very independent and supervision was not necessary. Having a strong vision and common goal is essential to have this. It is important that all members work on their own and retain a team spirit.

Strong API

We had a clearly developed API for M-EDGE and great members who keep the code and implementation up to date and bug free. Having your foundation solid and strong will soothe your mind and focus on other problems.

Testing

We were able to test early and often and in doing so could focus closely on how well M-EDGE and the rest of the game worked. Structured testing and knowing what you want form it makes for better products!

Equipment

At last you need equipment that works. You don’t want to have to worry about your hardware of software tools crashing all the time.

In conclusion, there were many ups and down in the production, and some of them really killed the original design and lessened the product we finished. The final product is also nice, but it is a far cry from what Garden Planet could have been. Now we just have to hope that the powers to be will actually release it to the public!

The description runs as follows:

Lithosphere is a GPU driven terrain generator. It allows you to create and export material textures and heightmaps intended for use in realtime graphics applications.

You can download the editor and enjoy playing around with it. Please see the documentation and release notes.

Addition would be to extend it to be generate spherical objects such as asteroids and even planets.

Interactive – non-Interactive and Staic – Active

Puzzles are static, games are interactive. -Greg Costikyan
http://www.costik.com/nowords.html

The first thing I must ask here is:

Are Puzzles static?
Are Puzzles non-interactive?

Can we compare even puzzles to games on the grounds that one is static and the other is interactive? What are we talking about here? Can the two words even be compared to each other?

________________________________________
The state of the thing will change depending on your decision. -Greg Costikyan
________________________________________

A puzzle starts unsolved, and you complete it when there is nothing to solve anymore.
Assembling a car is unfinished until all that go into it are assembled and no parts a left over.
A game is not finished until the last objective is completed and a player has won.

In each example we have two states:

Puzzle: unsolved – solved
Car: unassebled – assembled
Game: uncompleted – completed

Each has a goal: Some kind of completness. Each time we make a decision, the puzzle becomes a little less unsolved, the car a bit more assembled the player in the game a bit closer to completing the last objective.

A crossword puzzle can be solved in any order of words. The player makes a choice, depending on his choices (even bad ones) he gets closer and closer to solving it.

You can assemble a car in many different ways, there is no defnite route, though some are obviously not possible and wrong.

A game has many decisions for him to make. Go left or go right. Buy a property in Monopoly or not. There will be eventually a final decision taht will lead to one player winning the game and the game is completed.

The above quote sais something is interactive (allows Interaction) if it’s state can be changed.

In a puzzle the state is not just purely black and white as solved/unsolved as it is in a game uncompleted/completed. True there are puzzles where you have only one solution and one action to do it. But that makes the puzzle still interactive.

A puzzle is like a lightswitch when it is that simple.
________________________________________
A light switch is interactive. You fl ick it up, the light turns on. You flick it down, the light turns off. That’s interaction. -Greg Costikyan
________________________________________

According to that then: Puzzles are interactive, games are interactive.

Now, where do puzzles after all differ from games?

Greg sais puzzles are static. But are they? Puzzles don’t have change, or little change. They lack development. (see the definition of the word static below).

We clearly have shown that Puzzles are interactive. Can something that is interactive be static? The opposite of static is active. Is a puzzle active? By itself it is not, but through player interaction is becomes active. Each time we solve something and interact with it, it changes a bit more towards a solved state. With little to no change it is meant that the change is so small, the outcome doesn’t change whatsoever. Bbut in a puzzle, a change definitly has a strong direct impact on the outcome.
A videogame is static unless there is some kind of input, be that the user or another piece of code such as AI that adds activity to it. The moment you add activity to it, you can get interaction. You can’t have interaction without activity.

________________________________________
“Games,” by contrast, are not static, but change with the player’s actions. -Chris Crawford paraphrased by Greg Costikyan
________________________________________
But so do puzzles!

Puzzles are interactive, games are interactive.
Puzzles are active, games are active.

Are puzzles a game then?

________________________________________
Some puzzles are obviously so (static); no one would call a crossword a “game.” -Greg Costikyan
________________________________________

Why not? It has many of the same aspects that we associate with games.
________________________________________
There is no opposition, there is no roleplaying, and there are no resources to manage; victory is solely a consequence of puzzle solving. -Greg Costikyan
________________________________________

Now this part contains something that makes a difference where we are concerned.

Let’s compare it with a dice game.

A dicegame usually doesn’t have roleplaying, doesn’t always have resource management BUT you can’t SOLVE a dice game. There is nothing to solve. Mainly chance and sometimes some skill or prediction via decision making is involved to win a dice game.

A puzzle on the other hand MUST be solved using knowlege. You can try to guess and rely on chance, but more often then not it won’t get you anywhere. You either solve a problem using your wits, or you don’t.

Puzzles require logical thinking.

What we consider as games on the other hand don’t require logical thinking. Poker doesn’t require logic to win. You can bluff your way through. DOOM doesn’t require logic, it requires skill in aiming and moving skillfully though the world. Yahtzee! doesn’t require logic, the player relies on chance to win the game.

Puzzles can only be won by logic, games can be won anyway. Thus, Puzzles could be considered not games. They can be however, be included inside games.

With this we found one additional trait we could add to our definition of game.

Games can be completed by other means then just logic.

However, if we don’t consider this a facter of excluding puzzles from being a game, then puzzles must be a kind of game.

For common definitions what games are, you should visit Ian Schreibers’ website at: http://gamedesignconcepts.wordpress.com/2009/06/29/level-1-overview-what-is-a-game/
He compiles a good many sources there and provides excellent descriptions and debates on the topic.

NOTES:
You might ask why I go and rely on dictionary and thesaurus definitions of words. Game design is a young, to some degree subjective and term inconsistent business. Since there is no common terminology, we must rely on the exact meanings of the words we are using. To illustrate that I feel that some words are used wrongly, I like to show what they actually mean, and how they should be applied to our critical dialogue.

I also want to add that my conclusion is far from the last word spoken on this topic, and I encourage anyone who reads my article to try and disprove my statements and show my err in reasoning. It serves as a grounds for debate and help us define more clearly in the overall scheme of understanding game design, what games actually are, and how we can determine if something is a game or not.

To Greg Costikyan (if you happen to read it):
I apologize to you if I look like I am shredding your paper and reasoning apart and scupulously attempt to disect your reasoning and it upsets you. I know I can sound a bit harsh at times. I have chosen to use your article because I believe it is one of the best ones there is when attempting to define what is a game and what is not. I hope it serves as a constructive debate. I did this with the greatest respect for you and your work. -Simon

stat•ic
–adjective
1.
pertaining to or characterized by a fixed or stationary condition.
2.
showing little or no change: a static concept; a static relationship.
3.
lacking movement, development, or vitality: The novel was marred by static characterizations, especially in its central figures.

ac•tive
–adjective
1.
engaged in action; characterized by energetic work, participation, etc.; busy: an active life.
2.
being in a state of existence, progress, or motion: active hostilities.
3.
involving physical effort and action: active sports.
4.
having the power of quick motion; nimble: active as a gazelle.
5.
characterized by action, motion, volume, use, participation, etc.: an active market in wheat; an active list of subscribers.
6.
causing activity or change; capable of exerting influence (opposed to passive): active treason.
7.
effective (opposed to inert): active ingredients.

in•ter•ac•tive (non-interactive would be those activities negated)
–adjective
1.
acting one upon or with the other.
2.
of or pertaining to a two-way system of electronic communications, as by means of television or computer: interactive communications between families using two-way cable television.
3.
(of a computer program or system) interacting with a human user, often in a conversational way, to obtain data or commands and to give immediate results or updated information: For many years airline reservations have been handled by interactive computer systems.
4.
Acting or capable of acting on each other.
5.
Computer Science Of or relating to a program that responds to user activity.
6.
Of, relating to, or being a form of television entertainment in which the signal activates electronic apparatus in the viewer’s home or the viewer uses the apparatus to affect events on the screen, or both.

interactive definition
programming
A term describing a program whose input and output are interleaved, like a conversation, allowing the user’s input to depend on earlier output from the same run.
The interaction with the user is usually conducted through either a text-based interface or a graphical user interface. Other kinds of interface, e.g. using speech recognition and/or speech synthesis, are also possible.
This is in contrast to batch processing where all the input is prepared before the program runs and so cannot depend on the program’s output.
(1996-06-21)

This is even more apparent on blogs, B2C and informative websites then anywhere else. People want to “skim” the site for information and not ready every word.

When Florian read my recently published Garden Planet post, he mentioned that it read more like a book then a skim-able web entry. He directed me to the UseIt Website to read up on how to more effectively write for the web.

To make a long story short, I try to do what the site suggests now and format my entries more according to what their research concludes. You will find a lot more:

• Images
• Punch Words
• Headers
• Bullets
• Taglines
• Bold Type
• Links
• Conclusions First
• Less Blabla

I hope those measures will help my avid reader to enjoy my site more and help them assimilate the information given.

Warning: I will add my own spin to all of this at times. I don’t believe in rigid rules. Also I will reformat older entries to become more legible.