This is my first post of what I suspect will be many on the subject of SWFt.

What is SWFt I hear you cry? Well in a nut shell SWFt is an Entity-Component based game framework powered by Dependency Injection. Still confused? Well basically its a really nice neat method for making flash games. Still interested? Read on!

First the history, if you arent interested in this then just skip on down to “What exactly is it?”

History

It started off as an idea I had while playing around with some RobotLegs code. For those not in the know, RobotLegs (RL) is an awsome Inversion of Control (IoC) or Dependency Injection (DI) MVCS framework for making Rich Internet Applications (I wrote a post on it here). IoC and DI were new concepts to me and I was fascinated and excited by the power that they had especially when couppled with something like AS3 Signals.

At the time of this discovery I was working on a game that used Push Button Engine (PBE) and Mate as the basis for development. Feeling dissatisfied with PBE and Mate I wondered if there was a way I could take all the cool things I was playing around with RobotLegs and apply them to some of the cool aspects of PBE.

The first thing I did was to check to see if anyone else has had the idea of using DI in a component based game engine. It looked like it hasnt been done in AS3 but it looks like it has already been thought about and documented in Java. There has been a paper written about it here: http://portal.acm.org/citation.cfm?id=1658866.1658872, I managed to get my greasy mitts on it and enjoyed the read however I think there was definitely room for improvement in AS3.

The next thing was to seek advice on whether it could even be done in RL. I decided that I should go straight to the source and I emailed one of the contributors to the RL project, Stray. It turns out stray is a very nice lady who is also from the north of the UK. She had some good words of advice but she recommendation that I repost my question to the RL mailing list where the other contributors to the project tend to lurk.

So I wrote up my query and posted it. I added in some diagrams of how I thought it may look:

To cut a long story short, after several months of posts back and forth with many excellent suggestions and contributions I felt it was time that the project migrated to its own home as not spam up the RL list too much. As such SWft – Game Framework mailing list was born! Its still very new and as such there arent many posts yet but I hope for that to grow as the project progresses.

We also have a website: http://www.swft.co.uk but its meerly a holding page for now.

What exactly is it?

Okay so I promised I would talk about what SWFt actually is. Well without going into too much detail (more posts will follow that will flesh out examples etc) SWFt lets you make AS3 Flash games in a modular component based fashion like you do with Push Button Engine but it lets you keep the strict-type, compile-time checked game structure like you may find in Flixel or Flash Punk.

Its still very alpha and has alot more work left to do on it but you can follow progress on our GitHub page here: http://github.com/mikecann/Swft and some examples can also be found here: http://github.com/mikecann/Swift-Examples (the red-blue circle experiment is currently broken)

As I say, its still very early days, but I have been wanting to blog about it for a while as its a very exciting project im currently working on

Contributions

If you are interested in contributing code or thoughts or anything then shoot a message on the mailing list: http://groups.google.com/group/swft-framework

Expect more posts in the coming weeks!

Well its been a while since I have made a new mix, but I have been collecting tracks for it for a while. This one came together fairly quickly actually, about two days worth of composition and then a few variations until I was happy with it. I decided not to add any movie samples to this one to keep it nice and simple, got alot of other projects on at the moment! Im not even sure if people actually like those movie samples tho, let me know if you do!

I have called it Harmonics (Part 3) as the third instalment in my Harmonics series is long overdue and I felt that it just kinda felt like a Harmonics Mix.

Anyways, I have uploaded the mix to SoundCloud and used the last remaining hour that the free account gives you Give it a listen or download below:

Artificial – Harmonics ( Part 3 ) by mike.cann

The tracklist is as follows:

If you liked this mix and havent heard my other ones then you can grab those here: http://www.mikecann.co.uk/misc/sound-cloud-previous-mixes/

I have called it Scribble and its very basic at the moment, not containing even many of the simple features in Harmony, I do however intend to keep adding to it. So over the course of several weeks I hope to add bit by bit till it becomes a fun little place to Scribble!

Anyways, you can check out the current state of the thing here –> http://www.mikecann.co.uk/flash/Scribble_v0-1/Scribble.html

Splendid!

