Stop the XOID! – Step 5: Acceptance

Top of the morning to ya! After much thought, deliberation and bargaining, we have decided to drop the word DROID from the title of our current project and agreed on a new title: “Stop the XOID!”

To catch up on all the back-story of how this game came to life see here. Basically, I decided to create  a game from an idea that my 5yr old (J) came up with. I knew that the path forward would be fraught with peril and that putting a kid in charge of designing a game concept would be very challenging. One of the main concepts I have been trying to explain to him is originality, and with that, we have had one looming issue.

For a couple of months I would listen to J lay out the idea for this game. You fight off little alien robot creatures in a series of underground bunkers and try to defend your base. Along with his description of the game was the pitch for the title “Stop the Droid!” When I first heard the title, I liked it immediately, and thought it would work. I had no idea about the Lucas Arts Trademarks on DROID and the many variants thereof. I had heard about the mark DROID alone being licensed by Verizon, but I really didn’t know all the details of how it happened and was astonished to find out that usage of the word could be problematic for us. Here is a reddit post about it.

It is totally amazing to me that the first usage of the word DROID was in the original Star Wars movie from 1977. The word Droid is ubiquitous in popular culture. Could it really not have existed in writing in or film prior to 1977!? After about a months worth of research I have been unable to disprove by finding any other usage of the word prior to 1977. The purpose of a trademark is to protect a brand from being used in a way that might cause confusion among consumers. DROID is apparently an original and novel creation by Lucas Arts and for this reason we have decided to abandon all references to the word in the title and in the game.

We have decided to use ‘XOID’ as the name of the antagonist alien species.

XOID (pronounced zoid): A bio-mechanical race of robot-like creatures who scour the galaxy for planets to strip-mine for resources.

 

Stop the Droid! Dev update #2

Just a quick update today to show some of the progress that has been made over the last few weeks. I took about two weeks off due to other commitments and well, just needing a break from the project. Many of the items from the first dev update have been finished or resolved.

The armory is now fully implemented with a good array of weapons and units and I have started to work out balancing.  Artificial intelligence is now much improved, but still needs work.  J won the battle over sticky grenades. This weapon did not seem to offer as much benefit as some of the other ideas that were kicked around, but in the end, the little dude wanted sticky grenades.. he gets sticky grenades.

Scope is a moving target

As you can imagine, taking full direct from my son is incredibly challenging and rewarding at the same time. He seems to have a new level idea every day, and each one shares no similarity with the last. I have been trying to keep a running list of the best ideas and we have agreed that we will release five levels for the XBox Live Indie games version of the game. This at least allows me to plan for the first release (To XBLIG) by knowing just about how much time it will take to create each level.

Balance Balance Balance

Yeah, this one if obvious. Balancing even a small set of units in an RTS style game is difficult to get right. This will be an ongoing area of work.

Short teaser of the current state of Stop the Droid!

Sharky Fish postmortem and development recap

On Monday evening February 10th with the the loss of a certain ‘Flappy’ game still fresh in everyone’s mind, I saw several tweets swirling about how little time it would take to make or how few lines of code are in such games. (Random question. What is the genre officially? I default to ‘copter’ game since that is the earliest game I can remember)

I decided that I would spend one night on a random concept to see if was as easy to make as I perceived it to be. (Even the simplest of concepts inevitably take more time than expected).

Why make Sharky Fish?

I wanted to release something small and free to the Play Store to see how the process works. The concept of a little fish dodging sharks and the border of the screen seemed straight forward to program and I knew that the art would not take long to draw and to animate. I am currently splitting time between two larger projects that will take many more months to complete and I wanted to see something be completed and I needed to switch gears for a couple days to refresh. Perfect timing for a random solo game jam!

 

Development Tools

As I mentioned, I have been working with LibGDX for a few months now and have a solid understanding of the framework. I created a new project and started implementing a basic UI. I had some code that I wrote to render buttons and textures at different resolutions, but most of the game was written from scratch. I brought the UI code into the project and designed the buttons and banners in photoshop in about one hour. For the next hour I created the shark and fish images and brought them into Spine. (Spine is a 2d skeletal animation program that is totally amazing).

