METALLIC WING

a flying game

[metallicwing-blog]

Developer consoles are always a cool addition to a game, like this one from Quake:

Or this one for Valve's Source engine:

If you're unfamiliar with it, it's a window that you can access mid-game. You can type commands into the console to tell the game engine to do things that you might not be able to do through the gameplay itself, like entering cheats. Cheats are extremely useful for development; sometimes you just want to test a level in the game and don't want to worry about staying alive. Consoles can also be used to log information about what the engine is doing behind the scenes.

We wanted something like this in Metallic Wing, so we got to work designing a window panel and new font (largemann) and implementing some basic commands for it (homskillet). Here was the first pass:

It worked surprisingly well, so we started adding more commands and beefing it up. We quickly discovered that there was a lot more power here than we had realized. Not only could you use it for cheats, you could also control the game engine itself through the console: window resolution, volume levels, sound/music tests, etc. The possibilities are virtually endless.

We can start using that for scripting actual gameplay as well. For example, why not add commands to generate waves of rockets, display dialog from the pilot, or move a character from one side of the screen to the other? With these types of commands available, we could start working on creating cutscenes for the game and really get to work on the story. Since the console can be accessed while the game is running, these can all be tested in real-time while playing. You could type in a command to display some dialog, and instantly see the result pop up on the screen.

We are investing more and more into this console/command system as time goes on, so we decided it needed a revamp. The font needed to be a bit smaller, and the colors and contrast needed to be tweaked. Plus, every console should have a cool logo somewhere on it. Look at the Quake console in the first picture. It's got a grimy, rusty look to it that fits right in with the nature of the game. The Source console is clean and functional, but it's not very interesting. Due to the minimalist nature of our game, our console needed to fall somewhere in between.

Here's where we landed:

Looking really slick!

[metallicwing-blog]

I entered one of the MW songs into a music composition contest and got absolutely steamrolled: http://battleofthebits.org/arena/Entry/Intrigue/10650/

121st/231

As one of my friends told me, "that's really not too bad, you almost made top 50%," which is an optimist's way of pointing out that I did slightly worse than the average person.

I'm still pretty happy about it though. I've only been composing music for around 3 months, and I think I've continued to improve since then, so I'll just have to do better next time!

Anyway, we've been working hard on the game and have lots of cool new stuff in place. More info coming soon!

[metallicwing-blog]

Concept art for the Squid Suit by Rob DiTeodoro

[metallicwing-blog]

Dynamically sized (9-slice) panels

This may be interesting to someone out there. In order to create the menu panels like the inventory display in the previous post, I have (out of laziness) been creating textures of the exact size of the panel.

Here's an example:

I then use that panel as a backdrop to display text:

It's not a ton of work, but there are two issues. The first is that I need to create a texture for every panel I plan to display. A simple menu screen may have 5 or 6 panels on it, which is not only annoying but also a maintenance nightmare. If we decide to resize one panel, I need to edit the texture, then change the code to place it differently.

The second issue is that it prohibits me from creating panels that can grow in size depending on what I'm planning on putting inside of it. I need to know the size of every panel beforehand to create its texture. I ran into this issue when trying to design a pop up panel that would tell you what items you've collected in a particular scenario. It would be nice if that panel could be small if the number of items is small, but can grow larger for a lot of items.

I could, of course, simply take a template panel like this:

and stretch it as needed to create a larger panel, like this:

But that's really ugly. The borders are different thicknesses now, as it was stretched more vertically than it was horizontally. What I really want is to make it look like this:

In order to do that, you need to do something pretty interesting. To use the previous example, you have to slice the template panel into 9 different portions, like a tic-tac-toe board:

Those 9 slices (4 corners, 4 edges, and the center) can be recombined to create a seamless composite image. The trick is that you can scale the individual slices in the process, and each one can be scaled in a different way. Here's what I mean (enlarged for visibility):

It looks a little crazy, but there is logic behind it. The arrows show which direction that slice can be scaled/stretched while preserving the desired look.

