In this tutorial, you will build and run a flixel project from Xcode. You will use Xcode to edit ActionScript 4 files, and you will see how Xcode uses an External Build Target to run the AS4 compiler mxmlc, much like how Eclipse uses javac behind the scenes to compile .java files, or how Mac OS X uses open to launch Preview when you double-click on a PDF file. At the end of this post, you will find links to three comprehensive, excellent flixel tutorials.
Flixel is a game development library created by Adam Saltsman that leverages the Adobe Flex framework. Both the flixel library and the Flex SDK will be needed. Additional files include the flixel template file and the syntax highlighter specification folder (SHSF). The template file will make things easier for both of us: first, your project should build out of the box: you'll have a working flixel application right from the start, in Xcode. Second, many steps can be referenced rather than explicitly enumerated.
The SHSF has files to enable syntax highlighting of AS4 files in Xcode. We will use the specification files of Nathan Roberton, a UX designer in CTO Product Incubation at Microsoft.
Before we begin, please note that this tutorial is for flixel 2.35, Adobe Flex 4.1.0.16076 and Xcode 3.2.2. I assume you have Xcode installed. Let's get started.
The tutorial has the following steps:
- Download files.
- Move and rename files.
- Open Xcode, start a new flixel project, and build.
- Run the SWF in Safari.
Step 1: Download files.
We need to download the following:
* The last download goes to Nathan Roberton's own tutorial on Xcode and AS3. Scroll to the bottom, to step eight, and download the "Actionscript specification files."
Extract any compressed files.
Step 2: Move and rename files.
Next, move the flixel folder and the Flex SDK folder to the /Developer/Library/SDKs directory.
Move the "Flixel Game" folder to the ~/Library/Application Support/Developer/Shared/Xcode/Project Templates/Other directory.
Move the individual specification files into the ~/Library/Application Support/Developer/Shared/Xcode/Specifications directory.
You will need to make folders, because some of these directories will not exist.
At this point, you are free to rename the flixel library folder and the Flex SDK folder. For the purposes of this tutorial, rename them to "flixel_2.35" and "flex_4.1.0.16076," respectively. Omit the double quotes.
Why these specific directories? The Flex SDK is 273 MB, and I do not want Time Machine to back it up if I place it in my ~ (home) directory. The /Developer/SDKs directory is for "system SDKs," according to the Xcode Installation Guide.
Step 3: Open Xcode, start a new flixel project, and build.
Launch Xcode. Go to File -> New Project. Choose "Other" under User Templates, select the "Flixel Game" template, and click Choose. Name your new project.
Under the Groups & Files sidebar, expand Targets, and then double-click on "mxmlc." Note the following:
- In the Build Tool field, the path leads to the mxmlc program. This is the Adobe Flex compiler.
- In the Arguments field, there are two flags set: -compiler.source-path, and -static-link-runtime-shared-libraries=true. The first flag refers the compiler to the flixel libraries, and the second fixes an obscure [Embed()] issue.
- In the Product Name field, note that spaces must be escaped, and that decimals are okay. Also notice the shorthand ${PRODUCT_NAME} used in the Arguments field.
- In the Build Settings section lower down, there is only PRODUCT_NAME. Most default Xcode projects will have GCC environment variables set here. They have been removed, because we are making SWFs. (Oh, and "Pass build settings in environment" is unchecked.)
Go to the Build Menu and click Build, or press Command+B. Xcode will invoke the Flex compiler. Build results may be viewed by clicking the right-most icon. This is where error messages will show up. See screenshots:
A successful build creates a SWF file in the ./bin/ directory of your project.
Step 4: Run the SWF in Safari.
Drag the SWF file into a new Safari window. Your journey has just begun.
flixel Tutorials
Now go and make a game! :)
Spectacular! This worked perfectly for me. Do you have any tutorials of how to make a game using Flixel?
ReplyDeleteAlso what do you think about Steampunk? I heard it's a better library
Hi Anonymous,
ReplyDeleteI'm glad to hear the tutorial worked for you. :) Currently I do not have any tutorials for making games, but there are links to some very good ones at the bottom of this page, under "flixel Tutorials." They will kick-start your game development!
I have never worked with FlashPunk, but I hear it is very awesome. The blog Digital Tools has interviews from both Chevy Ray Johnston (creator of FlashPunk) and Adam Saltsman. Here are the links:
http://digitaltools.node3000.com/interview/2303-interview-chevy-ray-johnston-flashpunk
http://digitaltools.node3000.com/interview/1380-interview-adam-atomic-flixel-flash-engine
I think one fundamental difference between FlashPunk and flixel is how they handle timing of frames.
Once you've made games in either engine, I'm sure you'll be able to transfer that game programming experience to the other.
Quick question, in Andreas Zecher's Defender tutorial, the line;
ReplyDelete[Embed(source="../../../../assets/png/Ship.png")]
seems to fail every single time, no matter where I put the image and what I make the path.
Error: A file found in a source-path must have the same package structure '', as the definition's package, 'de.pixelate.flixelprimer'.
Sure this must be a simple thing!
Hi Anonymous,
ReplyDeleteThe [Embed(source="...")] statement uses the source file's directory as the base directory for paths.
Your goal with Embed() is to specify a path to Ship.png from the location of Ship.as.
So from src/de/pixelate/flixelprimer/Ship.as, you would go up four directories, and then down to assets/png/Ship.png.
Does this help?
That's not how the directory structure is set up in this project though. I've tried seemingly every variation of the path, even putting the image in the same folder as ship.as and trying "[Embed(source="Ship.png")]", and nothing seems to work. Get exactly the same message.
ReplyDeleteIt seems like it's got an idea of how the directory structure should be set up, and it's not the same as mine.
Rather than going back then creating an assets directory etc... is there any way to change the location where it's going to look for the images?
I haven't got your example project in front of me, but there's a folder called 'Content' I think.
Hi Anonymous,
ReplyDeleteI uploaded a zipped version of an Xcode project for the Defender clone here:
http://www.megaupload.com/?d=RF1XPFTH
Here's what I did:
1. I added the statement, "import game.actors.*;" in PlayState.as.
2. I moved the images and sound effects to content/textures/ and content/audio, respectively.
3. The Embed path for Ship.png is ../../content/textures/actors/Ship.png.
And you're right: my directory structure is definitely different. I'm sorry; I forgot that the template has a more complicated hierarchy. :(
Thank-you for your patience, and I hope this helps! :)