Instead of creating sprite sheets, I thought it would be easier to create animations with spine. One awesome feature in spine is the ability to assign arbitrary polygons to your animation and then import into your game. Here are the bounds I assigned to the animations in the game.

spine1 spine2

 

I used the LibGDX spine runtime to import the animations and perform collision detection. I used the LibGDX Intersector helper class. The only trick here was to use the computeWorldVertices method on the BoundingBoxAttachment read in from the skeleton. This sets the vertices to world space in relation to a bone and x, y coordinate. Then the Intersector can be used to detect if one Polygon overlaps another with the overlapConvexPolygons method. That was really all I had to do for collision!

Things that saved me time:

  • Used LibGDX Stage to handle different display resolutions
  • Used existing UI framework for buttons and input
  • Used spine to animate instead of making sprite sheets

 

The Break Down

So I went about 2 hours beyond my original 8 hour estimate. Here is how I spent the time.

Development Hours: 5

Art and animation: 3

Testing/QA: 2

Sound: 0

Lines of Code: ~1500

 

 Can I play it?

Sharky Fish can be found on the play store here

Edited – 2/16/2014

I decided to remove Sharky Fish from the Play Store because I think it makes more sense to post as a web game. I used Libgdx and GWT to render an HTML5 version of the game.

Check it out here:  http://www.dreamwagon.com/sharkyfish

I would be happy to share the entire source for this game upon request. (tweet me @dreamwagon)

Avatar Galaxy a last dance with XBLIG/XNA

After many months of development effort, Avatar Galaxy has finally been submitted for review. The creation of this title has been a bittersweet journey as I watch the community of developers on the XBLIG site slowly dwindle away. As I worked each day on Avatar Galaxy, I often thought back to the days when the creators club site was a vibrant community of developers who were excited  to be able to get a title on a ‘real’ console. I have also wondered if Avatar Galaxy will be the last title I develop with XNA.

Even with all its problems (such as the community review process, website and reporting issues, lack of prompt developer support) the XBLIG experience has been pretty positive, and I rather enjoyed being a part of the community. Of course we all know how to find each other on reddit, IRC, twitter etc, but there is just something that will be missed whenever the CC goes away. (I can’t put my finger on it..)

Maybe I will be able to make another title with XNA, but I probably won’t… So with that said, here are the screen shots of (Maybe my last XNA game) Avatar Galaxy

…and as Jimmy the random NPC says (with his only line in the game):  “I guess all we can do now is sit back and wait for the end.”

screen1

screen 3

screen2

screen 4

Box Art

Caching rotations as bitmapdata in flex AS3

Well what would be better for PI day then a brief tutorial on caching rotation sprites in adobe flex. While porting “Ava the Firefly” to Flex, I have encountered a bit of a snag in how the Flex framework handles rotation. In XNA, it is as simple as passing a parameter to the draw method on the Spritebatch. In AS3/Flex… not so much. The issue.. discussed here, is that performing a matrix operation to rotate a bitmapdata object once per frame will drastically impact performance in a negative way as the number of rendered sprites increases. The consensus appears to be to use a cache for the rotation information.

Here is how I handled the problem.

		static public function rotate(image:DisplayObject, degrees:Number = 0, colorTransform:ColorTransform = null):BitmapData
		{
			var matrix:Matrix = new Matrix();
			     matrix.translate(-image.width/2,-image.height/2)
			     matrix.rotate(degrees * degreeToRadians);
			     matrix.translate((image.width/2),(image.height/2))
 
			var bitmap:BitmapData = new BitmapData(image.width, image.height, true, 0x000000);
			bitmap.draw(image, matrix, colorTransform, BlendMode.LAYER, null, true);
 
			return bitmap;
		}

