Here at ZaaLabs we consider ourselves to be workflow zealots. We’ve recently expanded our team to include a few exceptionally talented artists. As Flash Game development moves into the Stage3D realm (not just 3D games, but 2D as well), tooling becomes incredibly important. Most studios with a decent budget actually build custom tooling, tailored for the game.

The original goal for the Eden Platform was to make creating these custom tools for your game easier. We had grand ideas of having a vast library of plugins where developers could pull pieces of functionality together so that you didn’t have to write tools from scratch. We’re still fond of this idea, and believe it can work (but perhaps not a plugin based system).

However, when it came to starting a new project that required tooling, we found ourselves reusing pieces of code from Eden to retrofit into our new tooling. The reason for this was because the plugin system we had built was overly complex to get working quickly and easily. If we couldn’t get the plugin system working for our use case (the team who developed Eden in the first place)… how on earth is it be viable for other developers to use?

Other problems became apparent while developing Eden. We chose to use Adobe Flex as the framework for our tooling system. This caused MANY development issues while attempting to bend Flex (and the Flash Platform) in ways that were never envisioned: runtime shared libraries, SDK compliance, the marshall plan, halo vs spark – this list goes on. While Flex is a great framework for form-based, enterprise-level applications, getting it to play nicely with the Eden Platform was an insurmountable task for us. (We are excited for what changes Apache Flex will bring).

So now, one year later, we find ourselves at a fork in the road. We can either rebuild Eden from scratch or send it to greener pastures. The Eden Platform development team has enjoyed the ride, but some of the team has decided that this is their stop.

So at this time, we are announcing the discontinuation of the Eden Platform.

This doesn’t mean that ZaaLabs has given up on the dream of building some of the industry’s best tools – far from it. But it does mean that the Eden Platform will no longer be sold or supported.

If you have any questions or concerns, please feel free to contact us.

And don’t worry about Hank (our superhero character), he’ll be back.

Cheers!

Since our release of ZaaIL, there have been loads of questions and clients who have contacted us regarding deeper support of three formats: TIFF, JP2000 and DICOM.

We’re happy to announce that ZaaLabs has addressed the first of those three image formats, the TIFF format.

ZaaTiff (AS3 and JavaScript)

We currently have a build of what we’re calling our ZaaTiff library. Below you can see screenshot of us parsing a TIFF file and displaying it in Flash in the browser. We have also built a very rudimentary document viewer using minimal comps.

We also have built out an ExternalInterface JavaScript bridge.

And finally, we have also built out an experimental JavaScript version of the TIFF Parser which renders to an HTML5 Canvas.

We need your help!

The TIFF file specification is expansive, and finding test images of all the different formats is quite difficult. In an effort to make ZaaTiff all-encompassing, we need more test images of varying types.

What we’re looking for:

• 1 Bit Per Pixel / Group 3 1D / CCITT modified Huffman RLE
• 1 Bit Per Pixel / Group 3 2D / CCITT Group 3 fax encoding
• 1 Bit Per Pixel / Group 4 2D / CCITT Group 4 fax encoding
• 8 Bits Per Pixel / JPEG Compression
• 8 Bits Per Pixel / LZW Compression
• 24 Bits Per Pixel / LZW Compression
• 24 Bits Per Pixel / JPEG Compression
• Pretty much any TIFF file…

If you have TIFF files sitting around, email them to info [at] zaalabs [dot] com, with the subject of “ZaaTiff Test Image”.

Any questions, comments, etc… feel free to comment below.

Thanks!

Set #1

Set #2

We’d love to hear your thoughts.

Cheers,
The ZaaLabs Ninjatude Team

So we’ve been talking a lot about the Eden Platform, but people are still confused about what it is. This video is a tour of Eden, specifically showing how it is being used in the development process of PushButton Labs’ upcoming game, Grunts: Skirmish.

In a place known as The Forest (at least by the locals), there exists a clan of Ninja Squirrels who fight to keep the peace. Filled with the power of their greatest treasure, the mystic Golden Acorn, they root out evil and defend the creatures of the trees. Of course, since no good deeds go unpunished, the Ninja find their great treasure stolen away in the night. Deprived of their strength and ability, the Squirrels have sent out their best lone warrior to retrieve the Acorn.

