Advanced Animations Tool (using Unity)

Guides about mapping and everything Teeworlds related.

Dr. Jekyll
Posts: 25
Joined: Sun Apr 10, 2016 8:40 pm

Advanced Animations Tool (using Unity)

Post by Dr. Jekyll »

Advanced Animations Tool
written by Dr. Jekyll

I made tool to make animating complex quads easier.
Its an editor extension for the Unity3D Editor (free)

Because its in Unity, you can do a few important animtion things like scrubbing the timeline and constructing parent-child hierarchies, as well as full undo support.

My editor Unity package here: ... ckage?dl=0

In Unity, go to "Assets > Import Package > Custom Package" and import my package, then go to "Window > TeeQuads" To open the extension

Click "Create new quads from image" and browse to your mapres, then choose where to import to in the unity project (i recommend creating a folder for each quad, because it creates a bunch of other assets)
The editor will automatically slice your mapres to create a bunch of quads.
(and add a default "Tee for scale" so you know how big your stuff will look in Teeworlds.)
Tee1.jpg (239.69 KiB) Viewed 3971 times
[The new quads might not be visible in the view, select the object in the "Hierarchy" window and press 'F' to move the viewport camera]

I recommend having 2 viewports for working on quads, one should be a "Back" ortho view (this represents the teeworlds view) and a perspective view (you need to move them towards/away from the camera) You can click the parts on these gizmos to rotate the view (click the center to switch between ortho and perspective), or Alt+left-click in the viewport to rotate freely
views.jpg (3.76 KiB) Viewed 3971 times
I suggest naming all the quads for clarity.
You should move them forwards and backwards in the perspective view to determine draw order (eyes infront of body, etc).
You can sort them into a parent/child hierarchy by dragging them un and down the list ("Hierarchy" window [on the right in image, may be on the left in default layout] - really important for making complex animation, child objects 'inherit' a parents motion, without need to be animted themselves)
Naming and hierarchy changes should be done before you start animting, making changes later will result in errors (fixable - see blow)
You can also scale them to make them bigger/smaller if you need
Move / Rotate / Scale buttons are in the top right of the screen
Tee2.jpg (203.53 KiB) Viewed 3971 times
Now go to "Window > Animation" to open Unity's animation view. You can scrub the timeline back and forward to change time
Move the quads in either view to begin animating. The extension will export movement on X and Y (up, down, left and right in the "Back" view) and rotation on the Z axis, and color changes (The color swatch on the right - you may have to expand the material block to show it)
You cannot export scale changes. If you need to adjust the scale, make sure you turn off the red record button in the animation window
Tee3.jpg (290.49 KiB) Viewed 3971 times
Tees.gif (423.98 KiB) Viewed 3971 times
To export to a tee map, change the TeeQuads window to "Modify Map".
Click "Load File" and browse to your map. You should set the map up beforehand with a quad layer ready to accept the new quads.
Drag the quad object (from the "Hierarchy" list on the right) into the correct layers slot, and click Save.
That's all!
Note that if you make changes in Teeworlds, you will need to reload the map in unity.
Also note that you cannot save a map if it's loaded in the Server application (sharing violation), but you can save when its open in the tee editor
The editor will not overwrite any existing envelopes in the map file, including ones it creates when you export. If you repeatedly export your animation it makes new envelopes each time. The "Clear All" envelopes button deletes all envelopes from the map, so you can export again.
For this reason I strongly recommend creating your animations into a blank map, which you can later Append into your real maps (so you dont accidently delete other envelopes).
Export.jpg (29.58 KiB) Viewed 3971 times
Other buttons in the editor:

Click "Re-import image" if you make changes to the source mapres image
Click "Regenerate Quads from image" to delete quads and revert to the automatic sliced layout.
Click "Make all keys linear" to change all curves in the unity animtion to linear. My exporter only sets linear curves in teeworls envelopes, because alot of the key blending you can do in Unity doesnt translate to teeworlds, and using fancy curves in unity might not apply correctly after export
Tee6.jpg (65.08 KiB) Viewed 3971 times
Click "Edit Quad Points" to open another window.
Tee4.jpg (88.31 KiB) Viewed 3971 times
In the window:
  • Modify the texture placement of the quads by dragging the corner points.
  • Drag the green points to move all 4 corners (these are not the same as the pivots in the tee editor, just helpers to allow moving all 4 at once)
  • Hold Control while dragging a corner to Snap points
  • Right-click a green point to Delete a quad (you can also just press delete while selecting one in the viewports)
  • Right-click an empty space to add a new Quad
  • Hold Alt and left-click to clone a quad (creates the new quad in exactly the same place)
  • Toggle "Show point colors" to color points (see below)
  • Toggle "Update Quad on UV change" to make the quads in the scene view change shape to match changes in this window
In the viewports
  • Modify the Shape of the quads by dragging the corner points.
  • Move quads by dragging the green points
  • Hold Shift while moving the green points to adjust pivots (These are the pivots) [note: this will behave a bit wierd if you have changed the scale & hierarchy]
  • Hold Shift while moving corner points to change texture placement (mimicking tee editor)
  • Hold Control at the same time as Shift-dragging corners to 'snap' texture placent to 25% intervals (useful for creating tiling texture quads, not that useful for animation)
  • Hold Control to Snap points
  • Click and drag to box-select many points at once (can move and change texture on many points)
  • When box-selecting points, you can modify the point colors using the color swatch in the top-left corner of the viewport

If you ever change a quads name, or alter the hierarchy after you have done some animation, the anition will break, shown in the the unity animation window with yellow text (see inset image)
To fix this, click "Fix Animation Hierarchy" to open another window
Tee5.jpg (57.8 KiB) Viewed 3971 times
The Left column "Object Path" shows what the animator thinks are the quad object hierarchies
The middle column "Quad Object" contains references to the actual objects
The left column show how many animated properties are preset for each object (position x, y, z, rotation, color etc [dont worry about this - debug])
Green fields mean the object can be loacted by the animtor, and everything is fine
Red fields mean the object has changed. Drag the quad you changed into the slot in the middle column to show the animator where the object is now
The fields turn Yellow to show that you have modified one.
Click "Save" to update the animator

Lastly theres a feature that will import quads from a tee map into unity
Animation is not imported (its impossible to reconstruct a hierachy animation going from tee -> unity) and will not be preserved when you export back to teeworlds
This is mainly for making adjustments to static quads, eg to change point colors in a more user-friendly manner

In the "Modify Map" screen, expand the quad layer you want to import, to reveal the button
Click "Load Quads into new Object" and you will be prompted to select the image used by the quads (again, create a folder for all the assets).
Tee7.jpg (263.95 KiB) Viewed 3971 times
A couple of final points regarding envelopes:
Each animated object creates a new envelope, if you have multiple objects that can use the same envelope, you can tell the exported to copy envelopes from other objects.
With any quad selected, on the right of the screen is a block titled "Copy Envelopes" with 4 modifyable properties.
Drag another object from the Hierachy window into "Copy Position From" or "Copy Color From" to have this quad copy that quads envelope. You can also adjust the timing offsets with the "Pos Env Offset" values (Pos TO and Color TO in the tee editor)
Unfortunatly, this doesnt actually make them update to show the copied animation inside Unity, you just have to pretend until you export.

