Gearworx Productions on Twitter

Gearworx Productions is now on Twitter.  Check them out, follow there tweets and keep up to date on the latest Gearworx Productions news and releases.

Steve Adamson (GWPGearWorx) on Twitter.

XNA Code Generator for Tile Studio 2.55

Playing with XNA yesterday made me wonder how easy it would be to build a Tile based game, such as a 2D 'walk around' adventure game (ie; Zelda, or the likes). I downloaded a copy of Tile Studio 2.55 not too long ago and have been staring at it's icon on my desktop for quite some time now.

It came 'out of the box' with a handful of nice code generators, and it even included a .NET code generator ... but it only supported the BooGame library, and generated Boo code.

So, I thought to myself, why not look for an XNA Exporter ... so I loaded up the Tile Studio website, and found nothing there. I googled briefly and found nothing as well. So, I started on a little code adventure and decided to build my own. Now, keep in mind, I'm by no means an XNA Expert so my method for creating the tile map in C# may or may not be 'the best' or even 'proper'. However, the map works ... and I'm happy. I started on the project around 10:20am and am now writing this post at 11:50am ... so, it wasn't "too hard" and didn't take too much time. The time spent also included learning the Tile Studio Definition language and how it worked as well.

So, onto some 'proof', here's a few screenshots:

This is Tile Studio, with my little map loaded up
--the Map is 100x100, and the Tiles are 20x20.

Here is my Visual Studio project, after performing a code generation
in Tile Studio and refreshing the project directory and including the files.

And, here is my Map rendering to an XNA Game Window.

Now, in the project files shot you might notice that there are three files highlighted. The first is the exported Tile Map file from Tile Studio, the second is the actual Map definition (Tile2.cs) and the third is a helper class I wrote that is automatically exported for you that contains the MapDefinition and Tile classes.

And, here's the best part, your not gonna believe it ... or maybe you will. To load the map up, you simply do:

And that's it ... the MapDefinition provides a 'Draw' method to loop through all the tiles and render them to the screen. I've not yet optimized this to store a cached copy, but I also haven't tested it with any real 'logic' yet to try building a game. You can download a copy of the XNA C# Tile Studio Definition file from here, expect updates in the future to support more of Tile Studio's feature set.

Download the Definition File Here

Download the Full Example Project Here

Currently Supported Features:

• Export Tile Sets to BMP and place in 'Content' sub-directory
• Export CS File containing all Maps
• Export TileStudioMap.cs containing MapDefinition and Tile helper classes
• Easy Map instantiation, just pass a reference to the Map's Texture2D containing the Tiles
• Easy Map Rendering, just call the Map's "Draw" method and pass the SpriteBatch

Evil Clutches ala XNA, My First XNA Game

I was speaking with a co-worker last night, and we got into the topic of game development and XNA.  As usual, I took the topic and went a little overboard and decided to install XNA at home and 'go at it'.  Since I recently finished the 'Evil Clutches' chapter from Game Makers' Apprentice and, also released the 'Evil Clutches Javascript' version; I decided to attempt making Evil Clutches in XNA.  It was a fairly straight forward process, and required almost no reading on my part.  I was able to install XNA, Launch Visual Studio 2005 and create a new project and just 'begin'.

I was actually very impressed with how simple it was to build the game, so much so that I referred to it as 'childs play' to my co-worker just after finishing up the Alpha. With that said, here's the basic process I went through;

1. Step 1: Launch Visual Studio 2005 and create a new Windows Game
2. Add my Art resources to the Games' Content
3. Create a GameObject base class to store common information (Position, Texture, Color, Collision Detection, etc).
4. Create object classes for my Dragon, Boss, Fireball, Demon and Baby objects.
5. Apply basic 'render' logic to the 'Draw' method of my Game class
6. Apply basic 'call object Update' logic to my Update
7. Create the necessary 'Update' methods on my object classes
8. Revisit the Game's Update method and apply basic Input logic (Escape to Exit, Up/Down to move Dragon, Space to Shoot)
9. Add a SpriteFont and add logic to print the score on the screen
10. Package it up and Write this blog post.

