The gamedev lobe of my brain states we need to comment on what we’re doing and why as regards to our 2D game. ‘Huzzah is making a game?’ you ask. Why yes, so glad you asked! It’s a stripped down 2D version of my ego, armed with all things sci-fi. Of course, these days sci-fi means taking a look at what DARPA is up to, but that’s neither here nor there. At any rate, I’m making my 2D mechanical Frankenstein in a free piece of middleware called Construct. It is open source (downloadable on SourceForge), has a helpful community, and most importantly: it works.
I don’t mean it can start and run, drag a few items around, and ‘it works’. No, I mean you can make a real game with it from start to finish. Construct produces an actual 32-bit .exe that runs without extra .dll’s, scripts, or addons (except for DirectX 9 itself and a video card with Pixel Shader 2). You can put said file on a USB stick even, and it runs on that as well. What’s better is you can use registry hooks, python scripts, MD5 hashes and more, if you want to.
Now understand that Construct is an event-based ,WYSIWYG beastie – no real programming required. No, yours truly is not a programmer, not in any sense of the word. I can blog with the best of them, but I can’t program my way out of a Lua script (yes, I’m that bad). I can get the ‘why’ behind alot of it, it’s the ‘how’ that throws me. This is why Construct is so helpful to me. I can make things work without turning my creative brain inside out. The game industry would likely think of me as an Idea Man. Construct allows me to make simpler versions of my ideas, which is great for prototyping.
A view of Construct’s event editor.
My first game (which will invariably suck, as first games always do) is a standard top-down view shooter (aka shmup) set in the solar system of 61 Cygni. You start out controlling a mecha (aka giant robot of doom) which must defend a large capital ship from incoming smaller mecha (green shrimps of lesser doom) and their overlord destroyer escorts (green cheese wedges of doom). Construct uses DirectX to make the static image files move and rotate. The event-based script system is logical enough that the Black Hole of Programming that I am can grasp what’s going on, and what I need to do to fix it when it breaks.
No, it’s not 3D. No it’s not an MMO. No it’s not a AAA game engine (heck, it’s barely a B). But it helps ME make something, which is invaluable personally. My overarching Rule of Middleware is: does it do what says it will do? (The 2nd Rule is : does it help ME do what it says it will do?) There is a zombie army of free and/or cheap middleware floating around on the intarweb. My job the past 10 years has seemingly been to attract every single one of them, hence my overarching Rule of Middleware. At this point, I can usually spot bad middleware a mile away, which is a helpful skill. The last thing you want is to waste time on something that doesn’t work. Construct fulfills both the Rule of Middleware and the 2nd Rule. Huzzah!
Color me impressed. Construct now has 3d meshes coming soon. Per Ashley in the Forums, we have liftoff on more than a basic square with a texture on each side (the Empire State Rocket effect). Not much more, but this allows for more possibilities for Construct v1.0. WARNING: I would not recommend using this new version (v0.99) yet. This is a very unstable, buggy build that is made to be tested. Stick with your previous versions for making real projects (for now).
In other news, I might just have a game of my own coming soon. How soon? When It Is Done (TM). I’m still working on getting Steamworks hooked up to it, so I don’t dare mention more until that happens. NEVER announce a project unless you have a reasonable chance of seeing it to fruition. If I’m successful with SW, then I’ll begin posting about the game. My project runs fine as a stand alone .exe, but there is no security to protect the thing yet. Oh, did I mention it’s an 2d indie project I will attempt to (GASP!) sell?! Could be. It might be why Steamworks is needed, after all.
Keep your sensors peeled.
Art Is In The Eye of The Beholder
The first rule of using Construct is: you need sprites, aka pictures of your player, enemies, powerups, levels, etc. Construct does have a graphics editor built in. However, it is as useful as MS Paint. If you purchased Photoshop already, skip this article. Seriously. Go make a layer style already. For the rest of us, how about taking a step up from MS Paint without having to purchase or pirate Photoshop? Let’s point you to some free graphics resources. Have our cake and eat it too? Lead on!
Here’s what we’re looking for:
- It needs to loosely resemble Photoshop so we won’t have difficulty stepping up when we need to. Most sprite pixel sizes are small for the most part (under 256×256, not including backgrounds), so this helps us a great deal in our choices.
- Free is for me. It can’t cost anything! This allows us to keep our geek cred bragging rights, as well as save our wallet some pain.
- Needs to support .png’s with alpha channel transparency, bare minimum.
- Needs to have an upgrade option, even if that means going straight to Photoshop.
ARTWEAVER (8.85MB installer)
A view of Artweaver’s main layout.
Our first graphics program is very portable and very capable. Made by Boris Eyrich, this is a freeware program that fits somewhere between Photoshop 4 and 5, both in features and in GUI. It has the basic tool set, layers, history, and filters of Photoshop, combined with an outstanding brush system. In fact, the brush setup is stronger than Photoshop CS, in my opinion. De-selecting is a bit quirky. In fact, the easiest deselection method is to right click and choose ‘deselect’. That can definitely be tiresome after a while.
Artweaver is focused on drawing sprites, with an emphasis on drawing. It has a few Photoshop tricks, but the brushes are it’s main focus. Artweaver uses it’s own custom filter format, so no loading external Photoshop filters at all. You get some included basic filters (sharpen, blur, render, tools, noise, etc) but that’s it. This wouldn’t be such a negative if there was a community making additional filters. Again, Artweaver is focused on drawing. Coupled with any drawing tablet and you have a powerful art platform. It has TWAIN import so you can use a scanner, too. You can also use it straight up from a USB stick. If you need to draw, this is the best tool on our list. I’ll show you some Artweaver tips in another post on how to create some good effects (hint: gradients are your friend).
- Windows XP (SP2) – Vista – Windows 2000
- Pentium compatible processor, 600 MHz or greater (1000 MHz recommended)
- 800×600 resolution (1024×768 recommended)
- 128 MB RAM (256 MB recommended)
- 30 MB disk space
- 15-bit color display (24-bit recommended)
PAINT.NET (1.63MB installer)
Paint.net has a simple, smooth GUI.
Where Artweaver offered superior brushes and Photoshop mimicry (but lacked some GUI elements), Paint.net flips the coin. Without a doubt, Paint.net features the smoothest GUI out of our reviewed paint programs. The sub-menus are transparent, which allows you to keep painting without moving extra windows. It has more filters (called ‘Effects’ here) than Artweaver. More importantly, it has a user community creating more.
Paint.net is superior to Artweaver is several ways: unlimited history (limited only by available disk space), constant software updates, and tabbed documents. However, it doesn’t even come close in the brushes department. Like Artweaver, it also allows you to use a drawing tablet and has TWAIN import.
- Windows XP (SP2) -Vista – Windows Server (2003 SP1 or later)
- .NET Framework 3.5 SP1
- 1024×768 resolution
- 256 MB RAM (512 MB recommended)
- 200+ MB disk space
IcoFX (1.46MB installer)
This is a great program for a specific reason: sprite size. You can create game icons and website favicons, as well as sprite graphics, with a single piece of free software. There are some limits, but they end up helping rather than hindering. Maximum graphic size is 256×256 pixels, with several smaller default sizes. This helps us in 2 ways. First, it forces us to be economical with our physical sprite size, which keeps our file sizes down. This is a must if your game is flinging a few hundred entities around. It also gives us preset image sizes, in case you get really lazy. Second, we can quickly make proper game icons out of existing images of any size, presets or not. IcoFX allows us to resize and/or crop images very easily. Need to mash a big picture into an icon? Or a smaller size? This’ll do it fast.
GIMP (15.3MB installer
The one, the only, the GIMP. Once upon a time the GIMP was known as a Photoshop-Killer. However, several versions and updates later, Adobe has certainly pulled ahead and never looked back. The doesn’t mean the GIMP is useless; far from it. Out of all our reviewed programs, the GIMP can run on just about anything. That’s not such a great feature for Construct (which is a DirectX game creation system), but it does lend OS flexibility when you need it.
Dogwaffle (4.4MB installer)
Without a doubt, the most avant garde software of the bunch. It also has the lowest system requirements (Windows 95) However, for creative types it fits to a tee. Considering Construct is for non-programmers, or at least people who find programming difficult, this might fit alot of people. And if you upgrade, the full versions won’t break your budget (unlike Photoshop). Dogwaffle has a great focus on making organic panoramas and backgrounds. You can make some fantastic backdrops with little effort thanks to the built in tools. Unlike Artweaver, which focuses like a laser beam on brushes, Dogwaffle focuses on paint nozzles and effects.
Organic objects like plants, leaves, trees, fur, etc are very easy to create. It also has an amazing set of effects for what you get (free). The difficulty is in finding how to use the tools after jumping right in. You WILL need to sit down and read the help files to find out how the software and GUI work. It only saves in .bmp and .tga, which means transparency is right out. However, this is fine for what Project Dogwaffle does well: backgrounds. This is an artist’s program, not an IT professional’s. It is budgeted towards artists, made for a more artistic mindset, and feels more homegrown.
That said, it’s still a very useful program (for the price). While Artweaver and Paint.net have a more logical, deliberate, and clean GUI, Dogwaffle is much more experimental. It forces you to delve into it, learn the tools, and get your hands dirty if you expect to use it. Once you do, then you can start seriously throwing pixels with it. In other words, don’t expect to dive in and get something done in 5 minutes with the free version.
A sample background made with PD Particles.
If you want something you can install, run, and have some amazing art in 5 minutes, then buy PD Particles. Even the low end tools such as PD Artist and PD Particles (both currently $19 as of 04/18/09) have an amazing number of palettes available that blows the other free tools away. They both have some serious bang for your buck. Both are full featured, meaning they can output with transparency if you need it. If you need to get some serious graphics going, PD Pro 4 (currently $119, 100 bucks more, as of 04/18/09) has animation and special F/X beyond what we need.
- Windows 95/98/ME – Windows XP (SP2) – Vista – Windows 2000
- Pentium compatible processor, 600 MHz or greater (1000 MHz recommended)
- 800×600 resolution (1024×768 recommended)
- 64 MB RAM (256 MB recommended)
Currently, I use Artweaver for prototyping. It is extraordinarily portable. It has a decent set of basic tools. It is stable, free, and allows me to draw easily. The rest depends on the project’s art style. I’m designing a platform game with an ancient Japanese flavor, which PD Particles helps me with. On the other hand, my shmup is done in Artweaver and IcoFX exclusively. Each of these free tools has it’s own strengths and weaknesses. Spend an afternoon downloading them and put them through their paces. Some are easy to jump right into, others need some time to figure out.
All of them can be useful.
[Parallax: Parallax is an apparent displacement or difference of orientation of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.]
Now if you are anything like me, that definition just went about as far over your head as a Saturn V rocket. In plainer english, parallax is 3D depth of movement. An object farther away moves at a different rate than an object closer to us. Here’s a visual example in 3D:
See? Nice and simple example, it’s much easier to SHOW you than to explain THAT. Parallax in 2D games is a whole other ballgame. It is a trick older than time. You use 3 backgrounds instead of 2. As the player moves through a level, each background layer scrolls at different speeds to mimic 3D movement. They don’t even have to be the correct speeds, the bottom layer just had to move at a slower rate than the upper layer. In Construct, this can easily be achieved with 3 or more layers. The beauty of Construct is that you are not limited by merely 3 layers. My space shooter’s first introductory level uses a layer for the player (hey, that rhymed!), 3 layers for parallax backgrounds, and a foundation layer to preserve our original scroll rate. So our layout is thus:
The key here is scroll rate. In Construct, go to the layers tab and create 5 layers.
A view of Construct’s layer tab.
Name them per the order listed above. Once you have them, set the ‘Scroll X Rate’ and ‘Scroll Y Rate’ for ‘background1’ to 75%, set ‘background2’ to 50%, and ‘background3’ to 25%. Leave the ‘player’ and ‘foundation’ layers at 100%. To test this, add some sprites (any sprites) to each layer, add a test sprite to the ‘player’ layer, and add an 8 direction behavior to it. Now test your game by hitting the computer monitor icon in the upper left, next to ‘File’. Boom, you can now see triple parallax at work. If you want even more depth, add more layers between ‘player’ and ‘foundation’, simply adjust your scroll rates and you’re off to the races.
What we’re doing here is creating a parallax sammich where our player (and everything on his layer) moves with our main background (‘foundation’ layer) correctly. Meanwhile, our parallax layers do their thing and don’t screw anything up. If you want to create a game where the entire background moves then leave the ‘foundation’ layer completely blank – put it in, but don’t use it at all. In my case, I put my star field in background3 while using asteroids of different shapes in background2 and background1. This gives me triple parallax while preserving the player’s scroll rate. The general rule of thumb is the very bottom layer and the very top layer MUST have the same scroll rate for this to work. It’s that easy once you know the concept. Have fun!