How to use Spine with Starling/AS3


Hats off to the guys over at Esoteric Software. Not only did they live up to the Kickstarter promise to deliver generic AS3 runtime for their excellent 2d animation tool Spine, they also added a Starling version as a bonus! This post shows how to get going using Spine animation in your AS3/Starling project.


$(window).height() vs $(document).height()

I was trying to use the $(window).height() method in jQuery to get the height of the browser window but was instead getting the document height in return (same as $(document).height()).

So, what to do if window height returns document height instead?

Solution

The problem is most likely that your HTML document lacks a <!DOCTYPE>-definition. So the solution to the problem is to add a valid <!DOCTYPE> like <!DOCTYPE HTML> in the top of the HTML file. When done $(window).height() should start to report the proper window height and not the document's.



Preserve textformat when changing text in Flash / AS3

Notice that the textformat that was defined for your TextField mysteriously disappears when you just change the text? A bit annoying, but the reason is that the format is not applied to the TextField itself but the text in it. Replace the text and you replace the textformat as well.

This can however be solved by storing away the textformat before you change the text and then re-apply it like this:
// Save the old textformat before changing the text
var textFormat:TextFormat = buttonText.getTextFormat();

// Change the text
buttonText.text = "New text goes here";

// Re-apply the textformat
buttonText.setTextFormat(textFormat);


Correct font names in TextFormat.font (AS3)

If you want to use TextFormat in order to set which font family and style you wish to use on a component in your Flash project you just might be a bit puzzled on how to express both family and style in just one field - TextFormat.font.

The problem

If you plan to use the regular version of the font family ("Veto Com" in the sample, but could be "Arial", "Verdana" or the font of your choice), you'll just go with:
import flash.text.TextFormat;

var textFormat:TextFormat = new TextFormat();
textFormat.font = "Veto Com";
But if you want to use the Light style instead of Regular it's a bit trickier, because you need to know the font name including both family and style. Unfortunately there are no standards so it might differ between font sets.

The solution

There are two ways to get the correct font name:

1. In Windows, locate the font file and open it to display the font information window. It will look something like this and the correct font name to use will be displayed in upper left corner:


2. Add a textfield to your project and give it an instance name. Set both the Family and Style properties to the font you want. Then in code access the font property of the textfield and trace it using trace(myTextField.getTextFormat().font);
Source for this solution: http://blog.erikphansen.com/actionscript-textformatfont-values/

Enter the font name that you get from either of the methods above in your code:
import flash.text.TextFormat;

var textFormat:TextFormat = new TextFormat();
textFormat.font = "Veto Com Light";


Can't save changes in SQL Server 2008 Management Studio table design?

Made changes in the table designer but SQL Server 2008 Management Studio won't let you save?

Problem

This is a kind of annoying new feature in SQL Server 2008 Management Studio. In previous versions you could make changes in the design view of a table and if it wasn't possible to save these changes without dropping the table first you would be noticed about it and have the choice to do so. In the 2008 version you will just get a dialog that says it's not possible to save as it would require a drop:


"Saving changes is not permitted. The changes you have made require the following tables to be dropped and re-created. You have either made changes to a table that can't be re-created or enabled the option Prevent saving changes that require the table to be re-created."

Your only option is to cancel. Surprisingly this is actually by design.

Solution

To turn off this feature, go into the menu Tools / Options and under Designers uncheck the box for "Prevent saving changes that require table re-creation" and save. You will now be able to save your changes and the table will be dropped (loosing current data) to be re-created with your changes.


Remember to turn back on! It's pretty scary because with this off your table is dropped without any notice. In order to prevent future accidentally drops you should turn this feature back on before you shut down the studio.


Must have tools for Flash developers

There are plenty of good tools to use when developing Flash games and applications. Here I list some of my favourite ones.

FlashDevelop

This is the open-source develop environment to use for Flash development. Boosted with code generation and some refactoring options. Use together with Flex/AIR to add compilation right into FlashDevelop reducing the need to have Adobe Flash Professional. You'll find instructions on how to install FlashDevelop with Flex/AIR here. Plenty of 3rd party plugins also available.
Get FlashDevelop Use together with Flex/AIR as a stand alone IDE.

Citrus Engine

This open-source framework brings some of the most powerful  frameworks on the market together. Combining frameworks such as Starling and Away3D with physics engines such as Box2D, Nape and AwayPhysics. Use this framework to really get a kick start in your project. Common platformer game objects are available right out of the box.
Get Citrus Engine With Starling, Away3D, DragonBones, Box2D, Nape and AwayPhysics.

Adobe Scout

As part of the Adobe Gaming SDK - Adobe Scout is a very powerful profiling tool that even adds the possibility to profile on your mobile devices. Currently available for free on Creative Cloud. To use this profiler fully you need to enable advanced telemetry in your swf-file, something that hasn't been available out-of-the-box with FlashDevelop. To solve this you can use a 3rd party AT-plugin in FlashDevelop or this Python script.
Get Adobe Scout Requires free Creative Cloud account.

TexturePacker

If you aim to use Starling for development you'll need to use sprite sheets/texture atlases in order to effectively utilize the graphics processor required to get good performance on mobile devices. TexturePacker is your choice for this. Compile your sprite sheet by adding images, swf-files or Photoshop files (.psd) and select the export format. Plenty of output formats available to cater for most game engines out there, also supporting advanced image formats like PVR.
Get TexturePacker Powerful sprite sheet creator. Try it for free.

DragonBones

This is currently my primary choice of 2d skeletal animation tools. I'm really looking forward to start using Spine, but since it not yet have an AS3 runtime DragonBones will be my choice in the meantime. There's also Spriter to consider if you don't have Flash CS 5.5 or later (required by DragonBones as the animator is a plugin panel). Find further information about the three different tools here.
Get DragonBones Requires Adobe Flash Professional CS5.5 or later.

PhysicsEditor

Defining advanced shapes manually to use with physics engines can be a real hassle. Thankfully there exists tools like PhysicsEditor that will allow you to define even the most complex shapes with ease and export as code (both Box2D and Nape supported). Start by auto tracing your sprites and - if necessary - tweak the shapes manually, set the parameters for your physics object (based on your choice of physics engine) and export the code. Supports most major game engines out there (not limited to Flash).
Get PhysicsEditor Create physics objects with ease. Try it for free.

Feathers

Feathers is an open-source project that works on top of Starling to add highly responsive UI components that will work from mobile devices to desktops. Great for building nice looking user interfaces.
Get Feathers Use together with Starling.

Tiled

Versatile map editor that beside tiles (both normal and isometric) support creation of vectors such as polygons, rectangles and ellipses which makes it ideal to use for defining static physics objects such as platforms, sensors (coins, signs, etc). Citrus Engine (mentioned above) has a loader for the Tiled map-format.
Get Tiled Powerful and free map editor.

Multi resolution development with Flash


This is the second post aimed at app development using Flash. The previous post showed how to create a simple app with Flash.This post will explain how to develop for multiple resolutions, something that is necessary on the mobile market where the screen resolution may vary from 426x320 pixels up to full HD. Not only does the screen resolution vary, the screen ratio does also vary ranging from 16:9 to 4:3.