Uncategorized

Learning the art of pixel… art?

I mean, screw all the programming, algorithms and mathematics, creating graphic assets can be really hard!

all-cars

After parting ways with my graphic designer, I faced a dilemma:

To pay for graphic assets or make them by myself?

I could have hired a graphic designer, that would require some time to search for a good professional and some good money… On the other hand that would make me free to do other things like programming.

Another option was to buy ready images from asset merchants. The prices are usually lower, but it would take some time to search for matching images.

The last option (besides giving up the whole thing altogether, also suicide was considered since it’s always an option) was to draw all the images by myself. It would take a lot of learning and time… But drawing would be a useful skill to learn if I wanted to be a pro game creator.
Also, hell, I’m already making this crappy game for 3 years, not like I’m gonna finish the game very soon…

So I decided to learn how to draw. I watched some tutorials on pixel art, because I like that style. Reminds me of all the games I played on Amiga or NES 🙂 Happy times…

The typical question appeared in my head:

But what software should I use??

I started off with GIMP, because it’s Open Source, and I like the idea of Open Source. Very much.

gimp
I made this logo after atching GIMP and pixel art tutorials.

Quickly I created a temporary logo for Extreme Commuting!, shown on the screen above, and I was happy with the result.

Then I painstakingly drew the background for the car selection screen in my game:

Garage
On the left you can see squares of different colors, I used it as a makeshift palette picker:D

GIMP is an “image manipulation” software, not a “pixel art” software and it lacks some features targeted at pixel art, for example: usable palette picker, out-of-the-box single pixel brush (there is one but it requires dynamics configuration) and symmetrical drawing (you know, you draw on one side of a picture and pixels show up on the other side) [it’s been added in 2.10 release].

So I did a little google research on pixel art software and people usually talked kindly about Piskel.

Piskel is a web application for pixel artists. It’s also Open Source, that’s for extra points. It offers all the basic tools that let you draw your pixel sprites easily.
And when I say “basic” I mean really basic. The app is pretty crude and underdeveloped.
It doesn’t have bugs and it’s pretty solid (I never lost any work because of the app’s error) but it doesn’t feel like a finished app (0.15 is the latest version).

piskel

I created a more advanced version of the logo car in Piskel that will become the last car the player unlocks in my game. Because of Piskel’s ‘version history’ feature you can now see the stages of the development the image went through:

 

I also created the ‘hi-res’ version of the car, for the car selection screen in the game:

 

Then I created a top-up view sprite and hi-res version of the base car for Extreme Commuting!

 

All was nice and good until one day I went shopping…

As a compulsive buyer, I couldn’t help myself when I saw a brand new graphic tablet on a supermarket shelf. I heard a lot of good about drawing using a graphic tablet and I thought if I train my hand I’ll get better in drawing.

How salty I was when I found that Piskel does not support graphic tablets…

It’s true! Even though it’s a web app, it completely freaks out when you try to use a graphic tablet.
Look at this issue: https://github.com/piskelapp/piskel/issues/722

With deep regret I returned to GIMP and maaaan… Configuring GIMP to work with graphic tablet was a drag… Soon I’ll create a post on configuring GIMP, it’s not that hard when you know what you’re doing.

Using GIMP and graphic tablet I created the second car the player will be able to unlock:

 

In my opinion, it looks best of all the images so far. And this is a problem, typically the best looking and the strongest car/gun/sword/item is the one you unlock last. So that the user has this nice and encouraging sense of progression and a goal.

If you look at the yellow car that I made first, the blue car (second) and the red car (the last chronologically) you can see a progress in my skill.
The last car has a lot more detail than the yellow one.

Also I decided to add more colors to my palette when working on the blue and the red car, the lack of intermediate colors is visible in the yellow one.

Can you see the black lining around the yellow car?

contour
See?

While making my second car I decided that it will look better if I make the contour with a darker version of neighbor pixel instead of solid black. That makes the contour a lot smoother, especially when placed on top of some background. The black contour adds a  cartoony vibe, which itself isn’t bad, but I didn’t want it in my game.
So I updated the image to reflect that approach change:

Yellow Car In Selection Screen
I think it looks better now.

Drawing those bloody images took me 2 weeks per image…

…but just 2 hours 3-4 days a week on average. I really have not a lot of free time now:(
It was hard and challenging, but also at the end of the day, very rewarding:)
Drawing with a graphic tablet was very cool, you get the priceless Borat feeling:

borat-has-a-tablet

Conclusion

My next step is to create assets for other screens, mainly the gameplay (road) screen (or “room” as Gamemaker refers to it).
It contains a lot of backgrounds (trees, grasslands) and small random objects (houses) and it should not be very hard to draw, since all of those sprites are of smaller resolution than the big-ass cars above…

I think if you consider my lack of artistic talent and experience, the graphics I created are quite ok:) And that proves that with some dedication…

Everyone can draw graphics for their own games, so go and make games!

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s