If you have one quad as a child of another, and you dont directly animate the child (but the child moves as a result of the parent being animated), the exporter automatically assumes it should copy the parents position animation (color is not automatically copied) [Note: you need to make sure the quad pivots are aligned for rotation to look good]
[Example: The tee's hand (gif above) is a child of the pickaxe. The pickaxe is animated to go up and down, but the hand is not itself animated]

Note about the unity editor layout
When you first install Unity, it's probably going to have a different screen layout to my images. in the top right of the screen theres a button (possibly says 'Default') that lets you change the layout - '4 split' will arrange it similar to mine

Note about errors
If you have the console open, sometimes errors appear while using this editor, none of them actually seem to stop it working though, and you can just ignore them (hopefully). The only exception is the sharing violation mentioned earlier (change map in tee server app)

Apologies if this is a bit over-the-top for a 'simple' animtion tool (unity install is not small, means learning the unity interface) but since it's maybe only going to used by a few serious map artists its probably fine.
Maybe one day I'll write it directly into teeworlds, but since theres no Undo, or quad hierarchy, or scaling, or box select, or timline-scrubbing.....

Also I dont really C++
Last edited by Dr. Jekyll on Wed Jul 12, 2017 12:55 am, edited 1 time in total.

Posts: 141
Joined: Sat Dec 27, 2014 3:29 pm
Player profile: Vasten100
Mapper profile: Vasten100
Clan: iABC

Re: Animtion Tool

Post by Vasten100 »

Nice work, i'll try it out :)

Just a question, is it possible to export/import to after effects?
Where's your core message?

User avatar
Contributor Team: Skin Database Crew
Posts: 748
Joined: Sat Apr 30, 2016 5:34 pm
Location: Finland
Player profile: Mokuz
Mapper profile: Mokuz
Clan: Legendary

Re: Animtion Tool

Post by mokuz »


User avatar
Retired Administrator
Posts: 3314
Joined: Mon May 05, 2014 2:30 pm
Player profile: deen

Re: Animtion Tool

Post by deen »

You're crazy, this is great. I'd still love it for a tutorial map if it doesn't kill performance.

User avatar
Posts: 43
Joined: Tue Oct 28, 2014 8:45 pm
Player profile: Kintaro*
Mapper profile: Kintaro

Re: Animtion Tool

Post by Kintaro* »

deen wrote:You're crazy, this is great. I'd still love it for a tutorial map if it doesn't kill performance.
Tutorial Map?

@Dr. Jekyll : This is so nice! If someone told me about this i wouldnt believe it! How did you get the idea to use Unity3D Editor?

User avatar
Posts: 1743
Joined: Tue Feb 24, 2015 7:28 am
Location: Catalonia
Player profile: Ryozuki
Mapper profile: Ryozuki
Clan: Unique

Re: Animtion Tool

Post by Ryozuki »

Nice tutorial :o
Kintaro* wrote:
deen wrote:You're crazy, this is great. I'd still love it for a tutorial map if it doesn't kill performance.
Tutorial Map?

@Dr. Jekyll : This is so nice! If someone told me about this i wouldnt believe it! How did you get the idea to use Unity3D Editor?
If this animations would be put together with Timakro's ddrace tutorial mod, maybe something good could come out.

User avatar
Retired Administrator
Posts: 3314
Joined: Mon May 05, 2014 2:30 pm
Player profile: deen

Re: Animtion Tool

Post by deen »

Kintaro* wrote:Tutorial Map?
What timakro is working on: viewtopic.php?f=3&t=3771

Dr. Jekyll
Posts: 25
Joined: Sun Apr 10, 2016 8:40 pm

Re: Animtion Tool

Post by Dr. Jekyll »

Vasten100 wrote:Nice work, i'll try it out :)
Just a question, is it possible to export/import to after effects?
Better to just use some screen capture software of actual teeworlds
Kintaro* wrote:@Dr. Jekyll : This is so nice! If someone told me about this i wouldnt believe it! How did you get the idea to use Unity3D Editor?
It's my amateur game dev client of choice, so I'm well familiar with the IDE
Id already played around a bit using it to edit tile layers early on in the 3D tileset process, and this seemed like a smart thing to branch into

Posts: 202
Joined: Sun Apr 26, 2015 10:38 pm

Re: Animation Tool

Post by Oblique. »

Wow, this is amazing.
I actually thought you just used a ton of frames to make an animation and flash through them using a color envelope, which is the way I used to do it. But this is SO MUCH BETTER (im going to cry).
A is for Apple.

User avatar
Posts: 414
Joined: Mon May 05, 2014 6:05 pm
Location: Germany
Player profile: timakro
Mapper profile: timakro
Clan: υηιqυє

Re: Advanced Animations Tool (using Unity)

Post by timakro »

Incredible, nice work!

Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests