{"id":134,"date":"2024-02-15T02:33:20","date_gmt":"2024-02-15T02:33:20","guid":{"rendered":"http:\/\/mycours.es\/interactivity\/?page_id=134"},"modified":"2025-11-06T14:24:17","modified_gmt":"2025-11-06T14:24:17","slug":"exercise-mood-board","status":"publish","type":"page","link":"https:\/\/mycours.es\/interactivity\/exercise-mood-board\/","title":{"rendered":"Assignment: Mood Board"},"content":{"rendered":"<p><img decoding=\"async\" class=\"aligncenter wp-image-384 size-full\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colorpallet2-e1409612887535.jpg\" sizes=\"(max-width: 300px) 85vw, 300px\" \/><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-385\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colorpallet5-e1409613267620.jpg\" sizes=\"(max-width: 300px) 85vw, 300px\" \/><\/p>\n<p>Where do these colors and ideas come from? Once again <a href=\"https:\/\/milanote.com\/the-work\/the-surprising-inspiration-behind-monument-valleys-most-beautiful-levels\">NON-GAME INSPIRATIONS<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1626\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/bc80a2a25e4d7623fc751ae009ec7bb0f68dc898_candy_946px.jpg\" alt=\"\" width=\"946\" height=\"631\" \/><\/p>\n<p>If you want to be a game artist, a graphic designer or an illustrator\u00a0<a href=\"https:\/\/programmingdesignsystems.com\/color\/color-schemes\/index.html\">learn some color theory<\/a>\u00a0especially applied to the digital sphere.<\/p>\n<p>For more complex\/realistic illustrations like concept and background art it may make sense to<a href=\"https:\/\/design.tutsplus.com\/articles\/digital-painting-101-the-pros-and-cons-of-painting-in-grayscale--cms-23788\">\u00a0paint in grayscale and colorize later.<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Mood board<\/strong><\/h2>\n<p>Themes and scenarios come with more obvious tropes attached. If you create a mood board by just googling keyword you&#8217;ll get only visual cliches.<\/p>\n<p>You can try to subvert some of the expectations, create your own twist and interpretations to a particular setting.<br \/>\nCheck these slides from Ninja Theory&#8217;s Devil May Cry and Enslaved<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-569\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" alt=\"Screen Shot 2018-09-27 at 9.13.52 PM\" width=\"2278\" height=\"1324\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-570\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" alt=\"Screen Shot 2018-09-27 at 9.13.01 PM\" width=\"2380\" height=\"1370\" \/><\/p>\n<p>Two common scenarios and the reinterpretations by ninja theory.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-572\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" alt=\"Screen Shot 2018-09-27 at 9.14.12 PM\" width=\"2294\" height=\"1324\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-573\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" alt=\"Screen Shot 2018-09-27 at 9.13.26 PM\" width=\"2288\" height=\"1334\" \/><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=tX-XYgPloy8\">Slides from this GDC talk<\/a>\u00a0(not that great, although their work is good)<\/p>\n<p><strong>Exercise:<\/strong><\/p>\n<p><strong>Create a quick mood board on your miro focusing on the color palette (but also including visual motifs).<\/strong><br \/>\nAll the references must be outside of the realm of games.<\/p>\n<p>If you don&#8217;t have any concrete starting points don&#8217;t jus image search &#8220;sad colors&#8221;. Try this site: <a href=\"https:\/\/same.energy\/\">same.energy<\/a><\/p>\n<p><strong>Add real world references to your mood board even if they don&#8217;t match the visual style and palette<br \/>\n<\/strong>Here you can look up things more literally things like &#8220;gothic church&#8221;, &#8220;salmon&#8221;, &#8220;CIA black site&#8221;.<br \/>\nThis will inevitably force you to ask yourself questions like: where and when is this game taking place?<\/p>\n<p><strong>Challenge the tropes that emerge from the research<\/strong><\/p>\n<div class=\"entry-content\">\n<p style=\"text-align: center;\">\n<\/div>\n<h2 style=\"text-align: left;\">Readability<\/h2>\n<div class=\"entry-content\">\n<p style=\"text-align: left;\">For arcade and action games, visual style is mostly functional to the communication of the game state.<\/p>\n<p>In early arcade games characters are defined by what they can do, the visual capabilities and the actions they perform are limited.<\/p>\n<div class=\"entry-content\">\n<p style=\"text-align: left;\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/Pacman-1024x768-253558.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-604\" title=\"Pacman-1024x768-253558\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/Pacman-1024x768-253558.jpeg\" alt=\"\" width=\"1024\" height=\"768\" \/><\/a><\/p>\n<p>What are some visual design decisions in Asteroids?<\/p>\n<p style=\"text-align: left;\">Gris &#8211; animation-first arty game. Special &#8220;mood abilities&#8221; expressed through shapes instead of UI.<\/p>\n<p><iframe loading=\"lazy\" title=\"The Creativity Process behind GRIS\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/rnjKTrIuk7Q?start=1215&#038;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><\/p>\n<p style=\"text-align: left;\">\n<\/div>\n<figure id=\"attachment_579\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/8-bit-Click-out-Character-Set-Designs-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-579\" title=\"8-bit-Click-out-Character-Set-Designs-1\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/8-bit-Click-out-Character-Set-Designs-1.jpg\" alt=\"\" width=\"500\" height=\"500\" \/><\/a><figcaption class=\"wp-caption-text\">How can your character communicate its state and features?<\/figcaption><\/figure>\n<p id=\"attachment_608\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/sprite-sheet2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-608\" title=\"sprite-sheet2\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/sprite-sheet2.png\" alt=\"\" width=\"1024\" height=\"1024\" \/><\/a>The proportions of the main character in Braid were dictated by the platforming gameplay. In cognitive terms, the player has less work to do to calculate the movements of a short squareish object.<\/p>\n<h3><strong>Silhouettes<\/strong><em><strong><br \/>\n<\/strong><\/em><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-3688\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2023\/01\/02_Champ_Silhouettes-1024x347.jpg\" alt=\"\" width=\"840\" height=\"285\" \/>In arcade games and esports instantly recognizable silhouettes are a crucial aspect of readability.<br \/>\n<a href=\"https:\/\/www.leagueoflegends.com\/en-us\/news\/dev\/clarity-in-league\/\">Clarity in League of Legends<\/a><\/p>\n<figure id=\"attachment_586\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/evolution-of-video-game-characters-14582.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-586\" title=\"evolution-of-video-game-characters-14582\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/evolution-of-video-game-characters-14582.jpg\" alt=\"\" width=\"694\" height=\"1001\" \/><\/a><\/figure>\n<p>Don\u2019t let the technology dictate your expressive modes<\/p>\n<\/div>\n<div class=\"entry-content\">\n<figure id=\"attachment_587\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/fez.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-587\" title=\"fez\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/fez.jpg\" alt=\"\" width=\"1024\" height=\"768\" \/><\/a><figcaption class=\"wp-caption-text\">Some of the best character design in contemporary games is iconic. Originally Mario\u2019s distinctive big nose and mustache was a low-res necessity.<\/figcaption><\/figure>\n<p style=\"text-align: left;\">\n<\/div>\n<p><strong>Background VS foreground<\/strong><\/p>\n<p><iframe loading=\"lazy\" title=\"VVVVVV - Full Game\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/MFfc8xn3Jp4?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><\/p>\n<p><iframe loading=\"lazy\" title=\"HOLLOW KNIGHT Gameplay Walkthrough FULL GAME (4K 60FPS) No Commentary\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/76wIRNsDPPw?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><\/p>\n<p>Action based 2d games must find consistent visual strategies to differentiate background and foreground, platforms, enemies and collectibles etc.<\/p>\n<p><a href=\"http:\/\/mycours.es\/digitalmedia\/files\/2023\/01\/PREVIEW_SCREENSHOT6_103644.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3692\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2023\/01\/PREVIEW_SCREENSHOT6_103644.png\" alt=\"\" width=\"950\" height=\"720\" \/><\/a><\/p>\n<p><strong>Let&#8217;s talk about your project&#8217;s readability challenges and how to address them.<\/strong><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Where do these colors and ideas come from? Once again NON-GAME INSPIRATIONS If you want to be a game artist, a graphic designer or an illustrator\u00a0learn some color theory\u00a0especially applied to the digital sphere. For more complex\/realistic illustrations like concept and background art it may make sense to\u00a0paint in grayscale and colorize later. &nbsp; Mood &hellip; <a href=\"https:\/\/mycours.es\/interactivity\/exercise-mood-board\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Assignment: Mood Board&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-134","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":4,"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages\/134\/revisions"}],"predecessor-version":[{"id":285,"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages\/134\/revisions\/285"}],"wp:attachment":[{"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/media?parent=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}