{"id":992,"date":"2026-02-12T22:58:45","date_gmt":"2026-02-12T22:58:45","guid":{"rendered":"https:\/\/sites.wsagames.com\/sz3c23\/?p=992"},"modified":"2026-05-11T21:01:15","modified_gmt":"2026-05-11T21:01:15","slug":"coding-development-animation","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/sz3c23\/coding-development-animation\/","title":{"rendered":"Coding Development: Animation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"992\" class=\"elementor elementor-992\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ed5f057 e-flex e-con-boxed e-con e-parent\" data-id=\"ed5f057\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d8b87c elementor-widget elementor-widget-text-editor\" data-id=\"3d8b87c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4 data-start=\"54\" data-end=\"110\">2D Frame-by-Frame Character Animation<\/h4><p data-start=\"112\" data-end=\"401\"><strong>Tutorial for animation:<\/strong><\/p><p data-start=\"112\" data-end=\"401\"><span style=\"text-decoration: underline\"><strong><a href=\"https:\/\/www.youtube.com\/watch?v=AdQz2wStdLY\">How to Setup Animator and Animations in Unity 2D<\/a><\/strong><\/span><\/p><p data-start=\"112\" data-end=\"401\">To create the player\u2019s 2D frame-by-frame animation, I first imported the <strong>12-frame character action sequence<\/strong> illustrated by Swan into Unity as sprite assets.\u00a0<\/p><p data-start=\"112\" data-end=\"401\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-1535\" src=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/05\/\u5c4f\u5e55\u622a\u56fe-2026-05-11-213051.png\" alt=\"\" width=\"1123\" height=\"877\" srcset=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/05\/\u5c4f\u5e55\u622a\u56fe-2026-05-11-213051.png 1123w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/05\/\u5c4f\u5e55\u622a\u56fe-2026-05-11-213051-300x234.png 300w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/05\/\u5c4f\u5e55\u622a\u56fe-2026-05-11-213051-1024x800.png 1024w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/05\/\u5c4f\u5e55\u622a\u56fe-2026-05-11-213051-768x600.png 768w\" sizes=\"(max-width: 1123px) 100vw, 1123px\" \/><\/p><p data-start=\"112\" data-end=\"401\">These frames were prepared as a sprite sheet and sliced using the Sprite Editor to ensure each frame could be accessed individually.<\/p><p data-start=\"112\" data-end=\"401\"><img decoding=\"async\" class=\"alignnone size-full wp-image-1042\" src=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/191c6788be2b3eacdc71afef591baebe.jpg\" alt=\"\" width=\"1579\" height=\"1184\" srcset=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/191c6788be2b3eacdc71afef591baebe.jpg 1579w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/191c6788be2b3eacdc71afef591baebe-300x225.jpg 300w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/191c6788be2b3eacdc71afef591baebe-1024x768.jpg 1024w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/191c6788be2b3eacdc71afef591baebe-768x576.jpg 768w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/191c6788be2b3eacdc71afef591baebe-1536x1152.jpg 1536w\" sizes=\"(max-width: 1579px) 100vw, 1579px\" \/><\/p><p data-start=\"403\" data-end=\"579\">After importing the visual assets, I added an <strong data-start=\"449\" data-end=\"461\">Animator<\/strong> component to the player character and created an <strong data-start=\"511\" data-end=\"535\">Animation Controller<\/strong> to manage animation states and transitions.<\/p><p data-start=\"581\" data-end=\"638\">Currently, the animation system includes two core states: <strong data-start=\"642\" data-end=\"650\">Idle<\/strong> &amp;\u00a0<strong data-start=\"653\" data-end=\"660\">Run<\/strong><\/p><p data-start=\"662\" data-end=\"771\">For each state, I created a separate animation clip and placed the corresponding keyframes into the timeline:<\/p><ul data-start=\"773\" data-end=\"935\"><li data-start=\"773\" data-end=\"853\"><p data-start=\"775\" data-end=\"853\">The <em data-start=\"779\" data-end=\"785\">Idle<\/em> animation uses its dedicated frame sequence and loops continuously.<\/p><\/li><li data-start=\"854\" data-end=\"935\"><p data-start=\"856\" data-end=\"935\">The <em data-start=\"860\" data-end=\"865\">Run<\/em> animation uses the 12-frame action sequence to create fluid movement.<\/p><\/li><\/ul><p data-start=\"937\" data-end=\"1016\">I then set up transition conditions between the two states inside the Animator:<\/p><ul data-start=\"1018\" data-end=\"1334\"><li data-start=\"1018\" data-end=\"1127\"><p data-start=\"1020\" data-end=\"1127\">A parameter (e.g., <code data-start=\"1039\" data-end=\"1050\">isRunning<\/code> as a bool) determines whether the character transitions from Idle to Run.<\/p><\/li><li data-start=\"1128\" data-end=\"1232\"><p data-start=\"1130\" data-end=\"1232\">When the player provides movement input, the parameter switches to true, triggering the Run animation.<\/p><\/li><li data-start=\"1233\" data-end=\"1334\"><p data-start=\"1235\" data-end=\"1334\">When no movement input is detected, the parameter resets to false, returning the character to Idle.<\/p><\/li><\/ul><p data-start=\"1336\" data-end=\"1377\">To refine the animation feel, I adjusted:<\/p><ul data-start=\"1379\" data-end=\"1542\"><li data-start=\"1379\" data-end=\"1438\"><p data-start=\"1381\" data-end=\"1438\">The <strong data-start=\"1385\" data-end=\"1415\">frame rate (Samples value)<\/strong> of each animation clip<\/p><\/li><li data-start=\"1439\" data-end=\"1494\"><p data-start=\"1441\" data-end=\"1494\">The spacing between keyframes in the Animation window<\/p><\/li><li data-start=\"1495\" data-end=\"1542\"><p data-start=\"1497\" data-end=\"1542\">The loop settings ensure seamless playback.<\/p><\/li><\/ul><p data-start=\"1544\" data-end=\"1787\">By fine-tuning the timing between frames, I was able to control the perceived weight and responsiveness of the character\u2019s movement. A faster frame interval makes the run feel more energetic, while a slower interval adds heaviness or calmness.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cc1e79e e-flex e-con-boxed e-con e-parent\" data-id=\"cc1e79e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe5cf32 elementor-widget elementor-widget-video\" data-id=\"fe5cf32\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/Animation-test.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-02022cf e-flex e-con-boxed e-con e-parent\" data-id=\"02022cf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b564675 elementor-widget elementor-widget-text-editor\" data-id=\"b564675\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>\u00a0<\/h4><hr \/><h4>Art Assets Iteration<\/h4><p>The character animation shown earlier was a draft I used to test this feature. <br \/>Once Lettie, who is responsible for character art and animation, had finished the final artwork, she emailed me every single frame.<\/p><p><img decoding=\"async\" class=\"alignnone size-full wp-image-1434\" src=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5fae\u4fe1\u56fe\u7247_20260314132656_406_350.jpg\" alt=\"\" width=\"1662\" height=\"1215\" srcset=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5fae\u4fe1\u56fe\u7247_20260314132656_406_350.jpg 1662w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5fae\u4fe1\u56fe\u7247_20260314132656_406_350-300x219.jpg 300w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5fae\u4fe1\u56fe\u7247_20260314132656_406_350-1024x749.jpg 1024w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5fae\u4fe1\u56fe\u7247_20260314132656_406_350-768x561.jpg 768w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5fae\u4fe1\u56fe\u7247_20260314132656_406_350-1536x1123.jpg 1536w\" sizes=\"(max-width: 1662px) 100vw, 1662px\" \/><\/p><p>I imported them into the Unity engine and, following the previous steps, added each frame to the Animator.<\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1436\" src=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132829.png\" alt=\"\" width=\"2560\" height=\"1528\" srcset=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132829.png 2560w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132829-300x179.png 300w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132829-1024x611.png 1024w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132829-768x458.png 768w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132829-1536x917.png 1536w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132829-2048x1222.png 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1435\" src=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132800.png\" alt=\"\" width=\"584\" height=\"349\" srcset=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132800.png 2560w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132800-300x179.png 300w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132800-1024x611.png 1024w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132800-768x458.png 768w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132800-1536x917.png 1536w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-14-132800-2048x1222.png 2048w\" sizes=\"(max-width: 584px) 100vw, 584px\" \/> <br \/>By continuously <strong>adjusting the timing between frames<\/strong> to achieve the smoothest possible animation.<\/p><p>So far, the player character and peacock animation are done.<\/p><p><span style=\"text-decoration: underline\"><strong><a href=\"https:\/\/sites.wsagames.com\/sz3c23\/week-5-player-experience-iteration\/\">Week 5 Player Experience &amp;amp; Iteration<\/a><\/strong><\/span><\/p><p>Since there is some feedback from our first playtest, said that the <strong>soul fragment should be more obvious and have a special visual effect<\/strong>. Swan drew a series of animations and sent them through Slack to me.<\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1439\" src=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/\u5fae\u4fe1\u56fe\u7247_20260314135128_409_350.jpg\" alt=\"\" width=\"1102\" height=\"1319\" srcset=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/\u5fae\u4fe1\u56fe\u7247_20260314135128_409_350.jpg 1102w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/\u5fae\u4fe1\u56fe\u7247_20260314135128_409_350-251x300.jpg 251w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/\u5fae\u4fe1\u56fe\u7247_20260314135128_409_350-856x1024.jpg 856w, https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/\u5fae\u4fe1\u56fe\u7247_20260314135128_409_350-768x919.jpg 768w\" sizes=\"(max-width: 1102px) 100vw, 1102px\" \/><\/p><p>Those animations went well in our game. See the following video:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-21827b3 e-flex e-con-boxed e-con e-parent\" data-id=\"21827b3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-09c912c elementor-widget elementor-widget-video\" data-id=\"09c912c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/sites.wsagames.com\/sz3c23\/wp-content\/uploads\/sites\/68\/2026\/02\/Animation-display.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>2D Frame-by-Frame Character Animation Tutorial for animation: How to Setup Animator and Animations in Unity 2D To create the player\u2019s 2D frame-by-frame animation, I first imported the 12-frame character action sequence illustrated by Swan into Unity as sprite assets.\u00a0 These frames were prepared as a sprite sheet and sliced using the Sprite Editor to ensure [&hellip;]<\/p>\n","protected":false},"author":59,"featured_media":1039,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/posts\/992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/comments?post=992"}],"version-history":[{"count":13,"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/posts\/992\/revisions"}],"predecessor-version":[{"id":1549,"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/posts\/992\/revisions\/1549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/media\/1039"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/media?parent=992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/categories?post=992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/sz3c23\/wp-json\/wp\/v2\/tags?post=992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}