{"author_link":"\/users\/flaterectomy","author_name":"Flaterectomy","author_uid":"flaterectomy","comments":[],"epoch":1525884535,"event":"LD41","format":"md","ldjam_node_id":96162,"likes":5,"metadata":{"p_key":"114867","p_author":"Flaterectomy","p_authorkey":"1003398","p_urlkey":"330827","p_title":"WRECKLESS RALLY Art Process | Part 5: At Last, Some Animation","p_cat":"LDJam ","p_event":"LD41","p_time":"1525884535","p_likes":"5","p_comments":"0","p_status":"WAYBACK","us_key":"1003398","us_name":"Flaterectomy","us_username":"flaterectomy","event_start":"1524182400","event_key":"72","event_name":"LD 41"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD41","removed_author":false},"_superparent":73256,"_trust":15,"author":3398,"body":" \n![graph_title_5.png](\/\/\/raw\/64d\/z\/14ac8.png)\n\n[Previously: Part 4: Staying Sane During A Jam](https:\/\/ldjam.com\/events\/ludum-dare\/41\/wreckless-rally\/wreckless-rally-art-process-part-4-staying-sane-during-a-jam)\n\n# Art Process Part 5: At Last, Some Animation\n\n## Vroom Vroom\nSome of our titles, such as [Artax](https:\/\/ldjam.com\/events\/ludum-dare\/39\/artax) for Ludum Dare 39, have a lot of animation work. Some have less. As it turns out, Wreckless Rally is one of the latter. The **car sprites are rotated** by means of @daanvanyperen's **mystical programming magic**, and exist of just two frames where there's a very bare-bones **lighting shift** on the tires. The advantage is that this gives me a lot of time for environment sprites, but I do want to keep up my animation practice this jam.\n\n![Untitled-5.gif](\/\/\/raw\/64d\/z\/14abd.gif)\n\n## Combo, dingdingding!\nAh, great! Here's a good opportunity to animate, albeit a short one. What will add some **game juice** is a sexy effect to **make successful combos pop**. I have a look at a Bejeweled video on YouTube at 25% playback speed, and see that they briefly enlarge the sprites before shrinking them down. I decide to add an additional flash effect, and we have a nice **dynamic scoring effect**.\n\n![graphics-post_caranim2.gif](\/\/\/raw\/64d\/z\/14ac0.gif)\n\n## Caution, Slippery\nThe oil slick sprite I made doesn't really **pop off the screen** enough. We do want the plays to notice them, so I set out to **make them more noticeable**. I start with my original unmoving sprite, which is a simple dark grey with a subtle **colourful oily outline** and ripple shapes.\n\n![graphics-post_oilslick1.png](\/\/\/raw\/64d\/z\/14ac1.png)\n\nA **simple shine animation**, where a **bright line** passes across the sprite, should do the trick. There are various ways to execute this - you can add a **secondary glimmer shooting across after the main glimmer**, or have the **glimmer shoot back across the oil slick**, for instance. I decide to **keep it simple**, as we are on day 3 of the jam already, and there's more polishing to be done.\n\n![graphics-post_oilslick2.gif](\/\/\/raw\/64d\/z\/14ac3.gif)\n\nNow to add some **oily colours** to it. I choose green, blue and purple - like the outline I had put on the sprite originally, but much lighter. You can add yellows and reds to oil as well ([anything goes, really](https:\/\/i.imgur.com\/ch0JeFA.jpg)), but I do not want to overdo it.\n\n![graphics-post_oilslick3.gif](\/\/\/raw\/64d\/z\/14ac4.gif)\n\nHmm, it still just looks like a **plain line** moving across the sprite. So I have the effect **spread out across** the outline a little, and **also hit the little drops** that splattered outside of the main slick.\n\n![graphics-post_oilslick4.gif](\/\/\/raw\/64d\/z\/14ac5.gif)\n\nMuch better, it adds a lot **more life** to a simple dark stain on the tarmac already.\n\n## Ready, Set, Go!\nAnd finally, the last thing we need is some **starting lights**, to get things going. I start with a giant 16-light setup like in Formula 1 at first, but then **simplify this** down to a **basic four light** red-to-green count. The big setup is probably not clear enough to players unfamiliar with Formula 1, after all.\n\n![lights.gif](\/\/\/raw\/64d\/z\/14ac6.gif)\n\n## The Finish Flag\nThat about concludes my art process postmortem blog posts. As I said at the start, the animations this jam are few and simple, but I am glad there was something to animate - gotta keep practicing! Looking back now, I **don't have too many regrets** regarding the graphics. I kind of **messed up** on the dirt tiles a little, deciding to start with only a vertical border between it and the tarmac, and then awkwardly adding diagonal borders separately from vertical borders which **don't line up that well**. But it's subtle and I felt I could get away with it.\n\n![graphics-hackjob.png](\/\/\/raw\/64d\/z\/14bb5.png)\n\nAnd with that we reach the end. I hope you've enjoyed these blog posts, and that they might help you in your own process in the future. **Thanks for reading!**\n\n* ## [Play WRECKLESS RALLY here](https:\/\/ldjam.com\/events\/ludum-dare\/41\/wreckless-rally)\n* ## [Watch my PIXELART TIMELAPSE video here](https:\/\/bit.ly\/2HR4vf0)\n\n![Small Thumbs_footer41.png](\/\/\/raw\/64d\/z\/14ad3.png)","comments":0,"created":"2018-05-06T13:15:22Z","files":[],"files-timestamp":0,"id":96162,"love":5,"love-timestamp":"2018-05-13T18:03:24Z","meta":[],"modified":"2018-05-13T18:03:24Z","name":"WRECKLESS RALLY Art Process | Part 5: At Last, Some Animation","node-timestamp":"2018-05-09T16:48:55Z","parent":75601,"parents":[1,5,9,73256,75601],"path":"\/events\/ludum-dare\/41\/wreckless-rally\/wreckless-rally-art-process-part-5-at-last-some-animation","published":"2018-05-09T16:48:55Z","scope":"public","slug":"wreckless-rally-art-process-part-5-at-last-some-animation","subsubtype":"","subtype":"","type":"post","version":285221},"node_metadata":{"n_key":"96162","n_urlkey":"330827","n_parent":"75601","n_path":"\/events\/ludum-dare\/41\/wreckless-rally\/wreckless-rally-art-process-part-5-at-last-some-animation","n_slug":"wreckless-rally-art-process-part","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"3398","n_created":"1525612522","n_modified":"1526234604","n_version":"285221","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/41\/wreckless-rally\/wreckless-rally-art-process-part-5-at-last-some-animation","text":" \n![graph_title_5.png](\/\/\/raw\/64d\/z\/14ac8.png)\n\n[Previously: Part 4: Staying Sane During A Jam](https:\/\/ldjam.com\/events\/ludum-dare\/41\/wreckless-rally\/wreckless-rally-art-process-part-4-staying-sane-during-a-jam)\n\n# Art Process Part 5: At Last, Some Animation\n\n## Vroom Vroom\nSome of our titles, such as [Artax](https:\/\/ldjam.com\/events\/ludum-dare\/39\/artax) for Ludum Dare 39, have a lot of animation work. Some have less. As it turns out, Wreckless Rally is one of the latter. The **car sprites are rotated** by means of @daanvanyperen's **mystical programming magic**, and exist of just two frames where there's a very bare-bones **lighting shift** on the tires. The advantage is that this gives me a lot of time for environment sprites, but I do want to keep up my animation practice this jam.\n\n![Untitled-5.gif](\/\/\/raw\/64d\/z\/14abd.gif)\n\n## Combo, dingdingding!\nAh, great! Here's a good opportunity to animate, albeit a short one. What will add some **game juice** is a sexy effect to **make successful combos pop**. I have a look at a Bejeweled video on YouTube at 25% playback speed, and see that they briefly enlarge the sprites before shrinking them down. I decide to add an additional flash effect, and we have a nice **dynamic scoring effect**.\n\n![graphics-post_caranim2.gif](\/\/\/raw\/64d\/z\/14ac0.gif)\n\n## Caution, Slippery\nThe oil slick sprite I made doesn't really **pop off the screen** enough. We do want the plays to notice them, so I set out to **make them more noticeable**. I start with my original unmoving sprite, which is a simple dark grey with a subtle **colourful oily outline** and ripple shapes.\n\n![graphics-post_oilslick1.png](\/\/\/raw\/64d\/z\/14ac1.png)\n\nA **simple shine animation**, where a **bright line** passes across the sprite, should do the trick. There are various ways to execute this - you can add a **secondary glimmer shooting across after the main glimmer**, or have the **glimmer shoot back across the oil slick**, for instance. I decide to **keep it simple**, as we are on day 3 of the jam already, and there's more polishing to be done.\n\n![graphics-post_oilslick2.gif](\/\/\/raw\/64d\/z\/14ac3.gif)\n\nNow to add some **oily colours** to it. I choose green, blue and purple - like the outline I had put on the sprite originally, but much lighter. You can add yellows and reds to oil as well ([anything goes, really](https:\/\/i.imgur.com\/ch0JeFA.jpg)), but I do not want to overdo it.\n\n![graphics-post_oilslick3.gif](\/\/\/raw\/64d\/z\/14ac4.gif)\n\nHmm, it still just looks like a **plain line** moving across the sprite. So I have the effect **spread out across** the outline a little, and **also hit the little drops** that splattered outside of the main slick.\n\n![graphics-post_oilslick4.gif](\/\/\/raw\/64d\/z\/14ac5.gif)\n\nMuch better, it adds a lot **more life** to a simple dark stain on the tarmac already.\n\n## Ready, Set, Go!\nAnd finally, the last thing we need is some **starting lights**, to get things going. I start with a giant 16-light setup like in Formula 1 at first, but then **simplify this** down to a **basic four light** red-to-green count. The big setup is probably not clear enough to players unfamiliar with Formula 1, after all.\n\n![lights.gif](\/\/\/raw\/64d\/z\/14ac6.gif)\n\n## The Finish Flag\nThat about concludes my art process postmortem blog posts. As I said at the start, the animations this jam are few and simple, but I am glad there was something to animate - gotta keep practicing! Looking back now, I **don't have too many regrets** regarding the graphics. I kind of **messed up** on the dirt tiles a little, deciding to start with only a vertical border between it and the tarmac, and then awkwardly adding diagonal borders separately from vertical borders which **don't line up that well**. But it's subtle and I felt I could get away with it.\n\n![graphics-hackjob.png](\/\/\/raw\/64d\/z\/14bb5.png)\n\nAnd with that we reach the end. I hope you've enjoyed these blog posts, and that they might help you in your own process in the future. **Thanks for reading!**\n\n* ## [Play WRECKLESS RALLY here](https:\/\/ldjam.com\/events\/ludum-dare\/41\/wreckless-rally)\n* ## [Watch my PIXELART TIMELAPSE video here](https:\/\/bit.ly\/2HR4vf0)\n\n![Small Thumbs_footer41.png](\/\/\/raw\/64d\/z\/14ad3.png)","title":"WRECKLESS RALLY Art Process | Part 5: At Last, Some Animation","wayback_source":[]}