{"id":892,"date":"2023-01-26T00:04:33","date_gmt":"2023-01-26T00:04:33","guid":{"rendered":"http:\/\/mycours.es\/fastcurious\/?page_id=892"},"modified":"2023-02-21T01:59:53","modified_gmt":"2023-02-21T01:59:53","slug":"game-art-visual-identity","status":"publish","type":"page","link":"http:\/\/mycours.es\/fastcurious\/game-art-visual-identity\/","title":{"rendered":"Game Art &#8211; Visual Identity"},"content":{"rendered":"<p>Let&#8217;s look at these independent 2D games.<br \/>\nThey all &#8220;look good&#8221; even though they didn&#8217;t have dozens of people creating assets.<\/p>\n<p>What are the distinctive visual elements?<br \/>\nWhat are the economic strategies in the production of assets?<br \/>\nHow are the visuals related to the mechanics or theme?<\/p>\n<p><iframe loading=\"lazy\" title=\"Hylics - Walkthrough - Part 1\" width=\"840\" height=\"630\" src=\"https:\/\/www.youtube.com\/embed\/0cxoZ_SVZvY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Hohokum Walkthrough\/Let&#039;s Play Part 2 PS4 No Commentary\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/EThyDkod5XU?list=PL0iyNZ60Gka6raIpog2EW5QAp4Hl2mybM\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"LIMBO Walkthrough (No Commentary)\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/9RWGZBZhr1g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"The Cat and the Coup Playthrough No Commentary\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/w-y8TSB7v_k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Eliss Infinity - Universal - HD Gameplay Trailer\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/kw-VwpLyAyA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"FLATGAME Annual 2016: and i made sure to hold your head sideways (Browser)\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/2kGVxWdARBA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Pear Quest - Official Trailer\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/m8vb8n22ZVg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"My Exercise (Full Game No Commentary)\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/hEfixm4ntS8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><strong>Questions for you:<br \/>\n<\/strong><br \/>\n<strong>What&#8217;s your strategy for creating assets economically?<\/strong><br \/>\nSimply &#8220;using 2D graphics&#8221; or &#8220;pixel art&#8221; is not an answer, 2D can require more effort than 3D<\/p>\n<p><strong>How does it relate to the theme and\/or gameplay?<\/strong><br \/>\nConsiderations about mood and functional aspect (eg. we need to highlight interactive objects or separate foreground and background)<\/p>\n<p><b>Does the visual style play to your team&#8217;s strengths?<\/b><br \/>\nJUST FOR A MOMENT let&#8217;s look at this project less as an artwork and more as a portfolio piece.<br \/>\nWhat is that you can do well, that you wish you could showcase, that you are considering as your specialization?<br \/>\nAre there ways to integrate this \u2013 without obviously hijacking the project or devolving into a design-by-committee process?<\/p>\n<p>&nbsp;<\/p>\n<header>\n<h1>Colors<\/h1>\n<p>Most of the games above use a limited, non realistic, color palette.<\/p>\n<p>Find a good color palette:<br \/>\ndon\u2019t pick colors at random<br \/>\nwatch out for overtly saturated tones<br \/>\ntry to limit your dominant colors.<\/p>\n<\/header>\n<div class=\"content\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3156\" src=\"http:\/\/mycours.es\/gamedesign2015\/files\/2015\/10\/98c638e5772645336ecbfde0db2490b3.jpg\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" srcset=\"http:\/\/mycours.es\/gamedesign2015\/files\/2015\/10\/98c638e5772645336ecbfde0db2490b3.jpg 600w, http:\/\/mycours.es\/gamedesign2015\/files\/2015\/10\/98c638e5772645336ecbfde0db2490b3-300x263.jpg 300w\" alt=\"sloth\" width=\"600\" height=\"525\" \/><\/p>\n<p>Create a new based on common patterns\u00a0 with\u00a0<a href=\"https:\/\/kuler.adobe.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kuler<\/a><br \/>\nYou can steal color palettes from\u00a0<a href=\"http:\/\/www.colourlovers.com\/palettes\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a><br \/>\nYou can randomize a color scheme with <a href=\"https:\/\/coolors.co\/app\">this app<\/a><br \/>\nCreate one from a picture with\u00a0<a href=\"https:\/\/www.canva.com\/color-palette\/\" target=\"_blank\" rel=\"noopener noreferrer\">this tool<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-386\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/download.jpeg\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/download.jpeg 1024w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/download-300x169.jpeg 300w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/download-768x432.jpeg 768w\" alt=\"download\" width=\"1024\" height=\"576\" \/><\/p>\n<p>Fernando Ramallo picks colors from pictures of sunsets. Some other designer (I don\u2019t remember who) confessed to rip off colors from\u00a0<a href=\"https:\/\/www.google.com\/search?biw=1164&amp;bih=595&amp;tbm=isch&amp;sa=1&amp;ei=ORCbW_WgF6qE5wKf0I_gDw&amp;q=vintage+polly+pocket&amp;oq=vintage+polly+pocket&amp;gs_l=img.3..0l2j0i67j0l7.100059.101457..101572...0.0..0.67.430.7......1....1..gws-wiz-img.......0i7i30.Jrhw7aGNCPQ\">vintage polly pocket toys<\/a>.<\/p>\n<p><strong>Color ramps<\/strong><\/p>\n<p>Mostly used in pixel art but can it be applied in illustration and anywhere.\u00a0Mind that there is no fixed system to create ramps and palettes,\u00a0but it\u2019s a good idea to familiarize with the practice of hue shifting:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-379\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/hue-shifting.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/hue-shifting.png 1382w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/hue-shifting-300x285.png 300w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/hue-shifting-768x729.png 768w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/hue-shifting-1024x972.png 1024w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/hue-shifting-1200x1139.png 1200w\" alt=\"hue shifting\" width=\"1382\" height=\"1312\" \/><br \/>\nYou can generate a color ramp one from a picture with\u00a0<a href=\"http:\/\/mycours.es\/colorRampCreator\/\" target=\"_blank\" rel=\"noopener noreferrer\">this tool<\/a><\/p>\n<p>Sometimes it makes sense\u00a0to use a monochrome or analogous scheme\u2026<\/p>\n<p><iframe loading=\"lazy\" title=\"VVVVVV - Full Game (No Commentary)\" 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\" allowfullscreen><\/iframe><\/p>\n<p>The color scheme doesn&#8217;t have to stay the same!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-383\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/journey_palettes.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/journey_palettes.png 1624w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/journey_palettes-278x300.png 278w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/journey_palettes-768x828.png 768w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/journey_palettes-950x1024.png 950w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/journey_palettes-1200x1294.png 1200w\" alt=\"journey_palettes\" width=\"1624\" height=\"1751\" \/><\/p>\n<p>But more often than not you will need to differentiate between objects\u00a0and create different ramps for your main colors.<\/p>\n<p>There are plenty of\u00a0<a href=\"http:\/\/pixeljoint.com\/forum\/forum_posts.asp?TID=10695\">tutorials and debates<\/a> on the internet on how to properly create color ramps but it\u2019s a common practice to make sure the ramps are interlocking, so you can have more harmonious edges or tinted outlines that work with different colors.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-380\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/gNPZiCJ.png\" alt=\"gNPZiCJ\" width=\"406\" height=\"197\" \/><\/p>\n<p>Figure out the dominant elements in your game. The scheme above may not work well for a story that takes place in the high seas.<\/p>\n<p>If you follow these principle too closely you may end up with a boring palette, eg your object will look washed out in the same yellow or purple light. The use of bold complementary or non analogous colors, especially for accents.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-382\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter.jpg\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter.jpg 1486w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter-300x88.jpg 300w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter-768x226.jpg 768w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter-1024x302.jpg 1024w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter-1200x354.jpg 1200w\" alt=\"colour theory in screenshots hyper light drifter\" width=\"1486\" height=\"438\" \/><\/p>\n<p>Hyper light drifter\u00a0looks unique also\u00a0because it\u00a0<a href=\"https:\/\/www.google.com\/search?biw=1164&amp;bih=595&amp;tbm=isch&amp;sa=1&amp;ei=7habW_ybJ8PR5gK1g52ICw&amp;q=hyper+light+drifter+levels&amp;oq=hyper+light+drifter+levels&amp;gs_l=img.3..0i24.56706.57610..57819...0.0..0.96.426.6......1....1..gws-wiz-img.......0j0i8i30.IxY-_Z5qiew\">doesn\u2019t really seem to follow\u00a0most\u00a0of pixel art rules<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-384\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colorpallet2-e1409612887535.jpg\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" srcset=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colorpallet2-e1409612887535.jpg 300w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colorpallet2-e1409612887535-187x300.jpg 187w\" alt=\"colorpallet2-e1409612887535\" width=\"300\" height=\"481\" \/><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-385\" src=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colorpallet5-e1409613267620.jpg\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" srcset=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colorpallet5-e1409613267620.jpg 300w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/colorpallet5-e1409613267620-187x300.jpg 187w\" alt=\"colorpallet5-e1409613267620\" width=\"300\" height=\"481\" \/><\/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\" srcset=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM.png 2278w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM-300x174.png 300w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM-768x446.png 768w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM-1024x595.png 1024w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM-1200x697.png 1200w\" 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\" srcset=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM.png 2380w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM-300x173.png 300w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM-768x442.png 768w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM-1024x589.png 1024w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM-1200x691.png 1200w\" 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\" srcset=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM.png 2294w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM-300x173.png 300w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM-768x443.png 768w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM-1024x591.png 1024w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM-1200x693.png 1200w\" 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\" srcset=\"http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM.png 2288w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM-300x175.png 300w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM-768x448.png 768w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM-1024x597.png 1024w, http:\/\/mycours.es\/gamedesign2018\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM-1200x700.png 1200w\" 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\" 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 (No Commentary)\" 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\" allowfullscreen><\/iframe><\/p>\n<\/div>\n<p><iframe loading=\"lazy\" title=\"HOLLOW KNIGHT PS5 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\" 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><strong>Create a mock screenshot for your game. <\/strong>It should set the target in terms of production value and visual polish.<\/p>\n<p>Base it on the art direction discussion you had today.<\/p>\n<p>This delivery won\u2019t likely involve the whole team. The other member should continue on the previous tasks.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1638\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/fake-ducktales-game-screenshots-via-fdg-entertainments-twitt_ncpa.1080-1024x576.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/fake-ducktales-game-screenshots-via-fdg-entertainments-twitt_ncpa.1080-1024x576.png 1024w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/fake-ducktales-game-screenshots-via-fdg-entertainments-twitt_ncpa.1080-300x169.png 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/fake-ducktales-game-screenshots-via-fdg-entertainments-twitt_ncpa.1080-768x432.png 768w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/fake-ducktales-game-screenshots-via-fdg-entertainments-twitt_ncpa.1080.png 1080w\" alt=\"\" width=\"840\" height=\"473\" \/><\/p>\n<p><a href=\"https:\/\/www.deviantart.com\/freedraw-pixelart\/gallery\/64844389\/gamedev-mockups\">Some pixelart examples<\/a>\u00a0\u2013 mock screenshots are more a pixelart thing \u2013\u00a0<a href=\"https:\/\/twitter.com\/search?q=game%20mockup%20min_faves%3A100&amp;src=typed_query\">examples from twitter:<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1639\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/image-4-1024x559.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/image-4-1024x559.png 1024w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/image-4-300x164.png 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/image-4-768x419.png 768w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/image-4-1536x838.png 1536w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/image-4-2048x1117.png 2048w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/image-4-1200x655.png 1200w\" alt=\"\" width=\"840\" height=\"459\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1640\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/EWOfJwkUcAkbql1.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/EWOfJwkUcAkbql1.png 996w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/EWOfJwkUcAkbql1-300x204.png 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/EWOfJwkUcAkbql1-768x521.png 768w\" alt=\"\" width=\"996\" height=\"676\" \/><\/p>\n<h1>Game Juice<\/h1>\n<p><iframe loading=\"lazy\" title=\"Juice it or lose it - a talk by Martin Jonasson &amp; Petri Purho\" src=\"https:\/\/www.youtube.com\/embed\/Fy0aCDmgnxg?feature=oembed\" width=\"840\" height=\"473\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Jan Willem Nijman - Vlambeer - &quot;The art of screenshake&quot; at INDIGO Classes 2013\" src=\"https:\/\/www.youtube.com\/embed\/AJdEqssNZ-U?feature=oembed\" width=\"840\" height=\"473\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<p>These talks are casual, a bit goofy and performative but they describe aspects of the game that can really make a difference: how the game provides a feedback, how to make every action feel satisfying, what are some simple strategies to make a game feel more alive and dynamic\u2026<\/p>\n<p><strong>List the actions and events that <em>require<\/em> visual feedback<\/strong><\/p>\n<p><strong>List the actions and events that <em>could benefit<\/em> from visual feedback<\/strong><\/p>\n<p>Create a priority list to inform your asset production schedule<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s look at these independent 2D games. They all &#8220;look good&#8221; even though they didn&#8217;t have dozens of people creating assets. What are the distinctive visual elements? What are the economic strategies in the production of assets? How are the visuals related to the mechanics or theme? Questions for you: What&#8217;s your strategy for creating &hellip; <a href=\"http:\/\/mycours.es\/fastcurious\/game-art-visual-identity\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Game Art &#8211; Visual Identity&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-892","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/pages\/892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/comments?post=892"}],"version-history":[{"count":1,"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/pages\/892\/revisions"}],"predecessor-version":[{"id":893,"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/pages\/892\/revisions\/893"}],"wp:attachment":[{"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/media?parent=892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}