This will take an image an rotate it, returning the bitmapdata.
In my case, I create an array of images from a sprite sheet and build a cache of all the possible rotations of each frame in the animation.

		// Create a multidimensional array for the given index
		// ie. increment of 10 will cache all rotations in 10 degree increments (36 bitmaps)
		static public function buildRotationCache(image:DisplayObject,
                                                                       imageArray:Array,
                                                                       frameIndex:Number,
								       increment:Number,
								       colorTransform:ColorTransform = null ):void
		{
			var rotationIndex:Number = 0;
			for (var k:Number = 0; k < 360; k+= increment )
			{
				var bm:Bitmap = new Bitmap(GraphicsUtil.rotate(image , k, colorTransform));
				var gr:GraphicsResource = new GraphicsResource(bm);
 
				imageArray[frameIndex][rotationIndex] = gr;
				rotationIndex++;
			}
		}

the graphics resource class is from a tutorial found here

package
{
	import flash.display.*;
	import flash.geom.ColorTransform;
 
	public class GraphicsResource
	{
		public var bitmap:BitmapData = null;
		public var bitmapAlpha:BitmapData = null;
 
		public function GraphicsResource(image:DisplayObject)
		{
			bitmap = createBitmapData(image);
			bitmapAlpha = createAlphaBitmapData(image);
 
		}
 
		protected function createBitmapData(image:DisplayObject, colorTransform:ColorTransform = null):BitmapData
		{
			var bitmap:BitmapData = new BitmapData(image.width, image.height);
			bitmap.draw(image, null, colorTransform);
			return bitmap;
		}
 
		protected function createAlphaBitmapData(image:DisplayObject):BitmapData
		{
			var bitmap:BitmapData = new BitmapData(image.width, image.height);
			bitmap.draw(image, null, null, flash.display.BlendMode.ALPHA);
			return bitmap;
		}
 
	}
}

All for now. Happy coding..

Fight Monkey of Magic

Dreamwagon games is proud to announce its first title Fight Monkey of Magic (FMM).

FMM is a hybrid role playing fighting game with real time strategie elements. Although an arcade fighting game at heart, Fight Monkey of Magic provides several different ways to win. Play through in arcade mode or team up with your friends. Up to 4 players capability will keep everyone in the game.

We are shooting for a release to the XBox arcade and windows in the fall 2009.

Check out the game page for more info:  http://dreamwagon.com/fightmonkeyofmagic

Flexible Navigation – WordPress Plugin *beta

Beta release 0.09

Download it here

This Plugin adds a Flex Accordion Navigation to your wordpress instance. This plugin is perfect for those sites that have out of control links in the sidebar. With Flexible-Navigation you can simple use one function call in the sidbar to generate an accordion navigation.

add AddFlexNav(); anywhere you would like to add the navigation. (most commonly the sidebar.php file of your theme.)

Flexible navigation takes your links, posts and catagories and creates an accordion navigation. You may customize this from the admin menu or by editing the php file itself.

more to come!

flex accordion navigation using xml

Today I would like to share a flex application I think may be very useful to someone. Imagine you need to generate an accordion navigation with dynamic content such as the one used on the second level of cnn’s website. You would like to be able to use the same application over without massive effort, or copying and pasting code blocks all over the place. Sure this could be done with a mountain of javascript, or you might want to consider flex. For those with experience using flex, I present the mxml file free of charge. For those without any experience with flex, you may want to read a tutorial before jumping into this example.

 <?xml version="1.0" encoding="utf-8"?><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" xmlns:flexlib="http://code.google.com/p/flexlib/"
layout="vertical" viewSourceURL="srcview/index.html" backgroundColor="#ffffff"
creationComplete="srv.send();"<mx:Script>
<![CDATA[
 
import mx.collections.ArrayCollection;
import mx.utils.ArrayUtil;
[Bindable]
public var navData:ArrayCollection;
 
[Bindable]
public var index:int=-1;
 
]]>
</mx:Script>
 
<mx:Style>
Application {
backgroundGradientColors: #FFFFFF, #FFFFFF;
backgroundGradientAlphas: 1, 1;
vertical-align: top;
horizontal-align: center;
padding-top: 0px;
padding-left: 5px;
padding-right: 0px;
}
 
VAccordion {
textRollOverColor: #FFFFFF;
textSelectedColor: #FFFFFF;
color: #FFFFFF;
headerHeight: 35;
vertical-gap: 5;
background-alpha:0;
open-duration:500;
border-style:none;
 
header-style-name: gradientHeader;
 
}
 
.gradientHeader {
 
font-family: Verdana;
cornerRadii: 10, 10, 10, 10;
borderColors: #AAB1CD, #AAB1CD;
overBorderColors: #FFFFFF, #FFFFFF;
selectedBorderColors: #FFFFFF, #FFFFFF;
borderThickness: 2;
color: #FFFFFF;
borderAlpha: 1;
fillColors: #7f8182, #7f8182;
fillAlphas: 1, 1;
fillColorRatios: 0, 255;
overFillColors: #FFFFFF, #FFFFFF;
overFillAlphas: 1, 1;
overFillColorRatios: 0, 169;
selectedFillColors:#000000, #000000;
selectedFillAlphas: 1,1;
 
fontSize: 13;
padding-left: 10px;
padding-top: 0px;
 
}
 
LinkButton {
fontSize: 10px;
rollOverColor: #fafafa;
selectionColor: #fafafa;
color: #0B357F;
textRollOverColor: #25bbfc;
textSelectedColor: #0B357F;
padding-left: 15px;
padding-top: 5px;
}
 
.headerBox {
font-weight: bold;
color: #FFFFFF;
}
 
.students {
padding-top: 0px;
}
 
.medical {
padding-top: 0px;
}
 
.employ {
padding-top: 0px;
}
 
.services {
padding-top: 0px;
}
 
.label {
font-weight: bold;
color: #FFFFFF;
}
 
VBox{
 
}
 
</mx:Style>
 
<mx:HTTPService id="srv" url="properties.xml" resultFormat="e4x" />
 
<mx:XMLListCollection id="headingData" source="{srv.lastResult.heading}" />
<mx:XMLListCollection id="linksData" source="{srv.lastResult.heading.link.@linkname}" />
 
<flexlib:VAccordion id="accordion" headerRenderer="Header" width="238" height="230" >
 
<mx:Repeater id="rep" dataProvider="{headingData}">
<mx:VBox label="{rep.currentItem.@title}" styleName="headerBox"  backgroundColor="#fafafa" width="{rep.currentItem.@width}" height="{rep.currentItem.@height}">
 
<mx:Repeater id="linkrep" dataProvider="{rep.currentItem.link}">
<mx:LinkButton buttonDown="navigateToURL(new URLRequest(event.currentTarget.getRepeaterItem()), '_top')"  label="{linksData.getItemAt(index+=1)}" />
</mx:Repeater>
 
</mx:VBox>
</mx:Repeater>
 
</flexlib:VAccordion>
 
</mx:Application>

What this application does is loads data from an XML properties file containing the titles for the headers, the names for the links, and the URLs. I think the example is pretty straight forward.

To compile this you will need the flexlib.swf added to your flex/frameworks/libs folder as well as the header.mxml file which is used to allow the accordion to activate on mouse-over. The header.mxml file was found on http://dougmccune.com although the exact post escapes me now.

Here is the result

http://www.dreamwagon.com/flex/examples/accordion/

The xml properties file is herehttp://www.dreamwagon.com/flex/examples/accordion/properties.xmlThe source file can be copied from above or downloaded

http://www.dreamwagon.com/flex/examples/accordion/AccordionNavigation.mxml

and the header http://www.dreamwagon.com/flex/examples/accordion/Header.mxml

And finally the flexlib can be found here

http://code.google.com/p/flexlib/downloads/list

Of course you may take out the reference to the header and to the flexlib and complile the AccordionNavigation.mxml alone if you like.

Happy Flexing!