nathandemick.com

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 comments

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.

· 0 comments

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.)

· 0 comments

1024

· 0 comments

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 comments