A while back, I had an idea for a very simple application that would sit in your taskbar and give you at-a-glance performance info about your system, similar to iStat Pro for OSX. This weekend I finally had time to clean up the code up for release.

The problem is that while looking for a couple of images for the app I happened to stumble across Taskbar Meters, which is pretty much the exact same idea I had. Looks like he has made a better job out of it that me too

Ah well, I have decided to release my version of the app nonetheless:

You can open the app multiple times and set each one to monitor a different value:

I have also decided to post the source up on google code: http://code.google.com/p/win7-taskbar-mon/

Anyways you can grab version 0.1 here: http://win7-taskbar-mon.googlecode.com/files/Windows7_Taskbar_Monitor_v0.1.zip

Thankfully however adobe provide the tools to allow for resizing the native window. So I produced this little mxml component to let you resize the window:

The coloured edges indicate where the application is draggable, including the white corner areas.

The component that lets you do this is pretty simple:

Source code

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
 
<fx:Script>
<![CDATA[
import flash.display.NativeWindowResize;
import flash.events.MouseEvent;
 
import mx.managers.CursorManager;
public static const RESIZE_AREA : int = 10;
 
protected function onRollOver(event:MouseEvent):void
{
}
 
protected function onRollOut(event:MouseEvent):void
{
}
 
protected function onMouseDown(event:MouseEvent):void
{
var grp : Group = event.target as Group;
var resizeFrom:String = "";
 
if (grp==topSide){ resizeFrom=NativeWindowResize.TOP;	}
else if (grp==rightSide) { resizeFrom=NativeWindowResize.RIGHT; }
else if (grp==bottomSide) { resizeFrom=NativeWindowResize.BOTTOM; }
else if (grp==leftSide) { resizeFrom=NativeWindowResize.LEFT;	}
else if (grp==topLeft) { resizeFrom=NativeWindowResize.TOP_LEFT;	}
else if (grp==topRight) { resizeFrom=NativeWindowResize.TOP_RIGHT;	}
else if (grp==bottomRight) { resizeFrom=NativeWindowResize.BOTTOM_RIGHT;	}
else if (grp==bottomLeft) { resizeFrom=NativeWindowResize.BOTTOM_LEFT;	}
else { return; }
 
stage.nativeWindow.startResize(resizeFrom);
}
 
]]>
</fx:Script>
 
<s:Group id="topSide" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="0" y="0" width="{width}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xFF0000" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="rightSide" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="{width-RESIZE_AREA}" y="0" width="{RESIZE_AREA}" height="{height}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x00FF00" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="bottomSide" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="0" y="{height-RESIZE_AREA}" width="{width}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x0000FF" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="leftSide" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="0" y="0" width="{RESIZE_AREA}" height="{height}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="topLeft" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="0" y="0" width="{RESIZE_AREA}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="topRight" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="{width-RESIZE_AREA}" y="0" width="{RESIZE_AREA}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="bottomRight" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="{width-RESIZE_AREA}" y="{height-RESIZE_AREA}" width="{RESIZE_AREA}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
</s:Rect>
</s:Group>
 
<s:Group id="bottomLeft" rollOver="onRollOver(event)" rollOut="onRollOut(event)" mouseDown="onMouseDown(event)"
x="0" y="{height-RESIZE_AREA}" width="{RESIZE_AREA}" height="{RESIZE_AREA}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
</s:Rect>
</s:Group>
 
</s:Group>

To use it in your app just add the component into your existing view somewhere:

Source code

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">
 
<components:WindowResizer width="{width}" height="{height}" alpha="0" buttonMode="true" />
 
</s:SkinnableContainer>

Setting the alpha to zero will obviously hide the coloured areas at the side of the window.

Grab the mxml here: WindowResizer.mxml

For a while now (alot longer than I had hoped for) I have been working on a project that falls outside the realms of my usual kind of games-related projects. Im not ready do describe exactly what it is yet but im excited about it.

