Google App Engine Exploration

As usual, I've found yet another technology that peaks my interests and I'm exploring it.  This technology is Google App Engine and is powered by Python.  So far, my thoughts on it are 'Wow, thats cool!'.  Google opened up the flood gates on 5/30/2008 (or 5/29?) for public beta testing and so I immediately signed up (after sitting on the waiting list for a closed beta invite for a week or two) and registered three applications.  I registered three right off the bat simply because it took me so long to find an available name for the one i wanted to 'play with', so I registered all three of my alloted application names right away.

My 'exploration' project is simply called 'Zero Point', as in 'There really is no point'.  You can view this application here.

So far, it's a simple sandbox application with a basic Django template.  I created 'master.html' and 'content.html' templates, 'content.html' simply extends 'master.html' -- so my main page layout is contained in 'master.html' but I render 'content.html' currently -- spiffy, eh?

I also tied in a simple User account system, using the User API available from Google App Engine.  If you access the site, and then proceed to login, I'll track your page views -- super cool, don't you think?

So, the point of this blog post is ... well, as the blog title implies, to show you a code snippet (or, a 'code fragment'), so let's get onto that, shall we?

I was trying to figure out how to make dynamic URL's, so that I could build out 'something' (I really don't have a plan yet, I just figure it'll use dynamic URLs) and ran into a small problem -- Google App Engine uses an 'app.yaml' file to configure your request mappings, and "- url: /.*" should match 'anything' that isn't already explicitly mapped to something else first, right?  Well, that's what I thought, but I kept getting quiet 404's without knowing why ... so, I looked at the application code just a bit more and realized I was passing an explicit path into my WSGIApplication instantiation.  Converting '/' into '/.*' did the trick.  Now, keep in mind, all of Google's examples (so far that I've read, that is) use this static mapping of '/' for the 'main.py' and Google App Engine requires you to map your scripts in app.yaml ... so, now your stuck with mapping things to more then one place, what's the deal with that?

I was looking at an example that uses AJAX, and it has an RSS feed built into it (or something like that) and in the main() function they pass multiple URI's into WSGIApplication() one for '/' and one for '/rss' -- this is where I got the idea to pass a Regular Expression into WSGIApplication.  As expected, it worked and now Zero Point can work with dynamic URL's -- problem solved.

That's the 'main' method, which just simply instantiates my MainHandler for any URL that isn't mapped to another script file -- beautiful, eh?

Harmonic Convergence Released!

Harmonic Convergence has recently been released by MrJoy, and I thought I'd toss it out there and let some people know. And yes, I'm only blogging about some 'random game' because it's not 'so random' on this blog since I helped a little (as in microscope required to see the detail) with the games development.

I'm credited under 'Menus' and 'Networking', ... now, both of these credits make it sound like I did 'something cool' and your more then welcome to give me more credit then I deserve just by thinking whatever you want ... but, in all honesty, I did very little ... still, it's the first time my names been published in a game's production credits so ... I thought I'd make a little noise.

The game is sort of tetris-like, in that it's a strategy game based on falling blocks and matching ... however, it's an interesting twist on the idea and I think MrJoy pulled it off very well. The art is stunning, and the sound track is amazing, yet another great Indie release.

Here's a video of the game in action, check it out and let me know what you think. Feel free to drop by HarmonicConvergence.net and purchase your Deluxe copy today.

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.

SQL Server, Drop All Tables in Database Quickly

Just a quick and dirty way of dropping all the tables in a database, without dropping the database itself.  Useful for when your writing data migration scripts and staging data and need to wipe out your development environment real quick ... or, when you've found that uber cool sql-injection-able site and want to wreak some havoc (I don't condone the latter, but I do think its funny from time to time when it happens to the 'big companies').

jQuery Morph Preview

I was looking through some of the features offered by MooTools, and came across the Fx.Morph demo. I liked the look and feel of this and have seen it before in the past. However, in the past, I assumed it worked much like the common jQuery.animate(css,options) function. I actually looked at the demo and realized, it was morphing from one named style to another, without passing the actual style information into the 'animation', just the 'morph to' CSS class.

I did a bit of research, and found out that it's pretty easy to retrieve the current stylesheets and CSS Rules in Firefox (Safari and Opera also support this, to my knowledge) and so, began to create a simple 'jQuery.Morph' plugin for myself. I threw up a quick demo page, that is actually just a pseudo-recreation of the MooTools Fx.Morph demo (same Markup, same Style). You can compare the two and see some minor differences ... namely the background color not fading in as smoothly as it does with MooTools.

I hope to be able to finish this up at some point and release it to the general public.

You can view the preview here:

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

UPDATE: I looked into the IE Support a bit more and figured out how to use document.styleSheets instead of the original method, and jquery.morph.js has been updated to reflect that.  However, there seems to be a small bug in jQuery 1.2.3 (maybe not so small? :P) that is throwing errors in IE when you try to animate things like 'color' and 'overflow' (basically, anything that does not map back to a 'unitable numeric').

This is the offending code, in the _default for the step.  I didn't look through jQuery enough to figure it out (thousands of lines of code without a 'goto definition' isn't fun to debug) but I believe this should be considered a bug ... especially since the code does not validate either before calling this _default function or in the _default function.  As it's a "default" handler, it should assume all possible types of values and gracefully exit if it's "no good".  Which, it appears to do in Firefox, but that could just be because Firefox ignores when you try to set a style to an invalid value, and IE is simply saying "Hey, dummy, you cant do that" (forgiveness is a nice thing, you know?).

WordPress Growl … thoughts?

I am currently working on integrating my recently released 'jQuery Growl' with WordPress 2.5, as an administrative plugin.  Allowing a logged in Site Admin (User Level >= 10) to be notified of system messages such as 'Comment Posted', 'User Logged In', 'Post Published', etc ... as well as allowing the site administrator to enable the 'whose looking' feature which will just log all requests to the site and notify the administrator of every page request ...

Now, due to the large number of requests that would be created if this was 'literally real-time', I'm thinking of limiting the checks to every 10 seconds (possibly providing an override in the options?) and only retrieving the last 10 notices ... if any of them are found in your current 'notice stack', then it will ignore it -- keeping the internal 'notice stack' to 10 items or so.

With that said, I'm curious as to whether or not this is a useless feature, or if people would actually use it

So, let me know.

jQuery Growl 1.0 Released

I've just released jQuery Growl 1.0 'Preview' and submitted it to the jQuery Plugin Repository. jQuery Growl is a jQuery based version of Growl for OS X.

The 'home page' for this plugin is currently located here on Fragmented Code.

I have lots to do to 'finish this up', but this is a pretty solid 'preview release' and is now open to the general public. I implemented something very close to this at the office on Friday, and just couldn't resist releasing a jQuery Plugin (the one at the office uses jQuery, but is tied heavily into the 'framework' we're building there -- its currently proprietary, so ... don't bother asking, but we may release bits and pieces to the public at some point).

A co-worker likes to point out my 'lack of support for IE' when I release code snippets, and ... as such, he pointed out the same 'lack of support' with my jQuery Growl 'demo' template ... my response is,

if you can get IE to act right, I'll support it

With that said, the demo looks a little 'odd' in IE -- however, the demo uses a 'custom' template, the default template works perfectly fine (last I checked it, which was a while ago, *shrug*). The demo is a perfect example of 'templating' the output though ... and your welcome to create as many IE-friendly templates as you want ...

And, on that note ... if you create any custom templates, please, let me know, I'd love to show case them with the plugin ...

Newer Posts »