Matt Tuttle


No Comments

HaxePunk UI Framework: A First Draft

HaxePunk UI Framework: A First Draft

I quickly ported the FlashPunk community UI recently and started building on top of the framework they built. Actually it diverged a bit from the original but I think for the better. The biggest change is that the NineSlice class is now extends from Graphic so that it can be drawn easily each frame.

At the moment I have buttons, checkboxes, radio buttons, text fields, and panels working. I'll see what I can do about a scrollbar and menus but I haven't had a chance to hash them out yet. Although I think the code is flexible enough that most anything is possible.

You can pick up the code on GitHub and take it for a spin. Just to give you and idea of what's possible I'll present you with a flash version of the framework.

Latest Flash Player Plugin is required.

Posted in Game Development

Tags: Flash, HaxePunk, UI


No Comments

Loading Tiled TMX Files in HaxePunk

Loading Tiled TMX Files in HaxePunk

I love using the Tiled map editor and feel that it has a ton of great features that every game developer should take advantage of. It has custom objects, multiple tilesets, tile/map/object properties, and a new image object. But how do you go about using it in your Flash project? Well there's a great resource for this written by Thomas Jahn but it's written in AS3 and can't be used with HaxePunk.

Long story short, I have converted this file parser to HaXe and it can be used by passing a string or Xml type to it. As usual you can grab the source code over at GitHub. Enjoy!

Posted in Game Development

Tags: Haxe, Tiled, HaxePunk


No Comments

Porting FlashPunk to Haxe

Porting FlashPunk to Haxe

I used to use Haxe for Flash development before the Flex SDK was released a few years ago. Recently I downloaded the latest version of Haxe and remembered why I liked developing in the language, multiple code targets. So I decided to take the most recent FlashPunk release and port it to Haxe just for the fun of it, and probably for my own use. As an added bonus I'm finding that it even manages to squeeze some extra performance out of the Flash player that normal AS3 just can't provide.

The best part about all this is that I'm making the port available on GitHub for anyone to fork or make contributions to. There are a few minor changes to the base classes but most of the properties and methods work exactly like they do in AS3. The biggest difference so far is that all Sprites are loaded as BitmapData instead of an embedded Class. This is simply because of how Haxe embeds bitmaps and I've ported my Flashpunk physics example so that you can see everything in action.

Just a note: not all classes have been ported and there are still a lot of bugs to work through. I just started this a few days ago and have been working on getting the console and basic sprites working. Sound effects, complex masking, and specialized graphic classes have not been tested.

Grab the source code on GitHub

Posted in Game Development

Tags: FlashPunk, Haxe


No Comments

How to Playtest Your Game

How to Playtest Your Game

For those who are developing games and have a playable demo I highly suggest watching this video. It goes into detail about how to properly playtest and gives some great tips along the way. This is an absolute must see for developers who haven't play tested before. Even if your game is super simple you'll be surprised at how much you can learn by letting someone else play your game.

Find a family member, friend, or grab a stranger of the street and sit them down in front of your game. Make sure you listen more than talk and only speak up when they start to get frustrated and can't figure something out. Most of all have a notepad handy so that you can jot down information as they are playing. Thanks to The Game Prodigy for this excellent video.

Posted in Game Design

Tags: testing


No Comments

Simple FlashPunk Physics

Simple FlashPunk Physics

I noticed several people looking for Flashpunk physics from one of my earlier posts so I figured I'd share what I have with everyone. The class I've created will give you something similar to what Flixel has for physics although there are differences between the two and I'm not using any code from Flixel. So for those who are interested in some basic physics for Flashpunk then read on.

I suggest grabbing the source code from GitHub as it will contain the most up-to-date version of the physics class. It also contains a simple example to get you started. I will try to explain the Character class in detail below. But before we get started let's take a look at what the finished product is. All of the code for this example is in the GitHub repository.

Latest Flash Player Plugin is required.

Okay, now that you've seen what the finished product is let's take a look at the Character class. It's pretty basic and I think most programmers will be able to figure it out without my explanation but this is for those who don't do a lot of coding.

package com.matttuttle
{

    import net.flashpunk.utils.*;
    import com.matttuttle.PhysicsEntity;

    // Example character class using simple physics
    public class Character extends PhysicsEntity
    {

        // Constants for movement
        private static const kMoveSpeed:uint = 5;
        private static const kJumpForce:uint = 25;

        public function Character(x:int, y:int)
        {
            this.x = x;
            this.y = y;

            // Set physics properties
            gravity.y = 2.6;
            maxVelocity.y = kJumpForce;
            maxVelocity.x = kMoveSpeed * 2;
            friction.x = friction.y = 1.6;

            // Define input keys
            Input.define("left", Key.A, Key.LEFT);
            Input.define("right", Key.D, Key.RIGHT);
            Input.define("jump", Key.W, Key.SPACE, Key.UP);
        }

        override public function update():void
        {
            acceleration.x = acceleration.y = 0;

            if (Input.check("left"))
                acceleration.x = -kMoveSpeed;

            if (Input.check("right"))
                acceleration.x = kMoveSpeed;

            if (Input.pressed("jump") && onGround)
                acceleration.y = -kJumpForce;

            super.update();
        }

    }

}

First thing you should notice is that there are two constants at the top of the class, kMoveSpeed and kJumpForce. These constants will change the character's horizontal acceleration and jump height respectively. If you need the character to move faster or slower, change these two fields.

Next I want you to look at the physics properties section. It looks like this.

gravity.y = 2.6;
maxVelocity.y = kJumpForce;
maxVelocity.x = kMoveSpeed * 2;
friction.x = friction.y = 1.6;

The first line tells us that gravity is applied in a vertical direction (downward at 2.6). The next two lines set the maximum velocity that the player can move at. This makes sure the player doesn't keep acceleration faster and faster. The last line applies friction on the horizontal axis when the character is on the ground or vertically when on a wall. Increasing this value will help the character stop faster and decreasing it will give a sliding feeling.

Finally, the last bits of code setup our input keys (I used arrow keys and WASD). Then inside the update function we apply acceleration based on the keys that are pressed. One thing different between this and Flixel's physics is that gravity is applied on every frame so you don't have to do that in the update step.

If this has helped you and you're using this code in one of your projects please drop a comment below.

Posted in AS3 Tutorials

Tags: Actionscript, FlashPunk, Physics