Art, Animation, and Implementation


  • Jammer

    @richtaur

    I want to start by thanking you for taking the time to express your thoughts and all the experience you’ve shared with this community; I have benefited greatly from it.

    As I have been listening to your art tips and have delved into many articles/videos/tutorials you have suggested, certain questions concerning art, implementation, and animation have been on my mind that I feel you may be able to shed some light on.

    Art:
    During your process, knowing that you are designing a specific game asset, how much planning do you do before actually touching pen to paper, or stylus to tablet? And would you ideally do more planning, or less?

    Implementation:
    Recently I’ve been struggling greatly with the implementation of bringing my “art” into my “games”. I am attempting to utilize the ECS bags of data approach you and Geoff have spoken about in all the aspects of my game development, but I get caught up in these deep objects with tons of properties, specifically my ‘animate’ component, has like 20-30 things depicting where it’s grabbing the frame from on the sprite sheet, how big it is, how long before it changes frames, how many frames it goes through, tweening stuff (which I barely understand) etc… Basically, when you were using your HTML5 engine, did you favor a more ‘helper function’ approach that took a bunch of parameters based on multiple components of an entity, that ran through an animation system? Or was there like some piece of your engine dedicated to all of your animating needs, like tweens, rendering, etc.?

    Animation from an art perspective:
    You have spoken about a ‘doll animation tool’ you designed to help you animate your sprites, but my question is if you did not have such a tool, would you, or do you suggest drawing a full animation sequence in one file, or .png or what have you? Or would you draw it on paper then draw each individual frame digitally? Or some combination of the two? What has worked for you to bring your animations together, or if you have any tips on animation as an art form in general I would greatly appreciate it.

    Sorry for such verbose questions. I recently have just hit some walls in my own development, and although the internet is littered with information, I just feel that since you guys so specifically and brilliantly accomplished what I am essentially trying to accomplish ( HTML5 game development, small team (or no team), and a deep case of ‘not invented here’ ) I just look to you both as a beacon of light in an otherwise dark and hazy world.

    Anyway, thanks so much for any and all your time, and I appreciate all of your input!

    Thanks!


  • LDG

    @Vox said:

    I want to start by thanking you for taking the time to express your thoughts and all the experience you’ve shared with this community; I have benefited greatly from it.

    Great to hear, I’m happy to do it! These are fun questions so I’ma answer in separate posts…


  • LDG

    During your process, knowing that you are designing a specific game asset, how much planning do you do before actually touching pen to paper, or stylus to tablet? And would you ideally do more planning, or less?

    Personally I think it’s best to begin drawing out ideas right away. The reason for this is because anything that exists only in your head is intangible to the point of being useless, if not distracting. Even if your first handful of drawings aren’t satisfying, you will be making progress towards finding your design by revealing what you do not want the design to be. Here’s a chicken I did recently:

    Chicken

    The above chicken is too generic and isn’t rooted in the AWL universe, so I’ll be iterating again on the design, thinking more about wizards and lizards while doing it. But we have a chicken we can use for now, and there are things that I like about it that I can bring to the next pass. Find the Design by Paul Richards is related and enormously insightful.


  • LDG

    Basically, when you were using your HTML5 engine, did you favor a more ‘helper function’ approach that took a bunch of parameters based on multiple components of an entity, that ran through an animation system? Or was there like some piece of your engine dedicated to all of your animating needs, like tweens, rendering, etc.?

    Djinn has a dedicated rendering system with a scene graph, comprised of visible entities we called “Views”. Each View could render something, for example a solid rectangle, or a single image. All of the animation (such as cell-based sprite sheets) and tween data lived either in these View objects or in their own data files. This was great because Geoff would live in the game logic, and I would mostly do visual code, and the two would barely ever conflict with each other.

    Game logic and visualizations can get hopelessly tangled together, so sometimes it might be best to isolate them. For example, on some projects I would focus on game logic and barely touch the visuals until the project was largely feature-complete and I knew what all I’d need to visualize. When things get too complicated, it’s often good to take a step back and do some culling.


  • LDG

    do you suggest drawing a full animation sequence in one file, or .png or what have you? Or would you draw it on paper then draw each individual frame digitally? Or some combination of the two? What has worked for you to bring your animations together, or if you have any tips on animation as an art form in general I would greatly appreciate it.

    Funny you should ask about animation because I was animating just today! I do all animation digitally, but sketching out gestures and motions on paper is a good idea. Lately almost everything we do uses cell-based sprite sheets like this:

    AWL2 raga run frames

    When animating, I often think in terms of keyframes. I’ll start with the first frame I want, so for example the far left frame above. The next frames are made based directly on that first frame (for example in Photoshop I would copy the whole layer and redraw just the moving parts). The following frames are the left and right stride keyframes. Once I have just these , I’ll display the animation either in-game or with a quick tool, and see where it’s at.

    Once the cycle is satisfying, bouncy, and “feels” like motion, , you’ve got a good structure to work with. Kinda like an underdrawing when sketching! From there additional inbetween frames can be added if desired.

    Art itself is a vast ocean, and animation could be seen as taking that to scale, so it’s just this incredibly overwhelming thing. Be careful not to get sucked up into animation – keep in mind that it is an optimization step, that is, it’s not completely mandatory. One might spend an inordinate amount of time animating a game object, only to later realize the game object needs to get cut. So IMO it’s best to push off animation until later in development.

    Also, be on the lookout for ways you can make animation easier via code. Drawing a bunch of animation by hand is expensive, but maybe a similar effect could be achieved with tweening, squishing, distortion, particles, or many other visual effects. ya know, shaders 'n stuff!

    AWL2 raga run cycle

    Thanks for the questions, this was fun :)


  • Jammer

    @richtaur

    Firstly, wow! Thank you so much for this, I have to say you and @geoffb are beyond helpful, as well as other members of this community. I am so glad and grateful to have such awesome input from people of your experience and prestige.

    Okay so in regards to your first answer:
    I feel the “you will be making progress towards finding your design by revealing what you do not want the design to be.” is wonderful advice. I feel like I get discouraged quickly with whatever I’m drawing/creating because it is not what I envisioned it to be, but that in and of itself can be useful for at least better identifying what I do not want in the final product. Also, YES, you recommended Paul Richards’s Wield and Weld tutorial, and gosh was it an eye opener- I will look into “Find the Design” as well, as I am sure it is chalk full of value.

    Second response referring to implementation:
    Decoupling the animation/rendering from the logic is something I’ve absolutely been trying to accomplish, but do not yet grasp. Your “Views” approach sounds really attractive, but I guess where I get lost in all of this is, do you just structure your entity with some cell coordinates and feed them to a specific “view” function? I mean I can get a sprite to have an idle animation by hard coding and assigning “when in the idle state wait 150 milliseconds then go to the next frame , then wait 250 ms, grab next frame, etc…” to some property that belongs to the entity itself, but I’m guessing that is likely not how you guys did it at all. I will really dive into the concept of separating my logic from my rendering like you’ve stated, because gosh that sounds amazing to be able to build a game, then just add animations/effects/visuals as a separate process, but currently logic and rendering are basically, as you put it, hopelessly tangled together. And thank you so much for breaking some of that down for me.

    Final response referring to animating directly:
    Wow, this is extremely awakening: “Be careful not to get sucked up into animation – keep in mind that it is an optimization step”. As video games by definition are an extremely visual experience (other than I’m sure some outliers that are directed towards other senses) I would spend an immense amount of time animating my roughest sprites for every prototype I’m doing. Although this is good practice I’m sure, it is quite stifling as I really do want to complete a game. This sounds like it works extremely well especially if I figure out how to separate my animation from my game logic, so just more reason to really tackle that facet of development.

    To close, again, thank you very much. These examples and art that you’ve provided are invaluable. I’ve been swimming in an ocean of tutorials for a couple years now, and it is just so refreshing to have some direct feedback to some of the questions I’ve had, and in such very encompassing manner. Above all else thank you very much for your time as I know you guys have a lot going on.

    THANKS!


  • LDG

    @Vox said:

    do you just structure your entity with some cell coordinates and feed them to a specific “view” function? I mean I can get a sprite to have an idle animation by hard coding and assigning "when in the idle state wait 150 milliseconds then go to the next frame , then wait 250 ms, grab next frame, etc.

    Yes pretty much. The model has very basic information, like X/Y coordinates, which the View adheres to, for example moving a character around on the screen. That’s about all the model/view need to know about each other, at least at first. If this is the way you’re going, I’d really suggest removing almost all visual flair and animations until the relationship between model/view is solid.

    We understand that overwhelmed feeling very well :) Keep it up, it sounds like you’re pretty far along!


  • Jammer

    I know I likely come off as smarmy, but I can’t help but say you guys are amazing. Thanks for this reply, and all your input. I will keep all this in mind moving forward with my development. It is just extremely motivating to communicate with the people you look up to, especially when it is directly applicable to achieving a often times seemingly intangible dream. Thank you LDG, you guys rock!


  • LDG

    No smarm detected! Thanks for the kind words :)


Log in to reply