{"id":138,"date":"2024-02-19T23:59:10","date_gmt":"2024-02-19T23:59:10","guid":{"rendered":"http:\/\/mycours.es\/interactivity\/?page_id=138"},"modified":"2025-09-23T14:57:12","modified_gmt":"2025-09-23T14:57:12","slug":"exercise-modular-art-asset","status":"publish","type":"page","link":"https:\/\/mycours.es\/interactivity\/exercise-modular-art-asset\/","title":{"rendered":"Exercise: Modular art assets"},"content":{"rendered":"<p>Create a set of modular assets.<br \/>\n-Each visual element can be reused in multiple circumstances<br \/>\n-The set can create variation through recombination, rotation, layering, or tiling<br \/>\n-The assets are drawn in a technical way, paying attention to sizes, transparencies, seamless connections, and visual consistency.<\/p>\n<p>Post a picture of the set some samples of their use.<\/p>\n<p>Don&#8217;t reinvent the wheel! Use an existing modular pack as template. You can look up <a href=\"https:\/\/itch.io\/game-assets\/free\/tag-tilemap\">tile maps<\/a> or <a href=\"https:\/\/itch.io\/game-assets\/free\/tag-asset-pack\">assets <\/a>on itchio.<br \/>\nFor 3D you can search Sketchfab for keywords like <a href=\"https:\/\/sketchfab.com\/search?features=downloadable&amp;q=kit&amp;type=models\">kit<\/a>, <a href=\"https:\/\/sketchfab.com\/search?features=downloadable&amp;q=modular&amp;type=models\">modular<\/a>, or <a href=\"https:\/\/sketchfab.com\/search?features=downloadable&amp;q=pack&amp;type=models\">pack<\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Examples:<\/h3>\n<p>Examples from <a href=\"https:\/\/www.kenney.nl\/\">Kenney.nl<\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/Sample.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-142\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/Sample.png\" alt=\"\" width=\"918\" height=\"515\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Sample.png 918w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Sample-300x168.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Sample-768x431.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/spritesheet_tiles.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-139\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/spritesheet_tiles.png\" alt=\"\" width=\"512\" height=\"1024\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/spritesheet_tiles.png 512w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/spritesheet_tiles-150x300.png 150w\" sizes=\"auto, (max-width: 512px) 85vw, 512px\" \/><\/a><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/sample-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-143\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/sample-1.png\" alt=\"\" width=\"918\" height=\"515\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/sample-1.png 918w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/sample-1-300x168.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/sample-1-768x431.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/RPGpack_sheet_2X.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-140\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/RPGpack_sheet_2X.png\" alt=\"\" width=\"2560\" height=\"1664\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/RPGpack_sheet_2X.png 2560w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/RPGpack_sheet_2X-300x195.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/RPGpack_sheet_2X-1024x666.png 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/RPGpack_sheet_2X-768x499.png 768w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/RPGpack_sheet_2X-1536x998.png 1536w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/RPGpack_sheet_2X-2048x1331.png 2048w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/RPGpack_sheet_2X-1200x780.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/sample-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-144\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/sample-2.png\" alt=\"\" width=\"789\" height=\"322\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/sample-2.png 789w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/sample-2-300x122.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/sample-2-768x313.png 768w\" sizes=\"auto, (max-width: 789px) 85vw, 789px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/sheet.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-145\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/sheet.png\" alt=\"\" width=\"980\" height=\"490\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/sheet.png 980w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/sheet-300x150.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/sheet-768x384.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>Examples from itch.io<\/p>\n<p><a href=\"https:\/\/edermunizz.itch.io\/free-pixel-art-forest\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-152\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/hCUwLQ.png\" alt=\"\" width=\"1440\" height=\"480\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/hCUwLQ.png 1440w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/hCUwLQ-300x100.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/hCUwLQ-1024x341.png 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/hCUwLQ-768x256.png 768w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/hCUwLQ-1200x400.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/adamatomic.itch.io\/amarelo\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-153\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/QchWLC.png\" alt=\"\" width=\"1003\" height=\"489\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/QchWLC.png 1003w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/QchWLC-300x146.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/QchWLC-768x374.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Flexible ui elements<a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/gFaTI.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-154\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/gFaTI.gif\" alt=\"\" width=\"2400\" height=\"1680\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Seamless <a href=\"https:\/\/free-game-assets.itch.io\/free-sky-with-clouds-background-pixel-art-set\">multilayered backgrounds<\/a><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-155\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-3.png\" alt=\"\" width=\"1115\" height=\"621\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-3.png 1115w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-3-300x167.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-3-1024x570.png 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-3-768x428.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Seamless, tileable textures<a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/2Uzw0X.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-156\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/2Uzw0X.png\" alt=\"\" width=\"768\" height=\"768\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/2Uzw0X.png 768w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/2Uzw0X-300x300.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/2Uzw0X-150x150.png 150w\" sizes=\"auto, (max-width: 768px) 85vw, 768px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/amanda-lindberg-handpaintedtextures-bark01-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-157\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/amanda-lindberg-handpaintedtextures-bark01-1.jpg\" alt=\"\" width=\"661\" height=\"661\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/amanda-lindberg-handpaintedtextures-bark01-1.jpg 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/amanda-lindberg-handpaintedtextures-bark01-1-300x300.jpg 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/amanda-lindberg-handpaintedtextures-bark01-1-150x150.jpg 150w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/amanda-lindberg-handpaintedtextures-bark01-1-768x768.jpg 768w\" sizes=\"auto, (max-width: 661px) 85vw, 661px\" \/><\/a><\/p>\n<p>Multilayered characters (mr potatohead style) as seen in avatar creators like <a href=\"https:\/\/picrew.me\/\">picrew<\/a><br \/>\nExamples <a href=\"https:\/\/picrew.me\/image_maker\/136066\">1<\/a> <a href=\"https:\/\/picrew.me\/image_maker\/166654\">2<\/a> <a href=\"https:\/\/picrew.me\/image_maker\/582810\">3<\/a> <a href=\"https:\/\/picrew.me\/image_maker\/25624\">4<\/a> <a href=\"https:\/\/twitter.com\/monsterdating\">5<\/a> <a href=\"https:\/\/picrew.me\/image_maker\/684527\">6<\/a> <a href=\"https:\/\/picrew.me\/image_maker\/196678\">7<\/a> <a href=\"https:\/\/picrew.me\/image_maker\/632067\">8<\/a> <a href=\"https:\/\/picrew.me\/image_maker\/684527\">9<\/a><\/p>\n<p>Or random\/procedural generators<br \/>\nExamples <a href=\"https:\/\/twitter.com\/Philateleology\">1<\/a> <a href=\"https:\/\/twitter.com\/EmojiMashupFace\">2<\/a> <a href=\"https:\/\/twitter.com\/WyWilderness\">3<\/a> <a href=\"https:\/\/twitter.com\/RestroomGender\">4<\/a> <a href=\"https:\/\/twitter.com\/FermiPasteladox\">5<\/a> <a href=\"https:\/\/botwiki.org\/bot\/emoji_pizzas\/\">6<\/a> <a href=\"https:\/\/twitter.com\/some_new_cities\">7<\/a> <a href=\"https:\/\/watabou.itch.io\/tank-doodles\">9<\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/picrewcoverimage1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-159\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/picrewcoverimage1.jpg\" alt=\"\" width=\"1077\" height=\"1077\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/picrewcoverimage1.jpg 1077w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/picrewcoverimage1-300x300.jpg 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/picrewcoverimage1-1024x1024.jpg 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/picrewcoverimage1-150x150.jpg 150w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/picrewcoverimage1-768x768.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/1389830-full.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-160\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/1389830-full.jpg\" alt=\"\" width=\"1160\" height=\"772\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/1389830-full.jpg 1160w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/1389830-full-300x200.jpg 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/1389830-full-1024x681.jpg 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/1389830-full-768x511.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>In 3D<\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-158\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5-1.png\" alt=\"\" width=\"1180\" height=\"647\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5-1.png 1180w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5-1-300x164.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5-1-1024x561.png 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5-1-768x421.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/ss_a76d10128709406484676c88c31308fb544cb0d6.600x338.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-147\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/ss_a76d10128709406484676c88c31308fb544cb0d6.600x338.jpg\" alt=\"\" width=\"600\" height=\"337\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/ss_a76d10128709406484676c88c31308fb544cb0d6.600x338.jpg 600w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/ss_a76d10128709406484676c88c31308fb544cb0d6.600x338-300x169.jpg 300w\" sizes=\"auto, (max-width: 600px) 85vw, 600px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/store.steampowered.com\/app\/2533960\/SUMMERHOUSE\/\">Summer house<\/a> demo<\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/blocks_1280.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-150\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/blocks_1280.png\" alt=\"\" width=\"1280\" height=\"773\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/blocks_1280.png 1280w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/blocks_1280-300x181.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/blocks_1280-1024x618.png 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/blocks_1280-768x464.png 768w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/blocks_1280-1200x725.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" title=\"Infinite procedurally generated city in Unity\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/-W7zt8181Zo?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>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" title=\"Townscaper Gameplay (PC UHD) [4K60FPS]\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/2SjjGHQeuoI?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>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" title=\"SGC21- Oskar Sta\u030alberg - Beyond Townscapers\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/Uxeo9c-PX-w?start=2834&#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","protected":false},"excerpt":{"rendered":"<p>Create a set of modular assets. -Each visual element can be reused in multiple circumstances -The set can create variation through recombination, rotation, layering, or tiling -The assets are drawn in a technical way, paying attention to sizes, transparencies, seamless connections, and visual consistency. Post a picture of the set some samples of their use. &hellip; <a href=\"https:\/\/mycours.es\/interactivity\/exercise-modular-art-asset\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Exercise: Modular art assets&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":22,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-138","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages\/138","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=138"}],"version-history":[{"count":5,"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages\/138\/revisions"}],"predecessor-version":[{"id":161,"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages\/138\/revisions\/161"}],"wp:attachment":[{"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/media?parent=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}