I moved to a new URL! Check it out!

posts tagged with: flash

Dev Log: Explosions

Image


Been working on getting some particle effects going lately. At first I was trying out a workflow of animating in Graphics Gale since it's so easy to use for animating pixel art. The entire process was animating in Graphics Gale, upscaling in Image Resizer using an HQ 4x filter, then downscaling it and cleaning it up in Photoshop. Although this yielded some pretty decent results, the actual pipeline of getting it into the game from Graphics Gale was becoming a huge pain. Here's a sprite from this process:

Image


I did give Flash a try before this, and all I could find was this tutorial on how to export to a sprite sheet. I had a lot of issues with this process. First the entire SWF document couldn't be exported, only a symbol. Second is the fact that you pretty much have no control over the pixel size of a symbol, and therefore the size of the export. Thirdly the export to sprite sheet just didn't have enough options for my needs. This is why I passed on Flash initially.

Then I discovered that you can just export an entire swf has a .png sequence. Hooray! I can export a bunch of images of an animation, and since I can define the size of the swf, I can define the size of the png exports. Now all I need to do is somehow turn it into a sprite sheet.

That's where Shoebox comes in. This program is an Adobe AIR application that is sort of a swiss army knife for 2d game development. One of the features that I'm using in my current process is the frame sheet builder.

At first I was using the frame sheet builder with a sequence of png files, but then I discovered you can just use an exported swf file instead. So after all of that, my current pipeline for animating frame by frame stuff is Flash, export to SWF, use Shoebox to convert it into a sprite sheet, and then import it into the game. It's not a terrible workflow at all, but sometimes using Flash is a little infuriating.

FlashDevelop to iPad Workflow

FlashDevelop to iPad Workflow
I recently got one of them new fangled iPad things and I heard on the internet that Adobe AIR is actually pretty decent at building things for iOS. Offspring Fling used Adobe AIR so I'm already a little familiar with how to build for Windows and Mac, but it turns out that iOS is an entirely different beast... sort of. The set up and configuration of the whole workflow can be a nightmare, but once it's over then you'll have a set up that lets you push F5 to build right to your device!

Follow along on this series of text and images and hopefully you will be enjoying pushing the F5 key on your keyboard and seeing an app pop up on your iOS device! Also put on some relaxing music because some parts of this tutorial might be hard to understand and frustrating. I'm using Windows 7 64-bit for this.

FlashDevelop with HaXe NME and HaXePunk

FlashDevelop with HaXe NME and HaXePunk
I spent most of yesterday diving into a whole new world of magic and fun: Haxe. I was hesitant at first because I was dreading the whole ordeal of setting up a new development environment, but it turned out to be way more straight forward than most set ups I've experienced.

I ended up getting a quick demo of thousands of entities rotating, scaling, and alpha blending at a steady 50-60fps with the Windows build of HaxePunk, and that has me pretty excited!

Image


Follow along as I take you on a journey of code and game development! (For reference, I'm using Windows 7.)

Super Ninja Slash

Super Ninja Slash
Over the summer I went to a local game jam. 48 hours to sit down and try and make a game. The theme of that game jam was "stealth" and Super Ninja Slash is the game that I ended up making.

The game is pretty short because I actually didn't add that much to it after the jam. The original version featured some pretty bad music by myself, but luckily DannyB was able to step in and make a way better track for the game.

Super Ninja Slash also features a couple of leaderboards based on time and enemy kills, so if you're fortunate enough to get through the game's 9 brutal levels you can submit your time and compete with other internet people.

This also marks my 5th and final game release before GDC2013! Thus fulfilling my promise to myself to release 5 games in the span of a year. I'll talk more about that later though. For now just swing on over to Super Ninja Slash and give it a whirl!

Flashpunk NineSlice Class (Updated!)

Flashpunk NineSlice Class (Updated!)
Last week I posted a quick NineSlice class that I wrote to work in Flashpunk. It was a little clunky, so this past week I cleaned it up and integrated it with Flashpunk's graphic system. The new version now extends Image, so you get all the awesome Image effects like color tinting, rotation, scaling, and more. Check out the new version!

NineSlice.as

As a quick example, here's how I'm using it in my current project. Check out this screenshot of a menu:

Image

Thanks to the handy dandy nine slice object, most of this menu is just drawn with a couple of simple source images. I scaled them up 4x so you could see them a little better.

Image

Just using these images as sources means I don't have to make a new image every time I want to change the size of one of the widgets. I can also do some cool animations with tweening the width and heights of the panels over time.

Feel free to use the NineSlice.as class however you want. If you use it or improve it in anyway, let me know!

A Flashpunk 9-Slice Object

A Flashpunk 9-Slice Object
As I've been working on this Global Game Jam game remake, I've been trying to come up with solutions for problems that I can hopefully reuse for more projects in the future. One of the things I've been thinking a lot about is managing and drawing the various user interfaces for the game. Even though I'm not quite sure how much UI stuff this game will need, I wanted to have some sort of solid base to start with so that I could get stuff up and running quickly.

One of the most basic core structures of drawing a cool UI (in my opinion!) is a 9-slice graphic object. What's a 9-slice graphic object?! Well, here's a quick example of one that I have working in Flashpunk right now.

Image

The box that is being drawn above the red player rectangle is a working example of my NineSlice class. It's being drawn from a source image of nine tiles. The source file has four tiles for the corners, four tiles for the sides, and one tile for the center. Here's what the source looks like (blown up 4x because it is tiny.)

Image

This is incredibly useful because it's now possible for me to draw stylized boxes for potential UI components at any size without having to draw each one individually. One thing that I wish that I had spent more time on in Offspring Fling is the UI for the menus, so in the future I want to make my menus and interfaces as awesome as they can be, and having some functions do a lot of the fancy work for me is a big step in that direction. Here's what it looks like right now: NineSlice.as

Here are some snippets of code from the example shown above:
//initial set up
private var nineSliceTest:NineSlice = new NineSlice(Assets.IMG_NINE_SLICE_TEST, 3, 3, 3, 3);
//in the entity's constructor
nineSliceTest.scrollX = nineSliceTest.scrollY = 0;
nineSliceTest.width = 40;
nineSliceTest.height = 40;
nineSliceTest.x = 50;
nineSliceTest.y = 50;
//in the entity's render function
nineSliceTest.render();
Right now this is a very rough first pass on this kind of thing. Ideally it would be some sort of Flashpunk graphic extension that would plug directly into the Flashpunk rendering system. For now it makes use of the Flashpunk Draw class, and some utility functions that I've written for myself. Feel free to use it or improve it, and if you end up improving it then let me know!