1. Hey! Guest! The XXX GMC Jam will take place between August 24th, 12:00 UTC (Friday noon) and August 27th, 12:00 UTC (Monday noon). Why not join in! Click here to find out more!
    Dismiss Notice

Alternative to photoshop/illustrator (with keyframe animations)

Discussion in 'Game Design, Development And Publishing' started by Niels, Aug 3, 2018.

  1. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    686
    Hi everyone,

    I moved away from Adobe products a few years ago because of their ridiculous expensive subscribtion model.

    Last year I bought Affinity designer, that has almost everything I want from vector/bitmap software,(it's REALLY REALLY good) except for a timeline.

    In a perfect world I would want a (non subscription) program where I can draw in vector, and build a sprite sheet out of a animation timeline.


    Any tips?
     
  2. Nexusrex

    Nexusrex Nexusrex Games

    Joined:
    Jun 20, 2016
    Posts:
    206
    Well, not a vector artist. But as far as I know, Inkscape do have a timeline. Would love if someone can tell me if I'm correct or not.
     
  3. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    686
    Also read that krita has a animation tool, but that means I need to learn to draw lines ;)
     
  4. FoxxiLoxi

    FoxxiLoxi Member

    Joined:
    Feb 1, 2017
    Posts:
    14
    Last edited: Aug 3, 2018
  5. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    686
  6. FoxxiLoxi

    FoxxiLoxi Member

    Joined:
    Feb 1, 2017
    Posts:
    14
    Also, the same developers of Affinity Designer had this Draw Plus X8, which I love.

    http://www.serif.com/drawplus/.
    Affinity doesn't have a lot of the features that drawplus have and they still sell it. It's cheaper being that they consider it a Legacy Application. Here is a youtube video showing its features since they took it down.



    I actually felt Affinity Designer is a downgrade from this because of a lot of missing features.

    Animation Tut with Draw X8
     
    Last edited: Aug 3, 2018
  7. dannyjenn

    dannyjenn Member

    Joined:
    Jul 29, 2017
    Posts:
    242
    If you're correct then I'm not aware of it.

    I've made animations in Inkscape before, but I did it frame by frame, manually, and there was no way (as far as I know) to play it back and see what the animation looked like. What I did was I drew all the frames in Inkscape, and then when I was done I exported each frame to PNG, and then brought all the frames into GIMP as separate layers and I exported it as a gif animation. Then I watched the gif, and if I didn't like what I saw I tried to figure out which frame was the problem, then I went back into Inkscape, changed that one frame, exported it, brought it back into GIMP, and deleted the old frame. It was a lot of guesswork and took forever, and some of the animations still didn't come out looking all that great. But this is the only way it can be done in Inkscape, as far as I know. (If Inkscape does have a timeline feature, I'll need to look into it. Because it would make things so much easier...)

    edit - Oh, here we go. https://inkscape.org/en/learn/animation/ Inkscape does not currently support animation.
     
    Nexusrex likes this.
  8. Rayek

    Rayek Member

    Joined:
    Jun 27, 2017
    Posts:
    120
    I'd say try OpenToonz: vector and bitmap animation with spritesheet output, and it is completely free.

    Good vector drawing tools (better with stroke control thickness and so on than Affinity Designer in my opinion), the animation timeline is among the best out there, and the output settings include a spritesheet option with padding, scaling, and grid type controls. You will have to install FFMpeg and point OpenToonz where it can find it to render to spritesheets (set this up in the preferences).

    Animation can be done frame by frame and by cut-out (similar to Spriter). Deformation through meshes is also possible. Not nearly as powerful as Moho, but for game sprites it will more than suffice. Timeline can be changed to a horizontal version nowadays, and it's pretty easy to animate in. Professional-level animation controls it offers are of the highest level.

    It does import SVG files, although its SVG import is not at all perfect. Good enough to bring in outlines from Affinity and then colour and change the strokes. I would bring in your sprite as parts which can then be independently animated in OT. You could add bones for quick animation sequences.

    OpenToonz is not the simplest animation tool to learn, but not the hardest either. Once you know how it works you can fly in this app and produce animated sprites quickly.

    spriteoutput.png
     
    RichHopelessComposer and Niels like this.
  9. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    686
    thanks, this sounds like what I am looking for!
     
  10. Rayek

    Rayek Member

    Joined:
    Jun 27, 2017
    Posts:
    120
    Try it out, I think you might like it. Couple of notes:

    - SVG import is not that great as I mentioned earlier. I tend to bring in outlines in parts from external vector apps if needed, and colour them in OT, as well as use the thickness tools to decide on stroke thickness.

    - although it seems as if there doesn't seem to be a gradient tool, the way it works in OT is as follows: open the Vector fills and strokes (Style Editor) and apply the gradient fill (one is linear, the other circular). It's more limited than Affinity Designer, but workable. There's a nice shadow/highlight effect as well. The other way is to use the FX schematic, but this takes more effort.

    - if you are looking for layer blending, transparency, and other visual effects, you will have to use the FX schematic. This is very powerful, at the expense of usability compared to the simplicity of layers. It's not difficult to use, but if you've never used a nodal compositor before, it may take some practice. It's extremely powerful, though, and everything is non-destructive.

    - visual FX are not rendered on the 'normal' canvas, and have to be previewed by clicking the eye icon at the right top.

    For example, to add transparency to an object/layer, you create a node graph like this:

    2018-08-11 00_11_41-Fade Lens.png

    Anyway, many tutorials on YouTube.

    In case you hadn't found it yet, the latest builds with fixes and new features can be downloaded here:
    https://github.com/opentoonz/opentoonz_nightlies/releases
     
    RichHopelessComposer likes this.
  11. RichHopelessComposer

    RichHopelessComposer Member

    Joined:
    Jun 20, 2016
    Posts:
    1,211
    OpenToonz is great, but it's dense, and feels really geared toward traditional Japanese studio-style animation, which makes sense, since it's apparently an open-source offshoot of what Studio Ghibli uses. I'd try it, like Rayek suggested, but if it's too much for you, Krita is another free alternative that feels more aimed at single hobbyists to me that you can try out.

    Edit: Ah, I see you mentioned Krita already, hahah. It's simple and pretty good.
     
  12. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    686
    But krita isn't really geared towards vector graphics right? To my knowledge it's more of a digital painting program.
     
  13. RichHopelessComposer

    RichHopelessComposer Member

    Joined:
    Jun 20, 2016
    Posts:
    1,211
    I thought Krita was doing vector animation now too, but I could be wrong. I've only used it for traditional raster animation.
     
  14. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    358
    It’s too bad affinity doesn’t do this as it’s pretty good and cheap.
    You should put in a request. I will also.
     
  15. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    358
  16. Rayek

    Rayek Member

    Joined:
    Jun 27, 2017
    Posts:
    120
    Unfortunately not (yet?): the animation timeline is quite nice for bitmap-layer based animation, but cannot be used for vector layers in Krita.

    That said, it is possible now to import SVG into Krita. Krita's SVG import is light-years ahead of OpenToonz, so you could import your Affinity Designer assets into Krita and after conversion to raster layers, animate them. But frame-by-frame animation only, I'm afraid (aside from transparency tweening).
     
    RichHopelessComposer likes this.
  17. Rayek

    Rayek Member

    Joined:
    Jun 27, 2017
    Posts:
    120
    You are not the first one (or the last one) to request an animation timeline in Affinity Designer and Photo. The developers have responded a while ago that they are planning to add GUI prototyping animation features, but a timeline doesn't seem to be on their roadmap for a very long time (if ever).

    Because the Affnity team has been focusing so much on getting their InDesign alternative Publisher out of the door, they haven't really been putting a lot of effort in fixing and updating many of Designer's and Photo's features and missing functions. Very basic things that have been promised since the first release have still not been implemented so far - 4 years later.

    Here's hoping they will improve on this after Publisher is released. Development seems glacial this past year.
     
    Toque likes this.
  18. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    358
    Yeah I havnt seen an update for some time and the last wasn’t a huge improvement.
    It really isn’t geared for game dev. Great for illustrations in vector.

    I’ve kind of swithched to pixel art so don’t use it that much anymore.

    For simple things I prefer using Graphic and then Pixel Edit.
     
    RichHopelessComposer likes this.
  19. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    686
    I switched from pixel to vector, so I already have pyxeledit and Aseprite :)
     
  20. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    686
    That would be the same as using spriter/spine to animate my sprites (which I'm doing at the moment, but I don't like the puppet animations much.)
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice