{"id":908,"date":"2025-02-23T12:56:35","date_gmt":"2025-02-23T12:56:35","guid":{"rendered":"https:\/\/sites.wsagames.com\/pe1n23\/?p=908"},"modified":"2025-10-07T11:40:51","modified_gmt":"2025-10-07T11:40:51","slug":"week-4-development","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/pe1n23\/week-4-development\/","title":{"rendered":"Week 4 Development"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Tweaking Rat Movement<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To improve player movement slightly I added a bit of acceleration and deceleration to the player, so they don&#8217;t start and stop moving on a dime. This made movement way less twitchy.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1178\" height=\"582\" src=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-4.png\" alt=\"\" class=\"wp-image-1114\" style=\"width:862px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-4.png 1178w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-4-300x148.png 300w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-4-1024x506.png 1024w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-4-768x379.png 768w\" sizes=\"(max-width: 1178px) 100vw, 1178px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I also made sure the rat can only start sprinting while on the ground:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"200\" src=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-5-1024x200.png\" alt=\"\" class=\"wp-image-1117\" style=\"width:860px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-5-1024x200.png 1024w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-5-300x59.png 300w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-5-768x150.png 768w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-5.png 1217w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Cel Shading<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As the playtest deadline was steadily approaching we decided to keep the greybox made in ProBuilder as our level. However, we were still using the default dev textures the package provides, with only simple colour changes. This does not fit the cartoony, nostalgic aesthetic of the game as described by Esi in her GDD so we needed to go for more stylised look. I opted for cel shading as I saw a useful shader made by Robin Seibold, the developer who made the outline shader I used in my Unity prototype for Kinetic Panic:<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Cel Shading - Devlog 3\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/gw31oF9qITw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This shader worked with Unity&#8217;s built in lights on the Universal Render Pipeline, and was available for free on Github, so we added it to the project. It also had support for changing the base colour with textures, which would be very helpful in the future when making custom assets for the game.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Doing this meant creating custom materials for each kind of colour we would need for objects in the game, such as wooden floors\/furniture etc.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" width=\"1536\" height=\"654\" src=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-14.png\" alt=\"\" class=\"wp-image-1064\" style=\"width:1062px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-14.png 1536w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-14-300x128.png 300w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-14-1024x436.png 1024w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-14-768x327.png 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><figcaption class=\"wp-element-caption\">Screenshot captured by Hugo<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once we added these, the game had a very bold, colourful look! However, without any textures and soft shading of the previous materials depth perception became a big problem. A brown table on a floor of the same colour would blend in entirely! To fix this I added some <strong>Screen-Space Ambient Occlusion<\/strong>. I do not like using this effect to this intensity but this was necessary for the time being to improve visual clarity.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Animations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In the meantime, Hugo had created all the necessary movement animations for our Rat character. All we had to do now was to use the Animator component to have them play when moving.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"677\" src=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-15.png\" alt=\"\" class=\"wp-image-1066\" style=\"width:988px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-15.png 1536w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-15-300x132.png 300w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-15-1024x451.png 1024w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-15-768x339.png 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><figcaption class=\"wp-element-caption\">This looks like an evil ritual, but it&#8217;s very important for the game, trust me<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Animation in unity is done by essentially creating a <strong>state machine<\/strong> with connections between all the different animations allowing them to blend between each other. Each connection will have different <strong>conditions<\/strong>, for example: If the bool isSprinting is true, we can let the player character&#8217;s animator transition the current walking animation to the sprinting animation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All we had to do after setting this up was to define these conditions in code by setting the <strong>parameters<\/strong> such as the isSprinting bool along with many others. We also defined a <strong>speed<\/strong> parameter that can control the speed at which the walking and sprinting animations play depending on how fast the character is moving through the world.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hugo recorded the following video showing off the different animations:<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Movement animations in Unity\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/F1d3caWNWb8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Rat Sprite Edits<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hugo initially submitted his first pass for the rat model&#8217;s texture, however, we agreed that it looked a bit too cartoony and human-like for the game, as a result I quickly made a mockup of what it could look like. We soon agreed it would just be easier to use that in the model, and after photoshopping it onto the base texture Hugo made he got it working on our rat model.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"607\" src=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-17.png\" alt=\"\" class=\"wp-image-1090\" srcset=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-17.png 791w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-17-300x230.png 300w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/05\/image-17-768x589.png 768w\" sizes=\"(max-width: 791px) 100vw, 791px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Hugo also added a blinking sprite variant but we would need to code a way to switch the sprite in-game for that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fixing Collisions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We also had an issue where the rat&#8217;s collision to the ground wasn&#8217;t working when they were hanging off ledges, making jumping off them feel very awkward and sometimes weirdly sliding. To fix this I replaced the original sphere I used to check collisions with two, one on the front and one at the back.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1256\" height=\"449\" src=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-6.png\" alt=\"\" class=\"wp-image-1122\" style=\"width:940px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-6.png 1256w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-6-300x107.png 300w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-6-1024x366.png 1024w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-6-768x275.png 768w\" sizes=\"(max-width: 1256px) 100vw, 1256px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After a lot of tweaking this fixed the issue entirely!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Movement Curves<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">At the recommendation of Ross I used Unity&#8217;s Animation Curves to perfectly dial in how the rat&#8217;s speed ramps up instead of using a flat acceleration time for both.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"492\" height=\"887\" src=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-7.png\" alt=\"\" class=\"wp-image-1123\" style=\"width:317px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-7.png 492w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-7-166x300.png 166w\" sizes=\"(max-width: 492px) 100vw, 492px\" \/><figcaption class=\"wp-element-caption\">The curve for the rat&#8217;s acceleration.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Screw Model<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I also made this low-poly pixel art screw model for the quest, in a pastel style that fits the look of the game.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"574\" height=\"486\" src=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-8.png\" alt=\"\" class=\"wp-image-1128\" srcset=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-8.png 574w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/02\/image-8-300x254.png 300w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Tweaking Rat Movement To improve player movement slightly I added a bit of acceleration and deceleration to the player, so they don&#8217;t start and stop moving on a dime. This made movement way less twitchy. I also made sure the rat can only start sprinting while on the ground: Adding Cel Shading As the playtest [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":1064,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,29,30],"tags":[],"class_list":["post-908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-semester-2","category-year2"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/posts\/908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/comments?post=908"}],"version-history":[{"count":13,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/posts\/908\/revisions"}],"predecessor-version":[{"id":1131,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/posts\/908\/revisions\/1131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/media\/1064"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/media?parent=908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/categories?post=908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/tags?post=908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}