Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Awesome Things to Know About Flambe
4565
single,single-post,postid-4565,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Awesome Things to Know About Flambe

As a company, we’ve been using Flambe as a game framework for over a year now and I realized there’s some cool features that are practically necessary to know as you’re diving in. So here’s a list of some of my favorite features and how to use them.

Play Flump Animations

First and foremost is how to load and use animations! It’s a simple task, but from being an Actionscript/Flash user, it takes a little getting used to. To do this, you need to create a Library object (flambe.swf.Library) and load the animation you want out of it. To find more about Flump, visit their Github page.

Here’s a basic example:

var lib:Library = new Library(pack, "folderName");
var movie:MovieSprite = lib.createMovie("movieLinkage");
System.root.addChild(new Entity().add(movie));

The playhead is controlled by using the position attribute of the MovieSprite object. If you’re trying to stop the clip at the end, the duration information is stored in the symbol. So you’d want to do this:

var movie:MovieSprite = movieEntity.get(MovieSprite);
movie.position = movie.symbol.duration;
movie.onUpdate(0);
movie.paused = true;

The reason I call onUpdate with a 0 parameter is to force the clip to update to that time on the clip. Then I pause the animation to hold it at that position. Just remember that you can’t update the MovieSprite at all if it’s paused, so if you were going to update its position again, you’d need to set paused to false then update again as above.

The Disposer and Signals

The Disposer component is a very handy tool. It’s used to add anything you want to makes sure gets cleaned up when that component gets disposed. Most importantly is using it with Signals. In Flambe, adding a creating a Signal actually creates a SignalConnection object that would just float around never to get cleaned up unless added to the Disposer object (or if you manually kept track of all your SignalConnections which would be tedious and pointless). Here’s a basic example of how to tie this into a click event.

var disposer:Disposer = new Disposer();
owner.add(disposer);
disposer.connect1(movieEntity.get(Sprite).pointerDown, onPointerDown);

The Disposer component has convenience functions for what’s really going on. You could do the same thing without the Disposer method that would look like this:

var sigConnection:SignalConnection = movieEntity.get(Sprite).pointerDown.connect(onPointerDown);
disposer.add(sigConnection);

It’s much easier to add a bunch of one-liners with the Disposer helper methods.

However, there are times when you only need the one time listener. The SignalConnection class has a method called once() that will make that connection clean itself up after one call. This is great for using in one-time effects like explosions that only happen once then get removed. Here’s an easy way I’ve found to make sure everything gets cleaned up correctly for these cases.

_disposer.add( movieEntity.get(MovieSprite).looped.connect(function(){
    movieEntity.dispose();
}).once());

Still adding this to the disposer makes sure that if this component gets removed before the animation has finished, the SignalConnection will still get cleaned up. Otherwise, when the animation completes, it will clean itself up so you don’t have it hanging around in memory.

The using Keyword

Not specific to Flambe, the Haxe language has a cool feature called the using mixin. This allows you to add basic functions to objects so you don’t have to add a base class for simple functionality. An example is playing around with MovieSprite positions. Maybe you have to manually update the position of a MovieSprite, you can write a mixin Class to do this for you on any Entity that has a MovieSprite component added.

class MovieUtil
{
  public static function setPosition(entity:Entity, ?posPercent:Float = 0):Entity
  {
    var s:MovieSprite = entity.get(MovieSprite);
    if (s != null) {
      s.paused = false;
      s.position = posPercent * s.symbol.duration;
      s.onUpdate(0);
      s.paused = true;
    }

    return entity;
  }
}

Then you would call add this mixin MovieUtil to your component code in the same area as your imports:

using urgame.MovieUtil;

Then in the code, call this function like so:

movieEntity.setPosition(.5);

Notice the first parameter of the setPosition function is an Entity. That entity is the one that you just passed in. So instead of calling MovieUtil.setPosition(movieEntity, .5); you can keep your code a little cleaner with just calling the method from that Entity. Also note that mixin functions return the object that was passed in.

For more information, you can visit the Haxe documentation on this mixin here.

Scripts

Scripts are super powerful was to chain or synchronize a group of actions together. Here’s a quick example:

var script:Script = new Script();
script.run(new Sequence([
  new Delay(1),
  new CallFunction(function(){
    trace("Do something!");
  })
]);
owner.add(script);

All this script does is wait 1 second before calling a function that traces something, but you can get as complicated as your mind can think. A Script is a component like everything else, so don’t forget to add it to an Entity to make sure it actually runs.  Check out all the Script Actions here.

SpeedAdjuster

I love this thing. Add a SpeedAdjuster component to any Entity and it will effect it, and its children’s, update speed.

myEntity.add(new SpeedAdjuster(.5));

Simple as that I’ve just made that Entity run at half speed. Pretty cool huh? Need to pause the game? Just add this with a 0 passed in and it will stop everything on that Entity.

Example

Here’s an example I cooked up that shows all of these features in a pretty simplistic way. Click on the plane to initiate a script that will blow it up. Click the constant explosion to pause it in the middle of its timeline, then click it again to add a .5 SpeedAdjuster to it. Click the RESET button to start over. Enjoy!

http://seven2.com/thinklabs/blog-2014-01-15/

Here’s the source files in case you want to have a look around! Source

Please leave a comment if you have any questions.

Also, I made another post a while back about some handy tools we use for games and websites here.