dmarges - Tumblr blog

[dmarges]

Game Art Tips! Raster vs. Vector vs. Pixel Art - The Pros and Cons

In one of my previous Game Art Tips installments, I mentioned that I would go over the differences between raster art and vector art. While I’m at it, I thought I’d add pixel art to the mix, and do a little breakdown of the advantages and disadvantages of each style based on my own experience with each of them. 

So what’s the distinction between the three? Well, it has to do with how the images are stored by a computer. This affects their look, as well as the methods by which they’re created.

Raster art is stored as a series of color values in a grid - in other words, as a collection of pixels. So if you draw a circle in a raster format, it will be stored as each individual pixel that makes up the circle’s shape*.

* This is actually much more complicated once you start getting into compressed image formats, but that’s not really relevant to your average digital artist, so we won’t get into that stuff.

JPG, PNG, GIF, and BMP are some of the more common raster image formats. You can create raster art in apps like Photoshop, GIMP, and Microsoft Paint.

Pixel art is just a subset of raster art, in which very small images are created using very few pixels. Most people know pixel art from old video games, which had to make use of these tiny images due to the very limited capabilities of old computers.

Vector art, on the other hand, is stored as a series of lines and shapes. If you draw a circle in a vector format, the file doesn’t keep track of every pixel required to form the shape of the circle - it just knows (essentially) where the circle’s center is, how big its radius is, and what color it is. The app that reads the vector image - whether it’s an art program, a web browser, or something else - takes the information about that circle and renders it into pixels on the fly.

Common vector image formats include SVG, EPS, and (sometimes) PDF. You can create vector art using apps like Illustrator, Flash, or Inkscape.

So that’s the basic difference between them on a technical level. But how does this play out when you’re actually using them?

Raster Art

Deepworld uses raster art, which was necessary to create the hand-drawn style of the game. Even though our art is all made of pixels, we keep it at a high enough resolution that you shouldn’t really notice this.

Given the steampunk theme of the game, we wanted to make the art look old-fashioned, like it was drawn with pen and ink or a woodcut. The idea was to make the player forget that the images are actually generated and displayed by a computer.

The Pros

Hi-res raster art gives you a lot of freedom. You can pretty much draw whatever you want, and you’re not limited to hand-drawn styles. You could make your assets look like paintings, or crayon drawings, or anything you want. 

Drawing raster art is very natural. It uses the same techniques as pencil or pen-and-ink drawings, which most artists are already deeply familiar with. 

Raster art can actually be drawn by hand, and then scanned. Some of Deepworld’s early art was made this way, while I was still getting comfortable with drawing on a tablet.

The Cons

Hi-res raster files take up a lot of space. This is rarely an issue on the production side nowadays, given how large most hard drives are. However, on the user side, this can be a big problem. In a mobile game or a browser game, all those images need to fit in a very small amount of texture memory, and it’s easy to run out.

Raster art doesn’t require you to keep your style simple, which means you’ll often screw up and make things too complex and detailed. A lot of Deepworld’s art had to be re-drawn once it was shrunk down to game size and it became an indistinct mess of crosshatched lines.

Raster art can’t be scaled upward beyond its original resolution. Want to upgrade your game for retina displays? Hopefully you drew the originals at very high resolution. If not, you’ll either have to scale them up to double size - creating a blurry eyesore - or hunker down and re-draw everything.

Vector Art

Before Deepworld I worked on a few other unfinished games using vector art, mostly drawn in Flash or Illustrator. These images were much more cartoony and simple, which made them a good match for the vector format. I also liked not having to worry about scaling up the art, in case we ever needed to (and we would have, once retina displays were introduced).

The Pros

Vector art makes it easy to achieve a clean, crisp look that would take much more effort by hand. It works great for cartoony assets, and it encourages you to think in terms of simple designs.

Your files will usually be very small when working in vectors, which means you don’t have to worry about hard disk space or quickly transferring them to your coworkers.

Vector art can scale infinitely. Want to blow up your game art for high-quality poster prints? A billboard? No sweat.

The Cons

