Flixel Power Tools FlxExtendedSprite

Back to the Flixel Power Tools

Sprites in Flixel are already quite powerful, but I needed more! So the FlxExtendedSprite class was born. These extended a normal FlxSprite, so anything you can do with that you can do with this. But it also adds some much needed functionality into the mix, including: The ability to click the sprite! Complete with a click counter, mouse down and mouse up callbacks. You can also drag the sprite. Dragging can be restricted to a single axis, or a rectangular block of the game world, and can snap to a grid either during drag or on release.

Extended Sprites are also able to sort themselves in real-time, meaning you can have z-indexed sprites, and should a bunch of them overlap you define the sort criteria to control which one of them receives the “mouse click” event (maybe it’s based on their y coordinate? Or the built-in priority ID). Mouse clicks are either within the bounding box of the sprite, or can be pixel perfect with configurable alpha tolerance level too.

They can also be thrown or have gravity (or both!) for some lovely combinations of effects. And finally there is a built-in spring, so it can be connected to the mouse via a spring. This spring can be set to only be active on mouse-drag, or always be there. The spring constraints are under your control for some interesting effects. There is even a mini-game in the Test Suite showing off the speed of the mouse click responses.

Screen Shots

Code Example


//	You can drag the carrot from anywhere inside its bounding box (including transparent parts)
//	This is the fastest method of dragging (in terms of CPU) so use it if you can! Especially for rectangle shaped sprites
carrot = new FlxExtendedSprite(32, 32, AssetsRegistry.carrotPNG);
carrot.enableMouseDrag();

//	The mushroom needs a pixel perfect drag, so the edges are not included
mushroom = new FlxExtendedSprite(64, 64, AssetsRegistry.mushroomPNG);
mushroom.enableMouseDrag(false, true);

//	The melon and eggplant need pixel perfect clicks as well, but this time the middle of the sprites snaps to the mouse coordinates (lockCenter)
melon = new FlxExtendedSprite(128, 128, AssetsRegistry.melonPNG);
melon.enableMouseDrag(true, true);

eggplant = new FlxExtendedSprite(164, 132, AssetsRegistry.eggplantPNG);
eggplant.enableMouseDrag(true, true);

//	The tomato and onion are stuck in this fixed rectangle!
var cage:FlxRect = new FlxRect(16, 160, 200, 64);

//	This is just so we can see the drag bounds on-screen
var cageOutline:FlxSprite = new FlxSprite(cage.x, cage.y).makeGraphic(cage.width, cage.height, 0x66FF0080);

tomato = new FlxExtendedSprite(64, 170, AssetsRegistry.tomatoPNG);
tomato.enableMouseDrag(true, true, 255, cage);

onion = new FlxExtendedSprite(140, 180, AssetsRegistry.onionPNG);
onion.enableMouseDrag(true, true, 255, cage);

Recent Flixel Power Tool Posts

4 Responses

Make yourself heard

Hire Us

All about Photon Storm and our
HTML5 game development services

Filter our Content

Great Sites