Jump to content

  • Log In with Google      Sign In   
  • Create Account

Mark the Artist Fights the Future

How to Destroy an Airplane

Posted by , in How-To 07 December 2012 - - - - - - · 1,958 views
pixel art, sprite, tutorial, art and 3 more...
How to Destroy an Airplane Remember the cool damage texture I showed you last entry? I'm gonna show you how to make that. Image heavy doesn't even begin to describe...

The background of this entry is that for the sprite pack I'm making, I have basic fighter jet sprites complete and most of the animations done, but in order for them to be more useful in an actual game (and add value to the sprite pack), they need damage textures. Knowing Photoshop somewhat well, I figured out a pretty simple and easy way to make something look battle damaged relatively painlessly, and thought that it would be useful to share with you guys.


MS Paint, No, Seriously, MS Paint

So I actually use Microsoft Windows Paint for a lot of art I do, mainly because it's so brutally simple that you can sketch out a pixel art subject pretty damn fast, and because it forces you to be considerate because there are no shortcuts to get to something pretty. I contrast that against the use of Photoshop, which lets you cut corners like a banshee. While this entry goes mostly into Photoshop territory, I always like to start in MS Paint.

The size of the sprite to be damaged determines the size of the texture, and the airplane that's gonna get blowed up real good is 128 x 180:
Attached Image

Normally I would do this in the margins of a copy of the airplane, but I separated it out onto a 32 x 32 image here so you could see it better.
Where to start's a good question, but if you look at real battle damage it doesn't look that dramatic, and would barely be visible at this scale. So basically for coming up with a "look" I used some imagination and thought a big gash that revealed a little bit of the structure would look cool, like some big piece of shrapnel took a chunk out of the wing.

Blocking it out with the pencil tool, I came up with this:
Attached Image

If I were working on a full sprite of something, I would make sure to take down those lines to a single-pixel width to get rid of the jagginess, but for this situation, jagginess is exactly what we need. For this inside, I added some straight lines that look vaguely structural and some squiggles that could be ripped up piping. At this scale, it's so ambiguous it doesn't really matter too much:
Attached Image

You could have also done all the above completely in Photoshop with the Pencil tool, but it doesn't particularly matter either way. For the following, however, you will definitely need Photoshop or GIMP (or some other higher-level raster editor) to replicate the effects.


The Power... The Glory... of Photoshop

To get the pixels into Photoshop, it's just a matter of selecting the canvas (Ctrl+A) and pasting into Photoshop. I pasted it directly onto the airplane sprite:
Attached Image Attached Image

Pasting the image in creates a new layer- and Photoshop is all about layers. At this point the layers in Photoshop are these (Watermark just has some behind-the-scenes layers for generating these journal images, like the green background):
Attached Image

Taking off the white is just a matter of using the Magic Wand tool with the trick for pixel-perfect selection being a very low Tolerance with anti-aliasing disabled (and Contiguous enabled so we get the ones on the inside too). A lower tolerance will grab similar colored pixels in the area, and anti-aliasing with grab bordering pixels regardless of color, neither of which we need.
Attached Image

Moved (Move Tool- V key) and scaled up here from 300% zoom to 700%:
Attached Image

Moving into position on the wing is just a convenience thing, maintaining separate layers means we can move it wherever, whenever. I should also point at that naming layers is kind of like commenting code- it's not really for you right now, it's for you in the future.

Side note: One of the most frustrating things when learning Photoshop is when, for what seems like absolutely no reason, your tools stop working- your paintbrush won't paint, your eraser won't erase, your blur tool won't blur. 99% of the time, that's due to two things, either 1) There's a tiny, almost invisible area selected or 2) The wrong layer is activated. Layers rule everything, all your tools (well... most, Photoshop is complicated) can only act on a single layer at a time. Within a layer, actions only affect pixels within the selection area (if there is one).

