For the past 18 months I had the opportunity to work with an amazing team at The Engine Company. We have done some amazing stuff with Loom, innovating on workflow, making cross-platform deployment incredibly easy. I’m really proud of the work that we have done. I’m super excited that the Loom SDK is open source, and I believe that Loom Turbo is the BEST offering out there on the market for cross-platform 2D games.

Recently I have decided that I would like to pursue other interests. As such, I have resigned from The Engine Company. The team will continue to make huge strides in building the Loom SDK into amazing platform to develop on. They’re doing an amazing job, and will continue to do so.

If you’d like to contact me, feel free to ping me on LinkedIn.

Cheers!

The Photoshop Puzzle consists of 20 levels. The goal is to find the code to take you to the next level. There are hints below each image written in white on a white background. You can simply highlight the text to make it show up. I highly recommend trying it for yourself first and only use these solutions if you are absolutely stuck.

I used Adobe Photoshop CC 14.1.1 on a Mac for all levels with the exception of Level 19 which I note down below.

You can start the puzzle here: http://www.rognemedia.no/Puzzle/

Level 1 Solution

URL

http://www.rognemedia.no/Puzzle/

Hint

add dk4ha.html in the address bar to find the next level. Small letters.

Solution

This one is pretty simple, add dk4ha.html to the end of the URL to advance to the next level. This level shows you the basics of what you need to do to proceed to the next level, http://www.rognemedia.no/Puzzle/dk4ha.html

Level 2 Solution

URL

http://www.rognemedia.no/Puzzle/dk4ha.html

Hint

it’s getting hard to read… you might need Photoshop soon….

Solution

Again this one is pretty simple, as you can see this image has the code “asoxch” in the bottom left of the image. So you just need to change the url to ‘asoxch.html’ to advance to the next level.

Level 3 Solution

URL

http://www.rognemedia.no/Puzzle/asoxch.html

Hint

tiny

Solution

As the hint suggests, we’re looking for something quite small. The code for the next level is hidden in the bottom left corner of the image. Using Photoshop I zoomed in to read the code, and then changed the url to go to a4xi.html.

Level 4 Solution

URL

http://www.rognemedia.no/Puzzle/a4xi.html

Hint

so dark…

Solution

So this image appears to be solid black, and the hint suggests that it’s too dark. So we just need to lighten the image up. An easy way to do this is by using the Levels panel in Photoshop.

So open the image up in Photoshop and go to Image > Adjustments > Levels.

Once you have the Levels panel open, grab the white slider on the bottom of the Input Levels section, and slide it all the way to the left. The value will go from 255 to 2, and will expose the code to proceed to the next level.

Level 5 Solution

URL

http://www.rognemedia.no/Puzzle/5sichj.html

Hint

noisy colours

Solution

So at first glance this level looks like just a bunch of static. However, the code is in there. The solution is in the Channels Panel in Photoshop. If you open up the Blue channel, you can see a faint code hidden in there.

With the Blue channel selected, I open up the Levels Panel again, and move the white slider to make the code easier to read.

Level 6 Solution

URL

http://www.rognemedia.no/Puzzle/6sixja.html

Hint

numbers in the water…

Solution

So this level tripped me up for a bit, because the hint made me think that the gradient could be transformed into the code by using a filter. So I tried Ripple, Watercolor, etc… but none of them worked.

However, after looking through the Filters menu, I found the Digimarc Watermark filter. You can open using Filter > Digimarc > Read Watermark. The code is the Image ID ’765237′. Clever.

Level 7 Solution

URL

http://www.rognemedia.no/Puzzle/765327.html

Hint

beyond the channels

Solution

So by default in Photoshop, the Layers, Channels and Paths Panels are together. So the hint tells us “beyond the channels”, which means go one more tab over, in this case to the Paths Panel. As you can see there is a Work Path in this image. If you select it, you get the code to the next puzzle.

Level 8 Solution

URL

http://www.rognemedia.no/Puzzle/8xysha.html

Hint

hmmm, it’s not displaying in the browser…

Solution

This is the first of a couple of levels that use PSD files instead of standard web files (GIF, JPG, PNG). So you need to download the PSD file and open it up in Photoshop. In Chrome you can simply right click the image and select Save Image As.

Once you open the PSD in Photoshop, there are two layers. One is the Background layer, and the other is named ’9asoiu’, which is the code to the next level.

Level 9 Solution

URL

http://www.rognemedia.no/Puzzle/9asoiu.html

Hint

I think I’ll stop giving hints now… They are getting so meta…

Solution

Now he’s getting clever with his hints. He’s telling us that the code is in the metadata of the image. To open the metadata for the image go to File > File Info. You’ll see the code ’10welldone’ in the Keywords section.

Level 10 Solution

URL

http://www.rognemedia.no/Puzzle/10welldone.html

Hint

Sometimes the usefulness of hitns are offset by their usefulness…

Solution

