Nov242008

Vector vs. bitmap graphics in Flash

So, although Flash/Actionscript has super easy ways to scale and rotate a graphical object, when I loaded up a PNG for my spaceship and tried rotating it, it looked pretty ugly. Of course, I didn’t expect OpenGL-quality scaling and rotation, but I was surprised at how bad it looked. I soon learned that while you can easily import bitmap graphics into Flash (i.e. GIF, JPG, PNG) they don’t keep their quality if you scale or rotate them. In order to do that, you need to use vector graphics. The gist of vector vs. bitmap graphics is that bitmaps are based on pixels, which do not scale very well, while vector graphics are based on mathematical equations that can be scaled based on screen/size requirements.

One benefit of the Flash IDE is that you can easily create vector graphics and use them in your movie/program. In my initial research, it wasn’t immediately apparent if you could create vector graphics in another program and then import to Flash. Of course, you can do it with Adobe Illustrator, but how about some other (free) program?

Turns out that you can. Inkscape is a free vector graphics editor, which can output SVG file format images that can be directly imported via Actionscript into your Flash program. Pretty great! One of my goals for today is to learn the basics of a vector graphics editor… I’m fairly familiar with programs like Photoship/GIMP, but Inkscape seems to have some different paradigms that I’ll have to pick up.

1 comment · Written by Nathan at 8:52 am · Tags , , ,

Nov202008

Two more builds

I didn’t post my progress yesterday, so today you get two versions of my program.

Added an asteroid object and player bullets
Added collision detection, score display, and a rudimentary level manager

The player movement is still a bit weird.

No comments · Written by Nathan at 9:14 am · Tags

Nov182008

Gannroids

In the breaks I have at work I downloaded and installed Adobe’s CS4 software and decided that I would make a quick little prototype game just to learn about ActionScript 3.0 and CS4.  I did what I usually do which is to make an Asteroids clone.  This time the theme would be one of my co-workers; I wanted to blow up his head, what can I say? *grin*  The collision is a little funky due to my sloppiness/laziness but I’m satisfied for the amount of time I put into it; which I would say perhaps 12 hours over a week and a half.  Most of the time was spent learning ActionScript idiosyncrasies.  Here is the result:

For some reason the transparent pixels wouldn’t save when I uploaded to WordPress, so you get square heads.

Gannroids

CS4 has some interesting features.  One can enter media objects onto the stage and bind them to a keyword and ActionScript file.  Its seems cool at first and really easy, however it only seems useful if you have one or a few instances of a class.  For the most part I just bound the stage to my game.as file and let game.as handle everything.  I created classes for Asteroids and Bullets to learn how to do class work in ActionScript and I ran into a few problems but for the most part everything was seamless.  (As seamless as it can be writing anything in a new language).

To look at some specific problems I encountered, continue reading.

(more…)

1 comment · Written by Tyler at 2:26 pm · Tags , , ,

Nov172008

Progressive enhancement

Weekend progress

Obviously, getting from displaying a keyboard-controlled object to a more “game-like” state is pretty easy. Here I’ve loaded an external PNG (that represents a spaceship of some kind) and attached it to a “ship” class instance. The left/right arrow keys control the object’s internal “rotation” value, and pressing the up arrow key moves the ship. The direction is determined by trigonometry functions; the movement vector along the x-axis is cos(ship.rotation) and the y-axis movement vector is sin(ship.rotation). (For example, if our ship is pointing straight up (90°), cos(90)=0 and sin(90)=1, so it’ll move straight up.)

No comments · Written by Nathan at 8:19 am · Tags , ,

Nov142008

First Actionscript example

First Actionscript example

So here’s the first real result of my toying Actionscript. If you’ll notice, the last post where I actually first downloaded the Flex 3 SDK was two months ago. It didn’t take me two months to do this, but rather took me that long to figure out when I could fit in extra programming time. The past two weeks I’ve started waking up super early, in order to study Actionscript before work. Anyway, I digress. This SWF was created with multiple classes, including a keyboard handler, main program class, and “entity” class (which in this case displays a blue box). Slowly figuring stuff out, like how to import graphics and associate them with an object, as well as event handling. Once the language-specific stuff gets figured out, things get easier because you know how to implement abstract algorithms/ideas. (Ah, just to reduce any potential confusion, you have to click the SWF in order to set focus, since it’s not embedded in the page. Apparently WordPress doesn’t like to embed SWFs…)

1 comment · Written by Nathan at 9:38 am · Tags , ,