{"id":646,"date":"2026-05-15T18:28:04","date_gmt":"2026-05-15T18:28:04","guid":{"rendered":"https:\/\/sites.wsagames.com\/et4g23-yr3\/?p=646"},"modified":"2026-05-15T18:28:04","modified_gmt":"2026-05-15T18:28:04","slug":"implementing-player-animations","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/et4g23-yr3\/2026\/05\/15\/implementing-player-animations\/","title":{"rendered":"Implementing Player Animations"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Before letting our peers <a href=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/2026\/05\/15\/sprint-1-playtest\/\">playtest our game<\/a>, we had to implement animations for the player character, Kauri.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Paula created separate animations for Kauri: Idle, Sprint, Jump, Wall cling etc. and sent them to me as seperate pngs. Which I turned into a spritesheet using <a href=\"https:\/\/www.finalparsec.com\/tools\/sprite_sheet_maker\">this website<\/a>. This lets me keep Kauri a consistent size despite his animations being made on different canvases.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"871\" height=\"1024\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-44-871x1024.png\" alt=\"\" class=\"wp-image-647\" style=\"width:269px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-44-871x1024.png 871w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-44-255x300.png 255w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-44-768x903.png 768w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-44-1306x1536.png 1306w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-44-1741x2048.png 1741w\" sizes=\"(max-width: 871px) 100vw, 871px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is because I can splice the sprite sheet by rows and columns instead of sizes (Unity&#8217;s automatic setting):<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acc55cd060f2&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acc55cd060f2\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"805\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-45-1024x805.png\" alt=\"\" class=\"wp-image-648\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-45-1024x805.png 1024w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-45-300x236.png 300w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-45-768x604.png 768w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-45.png 1160w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then, with these individual frames of Kauri&#8217;s animations:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"484\" height=\"268\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-46.png\" alt=\"\" class=\"wp-image-649\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-46.png 484w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-46-300x166.png 300w\" sizes=\"(max-width: 484px) 100vw, 484px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I can create animation clips, and use Unity&#8217;s animation tab to actually set these animations:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"144\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-47.png\" alt=\"\" class=\"wp-image-650\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acc55cd07f0d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acc55cd07f0d\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"517\" height=\"159\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-48.png\" alt=\"\" class=\"wp-image-651\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-48.png 517w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-48-300x92.png 300w\" sizes=\"(max-width: 517px) 100vw, 517px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p class=\"wp-block-paragraph\">These animations can be controlled using an Animation Controller:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"92\" height=\"106\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-54.png\" alt=\"\" class=\"wp-image-657\" style=\"width:68px;height:auto\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"809\" height=\"405\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-49.png\" alt=\"\" class=\"wp-image-652\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-49.png 809w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-49-300x150.png 300w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-49-768x384.png 768w\" sizes=\"(max-width: 809px) 100vw, 809px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Which plays certain animations depending on certain <strong>Parameters <\/strong>(On the left), which are set in the playercontroller script:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acc55cd08e74&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acc55cd08e74\" class=\"wp-block-image aligncenter size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"454\" height=\"380\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-51.png\" alt=\"\" class=\"wp-image-654\" style=\"width:325px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-51.png 454w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-51-300x251.png 300w\" sizes=\"(max-width: 454px) 100vw, 454px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acc55cd09de3&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acc55cd09de3\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"763\" height=\"251\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-50.png\" alt=\"\" class=\"wp-image-653\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-50.png 763w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-50-300x99.png 300w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">This screenshot was taken later in development, when we had the grapple animation<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I then put an Animator component on the player gameobject so that it can access the Animator Controller:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"306\" height=\"231\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-53.png\" alt=\"\" class=\"wp-image-656\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-53.png 306w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-53-300x226.png 300w\" sizes=\"(max-width: 306px) 100vw, 306px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Before letting our peers playtest our game, we had to implement animations for the player character, Kauri. Paula created separate animations for Kauri: Idle, Sprint, Jump, Wall cling etc. and sent them to me as seperate pngs. Which I turned into a spritesheet using this website. This lets me keep Kauri a consistent size despite [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-646","post","type-post","status-publish","format-standard","hentry","category-sprint-1"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts\/646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/comments?post=646"}],"version-history":[{"count":1,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts\/646\/revisions"}],"predecessor-version":[{"id":658,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts\/646\/revisions\/658"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/media?parent=646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/categories?post=646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/tags?post=646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}