At this point, we're looking at a very blocky outline of a scar that doesn't look like it's attached to the airplane underneath at all. We could have blurred or smudged it, but that would have destroyed the pixel-look pretty quickly. The way I've found to keep the best of both worlds is to save the original pixels and blur a copy. But howwww????!! you ask, enthusiastically? One of the many nice things about keeping distinct layers is that you can create a copy of them, to monkey around with while leaving the original pixels pristine. It's just a right click on the layer in the layer window -> Duplicate Layer away. The image as a whole doesn't look any different after the layer is copied in this case because the pixels are 100% opaque- more on that in a minute.
Attached Image

Blurring can be done one of a billion ways, but in this case I just used a one pixel Gaussian Blur (Filters-> Blur):

Attached Image
Attached Image

Attached Image

It looked better, but it's not strong enough to blend the Scar very much... what to do?

If you want a layer to be more transparent, you just turn the opacity down, but what if it's already at 100% opacity (the absolute limit) like this one? You duplicate the layer. Wait, what? It's pretty simple, duplicating the layer stacks those semi-transparent pixels, in effect making them more opaque. If you want, you can merge them to collapse the pixel information into one more opaque layer. Anyway, here's what duplicating that blurred layer (Scar copy) looks like:

Attached Image
Attached Image

I turned the duplicate layer (Scar Copy 2) down to 75% opacity to make it less black. Opacity adjustment is so useful that few layers in a complicated piece are ever at 100% opacity. Now it looks like a legit disaster befell this wing.


Above and Beyond

For a lot of the scars last entry, I stopped at the last step, but for some of the bigger ones I wanted to add more detail... Adding some color makes it look more like the guts of the airplane are actually exposed ala a cutaway drawing. Making another layer (Ctrl+Shift+N) to hold the color pixels allows you to go back later and change the opacity if you overdo it without affecting the rest of the scar.
Attached Image

I used the Pencil tool at partial transparency to add red and a bit of dark yellow-gray to distinguish the inside of the scar from the outside, making it look like this:
Attached Image

This looks pretty good, but kind of strange since that gash looks somewhat self contained, and the blurred Scar copy layers are a little too perfect, like they're airbrushed rather than violently burned in. As always in Photoshop, the solution is to add another layer! This time, it was to simply hold some more manually drawn scaring, this time with the Paint Brush (the difference between Brush and Pencil is that Brush automagically smooths the line as it draws with semi-transparent pixels). Using the Paint Brush with straight black and about 30% transparency, I added some slightly more elaborate charring, making it look more like an explosive impact:
Attached Image

Aww yeah... lookin' good. From looking at real battle damaged airplanes, one thing that struck me was how often the damage took the paint off to reveal shiny metal, so I tried to replicate it by making... you guess it... another layer!:
Attached Image

Messing around with the Brush tool with white was a little too strong, so some selective erasing later got me here, more or less:
Attached Image

Hmm, I dunno. I moved the Shiny layer around:
Attached Image

...completely changing the end result so that instead of looking um, shiny, it makes the scar look deep and concave, like that side is lit up. Not really what I want, though.

My mom taught me an old art trick years ago that looking at your piece in a mirror will make problems that you haven't noticed jump out at you. In the digital age, you can just flip the image, so there's no excuse not too. It often hurts to look at the image, but that's kind of the point- to rip you out of the comfort zone of familiarity you've built up over the course of working on it. So I did that, and fiddled around slightly and came up with my final version, this guy:
Attached Image

Just as an experiment, I took off that original Scar layer to see what that would do:
Attached Image

So obviously, having those jagged pixels still makes a difference (and makes it look more like actual Pixel Art). Here's what all those layers look like without an airplane backing them up:
Attached Image

Finally, it's interesting to see what the layers look like individually. The top layer in this illustration is what would be the real top layer- a color mask (RGB 255,0,255) for transparency purposes, but all the other ones are the exact ones from above:
Attached Image

Here's what the finished scar looks like at actual pixel size:
Attached Image

Pretty neat, huh?