For months I have been struggling with the techinal challenges the project has entailed and I have dabbled with many new and highly diverse technologies including JavaFX (Java), Qt (C++) and Mono (C#).  I have been looking for a cross-platform technology that will get the job done that I need and doing it in an elegant manner.

I thought I had found it with a combination of JavaFX and straight Java using the PureMVC framework. I however was plagued with problems throughout with Bonjour, jGroups, JmDNS, JNI and JNA.

So after months of work, hardship and struggles I read a very interesting article on the up-and-coming Adobe AIR 2.0  that was opened for beta in December. With 2.0 Adobe are bringing NativeProcess  to Air. What this means is that you can you can execute native code (.dlls, .so, .jar etc) from Air. To me this was bloody brilliant as I had been playing with Air reccently and my day-job heavily involves Flex and I simply love the power and beauty of Flex.

So what this meant to me was that I could write the bulk of my project including its interface in my much preferred Adobe Flex (Air) and then use Native Process to communicate with a small kernel of Java that would do all the dirty work that Air itself cant do.

So after a little playing with Flerry for Air->Java bridge I started to think about the structure of the code and the framework I would use. For my initial few runs at this project I had been using the Java version of PureMVC. I really like some aspects of PureMVC but I think its can be so overly cumbersome in some circumstances (ill write another post on this in the future I think). So instead I looked at the alternatives.

I have been using Mate alot recently at work and on my own mini-project the Audio Book Organiser. However as this project is partly for my own learning and personal growth I decided to look at what else there was out there. From the videos by Jessie Warden I had heard about Robot Legs. Apparently this framework has been around for a while, but it was the first I had heard of it. Taking at look at it I immediately became very excited as it looks like it offers all the things that make PureMVC great but without the extra coding-baggage that goes with it.

To add to my interest it appears another very interesting, very new action-script technology has been introduced into Robot Legs called Signals by Robert Penner. Signals is an alternative to the standard events dispatching method found throughout flash (more on this in another post).

So why have I called this post “the bleeding edge?”. Well Adobe Air 2.0 is still in beta and has only been for a month or so. Its so new that some parts still havent been documented atall and the only way to find out how they work is to post a msg to the devs on the forums. Signals is also new and its integration into Robot Legs is very new indeed (last coupple of weeks). So at the moment I feel as if im at the forefront of some very new, very exciting technology, a stark contrast to my fiddlings with the ancient Java.

I realise this post is very text and tech-heavy but I needed to post about it before I forgot all the pain I have gone through with this project to get where I am at the moment. Future posts ill be delving a little deeper into some of my experiments with these new technologies

Well I was just doing some audio book organising and realised that it would be great if I could drag and drop a folder straight from my AIR into iTunes ready for upload to my iPhone.

Anyways after a little searching through the docs I came up with this little ditty:

var cp : Clipboard = new Clipboard();
cp.setData(ClipboardFormats.FILE_LIST_FORMAT, [new File(book.url)], false);
NativeDragManager.doDrag(null,cp);

<mx:DataGrid width="100%" height="100%" dataProvider="{books}" editable="true"
  itemEditEnd="{dispatchEvent(new BooksEvent(BooksEvent.PROPERTY_CHANGED));}"
  dragEnabled="true"
  dragStart="{dispatchEvent(new BooksEvent(BooksEvent.BOOK_BEGIN_DRAG, AudioBookModel(event.currentTarget.selectedItem)))}">

Just did a quick update to the audio book organiser. Added the ability to move the storage database file. This was so that I can put my storage file on Dropbox and it will then be backedup and synced between machines.

New version and sources:

Source: http://www.mikecann.co.uk/flash/AudioBookOrganiser/AudioBookOrganiser_v120_source.zip

Although there has been merryment abound, the keyboard couldn’t keep me away. Its probably okay to say this now as im not under any secrecy act; I have decided to leave Massively Multimedia in Manchester to join a new startup called Ideas Pad in Wilmslow (just south of Manchester).

I cant say too much about exactly what I will be working on just yet but I can say that it will involve my experience in the Flash world. Specifically, I will be working in Adobe Flex again on some fairly sizeable projects. For this reason I wanted to brush up on my Flex as there has been a new release of the IDE (now named Flash Builder) and the SDK.

In addition I wanted to look at the various frameworks in use for Flex these days. I have used the usual Cairngorm, PureMVC before however I stumbled accross a new one called Mate (pronounced mah-tay, like the drink). Mate looked very interesting to me so before I jumped two feet in and used it in a commercial project I wanted to give it a spin in a simple project first.

Finally we get to the point of this post. I have developed a simple Adobe AIR application that allows you to organise audio books. The basic idea is simple you give the application a selection of ‘source’ directories where your audiobooks belong then you can tick off whether you have listened to each one, and what rating you would give them.

The data is persisted to a file that is saved to your hard drive, so when you open the application up again next time it remembers which audio books you have listened to and what ratings you gave them.

I havent tested it very much atall so there is a very high likelyhood of being some strange bugs in there. I am also releasing all the source code for this project for all to see, use and study if they so wish.

Source: http://www.mikecann.co.uk/flash/AudioBookOrganiser/AudioBookOrganiser_v101_source.zip

One of the basic tenants of the app is that it needs to work  cross-platform, so on mac, windows, linux, etc. As my previous experience with any sort of cross-platform coding involves using Java that was my natural first choice.

It has been a while since I have coding anything substantial in Java, infact my university project Chain Reaction was my last serious foray into the language:

I knew that I wanted a nice rich interface for the project as it was intended to be sold to non-technical users. My first choice with Java was naturally with Swing. This, however, soon brought back various memories of ‘JPanels’, ‘Layouts’ and ‘Look and Feels’  and the headaches of trying to make simple things look attractive (tho some cool advances have been made with substance look and feel).

After having worked for years with Flash / Flex I had grown used to the ease of drawing graphics and manipulating Display Objects in the display hierarchy. I was dismayed at how difficult it was to do what I considered ‘simple graphic tasks’ using Java!  A simple google search for the terms “Java 2d graphics” demonstrates how old some of the concepts and documentation is on the subject.

I ended up writing and rewriting my view using different libraries like G:

I found them all to be unwieldy and too inflexible for what I had in-mind. It all just seemed so archaic and old-hat.

So I was becoming more and more frustrated with myself for not progressing with the project and becoming hung up on something I had taken for granted in the Flash world. It was then that I happened to stumble across (this is after weeks of struggling) the JavaFX project. Now I had heard about this many months back but had dismissed it as Suns rather lame attempt to steal some of Adobe’s dominance of the Flash player market (much like Microsoft’s attempt with Silverlight).

As I was at the end of my line with Java I thought, hell why not give it a little look. Well it took me by surprise. It turns out that JavaFX is rather neat!

For those who havent heard f JavaFX; taken from Wikipeda:

JavaFX is a software platform for creating and delivering rich Internet applications that can run across a wide variety of connected devices. The current release (JavaFX 1.2, June 2009) enables building applications for desktop, browser and mobile phones.

TV set-top boxes, gaming consoles, Blu-ray players and other platforms are planned.JavaFX is fully integrated with the Java Runtime Environment (JRE) – JavaFX applications will run on any desktop and browser that runs the JRE and on top of mobile phones running Java ME.

What this means is that you can (with a little jiggery pokery) use JavaFX with normal Java. This is great as I had already written a whole load of code in Java which I didn’t want to get rid of.

The language JavaFX Script is great. It took a little getting used to as it is a declarative language (much like Flex’s MXML except that instead of using XML as the language it uses a Java Script like notation) but once I was used to it I could immediately see the awesome power it brings.

A little sample of code to give you a feel of how its declarative approach works:

Stage {
    title: "Ello World"
    width: 300
    height: 300

    scene: Scene {
        content: [
             Text {
               font: Font { size: 22 }
               x: 20, y: 90
               textAlignment: TextAlignment.CENTER
               content:"Ello World!"
             }
        ]
     }
}

This is your standard “Hello World” (but with a British twist):

The simplicity of rendering things to the screen was just what I was looking for as the for this project, it was a double bonus that the language is powerful.

I love some of the features of the language like the natively build in binding, the sequence manipulations, but Ill talk more about some of these features in another post as I have rambled enough in this one as it is.

For now however, if you want to do some more reading into JavaFX  I HIGHLY  this short set of tutorials: Learning the JavaFX Programming Language – Tutorial