Archive for the ‘Actionscript/AS3’ Category

I Love/Hate Game Engines

July 16th, 2013

I haven’t posted anything in a while. I’m not being lazy – I’ve been focused on a game prototype that I have been fooling with for over a year. I picked it up again last month after a long break and I made a few breakthroughs – fixing several major issues by hacking the game engine I am using to build it.

I have a love/hate relationship with game engines (and frameworks in general). I’ve used a lot of code frameworks in my day job: Drupal, WordPress, Magento, BigCommerce, Gaia, Flixel, Flashpunk, Backbone, and a handful of others I can’t think of right now.

The simple fact is that any code framework is a philosophical statement. It’s a developer’s way of saying “this is the way that I think this (whatever) should be built.” Sometimes, they’re great. I’m personally a big fan of WordPress as a CMS and website framework. Other frameworks seem like they’re well thought out, but don’t align with my workflow, like Backbone or the Flash Gaia framework. Still other frameworks seem to have fundamental issues that makes them cumbersome to deal with. *cough*Magento*cough*.

I’ve been building my game prototype in Flixel, which is an Actionscript3 framework for building retro-style 2D games. It’s a really great framework, especially if you are building something with fairly typical game mechanics, like a 2D platformer or a top-down shooter. Unfortunately, I’m working on a concept that uses non-standard game mechanics, so I’m building a lot of pieces from scratch. Even worse, I spend a lot of time chasing down gremlins in the Flixel engine and modifying the core code.

This is where my love/hate comes in. On one hand, it’s a hassle to deconstruct someone else’s code and modify it for your needs. I spent nearly 8 hours tracking down a bug (or “unimplemented feature”, depending on your point of view) in the Flixel core that was caused by the fact that width and height measurements are stored as integers instead of floating point decimals. There’s actually no reason why they’re stored that way, except that the Adam Atomic (the creator of Flixel) never needed the decimal part of the width and height, so storing integer values made sense. I needed the decimal parts and the rounding errors were causing all sorts of ridiculous problems. I’m currently dealing with another issue that Flixel doesn’t handle – how to collision test for a “squish.” That is, how do you know if a player has been smashed between two objects?

Despite these hassles, using a game engine is a better way to go than building everything from scratch. First, you get a lot of features pre-built for you. Flixel handles all of my rendering code, object placement, and most of my basic collision testing. That’s a lot of code that I didn’t have to create from scratch, which saves me a lot of time. Additionally, there is a community of developers using Flixel – so, I can post questions to the community forums when I get stuck.

Developers tend to have strong opinions. So, it’s rare to find a framework that perfectly suits your coding style and workflow. This actually leads a lot of developers to create their own frameworks. A few years ago, when I was doing a LOT of Flash work, I developed an Actionscript3 framework that enabled our team to knock out flash websites and apps very quickly. It suited our workflow, which was very animation-heavy. I have seen similar approaches in other Flash frameworks, but ours was tailored to our specific needs.

I know some developers who will create an entire framework for a single project, but this seems like a lot of work to me if you’re not sure that you’ll ever reuse the code. I have a personal “rule of 3” when it comes to building reusable components:

    • The first time I need something, I create the code and drop it in where I need it.
    • The second time I need this same functionality, I cut-and-paste it from the previous project and probably clean it up a bit.
    • The third time I find myself using the same code, I package it into a reusable component so it’s easier to implement in the future.

My Flash framework grew out of a collection of these components that I organized and refined over a few years.

If you build similar types of things over and over, you can create your own framework organically this way. Otherwise, I suggest using existing engines and frameworks. There is no need to reinvent the wheel for a one-off project. It’s also useful to see how other people handle various problems. I often find useful bits of code that I can swipe for my own projects. As much as using someone else’s game engine isn’t ideal, it still saves me a lot of time. I really appreciate the folks who open-source their frameworks and spend time maintaining them for the rest of us.

If you care to try Flixel, the most recent version is currently being maintained by the community on Github.

Here’s a link to my hacked version of Flixel. Use at your own risk!

Using Intellij IDEA for Actionscript Development

May 30th, 2013

I’ve been a die-hard Windows guy for a long time, but this year I switched to using a Mac so I could learn some iOS development. Since I made the switch, there are a few PC-only programs I miss. One of them is FlashDevelop – which I use(d) for all of my Flash/Actionscript work.

Flash is dying – that’s a fact. Not many new projects are being built in Actionscript these days, but I still get some Flash work trickling in now and then. I’ll also have a need to maintain or update older Flash projects for a few more years, so I need a good Actionscript IDE on my Mac. I tried running FlashDevelop on Parallels, but there were a few nagging problems with it that made it less than optimal. After doing some research on Actionscript IDEs for the Mac, I settled on Intellij IDEA. I was already using PHPStorm and I liked it a lot, so I thought I would give Intellij a try.