Thanks to jbadams for suggesting I go ahead and do this! Have a jolly December!

Damage Texture Complete!

Posted by , in sprite pack 02 December 2012 - - - - - - · 1,350 views
sprite pack, art, sprites and 2 more...

Promission Acclomplishkept (Mission Accomplished, Promise Kept)

I need to figure out how to do better "publicity" shots with watermarks. Kind of hard to provide pictures, since that's exactly what I'm trying to sell...
Anyway, without further ado... Damage!:

Witness as this:
Attached Image
Attached Image

Turns into this:
Attached Image
Attached Image

And then, for some reason, into this:
Attached Image
Attached Image

I successfully made a damage layer, which combined with masking and judicious use of layers, made it a cakewalk to apply to the J-20. Unfortunately, I don't think my old airplanes have PSD's up to that standard, but fortunately the damage texture will be easy to apply to the layer-less PNG's I already have done. Also, remind me to do a step-by-step sometime since I'm pretty proud of the Photoshop tricks I'm pulling off...

Anyway, I have to go help my girlfriend write a paper about the Battle of Khalkhin Gol, the most important Battle of WWII you've never heard of.


One Fighter at a Time...

Posted by , in sprite pack 27 November 2012 - - - - - - · 834 views
pixel art, sprites, art and 3 more...

I've been... things. Doing them. I've been doing things!

So apparently it's been a couple months since I posted a Journal Entry. A few things have happened since last time... Obama was re-elected, Halo 4 came out, I found out my best friend at work is a former reality TV personality... ummm, and Bandai apparently has access to my deepest desires since they're finally making a Master Grade Tallgeese. Plus I have been very slowly working on the sprite pack.


Sprite Pack