Vector art doesn’t work well for small details. If you tried something like cross-hatching in a vector drawing, your files could actually end up much larger than a comparable  raster file.

You also give up some control with vector art. Since everything is stored via points, lines and curves, it can be hard to replicate jagged and chaotic real-world elements, like hair or water. The vectors will smooth out your crazy lines in ways you might not expect and find hard to fix.

While vector art files are very small, you almost always have to export them to raster format in order to display them in a game, so they don’t offer any real savings in terms of texture memory.

In addition, vector art has a pretty high learning curve. I know Photoshop backwards and forwards but I still get lost in Illustrator quite a bit. The whole process is very different from drawing freehand and can take a lot of getting used to.

Pixel Art

Like I said, this is technically raster art, but it merits its own discussion. Since the images are so tiny - and so clearly digital - pixel art presents its own set of challenges and benefits.

I haven’t honestly done much work in pixel art; I’ve created a few sample game elements and sketches largely for fun. But it’s likely that Bytebin will be using pixel graphics in some of our upcoming games, so I’m trying to learn more about the style and start getting a feel for it. So far, it’s quite fun.

The Pros

Pixel art pretty much forces you to strip your characters and environments right down to their most basic, iconic forms. This kind of limitation can be great for your creativity, turning every asset into an engaging problem to solve. I think this fact - as much as pure nostalgia - is a big part of why pixel art has seen such a resurgence in recent years.

Pixel art, when done well, is easy to parse. This works great for games, which ask players to interpret moving images very quickly and often punish them for failing to do so.

Pixel art takes up very little space. This is great for games on mobile devices, since their limited memory has basically recreated the computing limitations that led pixel art to be created in the first place.

The Cons

Sometimes pixel art can be more limiting than you’d like. Creating a facial expression on a character that’s only 32x32 pixels or smaller is extremely difficult, or even impossible, and as an artist you can spend much, much more time trying to get things right than you would using the other techniques.

Pixel art often looks weird when it’s mixed with more modern game touches, like the on-the-fly animation we’re doing with Spine, or things like smooth gradients and particle effects. You’ll have to be careful to lock down the style of your game to match the retro look. I’ve played many games that did not do this, and I found it really distracting.

And frankly, the indie game ecosystem is just overflowing with pixel art these days. It’s gone from a retro throwback to a pretty mundane style. Given its limitations, it can be hard to make your game really stand out when you’re using pixel art.

So those are my thoughts. If you’re developing your own games or just doing art for the fun of it, it’s good to try out all of these options to see how they work for you. Every artist and project is different, after all.

[dmarges]

[dmarges]

This is so awesome!

process gif :)

[dmarges]

»galgenkindes wiegenlied« by christian morgenstern (1905)

gallows child’s lullaby

sleep, baby, sleep, there’s in the sky a sheep; the sheep is made of cloud and dew and fights life’s battle just like you. sleep, baby, sleep.

sleep, baby, sleep, the sun eats up the sheep, he laps it from the azure ground with tongue extended like a hound. sleep, baby, sleep.

sleep, baby, sleep. now it is gone, the sheep. the moon appears and starts to chide her mate who runs, the sheep inside. sleep, baby, sleep.

[dmarges]

Privilege

So I have released my first public game...I'm kind of scared actually. You can find it here: https://hyperion440.itch.io/privilege

[dmarges]

From a Swedish Nintendo advertising brochure.

[dmarges]

Sound advice!

Hi there, at the moment I'm developing games in MonoGame, and I know your engine it's made and you program in C++, my question is, in performance, does C++ have much better performance than MonoGame? Cheers

Yes, but you have to know how to program in C++ properly. If your MonoGame engine is running slow, an upgrade to C++ isn’t going to fix you unless you’re making heavy physics simulations, intense graphics scenes, or anything that requires tons of CPU time.

[dmarges]

Punch Club by Lazy Bear Games

