Feathers UI and Feathers SDK 3.0.0 officially available!

joshtynjala

EDIT: Download Feathers 3.0.4 to get some bug fixes.

Hi, community! Thank you so much for your continued support of Feathers. I truly couldn't do it without your great feedback. Today, I'm proud to present the official release of Feathers 3.0.0. After six months of development, including two beta builds, we're finally here.

Feathers 3.0 FINAL. Find it at feathersui.com

Feathers UI 3.0.0

Download Feathers UI 3.0.0. This release includes architecture improvements, increased stability thanks to a ton of bug fixes and new tests, and a focus on performance. This version is built on the new Starling 2.

Feathers 3.0 fully embraces the Starling Multi-Resolution Development concepts in its themes and example projects. For convenience, Feathers includes the ScreenDensityScaleFactorManager class, which lets you to set up scaling (completely fluid, without black bars!) automatically. This implementation is inspired by the way that native apps on Android and iOS are scaled, and it's an easy one-liner to set up:

public class Startup extends Sprite
{
    private var _starling:Starling;
    private var _scaler:ScreenDensityScaleFactorManager;

    public function Startup()
    {
        _starling = new Starling( YourApp, stage );
        _scaler = new ScreenDensityScaleFactorManager( _starling );
        _starling.start();
    }
}

Since Starling 2 now includes scale9Grid and tileGrid on starling.display.Image, Feathers can focus on more advanced skinning options. The new ImageSkin class can display different textures (and different tint colors) when a component, like Button, changes states. Here's an example:

var skin:ImageSkin = new ImageSkin( defaultTexture );
skin.setTextureForState( ButtonState.DOWN, downTexture );
skin.setTextureForState( ButtonState.DISABLED, disabledTexture );
skin.scale9Grid = SCALE_9_GRID;
button.defaultSkin = skin;

Feathers UI 3.0.0 also includes many other new enhancements and bug fixes. For complete details, please take a look at the release notes.

You may also want to check out my slides from Flash Online Conference #13:
What's New in Feathers 3.0?

Finally, please read the Feathers 3.0 Migration Guide for a detailed look at how to upgrade. This is a new major version, and it includes breaking changes that may affect your existing code.

This version of Feathers UI has the following requirements:

Adobe AIR 21.0 or newer for mobile and desktop apps
Adobe Flash Player 19.0 or newer for web browser apps
Starling Framework 2.0.1

Feathers SDK 3.0.0

If you previously installed the Feathers SDK Manager, you will find that Feathers SDK 3.0.0 has been added to the list of releases. This version of the SDK includes all of the changes in Feathers UI mentioned above, plus a number of bug fixes and small features that improve the experience of working with the Feathers SDK. This release also includes a few new MXML examples to learn from. For complete details, please take a look at the Feathers SDK release notes.

I look forward to receiving your feedback. Thank you for developing with Feathers!

Happy coding,
Josh Tynjala

Links:

Daniel

That's fantastic news, Josh! I'm extremely happy that the new Feathers version works so well with Starling 2, and that you could make such great use of the new features.

Feathers rocks! 😃

ozmachine

Awesome. ScreenDensityScaleFactorManager looks like it should be a huge help.

skizzo

absolutely fantastic job, can't wait to try it in a new project i just got confirmed! keep up the amazing work!

clozertou

Awesome work Josh,
Hope to see Tree Controls, DataGrid etc in future releases 😃

retropunk

Brilliant post! Thanks for all the hard work and congrats on another killer release!

inverse

Is there a noted advantage of the ScreenDensityScaleFactorManager over the FullSceenNoStretch extension? Could they somehow be used in harmony?

johannh

That's very exciting news, Josh. Thanks a lot for your hard work!

joshtynjala

Is there a noted advantage of the ScreenDensityScaleFactorManager over the FullSceenNoStretch extension?

It appears that the Fullscreen NoStretch extension uses two stages to achieve a somewhat similar goal of avoiding letterboxing. The first stage maintains aspect ratio so that its dimensions are the same across all devices, and the second stage fills the entire screen so that you can display something outside of the bounds of the first stage. I should mention that I don't have experience with Fullscreen NoStretch, so I might have the details slightly wrong, but I think that's the gist of it.

