Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
August 1, 2014
arrowPress Releases
August 1, 2014
PR Newswire
View All
View All     Submit Event





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
2D Game Art For Programmers - Part 2
by Chris Hildenbrand on 10/19/11 02:02:00 pm   Expert Blogs   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

After the initial playing around with circles and squares, learning a little bit about the   fills and combining objects [part 1] , I would like to move on to a basic scene.

Having more fun with gradients:

Let's take the gradient fill to the next level and work with colour and alpha to create a simple underwater background.

 


Hint:
Use the 'Page Up' and 'Page Down' key to adjust the order of objects [e.g. place the sea anemones in the mid ground behind the light rays.] 

 

I would like to add more life to the underwater scene and create some fish. The basic principle when adding 'real' elements to a vector scene is to look at the shapes and 'deconstruct' them into basic elements like the circle, square, rectangle or ellipse.

 

I usually do a quick google image search for a reference image to get a better idea what I am going to create. In this case the 'yellow reef fish' search came up with a nice yellow longnose butterfly fish.

It works great as the main body is kind of squarish and the front has a triangular shape.

 

The same approach works the same with far more complex elements. It's a matter of seeing the 'building blocks'.

 

Staying in shape... the Clip Tool...

In line with the water theme let's go ashore and look at a sunset on the beach to introduce some more helpful tools and techniques.

This is our basic 'pop style' sunset with some modified circles and gradient alpha fills added to represent some rocks in the water.

One of the 'wonderful' things about working with vectors ist the scalability. Objects can be scaled up and down without loss, allowing for easy editing and adjusting of the illustration.

In this case the scale of the palm trees will define the viewer's perception of distance. Smaller palm trees will put the island further in to the distance while large trees will 'bring' it up close.

 

Btw. the clouds are the same shape as the island just squashed and coloured in a colour matching the sky gradient. Try reusing shapes even just slightly modified, recoloured, squashed, rotated or flipped to speed things up, add variation and make your scene more interesting.

Note:
A lot of the objects I am covering in my tutorials (like the palm trees above) working from predefined shapes (circle, square, star, etc.) is only one option. The freehand or straight line tool will create identical shapes but require a little more artistic skill. 

 

For our detailed palm we need two 'more advanced' features of inkscape: Interpolation and Path Effects.

Varying the fronds, adding to the interpolation and checking some reference images can improve the look of the palms even further.

If you have similar screens to design for your game it makes sense to spend some time on the initial elements and then 'recycle' objects. This way you safe time and create a more consistent look and feel.

 

 

I quickly did a step-by-step to show the creation of the stamp border used in the illustration above:

Note:
The reason for ungrouping and combining the circles first lies in the restriction in Inkscape to only do a Union, Difference, Intersection, Exclusion or Division between two objects.
Tools like CorelDraw can do these with a group or even just several selected objects. Try around around a little see how your vector application handles these very handy commands.

 

I hope even these slightly more advanced features don't pose too much of a problem. Enjoy and stay tuned for more!




Related Jobs

Vicarious Visions / Activision
Vicarious Visions / Activision — Albany, New York, United States
[08.01.14]

Environment Artist-Vicarious Visions
Petroglyph Games
Petroglyph Games — Las Vegas, Nevada, United States
[07.31.14]

Unity Engineer
GREE International
GREE International — San Francisco, California, United States
[07.31.14]

Senior Software Engineer, Unity
GREE International
GREE International — San Francisco, California, United States
[07.31.14]

Engineering Manage - Game Server






Comments


Fernando Fernandes
profile image
Wonderful! Will follow this tuto as I did with part 1! Good job!

William Ravaine
profile image
Thank you for this great, timely article ;)

Dan MacDonald
profile image
I like how many programmers are able to go though these tutorials and produce good results, very cool stuff.

Chris Hildenbrand
profile image
Thanks for the feedback guys... I am still working on the next 'images' for this tutorial... and have one or two things I would like to add to part 1... [creative chaos at work]...

Benjamin Fremiot
profile image
One again: awesome tutorial! I even managed to reproduce the water scene o/

Keep up this good work ;)

Laura Bularca
profile image
Great as always and shared to everyone I know! Once again, thank you!

Will Buck
profile image
You're a boss Chris; I join everyone here in sincerely thanking you! This gets me over a big hurdle in my process of psyching up to start a project, always the fear of poor art stopped me from even starting.

John Brown
profile image
Great art tutorial! Any chance you can do more characters (like in part 1) but also from the side? I've more trouble doing those.

Mike Motschy
profile image
Awesome tutorial. Any chance of making a tutorial about creating bodies? I can do an alright head. but I am really bad when it comes to creating a body (especially animating them)

Chris Hildenbrand
profile image
@John Brown - I am currently trying out some character designs to use for the basic animation tutorial...

I hope to 'find' the right character on the weekend and then dive into the tutorials:



http://2dgameartforprogrammers.blogspot.com/

Chris Hildenbrand
profile image
Quick addition to this one... I had some fun with gimp as well [which might make it into a tutorial of it's own].

Carl Perfect
profile image
Awesome tutorial Chris !



Thanks for all your work,

Carl

Chris Hildenbrand
profile image
My spriteattack.com server was/ is down. I am changing the images over to Picasa at the moment.

Matt Spaulding
profile image
You should add a link to part 3.

I have all parts of these tutorials bookmarked, but it would be nice for others.


none
 
Comment: