Giter VIP home page Giter VIP logo

animato's Introduction

animato

animato

animato is a program made with love2d that let's anyone create animations based on in-betweening ('tweening') between various keyframes. Each keyframe has rotation, scale, and position information about each image. The workflow is roughly this:

  1. Replace the images in the images folder with those of your own
  2. Open animato and duplicate/remove images until you have the ones you need for your animation
  3. Click and drag images and make the next keyframe (by pressing 'k')
  4. Press play to watch your images transform from one keyframe to another (press 'p' to play)

sample idle animation

Save your animation to a file by pressing Ctrl+S and entering a name

For a comprehensive list of keyboard shortcuts and mouse controls, hold the space bar down in animato.

Installation

You must first install or have unzipped love2d (www.love2d.org). To see how to run animato with love2d refer to http://www.love2d.org/wiki/Getting_Started .

Changing the draw order

By default, animato will draw each image in the order it was loaded. This may not be satisfactory--to change the order, start by pressing the 'n' key. This will clear the current draw order and you will see all of your images greyed out. change draw order Now click on each image in the order you'd like animato to draw them. They will turn white as you click them. When you're happy and have clicked all the images, press 'm' to set the draw order.

Changing keyframe easing function and timing

By default, images will transform to the next keyframe in 400 milliseconds linearly. To change the time it takes to tween from one keyframe to another, first click on the keyframe to make it the active keyframe. Now enter the time in milliseconds you want the tween to last (using the number line, not keypad numbers) and press enter.

To change the easing function, select a keyframe and press the arrow keys. To quickly return to the linear function press '0' on the keypad.

Output

Each animation is saved to a file that has the name you give it after pressing Ctrl+S. The output is saved to whichever directory you run the program from. To see the animation in another program (perhaps a game you're making), copy the load and draw functions from animato's main.lua into your program.

Bugs/Gotchas

animato doesn't support changing images between keyframes. Please do not add or remove images between keyframes.

Credits

Thanks to kikito for tween.lua https://github.com/kikito/tween.lua

Thanks to ChillCode for the saveTableToFile code: http://lua-users.org/wiki/SaveTableToFile

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.