Punch Club’s world will warm the hearts of anyone with a soft spot for late 20th century. From the 70s movie Rocky, through 80s Teenage Mutant Ninja Turtles, to 90s Pulp Fiction and Fight Club, Lazy Bear Games pays homage to so many pop culture references that the game initially held the title VHS Story. After 2 years of alpha iterations, the 90s-like business simulation got released at the start of this year, with the Dark Fist expansion coming up soon after in March. 

Punch Club plays like a tycoon/adventure game where you train your character in one of the three fighting styles, learning how to punch, kick, block and dodge your way through dozens of opponents. The storyline has a few branches that take you through wonderfully illustrated locations and serve you just as many clichés in the process.

I’ll write a special feature covering the development of the game, since the progression it took from early concepts to the finished product is very interesting in its own. Right now the team is working on the 3DS version of the game, while you can already play it on PC (Win/Mac/Linux) and mobile (iOS/Android). All the links are available from the publisher’s website.

[dmarges]

USA 1995

[dmarges]

I used to think this was a really nice and inspirational quote.

Then I found out he yelled this in the middle of a fit of rage while playing Sonic ‘06 in response to a nearly game breaking glitch.

And that his next words were “NOT. F*CKING. THIS!”

[dmarges]

Why Modern First Person Shooters suck!!!

I recently played my way through an admittedly older game (2013) but it was based around a franchise near to my heart. The game was Aliens: Colonial Marines.

I should be clear that the only reason why I got it was because it was based on the Aliens franchise which I love.

The game at first glance isn’t bad. If you’ve played any Call of Duty game in the last few years then you already know how it plays. You’re a soldier who can aim down the scope of his gun, pilots vehicles/gun placements, etc.

If that’s the only thing you use to judge this game, is whether or not it crosses all of the features a modern FPS should have then this would be a perfect game…

But it is not…

It is far from perfect and I’ll tell you why. It may seem like nitpicking but bear with me.

The game has a couple of really memorable, haunting scenes that are absolutely beautiful. An example is where you and your squad are rallying at Hadley’s Hope, you walk down this path to have the smouldering ruins in the background with the Hadley’s Hope sign peaking through the rubble. It is so scenic that I would love to have it painted and hung in my office or an Art museum.

However, there are similar scenes which are absolutely fucking ruined by the fact that the game works with a checkpoint system. So the one scene where you are frantically trying to fend off the Xenomorphs while getting a ship prepped for launch turns from tense action to tortured drudgery after playing through the same scene a dozen times or so.

The concept of the player dying is stupid in these sorts of games. Why is the player dying completely!?! The game isn’t moving on without them! The game only exists if the player is still alive. So instead of seeing the same unskippable death scene why not just incapacitate the player a day punish them some other way? In this case, don’t kill me and make me have to play the same damned part over and over. Have an NPC come over and save me but have one of my weapons lost in the fight.

The NPCs in modern FPSes bother me too and this game was no exception. Your NPC comrade in this game is an extra from Gears of War named O'Neal. He is absolutely fucking invincible!!! I’ve seen him take attacks from 4 xenos and still keep fighting!!! Plus he has infinite ammo and armor, which I was scavenging from people throughout the game like some homeless fucking moron. If the NPC is that powerful then why do you need me? Why not have several NPCS that follow you throughout the game? They can have specialties and if you lose them then they are hard or impossible to replace. A system similar to XCOM. That seems reasonable in a setting like this where death is an inevitable outcome.

Overall, Game Designers have taken a Game Design and a genre and have wrapped a story and setting around it. This is the exact opposite approach! I think an FPS is fitting as a game set in the Alien universe. However, the game should be built around the setting! In the case of this game, why am I picking up armor if even in the same game it is demonstrably useless against the Aliens!?! This game was a case if having an FPS game engine and the Aliens license and they slapped the two together but they stopped short of smoothing out the aforementioned inconsistencies.

I recently picked up Alien Isolation so I am hoping that it is better than Aliens: Colonial Marines.

[dmarges]

Great use of a limitation to enhance gameplay.

Silent Hill - Fog World

[dmarges]

Lifeless Planet Review

I know this is an older one but I recently played through the game Lifeless Planet. If you haven’t heard of it, the game is a third-person adventure game where you play an Astronaut who is sent to colonize a habitable planet.

I won’t spoil any of the plot points of the story but the story of the game is really solid. It’s very well told and I was hooked from the beginning. 

I’ve seen reviews that say there is too much walking stretches of the game where there was nothing to do. You were just sort of walking. I felt that this is unfounded. The periods where you are just walking helped to set the feel of the game and it really made me feel that I was alone on this planet.

The only problem with the game is the controls. They were good for the most part but I had issues with the jumping. I don’t really think this is the fault of the developer since this is an issue I see with most Unity games.

I can’t recommend this game enough. It is an excellent game with a well told story and is a shining example of what an Indie game can be.

http://www.lifelessplanet.com/

http://store.steampowered.com/app/261530/

[dmarges]

zlib is missing necessary for building libxml2 ubuntu

Hey! I've been working on some Rails stuff on a fresh Ubuntu install and came across this issue when trying to install Rails. I get the message "zlib is missing necessary for building libxml2". Here's how to fix it: In the terminal run the following command: "sudo apt-get install zlib1g-dev" After that it installed properly and I was able to continue on my merry way!

[dmarges]

Sensor Tower Review

I've been working on a Mobile App that I am hoping to release to the App stores shortly. One of the things I really wanted to get right from the beginning was Marketing. By training, I am a developer but I have picked up some Marketing skills along the way. One of the biggest mistakes people make with Mobile Apps, or any product for that matter, is not thinking about marketing from the beginning. One of the most important things you can do for your Mobile App is to perform App Store Optimization. Like Search Engine Optimization (SEO), App Store Optimization (ASO) relies a lot on picking the right keywords to rank for. Unlike SEO where you have access to a lot of public data, the App Stores are really secretive and don't release any data on search volume or similar data. There are formulas you can use to estimate search and download volume. Fortunately, there are some folks who have done all of the work for you. I researched some different ASO tools and the one I will review in this post is one called Sensor Tower. My purpose for using Sensor Tower was twofold, the first was to see if there was enough searches to make developing my app worth the cost. The second was to see which low competition, high traffic keywords I could rank for. A nice side-effect was that I could see other relevant keywords that I didn't think of. The first thing I will note about Sensor Tower is that I thought the User Interface was really clean and well organized. I didn't really get stuck anywhere nor did I have to look up any tutorials or videos. I was able to jump right in and start using it. One thing I liked, which is a nitpick, was that when you click on an App that appears in the list of Apps that are ranking for a keyword, it opens in a new window. This is nice since I found that I had six or seven on the go and didn't have to click the back button all of the time. Because this is pre-launch for my app, the most useful tools for me were the Keyword Research, Keyword Rankings, and Keyword Suggestion tools. My strategy was to think of as many keywords as possible, and add them to the Keyword Rankings screen. Then I would drill a bit deeper and look at the Keyword Research tool to see what other related keywords existed. Last, I would follow that up with the Keyword Spy tool which looks at what keywords your competitors are using and what they are ranking for. My one caveat with Sensor Tower was related to their Android rankings for keywords. The competition for any keyword was very high. I might have missed it, but I was unclear as to what their sources were, meaning do they just use Google Play or do they also include the Amazon App Store and the others that exist for Android? My one critique didn't make the tool any less useful and I still gained a lot of insight using Sensor Tower for the ASO process. The biggest thing I learned is that, aside from keywords being huge in your marketing success, there are lots of low-competition and high-traffic keywords that I can rank for. The process overall gave me a deeper appreciation for marketing and promotion.

[dmarges]

Unable to run new Titanium app on iPhone simulator

I came up against this issue recently. The only thing I had to do was update Titanium to the newest version and it worked like a charm!

[dmarges]

How PHP 7 Can Help You Write Better Tests

I came across an excellent resource for using Scalar type hints to write better Unit Tests in PHP. Well, PHP 7 to be exact. I won't steal any of the author's thunder so I linked to it below: How PHP 7 Can Help Your Write Better Unit Tests