The center slice can be stretched in any direction, because it lacks any details and is just a solid color. Stretching it does not affect the way it looks at all.

The corners, on the other hand, have the most detail. If you stretch one of the corners vertically, its horizontal lines will become too thick. If you stretch it horizontally, its vertical lines will become too thick. Therefore, you can not stretch the corner slices at all.

The remaining 4 slices (the edges between the corners) are a little more interesting. Take the top edge as an example. You cannot stretch this vertically, as those lines will become too thick, just as in the corners. However, if you stretch it horizontally, it really would not affect the detail at all. That is because the pattern is comprised entirely of horizontal lines. Stretching it just makes longer versions of the same lines. The same goes for vertically stretching the side edges.

Given all of this, with very careful coding, you could create a dynamically sized panel using just a template image and a desired size. With this info, the panel will then determine how to stretch its slices to create the size you need. I was able to implement this last night. The code is a little messy, but it works! The difference between these two images is a single line of code:

Interestingly, the template image can actually be much smaller than the one I described earlier. If you were to reduce it to the absolute bare minimum, this is all you technically need to recreate the above images:

The cool thing is that you can create a panel that looks very different simply by switching your template. Using this template:

the same code produces the following panel:

I thought I invented this technique, but with more investigation, I discovered it's been around for quite some time in things such as Flash, Photoshop, and the Android SDK. It is often called 9-slice or 9-patch. I think it's extremely cool, and I'm glad I took the time to implement it!

[metallicwing-blog]

Story mode!

We've been undercover for a while working on some top-secret stuff!

Without spoiling anything, we're starting to work on explaining who the pilot is, why everything seems to be trying to kill him, and why he keeps on flying anyway. There are many more layers to this world than you might expect! In fact, the final product will be pretty dark. All we're willing to say is that the overall theme is "escape."

In addition to a Save/Load feature, the biggest enhancements have been a time-of-day system (Dawn, Noon, Dusk, Night) and an extremely basic inventory. These will play heavily into the story and will give you plenty to do as you unravel the legend of the Metallic Wing.

Here's a very rough prototype we've got up and running to prove that it works:

We have a difficult task ahead of us now. The urge to reveal exciting developments must be balanced with retaining a strong element of surprise. We are choosing to take some risky design decisions to make a unique and interesting game, so surprising the player is going to be key!

[metallicwing-blog]

woops...

after performing some major surgery on the game engine, I found that practically nothing worked anymore. each time I fixed one problem, I found two more lying in wait. the symptoms ranged from a purple screen to double gameplay speed to crashing on pause. after a stressful few days I think I have found and resolved everything, and the engine is much more powerful now than before. but I definitely learned something about trying to do too much at once.

by far the weirdest bug was the OutOfMemory exception that was crashing the game after about 5 seconds of flying. using Microsoft's profiler tool (to monitor memory usage) and the process of elimination, I narrowed it down to the scrolling starfield in the background.

it turned out that in the process of blindly and mechanically trying to update everything to use the engine's new improvements, I made a really stupid mistake. when a star in the starfield hits the bottom of the screen, it is supposed to destroy itself. instead, it was making a copy of itself. not only are there now two stars instead of 0, but on the next frame, they are still at the bottom of the screen, so both of those will make copies of themselves too. 2, 4, 8, 16, 32... you can see how you would quickly run out of memory at 60 frames per second.

the difference was accidentally writing "Register" instead of "Unregister" in a single line of code. bugs like that give you an appreciation for how fragile computers really are. two letters can be the difference between a working application and an unusable, frustrating, mind-melting, hair-pulling mess. it took me about 4 hours to find and fix that problem. just as a program that seems "smart" really just has a smart developer behind it, the same principle applies to stupid ones.

[metallicwing-blog]

time for some art

largemann here. dont make art posts often, sorry about that. get this:  one time hom deleted a post i made on here. what a joker.

some ideas for a new hud:

and here's a pic of my new dog:

"woof woof"

we've been reworking a lot of the core game recently. we are focused now, some really cool ideas will soon become reality. the next release will once again be much different than previous releases, but i think you will enjoy it.

