30 Jul

Facebook Tweaks for iOS Game Development

Did we tell you about the upcoming update to our little time travel arcade game? We’re pretty sure that we did mention it somewhere in here.

The road to this major update was a lot smoother than the road to the initial release. We tried to optimize our dev process and we will talk about one aspect.

Tweaks

Facebook recently introduced Tweaks, a library that allows small adjustments to be made very easily, while the game is running.

Basically, by just shaking the device, a modal view is presented with the variables that  you have marked for tweaking. After changing those values, they are update in the live app.

If this sounds like something not related to game development, good. Continue reading. iOS Game development is tons of fun!

A bit of background

The Cocos2D engine powers all our games and most of our experiments. Full native, full Objective-C for a clean and clear architecture. This also means that we can use the latest Objective-C features and libs.

The game

Games have UIs with elements that require to be laid out in a way to complement the gameplay experience. All those positions are values that follow visual designs.

To make the UIs more appealing, animations come into play. Animations are actually present throughout most of games, to bring various elements to life. Three elements are the basis of all animations: the initial state (position, scale, rotation), the duration and the final state. Variables control all these states.

Tweaks

Animations

Duration Tweak

Animation variables and layout elements fit perfectly in the goal of Facebook’s Tweaks library. In the code, instead of writing something raw like:


CGFloat duration = 3.0f; //3 seconds

we write


CGFloat animationDuration = FBTweakValue(@"Animation", @"Will", @"Speed", 3.0f);

After building, we ca now play around with the animation speed, to fine tune it until it feels good. The same approach can be applied to any animation attributes: rotation, scale, direction.

Layout

Another time intensive step is laying out the UI elements in a game, especially if your game is meant to be played on screens of different dimensions.

Position Tweak

For example, if a CCMenu is positioned like:


CCMenu *menu = [CCMenu menuWithItems: resetMenuItem, nil];
menu.position = ccp(100, 200);

implementing Facebook Tweaks would look something like:


CGFloat posX = FBTweakValue(@"UI", @"Menu Position", @"x", 100.0f);
CGFloat posY = FBTweakValue(@"UI", @"Menu Position", @"y", 200.0f);
CCMenu *menu = [CCMenu menuWithItems: resetMenuItem, nil];
menu.position = ccp(posX, posY);

Notes

Other use cases

If you know any other creative use cases for Facebook Tweaks or any other methods of altering the live game, do let us know!

Leave a Reply

Your email address will not be published. Required fields are marked *