Flash mobile tip number 1

Published July 27, 2010
Advertisement
I got a request from one of those game portal programmer sites to impart a little of my experiences regarding getting a quality Flash title running on mobile. Rather than come out with one big article, I decided to just post some tips and bits of code a little at a time.

For the record, most of this experience is done porting Bulldozer and Duck Tiles and doing a non-ported "game from scratch", Pop Pies 3, which was designed as a single SWF that runs equally well on desktop as well as mobile by using alternative (read: not as nice) animations on a constrained platform.

That being said, here's tip number one.

The width and height you set for your movie is a RECOMMENDATION, not a REQUIREMENT. Don't assume stuff outside the bounds will never be seen.

What that means is that your runtime engine can choose not adhere to the recommended width and height. Flash has had the ability to run its content full screen for a couple of versions, but not much has taken full advantage of it until now. If you're scrolling through a web page on your Android phone and you see a cute Flash game you want to play, you can double-click it to blow the game up to the size of your screen. When your game grows to full screen, it will retain its proportions. That means that unless the game just happens to have the same aspect ratio as your phone's screen, there will be some extra space along the top/bottom or sides.

And whatever happens to be in that space will be visible. If your game's background wallpaper stops right at the edge, people will see it. If you have some particles that you scooted off the edge of the screen so you wouldn't have to re-instantiate new ones later (which you should do, but more on that in a later tip), you'll likely be able to see them.

Here's an example of Pop Pies running in its suggested resolution of 550x400 pixels



Now that looks just fine. Volume control is in the lower left. Logo in the lower right. Everything fits.

Also note that I have a rather subtle gray gradient going from gray on the left to white on the right.

Here's the same game run in full-screen landscape on a portable screen.



Note that the aspect ratio of the game is the same (i.e. nothing is stretched), but since it's running on a wider screen, there's some stuff off to the side that's now visible that wasn't before.

When I first ran Pop Pies 3 on an Android, it didn't look so nice full screen. Since I assumed nothing off-screen would show, my gradient went from 0,0 too 550,400. And when it ran on the Android, there was an obvious "seam" just to the left of the volume control. So I later made the background gradient much larger than the window to account for this.

Here's the game running in full-screen portrait, showing that I still need to make my background gradient larger. Note the fruit and pie "watermarks" are hanging well outside the what-I-thought-to-be-visible area, but the gradient isn't.



Also, I had some reusable particles (just colored circles) that I used for explosions and sparkles and other eye-candy. After a particle expired, rather than deleting it, I just set its X to -20 to shove it off the screen. If I had another explosion later, I'd just move any available particles into place on the screen rather than re-instantiate them. It's a fairly common technique if you have a lot of disposable bits and you don't want to make the garbage collector sweat. But when the game went full screen on Android, I ended up with a rather entertaining smear of unused particles along the left side of the screen.

So I had to hide them more effectively.

Keep this in mind.


And while I'm thinking of it, here's tip 1 1/2, just because it hasn't been said yet.

Use stage.displayState to check and/or set full screen

Provided your Flash movie has 'allowFullScreen' set in its embed parameters, it can go full screen. Most Android game websites will take advantage of this. While users can manually blow your game up to full screen by double-clicking it, you can also help 'em out by rolling your own maximize button (which is that little full-screen button you see in the corner of the above screenshot).

stage.displayState can be set to StageDisplayState.FULL_SCREEN or StageDisplayState.NORMAL. You can check or set this value to go to or return from full screen.

Note, though, that there are limitations.

1. You can only set stage.displayState in response to user input! Because someone (rightly) thought that hijacking a webpage to display a full-screen Flash animation would be annoying, they crippled the ability to set it. So if you want to make your Flash game go full screen, you'll need to attach the code to a nice little button like I did.

2. You cannot check to see if 'allowFullScreen' is set for your movie, so you can't be absolutely certain that your movie is allowed to go full screen. I'm not sure why they did this, but it really bugs me. I've seen a couple of sites that offer hacks to check that value, but I've yet to find one that works reliably. If I find one, I'll definitely post it.

Note that about 100% of Android Flash game sites will have 'allowFullScreen' set to true, so if you're writing a game that specifically targets Android, you'll be fine.
Previous Entry Free JQuery book!
Next Entry Handy piece of code
0 likes 0 comments

Comments

Nobody has left a comment. You can be the first!
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Advertisement