{"id":181,"date":"2026-09-21T18:07:49","date_gmt":"2026-09-21T18:07:49","guid":{"rendered":"https:\/\/projects.etc.cmu.edu\/spellchemists\/?p=181"},"modified":"2026-10-24T17:50:47","modified_gmt":"2026-10-24T17:50:47","slug":"week-4-shaping-the-arena-and-visual-identity","status":"publish","type":"post","link":"https:\/\/projects.etc.cmu.edu\/spellchemists\/week-4-shaping-the-arena-and-visual-identity\/","title":{"rendered":"Week 4: Shaping the Arena and Visual Identity"},"content":{"rendered":"\n<p class=\"alignwide wp-block-paragraph\">After presenting our overall direction at Quarter, Week 4 focused on turning feedback into more concrete design decisions. On the design side, we explored how the arena itself could encourage movement and elemental strategy. At the same time, the art team began defining a unified visual direction for the characters, physical pucks, and the world of <em>SpellChemists<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading alignwide\">Design: Arena Map<\/h2>\n\n\n\n<p class=\"alignwide wp-block-paragraph\">This week we decided to move all constructed spells to pre-existing map terrain. This adds an environmental factor for players to strategize with that is also visible for opponents. These environmental elements set up (magma cliff, water fall, vine wall) are presets that alternate randomly, that can be hazards or buffs for players depending on spell repertoire or positioning. This not only add more randomness to the game play but also encourage players to actively move and reposition.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ae8dcdad7ca4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ae8dcdad7ca4\" class=\"wp-block-image aligncenter size-large is-resized wp-lightbox-container\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"640\" 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:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-map1-1024x640.jpg\" alt=\"\" class=\"wp-image-182\" style=\"width:454px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-map1-1024x640.jpg 1024w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-map1-300x187.jpg 300w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-map1-767x479.jpg 767w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-map1.jpg 1402w\" 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=\"alignwide wp-block-paragraph\">Our first map concepts explored three general archetypes:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Crossfire<\/strong>, with elemental features arranged in offset lines or layers.<\/li>\n\n\n\n<li><strong>Islands<\/strong>, with concentrated elemental clusters separated by open space.<\/li>\n\n\n\n<li><strong>Corridors<\/strong>, with powerful multi-element chains placed along narrow lanes or diagonals.<\/li>\n<\/ol>\n\n\n\n<p class=\"alignwide wp-block-paragraph\">After some playtests, we picked some designs that encourage more player strategy, to prevent cases where the player hides in a non-elemental corner, we try to design maps where elemental puddle distributions divide the spaces evenly and block the edges and corners.<br><\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ae8dcdad88ed&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ae8dcdad88ed\" class=\"wp-block-image aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"830\" 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:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-map2-1024x830.jpg\" alt=\"\" class=\"wp-image-183\" style=\"aspect-ratio:1.2337507250332662;width:459px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-map2-1024x830.jpg 1024w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-map2-300x243.jpg 300w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-map2-768x622.jpg 768w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-map2.jpg 1165w\" 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<h2 class=\"wp-block-heading alignwide\">Art: Establishing a Shared Visual Direction<\/h2>\n\n\n\n<p class=\"alignwide wp-block-paragraph\">This week we focused on establishing our overall art style, puck designs, and character direction, while also beginning the Swift character model. Our visual style is designed to fit our target audience, taking inspiration from <em>Dungeons &amp; Dragons<\/em> and <em>Pathfinder<\/em> while simplifying and stylizing the visual language to make it more approachable and readable. Since our game makes use of the Board as an important part of the player experience, we also wanted the physical spell-casting pucks to feel more intentional and fun to interact with.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading alignwide\">Puck Design<\/h3>\n\n\n\n<p class=\"alignwide wp-block-paragraph\">The three elemental pucks are designed as rune stones, with their shapes inspired by the characteristics of each element. The Fire Rune uses a flame-like triangular\/diamond shape, the Earth Rune is a sturdy, organic block of stone, and the Water Rune has a smooth, rounded shape inspired by a water droplet. (<em>Modeled in ZBrush<\/em>)<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ae8dcdad9486&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ae8dcdad9486\" class=\"wp-block-image aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"511\" 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:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-puck-1024x511.jpg\" alt=\"\" class=\"wp-image-184\" style=\"width:748px;height:auto\" srcset=\"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-puck-1024x511.jpg 1024w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-puck-768x383.jpg 768w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-puck-300x150.jpg 300w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-puck.jpg 1399w\" 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<h3 class=\"wp-block-heading alignwide\">Character Design<\/h3>\n\n\n\n<p class=\"alignwide wp-block-paragraph\">We also developed the visual direction for our two characters, Swift and Tank. As their names suggest, Swift has a lighter, slimmer silhouette, while Tank has a broader and heavier build. Alongside the character design drafts, we started modeling Swift and are beginning to translate the simplified 2D designs into 3D. (<em>Modeled in Maya<\/em>)<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ae8dcdada82f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ae8dcdada82f\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"511\" 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:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-swift-1024x511.jpg\" alt=\"\" class=\"wp-image-185\" srcset=\"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-swift-1024x511.jpg 1024w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-swift-300x150.jpg 300w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-swift-768x383.jpg 768w, https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-content\/uploads\/2026\/10\/w4-swift.jpg 1399w\" 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<h2 class=\"wp-block-heading alignwide\">Looking Ahead<\/h2>\n\n\n\n<p class=\"alignwide wp-block-paragraph\">Week 4 brought the physical and digital sides of <em>SpellChemists<\/em> closer together. The arena maps give elemental strategy a visible place in the environment, while the rune pucks and character models give players more tangible ways to interact with that system. Moving forward, we will continue testing whether these visual and environmental choices remain clear during play and whether they encourage the movement, adaptation, and physical interaction at the center of our game.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elemental terrain arrived in the Arena this week! We explored maps built around crossfire, islands, and corridors, then tested how their layouts could keep players moving. Meanwhile, our visual world began taking shape through stylized rune pucks, a clearer art direction, and the first steps toward bringing Swift from a 2D concept into 3D.<\/p>\n","protected":false},"author":2,"featured_media":184,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[19,16],"class_list":["post-181","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-art","tag-game-design"],"_links":{"self":[{"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/posts\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":2,"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/posts\/181\/revisions\/476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/media\/184"}],"wp:attachment":[{"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/spellchemists\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}