{"author_link":"\/users\/la-mecanique-du-plastique","author_name":"La mecanique du plastique","author_uid":"la-mecanique-du-plastique","comments":[],"epoch":1493631524,"event":"LD38","format":"md","ldjam_node_id":23002,"likes":7,"metadata":{"p_key":"88430","p_author":"La mecanique du plastique","p_authorkey":"1022081","p_urlkey":"301029","p_title":"Den postmortem #3 : pixel art animations","p_cat":"LDJam ","p_event":"LD38","p_time":"1493631524","p_likes":"7","p_comments":"0","p_status":"WAYBACK","us_key":"1022081","us_name":"La mecanique du plastique","us_username":"la-mecanique-du-plastique","event_start":"1492732800","event_key":"69","event_name":"LD 38"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD38","removed_author":false},"_superparent":9405,"_trust":2,"author":22081,"body":"In parallel to [illustrating the environment](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-2-environment-and-ambiance) for [Den](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den), we had to make little frightened animated men. As we never did pixel art animations in such a short time, we rapidly realized that our habitual creation tools weren't adapted to produce quick rough sprite animations. A quick search lead us to [Piskel](http:\/\/www.piskelapp.com\/), a browser-desktop-opensource-freedom app that is probably an obvious tool for a lot of you, but were a amazing discovery for us.\n\nOnion skin, layers, realtime preview, shortcuts, auto color palette, local saves and all-featured imports\/exports. It took us a few minutes to embrace it.\n\n|![piskel_fall.gif](\/\/\/raw\/146\/5\/z\/30cd.gif)|![men_spritesheet_big.png](\/\/\/raw\/146\/5\/z\/30ce.png)|\n|--|--|\n||\n\nThe men animations are 32x32 pixels, in 8 colors. There is three runcycles, an idle, a fall, a fall reception, a cornered idle, a shouted when cornered reaction, a standing up and taping code.\n\nTwo tips were used for the runcycle : the arms were separate layers, allowing three quick variations onto one base. And taking advantage of the limited details, only the half of a run cycle is made : the character always use its left foot. It creates a pretty much fluid cycle for 5 frames :)\n\nThe implementation were pretty straightforward. Every states are based on a few inputs (mainly velocity, vertical velocity and desired velocity), the runcycles are switched using a randomized parameter on an enter state of a StateMachineBehavior. The run animation speed is connected to the character velocity, which is slightly randomized for every character.\n\n|![men_animator.png](\/\/\/raw\/146\/5\/z\/30d2.png)|![men_animator_run.png](\/\/\/raw\/146\/5\/z\/30d4.png)|\n|--|--|\n\nWe often duplicated frames in Piskel in order to have a direct control on the animation structure and rhythm. As a result, the files contains multiple data that could have been stripped away. It wouldn't be the most efficient way to make the spritesheets, but in these time conditions and with the microscopic weight of the animations, doing that way allowed us to integrate the animations in one click, without any retouching in Unity.\n\n|![Imported_piskel__3_.png](\/\/\/raw\/146\/5\/z\/30d6.png)|![Imported_piskel__2_.png](\/\/\/raw\/146\/5\/z\/30d7.png)|\n|--|--|\n\nFor the head bang animation, for simplification's sake we choose not to animate the recoil by hand but to tween directly the head position, using parametrical animations driven by AnimationCurves. Some missing time for debugging led us to some spectacular dismemberments possibilities in the release.\n\n|![ezgif-3-40ed1c56f5.gif](\/\/\/raw\/146\/5\/z\/30db.gif)|\n|:--:|\n|graou|\n\n- Den : https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\n- Postmortem :\n  - [#1 : about themes and lack of game designers](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-1)\n  - [#2 : environment and ambiance](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-2-environment-and-ambiance)\n  - [#4 : the beast, the music and the sound effects](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-4-the-beast-the-music-and-the-sound-effects)\n  - [#5 : Development](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-5-the-beast-the-music-and-the-sound-effects)","comments":0,"created":"2017-04-22T20:14:34Z","files":[],"files-timestamp":0,"id":23002,"love":7,"love-timestamp":"2018-11-11T02:37:05Z","meta":[],"modified":"2018-11-11T02:37:05Z","name":"Den postmortem #3 : pixel art animations","node-timestamp":"2017-05-02T08:52:35Z","parent":22088,"parents":[1,5,9,9405,22088],"path":"\/events\/ludum-dare\/38\/den\/den-postmortem-3-pixel-art-animations","published":"2017-05-01T09:38:44Z","scope":"public","slug":"den-postmortem-3-pixel-art-animations","subsubtype":"","subtype":"","type":"post","version":76153},"node_metadata":{"n_key":"23002","n_urlkey":"301029","n_parent":"22088","n_path":"\/events\/ludum-dare\/38\/den\/den-postmortem-3-pixel-art-animations","n_slug":"den-postmortem-3-pixel-art-anima","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"22081","n_created":"1492892074","n_modified":"1541903825","n_version":"76153","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-3-pixel-art-animations","text":"In parallel to [illustrating the environment](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-2-environment-and-ambiance) for [Den](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den), we had to make little frightened animated men. As we never did pixel art animations in such a short time, we rapidly realized that our habitual creation tools weren't adapted to produce quick rough sprite animations. A quick search lead us to [Piskel](http:\/\/www.piskelapp.com\/), a browser-desktop-opensource-freedom app that is probably an obvious tool for a lot of you, but were a amazing discovery for us.\n\nOnion skin, layers, realtime preview, shortcuts, auto color palette, local saves and all-featured imports\/exports. It took us a few minutes to embrace it.\n\n|![piskel_fall.gif](\/\/\/raw\/146\/5\/z\/30cd.gif)|![men_spritesheet_big.png](\/\/\/raw\/146\/5\/z\/30ce.png)|\n|--|--|\n||\n\nThe men animations are 32x32 pixels, in 8 colors. There is three runcycles, an idle, a fall, a fall reception, a cornered idle, a shouted when cornered reaction, a standing up and taping code.\n\nTwo tips were used for the runcycle : the arms were separate layers, allowing three quick variations onto one base. And taking advantage of the limited details, only the half of a run cycle is made : the character always use its left foot. It creates a pretty much fluid cycle for 5 frames :)\n\nThe implementation were pretty straightforward. Every states are based on a few inputs (mainly velocity, vertical velocity and desired velocity), the runcycles are switched using a randomized parameter on an enter state of a StateMachineBehavior. The run animation speed is connected to the character velocity, which is slightly randomized for every character.\n\n|![men_animator.png](\/\/\/raw\/146\/5\/z\/30d2.png)|![men_animator_run.png](\/\/\/raw\/146\/5\/z\/30d4.png)|\n|--|--|\n\nWe often duplicated frames in Piskel in order to have a direct control on the animation structure and rhythm. As a result, the files contains multiple data that could have been stripped away. It wouldn't be the most efficient way to make the spritesheets, but in these time conditions and with the microscopic weight of the animations, doing that way allowed us to integrate the animations in one click, without any retouching in Unity.\n\n|![Imported_piskel__3_.png](\/\/\/raw\/146\/5\/z\/30d6.png)|![Imported_piskel__2_.png](\/\/\/raw\/146\/5\/z\/30d7.png)|\n|--|--|\n\nFor the head bang animation, for simplification's sake we choose not to animate the recoil by hand but to tween directly the head position, using parametrical animations driven by AnimationCurves. Some missing time for debugging led us to some spectacular dismemberments possibilities in the release.\n\n|![ezgif-3-40ed1c56f5.gif](\/\/\/raw\/146\/5\/z\/30db.gif)|\n|:--:|\n|graou|\n\n- Den : https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\n- Postmortem :\n  - [#1 : about themes and lack of game designers](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-1)\n  - [#2 : environment and ambiance](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-2-environment-and-ambiance)\n  - [#4 : the beast, the music and the sound effects](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-4-the-beast-the-music-and-the-sound-effects)\n  - [#5 : Development](https:\/\/ldjam.com\/events\/ludum-dare\/38\/den\/den-postmortem-5-the-beast-the-music-and-the-sound-effects)","title":"Den postmortem #3 : pixel art animations","wayback_source":[]}