No announcement yet.

Need advice for doing 2D animation in code (pivots, spaces, etc)

  • Filter
  • Time
  • Show
Clear All
new posts

    Need advice for doing 2D animation in code (pivots, spaces, etc)

    Hi guys,

    I have some questions regarding UPaperSpriteComponent.

    I want to make a Pawn made of several UPaperSpriteComponents. I will animate those parts using some animation data I have (so I will do the actual tweening in code). So, I will use one UPaperSpriteComponent for each part.

    My animation data is computed in "texture space" I mean, pixels.

    First question:
    - How can I map between "texture/pixel-space" and "unreal space", I guess I should use UnrealUnitsPerPixel, right? Or should use something else?

    Second question:
    - Regarding pivot points ... I have read somewhere that these are in "texture space", and when I try to change them in Sprite editor it does seem this assumption is true, right?

    Third Question:
    - Regarding pivot points ... If I need the same Sprite with different pivot points ... should I create another instance of the Sprite? (UPaperSprite) ... I guess so because there is no way of setting the pivot point in the UPaperSpriteComponent

    Fourth Question:
    - Regarding performance ... I have planned to have some "Animation Manager" which will store the animation data parsed. Each animated Pawn will get the info from this manager and will build an array of all possible UPaperSpriteComponents, dettaching/attaching them depending on the animation being played and updating (tweening) using the Tick function. I guess I have to Register / Unregister the components manually too, right?

    Okey, its enough for now.

    Let me know if all these makes any sense, any advice will be wellcome!

    Thanks a lot

    WIP Save the princess !

    Hi Dredok,

    1) There are various 'space conversion' methods like ConvertTextureSpaceToPivotSpace defined in UPaperSprite that handle everything for you, but they're only available in editor builds, since most of the other spaces are 'baked away' at runtime so there is only final render geometry in uu space and UVs in texture 0..1 space.

    2) Pivots don't exist at runtime, the sprite render geometry is created so that the pivot is always at 0,0,0 in local component space. However, sockets work at runtime if you need to define multiple points in your sprite for reference. There were some bugs in 4.4 with editing sockets if Pixels per UU was not 1.0, which are fixed in 4.5 (they still worked fine in the level editor or at runtime, but they appeared at the wrong position in the sprite editor, and the transform gizmo felt 'sluggish').

    3) I'd suggest either using sockets, or using dummy scene component nodes, e.g., if you want to make a sprite bob up and down, then make a scene component as the parent node, and attach the sprite as a child. You can then animate the relative position to the parent to make it move up and down or bob around. If you need 'setpoints', e.g., start at X and move to Y, then use a socket for each set point. Normally sockets are used in the opposite sense, where you use them as a point to attach something *else* as a child, but they're really just a reference point in component space that you can query using the USceneComponent API, so you can read them and use the -ve of that value as an offset against your parent instead.

    4) You could create and destroy the components manually, or you could create them all but hide the ones that shouldn't be visible at frame 0, and just manage the visibility flags instead. If you're just changing what sprite asset is visible at a given point in the hierarchy, you could also just change out the sprite using SetSprite, rather than have two components.

    This sounds pretty cool, are you working on importing data from an external tool like Spriter or Spine, or do you have your own custom setup in Maya or something?

    Michael Noland
    Last edited by Michael Noland; 09-24-2014, 10:51 PM.


      Hi Michael,

      Thanks for the input!

      Actually yes, I'm writing a tool for importing data from Spriter!

      Today I'm happy because I made several progresses, finally assembled my first character ! (no animation but it should be trivial from now, because I only need to lerp angles and locations for the bones!)

      I'm using UBoxcomponent as "bones". I do not know how could I do it with sockets, for attaching sockets I would need an initial sprite right?

      I would like to make an editor plugin for automatically setting the Pivot points of my Sprites -I think it is the only way for doing it automatically, right?-

      I have already the UPaperSprites imported from TexturePacker but I still need to set the pivot point, depending on animation data. Spriter support tweening the pivot points but my animations do not need this, so just setting 1 sprite with custom pivot point will be enough. For doing this I think of several alternatives:

      a) doing it manually (thats what I'm doing right now) :P

      b) modifying UPaperJsonImporterFactory to take into account my animation data (another file) and set properly the pivot points

      c) make my own UFactory plugin, which could create a copy of a base Sprite (the imported from TexturePacker) with my custom pivot points

      d) modify the .paper2dsprites generated by TexturePacker in order to set the pivot points

      I think the best alternative is c), because I will let both TexturePacker products and Unreal Engine basecode untouched.

      What do you think? any suggestion here?

      WIP Save the princess !