GameSalad

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Spriteattack's Art tutorials

13468913

Comments

  • I love your tutorials,
    chris, I want a baby of you :))
  • svnsvn Posts: 445Member
    Lately, objects have been attaching to the quadrant points of other vectors. I do not want this happening, and it has become rather annoying as of late. Does anyone know the cause of this?
  • SpriteAttackSpriteAttack Posts: 524Member
    @svn - under 'View/ Snap' or with '%' you can turn snapping on and off... It sounds like that might be the cause.
  • SkyMapleSkyMaple Posts: 817Member
    Wow, you've got some great tutorials here! Being a student and a programer doesn't leave much time for making artwork, and these tutorials are/will help(ing) me alot. Thanks for sharing!

    (P.S. I bookmarked your blog) ;)
  • svnsvn Posts: 445Member
    Thank you, SpriteAttack!
    In other news, when is your next tutorial coming?
  • Braydon_SFXBraydon_SFX Posts: 9,012Member, Sous Chef, PRO, Bowlboy Sidekick GameSalad Employee
    None of us can wait :D
  • SpriteAttackSpriteAttack Posts: 524Member
    I decided to alter the approach and use a slightly more complex character with all the parts that make up a human [rather than join legs and arms into one object the way I set up the character in part 3].

    I should state that this is just one way of doing animations. It's very similar to old school cut out animations. It's not as fluid as hand drawn animations or 3D work but it's a straight forward and somewhat easy to follow approach. It works quite well with small size sprites.

    Creating the [soon to be animated] caveman

    It's pretty much the same process used in the tutorial's 3rd part with some added complexity in the facial features.

    image

    image

    Note:
    I mirrored the limbs in the image above just to show the 'exploded' body setup. There is no need for that when you use the elements in a side on view [both feet should point in the same direction].

    image

    image

    Note:
    Working with CorelDraw a lot I come to appreciate the multiple page setup of CorelDraw documents. Instead of layering animations you just place them on separate pages and flick through them to check your progress. The program even alows you export the pages in one layered bitmap file keeping layers and pages separated.

    Animating:

    If you start out animating it's helpful to go with some more basic animations first - there is nothing wrong with the 'mad-kung-fu-360-tiger-meets-dragon-in-mid-air-move' but it might be a little frustrating to start with.

    Think simple and create something you can use in your game. This way you keep motivated and focused.

    Note:
    It's always helpful to check out references, poses, animations and other tutorials. A lot of the reference will show you a simplyfied setup that makes it a little easier than working off memory and your own experiences.

    First steps (quite literally)

    image

    image

    Note:
    This setup will seem very familiar to those of you using Adobe Flash or similar timeline based tools. The groups of object created in inkscape are similar to symbols either as 'movieclips' or 'graphics' used in flash. All you have to do though is animate the bits inbetween which Flash handles for you with 'tweening'.

    Variations

    It's all about changing and trying different poses, placements, rotations and flows. Based on the setup of the caveman I created three more characters as inspiration:

    image

    image

    image

    I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.
  • beefy_clyrobeefy_clyro Posts: 5,390Member
    Another great addition, have pm'd you mate :)
  • beefy_clyrobeefy_clyro Posts: 5,390Member
    Another great addition, have pm'd you mate :)
  • Benjamin_m5Benjamin_m5 Posts: 646Member
    This is for what we all waited!!! Animations are the almost important things to make cool games!!! This tutorial makes you to the King :)

    Love this. Will try this out soom. Hope it is not to difficult to make a great thing like this :)
    ---
    Benjamin
  • UtopianGamesUtopianGames Posts: 5,677Member
  • CapCap Posts: 225Member
    Unfortunately I don't have the time to deal with Inkscape / GameSalad at the moment, but this is exactly the kind of tutorial blog I have hoped for.
    Nontheless I have to say that I'm staggered by the amount and regularity of Spriteattack's blog entries. No matter if you work on a game or not, these tutorials make you want to deal with vector art. There doesn't really seem to be a barrier between you and vector art if you follow these tuts. Really amazing work!
  • SpriteAttackSpriteAttack Posts: 524Member
    Thanks, guys...

    I forgot to show the end result. This is the little caveman walking:
    image
  • FloridaGamesFloridaGames Posts: 328Member


    If it's not too much of an inconvenience, could you show us how to make something like this?
  • SpriteAttackSpriteAttack Posts: 524Member
    @FloridaGames - too easy, mate

    I looked at your electricity / lightning strike effect and think I found a rather quick and simple way to do it in Inkscape.

    image

    With a some additions it turns into a night lightning strike.

    image

    If you want to animate these I suggest doing the lines first and altering a copy of the line shape in a new layer [see the animation tutorial for this]. Animate the shape roughly and not too similar. After creating a few variations of the lightning strike start with the conversion to paths.

    It's a lot easier to adjust a few nodes on a line than twice that many or more in a shape.

    I hope this quick tutorial is helpful to some.
  • FloridaGamesFloridaGames Posts: 328Member
    Thanks a lot, I thought this would be an easy one for you.
  • HapiappsHapiapps Posts: 373Member
    Would it be OK to put some of these tutorials on my site so more people could learn from them?
  • SpriteAttackSpriteAttack Posts: 524Member
    @HapiApps... I had a look at your site... and it's a little tricky... You offer art packs (even though there is a lot a empty space still on your site)... The idea of putting my tutorials on your site doesn't sit well with me as it might give the impression that you created these... You are most welcome to link to my blog but putting up whole tutorials is a no go.
  • WTDeveloperWTDeveloper Posts: 352Member
    Hey SpriteAttack
    your tutorials are great !!!
    They helped me a lot
    But can you maybe make a tutorial about how to do a wood grain effect in inkscape??
    and please say what colour you use for wood...
    WTDeveloper
  • Benjamin_m5Benjamin_m5 Posts: 646Member
    Hey Sprite

    You're animations tutorials above are not there anymore?!
    ---
    Benjamin

    Facebook-page
    Our first game
    Homepage
  • SpinningnutmegSpinningnutmeg Posts: 107Member
    Yeah all of his pictures have not been showing up.
  • LumpAppsLumpApps Posts: 2,861Member
    Awesome tutorials spriteattack!
    I like to draw by hand but your tutorials are great.
    Very clear. You could be a teacher. A good one ;)
  • SpriteAttackSpriteAttack Posts: 524Member
    @Benjamin & AppsOfZach... I had some server problems... it should be fixed now... I changed the image server for the blog:
    http://2dgameartforprogrammers.blogspot.com/

    @LudwigHeijden.... thanks... I am glad you enjoyed them... and I am not sure about that... I prefer my peace and quite ;)
  • MotherHooseMotherHoose Posts: 2,456Member
    @SpriteAttack... your blog is full of wonder!

    please put these tutorials in an app... iPad

    be so nice to be able to view them while I practice in inkscape!

    Thanx!
    MH
  • SpriteAttackSpriteAttack Posts: 524Member
    Here's a quick tutorial on a cute tank design as requested by one of the forum members :) :

    Note:
    When you scale in Inkscape holding SHIFT+CTRL down allows for the ratio of height to width to stay intact - which is rather helpful at times...

    image

    image

    image

    Note:
    Remember to keep overlapping parts separate when exporting to bitmaps - eg. the barrel separate from the body... and maybe 4 different images of the tracks with different rotation angles for the wheels and some movement on the chain...

    Enjoy!

    @WTDeveloper - I will try... it shouldn't be too hard... :)
  • LumpAppsLumpApps Posts: 2,861Member
    Sprite attack: could be, not should be ;)
  • SpriteAttackSpriteAttack Posts: 524Member
    Images should be back up... sorry about that... ISP did an update and crashed the lot...
  • crazyfishdevcrazyfishdev Posts: 283Member
    Could I place a request for the back side of a plane or fighter jet?
    If you could show how to make it or just make it I would be willing to pay.
    Thanks, <><
  • SpriteAttackSpriteAttack Posts: 524Member
    @Crazyfishdev - something like this?

    image

    @WTDeveloper - you are after a tutorial for wood like this?

    image
  • WTDeveloperWTDeveloper Posts: 352Member
    Yes SpriteAttack this wood look great !!!!
13468913
Sign In or Register to comment.