[Last October](/posts/try-harder-2012-slides/) I was fortunate enough to attend the excellent [Try Harder](https://www.tryharder.org.uk/) conference for the second time.[ I have spoken before](/posts/try-harder-2012/) about how inspirational the event is where every attendant must give a talk on something they are passionate about. One of the talks was by David Wagner's and was on 'The Value of Tinkering' and it inspired me to[ tinker with TypeScript](/posts/tinkering-with-typescript/) which led to my [Recursive Chrome Extension](/posts/personal-project/recursive/).



Before I go any further I should mention that there is a [Try Harder 'Level Up'](https://www.tryharder.org.uk/level-up-2013/) session taking place in April that is open to new attendees, I thoroughly recommend you check it out!

Following on in the same 'Tinkering' vein I have decided to investigate an AS3 library by another Try Harder attendee [Richard Lord](https://www.richardlord.net/blog):

[![logo](/wp-content/uploads/2013/02/logo.png)](/posts/tinkering-with-ash/attachment/logo-4/)

What is Ash? Well direct from the [Ash Website:](https://www.ashframework.org/)

> Ash is a high-performance entity system framework for game development.
>
> An entity system is a way to organise the code for a game that is efficient for both code execution and code management. It uses composition rather than inheritance for sharing features between game objects and uses a data-oriented approach to separate the game state from the game logic. This makes it much easier to manage the code and to manage the game state.
> Im not going to go into the details too much of why composition over inheritance is a good idea as Richard has already done a much better job than I ever could in these two posts:

- [What is an entity system framework for game development?](https://www.richardlord.net/blog/what-is-an-entity-framework)
- [Why use an entity system framework for game development?](https://www.richardlord.net/blog/why-use-an-entity-framework)
  If you haven't got a clue what im talking about when I say Entity or Component I strongly recommend checking out his posts first.

The reason why Ash has piqued my interest is because for the last three years I have been working with Entity-Component systems for games but in a totally different way. The way I have been using and developing started with the Push Button Engine (PBE) method and later expanded out to include Dependency Injection culminating in the [Swft Framework](/posts/swft-dependency-injection-component-based-game-framework/).

Ill give one example of why am starting to fall in love with Ash:

In PBE and Swft the components contain data and functions. They can also declare dependencies (via [Inject]) which are automatically fulfilled when a component is added to an Entity. The functions in the component are able to act on their own data, other components and interact with the game as a whole.

One problem with this method is that components are largely tied to their entity and once attached aren't really free be removed or added. The reason is because other component may have dependencies that depend on that component being part of the Entity. Removing the component will cause the game to crash. This becomes a problem when you want to enable a certain chunk of functionality for a certain time then disable it, what you tend to end up doing is adding the component at Entity creation time then inside of it toggling its behaviour with a boolean.

In Ash components are pure data with the bulk of the functionality being contained within systems. Sure you can have functions in a component but they **only act on their own data**. There are no hard dependencies between components. What this means is that components are much more free to be added and removed from Entities. So how do component function together then? Well that's where Systems come in.

Systems are classes that contain the logic that makes up your game. When added to the engine they grab one or many lists of Nodes. A Node simply defines a collection of components that must exist on an Entity. In effect it declares the dependencies that this System needs to operate. What's neat about this is that this list of nodes is constantly changing as components are added and removed from entities. The Ash Engine manages this all for you so all the system need do is iterate over the linked list of Nodes each frame and execute its logic.

Systems also must not declare dependencies between each other. This rule means you don't end up with large dependency hierarchies between Systems. This frees up systems to be added and removed from the Engine with no side effects! This is rather remarkable as it lets you do crazy things that you couldn't normally do when there are many dependencies between systems. For example your game could have a Blitting based rendering system, then halfway through a running the game you could swap that out that System and replace it with a Starling based rendering System!

Thus far I have only spent a limited amount of time tinkering with Ash but I am having a whole lot of fun. I have started work on a little game to experiment around with the framework. At the same time I have been exploring [Starling](https://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&ved=0CD8QFjAB&url=http%3A%2F%2Fgamua.com%2Fstarling%2F&ei=yiEdUazkL-uX0QWNz4EI&usg=AFQjCNHKL4BaeidkUlpmw48eBMwyhwG2tw&bvm=bv.42452523,d.d2k), the hardware accelerated 2D rendering framework built on Stage3D. Thus far I have produced this little map editor:

<object width="650" height="650" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="direct" /><param name="src" value="/projects/Mash/01/MashWeb.swf" /><param name="quality" value="high" /><param name="pluginspage" value="https://www.macromedia.com/go/getflashplayer" /><embed width="650" height="650" type="application/x-shockwave-flash" src="/projects/Mash/01/MashWeb.swf" wmode="direct" quality="high" pluginspage="https://www.macromedia.com/go/getflashplayer" /></object>
Click to place a block, shift and click to remove, scroll mouse to change block type and hold control and click to zoom in / out.

Its only a tech demo at the moment and as such hasnt got any game play elements. Im not entirely sure what to turn it into but as a platform for tinkering with Ash its been great.

Its too early to share the code at the moment but if you would like to see how some Ash code looks I strongly recommend you check out [Richard's Asteroids example on GitHub](https://github.com/richardlord/Asteroids). I was really quite taken aback by how neat and modular the code is. The example is provided in 4 different flavours, one using RobotLegs one with Starling one with SwiftSuspenders and one with no dependencies at all. The fact that the code still works and looks simple in all the examples really demonstrates the versatility of the framework :)


Just stumbled across this one while writing some mxml for a personal project and thought I would share.

Have you ever wanted to have multi-line text in your label component in spark and thought the following should work?

```

<s:Label text="I like text on the n next line" />

```

But all it produces is:

[![](/wp-content/uploads/2010/11/Shot_001.png "Shot_001")](/wp-content/uploads/2010/11/Shot_001.png)

Yep me too.

After some playing however I stumbled accross the following solution:

```

<s:Label text="I like text on the {'n'} next line" />

```

It then produces the expected result:

[![](/wp-content/uploads/2010/11/Shot_0021.png "Shot_002")](/wp-content/uploads/2010/11/Shot_0021.png)

Im just guessing but I suspect its something to do with the black art of the flex life cycle. By adding the {'n'} we are turning the property initialisation on the label component from a simple literal assignment into a delayed binding assignment and therefore gets parsed differently.

Just a guess, let me know if im way off.


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 ](https://www.robotlegs.org/) (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](/posts/on-the-bleeding-edge/)). 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](https://github.com/robertpenner/as3-signals).

At the time of this discovery I was working on a game that used [Push Button Engine](https://pushbuttonengine.com/) (PBE) and [Mate ](https://mate.asfusion.com/)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: [https://portal.acm.org/citation.cfm?id=1658866.1658872](https://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](https://groups.google.com/group/robotlegs/browse_thread/thread/f7e325c5caf14d93). I added in some diagrams of how I thought it may look:

[![](/wp-content/uploads/2010/06/Relationships-1-300x259.png "Relationships 1")](/wp-content/uploads/2010/06/Relationships-1.png)[![](/wp-content/uploads/2010/06/Example-1-300x161.png "Example 1")](/wp-content/uploads/2010/06/Example-1.png)

To cut a long story short, after [several months](https://groups.google.com/group/robotlegs/browse_thread/thread/4833ba99cd12b25a) of [posts](https://groups.google.com/group/robotlegs/browse_thread/thread/4d3eb6d8f8dd64bc#) 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](https://groups.google.com/group/swft-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: [https://www.swft.co.uk](https://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](https://pushbuttonengine.com/) but it lets you keep the strict-type, compile-time checked game structure like you may find in [Flixel ](https://flixel.org/)or [Flash Punk](https://flashpunk.net/).

Its still very alpha and has alot more work left to do on it but you can follow progress on our GitHub page here: [https://github.com/mikecann/Swft](https://github.com/mikecann/Swft) and some examples can also be found here: [https://github.com/mikecann/Swift-Examples](https://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: [https://groups.google.com/group/swft-framework](https://groups.google.com/group/swft-framework)

Expect more posts in the coming weeks!

Thought I would share this little ditty. Been working in AIR recently and decided to make the window "chromeless" which means there are no controls so no resizing.

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:



[![](/wp-content/uploads/2010/02/ScreenHunter_02-Feb.-21-21.40.gif "ScreenHunter_02 Feb. 21 21.40")](/wp-content/uploads/2010/02/ScreenHunter_02-Feb.-21-21.40.gif)

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

The component that lets you do this is pretty simple:

```

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="https://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:

```

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="https://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](https://www.mikecann.blog/Files/WindowResizer.mxml)