Shader Based 2D Shadowing

Sunday, August 15th, 2010

Those who know me know I used to do quite abit of development in c# using Microsoft’s XNA platform.

Well I like to check back in every now and then with some of the big players in the community to see what’s going on.

One of those players is Catalin Zima, who is famous for producing many great shader and effect samples.

One of Catalin’s reccent project particularly caught my eye however as I had tried to tackle the same problem several years ago when I was in my final year of university. That is, Dynamic 2D Shadows Calculated on the GPU (http://mikecann.co.uk/university-projects/shadowshader-in-rendermonkey/)

Catalin’s approach to the problem is far more elegant that my brute force iterative approach. He uses a clever technique of distorting the desired casting image about the light in such a way as not to require iterative pixel lookups.

If you are interested in the more details in the technique I encourage you to check it out over on Catalin’s blog: http://www.catalinzima.com/2010/07/my-technique-for-the-shader-based-dynamic-2d-shadows/

Tags: , , , , , , ,

Flex 4 Spark & Rollover Group Containing Rect

Monday, August 2nd, 2010

Was working on my top-secret Flex-based project over the weekend when I discovered something I hadn’t come across before.

The issue is that when you have a Spark Rect GraphicsElement within a Spark Group it seems that the rollover event of the group is triggered even though the mouse doesn’t roll over the Rect.

Here is a video I made to explain my issue on Twitter:

The code in the video is as follows:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"> 
 
	<s:Group rollOver="trace('ya')">
		<s:Rect x="100" y="100" width="20" height="20">
			<s:fill>
				<s:SolidColor color="0x00ff00" />
			</s:fill>
		</s:Rect>
	</s:Group> 
 
</s:WindowedApplication>

It turns out (after posting the issue on the Adobe Forums) that I was simply missing the “mouseEnabledWhereTransparent” property on the Group. Setting it to false causes the mouse to perform a hit-test rather than a simple bounds check. Thank you Mr Shongrunden for pointing this out to me :)

So this now works:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"> 
 
	<s:Group rollOver="trace('ya')" mouseEnabledWhereTransparent="false">
		<s:Rect x="100" y="100" width="20" height="20">
			<s:fill>
				<s:SolidColor color="0x00ff00" />
			</s:fill>
		</s:Rect>
	</s:Group> 
 
</s:WindowedApplication>

I hope this helps someone else out!

Tags: , , , , , , , ,

Funk IoC – A New Dependency Injection Framework

Thursday, April 8th, 2010

Twitter can be a funny beast, what makes it great can also make it poor. I use Twhirl which keeps me updated any time one of the people I follow tweets about something, the only problem is that so many people tweet that if I dont happen to see it within about and hour or so of the Tweet, ill miss it. This time however I was lucky enough to catch a tweet by @Joa about his new Inversion of Control and functional-programming-like library, Funk AS3.

As I have been getting well into RobotLegs (a Dependency Injection MVCS framework) recently I was extremely interested to hear about this new project by Joa who I respect very much as a brilliant coder not least because of his excellent work on low-level Flash byte-code optimisation (see Apparat).

Joa has taken a different approach to doing dependency injection. The approach most frequently used (and the one used in SwiftSuspenders / RobotLegs) is to use meta-data to declare to a number of variables for injection. You then map a class to be injected and instantiate it using the injector.

As an example, with Swift Suspenders you would define a class for injection with something like the following:

  1. class MyInjectedClass
  2. {
  3. public function sayHello(toSay:String)
  4. {
  5. trace("Hello "+toStay);
  6. }
  7. }
  8.  
  9. var injector : Injector = new Injector();
  10. injector.mapSingleton(MyInjectedClass);

Here we are telling the Injector to make a single instance of our class and hold it internally ready for when it is next requested, such as:

  1. class MyDependantClass
  2. {
  3. [Inject] public var myClass : MyInjectedClass;
  4.  
  5. public function performAction()
  6. {
  7. myClass.sayHello("World");
  8. }
  9. }

Here the [Inject] meta-data indicates that we want the framework to supply the class with an instance of type MyInjectedClass. The final part is to make an instance of the dendant class and inject into it:

  1. var dependant : MyDependantClass = new MyDependantClass();
  2. injector.injectInto(dependant);
  3. dependant.performAction();

As you can see this is a nice way of handling inter-module dependencies in your code, when coupled with a MVC framework such as RobotLegs it becomes and extremely powerful yet elegant way of coding.

It however isnt perfect and Joa, on his google code page mentions three drawbacks of this method:

  • Your injected properties are publicly exposed and mutable.
  • describeType is very expensive.
  • Steep learning curve.