We’re working with a stellar team of Game Designers, Artists and Developers coming to us from Digipen.

We need your help

I’d like to introduce you to our main character… who has yet to be named. So we need your help. Put your suggestions for names in the comments below. Here is some more concept art to get you thinking.

More information will be coming soon. So be sure to keep checking back here.

Cheers!

As many of you know, ZaaLabs was in charge of the recording 360|Flex Denver. The conference was fantastic, one of the best I’ve been to.

Since the conference I’ve been getting questions non-stop about the availability of the videos. So here’s the deal.

We’re currently in the process of importing the videos… which let me tell you is a task

Once we finish importing we’re going to edit a few videos to release right away on ZaaTV, free for everyone (I’ll update these with links as the become available):

• Day 1 – Keynote
• Day 2 – Keynote – Spooooon!
• Deepa Subramaniam – What’s New in Flex SDK 4.5
• Narisco (NJ) Jaramillo – Multi-Density & Multi-Platform Application Development
• DELAYED – Audio issues – Sreenivas Ramaswamy – Flash Builder Tips & Tricks
• Evtim Georgiev & Steve Shongrunden – Flex Performance Tips & Tricks
• Adam Lehman + Special Guests – What’s New in Flash Builder 4.5
• DELAYED – Audio issues – Jacob Surber & Peter Flynn – What’s new in Flash Catalyst Panini

After we get these first few videos online, there are a few options for the rest of the sessions.

I was at 360|Flex Denver

If you attended 360|Flex in Denver, you will be able to download the videos for free as soon as they are available (be aware it will take a couple of months).

I wasn’t there, but I want the videos now.

Well then you are in luck, if you didn’t attend 360|Flex but you would like to get the videos sooner rather than later, you can buy them from the 360|Flex website as soon as they are available.

I wasn’t there, and I’m not interested in purchasing the videos.

That’s okay too! Going forward, we will release one session per week free on ZaaTV. We will have polls for you guys to vote for which session you want to see next.

Any questions, let us know!

Cheers!

While developing Eden, we encountered a similar problem and ended up writing our own injection system. We’re fond of it, and wanted to use it in PBE… so we open sourced it. Take it, use it, modify it… we’re releasing it under the MIT License.

Check out the source over on GitHub.

Make sure you add this to your compiler arguments:

-keep-as3-metadata+=Inject,PostInject

Here’s a basic example of using ZaaImbue:

package
{
    import com.zaalabs.imbue.IInjector;
    import com.zaalabs.imbue.Injector;

    import flash.display.Sprite;

    public class ImbueExample extends Sprite
    {

        [Inject] 
        // this will inject an instance of ExampleClass into this property
        public var myFirstInjectedInstance:ExampleClass;

        [Inject]
        // this will inject an instance of AnotherExampleClass into this property
        public var mySecondInjectedInstance:AnotherExampleClass;

        public function ImbueExample()
        {
            // create an instance of the classes we want to inject
            var myLocalMember:ExampleClass = new ExampleClass();
            var anotherLocalMember:AnotherExampleClass = new AnotherExampleClass();

            // This is actually all it takes to inject something
            var injector:IInjector = new Injector();
            injector.mapValue(myLocalMember, ExampleClass);
            injector.mapValue(anotherLocalMember, AnotherExampleClass);
            // apply the injections!
            injector.apply(this);
        }

        [PostInject]
        // This gets called after an injection has occurred on the target
        public function onPostInject():void
        {
            trace("We are all done injecting, now we can use our instance!");
            trace("Name of first injected instance:", myFirstInjectedInstance.name);
            trace("Name of second injected instance:", mySecondInjectedInstance.name)
        }

    }
}

Some people have asked us why we called it “Imbue”… frankly… we didn’t want to call it Injection, so we looked up synonyms on the interwebs and imbue was one of them.

We all played a lot of Diablo 2, and had fond memories of Charsi imbuing our gear with magical properties… and that’s where imbue came from.

Exhibit A:

