This tutorial started out with some illustration request and I got a little carried away with the facial expressions I could add to a simple bomb. I thought I might just share the fun and turn it into a tutorial.
Like most of my tutorials this one starts with basic shapes - circles and squares and simple lines. If you are new to the tutorials it might be helpful to read from the beginning. Even though they are not in a special order some of the skills used here have been explained in a more detailed way in earlier posts.
With the basic elements in place it's a matter of working out the expressions you are after... Adding different mouth shapes, squinting or enlarging the eyes.
I hope you enjoyed this as much as I did - and believe me I really missed doing tutorial art and writing these little posts.
As a special treat to make up for the long time between tutorials I uploaded the explosives as PNG-images in 256x256, 128x128, 96x96 and 64x64 pixels to be used freely in your projects.
Here's something close to my heart. Ever since doing the art for HeliAttack 2 and 3 back in 2003 and 2005 I fell in love with helicopters. They just make great game assets.
Back then it was all pixeled and took what seemed like forever to create. In the game there were a few helicopters with limited variations.
Creating a similar object in vectors allows for easier manipulation and variations. It also makes animations a lot easier and more flexible.
This tutorial looks a little bit more complex than the previous posts - but I tried to break it down into easy steps and simple shapes. I hope it worked.
Note: As with all the tutorials prior I use squares and circles and deform them rather then 'hand-draw' the shapes. With the body of the Apache-style helicopter it might be easier to 'just draw' the shape with the straight lines tool rather than place squares and modify them later - but it takes a little more skill to get the shape right that way.
Note: Now you have a basic and recognizable helicopter. It's a good point to save and continue with a new file to give you a base shape to go back to when creating variations.
The next step is adding details (guns, missiles, rocket launchers, etc.) and then add depth to the helicopter by adding some highlights and shadows.
I use basic shapes in light and dark colours - in this case white and black - with transparency to shade the object. This allows for easy changes to the base colour (e.g. an army green or a bright red for an enemy object) without having to redo the shading.
Note: If you want softer shadows and lights use a more yellowish tone for the highlight and a dark brown or dark purple for the shadows.
Here's a version scaled down to something resembling an iphone (lo-res) ingame size:
I hope the complexity of helicopter didn't scare you off and you enjoyed the tutorial. In the end it's just another bunch of simple shapes combined to form something bigger.
As promised another free bit of art to make up for the long time between posts. Enjoy!
In the last post I mentioned that it's fairly easy to modify the basics and create variations once you have the core shape down.
As requested by some here is a modification tutorial bringing the Apache more in line with the helicopter used in the HeliAttack3 screengrab at the top of the last post.
Instead of the usual start with a simple shape I take the helicopter from the last tutorial.
Note: Keep the guns and missiles separated when exporting your art. Add them as separate objects attached the the base shape in your game engine to allow flexible use (e.g. firing and rotation for aiming).
Here are the two helicopters side by side in the scaled down size.
I hope this shed some light on how quickly you can reuse and modify vector elements and create new assets for you game or illustration needs from existing images.
SpriteAttack, dont know if ive said this already but i just wanted say a big "thank you!" all of your tutorials have been super inspirational and educational. Thanks again!
Braydon_SFXMember, Sous Chef, PRO, Bowlboy SidekickPosts: 9,271
I have readed all of this thread and got one question... yeah one more time xD When you created a project, do it on document with background? you delete the background on inkscape to export it to gamesalad? Anyone got interpolate working under macosx inkscape version? a tuto?
This tutorial started out with some illustration request and I got a little carried away with the facial expressions I could add to a simple bomb. I thought I might just share the fun and turn it into a tutorial.
Like most of my tutorials this one starts with basic shapes - circles and squares and simple lines. If you are new to the tutorials it might be helpful to read from the beginning. Even though they are not in a special order some of the skills used here have been explained in a more detailed way in earlier posts.
With the basic elements in place it's a matter of working out the expressions you are after... Adding different mouth shapes, squinting or enlarging the eyes.
I hope you enjoyed this as much as I did - and believe me I really missed doing tutorial art and writing these little posts.
As a special treat to make up for the long time between tutorials I uploaded the explosives as PNG-images in 256x256, 128x128, 96x96 and 64x64 pixels to be used freely in your projects.
Hi @SpriteAttack, you mention above writing a book? Are you going through a publisher or are you self publishing? If you don't mind my asking. I've got a couple books I'd like to write someday and am curious of your experiences so far.
Its impressive that thread, thank you for all of your tutos ^^ I want to ask another thing, how can i move objects from one project to other?, or have to save all from same template? I dont know if i have explained correctly. I want to create things, like plants, and save into one svg. How can i import that objects into other svg? only can with bmp...
I have Inkscape for Macosx. I open a document, select a group of vectors, select edit and then copy. Go to other document opened, edit paste, and then i got bitmap with the vectors..
I have some problems in my inkscape i think... Cant do a simple radial gradient w/o make all transparent and cant copy and paste a simple svg, i have to do import way...
Thank you very much SpriteAttack for all your support. At this time i`m working to have my own alphabet, w/o your support maybe never try it. Now i`m trying to copy a object from one layer to other and got one bmp too!! looking what i`m doing bad :P Thank you very much!!
.... and google its the solution maybe.. " Re: Duplicate to another layer?
druban wrote:better overall to use duplicate and move to another layer with keyboard shortcuts or the menus...
Note that 'Edit > Duplicate' and 'Edit > Copy', 'Edit > Paste' commands differ slightly.
When working with Inkscape on a Mac I would strongly recommend to change the X11/Xquartz preferences because this conflict between Inkscape and Xquartz also affects commands where 'Duplicate' can't be used instead (in the Path Effect editor, for example, or when copy&pasting between different Inkscape documents, or when pasting style or size). "
Comments
My GameSalad Academy Courses! ◦ Check out my quality templates! ◦ Add me on Skype: braydon_sfx
Like most of my tutorials this one starts with basic shapes - circles and squares and simple lines. If you are new to the tutorials it might be helpful to read from the beginning. Even though they are not in a special order some of the skills used here have been explained in a more detailed way in earlier posts.
With the basic elements in place it's a matter of working out the expressions you are after... Adding different mouth shapes, squinting or enlarging the eyes.
I hope you enjoyed this as much as I did - and believe me I really missed doing tutorial art and writing these little posts.
As a special treat to make up for the long time between tutorials I uploaded the explosives as PNG-images in 256x256, 128x128, 96x96 and 64x64 pixels to be used freely in your projects.
Download Emotional Explosives ZIP
http://opengameart.org/sites/all/modules/pubdlcnt/pubdlcnt.php?file=http://opengameart.org/sites/default/files/Emotional_Explosives.zip&nid=12179
My GameSalad Academy Courses! ◦ Check out my quality templates! ◦ Add me on Skype: braydon_sfx
Hmm, sudden hankering to make a game about bombs, now...
Back then it was all pixeled and took what seemed like forever to create. In the game there were a few helicopters with limited variations.
Creating a similar object in vectors allows for easier manipulation and variations. It also makes animations a lot easier and more flexible.
This tutorial looks a little bit more complex than the previous posts - but I tried to break it down into easy steps and simple shapes. I hope it worked.
Note:
As with all the tutorials prior I use squares and circles and deform them rather then 'hand-draw' the shapes. With the body of the Apache-style helicopter it might be easier to 'just draw' the shape with the straight lines tool rather than place squares and modify them later - but it takes a little more skill to get the shape right that way.
Note:
Now you have a basic and recognizable helicopter. It's a good point to save and continue with a new file to give you a base shape to go back to when creating variations.
The next step is adding details (guns, missiles, rocket launchers, etc.) and then add depth to the helicopter by adding some highlights and shadows.
I use basic shapes in light and dark colours - in this case white and black - with transparency to shade the object. This allows for easy changes to the base colour (e.g. an army green or a bright red for an enemy object) without having to redo the shading.
Note:
If you want softer shadows and lights use a more yellowish tone for the highlight and a dark brown or dark purple for the shadows.
Here's a version scaled down to something resembling an iphone (lo-res) ingame size:
I hope the complexity of helicopter didn't scare you off and you enjoyed the tutorial. In the end it's just another bunch of simple shapes combined to form something bigger.
As promised another free bit of art to make up for the long time between posts. Enjoy!
Get the source art (svg file) of this tutorial for FREE:
http://opengameart.org/sites/all/modules/pubdlcnt/pubdlcnt.php?file=http://opengameart.org/sites/default/files/tutorial_helicopter_art.zip&nid=12184
[Download inkscape SVG file in ZIP archive]
thanks
Terrific stuff; top-notch, thanks as well. :-)
""You are in a maze of twisty passages, all alike." - Zork temp domain http://spidergriffin.wix.com/alphaghostapps
As requested by some here is a modification tutorial bringing the Apache more in line with the helicopter used in the HeliAttack3 screengrab at the top of the last post.
Instead of the usual start with a simple shape I take the helicopter from the last tutorial.
Note:
You can download it for free at the bottom of the previous post.
http://2dgameartforprogrammers.blogspot.com.au/2012/09/apache-helicopter.html
Note:
Keep the guns and missiles separated when exporting your art. Add them as separate objects attached the the base shape in your game engine to allow flexible use (e.g. firing and rotation for aiming).
Here are the two helicopters side by side in the scaled down size.
I hope this shed some light on how quickly you can reuse and modify vector elements and create new assets for you game or illustration needs from existing images.
My GameSalad Academy Courses! ◦ Check out my quality templates! ◦ Add me on Skype: braydon_sfx
---
Benjamin
My GameSalad Academy Courses! ◦ Check out my quality templates! ◦ Add me on Skype: braydon_sfx
When you created a project, do it on document with background? you delete the background on inkscape to export it to gamesalad?
Anyone got interpolate working under macosx inkscape version? a tuto?
Jamie
http://jamie-cross.net/posts/ ✮ Udemy: Introduction to Mobile Games Development ✮ Learn Mobile Game Development in One Day Using Gamesalad ✮ My Patreon Page
I want to ask another thing, how can i move objects from one project to other?, or have to save all from same template?
I dont know if i have explained correctly.
I want to create things, like plants, and save into one svg.
How can i import that objects into other svg? only can with bmp...
@mrpacogp - simplest thing is always copy and paste from one inkscape document to the next...
If i do c&p then i got a bitmap image.. or you say to copy and paste another way?
I open a document, select a group of vectors, select edit and then copy.
Go to other document opened, edit paste, and then i got bitmap with the vectors..
Cant do a simple radial gradient w/o make all transparent and cant copy and paste a simple svg, i have to do import way...
At this time i`m working to have my own alphabet, w/o your support maybe never try it.
Now i`m trying to copy a object from one layer to other and got one bmp too!! looking what i`m doing bad :P
Thank you very much!!
....
and google its the solution maybe..
"
Re: Duplicate to another layer?
druban wrote:better overall to use duplicate and move to another layer with keyboard shortcuts or the menus...
Note that 'Edit > Duplicate' and 'Edit > Copy', 'Edit > Paste' commands differ slightly.
When working with Inkscape on a Mac I would strongly recommend to change the X11/Xquartz preferences because this conflict between Inkscape and Xquartz also affects commands where 'Duplicate' can't be used instead (in the Path Effect editor, for example, or when copy&pasting between different Inkscape documents, or when pasting style or size).
"
And for another people using Inkscape under macosx, its recommended to install "command Line Tools" under preferences on Xcode to get Interpolate working before try it to do it with term....
http://i398.photobucket.com/albums/pp67/pacogp/XQuartz-clipboard-preferences.png