Bringing My Pixel Art to Life in Unity [with Custom Animator & State Machines]

Ғылым және технология

Heya, Pals!
Today I thought I'd walk you through my approach to building my own animator and state machine setup, just because so many of you have been asking to hear about it.
As I say in the video, there are tons of ways to handle this kind of thing, and this is just an approach I landed on through my experience. I recommend you always research this kind of thing from many points of view, as you might find something more suitable for your game.
In any case, I'm really happy with my current tools, and they work really well for me so I'm proud to share them with you and any updates I make in future!
Chapters:
0:00 - Introduction
1:12 - Requirements & Inspiration
3:22 - Street Fighter Example
5:29 - States vs Animation
8:15 - Insignia's System
9:05 - Importing Enemy Sprites
12:36 - Retrobox Animator
16:06 - BehaviourState Tree
20:48 - Pros & Cons
23:20 - State Architecture
26:15 - Wrap up & Reflection
27:37 - My Advice to You
29:50 - Outro
Music: Gamechops.com
----
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!

Пікірлер: 97

  • @lullaby445
    @lullaby4452 жыл бұрын

    I would absolutely want to see how you implemented the animations/animator. How do you handle the collider, hit and hurt boxes? My first thought was to store the sprite, corresponding colliders, and any other info about the frame( such as armor and invincibility) for a single frame as a ScriptableObject, and then store an array of those for each animation. I am also very interested to see that animation frame editor in more depth. I am more on the art side of game dev, so I can't even begin to imagine how I could do this. 😅

  • @Carl_ArbiterGames
    @Carl_ArbiterGames2 жыл бұрын

    To those here that are discouraged about the animator after watching this video - I’m making a 2d side scroller that utilizes state machine for character behavior and the animator works great for me. Essentially, each animation you turn off “has exit time” and you set “transition duration” to 0. In parameters, you set up a bool and/or velocity that corresponds to your animations. Set transitions from “any state” to each animation with said parameters. Anytime you want to play a specific animation (in my case in a particular state), you just set the parameters accordingly. For example, do something like: animator.setbool(“run”, true) if in the running state, then set it false once out. Hope this is helpful!

  • @Carl_ArbiterGames

    @Carl_ArbiterGames

    2 жыл бұрын

    OH and I forgot to mention. You can do specific things on specific frames in your animations by adding events. Events can call functions in your character scripts. For example, in my game, in the running animation I call “playfootstep()” every time the players foot hits the ground, which plays a footstep sound.

  • @Dudelee1

    @Dudelee1

    Жыл бұрын

    You can also just play animations directly from code using the default animator - that's what I do. Then you don't have to worry about transitions at all. There's a video on youtube called something like "escaping animation hell" for unity that I followed for that

  • @Art_Beat
    @Art_Beat2 жыл бұрын

    Nothing would make me happier than a tutorial on how you made that animator. It would streamline my current workflow so much.

  • @kaiiboraka
    @kaiiboraka10 ай бұрын

    Adam, I've come back to watch this video probably a dozen times since you posted it (and the follow-up). The concepts you've laid out here are exceptionally simple to grasp, and I adore the usability and robustness (as you described) of it. To be quite frank, I am simply not the sort of person with the software engineer brain that can just hear a description of a thing and then just implement it myself from scratch. While I can generally mix and match and combine the tools I've been given to great effect, coming up with new tools like this BehaviorStateTree thing... that is next level, and I am so utterly envious. I would love if you were to somehow sometime make some sort of breakdown or tutorial of the system at a deeper level than just an abstract overview as done here, (or as my selfish jealous side hopes, even go so far as to make the system publically available... 😏). In a similar vein, I can hardly wait for the day you publish RetroBox as a standalone asset. It's ingenious for pixel artist developers like myself. Thank you for all of your wonderful work. It is awe-inspiring and keeps me at it every single day.

  • @kaiiboraka

    @kaiiboraka

    10 ай бұрын

    OKAY WELL AFTER LITERALLY A YEAR I've spent the last like 2 hours pacing and "Rubber Duck"ing my way through this thing at my very patient loving understanding wife and I finally cracked the code. I was able to follow along with the visual-side Editor video plenty well and was left with stubs and missing pieces of the base BehaviorStateMachine and BehaviorState classes and I was so baffled as to how the tree structure even existed at all, but then I was finally able to synthesize all of the details you were saying throughout this video. Things like the state being the PATH to the leaf-node state, and that every state was a Component Monobehavior class, and THEN the clincher was seeing that your GameObjects had reference fields to other states, and it all came together in the most brilliant flash of understanding and inspiration I've ever felt in my time coding. The reason the BehaviorState only has one single childState is because the machine is FINITE. In the weeds of behavior, you would change the assigned child reference to the corresponding cached BehaviorState Component, until it reached a leaf AnimationState. No tree structure in the states. Just straight line branches. I finally understand. Brilliant. Just... freaking brilliant.

  • @nangld
    @nangld25 күн бұрын

    Great explanation as always! Main lesson learned: to design a good animation system you have to be both artist and an engineer.

  • @ShiloBuff
    @ShiloBuff2 жыл бұрын

    So glad to see you still making videos! Your content is seriously top-notch and absolutely enjoy it!

  • @SAKronikle
    @SAKronikle2 жыл бұрын

    The way you go into software engineering topics and apply it to Unity game development is fantastic. I'd love to see more videos about that!

  • @Historiaeroteiro
    @Historiaeroteiro2 жыл бұрын

    Sorry if I'm being completely out of place here by pointing this out, but the Playmaker asset is all about FSMs as visual coding trees that update their states/events/actions in real time during Unity's playtime - Playmaker + Animator sound like what you need to see your code and animation work visually in real time.

  • @fakefake6770
    @fakefake67702 жыл бұрын

    Wow thank you so much for making a video about it (the topic I requested.)🙏 I can't tell you how much this adjusted my perspective to see game developement. And how many things I've learnt, never seen on KZread before. Thank you so much! I think these kind of videos complement your art videos very well and make your channel feel so complete and unique!🔥💪 Your system and knowledge/ ideas you built over the years are really admirable. These things are something you can show to the world in full proud. I would love to learn even more in depth about these things in the future and of course encourage you to make more videos like this😆🤙as they really complement your channel perfectly and make game devlopement for everyone accessible!

  • @diligencehumility6971
    @diligencehumility69712 жыл бұрын

    Really nice with a look behind the scene and what systems you use and why you use them. Very helpful video

  • @owlytedailer-sg5cq
    @owlytedailer-sg5cq7 ай бұрын

    I'm not a game developer, nor a pixel artist, I just like Adam's voice

  • @tommuller6890
    @tommuller68902 жыл бұрын

    Thank you so much for this video! As I watched the video I just realised that this is the side of game development I'm really lacking of😮I need more content like this!!!🔥🔥🔥 Thanks again for taking the time making these type of videos👍!

  • @bilalinci4981
    @bilalinci49812 жыл бұрын

    I am waiting for such a video. Thank you so much.

  • @grimedoc8180
    @grimedoc8180 Жыл бұрын

    As someone who's got a lot of paralleling ideas in their own project to yours, the State machine part in particular I found very useful. Helps me see through a particular sticking point I've been struggling to tackle

  • @CameronWills
    @CameronWills2 жыл бұрын

    For anyone that doesn't know, you can trigger specific things on a given keyframe in the animation by adding an animation event to the specific key frame. For example you could trigger one bit of code on frame 2 and another on frame 8 and another on the last frame.

  • @bradocksolo

    @bradocksolo

    2 жыл бұрын

    Yep, he could just use animation events. No need to rebuild a whole new system.

  • @grimedoc8180

    @grimedoc8180

    Жыл бұрын

    @@bradocksolo While I generally agree he could just use animation events, it seems like Adam's method allows him to execute his animation events on much more specific timing, down to exact microseconds. On a project with fighting game fundamentals in it, that accuracy might be crucial.

  • @bradocksolo

    @bradocksolo

    Жыл бұрын

    @@grimedoc8180 In a fighting game you usually want things to happen in a specific frame. The Unity animation event was designed for exactly that, not sure if he's aware of this system. His system looks great, but we can do everything that he mentioned (animation wise) using the built-in Unity systems.

  • @grimedoc8180

    @grimedoc8180

    Жыл бұрын

    @@bradocksolo I thought you could only add animation events on every 0.1 seconds in the animator. Is that wrong?

  • @bradocksolo

    @bradocksolo

    Жыл бұрын

    @@grimedoc8180 I don't use the Animator to add events. I was talking about the Animation window, you can select an animation and add events to be fired in a specific animation frame. The event will be fired when the Animator is playing the animation.

  • @flyingkartoffel2453
    @flyingkartoffel24532 жыл бұрын

    Absolutely love this system, would love to see more! Hitbox integration is a big issue with most animator systems, I think a lot of people would also be looking for something like this. Also, do you ever use the standard unity animator for things like looping animations on small objects?

  • @abjoern
    @abjoern Жыл бұрын

    I'm trying to develop a fighting game and your state tree solutions seems really clever, I don't know why I haven't heard or read about it before, but I'm gonna see if it'll work for my game. Great video!

  • @pachi9065
    @pachi90652 жыл бұрын

    amazing showcase as always!

  • @RaialMusic
    @RaialMusic2 жыл бұрын

    Would be definitely interested in how you setup the hitboxes per animation frame and how you manage that in code! Awesome stuff!

  • @nix702
    @nix7022 жыл бұрын

    I really love your art

  • @barbarosking3694
    @barbarosking36942 жыл бұрын

    Your videos looks beautiful :)

  • @SnowPeaGames
    @SnowPeaGames2 жыл бұрын

    This video was like the perfect venn diagram of everything I find interesting

  • @umapessoa6051
    @umapessoa60512 жыл бұрын

    Yay, state machines and retrobox!

  • @meianoite6887
    @meianoite68872 жыл бұрын

    incredible werewolf, like a boss!

  • @Khaldryn
    @Khaldryn Жыл бұрын

    I would love a video that goes more into depth about managing hitboxes and dealing damage on specific frames, etc. This system is perfect for what I want to do in my projects.

  • @firepotatoplays5263
    @firepotatoplays52632 жыл бұрын

    great vid as always! very helpful!

  • @iSlyy0717
    @iSlyy07172 жыл бұрын

    This vid came at the right time

  • @abdoulraoufgambo
    @abdoulraoufgambo2 жыл бұрын

    thank you so much

  • @harrywestern5245
    @harrywestern52452 жыл бұрын

    For a not so familiar to editor scripting and scriptable objects I would really love to know how you have implemented the animation/animator. I am also interested in knowing how you have created your retro box animation system. By the way love your videos when I watch them there is always something new to learn

  • @jaddd
    @jaddd Жыл бұрын

    Wow, we hope that you will make a detailed explanation with the code, how to create such a complex code, even if it is paid Your way of explaining is awesome

  • @SlangWay
    @SlangWay2 жыл бұрын

    Cool Video and nice day

  • @TC-mk1tc
    @TC-mk1tc2 жыл бұрын

    Hey Adam, could you do a video on animating clothing in different styles? Like modern clothes etc. I'd love to learn how the clothing should be drawn with shadows and folds and animated etc.

  • @hendyiwan9998
    @hendyiwan99982 жыл бұрын

    hi Adam .. do you know the suikoden 1/2 background ? i mean the house, ground, etc .. im curious how to make them ? is it pure by pixel art or what ? because its look blurry .. (from my theory is we just drawing using brush & make it pixel looks by using tools in photoshop (blur > Pixelate > mosaic (about 4 cell size)) because i feel the background has different type of styles from the character sprites (pixel art) itself .. sorry if my english was bad .. i hope u know what i mean

  • @xxVIDSxxCREATORxx
    @xxVIDSxxCREATORxx2 жыл бұрын

    Do you recommend I upgrade to a pad instead of using a mouse to draw? I've been on the fence and I really wanna improve on my pixel art. I'm trying to create a passion project for myself Also what brand/model would you recommend

  • @definitelynotnick2454
    @definitelynotnick2454 Жыл бұрын

    There are animation events built into unity so you can trigger hitboxes and other stuff on a specific frame of a animation.

  • @ZOMBIEBUST3R
    @ZOMBIEBUST3R2 жыл бұрын

    This was an amazing explanation. I'm very curious about how you made the Retrobox plugin, looked great. Regarding the Pros & Cons, what is the impact of having so many components, does it affect anything outside of just clogging the inspector in the editor? If it doesn't affect the game itself once built then it is more of a pro than a con as long as those components can be reused to create more characters with different behaviours just by adding the components to it. If not then it can help to visualize what your character can do by reading the different components present :D

  • @AdamCYounis

    @AdamCYounis

    2 жыл бұрын

    What you suggest is the reason I went ahead with the model in the first place. The reusability of components is so good, it's hard to pass up. As I mentioned, the clutter is really not so much a "problem" as it is a "revelation" of just how complex game logic can be. It's not a particularly pleasant way to see it laid out, but I went ahead and built a tree visualiser last week that works very well.

  • @ZOMBIEBUST3R

    @ZOMBIEBUST3R

    2 жыл бұрын

    ​@@AdamCYounis Cool! Component reusability is one of my favourite things to make. I love the "plug and play" style where you can just add functionality simply by adding components. I like to also use UnityEvents when prototyping in order to have that extra flexibility coming from quick iterations without having to write code on top of the component stacking. May not be the cleanest of hierarchies but the amount of time saved if you plan ahead is amazing. Specially if you work with clients that change ideas every 5min hahaha. Would love to see an update video on this to showcase the visualiser with maybe a focus on the tools you created (Retrobox and the new Visualizer) rather than the state machine itself. I've always been interested in tool creation but never really found a need for creating one in my current job. I would love to learn your approach on creating these tools :)

  • @Good_Minso
    @Good_Minso Жыл бұрын

    Not sure if you will ever see this, but: It your example at 20:00 I am wondering if e.g. the Patrol node is doing anything, or if it is just there to determine which of the lower states should be played. Because I can not think of anything "walk" and "idle" have in common except not being engaged.

  • @AdamCYounis

    @AdamCYounis

    Жыл бұрын

    That's the point of the tree structure, the higher states are managers to get more nuanced behaviour and structure out of the lower states, which are basically categorically different actions. "Walk" and "idle" shouldn't have anything in common by design, but "patrol" as a behaviour combines the two into a strategy that can be carried out in sequence, with it's own parameters and conditions.

  • @pole
    @pole Жыл бұрын

    Super interesting! I'm working on something similar, so I have a few questions: how do you handle dependencies for the states? Do you set them directly in the editor? Also, do you use some type of "service locator class" for grouping common components like rigidbody, colliders...?

  • @AdamCYounis

    @AdamCYounis

    Жыл бұрын

    Yes, they're all in the editor, connected to each other by dragging the components into public behaviour fields of other components. And yep, I have a class called "Character" that serves as the root of the state tree, which has public fields for rigidbody and the animator that all of the child behaviours have direct access to. Character does a single "GetComponentsInChildren" check at the start of the scene for all state behaviours and assigns itself as their root.

  • @pole

    @pole

    Жыл бұрын

    ​@@AdamCYounis Thanks for the detailed answer! Btw, you're doing a wonderful job with your videos, I really like your approach. Especially in the Sprite Art Classes, one can see both your artist and developer mentality

  • @AdamCYounis

    @AdamCYounis

    Жыл бұрын

    @@pole That's very kind of you to say. Thanks for saying so, and for watching :)

  • @Vesrayech
    @Vesrayech2 жыл бұрын

    To get real value and understanding of what Adam is saying you should look up videos on Object Oriented Programming. It was super cool to see how you implemented these design structures in a project as large as yours, though I do think you could handle some of your abstraction better around weapons. It's hard to say without seeing the differences in the actual code but I imagine your sword, dagger, etc share many similar methods and traits with one another to where it might be better to pull those into a MeleeWeapon class and subclass that out. Like the Wield script on the dagger would probably be very similar to the Sword, so it would be easier to have Wield on a parent object instead of on both the sword and dagger. I've been getting into Unity the past week or so and coming from both an art/animation and programming background I find your content to be quite exceptional

  • @AdamCYounis

    @AdamCYounis

    2 жыл бұрын

    The weapon types are designed to actually have different behaviours. E.g. pressing the attack button in the air while wielding a greatsword uses "heavy slam" behaviour, while doing the same with a dagger enters an "air combo" behaviour, which don't share any of the same logic. There are lots of similarities, but not enough for me to merge them by design. However you're right, "wield" could be on a shared component.

  • @Vesrayech

    @Vesrayech

    2 жыл бұрын

    @@AdamCYounis Sounds like the makings of an awesome game :)

  • @franciscosousa4955
    @franciscosousa49552 жыл бұрын

    Please do the retrobox video! I have been waiting to have it for months

  • @hijrah4887
    @hijrah4887 Жыл бұрын

    Sorry, permission to ask, may I know what software are you using like the video above?

  • @alexket8403
    @alexket84032 жыл бұрын

    the stardew valley OST made this even better :D

  • @random_precision_software
    @random_precision_software2 жыл бұрын

    Hi Adam, I'm in the middle of my 2d game, it's in URP and using 2d lights. Problem I've got is I want a light behind a sprite and only want the light to shine thru the window, which is alpha'd so it's transparent. Have you done a vIdeo of how to do this or could you do a quick one for us please? Thanks

  • @juliancorredor1128
    @juliancorredor11282 жыл бұрын

    How do you manage a player having different weapons? like, do you play the animation of your character and the animation of the weapon at the same time? or is the weapon embedded in the same character animation?

  • @AdamCYounis

    @AdamCYounis

    2 жыл бұрын

    The weapons are drawn into the same sprite as the character, yep. The way the character swings each weapon type is different, so it made sense to just draw them in directly.

  • @regaI
    @regaI2 жыл бұрын

    Someday I'll be as good as you. Thank you for all the inspiration you gave :)

  • @wedman101
    @wedman1012 жыл бұрын

    POG! New Vid:)

  • @kennyhubbell813
    @kennyhubbell8132 жыл бұрын

    I did a quick googling and could find no mention of Retrobox outside of a beta signup in 2017. Is there any plan to release it on the asset store?

  • @AdamCYounis

    @AdamCYounis

    2 жыл бұрын

    I had planned to release it as an asset in 2018, but put those plans on hold as I wasn't confident i could support a release version of the system while it was so coupled to insignia. Since the animator is so integral to the architecture of this kind of game, I didn't want to release something that wasn't really polished, optimised and feature rich. Retrobox still very much isn't, and works for my specific game, since I only maintain the parts I use as I need them.

  • @gareths
    @gareths2 жыл бұрын

    Is there a simple way of adding the freeze framing on hits for impact in fighting games like you had in the footage?

  • @AdamCYounis

    @AdamCYounis

    2 жыл бұрын

    The very very simple version is to set the timescale (Time.timeScale in unity) to 0 for 0.12 seconds. It's literally pausing the game for a moment, which you call when the hit lands. It's a lot more complicated than that once you try to manage pausing the game separately from the hit-stop, but that's the principle anyway.

  • @gareths

    @gareths

    2 жыл бұрын

    @@AdamCYounis thank you very much!

  • @ShiroNeko277
    @ShiroNeko2772 жыл бұрын

    You mad man

  • @rechrowm4276
    @rechrowm42762 жыл бұрын

    Uhm do you have an all purpose pallet that you would recommend that is in line with your pixel art style?

  • @AdamCYounis

    @AdamCYounis

    2 жыл бұрын

    I published a palette on Lospec called "Apollo" that I use as a general purpose option. Endesga32 is also great.

  • @t3ssel8r
    @t3ssel8r2 жыл бұрын

    Your description of the state behaviors sounds a lot like the `StateMachineBehaviour` components that can be added to Unity's animator states. Is there any reason you inherit MonoBehaviour? (do you make use of the MonoBehaviour messages?) I've been trying really hard to get the built in Animator to scale because I don't want to sacrifice/replicate all the visual debuggability it affords, so this video is a little scary. Of course in 3D I have an additional incentive to use the Animator because I have blends and transitions.

  • @AdamCYounis

    @AdamCYounis

    2 жыл бұрын

    I committed to Unity in 2016 because of its promise of custom editors, and one of the first things I did was make my own animator. So at this point, my solution (Retrobox) is so tailored to my needs that I don't find myself looking outside it, though I'm sure it'd be a huge benefit to me if I did. I've just accepted that there are wins and losses either way. I think for future projects, especially non-pixel art, the sheer amount of curves that find their way in visual polish would incentivise me to use the animator.

  • @supercyclone8342

    @supercyclone8342

    2 жыл бұрын

    If you still want to make use of Unity's animator but don't care about transitions, I highly recommend the animator video from Lost Relic Games.

  • @t3ssel8r

    @t3ssel8r

    2 жыл бұрын

    ​@@supercyclone8342 thanks for the recommendation. If it's the "Escaping Unity Animator HELL" video, I think I disagree pretty strongly with that approach (at least what was shown in the video), but it's interesting to see how others have dealt with the same organizational problem of scaling the character animator, and not in a way I would have expected.

  • @supercyclone8342

    @supercyclone8342

    2 жыл бұрын

    @@t3ssel8r Very interesting... That video basically saved my game and the method hasn't caused any issues. Though, I guess I don't remember what changes I made to it. Recently, I made my own game engine api for fun, so I have actually coded a basic animator from scratch before. I'll probably try something similar to Adam sometime soon

  • @idontknowWhatTosay8
    @idontknowWhatTosay82 жыл бұрын

    hey adam very informative video again! thanks. btw is there any chance that i can get ur aseprite INTERFACE?

  • @AdamCYounis

    @AdamCYounis

    2 жыл бұрын

    You can get the dark theme by downloading it from aseprite.org, or if you have the steam version of Aseprite just set your install to the "beta" track for access to version 1.3b and the dark theme will be in the Aseprite preferences already.

  • @it6642
    @it6642 Жыл бұрын

    It's kinda hard and interesting at the same time

  • @KeyboardKrieger
    @KeyboardKrieger2 жыл бұрын

    I really like the self made state machine with your own animator. Unitys solution is really crap. But seeing all those components and nested ifs...maybe consider using scriptable objects and guard clauses to make it way easier.

  • @Orionhart
    @Orionhart2 жыл бұрын

    Always a good day when Adam posts!

  • @6Pope9
    @6Pope92 жыл бұрын

    What is the difference between update and fixed update? What kind of stuff is happening in them?

  • @AdamCYounis

    @AdamCYounis

    2 жыл бұрын

    Update happens every time the screen is drawn, used for input and graphics. This could be literally any number of times per second depending on hardware, commonly targeting 30, 60, 120 or 144, though it will often fluctuate. FixedUpdate is designed for handling physics calculations, and runs an exact number of times per second (like 60).

  • @GeorgeKarala
    @GeorgeKarala2 жыл бұрын

    every time i watch him makes me want to make a pixel game but I don't have the experience to work in unity and I am a normal pixel artist

  • @prod.know-1487
    @prod.know-14872 жыл бұрын

    Godot just has this functionality. No custom scripts needed.

  • @6Pope9

    @6Pope9

    2 жыл бұрын

    AnimationPlayer am I right?

  • @joshcaladia
    @joshcaladia2 жыл бұрын

    playing stardew valley and then this video has stardew valley music in the background lol

  • @Eduardoperes01
    @Eduardoperes016 ай бұрын

    You use 100 pixel per unit?

  • @AdamCYounis

    @AdamCYounis

    6 ай бұрын

    That's right, yep

  • @beeleav
    @beeleav2 жыл бұрын

    big pog

  • @DrFross09
    @DrFross092 жыл бұрын

    First!

  • @SlangWay

    @SlangWay

    2 жыл бұрын

    😡

Келесі