Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.

Topics - wg/funstorm

Pages: [1]
games / Siege Knight
« on: Wed, Mar 27, 2013 »

Just released my new Flixel game Siege Knight on Kongregate. It's a defense and shooting game hybrid. Defeat wave after wave of enemies through strategic trap placement and fast shooting!

If you have a spare moment, please play and rate  ;D

I took part in NewGroungs GameJam 8 over the weekend and made a game using flixel. We only had 48 hours and we had to cut a lot of features because we ran out of time, but I still got a fair bit done. The theme was 'cabin in the woods'. Check it out here.

releases / Procedural Island Tilemap Generation
« on: Sun, Sep 2, 2012 »
This quick little random island generator was made as part of Ludum Dare 24. I had a really hard time finding good, easy to understand resources on the subject so I wrote up my own method. I made it in flixel, although I guess the method is generic enough that it would work in any language. Click the picture if you're curious as to how it's done!

games / Treasure Sweeper (Released!!)
« on: Thu, Aug 16, 2012 »
It's a minesweeper game with pirates and treasures made in flixel  ;D

Click to play:

You can play it on your portal of choice:

If you had fun, please rate it on Kongregate or Newgrounds!

games / Defense Game (WIP Title)
« on: Mon, Jul 16, 2012 »
For the past month or so I've been hard at work doing the programming for a defense game.

You can read a little about the development and how the design has changed over time on my blog:
Defense Game Progress Update

Or watch a YouTube video with 5 minutes of gameplay:

P.S. we're looking for name suggestions so if you have one please do share!  ;D

help / Multiple FlxGroups & Sorting
« on: Mon, Jun 11, 2012 »
In my previous games, I've always used groups as a way to organize my objects into categories that share logic such as 'enemies', 'player', 'powerups', etc.

But my previous games never needed y-sorting. My new game requires me to sort lots of different objects, of lots of different types, depending on their y value.

My dilemma is that to easily sort them using FlxGroup.sort(), I now need to put all these things into the same group. So now to separate the game logic and do different things depending on the group member I end up having to do a lot of type checking with silly if statements. Like this

Code: [Select]
for (var member:uint = 0; member < gameObjects.length; member++)
if (gameObjects.members[member] is Enemy)
// do something
else if (gameObjects.members[member] is Player)
// do something else

Has anybody dealt with this before? Suggestions?

help / Creating spritesheets from movieclips
« on: Thu, Jun 7, 2012 »
My goal is to take a movieclip, use it to generate a spritesheet and then use it with FlxSprite.

I have it working, but this is my first attempt and it's pretty rough around the edges. I'm looking for suggestions to improve this because I'm not that great at it.

Why? Best of both worlds:
- high quality animations with small filesize to download
- fast copyPixel rendering

FlxSprite.loadRotatedGraphic does something similar by using an image to generate a spritesheet of rotated images and has been my main reference.

The general idea:
1) When the game first loads, generate bitmapdata spritesheets from movieclips and save them.
2) Whenever you need to create a new sprite, use the generated bitmapdata spritesheet.

Known limitations:
- If the generated spritesheet is larger than the maximum size flash allows, it will break. Could be fixed for most cases by adding support for generating multi-rowed spritesheets.
- If the origin in flash is not at the top-left for the movieclip, it will automatically offset the graphic but then it becomes out of touch with flixel's collision system.

And here's the code:

In State_LoadAssets
Code: [Select]
public static var spritesheetSkeletonWalk:RenderedMovieclip;
public static var spritesheetSkeletonDeath:RenderedMovieclip;

// display loading screen then

spritesheetSkeletonWalk = new RenderedMovieclip(skeletonWalk);
spritesheetSkeletonDeath= new RenderedMovieclip(skeletonDeath);

RenderedMovieClip (essentially just stores a bitmapdata spritesheet with some extra information)
Code: [Select]
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.geom.Matrix;
import flash.geom.Rectangle;

public class RenderedMovieclip
public var boundsX:Vector.<Number>;
public var boundsY:Vector.<Number>;

public var width:uint;
public var height:uint;

public var spriteSheet:BitmapData;

public function RenderedMovieclip(TheMovieClip:Class)
var mc:MovieClip = new TheMovieClip();

boundsX = new Vector.<Number>(mc.totalFrames, true);
boundsY = new Vector.<Number>(mc.totalFrames, true);

// determine largest bounds for use as spritesheet frame size
// also save bounds for offset use later

var i:uint;
var maxBoundsWidth:Number = 0;
var maxBoundsHeight:Number = 0;
var frameBounds:Rectangle;

for (i = 1; i <= mc.totalFrames; i++)
frameBounds = mc.getBounds(mc);

if (frameBounds.width > maxBoundsWidth)
maxBoundsWidth = frameBounds.width;

if (frameBounds.height > maxBoundsHeight)
maxBoundsHeight = frameBounds.height;

boundsX[i - 1] = frameBounds.x;
boundsY[i - 1] = frameBounds.y;


maxBoundsWidth = Math.ceil(maxBoundsWidth);
maxBoundsHeight = Math.ceil(maxBoundsHeight);

width = maxBoundsWidth;
height = maxBoundsHeight;

// create and draw spritesheet

spriteSheet = new BitmapData(width * mc.totalFrames, height, true, 0x0);

var frameMatrix:Matrix = new Matrix(1, 0, 0, 1);

for (i = 1; i <= mc.totalFrames; i++)

frameMatrix.tx = (i - 1) * width - boundsX[i - 1];
frameMatrix.ty = -boundsY[i - 1];

spriteSheet.draw(mc, frameMatrix);




And RenderedFlxSprite (FlxSprite with helper functions to load and use the spritesheet generated previously)
Code: [Select]
import flash.display.BitmapData;

import org.flixel.*;

public class RenderedFlxSprite extends FlxSprite
public var boundsX:Vector.<Number>;
public var boundsY:Vector.<Number>;

public function RenderedFlxSprite(X:Number, Y:Number)
super(X, Y);

public function loadRenderedMovieclip(TheRenderedMovieclip:RenderedMovieclip):void
_pixels = TheRenderedMovieclip.spriteSheet;
width = frameWidth = TheRenderedMovieclip.width;
height = frameHeight = TheRenderedMovieclip.height;
boundsX = TheRenderedMovieclip.boundsX;
boundsY = TheRenderedMovieclip.boundsY;

public function createAnimationFromAllFrames(AnimationName:String = "play", FrameRate:uint = 30, Loop:Boolean = true):void
var frames:Array = new Array();
var i:uint, j:uint = 0;;
for (i = 0; i < _pixels.width; i += width)
addAnimation(AnimationName, frames, FrameRate, Loop);

override public function draw():void
offset.x = -boundsX[frame];
offset.y = -boundsY[frame];




State_Play (using the new sprite ingame)
Code: [Select]
var sprite:RenderedFlxSprite = new RenderedFlxSprite(50,50);
sprite.loadRenderedMovieclip(Art.spritesheetSkeletonWalk); // the pre-rendered spritesheet

Thoughts? Suggestions? Help me improve this!!

So I went to Molyjam last weekend (for those who don't know it's a 48 hour game making competition based on the tweets of a Peter Molyneux parody account) and made this with Flixel + AIRKinect.

The concept is based on this inspirational tweet: ĒGame where you must hold onto your motherís hand. Let go for more than X seconds and itís game over.Ē

You can watch the trailer here.

Or download and play here.
(requires a Kinect + Kinect SDK installed.. see included readme file for more detail)

This is the concept art, which I think we came very close to nailing in the execution:

Feedback, questions, comments, etc welcome!

releases / 8 Flixel Tutorials
« on: Thu, Jan 19, 2012 »

A couple months ago we started publishing Flixel tutorials and classes, so we thought now is a good time to do a quick roundup.

In case you missed any of them, hereís all 8 tutorials in quick list form!

releases / Flixel multiple save game tips & tricks
« on: Wed, Jan 4, 2012 »
A tutorial on working with multiple saves in flixel along with a couple other tips & tricks I picked up over the course of making a few Flixel games.

It covers:
- using FlxG.saves & with multiple profiles
- setting a profile as currently active
- creating a global profile to store settings for all users (eg volume)
- creating helper functions to initialize & reset profiles

Hope it helps somebody 'cause it took me a while to figure out when I was new!   :-[

help / Drawing a Sprite's Path and Attack Radius
« on: Fri, Nov 25, 2011 »
I just posted part 1 of a 2 part tutorial I'm writing on how to draw a sprite's path and attack radius in Flixel.

Just click anywhere on the attached demo map to see it in action.

The player is an FlxSprite, using Flixel's built-in pathfinding functions to find its way around an FlxTilemap. To achieve the result, we add some drawing functions that mimic FlxSprite's drawLine() method and manipulate the FlxPath data.

Part 1 deals with the path, and part 2 will add the attack radius.

For the full explanation and source code:

I would like to do a pixel perfect collision check between sprite A, and another sprite B.

BUT instead of using the image alpha to determine transparency, I would like to specify a color as transparent. Have you ever seen a gif or other image where the background is bright pink and that's used to determine transparency? That's the basic concept.

I was hoping to be able to do this with the Flixel Power Tools since they do have pixel perfect collision checks in FlxCollision... and I was hoping it would be easy to change what gets checked but it appears to be actually quite complex - beyond my coding ability. From what I can gather, it changes the sprites such that collisions appear as a certain color, and then checks to see if that color is present, which determines whether a collision occurred or not. So I think a good approach could be to modify the image transformations such that only overlapping areas of a certain color show up as a collision... but I have absolutely no idea how to go about that.

This is the relevant bit of code I think I need to modify... but reading the adobe reference and experimenting has gotten me nowhere so I hope somebody here has an idea!!

From FlxCollision.pixelPerfectCheck:
Code: [Select]
overlapArea.draw(testA, matrixA, new ColorTransform(1, 1, 1, 1, 255, -255, -255, alphaTolerance), BlendMode.NORMAL);
overlapArea.draw(testB, matrixB, new ColorTransform(1, 1, 1, 1, 255, 255, 255, alphaTolerance), BlendMode.DIFFERENCE);


