Archive for the ‘Flash’ 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.

Pixi.js – HTML5 for Flash developers

March 24th, 2013

pixi js Pixi.js is another javascript framework that attempts to recreate some of the features of Flash. It even replicates a lot of Flash components: MovieClip, Sprite, Stage, DisplayObject. It’s an impressive javascript library. You can download the source and some examples from github. I spent a little time hacking around on the examples and picking through the source code. Here’s a video introduction if you prefer that, or you can skip down to the text below the video…

Here’s a quick primer on Pixi.js:

It’s really comfortable for Flash/Actionscript developers. The folks who created Pixi.js are clearly very familiar with Flash and used a lot of Flash terminology in Pixi.js. It also feels like they worked hard to make it very easy to dig in and start creating cool stuff with minimal boilerplate code. I really appreciate that.

There is no built-in way to set a target frame rate in Pixi.js. Technically, there is no way to force a specific frame rate in javascript and it will only do the best it can, but Flash worked that way too and you could still give it an FPS target. The Pixi.js examples seem to rely on requestAnimationFrame() to run at 60 FPS. This is not reliable, so if you use Pixi.js, be sure to write some code to handle the rendering frame rate.

Pixi.js has a really clever renderer: It detects if your browser is WebGL enabled. If not, it falls back to an HTML5 canvas renderer. Not only is it cool that it handles this for you, but browsers with WebGL (Chrome, Safari) are hardware accelerated. This means that they can unload the rendering from the CPU to the GPU, making everything run much faster. Firefox also supposedly has WebGL capability, but from what I’ve read, the performance is questionable. The WebGL thing is going to be a big deal as it becomes more widespread. As usual, IE10 doesn’t support it, but it does have hardware accelerated canvas.

As a side note, the hardware acceleration is all based on your browser and hardware configuration. So, if you have a relatively new device and an updated browser, it just kicks in automatically. iPhones and iPads all support hardware acceleration and many Android devices do too. Obviously, how you handle older browsers is the challenge. In most cases, a less full-featured backup may need to be served up. In a few cases, the user may need to have hardware acceleration to run your game or app at a reasonable frame rate. A smart way to handle this is to check the frame rate of the game and alert a user if it drops below a minimum threshold.

So grab the Pixi.js code and start building some HTML5 goodness.

Why I Still Make Games in Flash/AS3 (for now)

January 14th, 2013

As I look ahead to this year, I have several posts planned around game development in ActionScript 3 (Flash). So, I thought I should post a brief explanation about why I’m STILL developing games in AS3. After all, isn’t Flash dead? Aren’t we all living in a brave, new HTML5 world? Here are a few of the reasons why I’m developing in AS3:

actionscript vs javascriptAs of this post, HTML5 <canvas> support is still inconsistent across major browsers. Admittedly, the main issue is Internet Explorer, but they still have a HUGE market share and can’t be completely ignored. For most of our <canvas> projects at work, we still end up building a Flash backup. If you’re targeting desktop devices for your games, publishing to Flash gives you a bigger market share than HTML5 <canvas>.

HTML5 <audio> support is pitiful. In some browsers (*cough* Mobile Safari *cough*), it barely works at all. Then there are issues with preloading sounds so they are actually available when you need them. Read more…