For the sprite pack, I really want to get it done before the end of the year, or at least in January (hey, I'm a hobbyist, I can move deadlines however I feel like).

To that end, I made a tracking spreadsheet for the top-down sprites, which are the most important part of the pack from what I've seen people using in my "Free Airplane Sprite Pack" of yesteryear. What I've been doing lately is doing three things: adding a one-frame per side "tilt" frame, adding "camo" versions of each airplane, and general polishing. I'm kind of regretting deciding to add the animation frame since that requires a significant amount of work, but it's too late not to simply finish that on the remaining sprites. I am going to drop some of the original planes I intended to include since I don't like them that much and I doubt there's really a demand for them. Here's the current list:

Attached Image
[actually, due to unforseen productivity tonight, the J-20 is complete, as you shall see]

Yeah, a spreadsheet. But think of this:
Attached Image

Honestly, cutting everything not started might not be a terrible idea, although the FQ-3 would make a good bad guy since it basically looks like it belongs to Batman, and the Su-49 looks like this.

I'm also toying with the idea of splitting the pack even further and having the top, side, and full rotation animations in a separate pack. It would allow me to release the top ones, to have them done, and let me take my time with the other packs. What do you guys think?


My elephant in the room for my right now getting a damage state for every airplane... and I haven't started. I have a reasonable idea of what it will take and have found some more tools in Photoshop that will make it easier, but still, troubling. My basic plan is to make essentially large texture or two of "damage," like charring and bullet holes that I can then rotate, mirror, clip, and otherwise obfuscate so I can reuse the same ones for each airplane. Should be fairly easy, just making the texture (have it started), and then slapping it on all 20 or so airplanes... but "should be" and "actually what ended up happening" can be vastly different things. We'll see I guess.

For sort-of proof that I actually have been working, here's a J-20 camo version:
Attached Image

Actual size:
Attached Image

My goal now is to get that damage texture stuff working, and show you a damaged version of this guy by the end of the weekend. And play Halo.
So if you don't hear back from my by Sunday night, 'merica time, something terrible has happened...


You guys have a good weekend!

Oops, Crap. Copyright.

Posted by , 27 September 2012 - - - - - - · 3,678 views
ip, legal, copyright
Sorry it's been over a month, but I had to make the choice between writing about working on the sprite pack, or actually working on it. I chose the latter for the most part, and playing Halo: Reach.


FAQ Through the Heart

So there I was, minding my own goddamn business wandering around on the internet at work, checking the gamedev.net forums when I started reading up on legal issues. I kind of like those threads where a new poster comes in and wants to make a sequel to an already extant IP, and they don't want to believe the fact that copyright law is basically a sword of Damocles hanging over their project.

Well in one of those threads (don't remember which one exactly), I clicked my merry way to Tom Sloper's website (one of the moderators here) which has an extensive FAQ about game development, including this entry, which has this gem:

Q:I want to depict a specific car or airplane or handgun, and I don't wanna deal with asking permission. Should be OK, right?

A: Better ask permission, or make your car or airplane or handgun look different from the actual one. A lot of manufacturers have taken to enforcing their IP rights recently, with model kit manufacturers and video game makers. License it or change it.

Ooooohh shit. I remember thinking about that once, probably the last summer when I was working on this sprite pack, but obviously completely forgot about it. I remember quite clearly that Tom Clancy's HAWX had the approval of all the aircraft manufactures since their logos were plastered all over the intro screen (which was actually pretty neat for an airplane nerd for me), so there's a very obvious precedent I can't really ignore. Plus there's the fact that I can't really just ask for permission because each person that tries to release a game containing the sprites will also have to get permission. Having end users other than myself also adds the complication that they might use the sprites for some unsavory game the original IP holders might not appreciate like "Super Orphanage Napalmer 64". So once again: Shit.

Okay, Now What?

Luckily it's not too bad since a significant proportion of my designs are completely original, like my signature "Fighter Jet Montage" here:
Attached Image

Only the F-22, F-35, F-15, Su-37K, and Su-49 (real-life T-50) are actual, but all are fictional variants and altered somewhat to significantly from the real-work counterparts. I think the path forward is to rename them within sprite pack, and change the real-world aircraft more than most of the ones seen above.

The side view sprites are going to be a little more difficult since the long-lost point of that project was to make a game with actual airplanes from every era after Korea.

For example, the following new sprite LOOKS SUSPICIOUSLY LIKE BUT TOTALLY IS NOT an F-16 right now. That's a problem.

Attached Image

By basically moving things a row of pixels down or up, I came up with this:

Attached Image

I think this one is satisfactorily different, and might be even a little overboard (although that might be the airplane pro within me saying that), to avoid copyright issues with any company named vaguely like Blockeed Fartin. Although now I have to do this with every real-world aircraft in my collection... oh well. By the way, you might have noticed that the Not-Fighting Falcons above are significantly more boring that the jets in the full montage. That's because I draw the base art in MS Paint to get the pixely-feel (gray being the easiest color to gradient), and then make color alterations (including camouflage versions) and other random polishing within Photoshop. I'm sure the dudes at pixeljoint would be super pissed if they found out, but whatever. I actually wrote a draft of a detailed explanation of my process, so look forward to that in the next entry.

Let me know what you guys think about how close or how far I should go to the original aircraft, especially since I'm so close to the issue (ie, have these jets ingrained in my subconscious).

Thanks for reading!

-Mark S

Sprite Pack Dillema... Featuring Fighter Jets

Posted by , 19 August 2012 - - - - - - · 4,518 views
sprite, animation, pixel art
Sprite Pack Dillema... Featuring Fighter Jets Well, after two weekends shot sprite-pack wise thanks to a killer cold and a visit from my girlfriend (she currently lives about 3 hours away from where I live), I'm finally taking a solid look at what I need to do in order to get stuff done. I exchanged some PM's with Michael Tanczos- Jesus, like a year ago at this point, but thanks to school and the fact that I have an uncanny knack for retaining employment limited the opportunities for work on it. It's the classic problem of a large personal project getting buried under external life pressures.

Here's the situation:
I have 683(!) files, which sounds great, but that are a combination of:
  • Different genres
    • Space
    • Air
    • Ground
  • Different angles
    • Top-down
    • Sidescrolling
  • Different scales
    • (for example) Space battleships vs space fighters
  • Different qualities
    • I grew considerably as an artist over the 7 years of game art I've been working on, and the quality gap is sometimes stark.
  • Incomplete sets
    • Thanks to the transient nature of our projects and my own inclinations, there's simply a lot of stuff that would be really useful for in-game use that I never bothered to make.

As I figure it, I have two different options: lumping and splitting, i.e. grouping the sprites by genre and releasing separate packs, or lumping the best together and making a “Starter Pack” (which is what Michael Tanczos suggested). I'm kind of torn, but leaning towards the former so I can release them in stages, the aircraft pack is reasonably close to being done, and any beginner pack would still have substantial gaps in the basics. Buuut... what do you guys think as game developing folks?


Photohizaps Breakthrough

Hey... hey guys, check this out:
Attached Image

I finally figured out how to animate things in Photoshop, which is the real breakthrough of the weekend. I thought it would be much harder, but nope, I'd just been putting off for essentially no reason. The relevance to the sprite pack is that I can finally test animations like the one above, which actually never got implemented or even testing in anything (but looks good anyway, no?)

One of the issues with the airplane sprites is that most of the the prettiest, coolest ones never acted as game sprites and lack the accoutrements of real game sprites, like animation or damage levels (unlike the above example):

Attached Image

This concerns me, because those are basically the crown jewels of my artwork. They're the first search result for "fighter jet" at DeviantArt, which would be more impressive if anyone on that site searched for something other than soft-core hentai.

I found sticking on damage levels isn't that hard, since I just made a set of "scars" in a photoshop layer that I can then stick on anything I want without much trouble. That, and the burn tool is pretty self-explanatory... That leaves animation as being the big problem, which is a pain in the ass. Today's task was to figure out how big of a pain it actually would be to add basic "banking" animations to the existing sprites.

First, I went back to an existing animation I had made last summer and added another "tween" frame to the whopping one frame of animation that was already there, but only in one direction:

Attached Image

I used the "fancy" version I had made last summer by throwing on some directional lighting via layer effects in Photoshop, which turned out to be a mistake since there was also an extra "shading layer" that needed to be animated, too. Trying to juggle all the effects depending on the angle is why it only banks in one direction. So that turned out to be more work than I really wanted to do for the whole set, so I tried another airplane that I hadn't animated before and which didn't have all the extra layer stuff, and made only one frame per side:

Attached Image

This turned out to be much easier, and I figured out I could just rip out the center section with the cockpit and move it and it would look more or less okay. The other easy thing is shortening the wings and tail, but both only work for one frame (maybe two). After that, I think the geometry of the fuselage of most of the planes would get too wonky, and would require some in-depth redrawing.

So... I'm still figuring out if I need to get over and do it, or find a workaround. Whaddya think? How important would banking animations be to a prospective developer?


A Funny Thing Happened on XboxLive...

I had a funny exchange this afternoon when some guy which I had exchanged standard insulting messages the night before: My teammates decided to try and spawn trap, which ironically cost us the game (capture the flag) since in trying to set it up, they let other team get the flag too many times. Some guy on the other team took it upon himself to message me and only me "NOOB!" (I guess I had the most kills) which I felt was rather ironic since he actually couldn't shoot his way out of a paper bag, and told him so. We exchange a couple messages, pretty standard, and then no more. So I get on today to play Dance Central, and the idiot decides to send me this:

Guy: [In reference to the half-assed spawn trap] “it's hard to aim when you die every 10 seconds”
Me: “I think you're confusing cause and effect.”

At which point, I unlocked the SICK BURN achievement. Or should've, anyway. Maybe you had to be there. But seriously, the next day? Let it go, man!


Anyway... Let me know what you guys think and have a good night!

Recent Entries

Recent Comments

My Picture

Search My Blog