Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

Best way to do a hand drawn animation?

Discussion in '2D' started by Pyrokinesis_, Aug 14, 2019.

  1. Pyrokinesis_


    Nov 20, 2016
    I want to create some hand drawn animations in unity. So instead of just putting a static sprite. The sprite will start with a blank and progressively draw the sprite.
    To achieve this I drew all the images (from blank to full and inbetweens) and used it as the animation.
    Is that the best way to achieve this? Are there other ways tools to accomplish this?

  2. Hyblademin


    Oct 14, 2013
    I think that the simplest way to do this is exactly what you're already doing. Obviously, though, it's tedious.

    Beyond that, my first instinct is to look for a GIMP plugin or something that could help generate the frames for your animation. I'm not very experienced with graphics applications, but maybe someone else will know of a plugin or application that does what you're looking for.

    There is definitely a shader-based solution for this. There might even already be info about this exact effect out there somewhere, but a little searching didn't turn up anything useful. Maybe I just don't know what to search for. In any case, I have a good idea of how I would approach this if I was set on a smooth, dynamic implementation of the effect you described, so for the sake of discussion I'll ramble a little about that.

    If you need to do a lot of these animations and want them to be exceptionally smooth without needing to create a ton of graphical assets, you'll need some considerable, focused development. I'll just say now that I don't picture this being worth the time unless you are very dedicated or have a lot of resources/budget. It should be more than possible, though. Here's what I have in mind:

    -Generate "timeline maps" for your animatable drawings which uses RGB or greyscale data to indicate the location in the animation timeline for each pixel to appear. This could reasonably done manually without too much pain (common brush tools and a skilled hand could be used to modify the albedo graphics), but a custom plugin to automatically apply sequential timeline data as color as you draw might simplify the process

    -Write a shader for your animatable drawings. The shader should accept the timeline map, and have defined an exposed "animation time" property. Code the shader to interpret the color data in the timeline map per-texel as a set of animation time thresholds, and to apply cutout for those which are above the value of the animation time property. If this functions correctly, you should be able to manually sweep animation time from 0 to 1 (or whatever max value) and see the drawing draw itself into the game space. After that, you only need to create a simple behavior to sweep the value at the appropriate time in the game

    -You could replace the animated doodle with a static sprite after the animation finishes, or you could keep using it so that you can modulate the drawing during gameplay for a really neat feedback effect that responds to certain triggers

    I think that I probably wouldn't be able to get this working without a good amount of suffering, and there are probably some pitfalls that make it less simple than I've presented it. That said, I'm confident in the general approach. There are already shaders that use threshold-based cutout for things like dissolve effects, the biggest difference being that they often compare with Perlin noise or something similar for a threshold map.

    I'm being pessimistic about its value because I really believe you would need a high demand for quality/quantity of the visual effect for this to actually save on development time. If you are passionate about the project, though, and especially if the project isn't intended to make a profit, then working through this and writing it up would make for a good article and a great contribution to the dev community, and you would probably have something worth putting on the asset store.
  3. Pyrokinesis_


    Nov 20, 2016
    Hyblademin excellent thought!

    The crux of your idea would work even now w/o creating the plugin and the shader. Although this would require some cleanup but it would still be more efficient than drawing and masking (which is what I did).

    Here's what i'll do ...
    1. Keep the ScreenToGif program handy.
    2. Open krita, setup everything to draw the thing in one shot.
    3. Turn on ScreenToGif to capture the drawing process.
    4. Paint!
    5. After some cleanup, extracting pngs for the animation and making them transparent, the sprite is ready.
    And the byproduct is that this would truely be a handdrawn animation no masking or other gimmicks.

    Ofcourse 1,2,3 can be combined in a krita plugin. 5. can also be automated to some extent. There are probably some batch tools that I can look into.

    Thank You!!!