And for those of you who need to see the shirt on a model… here’s the lovely Erin showing us how to rock this awesome t-shirt.

How can I get one?

There will be three of us wearing this shirt at the Flash Gaming Summit on Sunday. All you have to do is come up and introduce yourself, and you get a shirt… while supplies last

See you there!

The Problem

The particular JavaScript quirk we were discussing was window.innerHeight functions on mobile devices.  During our development on mobile devices, we ran into two frustrating issues.

Simeon’s issue was with the way window dimensions get messed up when an Android device is re-oriented.

My issue was with the way that window.innerHeight tells you how much space you have with the url bar on the screen, until the url bar is scrolled off the screen, then it reports the actual space that you can work with (since this is my post we’ll talk about my problem). This issue if frustrating because I’m trying to get a webpage to take up the whole screen on the mobile device, with the url bar scrolled out of view.

To illustrate what I’m discussing, I’ll show side by side screenshots.  The screenshot is of a page that reports the screen height and width and the window innerHeight and width and updates them on an interval.  On the left you have the URL bar, on the right the URL bar has been scrolled off the screen.  Notice how the screen size has remained the same, but the window.innerHeight has changed.

We both understood the problems we faced, but both believed there had to be a good and right way to solve the problem, a “best practice” if you will.  Having spent time working in the Flex community, we had come to expect an elegant way of solving the issues we faced.

Neither of us are foreign to forging our own paths through new territory, but we’re generally used to coming to a solution that feels right.  When things start getting hacky we feel like we’re in the wrong place and try to research the problem looking for a more elegant solution.

Finding A Solution

In our scenario with window.innerHeight we were trying to think how we could go about getting the height of the space we can use in an elegant fashion, and couldn’t come up with anything.  We knew how to accomplish our tasks in an inelegant fashion, but thought it was a common enough task that there would be a “right” or elegant solution.

Finally we realized that we knew of people out there who were doing what we wanted, and this is JavaScript after all, so we went and looked at the source. We checked in a few places, and discovered that most of the places we checked handled this problem in a similar way.  The great guys over at Sencha had this in their code for handling this problem and making sure the application is the correct size.

init: function (c, b) {
    var d = this,
        e = Math.max(window.innerHeight, window.innerWidth) * 2,
        a = Ext.getBody();
    d.updateOrientation();
    this.initialHeight = window.innerHeight;
    this.initialOrientation = this.orientation;
    a.setHeight(e);
    Ext.gesture.Manager.freeze();
    this.scrollToTop();
    setTimeout(function () {
        d.scrollToTop();
        setTimeout(function () {
            d.scrollToTop();
            d.initialHeight = Math.max(d.initialHeight, window.innerHeight);
            if (c) {
                c.apply(b || window)
            }
            d.updateBodySize();
            Ext.gesture.Manager.thaw()
        }, 500)
    }, 500)
}

The variable names are not great as its beautified code that was minified, but if you follow it you can see what they’re doing.

In order to size the app to the proper height and be able to have the url bar scrolled off the top, they have to double the size of the container, to ensure that they can scroll past the url bar. Then they scroll… twice on 500ms timeouts, and then they can fix the size of the app to bring the size down to what it really is without the url bar, since window.innerHeight will now report they value they want.

The Difference

This is where JavaScript development diverges from Adobe Flex development.  The fractured landscape of so many browsers and the impossibility of getting users to upgrade in a timely manner has left JavaScript developers with no choice but to hack their way through.

This is not to say that JavaScript lacks elegance… but that there are some areas where the hack is just what you need to do.

In Flex there are times where you need to implement a hack, but you generally implement it as a patch to the Flex SDK and your application code is spared the hack. This example underscores one of the big issues that Flex developers face as they move from the world of the Flash Player to the fractured world of browsers. To a Flex developer this feels like an inelegant hack, but to a JavaScript developer this is a great solution, because it works across all the different platforms we need to support.

Conclusion

I don’t present this information as a way of excusing Flex Developers from exploring HTML/JS development, but wanted to help developers understand this difference that can help on both platforms.

With this new found understanding if you feel like hopping into some HTML/JS development, may I suggest another article, by Simeon Bateman.