It really was that simple, and the entire process took me less then two hours.  Seriously, I banged the whole thing out just by looking up the 'How To' references on MSDN. Now, of course, as with everything in software development the 'easy ten step process' I listed above had lots of little 'inbetweens' (actual logic, etc).

You can download the 1.0.0.0-alpha release of my 'Evil Clutches XNA'.  If there's an interest in XNA Game Development tutorials, then I might write up a 'The Making of Evil Clutches for XNA' post, so let me know in the comments if your interested in that sort of things.

The Making of Evil Clutches, Javascript version.

This is a quick and dirty walk-thru on how I put together the 'Evil Clutches' javascript demo. First of all, I bought the book 'The Game Makers Apprentice' and built the first game, in Chapter 2. It's called "Evil Clutches", without the "Javascript". This was a fairly easy game to build with Game Maker and so, after building it and playing it a few times, I took the art resources and modified them a little (made them PNG instead of GIF, removed the animation frames, etc).

After doing this, I started building out my CSS Stylesheet to describe my resources, each resource has it's own style and all my 'objects' use the 'object' class (which simply says "position: absolute".

So, here's a quick example of some of the CSS:

My 'game' area is defined as a static object, like so:

Note the 'overflow: hidden' to prevent objects from 'bleeding' out of my game area, also note the 'position: relative' which allows my absolutely positioned children to be offset by the game board. So '0,0' for a child of 'game' is the top-left of the 'game' element, not the document/window.

Now, I have two other static objects, my Dragon and my Boss, and these were defined as such:

I added a z-index to these, to ensure they were placed over top of any of my dynamic objects (Demons, Babies and Fireballs), which was done to prevent any 'bleeding' overlap when the objects collide.

After I created this style sheet, I started writing some code. First off, I created the 'JSGameLib' side-by-side with this demo, but for the purposes of this walk-thru, we'll skip the 'making of' for JSGameLib.

I added my script references, which included jQuery 1.2.3, jQuery Growl, and JSGameLib. I then added a reference to 'index.js', which was just a simple script file i created to hold my games code.

So, let's take a look at 'index.js'.

At the very top, I define a bunch of global variables, this is to help reduce some of the strain on the browser while executing the code repeatedly. Three of the most common things I reference are the Game area, the Dragon and the Boss. As these are static objects that always exist, and only have one instance of each, I simply store a reference to a jQuery object that points to them.