var overlap:Rectangle = overlapArea.getColorBoundsRect(0xff000000, 0xff00ffff);

help / how to know if the mouse clicked a button
« on: Sun, Oct 23, 2011 »
I know how regular FlxButtons work, but this is giving me a bit of trouble.

I have a game, which has an environment, and when the player clicks on it I want something to happen. Since the environment is always the same size as the screen, I just use justReleased() and mouseX/mouseY.

Problem is: now I added a hud, which overlaps the environment and has buttons on it. So with the justReleased() method, the environment click is still registering even if a hud button was clicked. That's what I want to prevent.

So, my question is: when the mouse is released, how can I check whether it was above any of the onscreen buttons or not?


Why do we have to set multiple sizes?
How do I get the mouse position on screen?
How can I make things stay on screen when the camera moves?
Why are things not colliding past a certain point?

I see these questions come up on the forums all the time and it took me a while at first to wrap my head around how flixel likes to be configured, so I wrote up a quick tutorial to help others.

It covers:
  • Swf size
  • Camera view size
  • Camera view zoom
  • Swf = camera * zoom
  • Level size
  • Camera travel limits
  • Hud Mouse cursor (world & screen positions)

Released along with a demo and source code:


releases / FlxMovieClip
« on: Wed, Sep 28, 2011 »

With FlxMovieClip you can draw a Flash MovieClip just like an FlxSprite (with a couple exceptions).
Using FlxMovieClips is more processing intensive than the other methods. Donít use this if you can avoid it!

Basic Usage

Code: [Select]
var fmc:FlxMovieClip = new FlxMovieClip(x,y);
fmc.loadMovieClip(movieclip, width, height);
fmc.isPlaying = true;

Demo / Download / Instructions


What's the point of this?
- To draw a Flash MovieClip as an FlxSprite, so you can use it in Flixel like any other FlxSprite.

Should I use this instead of FlxSprites or FlxG.stage.addChild()/addChildAt()?
- Using FlxMovieClips is more processing intensive than the other methods. Don't use this if you can avoid it!

Why not just use FlxSprites instead of MovieClips?
- It's true that MovieClips can be rendered as sprite sheets and imported into Flixel. This should be the first thing you try!
- However, sometimes FlxSprites just don't meet the requirements - e.g. complicated menus with lots of animations, or long high-quality cutscenes that are simply too large to render as a sprite sheet.

Why not just use FlxG.stage.addChild()/addChildAt()?
- It's true that addChild can be used to draw a MovieClip on top of or below the Flixel camera. This should be the second thing you try!
- However, sometimes addChild just doesn't meet the requirements - e.g. if you want the Flixel cursor to appear on top, or draw the MovieClip at a specific order within the Flixel display list.

Can I really do everything I can do with a Flash MovieClip with an FlxSprite?
- No! Some method and properties are unsupported.
- Supported: x, y, angle, scale, offset, velocity, acceleration, antialiasing, visible, flash movieclip animations
- Unsupported: alpha, blend, replaceColor, stamp, drawLine, fill, active, flixel animations


This is my first time ever releasing code to a community! Let me know what you think! Hope I didn't do anything stupid super obvious :P

help / resolutions on android & flixel
« on: Fri, Jul 8, 2011 »
Android devices come in a range of resolutions. I want to enter the kongregate android contest with a small game I created in Flixel, but am unsure how to deal with the resolution issue. What do you guys do?

Since the Flixel rendering size doesn't resize with the Flash window, I think if the mobile device a user is playing the game on has a smaller/larger resolution than my game they will only see a portion of it / it will be cut off. Correct?

Solution ideas...
  • Find a way to resize the Flixel rendering size if the Flash window size changes and then reposition UI elements / re-center world. This way if the game is resized, the player simply sees less/more of the game world. Is this even possible?
  • Find a way to resize the Flixel rendering size, but instead of repositioning zoom the camera in / out. I saw a post on here a while ago with a postprocess effect that could do zooming but I'm worried that it might make the art look crap, if it is even possible at all.

Please share if you have any tips / ideas at all :)

To save on filesize, we were hoping to use FlxSprite's replaceColor function to embed just 1 image and then color it different colors are runtime. However when we try to use replaceColor it applies it to all instances on screen. This doesn't help us because we have multiple of the same image on screen and we want them to all be different colors. Help please? :)

Code: [Select]
var imageTest1:FlxSprite = new FlxSprite(0, 0, GameAssets.imageTest);
imageTest1.replaceColor(0xFFFF0000, 0xFF00FF00);

var imageTest2:FlxSprite = new FlxSprite(30, 0, GameAssets.imageTest);

games / Seeds (COMPLETE! Playable on FGL)
« on: Wed, May 11, 2011 »
Hooray! We finally finished our first game with Flixel!

If you have an FGL account, play it here:
(No I can't upload it elsewhere yet, sorry!)

Unfortunately it's too late to make any major changes at this point, but we're still interested in hearing what you think so let us know!


Pages: [1]