"jnbeck" Posts

Moving On!

So as you can tell, I have recently found the time to blog, hence being able to post two days in a row.

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.


Rogne Media Photoshop Puzzle Solutions

Today on the Adobe Photoshop Facebook page, they linked to a Photoshop Puzzle by the guys over at Rogne Media.

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




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


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




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


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






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.

Screen Shot 2013-09-24 at 12.15.06 PM

Level 4 Solution




so dark…


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.

Screen Shot 2013-09-24 at 12.20.42 PM

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.

Screen Shot 2013-09-24 at 12.20.55 PM

Level 5 Solution




noisy colours


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.
Screen Shot 2013-09-24 at 12.32.58 PM

With the Blue channel selected, I open up the Levels Panel again, and move the white slider to make the code easier to read.
Screen Shot 2013-09-24 at 12.35.29 PM

Level 6 Solution




numbers in the water…


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.

Screen Shot 2013-09-24 at 12.43.21 PM

Level 7 Solution




beyond the channels


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.

Screen Shot 2013-09-24 at 12.48.07 PM

Level 8 Solution




hmmm, it’s not displaying in the browser…


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.

Screen Shot 2013-09-24 at 12.54.41 PM

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.

Screen Shot 2013-09-24 at 12.53.02 PM

Level 9 Solution




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


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.

Screen Shot 2013-09-24 at 1.01.32 PM

Level 10 Solution




Sometimes the usefulness of hitns are offset by their usefulness…


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

Screen Shot 2013-09-24 at 1.12.08 PM

Level 11 Solution




I’m cross-eyed…


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.

Screen Shot 2013-09-24 at 1.22.10 PM

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.

Screen Shot 2013-09-24 at 1.23.28 PM

Level 12 Solution




Projecting a high successrate on this one…


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.

Screen Shot 2013-09-24 at 1.31.23 PM

The next code becomes clear ’12xbpdb’.

Level 13 Solution




Want a hint? God save you…


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.

Screen Shot 2013-09-24 at 1.37.45 PM

Level 14 Solution




No need for me to guide you…


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.

Screen Shot 2013-09-24 at 1.41.46 PM

Level 15 Solution




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


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.

Screen Shot 2013-09-24 at 1.47.34 PM

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

Screen Shot 2013-09-24 at 1.47.50 PM

Level 16 Solution




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


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

Screen Shot 2013-09-24 at 1.56.45 PM

Level 17 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’.

Screen Shot 2013-09-24 at 2.06.55 PM 1

Very clever.

Level 18 Solution




Time for a new year’s resolution…


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

Screen Shot 2013-09-24 at 2.11.34 PM

Level 19 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!

Discontinuing the Eden Platform

We debuted the Eden platform about a year ago at the Flash Gaming Summit. Over the past year we learned a lot regarding the right and wrong way to build tooling, not just game tooling, but tooling in general.

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.


Send us your Tiff files!

Back in April of 2010 we introduced ZaaIL, which was an Alchemy port of the open source C DevIL image library. ZaaIL was released to our labs as simply an experimental project to serve a specific purpose and to also allow for us to learn the ins and outs of Adobe’s Alchemy project.

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.