In my $(document).ready() I set some of the jQuery Growl settings, to make it look a little nicer, as well as add the 'object' class to all of my 'game' children (I did this so I didn't have to remember to do it when I laid out the Markup on the page).

One of the children in my 'game' area is the 'overlay', which basically hides my screen and provides basic user instructions. To begin the game, we click this area, so I attached a simple jQuery click handler and it simply calls "gameStart". I also added a click handler to my 'Stop Game' button, which calls "gameOver".

"gameStart" is pretty simple, it initializes all my global variables to there default values and stores a few pre-calculated values onto my static Dragon, Boss and Game objects. Namely the 'h' and 'w' properties, so I don't have to calculate these every time i need to know what they are -- this also allows me to quickly resize my artwork and change my game area without having to change -ANY- of my code.

The game 'starts' by calling the 'bossDown' function, which basically just animates my 'boss' object by making it move to the bottom of the screen, this 'animate' function has a complete handler, which calls 'bossUp' (take a wild guess what 'bossUp' does?). These are basic jQuery methods, and you can review the docs for the 'animate' function of a jQuery object. The 'unique' thing is the simple 'complete' handler, which generates a simple 'loop' which makes my boss object go 'up and down' repeatedly.

I make a call to 'dragon.controlled()', and 'controlled' is a function available in JSGameLib and I pass in some basic options, enabling support for the UP and DOWN (Arrow Keys and WASD style) as well as a 'speed' and 'duration' override. For more details, please take a look at the JSGameLib documentation. Following this, I add a 'keypress' handler and look for 'space' (charCode: 32). If you press 'space', I call the 'fireball' function. This function simply creates a new DIV element with a class of 'fireball object' and then sets the Top and Left CSS attributes to that of the dragons' current position. I also set 'display: none' to make the object hidden initially, and then call 'animate' with an 'opacity: show' to make the fireball fade in quickly. While it is fading in it also begins to start moving by setting 'queue: false' in the 'animate' options. I simply tell the fireball to move '+=675px' over the course of 2000 milliseconds. Once 'complete', I remove the fireball.

Pretty straight forward so far, eh?

I'm out of time for now, but will finish this up later on -- hopefully adding some more detail to what's written already.

Javascript Game Library

I am currently in the process of building a 'Javascript Game Library', which is being implemented as a simple jQuery plugin. So, with that said, it requires jQuery (1.2.3 to be exact). Currently, it supports very little, but with the limited functionality it has right now, it's capable of doing quite a bit of interesting things.

You can view a demo of the 'collision detection' and 'keyboard movement' here:

http://projects.zoulcreations.com/jquery/JSGameLib/

Or, better yet, you can view a 'game' written with the library here:

http://projects.zoulcreations.com/games/JSEvilClutches/

Anyone familiar with 'Game Maker' will most likely notice this game as 'Evil Clutches' from 'The Game Makers Apprentice'.

Some small notes on the Demo Game:

It does not seem to work in anything other then Firefox currently, and as I do not have a Mac to test with diligently, I will most likely not have Safari support any time soon -- JSGameLib seems to work fine in IE, Safari and Firefox ... however, the Demo Game has some problems (objects spawn in the wrong place) which is either related to a CSS issue and Firefox is just too forgiving, or it's related to an issue with jQuery not having access to certain pieces of information at the time the values are being set. Either way, I intend to make it support Safari for Mac and hopefully IE for Windows as well.

jQuery-based Card Match Demo

This is a totally unfinished, and practically abandoned demo I was working on in an attempt to learn jQuery. It's basically your standard 'Memory' style game, however, the cards dont flip over (I got lazy, yeah yeah).

You can try it out here: http://projects.zoulcreations.com/jquery/match/

Memory ala Adobe Flex

I got bored this evening, so I whipped together a quick Memory game in Adobe Flex, more as a means to test some basic things ... like extending built-in controls (Image) and building out dynamic displays (the images don't exist in the MXML) and working with them through the event system (adding/removing them from the effect list). The card 'flip' is actually just a simple image.source = newSource (each Card has a 'front' and 'back' source).

Enjoy: http://projects.zoulcreations.com/games/FlexMemory/

It’s Math, ala Adobe Flex

For those of you who have seen my simple 'Its Math' application written in Torque Game Builder, here's a remake of it in Adobe Flex. The Adobe Flex version actually contains much more 'logic', but is no where near as 'pretty' looking (not that the TGB version was 'pretty' by any means ... haha).

http://projects.zoulcreations.com/games/ItsMath_Flex/

Space Invaders ala Adobe Flex

Ok, I had a really nice story written up, and then Mambo's Story Editor blew up and refreshed the page for no apparent reason.  So I'll keep this one short and simple.

http://projects.zoulcreations.com/games/FlexInvaders/

Above is a link to a Space Invaders clone written in Adobe Flex.  There are three components that make up this game, the Ship, Shot and Invader classes.  The Ship component is the player ship and has simple 'move left/right' functionality along with 'fire shot'.  The Shot component is the fiery bullet that the Ship shoots when you press the Spacebar.

The Invader class is fairly simple at this point, and contains little to no logic.  The Invaders are currently stale and do not move around the level.  This functionality was not required to accomplish my simple test, which was to see if Flex was a suitable game development environment.  So far, I'm thinking that is definitely has the potential to develop simple Flash video games ... not sure about it's ability to get more complex -- along with Flex's ability to load up SWF's 'on the fly' ... you could intermix Flash and Flex stuff to make the game more complex (visually).

So give it a try, and let me know what you think ...

Dungeon Walk-thru …

For those following the Dungeon Builder progress, here's a video showcasing what it can do so far ... there are still some issues with the render system ... namely it rendering some things too early ... and rendering some things incorrectly ... but otherwise, the overall code base is almost finalized and it's just a matter of tweaking and squishing bugs ...

You can find the Dungeon Builder video by clicking the picture below:

UPDATE: Added a link to the second Demo, which show cases some corrected render glitches, and what I believe to be the 'beta' version of the render system

Newer Posts »