ScreenDensityScaleFactorManager uses one stage. It fills the entire screen without letterboxing, but the stage dimensions may vary slightly on different screens, depending on the aspect ratio. That said, if you compare two phones, the stage dimensions will be pretty similar. Instead of the huge difference between native resolutions on iPhone 3GS versus Google Nexus 5, which are 320x480 and 1080x1920, you'll have stage dimensions of 320x480 and 360x640. That can be a little easier to work with. Additionally, tablets will have larger stage dimensions than phones when using ScreenDensityScaleFactorManager, so you can create different layouts for tablets.

It seems to me that Fullscreen NoStretch might be best for many types of games where the stage size should always be the same. Meanwhile, ScreenDensityScaleFactorManager is best if you want to make something that looks more like a native app because it supports fluid layouts and extra space for tablets, while still getting some of the convenience of contentScaleFactor.

Could they somehow be used in harmony?

Off the top of my head, I can't think of a good reason to use both at the same time.

It's worth mentioning that ScreenDensityScaleFactorManager is completely optional. Feathers allows you to handle stage dimensions, view port dimensions, and contentScaleFactor any way that you want, including using the Fullscreen NoStretch extension, if that's what you need.

igazine

Thank you for the fantastic job!
ScreenDensityScaleFactorManager just simply rocks the entire planet.

ozmachine

I'm setting up a project now with ScreenDensityScaleFactorManager. How do I define the initial size, so it knows how to scale up?

I'm in IntelliJ, testing on the Air iOS Simulator at 320x460. The final width is 426, after the scale manager does its thing.

leokan23

a good opportunity to move from playing with feathers sdk to a production state 🙂 my team and i are working with flex but i love the performance of feathers and starling. Hopefully our next production will be on Feathers SDK!

joshtynjala

How do I define the initial size, so it knows how to scale up?

You shouldn't need to define anything. It calculates everything automatically based on the value of Capabilities.screenDPI and the native stage dimensions. An iOS device at 320x460 should have a DPI of 163, and that falls into the contentScaleFactor 1 bucket. This means that the final Starling stage dimensions should be the same as the real dimensions: 320x460.

(For comparison, an iPhone Retina would be 640x920 would a DPI of 326. It falls into the contentScaleFactor 2 bucket, which means that the dimensions are divided by 2, so it would result in the same stage dimensions: 320x460)

Could it be that you're simulating a custom DPI? IntelliJ lets you customize it (the field is named ppi), but it should default to 163 when you choose "Apple iPhone" as the device to simulate.

ozmachine

Yes, I see in the DeviceCapabilities isTablet function, it's reading the ppi. However, the AIR emulator seems to always report ppi as 96. :/

joshtynjala

If your IntelliJ IDEA module target platform is mobile, it will pass the ppi value specified in your launch configuration to ADL. Note that this will not work in a web or desktop module. In those cases, it uses your computer's native Capabilities.screenDPI, which is why you might see 96 (or 72).

ozmachine

Hmm, well, I've got it set up for mobile, but it still reads as 96. Could be because I'm using the beta SDK, perhaps.

joshtynjala

When you debug your module from IntelliJ IDEA, do you see the following arguments passed to ADL in the console? (there will be others too, of course)

-screensize iPhone -XscreenDPI 163 -XversionPlatform IOS

ozmachine

Yes, the arguments are there. For the sake of exercising the effect, I manually set the values on the Feathers class:

DeviceCapabilities.screenPixelWidth = 320;
            DeviceCapabilities.screenPixelHeight = 460;
            DeviceCapabilities.dpi = 163 * ( mStage.fullScreenWidth / 320 );

And this made it work.

So, I'm not sure why the correct number was not displayed...

ozmachine

OK, I tested with AIR 21 (non-beta), and the ppi returns correctly. Sorry to hijack this thread!

ozmachine

Josh, I should have more closely read your explanation between the two fullscreen solutions. I was expecting something like the fullscreen extension. Anyway, I do see the ScreenDensityScaleFactorManager's benefit.