Pixel Art Class - Making Pixel Art Worth Animating

Поділитися
Вставка
  • Опубліковано 8 чер 2024
  • Heya Pals!
    Today I've got a good chunk of content for you all about preparing your pixel art (and yourself) for the animation process. I initially was just going to cover some basics for sprite design, but ended up going down the rabbit hole on animation methodologies too, so I hope you enjoy the ramble haha.
    Let me know what you'd like me to cover next!
    Thanks!
    - Adam
    Chapters:
    0:00 - Introduction
    1:33 - What not to do
    7:42 - Visual Semantics and Motion
    14:13 - The Challenge of Animating Pixels
    16:27 - Personal Animation Examples
    19:52 - Keyframing vs Straight Ahead
    23:06 - Straight Ahead Process Demo
    29:48 - Keyframe Process Demo
    35:35 - Creating Animation-Ready Sprites
    40:36 - Conclusion
    40:58 - Outro
    Music:
    Rifti Beats - Chocobo & Chill [Gamechops.com]
    "Disney Animation" Footage:
    AaronBlaiseArt
    "Anime" Footage:
    Dragon Ball Z - Akira Toriyama & Toei Animation
    ----
    This video features clips from my stream. Catch it live: Mon, Tues, Thurs and Fri 1-6pm AEST.
    Twitch: / adamcyounis
    Twitter: / adamcyounis
    Discord: / discord
    Become a Patron at / adamcyounis
    Download assets and games from the stream at uppon-hill.itch.io/
    Later, pals!
  • Наука та технологія

