Game Art Tutorials / UI Design

Share your Inkscape tricks and tutorials here.
User avatar
Deee
Posts: 4
Joined: Wed Jun 19, 2013 6:30 am

Game Art Tutorials / UI Design

Postby Deee » Wed Jun 19, 2013 7:08 am

Hi everyone,

I have started a blog about game design, art and animation some weeks ago (http://2dee-art.blogspot.com).
There are already 20 fully animated game characters (zombies) whose body parts were created in Inkscape.

A small preview:
Image
The characters can be found here:
http://re-animated-zombies.blogspot.com

And I just published two inkscape tutorials on user interface design.

This is a preview of the first basic tutorial - a simple glass button:
Image
The full tutorial can be found here : http://2dee-art.blogspot.com/2013/06/game-ui-design-glossy-button-inkscape-tutorial.html

The second tutorial describes how you can easily create a mana/health orb.
This is what the finished orb looks like :
Image
The full tutorial can be found here : http://2dee-art.blogspot.com/2013/06/game-ui-design-mana-orb-inkscape-tutorial.html

I appreciate any kind of feedback on my art and on the tutorials (quality, art style, clarity,...)

Regards,
Dee

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Game Art Tutorials / UI Design

Postby Lazur » Thu Jun 20, 2013 9:34 am

Welcome aboard!

Could you give us some info on character implementation?
Should the sprites be rasters, or is it possible to animate the vectors in game?
How do you "rig bones" in pants nicely?
Where did you start three years ago, what would you suggest for others looking into game designing?

User avatar
druban
Posts: 1917
Joined: Fri Nov 20, 2009 10:48 pm

Re: Game Art Tutorials / UI Design

Postby druban » Thu Jun 20, 2013 6:38 pm

The zombies are just wonderful = I found myself just zoned out and watching the animation run through over and over!! The tutorials are very easy to follow and the mana orb makes great use of the filter. Just a suggestion - you designed the web page very nicely so that if you click on the tutorial it opens in a little mini slideshow - why not tell people to 'click on the tutorial' or 'click here'? I only found it by accident.
Make a short movie with your zombies, put them on Youtube, and watch them go viral... :D
Your mind is what you think it is.

User avatar
Deee
Posts: 4
Joined: Wed Jun 19, 2013 6:30 am

Re: Game Art Tutorials / UI Design

Postby Deee » Fri Jun 21, 2013 8:04 am

Thanks for the positive feedback.

@Lazur:

There are some attempts of using vector graphics in games, but usually everything is raster graphics, simply for the better performance that can be achieved.
Some games (like angry birds) look like they are using vector graphics, but it's all about large sprites being scaled down cleverly.
If you are interested in this topic, take a look at Spriter and Spine (both successful kickstarters). These are skeletal animation tools that will also provide runtime plugins which allows for procedural animation and stuff.

For the "bone rigging" I use round shapes to avoid having corners stand out at certain ankles.
Another important part is avoiding color gradients at the joints.

Three years ago, I started taking a closer look at game design and game art (I have always been excited about games, art and programming languages) after I made my degree in something completely different - applied forest sciences.
I had an idea for a game and started working on it. The game isn't done yet but I learned a lot of things and have a decent stock of templates now.

My suggestions for others looking into game designing without having a degree would be:
- don't expect others (game companies) to buy your ideas!
- if you have a great idea, start making your game. Nobody will do that for you, so start working on it now! There are some great engines doing a lot of the hard work for you, so you can concentrate on the things that are actually fun.
- show your work to others (my biggest mistake - i worked secretly), listen to feedback!
- do something you are passionate about. If you do not like pet battle games like pokemon, do not try to make such a game just because you think it will make you rich.
Motivation is the most important thing in game design, so concentrate on stuff you like.
- keep it simple, avoid feature creep. Do not make your first game something too complex (I did).

@druban:

Thanks very much. Creating the zombies is really fun. I can't wait to see them in a game.
Probably I have to take care of that myself ;)

Thank you for the the suggestion to tell visitors of the blog to click on the tutorial. I fixed that in the meantime.

Making a short movie with the zombies is a great idea - to be exact, it is a no-brainer :D
What software would you suggest for that?
Maybe I could do that in adventure game studio (the engine I am working with - it's free and very powerful).
But I think it's hard to develop a story for a short movie starring aggressive brainless brain eaters ;)
If somebody has an idea - let me know.

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Game Art Tutorials / UI Design

Postby Lazur » Sun Jun 23, 2013 11:34 am

Thank's for the answers, great suggestions!
I have some much simpler ideas than game designing but can't get along with them yet.
Good to hear you could become a professional in the field where your passion is at.

4hn
Posts: 18
Joined: Fri Jan 18, 2013 12:00 am
Location: Poland

Re: Game Art Tutorials / UI Design

Postby 4hn » Sun Jun 23, 2013 8:37 pm

Deee wrote:Making a short movie with the zombies is a great idea - to be exact, it is a no-brainer :D
What software would you suggest for that?
Maybe I could do that in adventure game studio (the engine I am working with - it's free and very powerful).


I saw this program called Tupi lately. I'm not sure what it's capable of though.

BetaTestingPro
Posts: 38
Joined: Mon Aug 15, 2011 3:27 am

Re: Game Art Tutorials / UI Design

Postby BetaTestingPro » Sat Jun 29, 2013 10:25 pm

Hi Deee,

Nice tutorials and Awesome Zombies! While I'm fairly proficient in Inkscape myself these days, I felt the need to check your site out and do your tutorials. I'm glad I did as I always seem to overlook the Awesomeness of the Built-in Filters. You also gave some great tips and advice on how to spice things up and to play around testing the various filters and filter settings. So after taking your tutorials, here's my results:

First the Square Icon:

Image

And now the Mana Orbs:

Image

While making these I went ahead and made layers and sub-layers making it extremely easy to modify the colors for later use. Plus, that way I could hide the Liquid filter layer as it slows my laptop down significantly. For those of you that would like a copy, you can get it from OpenClipArt.org here:

http://openclipart.org/detail/179860/manaenergy--health-orbs-by-mrsmiles-179860

And here is a multi-layered template for the Square icons as well:
http://openclipart.org/detail/179864/simple-square-icons-by-mrsmiles-179864

There are actually 2 square icons in the SVG version. You can take a look at the layers to see what I've done differently on each. I hope you all enjoy them. :)

User avatar
Deee
Posts: 4
Joined: Wed Jun 19, 2013 6:30 am

Re: Game Art Tutorials / UI Design

Postby Deee » Mon Mar 31, 2014 3:41 am

Hey there...

If you are interested in an extended usage of the interface elements of my tutorials, check out my Kickstarter video, where you can see an entire game interface consisting only of Mana Orbs and Buttons (some of them are actually panels, but made with the same techniques):
https://www.kickstarter.com/projects/2dee/indee-toons-animated-game-characters

Image


Return to “Tricks & Tutorials”