Animation Editor

[stauzs]

Hello,

 

I want to inform you about huge update for the MightyEditor.

 

Most important feature is keyframes based animation editor.

 

There are 2 different timelines - one big - for project in general. And second one seperate for the objects.

If you want to create the game - you won't need main timeline as it meant more for a movie clip creation.

 

here is a tutorial - how things works: http://mightyfingers.com/tutorials/animation-editor/animation-basics/

 

* to use created movie in the code use something like this:

var character = mt.create("character");mt.createTweens(character);character.mt.movies.run.start() // assuming you have animation named "run"

 

 

in this case movie.run is special TweenCollection instance - bascially array of tweens that starts playing at the same time

atm. TweenCollection has only start / stop / pause / resume methods

 

I'll look into Phaser 2.2 as tweens have been improved very much and has built-in support for timeline - if all turns out well next update will contain updated phaser

* atm. editor uses 2.07 version and projects can use any 2.0 - 2.1 version - by default projects have same version as the editor

 

another changes:

• all new projects will start with a demo state ( js/state/demo.js )
• added rotation and "move anchor" (actually it moves group while keeps children in a place) gizmos for a group object
• now it's possible to add children to the sprites in the objects panel
• added grid opactiy option
• added keyboard shortcuts 1-5 for tools: 1 - select tool, 2 stamp tool.. etc
• added cmd + S - as "save file" in source editor for osX users ( can somebody confirm that it works? )

 

* changes in mt.helper API:

mt.create will now return phaser object - sprite / group / tilemap layer - depends what you have created in the map editor

now all mighty editor data will be assigned to the created sprite as mt property. e.g. 

var character = mt.create("character");character.mt // from now on all editor data will be heremt object structure:{self: // refernece to the Phaser objectdata: // data used to create the Phaser objectchildren: // cildren objects treemovies: // movies created}

Edited December 8, 2014 by stauzs
typo in the movie example code

[shmikucis]

Here are some time-lapse videos about how to animate character: idle, run, attack http://mightyfingers.com/videos/#animation_editor