This is where he suggests his alternative method, which is quite ingenious. Using the same example as above you would see something like the following:

  1. class MyInjectedClass
  2. {
  3. public function sayHello(toSay:String)
  4. {
  5. trace("Hello "+toStay);
  6. }
  7. }
  8.  
  9. bind(MyInjectedClass).asSingleton();

Then the dependant class would look like the following:

  1. class MyInjectedClass
  2. {
  3. protected var myClass : MyInjectedClass = inject(MyInjectedClass);
  4.  
  5. public function performAction()
  6. {
  7. myClass.sayHello("World");
  8. }
  9. }

And making an instance of it could be as simple as:

  1. var dependant : MyDependantClass = new MyDependantClass();
  2. dependant.performAction();

As can be seen there are some benefits to this method, the biggest one in my opinion is that injected properties dont have to be public as they are provided by the call from within the class scope rather than from outside.

So how does Joa perform this magic? By abusing a little used ability of the Actionscript programming language known as package-level-functions. These are throwbacks from the old AS1 & AS2 days of global functions. There are actually a couple of common examples in AS3 still such as getTimer() and getQualifiedClassName() still used. What Joa has done is to use these package level functions as a method of generating concise looking code reminiscent of functional programming.

Performance wise, im not entirely sure whether by using package-level functions instead of describeType() calls used in meta-data driven IoC frameworks is any faster as Till Schneidereit of Swift Suspenders suggests:

I don’t think that Funk’s approach is any faster than an optimized
metadata-based IoC container: describeType may be slow (as in “takes a
few dozen microseconds to run”), but is only ever called once for each
class an instance of which is injected into. After that, it’s just a
straight iteration over an array for all injection points instead of
Funk’s multiple method calls for each injection point.

So the next step for me is to run some tests to see how things pan out. Either way im very impressed with both approaches and cant wait to see what kind of exciting advances will be developed in the coming months.

Tags: , , , , , , , , ,

On the Bleeding Edge

Wednesday, February 10th, 2010

Well it thought it was about time I did some posting about my personal project im working on at the moment as I havent spoken about my coding for a while.

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 ;)

Tags: , , , , , , , ,

AudioBook Organiser v1.3.0 – Drag'n'Drop

Tuesday, January 12th, 2010

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);
Which gets fired by my DataGrid in the view:
<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)))}">
Its pretty cool.
Anyways, the latest version and the source is below:

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

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

Tags: , , , , , , ,

Quasimondo's Galactose

Sunday, January 10th, 2010

ScreenHunter_02 Jan. 10 20.13

I have immense respect for some of the flash developers out there and Quasimondo is one of them. He has just released a little particle related experiment.

Whenever I see these kind of things it inspires me to bash out my own little experiments.

I wont talk too much about it but check it out on this lab page: http://incubator.quasimondo.com/flash/galactose.php

Tags: , , , , ,

Audio Book Organiser v1.2.0

Saturday, January 9th, 2010

ScreenHunter_01 Jan. 09 18.34

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:

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

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

Tags: , , , , , , , ,

Audio Book Organiser (AIR, Mate, Flex 4)

Wednesday, December 30th, 2009

Well its been a fun Christmas, I have eaten and drunk to the point that im going to be running it off in the gym till next christmas.

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.

ScreenHunter_02 Dec. 30 12.32ScreenHunter_03 Dec. 30 12.32

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.

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

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

Tags: , , , , , , , ,

Flirting With JavaFX

Sunday, December 13th, 2009

For the past several months I have been working on a little project completely different to anything I have done before. Its a desktop application that uses a number of novel technologies to do something I think is pretty cool. Ill talk more about what it actually is and does in the coming weeks, but for this post I just want to talk about the struggles and discoveries I have been through and made with the technology.

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:

ScreenHunter_03 Dec. 13 20.05

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_logo_color_1JavaFX 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):

ScreenHunter_06 Dec. 13 20.32

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

avaFX 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.

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.

Tags: , , ,

The Case of The Transitional Doctype

Thursday, December 10th, 2009

I took a little break from my ‘top secret’ project (more on this coming soon) this evening to do some much needed repair work on one of my flash games portals www.worldsbestflashgames.com.

Top of my list was the fact that the index page doesn’t render correctly in IE7. What makes it odd is the fact that the category pages which are essentially identical to the index page rendered fine.This is what it looked like:

ScreenHunter_01 Dec. 10 19.28

Normally when you hear that there is an issue with a site on IE and not on FF or other browsers you automatically assume its CSS, and so did I. After stripping the site down to its bear bones however, comparing the index page against the category page I will still getting this oddness.

To cut a long story short I worked my way up from the bottom of the page to the top until I reaced the very top line:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

This line was the only line that differed in the index to the category page, which read:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

So I took out the “Transitional” and low and behold it worked!

ScreenHunter_02 Dec. 10 19.41

No idea what Transitional does, but I hope this helps someone else out in the future!

Tags: , , , ,