It’s been a great IDE for AS3 work. I like it almost as much as FlashDevelop, but the documentation is lacking a bit. Figuring out how to tweak the project settings was a hassle, so I made a video tutorial showing how to set up an Actionscript project in Intellij IDEA:

BTW, Intellij IDEA is an awesome all-around IDE that is definitely worth the $200 license. I use it for basically everything. Check it out for all of your HTML, CSS, javascript, PHP, Ruby, Rails, and JAVA needs.

iOS Game Development – Prototyping Part 1

May 8th, 2013

Another post in my iOS game development series

I strained my back last weekend (I’m getting old), so I’m spending a lot of time sitting down these days,┬árecuperating. On the bright side, I’ve had time to start prototyping the Bouncing Babies clone I’m building for iOS. You can see my progress below:

If you want to check out my code, you can clone the GIT repo. Here are a few notes about the prototype:

I don't have any "levels" in the game yet. So far, it just feeds you one "baby" (yellow ball) after another until you get bored. I was just trying to test out the bouncing and the controls. I will add escalating difficulty in the next week or two.

Since this is a prototype, the code has almost no comments and the structure is a bit of a mess. Prototyping is meant to be quick and dirty. The idea is to get a working demo as fast as possible and not worry about the architecture. This helps define what's involved in building the real game. Ideally, you should throw out the prototype when you're done with it.

You'll need a copy of the Flash CS5 IDE to compile the demo. I'm comfortable coding in Actionscript, so I can build faster in Flash than any other method. I decided to sacrifice open-sourciness for speed in this case. I put all of the code in Actionscript class files, so you can dig through the code without Flash CS5 if you wish.

Realism and simulation are often unnecessary. In this game, I want the bounces to be equal distances apart. If the bounces were realistic, they wouldn't be equally spaced. But, I can make it feel right just by carefully adjusting the height and speed of each bounce. The game won't actually model reality, but a user won't notice because it feels right.

Along those lines, I wanted the bouncing on screen to look good. I know that the path of a ball flying through the air is given by a second-order (parabolic) equation:

y = Ax2 + Bx + C
So, I used this basic equation to specify each bounce. From linear algebra, I knew that I needed 3 equations to solve for my 3 unknowns (A, B, and C), which meant that I needed 3 points on each bounce. These were easily measured directly from the original game, but it takes about 5 minutes to do the algebra for each curve. There are 4 curves. What if I decided later that I wanted to tweak the height or width of the curves? So, I spent a little longer solving the equations with a set of hypothetical points: (a,b), (c,d), (e,f) and used them to create a helper file in Flash. It's in the GIT repo as arcmaker.fla. I can input any 3 points and it will calculate A, B, and C for me. It also draws the graph on top of a screenshot of the original game so I can see it. Last, it spits out some text that I can copy-paste into my game actionscript files. I probably spent a little over an hour on this. I used to resist coding helper scripts and level editors, thinking that it would be a waste of time, but it almost always pays off. If you think a helper script might be useful, go ahead and make it.

Another way of making the game feel right is to speed up the ball a bit on each bounce. When the ball moves at a constant horizontal speed, it actually feels like it's slowing down (because my bounce paths are too wide). I use a multiplier to speed up the ball a bit on each bounce. I created another helper for fine-tuning this. If you right-click on the Flash demo above and choose "Show Testing Console", you can change this multiplier. I have it set at a value that feels okay to me. a value of 1 will not change the speed at all - try it and you'll observe the "slowing down" effect. a value of 2 will double the speed on each bounce, 3 will triple it, etc. After updating the multiplier, right-click on the screen again and choose "Hide Testing Console" to play the game with the new speed settings. Tweak the multiplier value until the game feels right. It's amazing how such a small thing can make a huge difference in how the game feels. Again, this is another one of those helpers that is worth the time to code because I can quickly try different values and see what feels right.

The prototype is coming along nicely. I just have to code in my levels to ramp up the difficulty. Then, I can start figuring out how to port the game to iOS.

In case you missed it, the GIT repo is here. Clone it and you can follow my progress as I continue working.

...And you thought you'd never use algebra in "real life":

game design - who says you'll never need algebra

Yes, smarty pants, I know I could have solved the equations more easily with matrices, but my matrix algebra is super rusty, so I did it old-school.



Entity Component Systems – A Practical Example

April 25th, 2013

I have been reading up on entity component game engine architecture a lot lately. Essentially, an entity component system uses composition to create objects and throws away old-school inheritance style programming. This is because game objects feature a lot of complex functionality that can create inheritance chain problems. I understand the concept and it makes a lot of sense, but there are very few nuts-and-bolts breakdowns of how to implement an entity component system.

Luckily, Richard Lord has come to the rescue with Ash. It’s an Actionscript3 entity component game engine. He also wrote an extremely detailed blog post outlining the difference between an inheritance-based design and an entity component design, with a ton of code snippets so you can see the implementation details.

Please note that Ash is just one variation of an entity component system. There are other ways to do it, but this is the best explanation of entity component systems that I’ve found.