archives | wasted potential

Pixi.js – HTML5 for Flash developers

On March 24, 2013

In Actionscript/AS3, Flash, Game Development, HTML/CSS, javascript, Uncategorized

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.

Creating a simple iOS game – Bouncing Babies

By Andy

On March 14, 2013

In Game Development, iOS Game Dev, Uncategorized

The first post in my iOS game development series…

I like to create games that use interesting gameplay mechanics – things I’ve never seen before, or an interesting twist on a classic game. The problem is that new mechanics are difficult to code. If you want to make something standard, like a Super Mario clone, it’s easy to find a game engine that will do most of the work for you. But new mechanics often require modifying a game engine, or even creating one from scratch. This can be time consuming and frustrating.

I’ve been working on a conceptual game prototype for a while now and it has me pulling my hair out at the moment. To make matters worse, this is a “stripped down” version of a larger game that I want to create. I thought this light version of my concept would be easier to code, but it has turned out to be pretty complex too.

In the meantime, I’m interested in creating a game for iOS. So, I’ve decided to create a very simple game from scratch and blog about the entire process. I’ve never created anything for iOS, so I will have a lot to learn. I also plan to post all of my progress publicly on github, so anyone who wants to follow along can pull my code and see what I’m doing. Since this is a learning process, there will likely be a lot of bad code and blind alleys. And since I have a day job and a family, progress is likely to be slow.

With these constraints in mind, I’ve decided not to design my own game entirely from scratch because I will inevitably add some seemingly simple gameplay element that will derail the entire process. Instead, I’ve decided to remake a classic DOS game from back in the day…

Bouncing Babies was a deceptively simple arcade game that I used to play on my first PC – a Tandy 1000 (yes, I’m old). Here’s a video of the game:

Like all classic action arcade games, the gameplay is simple, but it’s surprisingly addictive. It was one of my favorite games when I was a kid and there are few good remakes of it. Considering my time constraints, this is a project that I might actually be able to finish in a reasonable time period. Additionally, the game code shouldn’t be too complex, so development shouldn’t require any weird hackery (famous last words). I can still do a full redesign of the graphics and animation, but the gameplay will be the same.

So, stay tuned for more updates as I dive into this. This whole project may go down in flames, but I promise it will be an interesting ride.

Here’s a link to the github repo I will be using:
https://github.com/wastedpotential/bouncing-babies

Make Good

By Andy

On March 5, 2013

In Game Development, Uncategorized

For the past week, I’ve been mired in a complicated mess of Actionscript that I wrote myself. I’m trying to untangle it so I can move forward with a game prototype I’ve been building (on and off) for nearly a year. On top of that, I just realized that I had overlooked an important concept that threatens to derail a big chunk of the game. It’s been a bit discouraging, so I was happy to come across this video of Neil Gaiman giving the 2012 commencement speech at the University of the Arts in Philadelphia. I thought I should share his encouragement. The speech is a bit long, but definitely worth watching.

This speech is just what I needed. I would only change the tagline from “Make Good Art” to simply “Make Good.” Whatever you do, even if you think it isn’t art, Make Good.

How To Use Firebug to Fine-Tune Mobile Website CSS

By Andy

On February 28, 2013

In debugging, HTML/CSS

If you are doing front-end web development, you likely use Firebug. It’s a Firefox browser extension that provides all the basic tools you need to debug a website. Development tools in all of the modern browsers are based on the gold standard set by Firebug.

One of the most common uses of Firebug is to make changes to your CSS in real time. You can experiment with different styles until your layout looks right, then simply cut and paste everything into your stylesheet.

This works great for desktop browsers, but mobile browsers don’t have development tools. If you want to debug your mobile layout, you need another browser extension that allows you to switch the user agent. There are a number of good ones out there. I’m currently using User Agent RG for Firefox. Once this extension is installed, you can change the user agent string by going to the “Tools” menu and choosing “User Agent.” Simply choose a mobile device and you can get an idea of what your site looks like on a mobile device.

It’s important to understand what the user agent switcher does (and doesn’t do). What it does is tell the browser the type of device that you are using to browse the web. The Firefox plugin basically lies and says “I am using an iPhone” (or whatever). If you have a mobile version of the website, that version will be displayed.

What it does NOT do is make Firefox act like Mobile Safari, or any other browser. If there are browser-specific layout issues, you will not be able to see them with the user agent switcher. Luckily, mobile device browsers are fairly standards-compliant, so very few CSS issues are browser-related. Browser-specific issues like HTML5 video issues (*cough* Mobile Safari *cough*) still need to be debugged with that browser.

The other thing that user agent switching doesn’t do is resize your site to mobile browser dimensions. To get an accurate sense of how your site looks on a phone or tablet, you will probably need set a body width in your CSS:

body {
    width: 320px; /*older iphone width*/
}

This way, you can lock it to the dimensions of the device you want to test and tweak the CSS with Firebug to fix any layout problems.

This has been the quickest and easiest way I have found to fix mobile-specific layout issues. Good luck!