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