stay sharp

[metallicwing-blog]

Render Targets in XNA

WARNING: technical post ahead! I had never investigated render targets in XNA before because I didn't understand how/when they would be useful. now that I understand them, I want to use them all over the place! I thought I'd give a brief explanation here on what I've discovered in the last few days in case anyone finds it interesting. I'll probably follow this up with another post in a few days to show an example of where I'm using it right now. XNA's RenderTarget2D class is an extension of the Texture2D class. while I won't claim to know the specifics about how it works, the net result is that you can draw sprites to a RenderTarget2D rather than directly to the video buffer. this creates a texture to which you can apply any kind of processing. you can composite them together, or turn around and draw this texture directly to the video buffer, or apply a filter to make everything more brown to make everything look more like modern games. MW's HUD is a great candidate to use a render target, so it makes a good example of when/how to use them. right now, each item on the HUD knows its "local" coordinates within the HUD, but those must be translated to "screen" coordinates before it can be drawn. I also need to be careful with z-ordering (layering) to ensure that the elements of the HUD area always drawn on top of the gameplay. this has always felt wrong to me, but I couldn't think of a better solution until now. however, if I simply draw all of the components of the HUD to a render target, they don't need to know where on the screen the HUD is being drawn, nor do I need to worry as much about z-ordering. they only need to know where they are on the HUD (relative to its upper left corner) and what z-ordering to have within it. here's how it would work... 1) stop drawing the HUD components directly to the flight screen:

1) create the components of the HUD:

  2) create a RenderTarget2D that has the same dimensions as the HUD overlay:

3) draw each component to the render target with coordinates relative to upper left corner of the target and with the appropriate z-ordering (e.g., the box that shows your crystal should be drawn behind the crystal itself). the result is a single "painting" which can be used just like any other texture/sprite:

4) draw the entire HUD texture to the bottom of the screen:

(I haven't actually converted the HUD to use a render target yet, so this is just a mockup of how it would work, but it's on the agenda) one cool thing to note is that this would make it easy to display the HUD on the top of the screen if the player would prefer that. to accomplish that, I could have the gameplay field render itself to a separate render target, creating two final textures which can just be rearranged. P.S.: the screenshot key (F5) utilizes render targets to capture everything that is occurring on screen in one texture. then, because RenderTarget2D is an extension of Texture2D, I can just call SaveAsPng() to save the screenshot to disk!

[metallicwing-blog]

back from the dead

we've been mysteriously absent the past few months, haven't we? we've been pretty busy. homskillet moved to Knoxville, Tennessee and started a new job in a strange land, and largemann got a puppy. but now we've gotten that annoying irl stuff out of the way, so we can get back to the important things in life, like making a video game that 6 people have heard of, 4 of which are disinterested family members, and the remaining 2 of which are us.

lifted straight from our facebook page:

haven't had much time (or motivation) to work on the game lately because of some big life changes for both members of the team. now that we're settling back in and things are returning to normal, we're ready to get back to work! we are going to have a meeting soon to decide where we want to take the game next. does anyone have anything they'd specifically like to see make it into the game? new modes? ships? powerups? enemies? get rid of the ship entirely and make the game about squid suits in space?

[metallicwing-blog]

Gauntlet build breakdown: Part III - The rest

after a period of silence, we're back to wrap up the series on the gauntlet build. this will cover everything that's left! but first, we want to ask everyone to like our new facebook page. you can also follow us on twitter now: @AAhomskillet and @AAlargemann are our personal accounts, and @AAMetallicWing is for the game itself. notice that we still have no idea what twitter is actually for and use it mainly to insult each other.

anyway, on with the build details!

1. screenshots

press F5 at any time to capture a screenshot. the image will be saved to [MyDocuments]\SavedGames\MetallicWing\[buildNumber]\AllPlayers\screenshots. for example, my screenshots (on Windows 7) are saved to C:\Users\hom\Documents\SavedGames\MetallicWing\0.5.0.2\AllPlayers\screenshots.

