"actionscript" Posts

Introducing ZaaIL – 40+ Image format support for Flash

:: UPDATE ::

We’re currently are testing a new Image Parser called ZaaTiff, we need your help.

:: ORIGINAL POST ::

Recently, I’ve been doing a lot of work with images and bitmaps… and I grew very frustrated with the lack of image support built into the player. After a having a conversation with my friend Ben Garney of PushButton Labs he pointed me to an open source image library in C called DevIL (originally OpenIL).

Today I’m extremely excited to announce that by using Adobe’s Alchemy toolset we have a working port of DevIL on the Adobe Flash Platform! This means that we now have support for 40+ image formats in the Flash Player. And yes… it works in both Adobe AIR as well as Flash Player.

The port was done by Aaron Boushley and Nate Beck of ZaaLabs.

Best news of all… we are releasing ZaaIL under the MIT License!

Supported Formats

  • Blizzard game textures – .blp
  • Windows Bitmap – .bmp
  • Multi-PCX – .dcx
  • DirectDraw Surface – .dds
  • Dicom – .dicom, .dcm
  • Flexible Image Transport System – .fits, .fit
  • Graphics Interchange Format – .gif
  • Radiance High Dynamic – .hdr
  • Macintosh icon – .icns
  • Windows icon/cursor – .ico, .cur
  • Interchange File Format – .iff
  • Interlaced Bitmap – .lbm, .ilbm
  • Infinity Ward Image (doesn’t work with MW2 iwi files) – .iwi
  • Jpeg – .jpg, .jpe, .jpeg
  • Jpeg 2000 – .jp2
  • Homeworld texture – .lif
  • Half-Life Model – .mdl
  • MPEG-1 Audio Layer 3 (Amazon MP3s work, Apple’s do not) – .mp3
  • Kodak PhotoCD – .pcd
  • ZSoft PCX – .pcx
  • Softimage PIC – .pic
  • Alias | Wavefront – .pix
  • Portable Network Graphics – .png
  • Portable Anymap – .pbm, .pgm, .pnm, .pnm
  • Adobe PhotoShop – .psd
  • PaintShop Pro – .psp
  • Pixar – .pxr
  • Raw data – .raw
  • Homeworld 2 Texture – .rot
  • Silicon Graphics – .sgi, .bw, .rgb, .rgba
  • Sun Microsystems, .sun
  • Creative Assembly Texture – .texture
  • Truevision Targa – .tga
  • Tagged Image File Format – .tif
  • Gamecube Texture – .tpl
  • Unreal Texture – .utx
  • Valve Texture Format – .vtf
  • Game Archive – .wad
  • Quake 2 Texture – .wal
  • Wireless Bitmap File Format – .wbmp
  • HD Photo – .wdp, .hdp
  • X Pixel Map – .xpm
  • Doom Graphics

Features currently supported:

This is just our first cut of ZaaIL, therefore it is not on full parity with the features in DevIL yet (it may never be)… but it’s a start.

  • Decoding 40+ image formats
  • Access to the image bitmap data

Features planning to be supported:

  • Support for encoding bitmap data to 20+ image formats
  • Palette swapping

Get It Here

See it in action

We’re planning to put ZaaIL up on GitHub.

ZaaIL is now available on GitHub

ZaaIL on GitHub

Test Images for ZaaIL on GitHub

You can still download the source –> here.

Load 40 image formats into Flash. Oh, and it’s open source.

For for those who don’t know, I’m one of two people behind ZaaLabs (the other being Aaron Boushley). Today we released ZaaIL, an Adobe Alchemy port of DevIL an open source C image library.

Built in image support of Adobe Flash Player limits you to 3 image formats: gif, jpg and png. While this has worked well for many, many years… I recently have needed to expand the types of formats that I could use in Flash Player. I should also note that you can absolutely add support for these formats directly in ActionScript using ByteArray. For example Mike Chambers blogged about an AS3 BMP parser.

I was originally looking for support for TGA, BMP and PSD, when my friend Ben pointed me to DevIL and challenged me to port it using Alchemy.

Porting C code using Alchemy is not a very straight forward process, but between Aaron and I… and with help from Ben Garney and Branden Hall… worked our way through it. We plan on a series of blog posts discussing the process of using Alchemy in detail. Hopefully we can garner enough interest in the community around Alchemy to get Adobe to continue work on it.

ZaaIL is being released as open source software (MIT if you’re interested). We will post it all on GitHub when we get the chance.

[sidenote]
I have been asked by a few people if I think Adobe should expand from their three image formats and use something like DevIL in Flash Player… I don’t think they should. Adobe has given us the tools to create really cool things such as ZaaIL. I’d rather the Flash Player team focus on things I find way more important… such as 3D support, mobile performance, hardware accelerated graphics, etc…
[/sidenote]

ZaaIL allows developers to now to load more that 40 different image types… go ahead give it a try, I particularly like using a PSD file or cover art embedded into an MP3 (View source is enabled):