КОМЕНТАРІ • 147

  • @vn74m3d
    @vn74m3d 3 місяці тому +20

    It's a pity that people who are not specifically interested in pixelart miss out on all your clear understanding of semiotics/semantics. What you point out in all of your videos between the lines, so nicely illustrated by pixelart, matters for all design and art related departments, or even put further, matters for everything regarding communication and lastly our whole perception of reality.
    Your content is never just a cheap trick, your genuine understanding of the matter is a promise always kept, and if one wants to, one can learn a lot more than pixelart from this. Thank you Adam!

  • @eboatwright_
    @eboatwright_ Рік тому +351

    Me: "Hey, can I watch you make your pixel art, to see your technique?"
    Adam: "Yeah, sure"
    Me: "Ah yes. His technique is being way better than me."

    • @flamesofhellstudio
      @flamesofhellstudio 6 місяців тому +7

      Practice and understanding why they're doing what they're doing is how they get this good. And likely knowing themselves and knowing when to rest to avoid burnout.

    • @MediHusky
      @MediHusky 2 місяці тому +6

      me, doing basically stick figures but in pixel art: Hmm yes the folds of the shirt yes, indeed. Indubitably. Quite.

    • @eboatwright_
      @eboatwright_ 2 місяці тому

      @@MediHusky Facts 😂

  • @alexeykosogov2652
    @alexeykosogov2652 Рік тому +137

    I have the same technique as you, and I use copy-paste in simple animations like breathing. You gave me so much motivation by showing that you spend a lot of time on your animations just like me. But you working non-stop, no matter what! Now im so tired Im not even open Aseprite for 2 weeks. But today, im gonna show that pixels, whos the boss! Thank you so much. I love you, man.

  • @Dumbunny420
    @Dumbunny420 4 місяці тому +15

    Just spent five hours making all angles of my character sprite, then made the idle animations, then started with the walking, and realized the legs were so hard to try an animate, went back and changed so much that I hated my sprite, and now I'm remaking the entire sprite, so 10 hours total were wasted on something that I no longer even have but I'm going to continue to convince myself the practice was worth it

    • @360dom360
      @360dom360 Місяць тому +3

      Sounds like a good learning experience

    • @Mgsthpv
      @Mgsthpv 16 днів тому

      So in other words: learning time :) dont sweat makin mistakes and wasting time. Not a waste if you enjoy doin art :)

    • @whitehairedpleb954
      @whitehairedpleb954 3 дні тому

      Truest words

  • @apoxfox
    @apoxfox Рік тому +96

    Those spider animations are insane, always feel so inspired after watching one of your videos

  • @JumbaJumby
    @JumbaJumby Рік тому +23

    The tip about using separate layers is pretty huge. I already started with the most defining motion and built everything to support that with contrasting colors, but using separate layers for quick iteration is a game changer. I don't know why I didn't think of that lol.

  • @pn4960
    @pn4960 Рік тому +36

    Your comments at the beginning reminded me of the “ligne claire” style developed by Hergé, the creator of Tintin and one of the most renown Franco-Belgian comic books author of the XXth century

  • @The_Crucifix
    @The_Crucifix 11 місяців тому +19

    Literally best man in the world. The amount of invaluable, essential pixelart information you provide is staggering. I always sit down to draw after your videos, because they are very inspiring and put my own practical ideas in place. I'm sure your videos will grow a lot of good pixelart artists

  • @Jhakaro
    @Jhakaro 4 місяці тому +5

    Great video but just want to point out for others watching that Keyframe animation has absolutely nothing to do with copy and pasting aspects or holding frames for longer with only minor altercations. That's called limited animation and is animated on 2's or 3's or even higher sometimes, meaning, every 2 or 3 frames of actual on screen time, only one new drawing is made. In anime, due to time constraints, most studios will generally try to keep certain elements static as much as possible, only moving what is necessary to convey the emotion or movement. This is also true for even high budget movies like Klaus made by expert animators in "the west" where characters in the background will be stuck in place and unmoving as the main focus is on the foreground characters. Most won't even notice as their eye is drawn to the movement up front.
    Keyframe animation is done for multiple reasons and was and IS used WIDELY in western animation. 1) it helps keep the volume of an object or creature consistent. You plot out the basic structure of the movement, beginning, middle, end essentially and as long as those volumes are all the same, then you go in, add breakdowns, which are basically minor keyframes to accentuate specific main keyframes you've drawn. After that movement is looking solid, you then go and do in-between animation which is to smooth out the movement. The in-betweens use the keyframes and breakdowns to transition smoothly between the main points of action and using the breakdowns, you know which parts of a movement to favour in your in-betweens. If you in-between everything evenly, you'll get a bland uninteresting animation. This is often called slow in and slow out, where we slow down the action as we enter it or exit it.
    2) in many studios, the keyframe animator is different than the breakdown artist or the in-betweener. Keyframes are the most vital drawings that set up the entire movement and flow for the others to follow so the idea is that the senior and more experienced animators keyframe the main movement, make the big decisions. Then lower down artists handle the breakdowns based off of their keys and then junior animators often worked on the in-betweens which have the least amount of responsibility or artistic choice/decision making (though still a very important skill in and of itself), all in order to save on time so keyframe artists can work on more keyframes rather than doing an entire scene from beginning to end. This aspect of not doing an entire scene yourself, however, varies greatly from movie or movie, project or project. In many Disney movies a scene might be mostly just one artist that handled everything but even then, most of the time they still used keyframes to keep the sense of volume the same and sketch out the movement first.
    Straight ahead animation is less technical and more flowy. Free. Feel it out. But the main issue with it is that often you might start an animation and spend days or weeks working on it only to realise that the movement you made isn't quite what you wanted or the volumes are inconsistent, off-model etc. the character grows from frame 1 to frame 110 without you realising (especially when on paper as you can only roll about 5-6 pieces of paper at a time on a light desk). And if that happens, you now have dozens or even hundreds of frames wasted that you need to fix or redo entirely. For small, simple animations straight ahead can work well but for very long or complex scenes, keyframes are often nearly a requirement.
    Both have their uses and often honestly, it just comes down to the animator themselves and studio workflow

  • @Pockeywn
    @Pockeywn 6 місяців тому +2

    your intro does what an intro should. i clicked in a video about animating pixel art and immediately saw well animated pixel art and knew i was in the right place

  • @Sackwiz
    @Sackwiz 7 днів тому

    Your animations are absolutely amazing... I'm amazed. Well done.

  • @nemo9396
    @nemo9396 4 місяці тому +1

    Very interesting and liberating approach this one

  • @stonecoat_art
    @stonecoat_art 4 місяці тому +2

    hey adam, im lucky enough to work as a pixel artist and animator. I gotta say that your videos were instrumental in getting my career off the ground, and i still revisit videos like this one when i feel myself slipping a bit with my art.
    thanks for everything man

  • @jerrygreenest
    @jerrygreenest Рік тому +11

    AdamCYounis: Don't do this while making animated pixel art
    Me: I never intended to. I'm not even a pixel artist. Just having pleasure to see a professional in work.

  • @msv266
    @msv266 Рік тому +5

    Thank you for putting so much effort into your tutorials. Your videos really help understand complex concepts and are so motivating

  • @pottingsoil723
    @pottingsoil723 Рік тому +5

    Just in time for my morning coffee. Thank you Adam, this was exactly the animation help I've been needing lately. ☕👍

  • @Microbex
    @Microbex Рік тому +11

    Uhmm yes, the spider and staircase animations are particularly great.
    Great masterclass! 👍☺️

  • @Erika10016
    @Erika10016 Рік тому +4

    Thank you so much for making those videos! You explain things so well and I've learned a lot from you!

  • @Dooby_Gooby
    @Dooby_Gooby Місяць тому

    So freaking good. I've been animating pixel art for quite a while now for my game, and this has shown me just how much room I have to improve. I sincerely thank you sir.

  • @Spaaace
    @Spaaace 23 дні тому

    You're an inspiration, Adam. Thank you.

  • @goldenPixeler
    @goldenPixeler Рік тому +13

    I don't know why your new videos does not hit the 100k views cause you are doing a lot of work 🥺

  • @collin2401
    @collin2401 Рік тому +4

    Woah, those animations are super smooth! I'm making my own game right now and trying to keep the visuals as basic as possible, but I'd love to make a Metroidvania with pixel art like yours one day when I have more experience. Anywho, thanks for making such high quality videos! They're very helpful for newbies like me lol

  • @matthiasklostermeier6799
    @matthiasklostermeier6799 Рік тому +1

    Thanks for a new video!! Always love them. Sometimes I watch you on twitch, but honestly most of the time I am just not awake or on my Mac when you stream, so the more compact youtube videos are much easier to watch and concentrate :-)

  • @alejandrovelezsainz2440
    @alejandrovelezsainz2440 Рік тому +3

    Wonderful job!! A great workflow video for indie devs and graphic designers

  • @rageheals1607
    @rageheals1607 4 місяці тому

    Your animations are so smooth. Really great video, thanks.

  • @0yaSumi6908
    @0yaSumi6908 Рік тому +3

    I am so glad I subscribed to this channel, it's the best pixel art channel I've ever found:)

  • @jerrygreenest
    @jerrygreenest Рік тому +4

    Rotating tower to simulate 3D looks so sick!

  • @rolitae
    @rolitae Рік тому +1

    Insightful video, Adam! Great job 🥳

  • @morticias5043
    @morticias5043 Місяць тому

    wow i never knew of this trick of animating the moving limbs first, and then filling colors when needed. crazy. i usually find it difficult to move and animate a lot of the details.. and this way makes more sense

  • @antoniojimenezperez50
    @antoniojimenezperez50 3 місяці тому +1

    Very good stuff here❤

  • @Skeffles
    @Skeffles Рік тому

    Great to see how your process works!

  • @Jojos_bro
    @Jojos_bro 6 місяців тому

    simplify is another level of getting better!
    nice video

  • @benjipixel1438
    @benjipixel1438 Рік тому +1

    Adam asks: Tutorials? Dev vlogs?
    Adam gives: *both in one video*
    Me: happy

  • @SmashAdams
    @SmashAdams Рік тому

    Great video Adam. very insightful

  • @bitbraindev
    @bitbraindev Рік тому +15

    I am trying to apply your technique as well now. My sprites are 16x16 and I find it way more difficult to animate properly on such a small canvas (with sub-pixel animations) but on the upside I am much quicker _per frame_
    I love these videos of yours and cannot wait for Insignia to come out!

    • @saku-ra8813
      @saku-ra8813 Рік тому

      Good luck with the animation :)! Small sprites are a pain to animate

    • @lonelyfloat2582
      @lonelyfloat2582 Рік тому

      @@saku-ra8813 Especially walk cycles, every time i try i get stuck trying to make the leg motion readable

    • @otto2853
      @otto2853 6 місяців тому

      Pain to animate, blessing to draw xd

  • @SebsterLive
    @SebsterLive Рік тому +2

    That's my name on the top haha! Useful video as always!😁

  • @HenkkazoR
    @HenkkazoR Рік тому

    These videos are very helpful thank you

  • @GaryParkin
    @GaryParkin Рік тому

    Very interesting. Thanks Adam. I'm just starting out with 2D, and it looks like something I'd want to use. Been doing 3D and modeling for ages.

  • @jonathanspangenberg1563
    @jonathanspangenberg1563 4 місяці тому

    Wow, your videos are so helpful. You are such a natural teacher. Do you also do the programming for your game? I would love to hear about that side of things too; the game production side of things. Thank you for your hard work and commitment to this channel.

  • @Blinaka
    @Blinaka Рік тому

    18:44 This is incredibly amazing in a totally positive way, woowww

  • @jumpkut
    @jumpkut Рік тому +1

    I'm a simple man. I see a new AdamCYounis video, I click like.

  • @hugoclarke3284
    @hugoclarke3284 Рік тому +1

    Brilliant video

  • @ennizodev
    @ennizodev Рік тому +1

    Easy to Understand, thanks~^^

  • @vincentboulet1937
    @vincentboulet1937 Рік тому

    Amazing video!

  • @Floki-us7gq
    @Floki-us7gq Рік тому +2

    Hi just got aseprite. Glad i found this channel, im already involved with some blender modeling and animation, but id like to start doing some pixel art too. Im glad you feature relevant art advice for game dev and animation. Thank you

  • @gigaman007
    @gigaman007 Рік тому +1

    You doing great job 💪

  • @ricksto87
    @ricksto87 7 місяців тому

    8:30 Excellent point. What a revelation

  • @DaniPotatoArt
    @DaniPotatoArt Рік тому

    Excellent video

  • @themelancholyofgay3543
    @themelancholyofgay3543 Рік тому

    the guy on the thumbnail looks so cute, i am practically drooling

  • @c64cosmin
    @c64cosmin Рік тому

    Pixel Art Master Class*
    Thank you very much!

  • @rcjvet
    @rcjvet Рік тому

    Great work, as always. Adam, do you take freelance work?

  • @jamstarx
    @jamstarx Рік тому

    This is a good one!

  • @80Apoc
    @80Apoc Місяць тому

    I'm Looking forward to my lack of detail being an artistic choice that conveys meaning efficiently, instead of my lack of detail conveying a lack of artistic ability.

  • @panampace
    @panampace Рік тому

    Wow that staircase. Just wow.

  • @NK-kk9sv
    @NK-kk9sv Рік тому +1

    Hey man, I love your videos, but I have a unusual request. In one of your older videos "Pixel Art Class - Platformer Jump Animation" you explained a very cool practice of using different sprites for different velocities ("5:24 - Velocity Based Animation Code Breakdown"). Sadly I am new to Unity and did not understand the full process and I couldn't find a fitting answer elsewhere. Could you please do a very short video explaining this a little more detailed? Thank you in advance.

  • @MaxW0lf
    @MaxW0lf Рік тому +3

    Is there any reference on how to make sprites for a top down game for mobile? Like size of the canvas vs how the tilemaps have to be, so the character doesn't look to big in a small world. Gladly appreciated if you could let me know!
    Thx a lot! Started seeing all your vids and this gives me hope that i can make a game, and animate sprites and other stuff. Thx! And good luck in your projects!

  • @stephenrose3202
    @stephenrose3202 6 місяців тому

    Your shirt is excellent. It is Fall here and I now want a plaid shirt with yellow highlights and my roommate wants a nightgown in the same pattern. 😊 With your old pixel art having a faded brown compared to the new red, you could have him have the old brown haircut in flashbacks? 😂 Yay for art 🎉

  • @sam-bk8hg
    @sam-bk8hg Рік тому +1

    i love your videos ❤

  • @rachi7629
    @rachi7629 Рік тому +1

    Holy crap that window better be a main fucking character

  • @timpawlovich9522
    @timpawlovich9522 Рік тому

    Amazing :)

  • @sebkolind
    @sebkolind 4 місяці тому

    So good. I can’t even make a simple run animation lol

  • @lethalxarchon7332
    @lethalxarchon7332 5 місяців тому

    Absolutely love this video.
    Only gripe is you're using a lot of similar shades of red for examples and color blind people might have a harder time following along and seeing what you're talking about.

  • @codydragonstone
    @codydragonstone Рік тому

    I wish I had a fraction of your talent.

  • @Ralgondo
    @Ralgondo 7 місяців тому

    The staircase looks great, you could just make a gif of him running down the stairs and use it as a loading screen or something

  • @dnajlwosqkdasjczdbkahdwcs
    @dnajlwosqkdasjczdbkahdwcs 2 місяці тому +1

    3:05 Man runs like Steven Seagal

  • @yonanovack4140
    @yonanovack4140 7 місяців тому

    commenting for engagement lol great video adam

  • @hewicopter8878
    @hewicopter8878 Рік тому

    Can you do a set up video of, programs, hardware, etc. you use for doing pixel art? Thank you so much for your videos !

  • @GINGINSHAAN
    @GINGINSHAAN Рік тому +1

    The best 🤝

  • @Winterhe4rt
    @Winterhe4rt Рік тому

    So all this is really great advise but do you have any advise on how long a single frame should be hold in ms? I see you got this great animated ball with just a couple of frames used. I personally would need at least double that amount to make it even somewhat close. Is there some rule of thump on how long a single frame for such a purpose should be?

  • @pg3648
    @pg3648 Рік тому

    29:53 me (Adam) watching Adam talk about Adams animation

  • @endergame8267
    @endergame8267 4 місяці тому

    The rule i kept from you is start simple, stay simple

  • @Cottee93
    @Cottee93 Рік тому

    Hey legend, incredible tutorial as always! I have a question - if you wanted to include character customization in a game that uses pixel art and frame-by-frame animation, how would you go about that? Is it possible? Would it have to involve unspeakable hours redrawing each frame for changes in hairstyle/clothing etc? Keep up the awesome work!

    • @Taehl
      @Taehl Рік тому +2

      One of the simplest ways to do it, in my humble opinion, is to let players pick the colors used on their character - hair, skin, shirt, pants, and/or whatever you feel is appropriate. Then you cut each recolorable thing into its own layer (if they're not that way already) so you can export spritesheets of each separately (eg., spritesheet 1 has just the hair, spritesheet 2 has just the skin, etc.), which in this case should all be in bright greyscale (no color, just shading - like they've all been painted white). That's because when you draw your final sprite in-game, you put those pieces at your character's coordinates and render each with the custom colors that were chosen (instead of drawing them with white like you do for full-color sprites).
      It's is an age-old trick that used to be done with palette swapping on old hardware, but modern variations like this can still be seen in games like Starbound, Stardew Valley, and so on.
      There are other ways you could go about it, but I can't think of anything that would be less work to implement (unless you already have some sort of elaborate system that generates all your sprites for you, like if you already made all your characters in 3D and have Blender rendering your spritesheets (like they did for Factorio) or something).

  • @aliakhtar6079
    @aliakhtar6079 Рік тому

    Thanks for an amazing video Adam once again, I wanted to ask why does my animation flicker when I export it to gif 😞

  • @krmzdomates1851
    @krmzdomates1851 Рік тому +1

    AdamCYounis Can you make a video about the frame properties (duration milisecond).

  • @psyboyo
    @psyboyo Рік тому +1

    6:54 Please, whats the name of that palette? You are amazing!

  • @Pixilated_YT
    @Pixilated_YT Місяць тому

    Final fantasy 7 lofi in the background thoughh

  • @xSPESHERx
    @xSPESHERx Рік тому

    Yo Adam. Do you use Graphical tablet for drawing pixels? Or only mouse?

  • @gilbert4351
    @gilbert4351 6 місяців тому

    Found another great channel! 😃

  • @vincentjeorgedapito789
    @vincentjeorgedapito789 Рік тому

    can you make a tutorial video showcasing animated tilemaps? I'm curious how to make that, like animated waterfall.

  • @ethanix6815
    @ethanix6815 Рік тому

    Hello
    I am creating a 2d pixel game in unity
    You are helping me a lot in the process
    Your videos are amazing, your way of teaching is fabulous
    One thing I ask for is the way to implement some magic effects from scratching to importing it to unity
    Like some water bending or fire bending
    That would really be great!
    You are the best
    Good job and wish you luck👏🙏

  • @SpiderSamYT
    @SpiderSamYT Рік тому +1

    What's the name of the program you're using? Because this video was so well done I wanna animate some pixel sprites again, I just dont know what the programs called

  • @jessiwillfressi_3866
    @jessiwillfressi_3866 Рік тому

    What did you study to know all this stuff, this is so interesting how you know so much about colors, shapes, drawing in genereal

  • @TheCrawliX
    @TheCrawliX Рік тому +1

    11:21 There's hardly anything here but we know it's a head.
    -Me seeing a steak hanging upside down :"oh"

  • @PixelKnight93
    @PixelKnight93 7 місяців тому

    Hey Adam, I am looking for your video on canvas sizes, but I can't seem to find it.

  • @Jaredbud
    @Jaredbud 3 місяці тому

    hear a year late but gonna ask anyhow....When it comes to idle animations, how would you add a subtle blink to the animation. Would that make it too busy or would it be too much?

  • @3kluffy719
    @3kluffy719 Рік тому

    Adam can you make video about using supertiled2unity with aseprite

  • @AstriaTVTruthExposed
    @AstriaTVTruthExposed 7 місяців тому

    What program did you use to do this ?

  • @frediculous1191
    @frediculous1191 Рік тому

    Hi Adam! I'm sorry if you covered this at some point and I missed it, but what framerate/frame duration do you recommend to use with animations? I'm struggling to find one that I like.

    • @AdamCYounis
      @AdamCYounis  Рік тому +1

      I've been working with 10fps (100ms) for a long time as a standard. Faster animations I'll go to 12 or even 16.

    • @frediculous1191
      @frediculous1191 Рік тому

      @@AdamCYounis Oh wow, for 10fps your animations look super smooth. Thank you so much for getting back to me!

  • @abdoulraoufgambo
    @abdoulraoufgambo Рік тому +1

    coooooolll

  • @wilkerl6159
    @wilkerl6159 4 місяці тому

    37:42
    I just want to remind myself of this

  • @bevouliindesign7777
    @bevouliindesign7777 Рік тому

    Hi that's an awesome guides. What is the name of the software you use to make the sprites? thank you very much in advance!

  • @gutenpog
    @gutenpog Рік тому +6

    Question for you Adam would it be ok to learn pixel art just by using a mouse no tablet included?

    • @shiwanmi
      @shiwanmi Рік тому +4

      I'm interested in hearing his opinion as well, but I'd say absolutely! In my experience most pixel artists start on a mouse. I certainly did and many very skilled artists I've talked with use a mix of tablet and mouse depending on the scale of their work. Many use mouse or even track pad exclusively! Don't wait until you have all of the tools you may eventually want. Start now!

    • @figates9220
      @figates9220 Рік тому +2

      @GutenPogging @Shiwanmi Check out Brandon James Greer - guy uses only touchpad of his laptop and is doing great

    • @plague_doctor0237
      @plague_doctor0237 Рік тому +1

      Yes, it's a valid instrument to use, it only depends on the skill

    • @theotutuianu5567
      @theotutuianu5567 Рік тому

      i use a mouse. i want to move to a stylus but i have done soo much art and animation with a mouse

    • @apoxfox
      @apoxfox Рік тому

      I use a drawing tablet for digital art but I’ve only ever used a mouse for pixel art. You don’t really need to worry about making perfect straight lines in pixel art so I would say a mouse works great! Totally your preference though

  • @phnkcell710
    @phnkcell710 Рік тому

    Crazy both versions . OMG mine looks like make by a child

  • @noelleciento7590
    @noelleciento7590 Рік тому +1

    Nice. Your art is the right fit for Faketown 2nd creative competition. Faketown is the OG metaverse and it is a popular game back in the early 2000s. It's similar to Sims, but in 8-bit form.

  • @Kichu0Kalamity
    @Kichu0Kalamity Рік тому +1

    Hey guys, what is it that Adam mentioned about digital principles in psychology ? Cant find a specific book or article

  • @l_guy
    @l_guy 10 місяців тому

    1:29
    WHEN YOU WALK AWAY
    YOU DON’T HEAR ME SAY
    PLEASE!
    (Oh baby don’t go)

  • @Angel-Otk
    @Angel-Otk 4 місяці тому

    Ok bro

  • @John-hm6yh
    @John-hm6yh Рік тому

    Does anyone know what theme Adam uses?

  • @txlogs
    @txlogs Рік тому

    If I ever make a video game, it started here

  • @sandip_1698
    @sandip_1698 Рік тому

    Which software is that ?