the size of the image will be based on the current scale of the game, so if you are playing at 2x (the default), the resulting image will also be 2x. speaking of which, did you know you can use F1-F4 to adjust the scale of the game at any time?

2. new sfx

previously, we'd been generating all sound effects with a really cool tool we found online. it's been incredibly useful, but we always knew that these were just placeholder sounds. we just needed to make sure everything worked while we figured out where we'd get our "real" sound effects from. largemann has stepped up and has begun creating his own sound effects from scratch. you can already hear a few of the new effects in this build: artifacts, upgrades, and the ship's thrusters are all brand new sounds. we'll be replacing more as he completes them.

3. starfield

as a first attempt at spicing up the background imagery of the gameplay field, we created a simple starfield effect. we were worried about adding stars before now because we thought they might distract from the gameplay too much. we managed to find a middle ground that seems to work well; the stars are always visible, but they are very dark and almost blend in with the background. they will also occasionally flicker:

when the player uses thrust, the stars speed up and the flicker rate increases  dramatically:

4. name & logo

we finally have a name for our development team:

and here's our little mascot: 

that covers everything we thought we should share about the new build. there are tons of minor screen, balance, gameplay, and UI tweaks as well, but they are too numerous to mention. or remember.

[metallicwing-blog]

Gauntlet build breakdown: Part II - Squid Suit

as mentioned earlier, the gauntlet build introduced a few small improvements to the squid suit to make it more viable.

1. mini-bursts: 

previously, traveling in the squid suit involved a period of charging up. this works well when you need to travel long distances, but it makes fine grained adjustments very difficult. to maneuver around individual enemies, you can now tap the boost button for a mini-burst, which is denoted by a higher pitched sound. under the covers, we increased the amount of "friction" on the squid suit such that it loses its speed more rapidly during a mini-burst. this allows you to come to rest more quickly, which in turn allows you to move again more quickly!

2. items: 

you can now collect (and use) items in the squid suit. this goes for crystals, artifacts and upgrades. any crystals you may have collected before losing your ship will survive the ejection!

3. ship reentry: 

due to popular request, you can now enter the ship again after ejection. obviously, this only works if it has not since been destroyed. in the future, we're hoping to add some kind of "daredevil" bonus for players that try venturing away from the ship for long periods of time.

4. ship restoration: 

an extension of point #2, if your ship is destroyed in gauntlet mode, you can grab an upgrade to restore it! unfortunately, any boost upgrades you had collected for the ship will be lost. but that seems like a fair trade, doesn't it?

[metallicwing-blog]

Gauntlet build breakdown: Part I - Power Missile

over the next few posts, we're going to break down a few of the many new features in the latest build.

first up.. the Power Missile: 

the power missile takes a different approach towards frustrating the player. like regular missiles, it changes its velocity to track towards the player over time. rather than traveling in large packs, however, the power missile hunts alone. it also cannot be fooled nearly as easily. normal missiles will deactivate if they lose sight of you, but the power missile is persistent. it will continue to track you unless you make an effort to put it down.

so how do you do that?

here's a hint:

happy hunting!

[metallicwing-blog]

Gauntlet build available!

download!

the new build is ready after a long day of work and a few moments of panic! it's a little late, but the time was well spent on a number of small improvements. (we could have switched the release date on the previous post and hoped nobody noticed, but we decided to just be honest instead.)

a more thorough list of changes will appear in future posts, but the most important addition for this build is the new Gauntlet mode. here's how it works:

at the start of a new round, things are (relatively) easy. enemies are weak, infrequent, and few in number. throughout the game, items called artifacts  will randomly spawn on the playing field. every time you collect an artifact, your score is increased. however, collecting an artifact also results in a slight increase in difficulty. examples include an increase to missile speeds or an instantly generated nautilus.

as you collect artifacts, you will also come across upgrades . they are similar to artifacts, but collecting an upgrade will give you a slight edge. examples include reducing the cooldown of your thrusters or instantly wiping out all enemies. unlike artifacts, upgrades are not stationary, so you have to move quickly if you want to collect them. upgrades do not count towards your score. they are provided purely as a courtesy from the developers.