Get Adobe Flash player

More information can be found over at ZaaLabs.

Developing games with PushButton Engine – Understanding Local Flash Player Security

As I spend more and more time on the PushButton Engine Forums, it’s funny how often the same topic seems to come up. Today a topic showed up again, regarding running Flash swf files locally. You see this same topic in many different flavors…

  • When I email my game to the client it won’t run on his computer
  • Playing the game only works inside my Flash Builder (or Flex Builder) project development folder
  • My game worked perfectly in one folder, but no longer works when moved to another folder

These issues are all part of the same underlying problem, a misunderstanding of Flash Player Security.

The first question you should ask yourself is… what security sandbox type is my game running in?

What is a Sandbox Type?

The sandbox type indicates the type of security zone in which the SWF file is operating.

Please remember that the security sandbox is determined at runtime, not compile time!

In the PushButton Engine we make identifying the security sandbox easy. When your game starts it logs the security sandbox that your swf is currently running (you can also get this by using the built in “version” console command). It looks like this:

PBE - PushButton Engine - r841 (ZaaBot build #97) - flash - localTrusted

In this case, the game is running in “localTrusted”. Most games that you run from Flash Builder will run in the localTrusted sandbox type. This is because Flash Builder configures your system to trust files in Flash Builder project directories. This is meant to make our lives easier as Flash developers… but it can cause confusion.

You can figure out what sandbox you’re running in by checking Security.sandboxType at runtime.

So what are the types of sandboxes?

In Flash Player, all SWF files are placed into one of four types of sandbox:

remote All files from non-local URLs are placed in a remote sandbox. Basically anything loaded from the web (ex: http, https) falls into this category. There is no access to the local filesystem.

local-with-filesystem This is the default sandbox for local files. SWF files in this sandbox may not contact the Internet (or any servers) in any way. They may not access network endpoints with addresses such as http URLs.

local-with-networking A SWF file in this sandbox may communicate over the network but may not read from local file systems. It is the exact opposite of local-with-filesystem.

local-trusted This sandbox is not restricted. Any local file can be placed in this sandbox if given authorization by the end user. This authorization can come in two forms: interactively through the Settings Manager or non-interactively through an executable installer (or created manually) that creates Flash Player configuration files on the user’s computer.

I added use-network=false to the compiler / flex-config file and it fixed it!

That’s great, but you still need to understand what is happening.

When you add the “use-network=false” parameter to your compilation, you are forcing the swf into the local-with-filesystem sandbox (“user-network=true” forces local-with-networking). This may end up giving you the desired behavior that you want, a swf that will run locally when you send it to your client or friends. However, you may run into some issues later on.

What if you and your friends were competitive, and you then decided your game needs to post a high score? You would need to make a request to a server to submit the score. When running in the local-with-filesystem sandbox you are not able to make requests of any kind to the internet, and therefore you can’t post to the score board.

So what is the solution?

You could teach all of your friends how to setup their game to run in localTrusted, by configuring their security files. But there has got to be a better way.

Well there is, and it all depends on how you plan to deploy your game.

I want to distribute a local game.

The recommended way to distribute flash games to be run locally is using the Adobe AIR runtime. It’s a great platform, and gives you much more flexibility and functionality.

I want to put it on a website.

So the best way to test your game then would be, to put it on a website. Now don’t get scared, this isn’t going to change your development workflow all that much.

The simplest way to simulate a local swf running on a website would be to have a local web-server running on you box. I highly recommend WAMP for Windows, MAMP for Mac OS X and LAMP for you Linux folk.

You then build your game (setup your output directory to drop the files in the web root) and launch your web-browser. Running a game swf from http://localhost will put your swf into the “remote” sandbox. You will want to do all of your testing within this sandbox, because it best mirrors the environment when you deploy your game to the web.

More Information

This post is just a brief overview of a very complex topic, for more information check out these resources:

Flash Player Security Basics

A full hour presentation from MAX 2008 by Deneb Meketa, explaining how Flash Player Security works and why it does it that way (if you don’t want to watch the whole thing, 47:12 is where it talks about local file security). I highly recommend everyone watch it:
Understanding the Flash Player Security Model

Developing games with PushButton Engine – Part 1 – Using Flex and Flash Builder

So I know I haven’t posted in quite some time. Between work, BugQuash, MAX, contributing to PushButton Engine, my country’s 500th anniversary to plan, my wedding to arrange, my wife to murder and Guilder to frame for it, I’ve been swamped.

But tonight… I break my blog silence. As I just mentioned, I’ve been contributing to the PushButton Flash Game Engine. I’m now going to show you how to set up Flex Builder 3 or Flash Builder 4 in a way that allows you to develop games on PushButton Engine, as well as how to work on the core engine itself. I’m breaking this down into very small pieces so that everyone can follow along. So it’s going to be a long post with lots of pretty pictures.

After writing this post, it ended up being longer than I hoped. So I’m going to write a series of posts about developing games using PushButton Engine. This post will focus only getting set up inside Flash and Flex Builder. The plan is to add other IDEs in as well, for example FlashDevelop, FDT, etc…

Step 1 : Download the PushButton Engine source code.

[note]
If you are not familiar with Subversion or you need a primer to the basics of contributing to or working with open source projects please check out my “Getting Dirty with the Flex SDK” post, more specifically the TechWed Presentation.
[/note]

WARNING!! For these steps to work, you must use at least revision 602 of the PushButton Engine.

Download the PushButton Engine core from Google Code. Since I am a developer in the engine, I have checked out trunk and all of the branches. My working copy is located in /pbe (or C:/pbe on Windows). I will use that location throughout the rest of this post. Make sure that if you choose a different location that you sub it in wherever I use “/pbe”.

So on OS X, to checkout the source code, open up Terminal and type in the following lines:

cd /
svn checkout http://pushbuttonengine.googlecode.com/svn/ pbe

Step 2 : Import the PBEngine Library project within Flex/Flash Builder.

Open up Flex Builder (or Flash Builder), right click in the Flex Navigator and choose Import. (You can also use File > Import > Other).
Import Project

Open up the “General” folder and choose “Existing Projects into Workspace” and click “Next”.
002_existing

Click the “Browse” button next to “Select root directory”.
003_rootDir

In revision 600 of the PushButton Engine I added “FB3″ and “FB4″ directories underneath “trunk/development”. These directories have a Flex Library project skeleton within them that can be imported directly into Flex Builder.

If you are using Flex Builder 3, use the FB3 directory, and if you’re using Flash Builder 4, use the FB4 directory.
004_selectFB3

Click Finish.
005_selectedPBEngine

You will see a Flex Library project in the Flex Navigator now. You will also have an error, don’t worry, we’ll fix that in the next step.

Step 3 : Setup the a Linked Resource for PBE

So here is the error that you will see:
configuration variable ‘compiler.source-path’ value contains unknown token ‘PBE’
006_error

The project skeleton uses something called a “Linked Resource”, so that it can find the PushButton Engine source files. To set this Linked Resource, you do the following:

Open up Flex Builder’s preferences.
007_preferences

Under General > Workspace > Linked Resources… Click “New…”
008_linkedResources

Click on the “Folder…” button and navigate to the PushButton Engine “trunk” folder, “/pbe/trunk” (C:/pbe/trunk on Windows).
009_selectFolder

Hit “OK” and you should see PBE listed in the Linked Resources now.
010_PBEResource

Clean the project to incorporate and rebuild all of the changes.
011_cleanProject

If you see PBEngine.swc underneath the bin folder, you are good to go! Nice work!
012_projectWSource

:: UPDATE ::

There have been file renames and other changes in the PushButton engine since this post. If your SWC is failing to build do the following.

In the Flex Navigator, right click on the PBEngine Flex Library project. Click Properties. Go to “Flex Build Library Path”, under “Classes” uncheck [source path] src and recheck it. If you are using Flash Builder 4, you can simply select “Include all classes from all source paths”. Any other questions… post a comment and I’ll answer them.

Step 4 : Create your game!

For this example I’m going to create a VERY simple Hello World game to show that we have everything working correctly.

Right-click in Flex Navigator and choose “New” > “ActionScript Project”.

Give it a name of “HelloGame”, and click Finish.
013_createASOnly

Now, to use the PBEngine Library within our HelloGame project, we need to create a link between the two.

To do this, right click on the “HelloGame” project and choose “Properties”.
014_helloProperties

Choose “ActionScript Build Path” from the list, and then click on “Add Project…”
015_AddProject

You should see “PBEngine” in the list.

If you don’t see PBEngine, or you get a message that tells you, “There are no Flex Library projects in your workspace”, make sure that a) you have created a PBEngine Library by following the previous steps and b) the project is not closed.
016_PBEngine

Select “PBEngine” and click “OK”. You will now see PBEngine listed in the Build path libraries box.
017_withLibrary

Now that the two projects are linked, you can start using classes right out of the PushButton Engine. Code completion works, and everything compiles. Woot!
018_Intellisense

Great, now let’s write our impressive Hello World game.

Here is the source:

package {
	import com.pblabs.engine.PBE;
	import com.pblabs.engine.debug.Logger;
 
	import flash.display.Sprite;
 
	public class HelloGame extends Sprite
	{
		public function HelloGame()
		{
			PBE.startup(this);
			Logger.print(this, "Hello Nate!");
		}
	}
}

Run or Debug the game. At first you will see a blank screen, that is expected… Press the ~ (tilde or `) key, and the PushButton Console should come up.

The console has some commands by default: help, version, showFps and verbose (1 || 2)
020_console

You can add your own custom commands to the console to assist you while developing your games… but that is a post for another time.

Any questions, be sure to hit us up over on the PushButton Engine Forums or in the freenode IRC channel: #pbengine.