Author Topic: Flixel Power Tools  (Read 74673 times)

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Flixel Power Tools
« on: Thu, Jun 16, 2011 »
Latest Version: 1.9
Released: October 11th 2011
Example Demos: 86

Quite frankly flixel is awesome. It allows for very rapid game development. And while it does a lot for you, it is lacking in a few  areas. After all itís just a framework, and frameworks are meant to be built-upon.

That is where the Flixel Power Tools come in. They are a set of classes, all neatly arranged in a single package that use the new plugin architecture of Flixel 2.5. They push flixel just that bit further and cover a lot of fundamental ground for you. The Flixel Power Tools are for Flixel 2.5+ only, they will not work with earlier versions.

Classes

The following classes are available in the latest version:


The FlxSpecialFX class supports its own plugins for creating special effects. Currently this includes:

  • BlurFX
  • CenterSlideFX
  • FloodFillFX
  • GlitchFX
  • PlasmaFX
  • RainbowLineFX
  • RevealFX
  • SineWaveFX
  • StarfieldFX

Demos

There's also a Demo Test Suite which include loads of easy-to-follow examples of the tools in action, with a funky menu system and a visual way to actually see what they do. I always find it easier to learn by looking and then dissecting code! The full source code is on github, including all 77 demos.



Be sure to try the Credits button :)

Getting Started Guide

There is now a comprehensive 6-page Getting Started Guide in the Docs folder. Download the zip or checkout from github and get reading! It should help beginners get started a lot faster.

The library and Test Suite will continue to expand, and they will be kept in-line with the flixel codebase, which is rapidly changing at the moment.

Download

The Flixel Power Tools can be found on github:

https://github.com/photonstorm/Flixel-Power-Tools

You can download a zip file containing everything or checkout the repo. There is a dev branch, which contains the "bleeding edge" and work in progress stuff. "master" is the most current stable version.

Any questions about any of the tools? Ask me here :)
« Last Edit: Tue, Oct 11, 2011 by photonstorm »
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: Flixel Power Tools
« Reply #1 on: Thu, Jun 16, 2011 »


Itís been a month in development but itís finally here Ė Version 1.7 of the Flixel Power Tools has now gone from dev to master Ė and I urge you all to give it a play! I have also re-organised my site so that the tools and all sub-classes are now easily accessible from the right-hand side bar. More info, more screen shots, less scrolling

V1.7 includes a brand new Demo Suite system (donít forget to try the Credits button  ). Itís now easier and quicker to get to the examples, which is just as well as weíve over 60 of them in this release. Donít forget to download the whole package from github, as it includes a Getting Started manual PDF, the full source code to all of the demos, all of the graphical and audio assets (warning: copyright, donít use commercially!), as well as the tools themselves.

As well as a suite overhaul there are some great new classes, and updates to nearly everything. FlxHealthBar is gone, replaced with the much more versatile FlxBar. This new bar can be used for anything, from progress meters to sprite health. It can fill in one of 8 different directions, can be hooked to a parent sprite or not, and be hooked to any value of that sprite Ė in short it doesnít have to be just a health bar any longer.

The biggest new addition is FlxWeapon. A comprehensive weapon manager for games. Handles creation, pooling and re-use of bullets and a heck of a lot more. Angled bullets, sounds, callbacks, fire at the mouse, fire from the mouse, fire from a parent sprite, fire from a fixed position, bullet speeds, firing rates. Phew! Combined with FlxControl this is a powerful combo.

FlxVelocity has been updated with lots of new functions: moveTowardsPoint, distanceToPoint, angleBetweenPoint, velocityFromAngle, accelerateTowardsObject, accelerateTowardsMouse and accelerateTowardsPoint! And FlxControl now supports rotation, thrusting and reversing.

So you can now make an asteroids style ship movement in a couple lines of code. Of course I couldnít resist adding some new Special FX including Blur and Center Slide. Enjoy!
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

Ramontique

  • Member
  • **
  • Posts: 81
  • Karma: +0/-0
    • View Profile
Re: Flixel Power Tools
« Reply #2 on: Fri, Jun 17, 2011 »
Nice job, those new bars are just what I was looking for to quickly complete my project :)

foosety

  • Member
  • **
  • Posts: 88
  • Karma: +0/-0
    • View Profile