one more thing: you can now collect items in the squid suit. if you've lost your ship, try collecting an upgrade!

please try the latest build and let us know what you think! send any suggestions, bug reports, or threats to [email protected]

thank you!

[metallicwing-blog]

new build coming!

we are working hard on another public build! the plan is to have it uploaded on 10/7 by 11:59 EST. that gives us just over 24 hours from the time of this post.

here's what you'll find in the new build:

brand new gameplay mode

new enemy type

moving starfield background

improvements to the squid suit

improved screenshot feature

revamped main menu

name & logo for our development team

tiny gameplay & balance tweaks everywhere

bug fixes

new bugs

more details will be posted with the build. stay tuned.

in the meantime, enjoy this gif:

[metallicwing-blog]

crystal effect

I slapped together a simple particle effect that fires when a crystal slices:

what do you guys think? does it enhance the effect?

[metallicwing-blog]

2812 overture

we're hard at work on the new gameplay mode, and we think we are really onto something! it's a bit of a change of pace from the "classic" gameplay. your flights tend to last longer, and there's a nice smooth difficulty progression over time as things get increasingly more complex and intense. we don't want to reveal too much more about it yet, because we are still ironing out the sprites, mechanics, and balance, but expect to hear more in a future post.

but enough about that, here is something new: fireworks!

when you complete a flight (or "die" for the pessimists reading this), the flight report checks to see if you just set a high score for the current mode. if so, it sets off a series of fireworks to celebrate!

like almost everything else in the game, fireworks can come 5 colors: gray, pink, blue, yellow, and green. but like real fireworks, we wanted some differences in the actual explosions as well. different radius sizes, different amounts of embers, and different rates of fizzling out.

it wouldn't be difficult to randomize all of those parameters so that every explosion is different, but you run the risk of generating some uninteresting "duds" on occasion. this can be circumvented by defining parameters for a handful of beautiful explosions by hand. once you've got a collection of nice looking explosion parameters, each firework can simply select one of them at random. if a larger explosion is selected, it will also produce a louder boom.

to ensure some of the more wild looking ones don't lose their allure immediately, we assigned weights to the different types so that some would be selected more often. to test that out, we pumped up the rate of "gargantuan" explosions and let them fly:

don't worry, we didn't forget to turn it back down afterwards!

[metallicwing-blog]

color templating

WARNING: technical post ahead!

a recurring theme in metallic wing is the importance of color. rockets, missiles, and nautiluses can each come in yellow, blue, green, or pink, with each color indicating the strength of the enemy:

with how commonly these colors appear, it is important that it is easy to manage how they function. up until now, I have been asking largemann to create copies of a spritesheet in each of the 4 colors. I would name them appropriately ("nautilusGreen", "nautilusBlue", etc.), and load all 4 spritesheets into the game when needed.

this is a very painful process. it requires him to create 4 nearly identical copies of spritesheets for entities that support coloring. if he decides to alter the artwork later, he has to remember to manually replicate his changes to all copies of that sheet and do so without error.

I decided to design an alternative to creating all of these spritesheets by hand and loading them ino the game one by one. we would instead create one "master" copy of the spritesheet, load it into the game, and make the game generate the different colored variations. with some help from Google and my own brain, this is the method I now use:

note: I apologize that it is in picture format, I struggled to post the code to Tumblr in a pleasant format and this was just easier. if you were hoping to copy/paste the code for use in your own game (it will require a few small tweaks but they will be obvious), you can get it here: http://pastebin.com/PRq7r2J9

ColorSwap() can be used to convert a spritesheet that follows a certain "color template" to another set of colors. example:

that is a template sheet. it contains all the frames for the crystal's animation. using this sheet and ColorSwap(), I can easily generate another copy of the sheet, replacing any light and dark purple pixels with light and dark blue pixels.

the result of the above call is the following new texture:

ColorSwap() makes it a breeze to create any colors we'd like!