This level can be a bit tricky at first, but notice the four corners of the image, the pattern diverges. Couple that with the hint of ‘offset’, it quickly becomes clear what we need to do.

So first things first, we need to take the image out of Indexed mode to make it editable. To do this go to Image > Mode > RGB Color. Once you’ve done that, it unlocks Filters menu. So now we want to use the Offset Filter, it’s located at Filter > Other > Offset.

This image is 500 x 500 pixels, so let’s offset it by half, and set the edges to wrap around. Now in the center of the image you can read the code ’11palu’ (remember each code is in lower-case).

Level 11 Solution

URL

http://www.rognemedia.no/Puzzle/11palu.html

Hint

I’m cross-eyed…

Solution

At first look of this puzzle, I wanted to know if there was some subtle difference between the two blocks of text. So let’s put one of top of the other, at half opacity.

We need to take the image out of Indexed mode to make it editable. To do this go to Image > Mode > RGB Color.

Next I use the Marquee tool to draw a box around the left block of text. With the Marquee tool still selected, I right click the selection and choose “Layer via Cut”. This will take this selection and move it into it’s own layer.

Next I select the Move tool and select “Layer 1″ (which is the new layer we just created) in the layers panel. I then turn the Opacity of the layer down to 50% (it’s in the layers panel). And finally I move Layer 1 over the top of the right paragraph of text, as you can see three words line up correctly: “ver”, “nibh”, “quis”, putting these three words together is the solution.

Level 12 Solution

URL

http://www.rognemedia.no/Puzzle/vernibhquis.html

Hint

Projecting a high successrate on this one…

Solution

We need to take the image out of Indexed mode to make it editable. To do this go to Image > Mode > RGB Color.

We just need to apply a Polar Coordinates filter to this: Filter > Distort > Polar Coordinates.

The next code becomes clear ’12xbpdb’.

Level 13 Solution

URL

http://www.rognemedia.no/Puzzle/12xbpdb.html

Hint

Want a hint? God save you…

Solution

I really liked this level, even though I’m not really sure of the meaning of the hint. However, looking at this image, it’s clear that some of the colors in the gradient are missing. Since this is an Indexed Color image, we can look at the Color Table. You can do this by going to Image > Mode > Color Table. Once you open the Color Table, the solution is quite clear.

Level 14 Solution

URL

http://www.rognemedia.no/Puzzle/14fl.html

Hint

No need for me to guide you…

Solution

I wouldn’t have been able to solve this one without the hint. You just need to turn on the guides in Photoshop, you can do this by doing View > Show > Guides. Also make sure that View > Extras is checked.

There is another hint in the image itself, “What letters in this sentence?”, with the guides on there are a few letters in the crosshairs ‘heesn’, which is the answer.

Level 15 Solution

URL

http://www.rognemedia.no/Puzzle/heesn.html

Hint

Don’t you just hate when the browser won’t display the image? I hope we can turn this trend around…

Solution

This is another PSD image that needs to be downloaded like in Level 8.

This level requires use of the 3D tools in more recent versions of Photoshop. You can open the 3D panel by using Window > 3D.

Once you have the 3D Panel open, you can simply select ‘Default Camera’, and you get a nice little animation moving the code into view, ’16acksjg’.

Level 16 Solution

URL

http://www.rognemedia.no/Puzzle/16acksjg.html

Hint

Time to go all Red Dwarf-CSI on this one…

Solution

This is another PSD image that needs to be downloaded like in Level 8.

So at first I didn’t get the reference to Red Dwarf – CSI, but a quick Google search resulted in this:

Which made me laugh pretty hard, but didn’t help me much. Perhaps someone could explain it to me

However, working with the image for a bit, I opened up the Filter Gallery, Filter > Filter Gallery, which made the code show up. Selecting the Film Grain effect under Artistic makes the code visible, along with a note “I’m impressed if you found this with no hint!”. Again, not sure how the hint plays into it. But alas, there is the code ’17alsj’.

Level 17 Solution

URL

http://www.rognemedia.no/Puzzle/17alsj.html

Hint

Solution

So no hint on this one, so we’re on our own.

At first I tried typing out the whole code, which didn’t work. I saw different numbers starting with 18 in there, so I thought, hey maybe there is some subset of the text we need to use.

I did notice that the image was Indexed Color, so I opened up the Color Table (Image > Mode > Color Table) again to see if I could find anything.

I grabbed the eyedropper tool, and selected the gray from the first “1″ in the string. This turned all of the grays with the same color to be transparent, leaving only the code remaining, ’18zxjvb’.

Very clever.

Level 18 Solution

URL

http://www.rognemedia.no/Puzzle/18zxjvb.html

Hint

Time for a new year’s resolution…

Solution

This hint was a dead giveaway, Image > Image Size. The resolution of this image is ’1991′, which is the code.

URL

http://www.rognemedia.no/Puzzle/1991.html

Hint

FFT

Solution

Okay so this puzzle is by far the hardest of all of them, and I’m not quite happy with my solution. So if you guys have a better way to solve this, I’m all ears.

This level introduced me to a new concept that I hadn’t seen before Fourier Transforms.

FFT is pretty dang cool stuff, it works really well for removing repeating patterns from images. Look at these animated gifs as an example.

Unfortunately, as far as I’m aware, Adobe Photoshop doesn’t have FFT support built in. So you have to use a third party plugin. The FFT Photoshop Plugin by Alex V. Chirokov (more info).

This plugin doesn’t work on Mac, so I had to hop over to my PC to finish the puzzle. I also considered writing a quick script to do it as well, but the Plugin worked on my PC.

So once you have the FFT plugin installed, open the image and use Filter > Fourier Transform > FFT.

You’ll notice some content on the edges, it’s most clear in the Blue Channel, so let’s select that.

Now we’ll apply the Offset Filter Filter > Other > Offset, and set it to 250 x 250, wrap around.

This makes the code readable, well readable to someone who has spent years answering CAPTCHAs. The code is ’20cjsdzxpy’. However, like I said, I feel as if I haven’t fully finished this puzzle. Input from others is more than welcome.

In Conclusion

I really enjoyed this series of puzzles, kudos to the Rogne Media guys for putting it together!

I’m going to spend a bit more time learning FFT, because it really seems like it would be helpful.

Questions, comments, feedback are more than welcome in the comments!

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!

View Slides Here

Set #1

Set #2

We’d love to hear your thoughts.

Cheers,
The ZaaLabs Ninjatude Team

I’ve run into a bug with the released version of the Adobe Flex 4.5 SDK. The 4.5 version of the SDK does not respect keeping [Embed] metadata in your SWF. This is problematic because we use this metadata extensively in PushButton Engine.

Take the following example into account:

TestMetadata.as

package
{
    import flash.display.Sprite;
    import flash.utils.describeType;
 
    public class TestMetadata extends Sprite
    {
        public function TestMetadata()
        {
            var typeInfo:XML = describeType(TestClassWithEmbed);
            trace(typeInfo);
        }
    }
}

TestClassWithEmbed.as

package
{
    public class TestClassWithEmbed
    {
        [Embed(source="assets/flip.png", mimeType="image/png" )]
        public var Flip:Class;
 
        [SomeMeta(source="assets/flip.png", mimeType="image/png")]
        public var Test:Class;
    }
}

In version 4.1 of the Adobe Flex SDK, we get the following back from describeType.

<variable name="Test" type="Class">
  <metadata name="SomeMeta">
    <arg key="source" value="assets/flip.png"/>
    <arg key="mimeType" value="image/png"/>
  </metadata>
  <metadata name="__go_to_definition_help">
    <arg key="file" value="/projects/zaalabs/workspace/TestMetadata/src/TestClassWithEmbed.as"/>
    <arg key="pos" value="243"/>
  </metadata>
</variable>
<variable name="Flip" type="Class">
  <metadata name="Embed">
    <arg key="source" value="assets/flip.png"/>
    <arg key="mimeType" value="image/png"/>
  </metadata>
  <metadata name="__go_to_definition_help">
    <arg key="file" value="/projects/zaalabs/workspace/TestMetadata/src/TestClassWithEmbed.as"/>
    <arg key="pos" value="136"/>
  </metadata>
</variable>

However, in version 4.5 of the Adobe Flex SDK, you can see the Embed metadata is being omitted. Same exact code, same compiler arguments, nothing has changed except the SDK.

<variable name="Test" type="Class">
  <metadata name="SomeMeta">
    <arg key="source" value="assets/flip.png"/>
    <arg key="mimeType" value="image/png"/>
  </metadata>
  <metadata name="__go_to_definition_help">
    <arg key="pos" value="243"/>
  </metadata>
</variable>
<variable name="Flip" type="Class">
  <metadata name="__go_to_definition_help">
    <arg key="pos" value="136"/>
  </metadata>
</variable>

As you can see, the Embed metadata is being stripped out, even though I explicitly set “–keep-as3-metadata+=Embed,SomeMeta” in the compiler. Since I don’t believe that the Adobe Flash Player team would break describeType in a minor release, I’m led to believe that this is a bug that was introduced in the 4.5 version of mxmlc in the Flex SDK.

Rant

:: UPDATE ::

This seems to have been an isolated incident on this specific day, bugs.adobe.com has worked well for me many times since then.

————————————————————————–

So I tried to do the “correct” thing and file this as a bug on bugs.adobe.com. And would happily do so if the site worked. In fact, in the time I’ve been waiting for bug.adobe.com to load and let me login… not only did I write the test case, but I wrote this entire blog post as well.

[UPDATE]
I was finally able to file the bug, I think… it won’t pull it up. SDK-30485.

10 minutes to diagnose the issue…
15 minutes to blog about it…
45 minutes… and counting to file a bug through the proper channels.

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!