Re: Flixel Power Tools
« Reply #3 on: Mon, Jun 20, 2011 »
Wow awesome updates, I really have to hand it to you this time!
I have a question relating to FlxButtonPlus. So, basically I started using FlxButtonPlus in place of FlxButton because I have a ton of buttons and only want one callback function (each button sending in its unique param 1,2,3 , etc).
However I ran into a problem. The problem being, I realized I can't scale my button sprite down to size (I don't care about highlight). You can do this in FlxButton, but not in FlxButtonPlus :(

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: Flixel Power Tools
« Reply #4 on: Mon, Jun 20, 2011 »
How were you scaling down to size?
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

tomii

  • Active Member
  • ***
  • Posts: 108
  • Karma: +0/-0
    • View Profile
Re: Flixel Power Tools
« Reply #5 on: Tue, Jun 21, 2011 »
Hi Photonstorm!

I'm using your power tools for a game I'm working on atm, but I'm having some problems with the FlxBitmapfont class. It seems that whatever I put as the alignment, it's always aligned to the right :( Anyone else having this problem?
My online portfolio // www.tomii.se
My twitter

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: Flixel Power Tools
« Reply #6 on: Tue, Jun 21, 2011 »
Throw me a bit of source so I can see, should be fine though! (in the Test Suite there are a couple of Bitmap Font tests that use align center)
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

tomii

  • Active Member
  • ***
  • Posts: 108
  • Karma: +0/-0
    • View Profile
Re: Flixel Power Tools
« Reply #7 on: Tue, Jun 21, 2011 »
Well, I just copied your example, so it's really strange that it won't work, but here you are:

Code: [Select]
// Score font
scoreFont = new FlxBitmapFont(ImgScoreFont, 14, 19, "0123456789", 10, 0);
scoreFont.setText("0", true, 1, 0, FlxBitmapFont.ALIGN_CENTER);
scoreFont.x = 140;
scoreFont.y = 90;
add(scoreFont);

This snippet is added after super.update();

Code: [Select]
scoreFont.text = String(FlxG.score);
Here's the other stuff..

Code: [Select]
[Embed(source = '../../../_assets/numberFont.png')] private var ImgScoreFont:Class;
private var scoreFont:FlxBitmapFont;

I found a bug aswell (I think). The text property wants a String, right? But, if you do: apple.text = "" + variable;
Then it works anyways. Right now I have: apple.text = String(NumberVariable);
And that works too. Which would you recommend?




My online portfolio // www.tomii.se
My twitter

zuperxtreme

  • Contributor
  • ****
  • Posts: 254
  • Karma: +0/-0
    • View Profile
    • Buddah
Re: Flixel Power Tools
« Reply #8 on: Tue, Jun 21, 2011 »
Hey Photon, is there any reason why you didn't include in FlxVelocity, something like "moveTowardsPoint" ?

Seems like it would be useful, apart from moveTowardsObject. Just wondering, trivial to add.
..."without order nothing exists, without chaos nothing evolves"... 
Zoklet.net

tomii

  • Active Member
  • ***
  • Posts: 108
  • Karma: +0/-0
    • View Profile
Re: Flixel Power Tools
« Reply #9 on: Tue, Jun 21, 2011 »
I also have an idea for a new power tool; A health bar which is not a bar per se, but a group of FlxSprites. Think Mega Mans life bar, which is a pile of flat, white pixels, or the hearts in Zelda.
My online portfolio // www.tomii.se
My twitter

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: Flixel Power Tools
« Reply #10 on: Tue, Jun 21, 2011 »
tomii - can you trace out the width of scoreFont for me please. Trace it after your call to setText. My guess is that because you've only got 1 character, the width will be the size of the character+1 (so 15 pixels)

As for text needing a string, the reason "" + var works is that it's casting it to a string for you automatically because of the "" + part (i.e. var gets cast to a string, then concatenated to ""). You can do that, or you can do String(var) or maybe cleaner: text = var.toString();
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

foosety

  • Member
  • **
  • Posts: 88
  • Karma: +0/-0
    • View Profile
Re: Flixel Power Tools
« Reply #11 on: Tue, Jun 21, 2011 »
How were you scaling down to size?

I'm saying that in FlxButton class you can just scale the buttons with scale.x and scale.y but those don't exist in FlxButtonPlus.

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: Flixel Power Tools
« Reply #12 on: Tue, Jun 21, 2011 »
zuper, FlxVelocity:

 * v1.5 New methods: velocityFromAngle, accelerateTowardsObject, accelerateTowardsMouse, accelerateTowardsPoint
 * v1.4 New methods: moveTowardsPoint, distanceToPoint, angleBetweenPoint

tomii - you can achieve the same effect (hearts, mega man life) using FlxBar empty and full images: Full is all of the hearts in a row, the other is a black bar (or whatever the background is) that is placed on the top.
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: Flixel Power Tools
« Reply #13 on: Tue, Jun 21, 2011 »
I'm saying that in FlxButton class you can just scale the buttons with scale.x and scale.y but those don't exist in FlxButtonPlus.

It's because it extends a FlxGroup, But you can scale the buttons by scaling FlxButtonPlus.buttonNormal and FlxButtonPlus.buttonHighlight

http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

foosety

  • Member
  • **
  • Posts: 88
  • Karma: +0/-0
    • View Profile
Re: Flixel Power Tools
« Reply #14 on: Tue, Jun 21, 2011 »
I'm saying that in FlxButton class you can just scale the buttons with scale.x and scale.y but those don't exist in FlxButtonPlus.

It's because it extends a FlxGroup, But you can scale the buttons by scaling FlxButtonPlus.buttonNormal and FlxButtonPlus.buttonHighlight

Oh I didn't know that, that's perfect ill just scale those!

zuperxtreme

  • Contributor
  • ****
  • Posts: 254
  • Karma: +0/-0
    • View Profile
    • Buddah
Re: Flixel Power Tools
« Reply #15 on: Tue, Jun 21, 2011 »
zuper, FlxVelocity:

 * v1.5 New methods: velocityFromAngle, accelerateTowardsObject, accelerateTowardsMouse, accelerateTowardsPoint
 * v1.4 New methods: moveTowardsPoint, distanceToPoint, angleBetweenPoint

I'll see my self out.  Haha, thanks.  :P
..."without order nothing exists, without chaos nothing evolves"... 
Zoklet.net

tomii

  • Active Member
  • ***
  • Posts: 108
  • Karma: +0/-0
    • View Profile
Re: Flixel Power Tools
« Reply #16 on: Tue, Jun 21, 2011 »
Code: [Select]
scoreFont = new FlxBitmapFont(ImgScoreFont, 14, 19, "0123456789", 10, 0);
scoreFont.setText("0", true, 1, 0, FlxBitmapFont.ALIGN_RIGHT);
trace("scoreFont: " +scoreFont.width);

Gives me // scoreFont: 15

Here's what it looks like. http://img848.imageshack.us/img848/2686/scorefont.png
Right now I've made it so that it ticks up from 0 -> 1000. New characters are added to the RIGHT, no matter what kind of alignment I choose.

What I want to do, is to have it aligned to the left, so that I can move the whole thing to the right-hand side.



My online portfolio // www.tomii.se
My twitter

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: Flixel Power Tools
« Reply #17 on: Tue, Jun 21, 2011 »
The problem is that the width of the sprite is 15px, i.e. the width of 1 character (zero). So it can't align it anywhere as it fills up the whole width. If you then make the text "10" the width of the sprite will change to 30px, so again it's not aligned because it fills the whole width up.

The way align works is that in multi-line text it takes the longer line and makes the sprite the width of that, then the other lines are aligned based on the new sprite width. But if you only have 1 character (or 4 characters: 1000) that IS the width of the sprite. It's not that it isn't aligning it, it's that it is filling the whole sprite up.

The easiest way is probably to simply place the font like so:

Code: [Select]
var px:int = where-ever the right-hand side of the font should be;
font.x = (px - font.width);

then as the font expands in width, it'll adjust the x coordinate to the left to compensate, keeping it visually right-aligned in the box.

I may add in support to give the font a fixed width, so alignment would be based off of that, maybe in a future version.
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

tomii

  • Active Member
  • ***
  • Posts: 108
  • Karma: +0/-0
    • View Profile
Re: Flixel Power Tools
« Reply #18 on: Tue, Jun 21, 2011 »
Alright, I'll use that method then!

But, I thought it WAS fixed width? Isn't that why you have the 2nd and 3rd parameter (width and height) there?
My online portfolio // www.tomii.se
My twitter

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: Flixel Power Tools
« Reply #19 on: Tue, Jun 21, 2011 »
That's character width/height.

I will rename them to characterWidth and characterHeight now for v1.8 :)
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius