<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:googleplay="http://www.google.com/schemas/play-podcasts/1.0"><channel><title><![CDATA[Gamedev Pills – Building tiny games for fantasy consoles]]></title><description><![CDATA[Helping you create exclusive cartridges for fantasy consoles like PICO‑8 and Picotron. Subscribe to obtain access to tools, cartridges and cozy tutorials on your inbox]]></description><link>https://www.gamedevpills.com</link><image><url>https://substackcdn.com/image/fetch/$s_!A_2R!,w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbd07efad-2f6a-4829-a467-6e608872b1db_500x500.png</url><title>Gamedev Pills – Building tiny games for fantasy consoles</title><link>https://www.gamedevpills.com</link></image><generator>Substack</generator><lastBuildDate>Sun, 17 May 2026 13:32:29 GMT</lastBuildDate><atom:link href="https://www.gamedevpills.com/feed" rel="self" type="application/rss+xml"/><copyright><![CDATA[José Carlos Pérez]]></copyright><language><![CDATA[en]]></language><webMaster><![CDATA[josprez@substack.com]]></webMaster><itunes:owner><itunes:email><![CDATA[josprez@substack.com]]></itunes:email><itunes:name><![CDATA[José Pérez]]></itunes:name></itunes:owner><itunes:author><![CDATA[José Pérez]]></itunes:author><googleplay:owner><![CDATA[josprez@substack.com]]></googleplay:owner><googleplay:email><![CDATA[josprez@substack.com]]></googleplay:email><googleplay:author><![CDATA[José Pérez]]></googleplay:author><itunes:block><![CDATA[Yes]]></itunes:block><item><title><![CDATA[Cartridge of the week - 8th May]]></title><description><![CDATA[Inspiration from the top fantasy console developers]]></description><link>https://www.gamedevpills.com/p/cartridge-of-the-week-8th-may</link><guid isPermaLink="false">https://www.gamedevpills.com/p/cartridge-of-the-week-8th-may</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Fri, 08 May 2026 07:01:05 GMT</pubDate><enclosure url="https://substack-post-media.s3.amazonaws.com/public/images/2400abe3-e716-4d13-b440-4dc6461f51b7_1200x630.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>We are at the 35% of the year &#8212; just before the summer start, this period just take me shortly to those times when I was a teenager and I was playing Pokemon with my <em>Game Boy Color</em>. It was really exciting back then&#8230;</p><p>Playing fantasy console games (Pico-8, Picotron, etc) just take me to a similar momentum, just you and your tiny game.</p><p>At this series of articles, I want to share the best games/concepts or just in-development cartridges. You can actually take as inspiration for your next prototype/concept during your gamedev sessions.</p><p>You are welcome to share your projects with me, so they could become the next ones here.</p><div><hr></div><p>Not only looking at the <strong>Top 5%</strong>, but actually looking at <strong>Top 20%</strong> games and other experimental ideas to provide visibility and support small individiuals &#8212; Let&#8217;s go!</p><div><hr></div><h1>Pod Journey by Whetticus (Pico-8)</h1><div class="image-gallery-embed" data-attrs="{&quot;gallery&quot;:{&quot;images&quot;:[{&quot;type&quot;:&quot;image/gif&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/b81f529a-d026-486b-aa2d-c0629d8fe44b_384x384.gif&quot;},{&quot;type&quot;:&quot;image/png&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/d6dfc544-720e-4990-baae-e8b79316a13f_384x384.png&quot;}],&quot;caption&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;staticGalleryImage&quot;:{&quot;type&quot;:&quot;image/png&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/23f28227-5bb3-4e90-a79a-2244764195e0_1456x720.png&quot;}},&quot;isEditorNode&quot;:true}"></div><p>Some days ago I discovered <strong>Pod Journey </strong>created by Whetticus. I had to do a force quit to stop playing it, at the end is a really simple game loop, but quite addictive. You are kind of a paper airplane that can just swim without dying in the process and your goal is to obtain as much score as possible meanwhile you keep your <em>pods</em> alive.</p><div><hr></div><p style="text-align: center;"><a href="https://www.lexaloffle.com/bbs/?pid=188658#p">Play Pod Journey</a></p><p style="text-align: center;"><a href="https://www.lexaloffle.com/bbs/?uid=145526">It's author</a></p><div><hr></div><h3>Aesthetics</h3><p>I can&#8217;t see a complex art direction at this game, but every individual aspects is polished enough to create a really good statement that I like:</p><p><em>The whole becomes far greater than the sum of its parts</em></p><p>The smooth scrolling effect when the small airplane is moving, the UI effects (colors) to indicate the <em>flow</em> state of your session (AKA pod), the dithering effect at the water creating that deep feeling, those refinements combined greate a solid first impression.</p><h3>Mechanics</h3><p>Right cursor = flip pod to right</p><p>Left cursor = flip pod to left</p><p>Really simple control, this is something that will always help to come-up with new ideas. <em>What if you create a game that only have one button?</em></p><h3>Design Decisions</h3><p>Those are the ones I can see, but there should be more under the hood:</p><ul><li><p>Water immersion slows down a little</p></li><li><p>Water inmersion slows down a lot when you land with the side of the Pod</p></li><li><p>Pace of counter increase is based on Pod speed.</p></li><li><p>360&#186; flip of the Pod increase the score multiplier, creating a tiny incremental risk system, if you touch water in the middle of the flip speed is decreased, your multiplier is back to 0.</p></li></ul><p>Looking at those actions you can see they are incrementally connected between them to create that flow state on a videogame, easy to play, difficult to master.</p><h3>Tier S: Game Feel</h3><p>By far, the best aspect of the game, it feels solid, smooth and most importantly engaging. You really want to flow with the waves and increase the score of your session, is that kind of dopamine boost effect that you can experience with <a href="https://store.steampowered.com/app/2379780/Balatro/">Balatro</a> it&#8217;s somehow here &#8212; Just give it a try</p><p></p>]]></content:encoded></item><item><title><![CDATA[Creating a RPG concept in 64x64 Pixels]]></title><description><![CDATA[The power of PICO-8 display modes and its camera function]]></description><link>https://www.gamedevpills.com/p/creating-a-rpg-concept-in-64x64-pixels</link><guid isPermaLink="false">https://www.gamedevpills.com/p/creating-a-rpg-concept-in-64x64-pixels</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Sat, 02 May 2026 14:02:57 GMT</pubDate><enclosure url="https://substack-post-media.s3.amazonaws.com/public/images/c35fb461-259f-44d3-a27c-e4f0708d4248_1200x630.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>No problem, I got you, I understand after your first project with Godot you were a bit tired with the display viewport configuration and on top of that, you had to deal with your pixel art looking strange at different resolutions&#8230;</p><p>But let me tell you &#8212; Fantasy consoles to the rescue!</p><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;b97944d5-b264-448a-ba85-ffb1fb9be231&quot;,&quot;duration&quot;:null}"></div><p>The more time I play with gamedev systems, concepts and I read about this hobby, the more I really want to minify to it&#8217;s minimal expression. Probably it is my creative approach guiding me on this direction.</p><p>Think about this; it is easy to extrapolate a small concept into a bigger project, but it is quite difficult to do the opposite; big and complex projects require lot of energy from our brain to be broken down into smaller pieces.</p><p>The cartride of today just have <strong>135 lines of code</strong>, it use <strong>135 tokens</strong> and the cartridge size is just <strong>6KB.</strong></p><p>You will need just <strong>3 Minutes </strong>to understand and complete this concept</p><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!FSVO!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!FSVO!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png 424w, https://substackcdn.com/image/fetch/$s_!FSVO!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png 848w, https://substackcdn.com/image/fetch/$s_!FSVO!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png 1272w, https://substackcdn.com/image/fetch/$s_!FSVO!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!FSVO!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png" width="380" height="486.875" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:205,&quot;width&quot;:160,&quot;resizeWidth&quot;:380,&quot;bytes&quot;:3614,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/196201690?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!FSVO!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png 424w, https://substackcdn.com/image/fetch/$s_!FSVO!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png 848w, https://substackcdn.com/image/fetch/$s_!FSVO!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png 1272w, https://substackcdn.com/image/fetch/$s_!FSVO!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2ae07065-2e0b-468e-9d06-6170362e69af_160x205.png 1456w" sizes="100vw" fetchpriority="high"></picture><div></div></div></a></figure></div><h2>Learnings</h2><p>A tiny RPG skeleton is going to teach you how to manage PICO-8 <code>camera()</code> function and you will discover the 64x64 pixels display mode. </p><p>Those components combined could leverage your creativity into new prototypes and concepts you never thought before. </p><p>Creativity thrives within limits :)</p><h3>Tiny Display Mode (64x64 pixels)</h3><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!VeX7!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!VeX7!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!VeX7!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!VeX7!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!VeX7!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!VeX7!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif" width="384" height="384" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/e822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:240722,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/196201690?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!VeX7!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!VeX7!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!VeX7!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!VeX7!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe822bc3b-2aa6-4d32-9ab9-c250458a8005_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>In order to set our fantasy to that resolution, we just need to call the <code>poke() </code>function at the <code>init()</code> phase</p><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!yatz!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!yatz!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png 424w, https://substackcdn.com/image/fetch/$s_!yatz!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png 848w, https://substackcdn.com/image/fetch/$s_!yatz!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png 1272w, https://substackcdn.com/image/fetch/$s_!yatz!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!yatz!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png" width="816" height="105" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/605888bb-a663-422b-b9cb-13c892a8958a_816x105.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:105,&quot;width&quot;:816,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:13291,&quot;alt&quot;:&quot;&quot;,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/196201690?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" title="" srcset="https://substackcdn.com/image/fetch/$s_!yatz!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png 424w, https://substackcdn.com/image/fetch/$s_!yatz!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png 848w, https://substackcdn.com/image/fetch/$s_!yatz!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png 1272w, https://substackcdn.com/image/fetch/$s_!yatz!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F605888bb-a663-422b-b9cb-13c892a8958a_816x105.png 1456w" sizes="100vw" loading="lazy"></picture><div></div></div></a></figure></div><p>For those that love computers engineering, just being able to manipulate a tiny operating system memory address is exciting, right?</p><div class="highlighted_code_block" data-attrs="{&quot;language&quot;:&quot;typescript&quot;,&quot;nodeId&quot;:&quot;3c38e8c4-d435-4a3e-a453-9543cd3c334b&quot;}" data-component-name="HighlightedCodeBlockToDOM"><pre class="shiki"><code class="language-typescript">function _init()
p = {x=8,y=16,s=5}
c = {x=0,y=0}
-- swithing video modes
-- cool 64x64
poke(0x5f2c,3)
cls()
end</code></pre></div><h3>Character Movement (Based on 8x8 Tiles)</h3><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!uPNd!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!uPNd!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!uPNd!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!uPNd!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!uPNd!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!uPNd!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif" width="426" height="426" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/a8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:426,&quot;bytes&quot;:87091,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/196201690?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!uPNd!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!uPNd!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!uPNd!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!uPNd!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa8d6f318-7281-455d-a3ff-5716b562874c_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Taking into consideration our concept is a classic RPG game, we need to move our character towards the adjacent tile. <code>btnp() </code>is the function we are going to use to connect the player controller with our character movement.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!JCGv!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!JCGv!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png 424w, https://substackcdn.com/image/fetch/$s_!JCGv!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png 848w, https://substackcdn.com/image/fetch/$s_!JCGv!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png 1272w, https://substackcdn.com/image/fetch/$s_!JCGv!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!JCGv!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png" width="844" height="329" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/0096da5a-7987-46c8-8835-1c82325bd140_844x329.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:329,&quot;width&quot;:844,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:50440,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/196201690?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!JCGv!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png 424w, https://substackcdn.com/image/fetch/$s_!JCGv!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png 848w, https://substackcdn.com/image/fetch/$s_!JCGv!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png 1272w, https://substackcdn.com/image/fetch/$s_!JCGv!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0096da5a-7987-46c8-8835-1c82325bd140_844x329.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><div class="highlighted_code_block" data-attrs="{&quot;language&quot;:&quot;typescript&quot;,&quot;nodeId&quot;:&quot;38d1c9bb-0944-429b-8356-27ad7ca714f6&quot;}" data-component-name="HighlightedCodeBlockToDOM"><pre class="shiki"><code class="language-typescript">function _update()
if btnp(2) then p.y -=8 end
if btnp(1) then p.x +=8 end
if btnp(3) then p.y +=8 end
if btnp(0) then p.x -=8 end
end</code></pre></div><h3>Smooth Camera Movement</h3><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!N57W!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!N57W!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!N57W!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!N57W!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!N57W!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!N57W!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif" width="384" height="384" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/fb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:169519,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/196201690?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!N57W!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!N57W!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!N57W!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!N57W!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffb1f7b85-b3f1-44ad-a601-afef67d24fa1_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Most of the functions you can call using PICO-8 library have in common that they just need few parameters, that&#8217;s the case of <code>camera() </code>where we only need to set X and Y coordinates.</p><p>Actually to create a smooth movement it is a different story, because PICO-8 doesn&#8217;t come with functions to provide that nice scrolling, but nothing we can&#8217;t code on our own.</p><p>I&#8217;ve defined a lerp() function that is going to go from A to B by fractions</p><div class="highlighted_code_block" data-attrs="{&quot;language&quot;:&quot;typescript&quot;,&quot;nodeId&quot;:&quot;2d49d823-3594-4243-bb4e-2e88e92aff3b&quot;}" data-component-name="HighlightedCodeBlockToDOM"><pre class="shiki"><code class="language-typescript">function lerp(a,b,t)
  return a + (b - a) * t
end</code></pre></div><p>Now we just neet to detect when the character step-up at the tile that triggers the camera movement. First let me introduce you to the concept of sprites <strong>flags</strong></p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!r7yT!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!r7yT!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!r7yT!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!r7yT!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!r7yT!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!r7yT!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif" width="384" height="384" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:206680,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/196201690?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!r7yT!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!r7yT!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!r7yT!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!r7yT!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F640541e0-b188-4bdd-993c-e1e251016ad2_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Each sprite have a total of 8 flags we can set for different controls, at our specific example I&#8217;ve just set the flag 1 as true to trigger the camera movement.</p><ul><li><p><code>fget(tile, flag) - </code>Return true/false based on a specific tile flag</p></li><li><p><code>mget(posx, posy) - </code>Return the tile of the map based on coordinates</p></li></ul><div class="highlighted_code_block" data-attrs="{&quot;language&quot;:&quot;typescript&quot;,&quot;nodeId&quot;:&quot;e17cb903-f012-43d1-9518-62a429969a48&quot;}" data-component-name="HighlightedCodeBlockToDOM"><pre class="shiki"><code class="language-typescript">if fget(mget(p.x/8,p.y/8),1) then
   c.x=lerp(c.x,57,0.1)
end</code></pre></div><p>As soon as the player move step into the tile, the position X of the camera will be moving to the right creating that smooth effect.</p><p>Feel free to experiment on your own or just to download the complete concept with all the resources.</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://drive.proton.me/urls/1C58A9Z7C8#UNJ5FxpXQBJ4&quot;,&quot;text&quot;:&quot;Download the cartridge&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://drive.proton.me/urls/1C58A9Z7C8#UNJ5FxpXQBJ4"><span>Download the cartridge</span></a></p><p style="text-align: center;">Thank you for reading &#128140;</p>]]></content:encoded></item><item><title><![CDATA[Making An Idle Game for Pico-8 - Devlog #0]]></title><description><![CDATA[Creativity will show-up in the making, not at the thinking at all.]]></description><link>https://www.gamedevpills.com/p/making-an-idle-game-for-pico-8-devlog</link><guid isPermaLink="false">https://www.gamedevpills.com/p/making-an-idle-game-for-pico-8-devlog</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Sat, 25 Apr 2026 07:30:40 GMT</pubDate><enclosure url="https://substack-post-media.s3.amazonaws.com/public/images/81a64151-9b7a-4d8a-b700-2e1181d758b5_1200x630.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>My uncle introduced me to Pico-8, he is passionate about coding and engineering in general. (working as software engineer)</p><p>I clearly remember when I started playing with it&#8230; I was completely out of ideas to create games and my intentions were only around creating the next <em>Super Metroid </em>or <em>Zelda </em>demake. </p><p>Games that even at their release, already had <strong>iterations </strong>&#8212; I didn&#8217;t have the skills to create them nor I have now&#8230; </p><p>But this devlog is actually about how by being consistent, through iterations at small system will not only growth your skills but actually trigger ideas that can take you somewhere.</p><blockquote><p><em>Pareto Principle - Focus on the 20% of efforts that produce 80% of results</em></p></blockquote><p>Applying pareto principle to videogames, we can say when the core mechanic is polished and working our 20% already produced the 80% of our game. But we need to know the remaining 20% is going to require 80% of our efforts.</p><h2>How it started?</h2><p>First, I wanted to show you the resources (AKA Assets) I actually created during my gamedev sessions with PICO-8, this is the origin</p><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;7f99c39a-08d6-400e-b852-502939dd7923&quot;,&quot;duration&quot;:null}"></div><p>My prototype has been in development with a completely different idea in mind, at the beginning, I wanted to create a <em>Super Mario Maker</em> demake for PICO-8, you can read my previous post about this topic.</p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;3f972d48-c4e9-47b5-9293-33d7d19cf26b&quot;,&quot;caption&quot;:&quot;[This workshop is part of a series that started on November 2025, I recommend you to start with the fundamentals before moving forward&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Creating Super Mario Maker Demake #1 - Level Editor Toolbar, Mouse and Camera&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;I make tiny cartridges for PICO&#8209;8 and Picotron&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-12-14T16:27:08.140Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!a7I5!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/creating-super-mario-maker-demake&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:181507717,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:3,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Building tiny games for fantasy consoles&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!A_2R!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbd07efad-2f6a-4829-a467-6e608872b1db_500x500.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><p>There are two positive things I took from my previous approach, even though it was a completely different idea, during that process I created the following key elements:</p><h3>UI/UX Components</h3><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!nI12!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!nI12!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png 424w, https://substackcdn.com/image/fetch/$s_!nI12!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png 848w, https://substackcdn.com/image/fetch/$s_!nI12!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png 1272w, https://substackcdn.com/image/fetch/$s_!nI12!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!nI12!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png" width="581" height="336.3894230769231" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/dd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:843,&quot;width&quot;:1456,&quot;resizeWidth&quot;:581,&quot;bytes&quot;:14620,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/194947378?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!nI12!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png 424w, https://substackcdn.com/image/fetch/$s_!nI12!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png 848w, https://substackcdn.com/image/fetch/$s_!nI12!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png 1272w, https://substackcdn.com/image/fetch/$s_!nI12!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdd0afb39-9028-4013-8716-f3022bcfa2fd_1948x1128.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption"></figcaption></figure></div><h3>Level Designer System</h3><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;196b9415-0291-4c5a-b04f-bfa5c4c1f6be&quot;,&quot;duration&quot;:null}"></div><p>Now I can <strong>design levels</strong> faster at runtime, which is quite cool to <strong>iterate </strong>and test your gameplay loop until you feel it is fun and engaging, on the other hand I have a small UI library to create menus/dialog or other components (PICO-8 doesn&#8217;t have a native implementation for UI, as Picotron have)</p><p>All this comes with a cost at our tiny memory space, my project already taking 4900 out of 8192 tokens.</p><p>But&#8230;as they say now. <em>Don&#8217;t be mid - Be the main character</em></p><h2>Ideation</h2><p>My idea shifted from creating a classic 2D Platform with a level editor to an idle game where the player will be able to spawn enemies to kill that tiny human that you can see at the previous video. The human will be moving forward on a 2D Level eager to kill each enemy the step-up in the way.</p><p>It is still under development, but I think the loop could be fun after making efforts at the game feel.</p><p>The interesting part is what clicked on my mind to change the original idea&#8230;It was the <strong>aesthetics </strong>after few iterations with the game, originally my <em>Super Pico Maker </em>project had a simple static character and the level generator was based on a forest theme.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!gEkF!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!gEkF!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png 424w, https://substackcdn.com/image/fetch/$s_!gEkF!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png 848w, https://substackcdn.com/image/fetch/$s_!gEkF!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png 1272w, https://substackcdn.com/image/fetch/$s_!gEkF!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!gEkF!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png" width="472" height="472" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/e2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:472,&quot;bytes&quot;:1947,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/194947378?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!gEkF!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png 424w, https://substackcdn.com/image/fetch/$s_!gEkF!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png 848w, https://substackcdn.com/image/fetch/$s_!gEkF!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png 1272w, https://substackcdn.com/image/fetch/$s_!gEkF!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2d58bdf-d6be-45a7-a5e5-ce63c0353e79_384x384.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">At the beginning</figcaption></figure></div><p>During some of my short gamedev sessions, I started doing some adjustment at the main character, the environment&#8230; and then I&#8217;ve just liked the mini-voxel (sorry for the voxel artist) style I created for my tiny game. How I end up with that approach? Just <strong>iterating</strong> over the initial idea.</p><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;b9d3c224-54c9-4475-ba54-456423d1c939&quot;,&quot;duration&quot;:null}"></div><h2>State of the game</h2><p>I&#8217;m now reading Game Programming Patterns from <em>Robert Nystrom </em>which is available to buy (or download a sample) <a href="https://gameprogrammingpatterns.com/">here</a>.</p><p>The first pattern that I&#8217;m applying to my next full game (yes, because I&#8217;m going to complete it) is called <em>Command </em>and the concept is quite simple when you see an example at code. </p><p>Let&#8217;s think about your first playable character on a platform 2D game. Your first intention will be to make it able to move at the screen, that require that we increase the X,Y position of a given sprite &#8212; cool.</p><p>Reading all the tutorials you can find about this topic, you will find something like this</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!YZfe!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!YZfe!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png 424w, https://substackcdn.com/image/fetch/$s_!YZfe!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png 848w, https://substackcdn.com/image/fetch/$s_!YZfe!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png 1272w, https://substackcdn.com/image/fetch/$s_!YZfe!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!YZfe!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png" width="644" height="644" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/3dcee74b-b021-4885-8084-8e46531b2178_384x384.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:644,&quot;bytes&quot;:3705,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/194947378?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!YZfe!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png 424w, https://substackcdn.com/image/fetch/$s_!YZfe!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png 848w, https://substackcdn.com/image/fetch/$s_!YZfe!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png 1272w, https://substackcdn.com/image/fetch/$s_!YZfe!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3dcee74b-b021-4885-8084-8e46531b2178_384x384.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>If player press <code>left </code>or <code>right, </code>then X position will be increased or decreased. This is perfectly simple and<code> </code>works quite well, but it can only continue working if the project stay with this size and never growth again&#8230; which is not our plan.</p><h3>The Command pattern</h3><p>This pattern is not only quite interesting for an idle game like the one I&#8217;m aiming to create, but for any kind of game at the end. </p><p>We can create a new tab (or lua file in case you followed my <a href="https://www.gamedevpills.com/p/create-your-gamedev-environment-for">powerful gamedev environment</a>) where we define the actions (verbs) that we want to define for our sprite. I&#8217;ve just defined:</p><ul><li><p>move_right</p></li><li><p>move_left</p></li></ul><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!Q8eB!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!Q8eB!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!Q8eB!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!Q8eB!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!Q8eB!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!Q8eB!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif" width="602" height="602" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/b9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:602,&quot;bytes&quot;:317869,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/194947378?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!Q8eB!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!Q8eB!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!Q8eB!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!Q8eB!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb9689d6c-9ce9-4b08-8c15-f0c38f7b5a58_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Now, at our main logic, instead of increasing the X coordinate when the player press the button, we just call our <code>move_right</code><strong> </strong>or <code>move_left </code>functions, but Jos&#233; aren&#8217;t we doing the same thing?</p><p>Think about systems and the need to escalate the code in the future, in case you want to move a NPC or another object of the game, you can actually do it calling the <code>move_right</code> function, you will be saving tokens as you don&#8217;t need to repeat the same instructions over and over again. Let me show you:</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!zm8u!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!zm8u!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!zm8u!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!zm8u!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!zm8u!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!zm8u!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif" width="598" height="598" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:598,&quot;bytes&quot;:217781,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/194947378?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!zm8u!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!zm8u!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!zm8u!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!zm8u!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1dda4b6a-a1a7-497a-be2f-84d5044a358e_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Now is when your creativity and inspiration join forces on your mind to create <code>commands </code>for other action like shoot, jump, swim&#8230; and any other that you could need on your tiny project.</p><p>I&#8217;m working now on building the human actions where he is going to move and attack an enemy as soon as you spawn it on the level, being the main mechanic of the game, I will reveal more details on my next devlog and actually show some gameplay of it.</p><p>I&#8217;m really excited with this project and I expect to take the best out of PICO-8 &#8212; Because we all know the potential it have, right?</p><p>Thank you for reading &#10084;&#65039;&#127918;</p><h2></h2><p></p>]]></content:encoded></item><item><title><![CDATA[Create Your Battle System - Cozy Coding with Picotron]]></title><description><![CDATA[Come, have a seat with your coffee and let's build systems]]></description><link>https://www.gamedevpills.com/p/create-your-battle-system-cozy-coding</link><guid isPermaLink="false">https://www.gamedevpills.com/p/create-your-battle-system-cozy-coding</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Thu, 09 Apr 2026 15:30:53 GMT</pubDate><enclosure url="https://substackcdn.com/image/fetch/$s_!r7dK!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>A high percentage of our success and specially consistency at a given goal is driven by the context where it happens. Thinking about <em>Fantasy Consoles</em>, the easiness, immediacy and <em>Toy</em> appealing of the tools are creating a delightful attraction just at the moment we open them.</p><p>Because you want to be <em>productive</em> on your spare time, but to a degree, as we also need to slow down, let me introduce you to <strong>Picotron </strong>our new gamedev environment.</p><p><em>Let&#8217;s create your own fantasy cartridge</em>!</p><h1>Why Picotron?</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!nU6J!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!nU6J!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png 424w, https://substackcdn.com/image/fetch/$s_!nU6J!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png 848w, https://substackcdn.com/image/fetch/$s_!nU6J!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png 1272w, https://substackcdn.com/image/fetch/$s_!nU6J!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!nU6J!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png" width="960" height="540" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/06a8009f-7892-42b4-b063-5e39104fb722_960x540.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:540,&quot;width&quot;:960,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:7952,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/192888074?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!nU6J!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png 424w, https://substackcdn.com/image/fetch/$s_!nU6J!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png 848w, https://substackcdn.com/image/fetch/$s_!nU6J!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png 1272w, https://substackcdn.com/image/fetch/$s_!nU6J!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a8009f-7892-42b4-b063-5e39104fb722_960x540.png 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p><a href="https://www.lexaloffle.com/picotron.php">Picotron</a> is still on development, but it is the perfect bridge between starting from zero on gamedev to potentially jump into professional environments like Godot or Unreal.</p><ul><li><p>Lua 5.4 (Pico-8 has a minified Lua Version)</p></li><li><p>It is a tiny operating system! &#10084;&#65039;</p></li><li><p>No tokens limitation &#128640;</p></li><li><p>No limit at spritesheet size, meaning we can now have 16x16 or even 32x32 sprites</p></li><li><p>Improved separation at the UI between code, art and music from what we had on PICO-8</p></li><li><p>Host Mode enabled. We can easily transfer files between Picotron environment and our host machine (Windows, Linux and MacOS)</p></li></ul><p>But again, context matter and even though we barely have limitations at this <em>Fantasy console </em>(You can even created 3D games) the pixel-art theme and it&#8217;s inner design are already speaking about the <strong>scope </strong>we will follow.</p><h1>Let&#8217;s start! Requirements:</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!Y8Zs!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!Y8Zs!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif 424w, https://substackcdn.com/image/fetch/$s_!Y8Zs!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif 848w, https://substackcdn.com/image/fetch/$s_!Y8Zs!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif 1272w, https://substackcdn.com/image/fetch/$s_!Y8Zs!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!Y8Zs!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif" width="960" height="540" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/4a306843-995a-47b0-a606-88d679c56548_960x540.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:540,&quot;width&quot;:960,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:608436,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/192888074?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!Y8Zs!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif 424w, https://substackcdn.com/image/fetch/$s_!Y8Zs!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif 848w, https://substackcdn.com/image/fetch/$s_!Y8Zs!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif 1272w, https://substackcdn.com/image/fetch/$s_!Y8Zs!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4a306843-995a-47b0-a606-88d679c56548_960x540.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p><em>&#8212; This scene looks familiar right? </em></p><p>This is the cartridge for today, you will be creating a turn-based combat system that you can modify and add later to your picotron projects, the ingredients for our cartridge are the following:</p><ul><li><p>Pixel Art sprites for our creatures (Included at the cartridge)</p></li><li><p>Picotron GUI Components - more information <a href="https://www.lexaloffle.com/dl/docs/picotron_manual.html#GUIs">here</a></p></li><li><p>Tables with information as:</p><ul><li><p>life points</p></li><li><p>strenght</p></li><li><p>defense</p></li><li><p>speed (Not in use, yet)</p></li></ul></li></ul><h1>Cozy Coding</h1><p>The main idea behind this system is to create a template that could be used as combat system for turn-based games. What we want to solve are the following points:</p><ul><li><p>RNG for monster stats (both player and enemy)</p></li><li><p>Basic Loop: Player Action &#8594; Enemy Action &#8594; Start over</p></li><li><p>Create an UI for the player based on Picotron GUI library. <em>I can confirm it is quite good.</em></p></li></ul><h3>Game Loop</h3><p>Let&#8217;s start by the fundamentals</p><div class="highlighted_code_block" data-attrs="{&quot;language&quot;:&quot;bash&quot;,&quot;nodeId&quot;:&quot;35af052e-9f9f-4e5a-817d-b0e09ac02d9a&quot;}" data-component-name="HighlightedCodeBlockToDOM"><pre class="shiki"><code class="language-bash">function _init()
-- CODE
end

function _update()
-- CODE
end

function _draw()
-- CODE
end</code></pre></div><p>At any given gamedev engine, there should be at least the above mentioned functions. <code>init, update </code>and<code> draw </code>with those we can<code> </code>create all the logic needed for a game loop.</p><ul><li><p>At the init we initialize all the values required for later at our game logic</p></li><li><p>At the update we make sure values are dinamically changing (sprites position, user interaction, etc)</p></li><li><p>At the draw we render all our sprites to show our wonderful sprites</p></li></ul><div class="subscription-widget-wrap-editor" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe&quot;,&quot;language&quot;:&quot;en&quot;}" data-component-name="SubscribeWidgetToDOM"><div class="subscription-widget show-subscribe"><div class="preamble"><p class="cta-caption">Gamedev Pills &#8211; Building tiny games for fantasy consoles is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.</p></div><form class="subscription-widget-subscribe"><input type="email" class="email-input" name="email" placeholder="Type your email&#8230;" tabindex="-1"><input type="submit" class="button primary" value="Subscribe"><div class="fake-input-wrapper"><div class="fake-input"></div><div class="fake-button"></div></div></form></div></div><h3>Initialize our system objects</h3><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!r7dK!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!r7dK!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png 424w, https://substackcdn.com/image/fetch/$s_!r7dK!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png 848w, https://substackcdn.com/image/fetch/$s_!r7dK!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png 1272w, https://substackcdn.com/image/fetch/$s_!r7dK!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!r7dK!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png" width="960" height="540" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/006659e3-3807-4dbc-8935-63095600d256_960x540.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:540,&quot;width&quot;:960,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:7675,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/192888074?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!r7dK!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png 424w, https://substackcdn.com/image/fetch/$s_!r7dK!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png 848w, https://substackcdn.com/image/fetch/$s_!r7dK!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png 1272w, https://substackcdn.com/image/fetch/$s_!r7dK!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F006659e3-3807-4dbc-8935-63095600d256_960x540.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><div class="highlighted_code_block" data-attrs="{&quot;language&quot;:&quot;bash&quot;,&quot;nodeId&quot;:&quot;541bc9ff-1723-441d-bd5c-613efb6959b9&quot;}" data-component-name="HighlightedCodeBlockToDOM"><pre class="shiki"><code class="language-bash">-- OBJECTS
pet = {
life = 100,
stats = {speed = rnd(10),strength=rnd(10),defense=rnd(5)},
sprite = 10,
position = vec(width - h_left_margin,height-128) 
}

enemy = {
life = 100,
stats = {speed = rnd(10),strength=rnd(10),defense=rnd(5)},
sprite = 3,
position = vec(h_right_margin,30) - vec(60,0)
}

ground = {
sprite = 6,
position = vec(0,10)
}</code></pre></div><p>For this short template I wanted to keep it simple and generate random values for the main attributes of our creatures, <code>rnd() </code>is a function that allow us to generate a random number netween 0 and the value established.</p><h3>The System loop</h3><p>It is quite simple, right now there are only two actions enabled for the player, <code>attack </code>and <code>Items </code>as soon as you click on <strong>Attack</strong> the following code will be triggered:</p><div class="highlighted_code_block" data-attrs="{&quot;language&quot;:&quot;bash&quot;,&quot;nodeId&quot;:&quot;227c0954-e5d8-42c4-8227-6accd42b9488&quot;}" data-component-name="HighlightedCodeBlockToDOM"><pre class="shiki"><code class="language-bash">function attack(a,b)
    damage = a.stats.strength + rnd(6)
    local critical = false
    if damage &gt; b.stats.defense then
&#9;damage = damage - b.stats.defense
&#9;crit = rnd(100)
        if crit &lt; 10 then 
&#9;    damage += damage * 1.75
&#9;    critical = true 
        end
    b.life -= flr(damage)
end

function attack_box:click()
    local damage,critical = attack(pet,enemy)
    if critical then
    &#9;text = "[CRITICAL HIT] Enemy receive "..damage.." damage"
    else
    &#9;text = "Enemy receive "..damage.." damage"
    end
    send_msg(text, 14)
end</code></pre></div><p>We execute the following evaluations:</p><ul><li><p>Damage = generate a random number[0-6] + base strenght</p></li><li><p>It is a critical hit?</p></li><li><p>Is the Damage higher than the shield?</p></li></ul><p>Having the previous creature RNG of stats and the mentioned evaluation we can have a different result on every battle we attempt at this tiny system.</p><h1>The Cartridge (Less than 20KB!)</h1><p>I know, fantasy consoles are super cool, but the best thing of PICO-8 and Picotron is the way you can distribute the games &#8212; They are literally images that contains a whole game!</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!Gfef!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!Gfef!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png 424w, https://substackcdn.com/image/fetch/$s_!Gfef!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png 848w, https://substackcdn.com/image/fetch/$s_!Gfef!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png 1272w, https://substackcdn.com/image/fetch/$s_!Gfef!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!Gfef!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png" width="654" height="490.5" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:512,&quot;resizeWidth&quot;:654,&quot;bytes&quot;:19609,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/192888074?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!Gfef!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png 424w, https://substackcdn.com/image/fetch/$s_!Gfef!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png 848w, https://substackcdn.com/image/fetch/$s_!Gfef!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png 1272w, https://substackcdn.com/image/fetch/$s_!Gfef!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F522e92b2-aab5-4394-8bee-de4ad4c303e4_512x384.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Now that you have the main idea of this system, you are ready to customize and play with it, that&#8217;s the best way to learn.</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://drive.proton.me/urls/E81DZD2YDC#n3mwc3npnalo&quot;,&quot;text&quot;:&quot;Download Cartridge&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://drive.proton.me/urls/E81DZD2YDC#n3mwc3npnalo"><span>Download Cartridge</span></a></p><h3>Steps to open the cartridge in your Picotron System</h3><ol><li><p>Click on &#8220;Open Host in OS Folder&#8221;</p></li></ol><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!aBLj!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!aBLj!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif 424w, https://substackcdn.com/image/fetch/$s_!aBLj!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif 848w, https://substackcdn.com/image/fetch/$s_!aBLj!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif 1272w, https://substackcdn.com/image/fetch/$s_!aBLj!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!aBLj!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif" width="960" height="540" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:540,&quot;width&quot;:960,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:408227,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/192888074?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!aBLj!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif 424w, https://substackcdn.com/image/fetch/$s_!aBLj!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif 848w, https://substackcdn.com/image/fetch/$s_!aBLj!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif 1272w, https://substackcdn.com/image/fetch/$s_!aBLj!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51239cc0-eaee-4979-bd68-3fd1c43a7b9a_960x540.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><ol start="2"><li><p>That&#8217;s goint to open a new window in your host OS (Linux, Windows or MacOS)</p></li><li><p>Add your <em>turn-based-battle.p64.png</em> to that folder</p><ol><li><p>Note it ends with PNG extension as the whole game is an image &#128526;</p></li></ol></li><li><p>Go back to your <strong>Picotron System</strong> &gt; Picotron Drive &gt; <em>turn-based-battle.p64.png</em></p></li></ol><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!XsB4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!XsB4!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png 424w, https://substackcdn.com/image/fetch/$s_!XsB4!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png 848w, https://substackcdn.com/image/fetch/$s_!XsB4!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png 1272w, https://substackcdn.com/image/fetch/$s_!XsB4!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!XsB4!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png" width="1456" height="608" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:608,&quot;width&quot;:1456,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:78682,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/192888074?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!XsB4!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png 424w, https://substackcdn.com/image/fetch/$s_!XsB4!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png 848w, https://substackcdn.com/image/fetch/$s_!XsB4!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png 1272w, https://substackcdn.com/image/fetch/$s_!XsB4!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3aeff66d-1510-4e26-bf1f-04a9bddebca5_1755x733.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><ol start="5"><li><p>Press CTRL/CMD + R to run the system</p></li></ol><h1>Thank you for reading</h1><p>I really hope this approach to <em>fantasy consoles</em> trigger your inspiration and motivation to work and play with them, is not only engaging, but you start developing many skills at the same time.</p><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!jV68!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc122045a-58d3-4034-ad20-84f3e20c061d_120x43.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!jV68!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc122045a-58d3-4034-ad20-84f3e20c061d_120x43.png 424w, https://substackcdn.com/image/fetch/$s_!jV68!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc122045a-58d3-4034-ad20-84f3e20c061d_120x43.png 848w, https://substackcdn.com/image/fetch/$s_!jV68!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc122045a-58d3-4034-ad20-84f3e20c061d_120x43.png 1272w, https://substackcdn.com/image/fetch/$s_!jV68!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc122045a-58d3-4034-ad20-84f3e20c061d_120x43.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!jV68!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc122045a-58d3-4034-ad20-84f3e20c061d_120x43.png" width="120" height="43" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/c122045a-58d3-4034-ad20-84f3e20c061d_120x43.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:43,&quot;width&quot;:120,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;CC BY-SA Button&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="CC BY-SA Button" title="CC BY-SA Button" srcset="https://substackcdn.com/image/fetch/$s_!jV68!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc122045a-58d3-4034-ad20-84f3e20c061d_120x43.png 424w, https://substackcdn.com/image/fetch/$s_!jV68!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc122045a-58d3-4034-ad20-84f3e20c061d_120x43.png 848w, https://substackcdn.com/image/fetch/$s_!jV68!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc122045a-58d3-4034-ad20-84f3e20c061d_120x43.png 1272w, https://substackcdn.com/image/fetch/$s_!jV68!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc122045a-58d3-4034-ad20-84f3e20c061d_120x43.png 1456w" sizes="100vw" loading="lazy"></picture><div></div></div></a></figure></div><p>Feel free to distribute, share and modify but with atribution to the original author. More information <a href="https://creativecommons.org/licenses/by-sa/4.0/">here</a></p>]]></content:encoded></item><item><title><![CDATA[Shortcast #1 - You Don't Know Unless You Try]]></title><description><![CDATA[Success is rarely achieved without failure and humble beginnings.]]></description><link>https://www.gamedevpills.com/p/shortcast-1-you-dont-know-unless</link><guid isPermaLink="false">https://www.gamedevpills.com/p/shortcast-1-you-dont-know-unless</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Tue, 31 Mar 2026 13:01:23 GMT</pubDate><enclosure url="https://api.substack.com/feed/podcast/192520266/d6d1803dc2877c958af15274f6d82fad.mp3" length="0" type="audio/mpeg"/><content:encoded><![CDATA[<p>Hello Everyone,</p><p>At this shortcast (The name I&#8217;ve decided for a short podcast) I wanted to share my first advice for gamedev and introduce myself.</p><p>Thanks for listening!</p>]]></content:encoded></item><item><title><![CDATA[Full Access Now Included in Your Free Subscription]]></title><description><![CDATA[Achievement Unlocked: Full Knowledge Base Obtained]]></description><link>https://www.gamedevpills.com/p/full-access-now-included-in-your</link><guid isPermaLink="false">https://www.gamedevpills.com/p/full-access-now-included-in-your</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Sun, 29 Mar 2026 15:15:59 GMT</pubDate><enclosure url="https://substack-post-media.s3.amazonaws.com/public/images/abfa16e1-c7ad-4538-aa7d-3edcfb51ff4a_1200x630.gif" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Hello my fellow gamedevs!</p><p>First of all, thanks for all your support and engagement since I started with this side project last year.</p><p>Gamedev Pills was created with one mission; empower your gamedev knowledge around your day job &#8212; We know how overwhelming it could be.</p><p>It doesn&#8217;t matter if you create enjoyable experiences just for fun, or you want to create your own studio around it, you will be always welcome to take what I&#8217;ve learnt with scope limited tools as <a href="https://www.lexaloffle.com/pico-8.php">PICO-8</a> and <a href="https://www.lexaloffle.com/picotron.php">Picotron</a>.</p><p>In a world moving fast with a direction that could impact the soul of what we do, there is nothing better than human creativity by it&#8217;s experiences.</p><h1>Where can I find the new Content?</h1><h3>Methodology and Systems</h3><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;2d1018f0-a6df-4e23-857a-f9b4415c3162&quot;,&quot;caption&quot;:&quot;We&#8217;ve been speaking about Game design, time management, scope definition and many aspects on previous post but we never mentioned our elephant in the room&#8230;&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Every Great Game Starts with Words, Not Code&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-10-09T18:01:32.567Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!OX0z!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7e519874-1b5b-4c76-8308-06b405786e6b_384x384.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/every-great-game-starts-with-words&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:174281379,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:7,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Sdb-!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F50b544c8-d76c-4788-8cf7-d99a8ea6e5ee_500x500.png&quot;,&quot;belowTheFold&quot;:false,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;636325e4-ceea-4042-a31c-56d0819ffab7&quot;,&quot;caption&quot;:&quot;Hello my fellow gamedevs and players!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;How a Weekend Jam Can Teach You More Than a Month of Tutorials&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-09-04T16:01:27.478Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!JGno!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe655b7a-80c5-48cb-9f79-0a1118f1bb6c_5184x3456.jpeg&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/how-a-weekend-jam-can-teach-you-more&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:172502004,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:5,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Sdb-!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F50b544c8-d76c-4788-8cf7-d99a8ea6e5ee_500x500.png&quot;,&quot;belowTheFold&quot;:false,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><h4></h4><h3>Assets and Resources</h3><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;98701223-49b9-454c-944c-932a1bdff73f&quot;,&quot;caption&quot;:&quot;Hello my fellow subscriber!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Super Mario Maker Demake #1 - Full code and Assets&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-12-14T16:08:10.130Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Hv84!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59286491-b394-4f61-89c8-4b62311a9817_600x400.webp&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/super-mario-maker-demake-1-full-code&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:181597122,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:2,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Sdb-!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F50b544c8-d76c-4788-8cf7-d99a8ea6e5ee_500x500.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><p></p><h3>Industry Voice</h3><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;8b46a39d-95d3-4cb3-b26e-db9dda87ba2b&quot;,&quot;caption&quot;:&quot;Hello my fellow players and gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;From Bastion to Hades: How Supergiant Games Became Masters of Indiedev&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-08-30T15:16:48.821Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!C9zf!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F368a0abd-200a-493d-9f3f-da952229d19c_723x512.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/from-bastion-to-hades-how-supergiant&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:172329080,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:9,&quot;comment_count&quot;:1,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Sdb-!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F50b544c8-d76c-4788-8cf7-d99a8ea6e5ee_500x500.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;b7c4328f-73ca-4d4b-a46e-5cc30dc64f04&quot;,&quot;caption&quot;:&quot;On today&#8217;s masters of indiedev, I would like to share one title I love, one that I&#8217;ve been thinking about during the last few years, we are going to cover:&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;lg&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;A Masterpiece Lost in Its Own Dimension, The Making Of Fez - Masters of Indiedev&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-10-19T15:31:26.138Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!jpB9!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0778eece-e225-4be6-9339-9b6d89cd9fc7_723x512.gif&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/a-masterpiece-lost-in-its-own-dimension&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:176487914,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:3,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Sdb-!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F50b544c8-d76c-4788-8cf7-d99a8ea6e5ee_500x500.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;944d13da-1bf0-4792-ae48-768dcae4c869&quot;,&quot;caption&quot;:&quot;Hello my fellow players and gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Holy Imagery, Indie Glory: The Game Kitchen&#8217;s Miracle - Masters of Indiedev&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-09-14T21:51:18.586Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!5wPd!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F378f030c-8265-4305-8a3c-ab92522edf59_723x512.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/holy-imagery-indie-glory-the-game&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:173577635,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:4,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Sdb-!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F50b544c8-d76c-4788-8cf7-d99a8ea6e5ee_500x500.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><h1>I Want to Support Your Work? How?  </h1><p>Meanwhile I share my learning and iterations for free, you can support this Substack with my new Paid plan where you will be&#8230;</p><ul><li><p>Part of the <strong>GameDev Pills Substack Chat</strong> to find potential Gamedev mates</p></li><li><p>Receiving the Source Code of Games published by Gamedevpills on itch.io</p><ul><li><p>Being <a href="https://jos3k4.itch.io/safety-ship">Safety Ship</a> (Pico-8) our first one!</p></li></ul></li><li><p>Participating on Polls to choose:</p><ul><li><p>The topic of some Gamedev Pills Articles</p></li><li><p>Features and ideas for future Gamedev Projects</p></li></ul></li></ul><p>Enjoy the new content and thank you for reading!</p>]]></content:encoded></item><item><title><![CDATA[When Personality and Aesthetics Have a Child: Jet Set Radio]]></title><description><![CDATA[Twenty-five years later, the defiance of Sega&#8217;s 'Shibuya Punk' remains the gold standard for cohesive aesthetics]]></description><link>https://www.gamedevpills.com/p/when-personality-and-aesthetics-have</link><guid isPermaLink="false">https://www.gamedevpills.com/p/when-personality-and-aesthetics-have</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Thu, 05 Mar 2026 12:01:18 GMT</pubDate><enclosure url="https://substack-post-media.s3.amazonaws.com/public/images/204d5840-c985-45db-854d-d3f5959b17a8_630x500.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>There are many things I love about videogames and their making, I&#8217;m really aware is just an unconditional love as no matter what is happening at this <a href="https://opencritic.com/news/27093/sony-shutting-down-bluepoint-games-in-march-techraptor">inhuman industry</a> I connect with them again and again.</p><p>Let me be honest, my motivation at the their making goes up and down when I think twice the amount of work is behind them. It is just when I watch trailers with interesting aesthetics that my motivation energy bar is charged again. </p><div id="youtube2-UZ3wqBtKRY0" class="youtube-wrap" data-attrs="{&quot;videoId&quot;:&quot;UZ3wqBtKRY0&quot;,&quot;startTime&quot;:null,&quot;endTime&quot;:null}" data-component-name="Youtube2ToDOM"><div class="youtube-inner"><iframe src="https://www.youtube-nocookie.com/embed/UZ3wqBtKRY0?rel=0&amp;autoplay=0&amp;showinfo=0&amp;enablejsapi=0" frameborder="0" loading="lazy" gesture="media" allow="autoplay; fullscreen" allowautoplay="true" allowfullscreen="true" width="728" height="409"></iframe></div></div><p>Exactly, making efforts, putting all your passion and investing time, you would be able to make something close to the scope of <em>Work Work Work&#8230; </em>Adding your <strong>style </strong>and <strong>personality, </strong>right? </p><p>I really think it could be possible and my fuel is not only about comparing myself with good-appealing videogames that are somehow close the standard I have. </p><p>But my main fuel as many of you know comes from <strong>Aesthetics.</strong></p><div id="youtube2-SrppYu_E7vA" class="youtube-wrap" data-attrs="{&quot;videoId&quot;:&quot;SrppYu_E7vA&quot;,&quot;startTime&quot;:null,&quot;endTime&quot;:null}" data-component-name="Youtube2ToDOM"><div class="youtube-inner"><iframe src="https://www.youtube-nocookie.com/embed/SrppYu_E7vA?rel=0&amp;autoplay=0&amp;showinfo=0&amp;enablejsapi=0" frameborder="0" loading="lazy" gesture="media" allow="autoplay; fullscreen" allowautoplay="true" allowfullscreen="true" width="728" height="409"></iframe></div></div><p>Bonus: Airframe Ultra - Another example of interesting aesthetic and strong personality for a videogame</p><p>Take the previous trailers as a warm-up for what is coming on this article.</p><h2>Japan and It&#8217;s Peak of Style</h2><p>The videogame industry has been evolving during the last 50 years in terms of different styles, drawing and modelling methodology, from 2D to hyper realistic 3D models, but my taste for aesthetics is always frozen at the titles published by SEGA.</p><p>I clearly remember, I was on a mall center with my parents, they were quite busy taking groceries and suddenly my perception of time and space was completely frozen because I had <em>Jet Set Radio</em> in front of me.</p><p>A beautiful SEGA <em>Dreamcast </em>system (I still have one!) with Jet Set Radio running on it.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!JQ71!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!JQ71!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg 424w, https://substackcdn.com/image/fetch/$s_!JQ71!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg 848w, https://substackcdn.com/image/fetch/$s_!JQ71!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!JQ71!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!JQ71!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg" width="450" height="800" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/bbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:800,&quot;width&quot;:450,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;Dreamcast Station Kiosk&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="Dreamcast Station Kiosk" title="Dreamcast Station Kiosk" srcset="https://substackcdn.com/image/fetch/$s_!JQ71!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg 424w, https://substackcdn.com/image/fetch/$s_!JQ71!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg 848w, https://substackcdn.com/image/fetch/$s_!JQ71!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!JQ71!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbbe39bbe-db6f-492f-9d38-23a182fdf3d8_450x800.jpeg 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>That was the first time I&#8217;ve seen cell-shading technique applied to 3D Models, and actually it was the first game released with that style. </p><p>Back then I didn&#8217;t have the concepts I understand now related with gamedev art workflows, so I was even more impressed, my mind was like: <em>is this possible on a videogame?! Of course it was&#8230;</em></p><p>Jet Set Radio became my main source of inspiration and motivation when I actually think about videogames and gamedev.</p><div class="subscription-widget-wrap-editor" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe&quot;,&quot;language&quot;:&quot;en&quot;}" data-component-name="SubscribeWidgetToDOM"><div class="subscription-widget show-subscribe"><div class="preamble"><p class="cta-caption">Gamedev Pills &#8211; Learn Game Design Around Your Day Job is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.</p></div><form class="subscription-widget-subscribe"><input type="email" class="email-input" name="email" placeholder="Type your email&#8230;" tabindex="-1"><input type="submit" class="button primary" value="Subscribe"><div class="fake-input-wrapper"><div class="fake-input"></div><div class="fake-button"></div></div></form></div></div><h3>Shibuya Punk Style (Or Grind Fiction)</h3><p>Since then, I&#8217;ve been loving those shaders and outlines at cel-shading models, but Jet Set Radio isn&#8217;t just that, it is a whole culture pop bomb (umami for a taste) with just the required portions of ingredients to be a perfect recipe for an extremely engaging urban representation.</p><p>The idea for the game originated from lead artist Ryuta Ueda&#8217;s desire to move away from the overtly fantastical designs common in Japanese media at the time. </p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!TLnn!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!TLnn!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png 424w, https://substackcdn.com/image/fetch/$s_!TLnn!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png 848w, https://substackcdn.com/image/fetch/$s_!TLnn!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png 1272w, https://substackcdn.com/image/fetch/$s_!TLnn!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!TLnn!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png" width="1280" height="843" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/cf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:843,&quot;width&quot;:1280,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:2163076,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/189908072?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!TLnn!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png 424w, https://substackcdn.com/image/fetch/$s_!TLnn!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png 848w, https://substackcdn.com/image/fetch/$s_!TLnn!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png 1272w, https://substackcdn.com/image/fetch/$s_!TLnn!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcf335a8a-b19b-4fd6-aad3-e3dfab857681_1280x843.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Jet Set Radio Future Commercial released later for Xbox</figcaption></figure></div><p>The team behind Jet Set Radio wanted to capture not only looking at streetwear style based on trends at during the videogame development, but also a high level of sensorial connection by creating a mix between hip-hop, Jazz and R&#8217;nB music.</p><div id="youtube2-mizSUxxuCiY" class="youtube-wrap" data-attrs="{&quot;videoId&quot;:&quot;mizSUxxuCiY&quot;,&quot;startTime&quot;:null,&quot;endTime&quot;:null}" data-component-name="Youtube2ToDOM"><div class="youtube-inner"><iframe src="https://www.youtube-nocookie.com/embed/mizSUxxuCiY?rel=0&amp;autoplay=0&amp;showinfo=0&amp;enablejsapi=0" frameborder="0" loading="lazy" gesture="media" allow="autoplay; fullscreen" allowautoplay="true" allowfullscreen="true" width="728" height="409"></iframe></div></div><p>This impressive combination is like the russian dolls, they doesn&#8217;t only combine music, aesthetic and environments, but on top of it&#8217;s key elements design there is also a combination of Punk Urban culture, Anime and Japanese environments as their <strong>theme</strong>.</p><p>Creating an emotion of Rebellion, individuallity and coolness that is rarely found at any other videogame you can think about. (Saying this with the permission of Persona 5)</p><p>If you really like this style and genre as I like, you should keep an eye to Hyperfunk from the Reptile Team, creators of <a href="https://store.steampowered.com/app/1353230/Bomb_Rush_Cyberfunk/">Bomb Rush Cyberfunk</a></p><div id="youtube2-dq7rkQtjeQY" class="youtube-wrap" data-attrs="{&quot;videoId&quot;:&quot;dq7rkQtjeQY&quot;,&quot;startTime&quot;:null,&quot;endTime&quot;:null}" data-component-name="Youtube2ToDOM"><div class="youtube-inner"><iframe src="https://www.youtube-nocookie.com/embed/dq7rkQtjeQY?rel=0&amp;autoplay=0&amp;showinfo=0&amp;enablejsapi=0" frameborder="0" loading="lazy" gesture="media" allow="autoplay; fullscreen" allowautoplay="true" allowfullscreen="true" width="728" height="409"></iframe></div></div><h2>What Can We Learn From This?</h2><p><strong>Personality </strong>at videogames is linked with their exponent of expression, meaning how many cohesive elements are involved at their creative process, those elements could be coming from different artistic media (Music, Models, Sprites, Environments) and if you do it right, the total personality value will be higher than the sum of all the individual elements.</p><p>Thank you for reading</p>]]></content:encoded></item><item><title><![CDATA[Pixel Art Learning By References]]></title><description><![CDATA[Strong pixel art references through my experience shaping pixels]]></description><link>https://www.gamedevpills.com/p/pixel-art-learning-by-references</link><guid isPermaLink="false">https://www.gamedevpills.com/p/pixel-art-learning-by-references</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Sat, 21 Feb 2026 14:00:18 GMT</pubDate><enclosure url="https://substack-post-media.s3.amazonaws.com/public/images/1a13ccca-f9c4-4036-80d2-12b1274e4df5_630x500.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>During one of my last game jams, I&#8217;ve met a participant that said he wanted to create a 3D Game because they were mature enough to continue with <em>cheap</em> pixel art aesthetics. I remember clearly I had to force myself to keep my poker face, because even though that guy was way more professional than me when it comes to gamedev, I can&#8217;t agree with his statement.</p><p>My love for videogames and later on passion for gamedev, started with pixels and I still fall in love faster with a videogame that is purely based on Pixel Art, that&#8217;s mainly why I keep learning and creating small games on PICO-8 because of the easiness creating good appealing sprites.</p><p>At this article I want to share my favourite Pixel Art references across books, Youtube channels and Patreon. But not only that, I want to show you my evolution since I started to this days, after 4 years, I&#8217;ve learned shapes, basic shadows and outlines mostly &#8212; It is a really long-term run to develop good design skills and of course, a lot of practise should be involved to keep learning and growing.</p><p>But how do you grow if you don&#8217;t start?</p><p>Let&#8217;s go!</p><h2>How it started?</h2><p>My interest on learning Pixel Art started by my trigger to learn gamedev, I was playing with some videogames engines back then, but I did not have any art capacity to create my own sprites, I though the personality of your game is completely connected to aesthetics, so I&#8217;ve just decided to learn on my own.</p><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!s4K1!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!s4K1!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png 424w, https://substackcdn.com/image/fetch/$s_!s4K1!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png 848w, https://substackcdn.com/image/fetch/$s_!s4K1!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png 1272w, https://substackcdn.com/image/fetch/$s_!s4K1!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!s4K1!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png" width="232" height="232" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/a512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:192,&quot;width&quot;:192,&quot;resizeWidth&quot;:232,&quot;bytes&quot;:null,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!s4K1!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png 424w, https://substackcdn.com/image/fetch/$s_!s4K1!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png 848w, https://substackcdn.com/image/fetch/$s_!s4K1!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png 1272w, https://substackcdn.com/image/fetch/$s_!s4K1!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa512ce4a-abe2-43b8-95d0-f53f753865fe_192x192.png 1456w" sizes="100vw" fetchpriority="high"></picture><div></div></div></a><figcaption class="image-caption">My first Pixel Art &#128584;</figcaption></figure></div><p>In February 2023, after 6 months learning on my own, I&#8217;ve decided to post my first Pixel art on <a href="https://lospec.com/gallery/jcperez/">lospec.com</a> and of course, that wasn&#8217;t appealing back then. But I was already applying some shades and rules to my creations. I&#8217;ve decided improve my skills looking for the best content.</p><h2>Reference #1 - Pixel Logic</h2><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!W4kD!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!W4kD!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png 424w, https://substackcdn.com/image/fetch/$s_!W4kD!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png 848w, https://substackcdn.com/image/fetch/$s_!W4kD!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png 1272w, https://substackcdn.com/image/fetch/$s_!W4kD!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!W4kD!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png" width="614" height="329.5978456014363" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/accfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:598,&quot;width&quot;:1114,&quot;resizeWidth&quot;:614,&quot;bytes&quot;:239787,&quot;alt&quot;:&quot;&quot;,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181622196?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" title="" srcset="https://substackcdn.com/image/fetch/$s_!W4kD!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png 424w, https://substackcdn.com/image/fetch/$s_!W4kD!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png 848w, https://substackcdn.com/image/fetch/$s_!W4kD!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png 1272w, https://substackcdn.com/image/fetch/$s_!W4kD!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faccfc451-23f1-4d54-a313-e8b983ddff2e_1114x598.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>I was looking for strong books covering most of the main aspects of Pixel Art and I can say I found it. You have a lot of information about Pixel Art if you start doing research and now it&#8217;s even better with AI because you can find articles and references faster.</p><p>But I wanted to have all the knowledge in one place an be able to take this digital book with me on the go. This is the content you can find:</p><p>Ch.0 - Introduction<br>Ch.1 - Line art<br>Ch.2 - Anti-aliasing<br>Ch.3 - Colours<br>Ch.4 - Readability<br>Ch.5 - Dithering<br>Ch.6 - Game perspectives <br>Ch.7 - Clean-up <br>Ch.8 - Subpixeling<strong> </strong>Ch.9 - Animation</p><p>I really recommend this book if you plan to start now, it is really entry-level oriented and it goes through the pillars of pixel art that can enable you to do more deep research later.</p><p><a href="https://michafrar.gumroad.com/l/pixel-logic">Buy it from here</a></p><div class="subscription-widget-wrap-editor" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe&quot;,&quot;language&quot;:&quot;en&quot;}" data-component-name="SubscribeWidgetToDOM"><div class="subscription-widget show-subscribe"><div class="preamble"><p class="cta-caption">Gamedev Pills &#8211; Learn Game Design Around Your Day Job is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.</p></div><form class="subscription-widget-subscribe"><input type="email" class="email-input" name="email" placeholder="Type your email&#8230;" tabindex="-1"><input type="submit" class="button primary" value="Subscribe"><div class="fake-input-wrapper"><div class="fake-input"></div><div class="fake-button"></div></div></form></div></div><h2>How it continued?</h2><p>Well, let me show you some improvements after not only reading, but actually drawing for some time on Aseprite, my favorite Pixel Art editor.</p><div class="image-gallery-embed" data-attrs="{&quot;gallery&quot;:{&quot;images&quot;:[{&quot;type&quot;:&quot;image/png&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/6d181b92-3e5c-46a0-bd92-4e39965521bb_574x592.png&quot;},{&quot;type&quot;:&quot;image/png&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/0ae51507-8d2c-4cf5-8944-1400f95f553b_522x522.png&quot;},{&quot;type&quot;:&quot;image/png&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/73b75bdc-b4b4-44d9-875f-e42651c6a85c_514x536.png&quot;}],&quot;caption&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;staticGalleryImage&quot;:{&quot;type&quot;:&quot;image/png&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/d5f48d5a-ab64-4638-a33e-9d94c3869eec_1456x474.png&quot;}},&quot;isEditorNode&quot;:true}"></div><h2>Reference #2 - Final Fantasy</h2><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!CdCT!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!CdCT!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg 424w, https://substackcdn.com/image/fetch/$s_!CdCT!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg 848w, https://substackcdn.com/image/fetch/$s_!CdCT!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!CdCT!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!CdCT!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg" width="366" height="419.8972602739726" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:335,&quot;width&quot;:292,&quot;resizeWidth&quot;:366,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;FFDOTCovr&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="FFDOTCovr" title="FFDOTCovr" srcset="https://substackcdn.com/image/fetch/$s_!CdCT!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg 424w, https://substackcdn.com/image/fetch/$s_!CdCT!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg 848w, https://substackcdn.com/image/fetch/$s_!CdCT!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!CdCT!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F00de15c2-ae4d-44b3-ad07-f4b53d0a41b0_292x335.jpeg 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>FF DOT. is absolutely a book that you can judge by it&#8217;s cover &#8211; minimalist, deliberate, clean, and a little bit whimsical. As you can imagine by the style of the cover, is just about the usage of palettes and pixels across the Final Fantasy saga from Final Fantasy I to Final Fantasy VI.</p><p>But the reason why I purchased this book some years ago was not only because I really like pixel art of Final Fantasy titles, but you have:</p><ul><li><p>Palette used across sprites and maps</p></li><li><p>Size of the sprites</p></li></ul><p>With that information you can attempt to do your own creations inspired by classic final fantasy titles. I really recommend this book for anyone willing to start with the basics.</p><p><a href="https://www.darkhorse.com/books/3003-635/ff-dot-the-pixel-art-of-final-fantasy-hc/">Buy it here</a></p><h1>Patreon</h1><p>Patreon is a really good platform for artist to share their content and actually offer tutorials for potential customers.</p><ul><li><p><a href="https://www.patreon.com/c/saint11/home?vanity=saint11">Pedro Medeiros</a>. Famours Pixel Art artist behind Celeste, no other information is needed, right?</p></li><li><p><a href="https://www.patreon.com/c/slynyrd/posts?vanity=slynyrd">Slynyrd</a>. Minimalistic Pixel Art, usually executed under 8x8 sprites, which is super convinient for PICO-8.</p></li><li><p><a href="https://www.patreon.com/c/johanpeitz/home?vanity=johanpeitz">Johan Peitz</a>. He is not specialiced on Pixel Art, but he create really beautiful and playful games for PICO-8.</p></li></ul><h1>Youtube Channels</h1><ul><li><p><a href="https://www.youtube.com/@saultoons">Saultoons</a>. Really nice content about animations and Pixel Art in general</p></li><li><p><a href="https://www.youtube.com/@AdamCYounis">Indie Tales by AdamCYounis</a>. He is a super talented pixel artist, really good tutorials and learning content and he is now at development of his own game.</p></li><li><p><a href="https://www.youtube.com/@BJGpixel">Brandom James Geer. </a>Another super talented pixel artist where you can learn about colors and small sized sprites.</p></li></ul><h2>How it is going now?</h2><div class="image-gallery-embed" data-attrs="{&quot;gallery&quot;:{&quot;images&quot;:[{&quot;type&quot;:&quot;image/png&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/62d4bbe9-5e63-4ba9-8f3c-75501ca3195f_1022x516.png&quot;},{&quot;type&quot;:&quot;image/png&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/7ad05d70-596b-4925-9b9d-5f4a5174d45f_946x1194.png&quot;},{&quot;type&quot;:&quot;image/png&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/1d292a2d-0e80-4c8e-80f9-735a5dab0fe1_1030x1026.png&quot;}],&quot;caption&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;staticGalleryImage&quot;:{&quot;type&quot;:&quot;image/png&quot;,&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/abd571fd-8043-49d3-b642-c8a1925cf526_1456x474.png&quot;}},&quot;isEditorNode&quot;:true}"></div><p>Gamedev is quite overwhelming, we can agree on that. After 11 years working as IT Service Manager, I can confirm gamedev is the most difficult challenge I&#8217;ve been dealing with, specially when you don&#8217;t know where to start.</p><p>But you found me and my substack, where my plan is to provide a structure for those willing to do some gamedev around their Job, like myself.</p><p>Lately I&#8217;ve been more focused on the systhematic process participating on gamejams and creating mechanics than on Pixel Art itself, but I still do when I do my prototypes and I plan to keep evolving my creative side.</p><p>I hope this article could inspire you.</p><p>Thank you for reading.</p>]]></content:encoded></item><item><title><![CDATA[Quick Physics on PICO-8: Ropes]]></title><description><![CDATA[It could be a really intense topic, so I've decided to simplify with our beloved engine]]></description><link>https://www.gamedevpills.com/p/quick-physics-on-pico-8-ropes</link><guid isPermaLink="false">https://www.gamedevpills.com/p/quick-physics-on-pico-8-ropes</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Sun, 08 Feb 2026 17:30:51 GMT</pubDate><enclosure url="https://substack-post-media.s3.amazonaws.com/public/images/fd1336d8-45e7-44c2-a630-b5bb400e7634_600x400.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Hello my fellow gamedevs!</p><p>As soon as you go deeper and deeper into gamedev you will realice how much math and well, calculations in general are required to offer an interesting and enjoyable game feel. If you played <em><a href="https://store.steampowered.com/app/2379780/Balatro/">Balatro</a> </em>(I strongly recommend this game) despite the main gameplay and rules of the game, every action feels like pure DOPAMINE.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!cvXZ!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!cvXZ!,w_424,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif 424w, https://substackcdn.com/image/fetch/$s_!cvXZ!,w_848,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif 848w, https://substackcdn.com/image/fetch/$s_!cvXZ!,w_1272,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif 1272w, https://substackcdn.com/image/fetch/$s_!cvXZ!,w_1456,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!cvXZ!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif" width="1000" height="563" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:563,&quot;width&quot;:1000,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;Balatro Press Kit&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="Balatro Press Kit" title="Balatro Press Kit" srcset="https://substackcdn.com/image/fetch/$s_!cvXZ!,w_424,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif 424w, https://substackcdn.com/image/fetch/$s_!cvXZ!,w_848,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif 848w, https://substackcdn.com/image/fetch/$s_!cvXZ!,w_1272,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif 1272w, https://substackcdn.com/image/fetch/$s_!cvXZ!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8f493636-529d-4d74-965a-fc2927bb8c61_1000x563.gif 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><ul><li><p>The movement of cards when you manipulate them</p></li><li><p>The score counter when the multipliers are insane</p></li><li><p>The animations when you open a new card pack</p></li></ul><p>Behind all those operations, without looking at the code, I&#8217;m quite sure there are many math operation involved as it is the most efficient (and I would say organic) way to create human appealing experiences.</p><p>During the last weekend, I&#8217;ve participated on a Game Jam (Post will be published soon!) where the main mechanic was around a <strong>rope</strong>. This time I was working with two friends. </p><p>I usually tend to work at the aesthetic (Pixel Art), ideation and planning when I&#8217;m on a team, but this time I said to my mates; guys, let me implement the physics of the rope, they were a bit surprised, but I was super excited with that challenge and they accepted :)</p><p>Of course the engine that we decided to use for this 48 Hours Game Jam called <strong>MalagaJam 20 </strong>was no other than&#8230; PICO-8!</p><h1>Excitement, Reality later Frustration</h1><p>I&#8217;m not a programmer/engineer, those that already know me here, are probably aware of my professional side &#8212; Hint: It is technology related but nothing to do with gamedev. </p><p>For me the idea of dealing with intense math oriented was interesting at the same time than frustrating, and you know why? There is not much documentation online about designing a proper rope physics just in pure pseudo-code. Most of them are applied to Unity, Unreal and other big engines where you have the benefit of already built-in physics systems and nodes/objects (also called prefabs or scenes) prepared for it.</p><p>But PICO-8 is the hardcode way to learn gamedev, meaning you will implement everything on your own. You are luckily subscribed to Gamedevpills and I&#8217;m here to help you understand this concept.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!7GrJ!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!7GrJ!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!7GrJ!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!7GrJ!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!7GrJ!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!7GrJ!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif" width="544" height="544" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:544,&quot;bytes&quot;:191781,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/187021592?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!7GrJ!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!7GrJ!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!7GrJ!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!7GrJ!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F82d9f500-2ccd-43e1-b6c7-59d8332eed43_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">My humble Rope implementation running on PICO-8</figcaption></figure></div><div><hr></div><h1>The Rope</h1><p>Take a thin rope that you may have at home, now attach something at one of the extremes, the way the rope moves and react to your hand shaking when you hold it, is going to be quite different than when nothing is attached. That&#8217;s the kind of effect I was following during my <strong>ultimate groundbreaking rope system&#8230; &#128517;</strong></p><p>Now is the moment of translate, real world objects into our virtual world, is when the fun actually start, some of my friends said that this is just black magic, let&#8217;s change that vision for you reading this article. If I can work on this, you can.</p><h3>Context</h3><p>The rope is needed for a character hanging at the end of the rope, think about rappel.</p><h3>Rules</h3><ul><li><p>The rope movement offered to the player will be:</p><ul><li><p>X axis. So left and right movement.</p></li><li><p>Y axis. Only down, to increase the length of the rope from top to bottom.</p></li></ul></li><li><p>The length of the rope will be limited</p></li><li><p>The rope length can&#8217;t be shortened, meaning you can&#8217;t go up.</p></li></ul><p>Now that we have the main rules of the rope defined, let&#8217;s go to the exciting part, it&#8217;s implementation.</p><div><hr></div><h2>Making-Of</h2><p>To start with this exercise, first is key to understand which are the key component/s involved at the rope physics calculation, don&#8217;t worry, the positive thing I have for you is that there is only one; Nodes or Joints as you wish, let&#8217;s assign the easy word of <strong>node </strong>for this article.</p><h3>Rope Structure</h3><div class="github-gist" data-attrs="{&quot;innerHTML&quot;:&quot;<div id=\&quot;gist145280769\&quot; class=\&quot;gist\&quot;>\n    <div class=\&quot;gist-file\&quot; translate=\&quot;no\&quot; data-color-mode=\&quot;light\&quot; data-light-theme=\&quot;light\&quot;>\n      <div class=\&quot;gist-data\&quot;>\n        \n<div class=\&quot;js-gist-file-update-container js-task-list-container\&quot;>\n      <div id=\&quot;file-rope-lua\&quot; class=\&quot;file my-2\&quot;>\n    \n    <div itemprop=\&quot;text\&quot;\n      class=\&quot;Box-body p-0 blob-wrapper data type-lua  \&quot;\n      style=\&quot;overflow: auto\&quot; tabindex=\&quot;0\&quot; role=\&quot;region\&quot;\n      aria-label=\&quot;rope.lua content, created by microloop on 03:38PM today.\&quot;\n    >\n\n        \n<div class=\&quot;js-check-hidden-unicode js-blob-code-container blob-code-content\&quot;>\n\n  <template class=\&quot;js-file-alert-template\&quot;>\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash flash-warn flash-full d-flex flex-items-center\&quot;>\n  <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.co/hiddenchars\&quot; target=\&quot;_blank\&quot;>Learn more about bidirectional Unicode characters</a>\n    </span>\n\n\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash-action\&quot;>        <a href=\&quot;{{ revealButtonHref }}\&quot; data-view-component=\&quot;true\&quot; class=\&quot;btn-sm btn\&quot;>    Show hidden characters\n</a>\n</div>\n</div></template>\n<template class=\&quot;js-line-alert-template\&quot;>\n  <span aria-label=\&quot;This line has hidden Unicode characters\&quot; data-view-component=\&quot;true\&quot; class=\&quot;line-alert tooltipped tooltipped-e\&quot;>\n    <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n</span></template>\n\n  <table data-hpc class=\&quot;highlight tab-size js-file-line-container\&quot; data-tab-size=\&quot;4\&quot; data-paste-markdown-skip data-tagsearch-path=\&quot;rope.lua\&quot;>\n        <tr>\n          <td id=\&quot;file-rope-lua-L1\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;1\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC1\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Rope</span>:<span class=\&quot;pl-en\&quot;>init</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L2\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;2\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC2\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-smi\&quot;>diff</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>2</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L3\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;3\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC3\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Create the initial nodes</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L4\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;4\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC4\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>for</span> <span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span>, <span class=\&quot;pl-smi\&quot;>ROPE_INITIAL_SIZE</span> <span class=\&quot;pl-k\&quot;>do</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L5\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;5\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC5\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-smi\&quot;>ropeNode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Body</span>:<span class=\&quot;pl-c1\&quot;>new</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L6\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;6\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC6\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-smi\&quot;>ropeNode</span>.<span class=\&quot;pl-e\&quot;>spr</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>18</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L7\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;7\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC7\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>0</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L8\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;8\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC8\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-smi\&quot;>ropeNode</span>.<span class=\&quot;pl-e\&quot;>static</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>true</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L9\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;9\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC9\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>else</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L10\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;10\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC10\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-smi\&quot;>ropeNode</span>.<span class=\&quot;pl-e\&quot;>static</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>false</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L11\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;11\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC11\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L12\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;12\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC12\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-smi\&quot;>ropeNode</span>.<span class=\&quot;pl-e\&quot;>y</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>y</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>diff</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L13\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;13\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC13\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-smi\&quot;>ropeNode</span>.<span class=\&quot;pl-e\&quot;>next</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>nil</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L14\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;14\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC14\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>ropeNode</span>:<span class=\&quot;pl-en\&quot;>draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L15\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;15\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC15\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>next</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L16\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;16\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC16\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>                <span class=\&quot;pl-c1\&quot;>line</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>x</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>y</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>next</span>.<span class=\&quot;pl-e\&quot;>x</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>next</span>.<span class=\&quot;pl-e\&quot;>y</span>, <span class=\&quot;pl-c1\&quot;>7</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L17\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;17\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC17\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-k\&quot;>else</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L18\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;18\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC18\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>                <span class=\&quot;pl-c1\&quot;>add_character</span>(<span class=\&quot;pl-c1\&quot;>self</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L19\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;19\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC19\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L20\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;20\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC20\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L21\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;21\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC21\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-smi\&quot;>diff</span> <span class=\&quot;pl-k\&quot;>+=</span> <span class=\&quot;pl-smi\&quot;>ROPE_SIZE_INC</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L22\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;22\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC22\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>size</span> <span class=\&quot;pl-k\&quot;>+=</span> <span class=\&quot;pl-smi\&quot;>ROPE_SIZE_INC</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L23\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;23\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC23\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>add</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>, <span class=\&quot;pl-smi\&quot;>ropeNode</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L24\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;24\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC24\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L25\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;25\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC25\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Create the lines</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L26\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;26\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC26\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>for</span> <span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>in</span> <span class=\&quot;pl-c1\&quot;>pairs</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>) <span class=\&quot;pl-k\&quot;>do</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L27\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;27\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC27\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>[<span class=\&quot;pl-smi\&quot;>i</span>].<span class=\&quot;pl-e\&quot;>next</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>[<span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>1</span>]</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L28\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;28\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC28\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L29\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;29\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC29\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> SET the next JOINT POSITION</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L30\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;30\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC30\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-smi\&quot;>NEXT_JOINT</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>[<span class=\&quot;pl-k\&quot;>#</span><span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>].<span class=\&quot;pl-e\&quot;>y</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>ROPE_SIZE_INC</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L31\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;31\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC31\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-smi\&quot;>diff</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-lua-L32\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;32\&quot;></td>\n          <td id=\&quot;file-rope-lua-LC32\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n  </table>\n</div>\n\n\n    </div>\n\n  </div>\n\n</div>\n\n      </div>\n      <div class=\&quot;gist-meta\&quot;>\n        <a href=\&quot;https://gist.github.com/microloop/6b4c665d933cec98a5b7edc8622e8967/raw/81023f293ea3f3b46ec9e05c25d5741d1e24b176/rope.lua\&quot; style=\&quot;float:right\&quot; class=\&quot;Link--inTextBlock\&quot;>view raw</a>\n        <a href=\&quot;https://gist.github.com/microloop/6b4c665d933cec98a5b7edc8622e8967#file-rope-lua\&quot; class=\&quot;Link--inTextBlock\&quot;>\n          rope.lua\n        </a>\n        hosted with &amp;#10084; by <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.com\&quot;>GitHub</a>\n      </div>\n    </div>\n</div>\n&quot;,&quot;stylesheet&quot;:&quot;https://github.githubassets.com/assets/gist-embed-473ed9d04941795c.css&quot;}" data-component-name="GitgistToDOM"><link rel="stylesheet" href="https://github.githubassets.com/assets/gist-embed-473ed9d04941795c.css"><div id="gist145280769" class="gist">
    <div class="gist-file" data-color-mode="light" data-light-theme="light">
      <div class="gist-data">
        
<div class="js-gist-file-update-container js-task-list-container">
      <div id="file-rope-lua" class="file my-2">
    
    <div itemprop="text" class="Box-body p-0 blob-wrapper data type-lua  " style="overflow:auto">

        
<div class="js-check-hidden-unicode js-blob-code-container blob-code-content">

  
  <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center">
  
    

    <span>
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a>
    </span>


  <div data-view-component="true" class="flash-action">        <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn">    Show hidden characters
</a>
</div>
</div>

  <span data-view-component="true" class="line-alert tooltipped tooltipped-e">
    
    

</span>

  <table data-hpc="" class="highlight tab-size js-file-line-container" data-tab-size="4" data-paste-markdown-skip="" data-tagsearch-path="rope.lua">
        <tbody><tr>
          <td id="file-rope-lua-L1" class="blob-num js-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="file-rope-lua-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Rope</span>:<span class="pl-en">init</span>()</td>
        </tr>
        <tr>
          <td id="file-rope-lua-L2" class="blob-num js-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="file-rope-lua-LC2" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">diff</span> <span class="pl-k">=</span> <span class="pl-c1">2</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L3" class="blob-num js-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="file-rope-lua-LC3" class="blob-code blob-code-inner js-file-line">    <span class="pl-c"><span class="pl-c">--</span> Create the initial nodes</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L4" class="blob-num js-line-number js-blob-rnum" data-line-number="4"></td>
          <td id="file-rope-lua-LC4" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">for</span> <span class="pl-smi">i</span> <span class="pl-k">=</span> <span class="pl-c1">0</span>, <span class="pl-smi">ROPE_INITIAL_SIZE</span> <span class="pl-k">do</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L5" class="blob-num js-line-number js-blob-rnum" data-line-number="5"></td>
          <td id="file-rope-lua-LC5" class="blob-code blob-code-inner js-file-line">        <span class="pl-smi">ropeNode</span> <span class="pl-k">=</span> <span class="pl-en">Body</span>:<span class="pl-c1">new</span>()</td>
        </tr>
        <tr>
          <td id="file-rope-lua-L6" class="blob-num js-line-number js-blob-rnum" data-line-number="6"></td>
          <td id="file-rope-lua-LC6" class="blob-code blob-code-inner js-file-line">        <span class="pl-smi">ropeNode</span>.<span class="pl-e">spr</span> <span class="pl-k">=</span> <span class="pl-c1">18</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L7" class="blob-num js-line-number js-blob-rnum" data-line-number="7"></td>
          <td id="file-rope-lua-LC7" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">if</span> <span class="pl-smi">i</span> <span class="pl-k">==</span> <span class="pl-c1">0</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L8" class="blob-num js-line-number js-blob-rnum" data-line-number="8"></td>
          <td id="file-rope-lua-LC8" class="blob-code blob-code-inner js-file-line">            <span class="pl-smi">ropeNode</span>.<span class="pl-e">static</span> <span class="pl-k">=</span> <span class="pl-c1">true</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L9" class="blob-num js-line-number js-blob-rnum" data-line-number="9"></td>
          <td id="file-rope-lua-LC9" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">else</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L10" class="blob-num js-line-number js-blob-rnum" data-line-number="10"></td>
          <td id="file-rope-lua-LC10" class="blob-code blob-code-inner js-file-line">            <span class="pl-smi">ropeNode</span>.<span class="pl-e">static</span> <span class="pl-k">=</span> <span class="pl-c1">false</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L11" class="blob-num js-line-number js-blob-rnum" data-line-number="11"></td>
          <td id="file-rope-lua-LC11" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L12" class="blob-num js-line-number js-blob-rnum" data-line-number="12"></td>
          <td id="file-rope-lua-LC12" class="blob-code blob-code-inner js-file-line">        <span class="pl-smi">ropeNode</span>.<span class="pl-e">y</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">y</span> <span class="pl-k">+</span> <span class="pl-smi">diff</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L13" class="blob-num js-line-number js-blob-rnum" data-line-number="13"></td>
          <td id="file-rope-lua-LC13" class="blob-code blob-code-inner js-file-line">        <span class="pl-smi">ropeNode</span>.<span class="pl-e">next</span> <span class="pl-k">=</span> <span class="pl-c1">nil</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L14" class="blob-num js-line-number js-blob-rnum" data-line-number="14"></td>
          <td id="file-rope-lua-LC14" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">function</span> <span class="pl-en">ropeNode</span>:<span class="pl-en">draw</span>()</td>
        </tr>
        <tr>
          <td id="file-rope-lua-L15" class="blob-num js-line-number js-blob-rnum" data-line-number="15"></td>
          <td id="file-rope-lua-LC15" class="blob-code blob-code-inner js-file-line">            <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">next</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L16" class="blob-num js-line-number js-blob-rnum" data-line-number="16"></td>
          <td id="file-rope-lua-LC16" class="blob-code blob-code-inner js-file-line">                <span class="pl-c1">line</span>(<span class="pl-c1">self</span>.<span class="pl-e">x</span>, <span class="pl-c1">self</span>.<span class="pl-e">y</span>, <span class="pl-c1">self</span>.<span class="pl-e">next</span>.<span class="pl-e">x</span>, <span class="pl-c1">self</span>.<span class="pl-e">next</span>.<span class="pl-e">y</span>, <span class="pl-c1">7</span>)</td>
        </tr>
        <tr>
          <td id="file-rope-lua-L17" class="blob-num js-line-number js-blob-rnum" data-line-number="17"></td>
          <td id="file-rope-lua-LC17" class="blob-code blob-code-inner js-file-line">            <span class="pl-k">else</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L18" class="blob-num js-line-number js-blob-rnum" data-line-number="18"></td>
          <td id="file-rope-lua-LC18" class="blob-code blob-code-inner js-file-line">                <span class="pl-c1">add_character</span>(<span class="pl-c1">self</span>)</td>
        </tr>
        <tr>
          <td id="file-rope-lua-L19" class="blob-num js-line-number js-blob-rnum" data-line-number="19"></td>
          <td id="file-rope-lua-LC19" class="blob-code blob-code-inner js-file-line">            <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L20" class="blob-num js-line-number js-blob-rnum" data-line-number="20"></td>
          <td id="file-rope-lua-LC20" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L21" class="blob-num js-line-number js-blob-rnum" data-line-number="21"></td>
          <td id="file-rope-lua-LC21" class="blob-code blob-code-inner js-file-line">        <span class="pl-smi">diff</span> <span class="pl-k">+=</span> <span class="pl-smi">ROPE_SIZE_INC</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L22" class="blob-num js-line-number js-blob-rnum" data-line-number="22"></td>
          <td id="file-rope-lua-LC22" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">size</span> <span class="pl-k">+=</span> <span class="pl-smi">ROPE_SIZE_INC</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L23" class="blob-num js-line-number js-blob-rnum" data-line-number="23"></td>
          <td id="file-rope-lua-LC23" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">add</span>(<span class="pl-c1">self</span>.<span class="pl-e">nodes</span>, <span class="pl-smi">ropeNode</span>)</td>
        </tr>
        <tr>
          <td id="file-rope-lua-L24" class="blob-num js-line-number js-blob-rnum" data-line-number="24"></td>
          <td id="file-rope-lua-LC24" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L25" class="blob-num js-line-number js-blob-rnum" data-line-number="25"></td>
          <td id="file-rope-lua-LC25" class="blob-code blob-code-inner js-file-line">    <span class="pl-c"><span class="pl-c">--</span> Create the lines</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L26" class="blob-num js-line-number js-blob-rnum" data-line-number="26"></td>
          <td id="file-rope-lua-LC26" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">for</span> <span class="pl-smi">i</span> <span class="pl-k">in</span> <span class="pl-c1">pairs</span>(<span class="pl-c1">self</span>.<span class="pl-e">nodes</span>) <span class="pl-k">do</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L27" class="blob-num js-line-number js-blob-rnum" data-line-number="27"></td>
          <td id="file-rope-lua-LC27" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">nodes</span>[<span class="pl-smi">i</span>].<span class="pl-e">next</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">nodes</span>[<span class="pl-smi">i</span> <span class="pl-k">+</span> <span class="pl-c1">1</span>]</td>
        </tr>
        <tr>
          <td id="file-rope-lua-L28" class="blob-num js-line-number js-blob-rnum" data-line-number="28"></td>
          <td id="file-rope-lua-LC28" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L29" class="blob-num js-line-number js-blob-rnum" data-line-number="29"></td>
          <td id="file-rope-lua-LC29" class="blob-code blob-code-inner js-file-line">    <span class="pl-c"><span class="pl-c">--</span> SET the next JOINT POSITION</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L30" class="blob-num js-line-number js-blob-rnum" data-line-number="30"></td>
          <td id="file-rope-lua-LC30" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">NEXT_JOINT</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">nodes</span>[<span class="pl-k">#</span><span class="pl-c1">self</span>.<span class="pl-e">nodes</span>].<span class="pl-e">y</span> <span class="pl-k">+</span> <span class="pl-smi">ROPE_SIZE_INC</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L31" class="blob-num js-line-number js-blob-rnum" data-line-number="31"></td>
          <td id="file-rope-lua-LC31" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">diff</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-rope-lua-L32" class="blob-num js-line-number js-blob-rnum" data-line-number="32"></td>
          <td id="file-rope-lua-LC32" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
  </tbody></table>
</div>


    </div>

  </div>

</div>

      </div>
      <div class="gist-meta">
        <a href="https://gist.github.com/microloop/6b4c665d933cec98a5b7edc8622e8967/raw/81023f293ea3f3b46ec9e05c25d5741d1e24b176/rope.lua" style="float:right" class="Link--inTextBlock">view raw</a>
        <a href="https://gist.github.com/microloop/6b4c665d933cec98a5b7edc8622e8967#file-rope-lua" class="Link--inTextBlock">
          rope.lua
        </a>
        hosted with &#10084; by <a class="Link--inTextBlock" href="https://github.com">GitHub</a>
      </div>
    </div>
</div>
</div><p>As you can see on above code snippet, at this function we initialize the rope with the minimal components required to be able to name it rope. </p><p>We iterate within a loop from number 0 to <code>ROPE_INITIAL_SIZE </code>in order to determine the initial length of our rope, meaning the number of nodes we are going to create at the beginning.</p><p>In this case that value is set to 1, so the rope will be quite short when it is generated, but that&#8217;s the main idea of our <em>rappel </em>based game, as the player will be able to extend the length of the rope during the gameplay.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!yB71!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!yB71!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!yB71!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!yB71!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!yB71!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!yB71!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif" width="482" height="482" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:482,&quot;bytes&quot;:114538,&quot;alt&quot;:&quot;Player pressing down and moving character&quot;,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/187021592?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="Player pressing down and moving character" title="Player pressing down and moving character" srcset="https://substackcdn.com/image/fetch/$s_!yB71!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!yB71!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!yB71!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!yB71!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6cd0f365-7aad-4753-acaa-7eab2ab5c2d2_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Expected Player input into character movements</figcaption></figure></div><p>Another important factor of my rope implementation is the variable <code>ropeNode.next </code>each node is pointing to the next one in order to be able to draw a <code>line() </code>creating a visual rope, instead of independent nodes. </p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!5kH_!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!5kH_!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!5kH_!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!5kH_!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!5kH_!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!5kH_!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif" width="482" height="482" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:482,&quot;bytes&quot;:209865,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/187021592?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!5kH_!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!5kH_!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!5kH_!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!5kH_!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85b1fcf9-2d4f-44f9-8357-3f2ae7109eb9_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Under the hood implementation</figcaption></figure></div><p>The red circles are each node I dinamically add when the player increase the initial size of the rope (pressing the down button) and the green circles are the initial elements mentioned at the Rope initialization function.</p><p>At this point you understood the skeleton of the rope and how the different elements are related between each other, but if you read the Init function you will quickly realice there is nothing implemented yet at movement, and you came here for physics, right? Let&#8217;s move forward</p><h3>Rope Movement</h3><p>Now, when the rope is alive, we need to make sure on each frame of the runtime we apply constrains between nodes so the movement of nodes affect the previous one to create that wave effect.</p><div class="github-gist" data-attrs="{&quot;innerHTML&quot;:&quot;<div id=\&quot;gist145281703\&quot; class=\&quot;gist\&quot;>\n    <div class=\&quot;gist-file\&quot; translate=\&quot;no\&quot; data-color-mode=\&quot;light\&quot; data-light-theme=\&quot;light\&quot;>\n      <div class=\&quot;gist-data\&quot;>\n        \n<div class=\&quot;js-gist-file-update-container js-task-list-container\&quot;>\n      <div id=\&quot;file-rope-movement-lua\&quot; class=\&quot;file my-2\&quot;>\n    \n    <div itemprop=\&quot;text\&quot;\n      class=\&quot;Box-body p-0 blob-wrapper data type-lua  \&quot;\n      style=\&quot;overflow: auto\&quot; tabindex=\&quot;0\&quot; role=\&quot;region\&quot;\n      aria-label=\&quot;rope-movement.lua content, created by microloop on 04:22PM today.\&quot;\n    >\n\n        \n<div class=\&quot;js-check-hidden-unicode js-blob-code-container blob-code-content\&quot;>\n\n  <template class=\&quot;js-file-alert-template\&quot;>\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash flash-warn flash-full d-flex flex-items-center\&quot;>\n  <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.co/hiddenchars\&quot; target=\&quot;_blank\&quot;>Learn more about bidirectional Unicode characters</a>\n    </span>\n\n\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash-action\&quot;>        <a href=\&quot;{{ revealButtonHref }}\&quot; data-view-component=\&quot;true\&quot; class=\&quot;btn-sm btn\&quot;>    Show hidden characters\n</a>\n</div>\n</div></template>\n<template class=\&quot;js-line-alert-template\&quot;>\n  <span aria-label=\&quot;This line has hidden Unicode characters\&quot; data-view-component=\&quot;true\&quot; class=\&quot;line-alert tooltipped tooltipped-e\&quot;>\n    <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n</span></template>\n\n  <table data-hpc class=\&quot;highlight tab-size js-file-line-container\&quot; data-tab-size=\&quot;4\&quot; data-paste-markdown-skip data-tagsearch-path=\&quot;rope-movement.lua\&quot;>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L1\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;1\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC1\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Rope</span>:<span class=\&quot;pl-en\&quot;>update</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L2\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;2\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC2\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L3\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;3\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC3\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>for</span> <span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>in</span> <span class=\&quot;pl-c1\&quot;>pairs</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>) <span class=\&quot;pl-k\&quot;>do</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L4\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;4\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC4\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>[<span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>1</span>] <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L5\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;5\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC5\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Apply rope constrains</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L6\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;6\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC6\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-c1\&quot;>apply_contrains</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>[<span class=\&quot;pl-smi\&quot;>i</span>], <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>[<span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>1</span>])</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L7\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;7\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC7\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Sort linked nodes references</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L8\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;8\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC8\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>[<span class=\&quot;pl-smi\&quot;>i</span>].<span class=\&quot;pl-e\&quot;>next</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>[<span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>1</span>]</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L9\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;9\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC9\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L10\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;10\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC10\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span>gravity(self.nodes[i])</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L11\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;11\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC11\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> IF NODE IS THE LAST ONE, APPLY GRAVITY when rope Y is shorter than LENGTH</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L12\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;12\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC12\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-k\&quot;>#</span><span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L13\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;13\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC13\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-smi\&quot;>LAST_NODE</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>nodes</span>[<span class=\&quot;pl-smi\&quot;>i</span>]</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L14\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;14\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC14\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L15\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;15\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC15\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-rope-movement-lua-L16\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;16\&quot;></td>\n          <td id=\&quot;file-rope-movement-lua-LC16\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n  </table>\n</div>\n\n\n    </div>\n\n  </div>\n\n</div>\n\n      </div>\n      <div class=\&quot;gist-meta\&quot;>\n        <a href=\&quot;https://gist.github.com/microloop/93d432af0f4241177d38622cba8d3292/raw/71ef31ec3a1015a8ead1840933362f926c6cc6f7/rope-movement.lua\&quot; style=\&quot;float:right\&quot; class=\&quot;Link--inTextBlock\&quot;>view raw</a>\n        <a href=\&quot;https://gist.github.com/microloop/93d432af0f4241177d38622cba8d3292#file-rope-movement-lua\&quot; class=\&quot;Link--inTextBlock\&quot;>\n          rope-movement.lua\n        </a>\n        hosted with &amp;#10084; by <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.com\&quot;>GitHub</a>\n      </div>\n    </div>\n</div>\n&quot;,&quot;stylesheet&quot;:&quot;https://github.githubassets.com/assets/gist-embed-473ed9d04941795c.css&quot;}" data-component-name="GitgistToDOM"><link rel="stylesheet" href="https://github.githubassets.com/assets/gist-embed-473ed9d04941795c.css"><div id="gist145281703" class="gist">
    <div class="gist-file" data-color-mode="light" data-light-theme="light">
      <div class="gist-data">
        
<div class="js-gist-file-update-container js-task-list-container">
      <div id="file-rope-movement-lua" class="file my-2">
    
    <div itemprop="text" class="Box-body p-0 blob-wrapper data type-lua  " style="overflow:auto">

        
<div class="js-check-hidden-unicode js-blob-code-container blob-code-content">

  
  <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center">
  
    

    <span>
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a>
    </span>


  <div data-view-component="true" class="flash-action">        <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn">    Show hidden characters
</a>
</div>
</div>

  <span data-view-component="true" class="line-alert tooltipped tooltipped-e">
    
    

</span>

  <table data-hpc="" class="highlight tab-size js-file-line-container" data-tab-size="4" data-paste-markdown-skip="" data-tagsearch-path="rope-movement.lua">
        <tbody><tr>
          <td id="file-rope-movement-lua-L1" class="blob-num js-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="file-rope-movement-lua-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Rope</span>:<span class="pl-en">update</span>()</td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L2" class="blob-num js-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="file-rope-movement-lua-LC2" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L3" class="blob-num js-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="file-rope-movement-lua-LC3" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">for</span> <span class="pl-smi">i</span> <span class="pl-k">in</span> <span class="pl-c1">pairs</span>(<span class="pl-c1">self</span>.<span class="pl-e">nodes</span>) <span class="pl-k">do</span></td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L4" class="blob-num js-line-number js-blob-rnum" data-line-number="4"></td>
          <td id="file-rope-movement-lua-LC4" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">nodes</span>[<span class="pl-smi">i</span> <span class="pl-k">+</span> <span class="pl-c1">1</span>] <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L5" class="blob-num js-line-number js-blob-rnum" data-line-number="5"></td>
          <td id="file-rope-movement-lua-LC5" class="blob-code blob-code-inner js-file-line">      <span class="pl-c"><span class="pl-c">--</span> Apply rope constrains</span></td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L6" class="blob-num js-line-number js-blob-rnum" data-line-number="6"></td>
          <td id="file-rope-movement-lua-LC6" class="blob-code blob-code-inner js-file-line">      <span class="pl-c1">apply_contrains</span>(<span class="pl-c1">self</span>.<span class="pl-e">nodes</span>[<span class="pl-smi">i</span>], <span class="pl-c1">self</span>.<span class="pl-e">nodes</span>[<span class="pl-smi">i</span> <span class="pl-k">+</span> <span class="pl-c1">1</span>])</td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L7" class="blob-num js-line-number js-blob-rnum" data-line-number="7"></td>
          <td id="file-rope-movement-lua-LC7" class="blob-code blob-code-inner js-file-line">      <span class="pl-c"><span class="pl-c">--</span> Sort linked nodes references</span></td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L8" class="blob-num js-line-number js-blob-rnum" data-line-number="8"></td>
          <td id="file-rope-movement-lua-LC8" class="blob-code blob-code-inner js-file-line">      <span class="pl-c1">self</span>.<span class="pl-e">nodes</span>[<span class="pl-smi">i</span>].<span class="pl-e">next</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">nodes</span>[<span class="pl-smi">i</span> <span class="pl-k">+</span> <span class="pl-c1">1</span>]</td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L9" class="blob-num js-line-number js-blob-rnum" data-line-number="9"></td>
          <td id="file-rope-movement-lua-LC9" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L10" class="blob-num js-line-number js-blob-rnum" data-line-number="10"></td>
          <td id="file-rope-movement-lua-LC10" class="blob-code blob-code-inner js-file-line">    <span class="pl-c"><span class="pl-c">--</span>gravity(self.nodes[i])</span></td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L11" class="blob-num js-line-number js-blob-rnum" data-line-number="11"></td>
          <td id="file-rope-movement-lua-LC11" class="blob-code blob-code-inner js-file-line">    <span class="pl-c"><span class="pl-c">--</span> IF NODE IS THE LAST ONE, APPLY GRAVITY when rope Y is shorter than LENGTH</span></td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L12" class="blob-num js-line-number js-blob-rnum" data-line-number="12"></td>
          <td id="file-rope-movement-lua-LC12" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-k">#</span><span class="pl-c1">self</span>.<span class="pl-e">nodes</span> <span class="pl-k">==</span> <span class="pl-smi">i</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L13" class="blob-num js-line-number js-blob-rnum" data-line-number="13"></td>
          <td id="file-rope-movement-lua-LC13" class="blob-code blob-code-inner js-file-line">      <span class="pl-smi">LAST_NODE</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">nodes</span>[<span class="pl-smi">i</span>]</td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L14" class="blob-num js-line-number js-blob-rnum" data-line-number="14"></td>
          <td id="file-rope-movement-lua-LC14" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L15" class="blob-num js-line-number js-blob-rnum" data-line-number="15"></td>
          <td id="file-rope-movement-lua-LC15" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-rope-movement-lua-L16" class="blob-num js-line-number js-blob-rnum" data-line-number="16"></td>
          <td id="file-rope-movement-lua-LC16" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
  </tbody></table>
</div>


    </div>

  </div>

</div>

      </div>
      <div class="gist-meta">
        <a href="https://gist.github.com/microloop/93d432af0f4241177d38622cba8d3292/raw/71ef31ec3a1015a8ead1840933362f926c6cc6f7/rope-movement.lua" style="float:right" class="Link--inTextBlock">view raw</a>
        <a href="https://gist.github.com/microloop/93d432af0f4241177d38622cba8d3292#file-rope-movement-lua" class="Link--inTextBlock">
          rope-movement.lua
        </a>
        hosted with &#10084; by <a class="Link--inTextBlock" href="https://github.com">GitHub</a>
      </div>
    </div>
</div>
</div><p>At above snippet you can see two main functions called when the node affected is not the last one of the rope:</p><ul><li><p><code> apply_contrains(self.nodes[i], self.nodes[i + 1])</code></p></li><li><p><code> self.nodes[i].next = self.nodes[i + 1]</code></p></li></ul><p>At the first function is when I make sure nodes are moved but based on constrains, so they can only move a certain number of pixels based on the movement of the next node.</p><p>The next function is when I make sure the link between nodes is up-to-date as soon as the player is adding new nodes (remember, those red circles)</p><p>At the end with <code>LAST_NODE = self.nodes[i] </code>I just want to make sure you can call the last node of the rope from everywhere at runtime, it is going to be our character so the rules applied to it are sligthly different (it have a collision layer) and that&#8217;s the reason to have a CONSTANT variable defined for it.</p><h2>Wrapping Up</h2><p>Physics and math in general are the most complicated topics during my short gamedev experience, but they are key and common components for any really good game published.</p><p>In case you liked this implementation and you want to have full access to the source code implementation of the rope, you can become a paid subscriber where you will be able to enjoy all my premium content:</p><ul><li><p>Source code for PICO-8 Mechanics and systems</p></li><li><p>Industry Voice posts where I see apply game design lenses over succesfull indie studios</p></li><li><p>Discount for future videogames released by myself</p></li></ul><p>Thank you for reading, don&#8217;t forget to share with your family and friends &#128140;</p><p> </p>]]></content:encoded></item><item><title><![CDATA[The Aim Of Playing: Why Do We Create Games]]></title><description><![CDATA[Player emotions and developer's labor are just sides of the same coin]]></description><link>https://www.gamedevpills.com/p/the-aim-of-playing-why-do-we-create</link><guid isPermaLink="false">https://www.gamedevpills.com/p/the-aim-of-playing-why-do-we-create</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Thu, 29 Jan 2026 09:00:32 GMT</pubDate><enclosure url="https://substack-post-media.s3.amazonaws.com/public/images/6036bb63-abc9-4bb7-b3c1-096b165de7b5_4660x3107.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>This time I don&#8217;t have a technical post for you, but more a reflection about the end aim behind playing videogames and actually the other side of the coin; why we create them? What is the intention behind a experience? I really want to invite you to this reflection journey. </p><p><strong>Perception </strong>is the quickest and first tool to judge any type of <strong>Entertainment </strong>when it&#8217;s unknown for us, our brains are generally lazy and it is easier to create a quick structure of what we see or hear based on prejudices than investing time to actually understand if it could work for us.</p><p>These mental structures trigger the emotions that either draw us in or close the door entirely.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!eG9z!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!eG9z!,w_424,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif 424w, https://substackcdn.com/image/fetch/$s_!eG9z!,w_848,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif 848w, https://substackcdn.com/image/fetch/$s_!eG9z!,w_1272,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif 1272w, https://substackcdn.com/image/fetch/$s_!eG9z!,w_1456,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!eG9z!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif" width="437" height="360" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:360,&quot;width&quot;:437,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;a woman peeking out of a door with a serious look on her face&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="a woman peeking out of a door with a serious look on her face" title="a woman peeking out of a door with a serious look on her face" srcset="https://substackcdn.com/image/fetch/$s_!eG9z!,w_424,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif 424w, https://substackcdn.com/image/fetch/$s_!eG9z!,w_848,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif 848w, https://substackcdn.com/image/fetch/$s_!eG9z!,w_1272,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif 1272w, https://substackcdn.com/image/fetch/$s_!eG9z!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F721943e6-306f-4d53-8805-01980c5d70f7_437x360.gif 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>But&#8230; There is something beautiful at videogames, they can change your emotions quickly, they are <strong>designed </strong>having your brother in law, yes he that that never touched a gameboy or even knows about <em>Hollow Knight </em>(and why should he, right?) </p><p>But I&#8217;m quite sure he probably tried <em>Angry Birds </em>at some point, and then why that same guy that never touched a handheld console was at some point <strong>playing </strong>with a smartphone&#8230;</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe now&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe?"><span>Subscribe now</span></a></p><h1>The Joy behind a Toy</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!7Mvo!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!7Mvo!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif 424w, https://substackcdn.com/image/fetch/$s_!7Mvo!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif 848w, https://substackcdn.com/image/fetch/$s_!7Mvo!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif 1272w, https://substackcdn.com/image/fetch/$s_!7Mvo!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!7Mvo!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif" width="436" height="436" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:800,&quot;width&quot;:800,&quot;resizeWidth&quot;:436,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;fidget spinner for adults portable silent stress   ergonomic fidget durable abs plastic black compact fidget   for focus aid modern desk accessory for home office use 6&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="fidget spinner for adults portable silent stress   ergonomic fidget durable abs plastic black compact fidget   for focus aid modern desk accessory for home office use 6" title="fidget spinner for adults portable silent stress   ergonomic fidget durable abs plastic black compact fidget   for focus aid modern desk accessory for home office use 6" srcset="https://substackcdn.com/image/fetch/$s_!7Mvo!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif 424w, https://substackcdn.com/image/fetch/$s_!7Mvo!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif 848w, https://substackcdn.com/image/fetch/$s_!7Mvo!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif 1272w, https://substackcdn.com/image/fetch/$s_!7Mvo!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d75f26d-192f-46b8-95fd-2818d494aafb_800x800.avif 1456w" sizes="100vw"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Just looking at the previous image for few seconds, your brain starts with the association of all the possible usages including both positive and negative, instantly you can feel that you want to push those red buttons NO MATTER WHAT!</p><p>Humans are unique because we practice <strong>behavioral neoteny</strong>. This is the retention of juvenile traits into adulthood. While most animals stop playing once they reach reproductive age (because play is "expensive" in terms of energy), humans never stop. </p><p>Engaging in playful activities helps adults cope with stress and enhances mood, actually, applying what I mentioned to social media, one of the motivations behind the &#8220;doomscrolling&#8221; concept is the easiness between new stimulations that triggers dopamine in our brain.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!_tKZ!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!_tKZ!,w_424,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif 424w, https://substackcdn.com/image/fetch/$s_!_tKZ!,w_848,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif 848w, https://substackcdn.com/image/fetch/$s_!_tKZ!,w_1272,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif 1272w, https://substackcdn.com/image/fetch/$s_!_tKZ!,w_1456,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!_tKZ!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif" width="320" height="320" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:300,&quot;width&quot;:300,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:null,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!_tKZ!,w_424,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif 424w, https://substackcdn.com/image/fetch/$s_!_tKZ!,w_848,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif 848w, https://substackcdn.com/image/fetch/$s_!_tKZ!,w_1272,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif 1272w, https://substackcdn.com/image/fetch/$s_!_tKZ!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8b4c21c8-7386-45f0-9cbe-650d202acb74_300x300.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>But speaking again about videogames, I think the best games have a perfect balance between the generation of Endorphins (Strees-relieve) and Dopamine (Reward and motivation)</p><p>There are many examples of titles that have an almost perfect balance of those emotions, but I really think <strong>Red Dead Redemption 2 </strong>is the best example. Is a game where you can spend literally hours just walking on your horse looking at the forest, animals and all the dinamic elements of the title to relax (Endorphins)</p><p>But at the same time you can take your rifle and go all in being the scariest threat of the western (Dopamine)</p><h2>Why Do We Create Games?</h2><p><strong>We</strong> is an expensive word at this context, so I need to include the majority of forces that actually keep the industry alive (<a href="https://www.gamedevpills.com/p/why-bigger-isnt-always-better-lessons?r=2qnrvn">despite the reality</a>)</p><p>We are usually talking about the state of <em>art </em>behind videogames. But for that art to reach your brother-in-law's smartphone, a massive, invisible machinery has to turn. The videogame industry can only grow&#8212;and more importantly, stay with us&#8212;if the financials are as solid as the code.</p><p>Leaving aside for just few seconds the reality behind capitalism, I really think authentic creators and gamedev studios around the world, during their prototypes, really think about the way your emotions will be connecting with the gameplay. That&#8217;s why <strong>playtesting </strong>within others shoulder is so important, as the emotions you may felt once during the creation of your game are gone after all the iterations.</p><h2>Why Do I Create Games?</h2><p>I really love to work on my daily job (non gamedev related) within structures, being able to predict, adapt and then improve the value of what we do as a team. It is engaging, it is rewarding, you feel impactful taking decisions.</p><p>But thinking about the creative process, the ideation of the impact a certain mechanic/system will have through the player emotions during it&#8217;s session is my main driver towards a videogame release.</p><p>I want my future child to connect with that humble game I once created and no one paid for it.</p><h2>And&#8230; Why Do You Create Games?</h2><p>I will be more than happy if this article triggers your reflective mode and maybe boost your inspiration within the creative process.</p><p>I really think from time to time, we need to stop and just say to ourselves: <strong>Why?</strong></p><p>Thank you for reading</p><p></p>]]></content:encoded></item><item><title><![CDATA[Object Oriented Programming in PICO-8 based On Metatables]]></title><description><![CDATA[A comprehensive guide to object-based programming in the Lexaloffle virtual console]]></description><link>https://www.gamedevpills.com/p/object-oriented-programming-in-pico</link><guid isPermaLink="false">https://www.gamedevpills.com/p/object-oriented-programming-in-pico</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Thu, 22 Jan 2026 12:30:48 GMT</pubDate><enclosure url="https://substackcdn.com/image/fetch/$s_!hD_A!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!hD_A!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!hD_A!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!hD_A!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!hD_A!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!hD_A!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!hD_A!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp" width="727" height="484.6666666666667" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:400,&quot;width&quot;:600,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:26572,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/webp&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/184943761?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!hD_A!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!hD_A!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!hD_A!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!hD_A!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5c0ec00b-d3f8-4580-9881-78968ee9ce17_600x400.webp 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Hello my fellow gamedevs!</p><p>This time I want to introduce you to a programming concept that could be extremely helpful to create maintainable and human readable code, gamedev is an already complex task and when you can only invest short periods around your full-time job is quite common you open your project after a while and you completely forgot what tha hell you were trying to achieve.</p><p>At this pill I want you to understand why OOP is useful and how can we easily implement it on PICO-8</p><blockquote><p><strong>Pro Tip.</strong> OOP Paradigm could be applied to other engines like Pyxel, Picotron, Phaser and even Godot!</p><p>Alan Kay coined the term &#8220;object oriented programming&#8221; at grad school in 1966 or 1967. The big idea was to use encapsulated mini-computers in software which communicated via message passing rather than direct data sharing &#8212; to stop breaking down programs into separate &#8220;data structures&#8221; and &#8220;procedures&#8221;.</p></blockquote><h2>Real world rules to understand OOP</h2><p>Nothing better than everyday language and examples to understand gamedev concepts, in this case we are applying a Coding Paradigm that is widely used, not only for videogames, but to create software and websites.</p><p>From my point of view, where it fits better is under videogames, because I can clearly see a natural translation between LUA Objetcs (Metatables) and the entities that we need on our virtual world. My goal at this article is to make it also natural for you.</p><h3>But&#8230; What is an object?</h3><p>Looking at the human definition of <strong>object</strong> we can say it is anything that is visible or tangible and is relatively stable in form. A thing, person, or matter to which thought or action is directed.</p><p>We can also say objects have <strong>properties</strong> and <strong>behaviors</strong> </p><p>Let&#8217;s start with a simple<a class="footnote-anchor" data-component-name="FootnoteAnchorToDOM" id="footnote-anchor-1" href="#footnote-1" target="_self">1</a> example, something we use on a daily basis.... doors!</p><p><strong>Properties. </strong>Think about the key aspects that could define an object. Applying it to our door example:</p><ul><li><p>Opened. Could be Yes or no.</p></li><li><p>Color. Red, blue, brown</p></li></ul><p><strong>Behaviors</strong>. Think about the key actions/usage a certain object could have, again looking at our door:</p><ul><li><p>Open. The action to open the door</p></li><li><p>Close. The action to close the door</p></li></ul><div><hr></div><p>Do you want to learn gamedev around your full-time job? This is you place. Subscribe to keep track of small PICO-8 oriented articles to learn fast and effectively.</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe now&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe?"><span>Subscribe now</span></a></p><div><hr></div><h1>OOP Applied to PICO-8</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!I48R!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!I48R!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!I48R!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!I48R!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!I48R!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!I48R!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif" width="535" height="535" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/e4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:535,&quot;bytes&quot;:140544,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/184943761?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!I48R!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!I48R!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!I48R!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!I48R!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4a0fb36-4473-4871-b3dd-c6c1d0d7aa2a_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>I really think applying our real world rules to videogames could help through gamedev, specially when we think about data structures and physics, without further delay&#8230; Let&#8217;s create our first tiny door on PICO-8!</p><p>First of all, I created a cute tiny door for this example using the built-in PICO-8 Pixel Art editor.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!Prm1!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!Prm1!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!Prm1!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!Prm1!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!Prm1!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!Prm1!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif" width="520" height="520" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:520,&quot;bytes&quot;:203611,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/184943761?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!Prm1!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!Prm1!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!Prm1!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!Prm1!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40a8797e-94da-41b6-8d2e-07cbb6c2f571_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Then I&#8217;ve defined the <strong>Door </strong>object under a different tab to keep code and structure organiced</p><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;0e3c7f6a-a017-4b0a-bee8-9333dbf56d5e&quot;,&quot;duration&quot;:null}"></div><p>Our door is quite simple, just 40 lines of code and we are including <strong>properties</strong> and <strong>behaviors</strong>.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!wnX7!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!wnX7!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png 424w, https://substackcdn.com/image/fetch/$s_!wnX7!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png 848w, https://substackcdn.com/image/fetch/$s_!wnX7!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png 1272w, https://substackcdn.com/image/fetch/$s_!wnX7!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!wnX7!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png" width="396" height="396" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:396,&quot;bytes&quot;:4227,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/184943761?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!wnX7!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png 424w, https://substackcdn.com/image/fetch/$s_!wnX7!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png 848w, https://substackcdn.com/image/fetch/$s_!wnX7!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png 1272w, https://substackcdn.com/image/fetch/$s_!wnX7!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4d13aa1-956f-4cda-a505-10bb8cd50633_384x384.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">We are creating metatables to implement OOP on PICO-LUA. Is not a Class!</figcaption></figure></div><p>Let&#8217;s go through the different important aspects of our <strong>Door:</strong></p><h4>Properties</h4><ul><li><p><strong>SP. </strong>This is the initial sprite that we will set.</p></li><li><p><strong>X. </strong>This is the X position in the screen</p></li><li><p><strong>Y. </strong>This is the Y position in the screen</p></li><li><p><strong>OPENED. </strong>A boolean value to know if it&#8217;s open or closed</p></li></ul><h4>Behaviors</h4><ul><li><p><strong>Update. </strong>Update <strong>SP</strong> based on <strong>OPENED </strong>value</p></li><li><p><strong>Draw. </strong>call SPR() function to actually draw the door on screen based on <strong>SP </strong>value</p></li><li><p><strong>Open. </strong>Set <strong>OPENED </strong>as true value</p></li><li><p><strong>Close. </strong>Set <strong>OPENED </strong>as false value</p></li></ul><p>Cool, now writing with a more programming oriented language we have a door with just the variables (properties) and functions (Behaviors) that we need, now we just need to create our first door at the main loop of our PICO-8 project</p><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;ec778a14-5dc9-4b56-bc1a-7e4d89600f5e&quot;,&quot;duration&quot;:null}"></div><p>Simple, easy and clean. You can now apply this concept to any other entity you would need in your game; the player, an obstacle, our just your score system could be also another object of course.</p><blockquote><p><strong>Important. </strong>Metatables are quite different than Classes on Python or even LUA. Metatables are just advanced table structures where we can store values and functions so we can emulate the native OOP capabilities of LUA.</p><p>Remember LUA for PICO-8 is a minimal implementation and you can&#8217;t apply the built-in OOP where we have features like Inheritance and multiple Inheritance</p></blockquote><p>I have a challenge that I&#8217;m sure you will be able to complete quickly&#8230; </p><p>just adding lines at the main loop, are you able to draw more doors in different positions? How would you do that?</p><p>Thank you for reading, if you enjoyed this content please share with your family, partner, dogs and cats. &#128140;</p><div class="footnote" data-component-name="FootnoteToDOM"><a id="footnote-1" href="#footnote-anchor-1" class="footnote-number" contenteditable="false" target="_self">1</a><div class="footnote-content"><p>Doors could be <a href="https://lizengland.com/blog/the-door-problem/">somehow painful</a> to implement on Gamedev</p></div></div>]]></content:encoded></item><item><title><![CDATA[Best Handheld Consoles for Pico-8 Gamedev]]></title><description><![CDATA[Creating another experience through the platform itself]]></description><link>https://www.gamedevpills.com/p/best-handheld-consoles-for-pico-8</link><guid isPermaLink="false">https://www.gamedevpills.com/p/best-handheld-consoles-for-pico-8</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Thu, 15 Jan 2026 13:02:41 GMT</pubDate><enclosure url="https://substack-post-media.s3.amazonaws.com/public/images/4e033acb-682e-4e69-8298-862f96750263_6000x3368.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Within the last 3 years we (as consumers) experienced an interesting shift at the way we played videogames with the release of Steam Deck, it wasn&#8217;t only the format of the platform as Nintendo Switch has been with us since <em><strong>March, 2017</strong></em>. </p><p>But it was the number of possibilities we have with a device coming with SteamOS as it&#8217;s heart, where we can customize the whole system, add emulators of our beloved platforms and actually play every single game we own.</p><p>There are many people now taking advantage of owning a portable system to play anywhere and anytime. So nothing better to create, iterate and deliver your games for handheld systems.</p><p>In order to provide many options, I&#8217;ve decided to create my TOP 3 ranking </p><h1>3. Steam Deck</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!YPts!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!YPts!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg 424w, https://substackcdn.com/image/fetch/$s_!YPts!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg 848w, https://substackcdn.com/image/fetch/$s_!YPts!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!YPts!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!YPts!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg" width="1456" height="971" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:971,&quot;width&quot;:1456,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:4088007,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/jpeg&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/184205035?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!YPts!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg 424w, https://substackcdn.com/image/fetch/$s_!YPts!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg 848w, https://substackcdn.com/image/fetch/$s_!YPts!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!YPts!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8c921f7b-30ef-4aa4-9eae-052399a0c8cc_5184x3456.jpeg 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Image by https://unsplash.com/es/@edgaralmeida</figcaption></figure></div><h3>Technical Specs</h3><p>The Steam Deck features a custom AMD Zen 2 CPU and RDNA 2 GPU, 16GB LPDDR5 RAM, and various storage options (eMMC/NVMe SSD) with microSD expansion, running <strong>SteamOS</strong> on a 7-inch (or 7.4-inch OLED) 1280x800 display, offering PC gaming power in a handheld form factor with robust controls and modern connectivity like Wi-Fi 6E (OLED). </p><p>Key differences between LCD and OLED models include the OLED's brighter, more vibrant HDR screen, faster refresh rate (90Hz), better battery life (50Whr), Wi-Fi 6E, and lighter weight.</p><h3>Why?</h3><p>Flexibility and power, those are the main words that defines Steam Deck as device. You can easily run PICO-8 and many other emulators, including Picotron and even games released with bigger engines like Godot and Unreal.</p><h3>How?</h3><div id="youtube2-jZUAFfbZYKY" class="youtube-wrap" data-attrs="{&quot;videoId&quot;:&quot;jZUAFfbZYKY&quot;,&quot;startTime&quot;:null,&quot;endTime&quot;:null}" data-component-name="Youtube2ToDOM"><div class="youtube-inner"><iframe src="https://www.youtube-nocookie.com/embed/jZUAFfbZYKY?rel=0&amp;autoplay=0&amp;showinfo=0&amp;enablejsapi=0" frameborder="0" loading="lazy" gesture="media" allow="autoplay; fullscreen" allowautoplay="true" allowfullscreen="true" width="728" height="409"></iframe></div></div><h3>Where can I buy it?</h3><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://store.steampowered.com/steamdeck&quot;,&quot;text&quot;:&quot;Buy your Steam Deck!&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://store.steampowered.com/steamdeck"><span>Buy your Steam Deck!</span></a></p><h1>2. Miyoo Mini Plus</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!Y7Kv!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!Y7Kv!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg 424w, https://substackcdn.com/image/fetch/$s_!Y7Kv!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg 848w, https://substackcdn.com/image/fetch/$s_!Y7Kv!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!Y7Kv!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!Y7Kv!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg" width="1456" height="1092" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/e1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:1092,&quot;width&quot;:1456,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:3119468,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/jpeg&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/184205035?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!Y7Kv!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg 424w, https://substackcdn.com/image/fetch/$s_!Y7Kv!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg 848w, https://substackcdn.com/image/fetch/$s_!Y7Kv!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!Y7Kv!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe1d398d2-64ec-44aa-8025-6665a59650f4_5712x4284.jpeg 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Picture taken by myself, my own Miyoo Mini Plus &#10084;&#65039;</figcaption></figure></div><h3>Technical Specs</h3><p>The <strong>Miyoo</strong> Mini Plus is a popular retro handheld featuring a 3.5-inch IPS 640x480 screen, an ARM Cortex-A7 1.2GHz dual-core CPU, 128MB DDR3 RAM, and a 3000mAh battery for 5-6 hours of play.</p><p>Running on Linux with popular custom firmware like <strong><a href="https://onionui.github.io/">OnionOS</a></strong> for expanded features, and includes <strong>WiFi</strong> for box art scraping and updates, all in a compact, pocketable design.</p><h3>Why?</h3><p>The dimensions of this device is one of the strongest point, with its small size, measuring only <em><strong>108mm x 78.5mm x 22.3mm</strong></em>, and a light weight of just 162 grams, it's incredibly portable.</p><p>D-Pad and buttons are also excellent for platforms like PICO-8, it feels great running those small games on this tiny device, the only counterpart is the form factor of the screen (640x480) &#8212; Which could be perfect for PS1 and other emulators but doesn&#8217;t perfectly match with Pico-8 Scaling (128x128)</p><h3>How?</h3><div id="youtube2-0ztXYZReSRw" class="youtube-wrap" data-attrs="{&quot;videoId&quot;:&quot;0ztXYZReSRw&quot;,&quot;startTime&quot;:&quot;1084s&quot;,&quot;endTime&quot;:null}" data-component-name="Youtube2ToDOM"><div class="youtube-inner"><iframe src="https://www.youtube-nocookie.com/embed/0ztXYZReSRw?start=1084s&amp;rel=0&amp;autoplay=0&amp;showinfo=0&amp;enablejsapi=0" frameborder="0" loading="lazy" gesture="media" allow="autoplay; fullscreen" allowautoplay="true" allowfullscreen="true" width="728" height="409"></iframe></div></div><h3>Where can I buy it?</h3><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://officialmiyoomini.com/product/miyoo-mini-plus-v2-official-store/&quot;,&quot;text&quot;:&quot;Buy your Miyoo Mini Plus&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://officialmiyoomini.com/product/miyoo-mini-plus-v2-official-store/"><span>Buy your Miyoo Mini Plus</span></a></p><h1>1. RG CubeXX</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!l_xJ!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!l_xJ!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg 424w, https://substackcdn.com/image/fetch/$s_!l_xJ!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg 848w, https://substackcdn.com/image/fetch/$s_!l_xJ!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!l_xJ!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!l_xJ!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg" width="1200" height="900" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:900,&quot;width&quot;:1200,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;Anbernic RG Cube XX Full Handheld Specifications - Retro Catalog&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="Anbernic RG Cube XX Full Handheld Specifications - Retro Catalog" title="Anbernic RG Cube XX Full Handheld Specifications - Retro Catalog" srcset="https://substackcdn.com/image/fetch/$s_!l_xJ!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg 424w, https://substackcdn.com/image/fetch/$s_!l_xJ!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg 848w, https://substackcdn.com/image/fetch/$s_!l_xJ!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!l_xJ!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b166136-14cb-4182-99f8-29d514585c50_1200x900.jpeg 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Image by Retro Catalog (https://retrocatalog.com/retro-handhelds/rg-cube-xx)</figcaption></figure></div><h3>Technical Specs</h3><p>The <strong>Anbernic</strong> RG CubeXX is a Linux-based retro handheld with a square 3.95-inch 720x720 IPS screen, powered by an H700 quad-core CPU and 1GB RAM, featuring dual joysticks, RGB lighting, Wi-Fi, Bluetooth 4.2, a 3800mAh battery, and ports for HDMI and USB-C, excelling at systems like PS1, NDS, and Game Boy due to its unique form factor and controls</p><h3>Why?</h3><p>Form factor and screen ratio are the first things you could fall in love in with on this device, the screen being 720x720 is a perfectly scalable resolution for Pico-8 (128x128)</p><p>The console factor being with horizontal distribution (symetrical) similar to retro consoles like Game Boy Advance is another win for me (personal choice)</p><p>RG CubeXX CPU is significantly more powerful and modern than Miyoo Mini ARM Cortex-A7 @ 1.2GHz, offering a 64-bit architecture.</p><h3>How?</h3><div id="youtube2-EOBOkQyi6rM" class="youtube-wrap" data-attrs="{&quot;videoId&quot;:&quot;EOBOkQyi6rM&quot;,&quot;startTime&quot;:null,&quot;endTime&quot;:null}" data-component-name="Youtube2ToDOM"><div class="youtube-inner"><iframe src="https://www.youtube-nocookie.com/embed/EOBOkQyi6rM?rel=0&amp;autoplay=0&amp;showinfo=0&amp;enablejsapi=0" frameborder="0" loading="lazy" gesture="media" allow="autoplay; fullscreen" allowautoplay="true" allowfullscreen="true" width="728" height="409"></iframe></div></div><h3>Where can I buy it?</h3><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://anbernic.com/es-es/products/rg-cubexx&quot;,&quot;text&quot;:&quot;Buy your RG CubeXX&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://anbernic.com/es-es/products/rg-cubexx"><span>Buy your RG CubeXX</span></a></p><h1></h1>]]></content:encoded></item><item><title><![CDATA[You’re the playtester — how does Gamedevpills feel?]]></title><description><![CDATA[Let&#8217;s recalibrate gamedev content together, following continuous improvement rule]]></description><link>https://www.gamedevpills.com/p/youre-the-playtester-how-does-gamedevpills</link><guid isPermaLink="false">https://www.gamedevpills.com/p/youre-the-playtester-how-does-gamedevpills</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Tue, 13 Jan 2026 12:02:48 GMT</pubDate><enclosure url="https://substack-post-media.s3.amazonaws.com/public/images/c0b3d200-31c8-4117-8a9b-f3ed8d30b4b9_6048x4032.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Hello!</p><p>I would like to take few minutes from your time to understand which content do you like more and where should I put my efforts. Let&#8217;s level-up this substack together.</p><p>Thank you in advance!</p><div class="poll-embed" data-attrs="{&quot;id&quot;:431551}" data-component-name="PollToDOM"></div><div class="poll-embed" data-attrs="{&quot;id&quot;:431559}" data-component-name="PollToDOM"></div><div class="poll-embed" data-attrs="{&quot;id&quot;:431560}" data-component-name="PollToDOM"></div><div class="poll-embed" data-attrs="{&quot;id&quot;:431563}" data-component-name="PollToDOM"></div><div class="poll-embed" data-attrs="{&quot;id&quot;:431567}" data-component-name="PollToDOM"></div><div class="poll-embed" data-attrs="{&quot;id&quot;:431568}" data-component-name="PollToDOM"></div><p>You can also add additional input at the comments.</p><p>Thanks for participating!</p>]]></content:encoded></item><item><title><![CDATA[Starting the Year by Shipping a Game in 48 Hours]]></title><description><![CDATA[This is the story of how I started the year creating a small game, literally throwing lines of codes in 48 hours]]></description><link>https://www.gamedevpills.com/p/starting-the-year-by-shipping-a-game</link><guid isPermaLink="false">https://www.gamedevpills.com/p/starting-the-year-by-shipping-a-game</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Tue, 06 Jan 2026 15:02:45 GMT</pubDate><enclosure url="https://substackcdn.com/image/fetch/$s_!BNPg!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!BNPg!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!BNPg!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!BNPg!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!BNPg!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!BNPg!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!BNPg!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp" width="727" height="484.6666666666667" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:400,&quot;width&quot;:600,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:63852,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/webp&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/183583191?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!BNPg!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!BNPg!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!BNPg!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!BNPg!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7af6f5e6-f644-4764-857c-f168626e584e_600x400.webp 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>First of all, happy new year! </p><p>I&#8217;m super excited for many ideas I have, not only about gamedev learning but other formats I thought. I really look forward for growing this community and boost your gamedev understanding through the year.</p><p>The support I received from each of you just subscribing is huge for me,</p><p>Thank you!</p><div><hr></div><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!j6wa!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!j6wa!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png 424w, https://substackcdn.com/image/fetch/$s_!j6wa!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png 848w, https://substackcdn.com/image/fetch/$s_!j6wa!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png 1272w, https://substackcdn.com/image/fetch/$s_!j6wa!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!j6wa!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png" width="1210" height="1016" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:1016,&quot;width&quot;:1210,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:185952,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/183583191?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!j6wa!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png 424w, https://substackcdn.com/image/fetch/$s_!j6wa!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png 848w, https://substackcdn.com/image/fetch/$s_!j6wa!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png 1272w, https://substackcdn.com/image/fetch/$s_!j6wa!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F40c1851a-109f-499d-9637-e5bab03297ad_1210x1016.png 1456w" sizes="100vw"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>As we say in Spanish. <em>He wasn't dead; he was out on the town! (Out on a Jam&#8230;)</em></p><p>Many personal circumstances kept me away from writing on substack, most of the Christmas I've had the flu, a big one that is around my area. But I have another reason, diametrically opposed, that makes me feel quite proud &#8212; I&#8217;ve submitted my first PICO-8 game during the Toybox Jam 2025! &#129395;</p><div><hr></div><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!Wg7f!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!Wg7f!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!Wg7f!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!Wg7f!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!Wg7f!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!Wg7f!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif" width="384" height="384" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/c661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:980554,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/183583191?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!Wg7f!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!Wg7f!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!Wg7f!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!Wg7f!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc661efae-b0a4-4bd7-b0f8-6687be92b0fb_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p><em><strong>Safety Ship</strong> was submitted as a complete game, but it have some well known areas of improvement that I would like to work on during the next few weeks. I will keep you posted and the final version will be released for free on substack.</em></p><p><em>I expect to polish the game, at least to be closer to the game feel I had.</em></p><p><a href="https://jos3k4.itch.io/safety-ship">Play Safety Ship Here!</a></p><div><hr></div><p>My intention when I finally accepted that I didn&#8217;t have much time, was to experiment and play with the feeling of sea (waves, ship movement, floating npcs and more) leaving behind attention to other details. Let me introduce you to the rules of this fantastic game jam.</p><div class="subscription-widget-wrap-editor" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe&quot;,&quot;language&quot;:&quot;en&quot;}" data-component-name="SubscribeWidgetToDOM"><div class="subscription-widget show-subscribe"><div class="preamble"><p class="cta-caption">Gamedev Pills &#8211; Learn Game Design Around Your Day Job is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.</p></div><form class="subscription-widget-subscribe"><input type="email" class="email-input" name="email" placeholder="Type your email&#8230;" tabindex="-1"><input type="submit" class="button primary" value="Subscribe"><div class="fake-input-wrapper"><div class="fake-input"></div><div class="fake-button"></div></div></form></div></div><h2>TOY BOX JAM 2025</h2><p>At this Jam the organizer provide a wide set of resources (Sprites, SFX Sounds, Music) to build your game, modifications at the assets are not allowed so you don&#8217;t start from zero, which is quite good.</p><ul><li><p>If you are curious, <a href="https://drive.google.com/drive/folders/162i60pFHCN7uRD1RYUtDwkaYoYtglz9a">these</a> are the resources provided</p></li></ul><p>The Game jam ran from <strong>December 19th 2025 at 9:00 PM</strong> to <strong>January 4th 2026 at 11:00 PM &#8212; </strong>but as I mentioned before I just had the 3rd and 4th of January to work on the game.</p><blockquote><p>USE ANY GAME ENGINE YOU WANT, though the assets are made originally for Pico-8 and now Picotron. Extracted sprites, sfx, and music are within for folks using Unity, Godot, Gamemaker, Love2D, Picotron, or other engines! (Pico-8 folks, you don't need to download all those extracted WAVs and MP3s...)</p></blockquote><h1>How it started?</h1><p>Well, my ideal initial plan was to collaborate with my uncle for this jam, but he didn&#8217;t make it because he also had other obstacles during those weeks, so I&#8217;ve just decided to push myself and get into this crazy plan for the weekend on my own, it was so much fun&#8230;</p><p>When I went through all the assets available for this Jam, I automatically falled in love with the following spritesheet, it is beautiful, isn&#8217;t it?</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!QnH8!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!QnH8!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png 424w, https://substackcdn.com/image/fetch/$s_!QnH8!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png 848w, https://substackcdn.com/image/fetch/$s_!QnH8!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png 1272w, https://substackcdn.com/image/fetch/$s_!QnH8!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!QnH8!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png" width="725" height="725" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:725,&quot;bytes&quot;:10345,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/183583191?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!QnH8!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png 424w, https://substackcdn.com/image/fetch/$s_!QnH8!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png 848w, https://substackcdn.com/image/fetch/$s_!QnH8!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png 1272w, https://substackcdn.com/image/fetch/$s_!QnH8!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1901012e-c3cb-442f-88bc-44cb56fef362_384x384.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Pirates and ships theme&#8230; I choose you!</figcaption></figure></div><p>My intention was to use all the spritesheets available for this Jam as an inspiration for ideas and when I saw the potential the previous one had, it was really clear for me. </p><p>Actually, during a Game Jam you can&#8217;t spent lot of time at the ideation phase as that is time you are actually decreasing for the development phase, unfortunatelly there is no much space for preproduction/prototyping neither. This is strongly linked to the team size, when you are alone, just worry to throw lines of code as much as you can. &#128513;</p><p>This was my initial concept idea for the game, I&#8217;m going to translate the <em>Spanish </em>so you understand how ambitious (wrongly) I was:</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!wFFo!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!wFFo!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg 424w, https://substackcdn.com/image/fetch/$s_!wFFo!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg 848w, https://substackcdn.com/image/fetch/$s_!wFFo!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!wFFo!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!wFFo!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg" width="1456" height="1941" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:1941,&quot;width&quot;:1456,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:1997513,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/jpeg&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/183583191?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!wFFo!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg 424w, https://substackcdn.com/image/fetch/$s_!wFFo!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg 848w, https://substackcdn.com/image/fetch/$s_!wFFo!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!wFFo!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3831497b-01b2-44bf-a4d4-58812e7d781e_3144x4192.jpeg 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Initial ambition&#8230; who said SCOPE CREEP?</figcaption></figure></div><p>I wanted to create a ship game but mostly focused on the control of the ship, meaning you should be changing your character position inside the boat (right side menu) in order to take the rudder, sail using ropes or take the cannon to drop the small wood ships.</p><p>If you ever played <em>Sea of thieves </em>(I really recommend this experience with friends) my original idea was coming from there, you need to be switching functions constantly in order to actually take the boat to the right direction, is a constant decision making game, which is something I loved as an idea.</p><p>So the main verbs (Remember verbs == systems/mechanics) I had were:</p><ul><li><p>Explore islands (yes in plural) for loot</p></li><li><p>Show a map (being at the ship) to look for that loot, treasures</p></li><li><p>Shoot the cannon &#8212; I kept this one at the final release</p></li><li><p>Move the ship &#8212; Of course I also kept this one</p></li></ul><p>But as soon as I started with the development&#8230; again the reality came for me and yelled to my face &#8212; <strong>My dear hobbyist PICO-8 guy, you need to design mechanics you never did before! Be realistic</strong> &#8212; That was my inside voice and well, he was right.</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe now&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe?"><span>Subscribe now</span></a></p><h1>The Sea Effect</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!bXHo!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!bXHo!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!bXHo!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!bXHo!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!bXHo!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!bXHo!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif" width="454" height="454" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/c815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:454,&quot;bytes&quot;:264185,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/183583191?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!bXHo!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!bXHo!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!bXHo!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!bXHo!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc815c4e4-250a-4cae-a2f5-4ba80fc281a0_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Anchor ready ship to avoid movements on the sea</figcaption></figure></div><p>When you play <strong>Safety Ship</strong> you can&#8217;t visually see any real movement at the sea as I ran out of time before I can add lines creating the waves effect, but the main elements of the game, being the ship and the small npcs floating, are actually working through a <strong>wave formula</strong> I&#8217;ve found doing some research on Internet.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!nPOj!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!nPOj!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png 424w, https://substackcdn.com/image/fetch/$s_!nPOj!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png 848w, https://substackcdn.com/image/fetch/$s_!nPOj!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png 1272w, https://substackcdn.com/image/fetch/$s_!nPOj!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!nPOj!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png" width="1456" height="463" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/a70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:463,&quot;width&quot;:1456,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:92980,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/183583191?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!nPOj!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png 424w, https://substackcdn.com/image/fetch/$s_!nPOj!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png 848w, https://substackcdn.com/image/fetch/$s_!nPOj!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png 1272w, https://substackcdn.com/image/fetch/$s_!nPOj!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa70358f8-dc9a-4963-836c-c58396bdbff8_2370x753.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>As I mentioned on my post <strong><a href="https://www.gamedevpills.com/p/5-things-to-know-before-start-solo">5 Things To Know Before Start Solo Gamedev</a> </strong>it is quite important to have some math fundamentals when doing gamedev, because it is going to save you so much time of struggling with code and throwing random lines at your IDE that may need intense sessions of changes if you want to improve them</p><p>Physics of the sea are not constant and depends on many natural factors that actually change the wavelength quite often, but again, this is a game jam and the priority should not be pursue the perfection, specially if it&#8217;s one of your first Jams, time constraint is a cruel and real thing.</p><p>Rather than that the priority should be to submit your game as finished as possible.</p><p>On a future post I plan to share details about my humble implementation of waves effect.</p><h1>Ship Rotation and Handling</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!On6-!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!On6-!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!On6-!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!On6-!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!On6-!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!On6-!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif" width="462" height="462" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:462,&quot;bytes&quot;:672112,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/183583191?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!On6-!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!On6-!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!On6-!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!On6-!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F494e0c46-d50b-4265-a0f6-d51f011bb183_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Look at that cute tiny ship!</figcaption></figure></div><p>At least my initial concept page was useful to keep me looking for the right handling of the ship, is one of the things I&#8217;m proud about this tiny prototype/game wannabe and again, <strong>math </strong>and built-in <a href="https://pico-8.fandom.com/wiki/Sin">pico8 functions</a> just came to save my precious time during my 48 hours crunch session.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!x_Sa!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!x_Sa!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp 424w, https://substackcdn.com/image/fetch/$s_!x_Sa!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp 848w, https://substackcdn.com/image/fetch/$s_!x_Sa!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp 1272w, https://substackcdn.com/image/fetch/$s_!x_Sa!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!x_Sa!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp" width="319" height="242" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:242,&quot;width&quot;:319,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:null,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!x_Sa!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp 424w, https://substackcdn.com/image/fetch/$s_!x_Sa!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp 848w, https://substackcdn.com/image/fetch/$s_!x_Sa!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp 1272w, https://substackcdn.com/image/fetch/$s_!x_Sa!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1747385c-4d6e-4b2b-b2d7-89eab83ec917_319x242.webp 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">cos and sin functions are you friends for circular angles!</figcaption></figure></div><p>When I went through the <strong><a href="https://www.gamedevpills.com/p/the-invisible-boundaries-collisions">Amazing</a> </strong>implementation of Arkanoi-8 by Josh Millar (developed on PICO-8) I had chance to understand how cos and sin functions can be used within <strong>r </strong>being a value for rotation from 0.0 to 0.99.</p><p>If you keep in mind those key components, you can easily create a movement based on up, down, left, right and diagonals.</p><p>I plan to share my approach for both <strong>Sea Waves </strong>and <strong>Ship</strong> <strong>Handling </strong>here on substack during the next few weeks, those will be available for my paid subscriptors as the source code will be included.</p><div><hr></div><p></p><p>You can now access the paid content of gamedevpills with forever discount if you bring some friends!</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?coupon=241ae39d&amp;group=true&amp;utm_content=183583191&quot;,&quot;text&quot;:&quot;Get 20% off forever&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe?coupon=241ae39d&amp;group=true&amp;utm_content=183583191"><span>Get 20% off forever</span></a></p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;d8660e22-1093-4c6c-b7ff-bb207f837793&quot;,&quot;caption&quot;:&quot;Hello my fellow subscriber!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Super Mario Maker Demake #1 - Full code and Assets&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-12-14T16:08:10.130Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Hv84!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59286491-b394-4f61-89c8-4b62311a9817_600x400.webp&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/super-mario-maker-demake-1-full-code&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:181597122,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:1,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div><hr></div><h1>Conclusion (TLDR)</h1><p>This was my second game jam alone and my first one using PICO-8 as the heart of the game, if I compare the way I executed both game jams on my own, there are many patterns in common I really wish I can improve for next time. But I can tell you those are factors that are quite difficult to improve.</p><ol><li><p>Menu and UI were developed almost at the end of last day</p></li><li><p>SFX and music were added almost at the end of last day</p></li><li><p>I lost some time with development of aspects that were not quite <strong>impactful </strong>at the end, they were actually <strong>removed</strong></p></li><li><p>The initial scope is always bigger than it should be. Specially on Game Jams, think small, but really really small</p></li><li><p>itch.io page and submit were happening, literally within the last minutes&#8230; :|</p></li></ol><p>If you liked this post you can help me a lot sharing with your friends, family, dogs and cats. &#128140; </p><p>My intention is to keep us connected to our creative side and learn together. </p><p>I&#8217;m just a hobbyist PICO-8 gamedev, not professionally connected to the industry &#8212; but I do come from a technical background as an IT Support Manager, and that usually helps a lot.</p><p>Thank you for reading!</p><p></p><p></p><p></p>]]></content:encoded></item><item><title><![CDATA[The Best Roguelite Was Made in Gamemaker]]></title><description><![CDATA[A Roguelite genre masterclass with the lens of game design, but not without an introduction of the genres origin]]></description><link>https://www.gamedevpills.com/p/the-best-roguelite-was-made-in-gamemaker</link><guid isPermaLink="false">https://www.gamedevpills.com/p/the-best-roguelite-was-made-in-gamemaker</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Thu, 25 Dec 2025 13:40:14 GMT</pubDate><enclosure url="https://substackcdn.com/image/fetch/$s_!nbx-!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!nbx-!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!nbx-!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!nbx-!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!nbx-!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!nbx-!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!nbx-!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp" width="727" height="484.6666666666667" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/eb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:400,&quot;width&quot;:600,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:12884,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/webp&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/182252123?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!nbx-!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!nbx-!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!nbx-!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!nbx-!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb164298-c4ff-498b-a2db-c8e2278e7e8d_600x400.webp 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Hello my fellow players,</p><p>First of all, merry christmas to all of you! Best wishes to you and your families during this time.</p><p>I&#8217;ve lost count of how many times I&#8217;ve died playing <s>roguelikes</s> roguelites, but actually, from my perspective is one of the main factors behind the <em>state of flow</em>. When the creator achieve that connection where the player doesn&#8217;t consciously think that it&#8217;s playing a videogame, is when the good design has been implemented.</p><p>But why do we keep playing? Isn&#8217;t it repetitive? Is not easy to create a good balanced roguelites, if the challenge doesn&#8217;t exist your feeling is <strong>bored</strong> as there is no reward or satisfaction on it, on the other side if the challenge is really high and you barely complete one or two dungeons, you will quite soon by <strong>frustration</strong>.</p><p>But before I introduce you to the videogame behind the headline, let&#8217;s shortly have a distinction between <strong>Roguelike </strong>and <strong>Roguelite </strong>genres as they could be easily mixed and there isn&#8217;t a clear definition around, I always prefer to teach with examples&#8230;</p><p>let&#8217;s go!</p><div><hr></div><h1>Let&#8217;s go back to 1980&#8230; </h1><p>To understand recent games design, sometimes is quite important we take our time machine (Internet) and we do some research around the genre we would like to know about.</p><p><strong>Rogue</strong> is a dungeon crawling videogame by Michael Toy and Glenn Wichman with later contributions by Ken Arnold. Rogue was originally developed around 1980 for Unix-based minicomputer systems as a freely distributed executable. </p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!zrje!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!zrje!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg 424w, https://substackcdn.com/image/fetch/$s_!zrje!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg 848w, https://substackcdn.com/image/fetch/$s_!zrje!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!zrje!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!zrje!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg" width="304" height="457.216" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:376,&quot;width&quot;:250,&quot;resizeWidth&quot;:304,&quot;bytes&quot;:null,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!zrje!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg 424w, https://substackcdn.com/image/fetch/$s_!zrje!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg 848w, https://substackcdn.com/image/fetch/$s_!zrje!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!zrje!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F985ff2f5-e6d4-492f-89a1-47b904346ba1_250x376.jpeg 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Toy and Wichman, both students at University of California, Santa Cruz, worked together to create their own text-based game but looked to incorporate elements of procedural generation to create a new experience each time the user played the game.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!l17R!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!l17R!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png 424w, https://substackcdn.com/image/fetch/$s_!l17R!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png 848w, https://substackcdn.com/image/fetch/$s_!l17R!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png 1272w, https://substackcdn.com/image/fetch/$s_!l17R!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!l17R!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png" width="630" height="411.3223140495868" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/c589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:316,&quot;width&quot;:484,&quot;resizeWidth&quot;:630,&quot;bytes&quot;:null,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!l17R!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png 424w, https://substackcdn.com/image/fetch/$s_!l17R!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png 848w, https://substackcdn.com/image/fetch/$s_!l17R!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png 1272w, https://substackcdn.com/image/fetch/$s_!l17R!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc589ea9d-18a0-4eb3-aaae-97c8f7fc6ca2_484x316.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>The main features of a <em>pure</em> <em>rogue</em> are:</p><ul><li><p>Random environment generation</p></li><li><p>Permadeath</p></li><li><p>Turn-based</p></li><li><p>Grid-based</p></li></ul><p>Many years later, commercial games borrowed <em>some</em> roguelike elements (procedural runs + permadeath) but <strong>dropped</strong> others (like turn/grid) and often added persistent progression, people started using <strong>roguelite</strong> to distinguish them from the traditional hardcore roguelikes, because yes, they could be somehow <strong>frustrating</strong>.</p><p>Unfortunately&#8230;These terms are <strong>contested</strong> and used inconsistently in stores/tags; <strong>roguelike</strong> is often used as an umbrella term even for roguelites.</p><div class="subscription-widget-wrap-editor" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe&quot;,&quot;language&quot;:&quot;en&quot;}" data-component-name="SubscribeWidgetToDOM"><div class="subscription-widget show-subscribe"><div class="preamble"><p class="cta-caption">Gamedev Pills &#8211; Learn Game Design Around Your Day Job is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.</p></div><form class="subscription-widget-subscribe"><input type="email" class="email-input" name="email" placeholder="Type your email&#8230;" tabindex="-1"><input type="submit" class="button primary" value="Subscribe"><div class="fake-input-wrapper"><div class="fake-input"></div><div class="fake-button"></div></div></form></div></div><p>Let me introduce you to <strong>Nethack</strong>.</p><p>It&#8217;s a title I had the chance to play when I wasn&#8217;t even a teenager. My uncle introduced me to it, and I completely fell in love with it. NetHack is a fork of the 1984 game <em>Hack</em>, itself inspired by the 1980 game <em>Rogue</em> we just mentioned.</p><p>If you think about it, when the videogame industry was in its early &#8220;teenage&#8221; years (remember <em>Pong</em> released in 1972), good ideas and concepts were already being reused. Today we complain about similarities between new releases, but honestly, I see it as a perk of gamedev: we keep following systems and structures that already work.</p><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;5be34520-8adc-4492-98d9-796d38f9c363&quot;,&quot;duration&quot;:null}"></div><p>I only played a few seconds as &#8220;Jose the Aspirant&#8221; (oh&#8212;was that a reference to my gamedev journey? haha), and you can see that most actions are <strong>commands</strong>. Back in the 80s, computers didn&#8217;t have plug-and-play controllers like today, so many games were designed with the keyboard in mind.</p><div class="callout-block" data-callout="true"><p>You can actually <a href="https://dos.zone/nethack-1992/">play Nethack</a></p></div><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!Dzqa!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!Dzqa!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg 424w, https://substackcdn.com/image/fetch/$s_!Dzqa!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg 848w, https://substackcdn.com/image/fetch/$s_!Dzqa!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!Dzqa!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!Dzqa!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg" width="727" height="514.3525" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/c92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:566,&quot;width&quot;:800,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:null,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!Dzqa!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg 424w, https://substackcdn.com/image/fetch/$s_!Dzqa!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg 848w, https://substackcdn.com/image/fetch/$s_!Dzqa!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!Dzqa!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc92d26d5-00d8-4001-bf31-c5e7c55c5797_800x566.jpeg 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Quick Sheet for Nethack - Most used commands</figcaption></figure></div><blockquote><p>Curious Data. <a href="https://www.moma.org/collection/works/199863">NetHack</a> has been inducted into <a href="https://www.moma.org/">The Museum of Modern Art</a> in New York City, New York, USA (MoMA) as part of their video game collection and is included in the exhibition <a href="https://www.moma.org/calendar/exhibitions/5453">&#8220;Never Alone: Video Games and Other Interactive Design&#8221;</a> </p><p>Nethack is serious stuff, it is part of history of videogames. If you want to play, be careful as it is addictive. I&#8217;m pretty sure games released by From Software take inspiration from this one.</p><p><a href="https://www.nethack.org/">https://www.nethack.org/</a></p></blockquote><p>Taking Nethack&#8217;s game loop and main features, we can easily understand how this genre is designed these days.</p><h1>Gamemaker Power Unlocked</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!i8kG!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!i8kG!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png 424w, https://substackcdn.com/image/fetch/$s_!i8kG!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png 848w, https://substackcdn.com/image/fetch/$s_!i8kG!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png 1272w, https://substackcdn.com/image/fetch/$s_!i8kG!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!i8kG!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png" width="725" height="588.2294164668266" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:1015,&quot;width&quot;:1251,&quot;resizeWidth&quot;:725,&quot;bytes&quot;:645348,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/182252123?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!i8kG!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png 424w, https://substackcdn.com/image/fetch/$s_!i8kG!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png 848w, https://substackcdn.com/image/fetch/$s_!i8kG!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png 1272w, https://substackcdn.com/image/fetch/$s_!i8kG!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a6e8285-0fcb-4e65-9ffb-7cd9eefd6c6a_1251x1015.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>It was 17th August, 2016, you can imagine how difficult is to survive the heat on Spain during summer, I remember I was coming back from work, excited to check my usual videogames newsletters and digital stores, then I see an interesting headline on <a href="http://vidaextra.com">vidaextra.com</a> announcing another Humble Bundle. I bought it immediately, my younger self couldn&#8217;t resist the temptation.</p><p>Again, they delivered a masterpiece that&#8217;s still part of my DRM-free collection: <strong>Nuclear Throne</strong>.</p><p>I should have hundreds of hours at that game, but unfortunatelly back then when I played it, it wasn&#8217;t part of my steam collection so I dont have the real stats.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!5OBt!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!5OBt!,w_424,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif 424w, https://substackcdn.com/image/fetch/$s_!5OBt!,w_848,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif 848w, https://substackcdn.com/image/fetch/$s_!5OBt!,w_1272,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif 1272w, https://substackcdn.com/image/fetch/$s_!5OBt!,w_1456,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!5OBt!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif" width="725" height="378.45" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:261,&quot;width&quot;:500,&quot;resizeWidth&quot;:725,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;QMHdvYm.gif (500&#215;261)&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="QMHdvYm.gif (500&#215;261)" title="QMHdvYm.gif (500&#215;261)" srcset="https://substackcdn.com/image/fetch/$s_!5OBt!,w_424,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif 424w, https://substackcdn.com/image/fetch/$s_!5OBt!,w_848,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif 848w, https://substackcdn.com/image/fetch/$s_!5OBt!,w_1272,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif 1272w, https://substackcdn.com/image/fetch/$s_!5OBt!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5fb83dac-823d-4cba-b4d2-d7f8ebc666d9_500x261.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Nuclear Throne is a near&#8209;perfect case study for roguelites on how to build a brutally replayable game around a tiny core loop, again (<em>you see the pattern?</em>) titles like <em><a href="https://store.steampowered.com/app/311690/Enter_the_Gungeon/">Enter the gungeon</a> </em>or <em><a href="https://store.steampowered.com/app/1304680/Voidigo/">Voidigo</a> </em>had a strong inspiration from the <em>sensei.</em></p><p>It&#8217;s design is exhaustively measured and you can feel that within the first 30 seconds, really well designed games creates a strong magnetism between visuals &#8594; input &#8594; player. </p><p>The initial game feel, the smallest loop you can find, is a orchestra between input and character control &#8594; Feedback; move, shoot, character skills. It is just simple and exquisite and I will tell you why, so you run to the <a href="https://store.steampowered.com/app/242680/Nuclear_Throne/">Steam Store page</a>. (50% Discount now) &#128519;</p><div class="captioned-button-wrap" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/p/the-best-roguelite-was-made-in-gamemaker?utm_source=substack&utm_medium=email&utm_content=share&action=share&quot;,&quot;text&quot;:&quot;Share&quot;}" data-component-name="CaptionedButtonToDOM"><div class="preamble"><p class="cta-caption">Thanks for reading Gamedev Pills &#8211; Learn Game Design Around Your Day Job! This post is public so feel free to share it.</p></div><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/p/the-best-roguelite-was-made-in-gamemaker?utm_source=substack&utm_medium=email&utm_content=share&action=share&quot;,&quot;text&quot;:&quot;Share&quot;}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/p/the-best-roguelite-was-made-in-gamemaker?utm_source=substack&utm_medium=email&utm_content=share&action=share"><span>Share</span></a></p></div><h2>Character Control</h2><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!ttsB!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!ttsB!,w_424,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif 424w, https://substackcdn.com/image/fetch/$s_!ttsB!,w_848,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif 848w, https://substackcdn.com/image/fetch/$s_!ttsB!,w_1272,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif 1272w, https://substackcdn.com/image/fetch/$s_!ttsB!,w_1456,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!ttsB!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif" width="724" height="550.24" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:532,&quot;width&quot;:700,&quot;resizeWidth&quot;:724,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;Nuclear Throne Character Animation &amp; Movement Tutorial | by Simone Rizio |  Medium&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="Nuclear Throne Character Animation &amp; Movement Tutorial | by Simone Rizio |  Medium" title="Nuclear Throne Character Animation &amp; Movement Tutorial | by Simone Rizio |  Medium" srcset="https://substackcdn.com/image/fetch/$s_!ttsB!,w_424,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif 424w, https://substackcdn.com/image/fetch/$s_!ttsB!,w_848,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif 848w, https://substackcdn.com/image/fetch/$s_!ttsB!,w_1272,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif 1272w, https://substackcdn.com/image/fetch/$s_!ttsB!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F10a3da7c-711d-4150-b84a-b3cec1116953_700x532.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Source: https://medium.com/@simonerizio/nuclear-throne-character-animation-movement-tutorial-40e69ab624c8</figcaption></figure></div><p>No matter which character you choose, all of them feels agile through the map, I&#8217;m pretty sure that&#8217;s a strong <strong>design decision</strong>. With fastest movement the exposure to enemies is increased as every step move one entire map tile. (that sounds familiar from <em>nethack</em>, right?) </p><p>But that decision was core and as Shigeru Miyamoto would say <em>&#8220;A good idea is something that does not solve just one single problem, but rather can solve multiple problems at once&#8221;</em></p><p>Fast movement also makes it harder to grab loot (weapons) safely. In many situations, the map is full of enemies and bullets, so you barely have time to read what dropped&#8212;you just grab it and move.</p><h2>Weapons Feel (Gunplay)</h2><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!yCdl!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!yCdl!,w_424,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif 424w, https://substackcdn.com/image/fetch/$s_!yCdl!,w_848,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif 848w, https://substackcdn.com/image/fetch/$s_!yCdl!,w_1272,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif 1272w, https://substackcdn.com/image/fetch/$s_!yCdl!,w_1456,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!yCdl!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif" width="728" height="409.6213333333333" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:422,&quot;width&quot;:750,&quot;resizeWidth&quot;:728,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;Go Play: Nuclear Throne &#8211; Drassof's Den&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="Go Play: Nuclear Throne &#8211; Drassof's Den" title="Go Play: Nuclear Throne &#8211; Drassof's Den" srcset="https://substackcdn.com/image/fetch/$s_!yCdl!,w_424,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif 424w, https://substackcdn.com/image/fetch/$s_!yCdl!,w_848,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif 848w, https://substackcdn.com/image/fetch/$s_!yCdl!,w_1272,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif 1272w, https://substackcdn.com/image/fetch/$s_!yCdl!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F028bb21b-f6b2-44c4-9efd-98b3f6af043f_750x422.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Another strong ingredient for the master nuclear throne recipe, the weapons feedback, even just playing with the initial revolver, every bullet feels heavy and huge, so just in a visual way you feel stronger.</p><p>Well at least against the smallest enemies as that feeling is going away when you face the first big enemies.</p><p>Everytime your bullets or explosive ammo hits an enemy, the feedback from enemies being hitted is another <strong>strong design </strong>decision, they are not only dying, but they creep with well designed physics through the map.</p><p>Yes, dead bodies are visible at the map, so you can feel even stronger.</p><h2>Enemies</h2><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!Em0k!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!Em0k!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png 424w, https://substackcdn.com/image/fetch/$s_!Em0k!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png 848w, https://substackcdn.com/image/fetch/$s_!Em0k!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png 1272w, https://substackcdn.com/image/fetch/$s_!Em0k!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!Em0k!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png" width="1456" height="917" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/fd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:917,&quot;width&quot;:1456,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:154169,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/182252123?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!Em0k!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png 424w, https://substackcdn.com/image/fetch/$s_!Em0k!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png 848w, https://substackcdn.com/image/fetch/$s_!Em0k!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png 1272w, https://substackcdn.com/image/fetch/$s_!Em0k!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffd66cad6-20f2-42cd-af18-bf376061c871_2492x1569.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Last but not least: enemy AI.</p><p>I haven&#8217;t checked the code, but it <em>feels</em> like enemies fall into two main archetypes: <strong>aggressive</strong> and <strong>passive</strong>.</p><h3>Agressive Enemies</h3><p>When you start your first run, the smallest and weakest enemies always go towards you, but it&#8217;s true that they actually move back when you are really close to them, kind of to avoid that bullet from your weapon.</p><h3>Passive Enemies</h3><p>When you find stronger enemies, they keep even more distance from you but as bullets never disappear at this game they keep shooting so a some point they will reach you, but they are hidden somewhere so you can&#8217;t kill them, they are a real pain.</p><p>These two archetypes are part of a connected system that creates a true roguelite bullet-hell experience. Without enemies, moving through the game doesn&#8217;t mean anything &#8212; it&#8217;s that simple.</p><h2>Wrap Up</h2><p>Nuclear Throne is not only a very enjoyable roguelite&#8212;it&#8217;s a masterpiece to study in terms of game design.</p><p>Here I focused on the initial game feel loop, but there&#8217;s much more: characters with unique skills, cosmetics to unlock, and the higher-level loop where after each biome you choose a mutation that makes your character stronger&#8212;changing how the next levels play.</p><p>There are many other things I could say about this wonderful game, but you know me: I prefer short articles.</p><p>If you&#8217;re making prototypes (or even a full game), I think this &#8220;first 30 seconds&#8221; mindset is a powerful lesson. That first interaction is often more important than the rest of the session&#8212;because as humans, we lose engagement over time.</p><p>Again, thank you for reading.</p><p></p><p> </p><p></p>]]></content:encoded></item><item><title><![CDATA[3 Tips To Fuel Your Motivation]]></title><description><![CDATA[Without external motivation is easy to give-up, but taking some advice could support your journey]]></description><link>https://www.gamedevpills.com/p/3-tips-to-fuel-your-motivation</link><guid isPermaLink="false">https://www.gamedevpills.com/p/3-tips-to-fuel-your-motivation</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Fri, 19 Dec 2025 19:11:18 GMT</pubDate><enclosure url="https://substackcdn.com/image/fetch/$s_!d2sE!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!d2sE!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!d2sE!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!d2sE!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!d2sE!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!d2sE!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!d2sE!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp" width="727" height="484.6666666666667" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:400,&quot;width&quot;:600,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:25444,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/webp&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181719186?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!d2sE!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!d2sE!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!d2sE!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!d2sE!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59c86e4f-5a6d-4fee-b443-ccbc8fda9d3e_600x400.webp 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Cover designed by Myself, a human</figcaption></figure></div><p>Hello my fellow gamedevs and players!</p><p>My substack is mostly covering a technical approach to gamedev, specially PICO-8, but I also share post about mindset and state of the industry, at the end if you really want to do solo gamedev, you will need to wear so many hats during your journey.</p><p>At this article I also wanted to come with a realistic approach, as I shared on previous post and even on my introduction&#8230;I&#8217;m not a professional game developer working on the industry, but I actually have a taste for design (look at that pixel art at the post :D) technical skills, but way more important than that, management skills.</p><p>As a manager, I know how <strong>motivation </strong>and <strong>energy </strong>have a tremendous impact at what we do and I can tell you, how short-term, mid-term and long-term outcomes are connected to those words.</p><p>This will be about what drives us, what keep us working no matter what. You that decided to subscribe to Gamedevpills because you felt the need of increasing your knowledge &#8212; or at least inspiration from my lines. </p><p>Thank you for that and let&#8217;s go through this exciting topic.</p><h1>Be realistic, We are not John Romero</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!1pA8!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fabc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!1pA8!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fabc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg 424w, https://substackcdn.com/image/fetch/$s_!1pA8!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fabc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg 848w, https://substackcdn.com/image/fetch/$s_!1pA8!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fabc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!1pA8!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fabc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!1pA8!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fabc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg" width="1456" height="932" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/abc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:932,&quot;width&quot;:1456,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;This is me, Kevin and Adrian posing for a pic during DOOM II development.  I'm always looking nutty in pics - cause i'm nutty!&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="This is me, Kevin and Adrian posing for a pic during DOOM II development.  I'm always looking nutty in pics - cause i'm nutty!" title="This is me, Kevin and Adrian posing for a pic during DOOM II development.  I'm always looking nutty in pics - cause i'm nutty!" srcset="https://substackcdn.com/image/fetch/$s_!1pA8!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fabc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg 424w, https://substackcdn.com/image/fetch/$s_!1pA8!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fabc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg 848w, https://substackcdn.com/image/fetch/$s_!1pA8!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fabc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!1pA8!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fabc99f28-cacb-4397-888f-13916ad10615_1775x1136.jpeg 1456w" sizes="100vw"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">John Romero, Kevin and Adrian during Doom II Development, they look engaged, right?</figcaption></figure></div><p>Well, maybe it hurts a little bit when the realistic slap hit our face, but that&#8217;s the authentic way to reach our goals, John Romero was able to see design when the term was extensively in use like this days, a genius, innate skills.</p><p>That doesn&#8217;t mean you can&#8217;t deliver a succesfull videogame, maybe the author of the next GOTY indie title is reading this lines &#8212; I would be really proud of that &#8212; but this advice is actually more about, self-awareness and structure, look at yourself to know your strenghts, look at your structure to have your own map, anytime, anywhere.</p><p>I really like creating structures of work (make sense right? management smelling) and I created this template for myself when I want to kick-off a project, don&#8217;t take value from it reading each question, but actually thinking about the structure. </p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!2l5M!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!2l5M!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png 424w, https://substackcdn.com/image/fetch/$s_!2l5M!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png 848w, https://substackcdn.com/image/fetch/$s_!2l5M!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png 1272w, https://substackcdn.com/image/fetch/$s_!2l5M!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!2l5M!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png" width="727" height="777.055737704918" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/dc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:1304,&quot;width&quot;:1220,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:292319,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181719186?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!2l5M!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png 424w, https://substackcdn.com/image/fetch/$s_!2l5M!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png 848w, https://substackcdn.com/image/fetch/$s_!2l5M!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png 1272w, https://substackcdn.com/image/fetch/$s_!2l5M!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdc8631ca-ec95-4402-8d7d-5a2079cd70e7_1220x1304.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Left to right thinking, like russian dolls.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!CduT!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!CduT!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg 424w, https://substackcdn.com/image/fetch/$s_!CduT!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg 848w, https://substackcdn.com/image/fetch/$s_!CduT!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!CduT!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!CduT!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg" width="641" height="360.5625" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:819,&quot;width&quot;:1456,&quot;resizeWidth&quot;:641,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;Objects of desire: Russian doll&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="Objects of desire: Russian doll" title="Objects of desire: Russian doll" srcset="https://substackcdn.com/image/fetch/$s_!CduT!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg 424w, https://substackcdn.com/image/fetch/$s_!CduT!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg 848w, https://substackcdn.com/image/fetch/$s_!CduT!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!CduT!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8d38986a-b79f-4303-8527-78da91a022e9_2667x1500.jpeg 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><h3>All the elements are for a pre-production stage</h3><ul><li><p><strong>Pillars. </strong>Being all the fields where contributions are required to finish your project, those are the core elements.</p></li><li><p><strong>Vision. </strong>The highest level description that describe your idea on that pillar</p></li><li><p><strong>Conceptual. </strong>Your concepts, you can prototype here after your reflections from previous columns.</p></li><li><p><strong>Concrete. </strong>You already played, changed and probably came with new ideas after the conceptual stage, let&#8217;s define your goals</p></li><li><p><strong>Actionable. </strong>Create your tasks and plan them on your calendar! </p></li></ul><h3>Planning Structure</h3><ul><li><p>Short-term tasks and outcomes. space for a weekly basis.</p></li><li><p>Mid-term releases, set of tasks that fullfill a milestone. Bi-weekly</p><ul><li><p>To give you an example: Character 2D Movement (No physics yet)</p></li></ul></li><li><p>Long-term, the release of a demo for playtesting. Monthly</p><ul><li><p>Example: After 2 milestones you have Character 2D Movement and Gravity, start the playtesting with family and friends. Is the movement of the character good?</p></li></ul></li></ul><div><hr></div><p>Thank you for reading! If you like my content I really appreaciate that you spread the pills around your networks</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/p/3-tips-to-fuel-your-motivation?utm_source=substack&utm_medium=email&utm_content=share&action=share&quot;,&quot;text&quot;:&quot;Share&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/p/3-tips-to-fuel-your-motivation?utm_source=substack&utm_medium=email&utm_content=share&action=share"><span>Share</span></a></p><p>Oh! I forgot, if you want this content (and more) on your inbox every week, you are one click away, quick and easy!</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe now&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe?"><span>Subscribe now</span></a></p><p>Oh! I see, you are so excited that you want to access to the full history of gamedevpills, including workshops code and assets, essays about indie studios&#8230; Here you go:</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/p/how-a-weekend-jam-can-teach-you-more&quot;,&quot;text&quot;:&quot;Subscription Plan&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/p/how-a-weekend-jam-can-teach-you-more"><span>Subscription Plan</span></a></p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;b2ff4292-8349-41a1-90bf-4808e4950260&quot;,&quot;caption&quot;:&quot;Hello my fellow subscriber!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Super Mario Maker Demake #1 - Full code and Assets&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-12-14T16:08:10.130Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Hv84!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59286491-b394-4f61-89c8-4b62311a9817_600x400.webp&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/super-mario-maker-demake-1-full-code&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:181597122,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:1,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;dc409a31-bec9-4343-a709-39ba5b08fd81&quot;,&quot;caption&quot;:&quot;Hello my fellow players and gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;From Bastion to Hades: How Supergiant Games Became Masters of Indiedev&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-08-30T15:16:48.821Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!C9zf!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F368a0abd-200a-493d-9f3f-da952229d19c_723x512.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/from-bastion-to-hades-how-supergiant&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:172329080,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:9,&quot;comment_count&quot;:1,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;05eecea4-5ec4-4481-ace2-f0c6609585e3&quot;,&quot;caption&quot;:&quot;Hello my fellow gamedevs and players!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;How a Weekend Jam Can Teach You More Than a Month of Tutorials&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-09-04T16:01:27.478Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!JGno!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe655b7a-80c5-48cb-9f79-0a1118f1bb6c_5184x3456.jpeg&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/how-a-weekend-jam-can-teach-you-more&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:172502004,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:4,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div><hr></div><h1>Create a Community and engage</h1><p>You have a plan, you&#8217;ve been working hard on the breakdown of ideas to start your first prototype, you are totally engaged during the first few weeks or maybe months because you also used your <strong>discipline,</strong> but suddenly one week, other priorities suddenly show-up like Pikachu at the <em>Viridian Forest</em> (it had 5% ratio) and then you stop what you&#8217;ve been doing because you don&#8217;t believe anymore on yourself&#8230;</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!6HAo!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!6HAo!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg 424w, https://substackcdn.com/image/fetch/$s_!6HAo!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg 848w, https://substackcdn.com/image/fetch/$s_!6HAo!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!6HAo!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!6HAo!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg" width="585" height="329.0625" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:720,&quot;width&quot;:1280,&quot;resizeWidth&quot;:585,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;Plantilla de meme triste: presentaci&#243;n gratuita de PowerPoint y Google  Slides - SlideChef&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="Plantilla de meme triste: presentaci&#243;n gratuita de PowerPoint y Google  Slides - SlideChef" title="Plantilla de meme triste: presentaci&#243;n gratuita de PowerPoint y Google  Slides - SlideChef" srcset="https://substackcdn.com/image/fetch/$s_!6HAo!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg 424w, https://substackcdn.com/image/fetch/$s_!6HAo!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg 848w, https://substackcdn.com/image/fetch/$s_!6HAo!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!6HAo!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ea2e701-e4a9-43e1-a3d9-6c7033877046_1280x720.jpeg 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>But imagine if someone told you there is a Mewtwo just outside the <em>Viridian Forest </em>of course Pikachu will be <strong>TOTALLY </strong>ignored, the community is your <strong>Mewtwo.</strong></p><p>But wait Jose&#8230; then should I just focus on the community? No, but the community you can build around your idea, project and ultimately game is the one that ignite your motivation to move forward, is the one that within many different perspectives can inspire your next steps and drive you to complete your next task.</p><p>They are ultimately and potentially, your <strong>customers.</strong></p><h1>Charge Your Energy, It Is a Must</h1><p>I will apply some demographics assumptions here &#129400;</p><p>We have 24 hours per day, from which <strong>7-8 should be for sleeping.</strong></p><p>We have 16 hours remaining. </p><p>Monday to Friday. I assume:</p><ul><li><p>Most of you have a full-time job (8h) - 8 hours left</p><ul><li><p>Never quit your full-job for gamedev, I will speak about that topic another day.</p></li></ul></li><li><p>Some may have family activities and responsibilities (5h) - 3 hours left</p></li><li><p>Another group could have other passions/hobbies (1.5h) - 1.5 hours left</p></li></ul><p>Numbers doesn&#8217;t lie, we have just 1.5 hours remaining for gamedev and depending on the complexity of your next task, it could fall short&#8230;</p><p>But do not let your passion and ambition break your routine with your family, the good habits (Going to gym, cooking something healthy&#8230;) and of course, never break your sleep times.</p><p>Because all those habits are currently charging your brain energy and ultimately your creativity and capacity to come with new ideas, fix issues and move forward with your project. </p><p>Your environment contribute <strong>a lot </strong>to your motivation and success.</p><p>Thank you for reading, I hope you can reflect after reading my humble advice.</p><p>Good luck on your journey mate, no one said it was easy.</p>]]></content:encoded></item><item><title><![CDATA[Creating Super Mario Maker Demake #1 - Level Editor Toolbar, Mouse and Camera]]></title><description><![CDATA[Creating the core elements to playtest the experience as soon as possible]]></description><link>https://www.gamedevpills.com/p/creating-super-mario-maker-demake</link><guid isPermaLink="false">https://www.gamedevpills.com/p/creating-super-mario-maker-demake</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Sun, 14 Dec 2025 16:27:08 GMT</pubDate><enclosure url="https://substackcdn.com/image/fetch/$s_!a7I5!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p><em>[This workshop is part of a series that started on November 2025, I recommend you to start with the fundamentals before moving forward</em></p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;4eada8c5-bcc0-4c2b-af3e-8fdecf3f881f&quot;,&quot;caption&quot;:&quot;Hello my fellow solo gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Creating Super Mario Maker Demake #0 - Introduction to PICO-8&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-11-15T20:00:44.027Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!FV5s!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5322c214-139f-4a1d-9d9b-fc82eec3ea22_600x400.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/pico-workshop-1-creating-ui-components&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:178813993,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:4,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:false,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><p><em>Important - I recommend the reading of this article on Substack App, email may cut content. Thank you for reading!]</em></p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!a7I5!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!a7I5!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!a7I5!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!a7I5!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!a7I5!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!a7I5!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp" width="727" height="484.6666666666667" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:400,&quot;width&quot;:600,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:31074,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/webp&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!a7I5!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!a7I5!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!a7I5!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!a7I5!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7693b106-229f-4fc2-8784-d3519e12ee5a_600x400.webp 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Welcome to another PICO-8 workshop, at this series I share my learning through the process of creating a Super Mario Maker Demake, my inspiration is actually coming from the first version released for <strong>Wii U - </strong><a href="https://nintendo.fandom.com/wiki/Super_Mario_Maker">Super Mario Maker</a></p><ul><li><p>Time Required: 25 minutes*</p></li><li><p>Difficulty: Beginner</p></li></ul><blockquote><p>*Being a paid subscriber speed-up this Workshop, in 5 minutes just downloading the source code, you will be able to start playing with the code and try the initial version of this demake</p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;0b94e11f-5369-4a33-9f18-a1b046e9af61&quot;,&quot;caption&quot;:&quot;Hello my fellow subscriber!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Super Mario Maker Demake #1 - Full code and Assets&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-12-14T16:08:10.130Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Hv84!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59286491-b394-4f61-89c8-4b62311a9817_600x400.webp&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/super-mario-maker-demake-1-full-code&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:181597122,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:0,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:false,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div></blockquote><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!eA-4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!eA-4!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!eA-4!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!eA-4!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!eA-4!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!eA-4!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp" width="727" height="484.6666666666667" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:400,&quot;width&quot;:600,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:84594,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/webp&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!eA-4!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!eA-4!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!eA-4!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!eA-4!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F42ea39ce-0515-4b8d-80d4-a24e04b36ca4_600x400.webp 1456w" sizes="100vw"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Nothing better than a 2D Platform to learn Gamedev :)</figcaption></figure></div><p>Taking into consideration our fantasy console limitations, one of the hard limits being at the source code up to 8192 tokens, it is actually our advantage to avoid scope creep. We can&#8217;t go 1:1 from Super Mario Maker to our PICO-8 version and of course we are going to create our own sprites to respect <strong>Nintendo</strong> copyright.</p><p><strong>F</strong>uture workshops for this series will be around the following pillars:</p><ol><li><p>Painting tiles through our level editor</p></li><li><p>Player movement around the level created</p></li><li><p>Objects interaction with player and environment</p></li><li><p>Enemies movement around the level created</p></li></ol><p>Now we are going to focus on <em><strong>Painting tiles through our level editor</strong></em><strong>, </strong>at the end of this article you will be able to:</p><ul><li><p>Use a Toolbox created by us to <strong>Draw </strong>and <strong>Erase </strong>tiles </p></li><li><p>Move the camera with cursor keys (left and right) around our <strong>X </strong>Coordinate to create an horizontal level</p></li></ul><h1>The Goal</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!DqLc!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!DqLc!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!DqLc!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!DqLc!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!DqLc!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!DqLc!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif" width="384" height="384" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:337168,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!DqLc!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!DqLc!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!DqLc!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!DqLc!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6eb44de4-72ae-4646-a105-8b9f38d259d3_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Mmm&#8230; This is cool even for grandmas, isn&#8217;t it?</figcaption></figure></div><p>Let&#8217;s go!</p><div><hr></div><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!EBZH!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!EBZH!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp 424w, https://substackcdn.com/image/fetch/$s_!EBZH!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp 848w, https://substackcdn.com/image/fetch/$s_!EBZH!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp 1272w, https://substackcdn.com/image/fetch/$s_!EBZH!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!EBZH!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp" width="727" height="121.16666666666667" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/a055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:100,&quot;width&quot;:600,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:9288,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/webp&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!EBZH!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp 424w, https://substackcdn.com/image/fetch/$s_!EBZH!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp 848w, https://substackcdn.com/image/fetch/$s_!EBZH!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp 1272w, https://substackcdn.com/image/fetch/$s_!EBZH!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa055d75f-5fae-43ae-9250-61a15eba97e7_600x100.webp 1456w" sizes="100vw" loading="lazy"></picture><div></div></div></a></figure></div><p>To success at this workshop I recommend that you first take advantage of the following resources:</p><ul><li><p><a href="https://www.lexaloffle.com/bbs/files/13822/PICO-8%20Cheat%20Sheet%20(4k).pdf">PICO-8 Cheat Sheet</a></p></li><li><p><a href="https://drive.proton.me/urls/1CJAY2MNGC#xRKmAmgXXHf7">PICO-8 Spritesheet used</a></p></li></ul><pre><code>-- To import assets you just need to place the file on your cart_data folder of PICO-8 and then execute at PICO-8 console:

import workshop-1-spritesheet.png</code></pre><ul><li><p>If you don&#8217;t have PICO-8, go with the educational version - <a href="https://www.pico-8-edu.com/">EDU Version</a></p></li><li><p><a href="https://www.gamedevpills.com/p/create-your-gamedev-environment-for?r=2qnrvn">Create your VSCode environment</a> - This one is <strong>important</strong> to follow the same development workflow.</p></li><li><p><a href="https://open.substack.com/pub/josprez/p/pico-workshop-1-creating-ui-components?r=2qnrvn&amp;utm_campaign=post&amp;utm_medium=web&amp;showWelcomeOnShare=true">Previous workshop</a> Reading</p></li></ul><div><hr></div><blockquote><p>If you want to access to the full source code and assets of this workshop, you can support us with the monthly tier. </p><p>The workshop will be completed in 5 minutes!</p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;9882ad2f-2c9a-40a2-b61a-57b1b1ee8e56&quot;,&quot;caption&quot;:&quot;Hello my fellow subscriber!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Super Mario Maker Demake #1 - Full code and Assets&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-12-14T16:08:10.130Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Hv84!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59286491-b394-4f61-89c8-4b62311a9817_600x400.webp&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/super-mario-maker-demake-1-full-code&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:181597122,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:0,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?utm_source=subscribe_content_block&amp;next=https%3A%2F%2Fwww.gamedevpills.com%2F&quot;,&quot;text&quot;:&quot;Monthly Plan&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe?utm_source=subscribe_content_block&amp;next=https%3A%2F%2Fwww.gamedevpills.com%2F"><span>Monthly Plan</span></a></p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?group=true&amp;coupon=241ae39d&quot;,&quot;text&quot;:&quot;Get 20% off a group subscription&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe?group=true&amp;coupon=241ae39d"><span>Get 20% off a group subscription</span></a></p></blockquote><div><hr></div><h1>The Level Editor Toolbar UI</h1><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;06822127-7ea0-44f2-96ed-b1c3d771982b&quot;,&quot;duration&quot;:null}"></div><p>Let&#8217;s have a look at the Toolbar designed by Nintendo for Super Mario Maker at the video above. </p><p>The idea is quite simple, they defined a set of building blocks for each possible tile, starting with bricks that you can break, the classic box with question mark and the last ones for the ground.</p><blockquote><p>Remember! PICO-8 a tiny engine where you can create art, map, sounds and music from a single place in a matter of minutes. </p><p>Exciting uh? If you want to learn more about Game Design via PICO-8 and learn through my experience at planning on a weekly basis, you are one click away!</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe now&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe?"><span>Subscribe now</span></a></p><p></p></blockquote><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!bUUs!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!bUUs!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png 424w, https://substackcdn.com/image/fetch/$s_!bUUs!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png 848w, https://substackcdn.com/image/fetch/$s_!bUUs!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png 1272w, https://substackcdn.com/image/fetch/$s_!bUUs!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!bUUs!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png" width="727" height="113.59375" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:60,&quot;width&quot;:384,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:684,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!bUUs!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png 424w, https://substackcdn.com/image/fetch/$s_!bUUs!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png 848w, https://substackcdn.com/image/fetch/$s_!bUUs!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png 1272w, https://substackcdn.com/image/fetch/$s_!bUUs!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b7f75c-b7f4-41f9-81ef-f994936e59a9_384x60.png 1456w" sizes="100vw" loading="lazy"></picture><div></div></div></a></figure></div><p>That was my first draft of a Toolbar to manage the actions we want to design; from left to right, a normal cursor, ground tile and erase functionality.</p><p>Clear and simple, I&#8217;ve done some iterations over it and now looks better, you want to see last version? Let&#8217;s move forward then</p><h3>Creating our Assets for the Toolbar - Pixel Art</h3><p>To fuel my motivation during gamedev sessions I always like to start within a design-first approach, not only asking myself the what and the why of the functional side of what I do, but also the 2D Design and shape.</p><h4>Pixel Art Sprite Editor Usage - Creating a Cursor Icon</h4><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;9439e551-af8d-40fd-8c3e-68b3dbffec6d&quot;,&quot;duration&quot;:null}"></div><p>Assets are available to <a href="https://drive.proton.me/urls/1CJAY2MNGC#xRKmAmgXXHf7">download here</a>, I&#8217;ve recorded myself just to teach you the usage of the Sprite Editor included on PICO-8</p><pre><code>-- To import the workshop assets you just need to place the file on your cart_data folder of PICO-8 and then execute at PICO-8 console:

&gt; import workshop-1-spritesheet.png

More information <a href="https://pico-8.fandom.com/wiki/Import">here</a></code></pre><blockquote><p>IMPORTANT: After you import the assets, make sure the ground sprite have the flags required enabled</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!9vMS!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!9vMS!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png 424w, https://substackcdn.com/image/fetch/$s_!9vMS!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png 848w, https://substackcdn.com/image/fetch/$s_!9vMS!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png 1272w, https://substackcdn.com/image/fetch/$s_!9vMS!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!9vMS!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png" width="384" height="384" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/d1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:3907,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!9vMS!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png 424w, https://substackcdn.com/image/fetch/$s_!9vMS!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png 848w, https://substackcdn.com/image/fetch/$s_!9vMS!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png 1272w, https://substackcdn.com/image/fetch/$s_!9vMS!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1837eef-5d91-4a9e-9546-d5df42b2ac89_384x384.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div></blockquote><p></p><p>The reason to set the sprite flag is because the rubber tool will be only able to erase ground tiles by now, as later on future workshops we will be adding more elements as items, enemies, etc.</p><p>More information about sprite flags <a href="https://pico-8.fandom.com/wiki/Fget">here</a></p><h2>Creating our UI components - Code</h2><p>So now that we have our Pixel Art resources (assets) available on our engine, we just need to start coding, one of the funniest part from my point of view. Remember that on our previous workshop we already created a main file and a ui-components file with all the code to draw a Window.</p><h3>Icon Component</h3><p><strong>Icon</strong> being the tiny square inside the menu that react on your click to change the tile/tool you will be using.</p><div class="github-gist" data-attrs="{&quot;innerHTML&quot;:&quot;<div id=\&quot;gist143627226\&quot; class=\&quot;gist\&quot;>\n    <div class=\&quot;gist-file\&quot; translate=\&quot;no\&quot; data-color-mode=\&quot;light\&quot; data-light-theme=\&quot;light\&quot;>\n      <div class=\&quot;gist-data\&quot;>\n        <div class=\&quot;js-gist-file-update-container js-task-list-container\&quot;>\n  <div id=\&quot;file-ui-components-lua\&quot; class=\&quot;file my-2\&quot;>\n    \n    <div itemprop=\&quot;text\&quot;\n      class=\&quot;Box-body p-0 blob-wrapper data type-lua  \&quot;\n      style=\&quot;overflow: auto\&quot; tabindex=\&quot;0\&quot; role=\&quot;region\&quot;\n      aria-label=\&quot;ui-components.lua content, created by microloop on 02:36PM today.\&quot;\n    >\n\n        \n<div class=\&quot;js-check-hidden-unicode js-blob-code-container blob-code-content\&quot;>\n\n  <template class=\&quot;js-file-alert-template\&quot;>\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash flash-warn flash-full d-flex flex-items-center\&quot;>\n  <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.co/hiddenchars\&quot; target=\&quot;_blank\&quot;>Learn more about bidirectional Unicode characters</a>\n    </span>\n\n\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash-action\&quot;>        <a href=\&quot;{{ revealButtonHref }}\&quot; data-view-component=\&quot;true\&quot; class=\&quot;btn-sm btn\&quot;>    Show hidden characters\n</a>\n</div>\n</div></template>\n<template class=\&quot;js-line-alert-template\&quot;>\n  <span aria-label=\&quot;This line has hidden Unicode characters\&quot; data-view-component=\&quot;true\&quot; class=\&quot;line-alert tooltipped tooltipped-e\&quot;>\n    <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n</span></template>\n\n  <table data-hpc class=\&quot;highlight tab-size js-file-line-container\&quot; data-tab-size=\&quot;4\&quot; data-paste-markdown-skip data-tagsearch-path=\&quot;ui-components.lua\&quot;>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L1\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;1\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC1\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>Icon</span> <span class=\&quot;pl-k\&quot;>=</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L2\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;2\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC2\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L3\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;3\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC3\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Icon</span>:<span class=\&quot;pl-en\&quot;>new</span>(<span class=\&quot;pl-smi\&quot;>o</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L4\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;4\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC4\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span> <span class=\&quot;pl-k\&quot;>or</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L5\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;5\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC5\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>name</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>name</span> <span class=\&quot;pl-k\&quot;>or</span> &#8220;<span class=\&quot;pl-smi\&quot;>Icon</span>&#8221;</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L6\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;6\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC6\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posx</span>  <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L7\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;7\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC7\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posy</span>  <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L8\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;8\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC8\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span> <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L9\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;9\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC9\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L10\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;10\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC10\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>active_sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>active_sprite</span> <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>0</span> </td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L11\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;11\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC11\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>type</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>type</span> <span class=\&quot;pl-k\&quot;>or</span> &#8220;<span class=\&quot;pl-smi\&quot;>Brush</span>&#8221;</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L12\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;12\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC12\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>ORIGINAL_SPRITE</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sprite</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L13\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;13\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC13\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>active</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>false</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L14\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;14\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC14\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c1\&quot;>setmetatable</span>(<span class=\&quot;pl-smi\&quot;>o</span>, {<span class=\&quot;pl-smi\&quot;>__index</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L15\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;15\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC15\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>return</span> <span class=\&quot;pl-smi\&quot;>o</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L16\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;16\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC16\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L17\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;17\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC17\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L18\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;18\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC18\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Icon</span>:<span class=\&quot;pl-en\&quot;>draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L19\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;19\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC19\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c1\&quot;>spr</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span>, <span class=\&quot;pl-c1\&quot;>1</span>, <span class=\&quot;pl-c1\&quot;>1</span>, <span class=\&quot;pl-c1\&quot;>false</span>, <span class=\&quot;pl-c1\&quot;>false</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L20\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;20\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC20\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L21\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;21\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC21\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L22\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;22\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC22\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Detect click on the icon</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L23\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;23\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC23\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Icon</span>:<span class=\&quot;pl-en\&quot;>update</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L24\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;24\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC24\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>play_sound</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>true</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L25\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;25\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC25\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>1</span> <span class=\&quot;pl-k\&quot;>and</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>&amp;gt;=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>and</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>&amp;lt;=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>8</span> <span class=\&quot;pl-k\&quot;>and</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>&amp;gt;=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>and</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>&amp;lt;=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>8</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L26\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;26\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC26\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> If icon is inside a Toolbar.</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L27\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;27\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC27\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-en\&quot;>Toolbar</span>:<span class=\&quot;pl-c1\&quot;>hover</span>() <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L28\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;28\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC28\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-en\&quot;>Toolbar</span>:<span class=\&quot;pl-c1\&quot;>cls</span>()  <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Deactivate all other icons in the Toolbar</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L29\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;29\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC29\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L30\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;30\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC30\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-smi\&quot;>play_sound</span> <span class=\&quot;pl-k\&quot;>then</span> <span class=\&quot;pl-c1\&quot;>sfx</span>(<span class=\&quot;pl-c1\&quot;>1</span>) <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L31\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;31\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC31\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>type</span> <span class=\&quot;pl-k\&quot;>==</span> &#8220;<span class=\&quot;pl-smi\&quot;>Pointer</span>&#8221; <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L32\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;32\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC32\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>switch_to_pointer</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L33\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;33\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC33\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>save_previous_mode</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L34\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;34\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC34\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>active</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>true</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L35\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;35\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC35\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L36\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;36\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC36\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>elseif</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>type</span> <span class=\&quot;pl-k\&quot;>==</span> &#8220;<span class=\&quot;pl-smi\&quot;>Ground</span>&#8221; <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L37\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;37\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC37\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>switch_to_ground</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L38\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;38\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC38\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>save_previous_mode</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L39\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;39\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC39\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>active</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>true</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L40\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;40\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC40\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L41\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;41\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC41\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>elseif</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>type</span> <span class=\&quot;pl-k\&quot;>==</span> &#8220;<span class=\&quot;pl-smi\&quot;>Rubber</span>&#8221; <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L42\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;42\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC42\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>switch_to_rubber</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L43\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;43\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC43\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>save_previous_mode</span>() </td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L44\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;44\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC44\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>active</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>true</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L45\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;45\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC45\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L46\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;46\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC46\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L47\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;47\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC47\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>else</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L48\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;48\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC48\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>active</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L49\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;49\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC49\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>active_sprite</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L50\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;50\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC50\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>else</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L51\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;51\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC51\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>ORIGINAL_SPRITE</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L52\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;52\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC52\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L53\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;53\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC53\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-smi\&quot;>play_sound</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>false</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L54\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;54\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC54\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L55\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;55\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC55\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n  </table>\n</div>\n\n\n    </div>\n\n  </div>\n</div>\n\n      </div>\n      <div class=\&quot;gist-meta\&quot;>\n        <a href=\&quot;https://gist.github.com/microloop/f2cdeef299d7e92fac63f0d1c58cdc53/raw/9f252d513d74149bd929c5548e7df3d05c482fc0/ui-components.lua\&quot; style=\&quot;float:right\&quot; class=\&quot;Link--inTextBlock\&quot;>view raw</a>\n        <a href=\&quot;https://gist.github.com/microloop/f2cdeef299d7e92fac63f0d1c58cdc53#file-ui-components-lua\&quot; class=\&quot;Link--inTextBlock\&quot;>\n          ui-components.lua\n        </a>\n        hosted with &amp;#10084; by <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.com\&quot;>GitHub</a>\n      </div>\n    </div>\n</div>\n&quot;,&quot;stylesheet&quot;:&quot;https://github.githubassets.com/assets/gist-embed-0ac919313390.css&quot;}" data-component-name="GitgistToDOM"><link rel="stylesheet" href="https://github.githubassets.com/assets/gist-embed-0ac919313390.css"><div id="gist143627226" class="gist">
    <div class="gist-file" data-color-mode="light" data-light-theme="light">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container">
  <div id="file-ui-components-lua" class="file my-2">
    
    <div itemprop="text" class="Box-body p-0 blob-wrapper data type-lua  " style="overflow:auto">

        
<div class="js-check-hidden-unicode js-blob-code-container blob-code-content">

  
  <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center">
  
    

    <span>
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a>
    </span>


  <div data-view-component="true" class="flash-action">        <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn">    Show hidden characters
</a>
</div>
</div>

  <span data-view-component="true" class="line-alert tooltipped tooltipped-e">
    
    

</span>

  <table data-hpc="" class="highlight tab-size js-file-line-container" data-tab-size="4" data-paste-markdown-skip="" data-tagsearch-path="ui-components.lua">
        <tbody><tr>
          <td id="file-ui-components-lua-L1" class="blob-num js-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="file-ui-components-lua-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">Icon</span> <span class="pl-k">=</span> {}</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L2" class="blob-num js-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="file-ui-components-lua-LC2" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L3" class="blob-num js-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="file-ui-components-lua-LC3" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Icon</span>:<span class="pl-en">new</span>(<span class="pl-smi">o</span>)</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L4" class="blob-num js-line-number js-blob-rnum" data-line-number="4"></td>
          <td id="file-ui-components-lua-LC4" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span> <span class="pl-k">=</span> <span class="pl-smi">o</span> <span class="pl-k">or</span> {}</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L5" class="blob-num js-line-number js-blob-rnum" data-line-number="5"></td>
          <td id="file-ui-components-lua-LC5" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">name</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">name</span> <span class="pl-k">or</span> &#8220;<span class="pl-smi">Icon</span>&#8221;</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L6" class="blob-num js-line-number js-blob-rnum" data-line-number="6"></td>
          <td id="file-ui-components-lua-LC6" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">posx</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">posx</span>  <span class="pl-k">or</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L7" class="blob-num js-line-number js-blob-rnum" data-line-number="7"></td>
          <td id="file-ui-components-lua-LC7" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">posy</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">posy</span>  <span class="pl-k">or</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L8" class="blob-num js-line-number js-blob-rnum" data-line-number="8"></td>
          <td id="file-ui-components-lua-LC8" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">sprite_pressed</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">sprite_pressed</span> <span class="pl-k">or</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L9" class="blob-num js-line-number js-blob-rnum" data-line-number="9"></td>
          <td id="file-ui-components-lua-LC9" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">sprite</span> <span class="pl-k">or</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L10" class="blob-num js-line-number js-blob-rnum" data-line-number="10"></td>
          <td id="file-ui-components-lua-LC10" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">active_sprite</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">active_sprite</span> <span class="pl-k">or</span> <span class="pl-c1">0</span> </td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L11" class="blob-num js-line-number js-blob-rnum" data-line-number="11"></td>
          <td id="file-ui-components-lua-LC11" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">type</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">type</span> <span class="pl-k">or</span> &#8220;<span class="pl-smi">Brush</span>&#8221;</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L12" class="blob-num js-line-number js-blob-rnum" data-line-number="12"></td>
          <td id="file-ui-components-lua-LC12" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">ORIGINAL_SPRITE</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">sprite</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L13" class="blob-num js-line-number js-blob-rnum" data-line-number="13"></td>
          <td id="file-ui-components-lua-LC13" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">active</span> <span class="pl-k">=</span> <span class="pl-c1">false</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L14" class="blob-num js-line-number js-blob-rnum" data-line-number="14"></td>
          <td id="file-ui-components-lua-LC14" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">setmetatable</span>(<span class="pl-smi">o</span>, {<span class="pl-smi">__index</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>})</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L15" class="blob-num js-line-number js-blob-rnum" data-line-number="15"></td>
          <td id="file-ui-components-lua-LC15" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">return</span> <span class="pl-smi">o</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L16" class="blob-num js-line-number js-blob-rnum" data-line-number="16"></td>
          <td id="file-ui-components-lua-LC16" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L17" class="blob-num js-line-number js-blob-rnum" data-line-number="17"></td>
          <td id="file-ui-components-lua-LC17" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L18" class="blob-num js-line-number js-blob-rnum" data-line-number="18"></td>
          <td id="file-ui-components-lua-LC18" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Icon</span>:<span class="pl-en">draw</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L19" class="blob-num js-line-number js-blob-rnum" data-line-number="19"></td>
          <td id="file-ui-components-lua-LC19" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">spr</span>(<span class="pl-c1">self</span>.<span class="pl-e">sprite</span>, <span class="pl-c1">self</span>.<span class="pl-e">posx</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span>, <span class="pl-c1">1</span>, <span class="pl-c1">1</span>, <span class="pl-c1">false</span>, <span class="pl-c1">false</span>)</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L20" class="blob-num js-line-number js-blob-rnum" data-line-number="20"></td>
          <td id="file-ui-components-lua-LC20" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L21" class="blob-num js-line-number js-blob-rnum" data-line-number="21"></td>
          <td id="file-ui-components-lua-LC21" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L22" class="blob-num js-line-number js-blob-rnum" data-line-number="22"></td>
          <td id="file-ui-components-lua-LC22" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Detect click on the icon</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L23" class="blob-num js-line-number js-blob-rnum" data-line-number="23"></td>
          <td id="file-ui-components-lua-LC23" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Icon</span>:<span class="pl-en">update</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L24" class="blob-num js-line-number js-blob-rnum" data-line-number="24"></td>
          <td id="file-ui-components-lua-LC24" class="blob-code blob-code-inner js-file-line"><span class="pl-k">local</span> <span class="pl-smi">play_sound</span> <span class="pl-k">=</span> <span class="pl-c1">true</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L25" class="blob-num js-line-number js-blob-rnum" data-line-number="25"></td>
          <td id="file-ui-components-lua-LC25" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">if</span> <span class="pl-smi">mouse</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">==</span> <span class="pl-c1">1</span> <span class="pl-k">and</span> <span class="pl-smi">mouse</span>.<span class="pl-e">posx</span> <span class="pl-k">&gt;=</span> <span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">and</span> <span class="pl-smi">mouse</span>.<span class="pl-e">posx</span> <span class="pl-k">&lt;=</span> <span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">+</span> <span class="pl-c1">8</span> <span class="pl-k">and</span> <span class="pl-smi">mouse</span>.<span class="pl-e">posy</span> <span class="pl-k">&gt;=</span> <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">and</span> <span class="pl-smi">mouse</span>.<span class="pl-e">posy</span> <span class="pl-k">&lt;=</span> <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">+</span> <span class="pl-c1">8</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L26" class="blob-num js-line-number js-blob-rnum" data-line-number="26"></td>
          <td id="file-ui-components-lua-LC26" class="blob-code blob-code-inner js-file-line">    <span class="pl-c"><span class="pl-c">--</span> If icon is inside a Toolbar.</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L27" class="blob-num js-line-number js-blob-rnum" data-line-number="27"></td>
          <td id="file-ui-components-lua-LC27" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-en">Toolbar</span>:<span class="pl-c1">hover</span>() <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L28" class="blob-num js-line-number js-blob-rnum" data-line-number="28"></td>
          <td id="file-ui-components-lua-LC28" class="blob-code blob-code-inner js-file-line">      <span class="pl-en">Toolbar</span>:<span class="pl-c1">cls</span>()  <span class="pl-c"><span class="pl-c">--</span> Deactivate all other icons in the Toolbar</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L29" class="blob-num js-line-number js-blob-rnum" data-line-number="29"></td>
          <td id="file-ui-components-lua-LC29" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L30" class="blob-num js-line-number js-blob-rnum" data-line-number="30"></td>
          <td id="file-ui-components-lua-LC30" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-smi">play_sound</span> <span class="pl-k">then</span> <span class="pl-c1">sfx</span>(<span class="pl-c1">1</span>) <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L31" class="blob-num js-line-number js-blob-rnum" data-line-number="31"></td>
          <td id="file-ui-components-lua-LC31" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">type</span> <span class="pl-k">==</span> &#8220;<span class="pl-smi">Pointer</span>&#8221; <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L32" class="blob-num js-line-number js-blob-rnum" data-line-number="32"></td>
          <td id="file-ui-components-lua-LC32" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">mouse</span>:<span class="pl-c1">switch_to_pointer</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L33" class="blob-num js-line-number js-blob-rnum" data-line-number="33"></td>
          <td id="file-ui-components-lua-LC33" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">mouse</span>:<span class="pl-c1">save_previous_mode</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L34" class="blob-num js-line-number js-blob-rnum" data-line-number="34"></td>
          <td id="file-ui-components-lua-LC34" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">active</span> <span class="pl-k">=</span> <span class="pl-c1">true</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L35" class="blob-num js-line-number js-blob-rnum" data-line-number="35"></td>
          <td id="file-ui-components-lua-LC35" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">sprite_pressed</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L36" class="blob-num js-line-number js-blob-rnum" data-line-number="36"></td>
          <td id="file-ui-components-lua-LC36" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">elseif</span> <span class="pl-c1">self</span>.<span class="pl-e">type</span> <span class="pl-k">==</span> &#8220;<span class="pl-smi">Ground</span>&#8221; <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L37" class="blob-num js-line-number js-blob-rnum" data-line-number="37"></td>
          <td id="file-ui-components-lua-LC37" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">mouse</span>:<span class="pl-c1">switch_to_ground</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L38" class="blob-num js-line-number js-blob-rnum" data-line-number="38"></td>
          <td id="file-ui-components-lua-LC38" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">mouse</span>:<span class="pl-c1">save_previous_mode</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L39" class="blob-num js-line-number js-blob-rnum" data-line-number="39"></td>
          <td id="file-ui-components-lua-LC39" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">active</span> <span class="pl-k">=</span> <span class="pl-c1">true</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L40" class="blob-num js-line-number js-blob-rnum" data-line-number="40"></td>
          <td id="file-ui-components-lua-LC40" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">sprite_pressed</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L41" class="blob-num js-line-number js-blob-rnum" data-line-number="41"></td>
          <td id="file-ui-components-lua-LC41" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">elseif</span> <span class="pl-c1">self</span>.<span class="pl-e">type</span> <span class="pl-k">==</span> &#8220;<span class="pl-smi">Rubber</span>&#8221; <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L42" class="blob-num js-line-number js-blob-rnum" data-line-number="42"></td>
          <td id="file-ui-components-lua-LC42" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">mouse</span>:<span class="pl-c1">switch_to_rubber</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L43" class="blob-num js-line-number js-blob-rnum" data-line-number="43"></td>
          <td id="file-ui-components-lua-LC43" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">mouse</span>:<span class="pl-c1">save_previous_mode</span>() </td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L44" class="blob-num js-line-number js-blob-rnum" data-line-number="44"></td>
          <td id="file-ui-components-lua-LC44" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">active</span> <span class="pl-k">=</span> <span class="pl-c1">true</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L45" class="blob-num js-line-number js-blob-rnum" data-line-number="45"></td>
          <td id="file-ui-components-lua-LC45" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">sprite_pressed</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L46" class="blob-num js-line-number js-blob-rnum" data-line-number="46"></td>
          <td id="file-ui-components-lua-LC46" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L47" class="blob-num js-line-number js-blob-rnum" data-line-number="47"></td>
          <td id="file-ui-components-lua-LC47" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">else</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L48" class="blob-num js-line-number js-blob-rnum" data-line-number="48"></td>
          <td id="file-ui-components-lua-LC48" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">active</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L49" class="blob-num js-line-number js-blob-rnum" data-line-number="49"></td>
          <td id="file-ui-components-lua-LC49" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">active_sprite</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L50" class="blob-num js-line-number js-blob-rnum" data-line-number="50"></td>
          <td id="file-ui-components-lua-LC50" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">else</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L51" class="blob-num js-line-number js-blob-rnum" data-line-number="51"></td>
          <td id="file-ui-components-lua-LC51" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">ORIGINAL_SPRITE</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L52" class="blob-num js-line-number js-blob-rnum" data-line-number="52"></td>
          <td id="file-ui-components-lua-LC52" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L53" class="blob-num js-line-number js-blob-rnum" data-line-number="53"></td>
          <td id="file-ui-components-lua-LC53" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">play_sound</span> <span class="pl-k">=</span> <span class="pl-c1">false</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L54" class="blob-num js-line-number js-blob-rnum" data-line-number="54"></td>
          <td id="file-ui-components-lua-LC54" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L55" class="blob-num js-line-number js-blob-rnum" data-line-number="55"></td>
          <td id="file-ui-components-lua-LC55" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
  </tbody></table>
</div>


    </div>

  </div>
</div>

      </div>
      <div class="gist-meta">
        <a href="https://gist.github.com/microloop/f2cdeef299d7e92fac63f0d1c58cdc53/raw/9f252d513d74149bd929c5548e7df3d05c482fc0/ui-components.lua" style="float:right" class="Link--inTextBlock">view raw</a>
        <a href="https://gist.github.com/microloop/f2cdeef299d7e92fac63f0d1c58cdc53#file-ui-components-lua" class="Link--inTextBlock">
          ui-components.lua
        </a>
        hosted with &#10084; by <a class="Link--inTextBlock" href="https://github.com">GitHub</a>
      </div>
    </div>
</div>
</div><p>As you can see at the code this component is linked to our mouse component that we will create later to handle all the actions we want to achieve. </p><p>It is adding all the logic of switching between the different actions (pointer, brush, rubber)</p><h3>Toolbar Component</h3><p>This is the menu that handle all the possible actions avaible to edit our level, it contains the previously mentioned actions as icons and actually response with the click of the user to mark the action as &#8220;Being used&#8221;</p><div class="github-gist" data-attrs="{&quot;innerHTML&quot;:&quot;<div id=\&quot;gist143627282\&quot; class=\&quot;gist\&quot;>\n    <div class=\&quot;gist-file\&quot; translate=\&quot;no\&quot; data-color-mode=\&quot;light\&quot; data-light-theme=\&quot;light\&quot;>\n      <div class=\&quot;gist-data\&quot;>\n        <div class=\&quot;js-gist-file-update-container js-task-list-container\&quot;>\n  <div id=\&quot;file-ui-components-lua\&quot; class=\&quot;file my-2\&quot;>\n    \n    <div itemprop=\&quot;text\&quot;\n      class=\&quot;Box-body p-0 blob-wrapper data type-lua  \&quot;\n      style=\&quot;overflow: auto\&quot; tabindex=\&quot;0\&quot; role=\&quot;region\&quot;\n      aria-label=\&quot;ui-components.lua content, created by microloop on 02:37PM today.\&quot;\n    >\n\n        \n<div class=\&quot;js-check-hidden-unicode js-blob-code-container blob-code-content\&quot;>\n\n  <template class=\&quot;js-file-alert-template\&quot;>\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash flash-warn flash-full d-flex flex-items-center\&quot;>\n  <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.co/hiddenchars\&quot; target=\&quot;_blank\&quot;>Learn more about bidirectional Unicode characters</a>\n    </span>\n\n\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash-action\&quot;>        <a href=\&quot;{{ revealButtonHref }}\&quot; data-view-component=\&quot;true\&quot; class=\&quot;btn-sm btn\&quot;>    Show hidden characters\n</a>\n</div>\n</div></template>\n<template class=\&quot;js-line-alert-template\&quot;>\n  <span aria-label=\&quot;This line has hidden Unicode characters\&quot; data-view-component=\&quot;true\&quot; class=\&quot;line-alert tooltipped tooltipped-e\&quot;>\n    <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n</span></template>\n\n  <table data-hpc class=\&quot;highlight tab-size js-file-line-container\&quot; data-tab-size=\&quot;4\&quot; data-paste-markdown-skip data-tagsearch-path=\&quot;ui-components.lua\&quot;>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L1\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;1\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC1\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>Toolbar</span> <span class=\&quot;pl-k\&quot;>=</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L2\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;2\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC2\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L3\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;3\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC3\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Toolbar</span>:<span class=\&quot;pl-en\&quot;>new</span>(<span class=\&quot;pl-smi\&quot;>o</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L4\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;4\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC4\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span> <span class=\&quot;pl-k\&quot;>or</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L5\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;5\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC5\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posx</span>  <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L6\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;6\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC6\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sizex</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sizex</span> <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>16</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L7\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;7\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC7\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posy</span>  <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>16</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L8\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;8\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC8\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sizey</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sizey</span> <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>96</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L9\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;9\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC9\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>size</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>size</span> <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>3</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L10\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;10\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC10\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>round</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>round</span> <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L11\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;11\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC11\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>icons</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>icons</span> <span class=\&quot;pl-k\&quot;>or</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L12\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;12\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC12\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c1\&quot;>setmetatable</span>(<span class=\&quot;pl-smi\&quot;>o</span>, {<span class=\&quot;pl-smi\&quot;>__index</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L13\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;13\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC13\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>return</span> <span class=\&quot;pl-smi\&quot;>o</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L14\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;14\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC14\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L15\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;15\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC15\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L16\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;16\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC16\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Toolbar</span>:<span class=\&quot;pl-en\&quot;>cls</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L17\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;17\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC17\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>for</span> <span class=\&quot;pl-smi\&quot;>_</span>, <span class=\&quot;pl-smi\&quot;>icon</span> <span class=\&quot;pl-k\&quot;>in</span> <span class=\&quot;pl-c1\&quot;>pairs</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>icons</span>) <span class=\&quot;pl-k\&quot;>do</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L18\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;18\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC18\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>icon</span>.<span class=\&quot;pl-e\&quot;>active</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>false</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L19\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;19\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC19\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>icon</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>icon</span>.<span class=\&quot;pl-e\&quot;>ORIGINAL_SPRITE</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L20\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;20\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC20\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L21\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;21\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC21\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L22\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;22\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC22\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L23\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;23\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC23\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Toolbar</span>:<span class=\&quot;pl-en\&quot;>hover</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L24\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;24\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC24\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>&amp;gt;=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>and</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>&amp;lt;</span> (<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sizex</span>) <span class=\&quot;pl-k\&quot;>and</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>&amp;gt;=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>and</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>&amp;lt;=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>+</span> (<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sizey</span>) <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L25\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;25\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC25\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>return</span> <span class=\&quot;pl-c1\&quot;>true</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L26\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;26\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC26\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>else</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L27\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;27\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC27\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>return</span> <span class=\&quot;pl-c1\&quot;>false</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L28\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;28\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC28\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L29\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;29\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC29\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L30\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;30\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC30\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L31\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;31\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC31\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Toolbar</span>:<span class=\&quot;pl-en\&quot;>update</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L32\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;32\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC32\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-smi\&quot;>cam</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L33\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;33\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC33\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-smi\&quot;>cam</span>.<span class=\&quot;pl-e\&quot;>mode</span> <span class=\&quot;pl-k\&quot;>==</span> &#8220;<span class=\&quot;pl-smi\&quot;>static</span>&#8221; <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L34\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;34\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC34\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>btn</span>(<span class=\&quot;pl-c1\&quot;>1</span>) <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L35\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;35\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC35\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>          <span class=\&quot;pl-smi\&quot;>toolbar</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>+=</span>  <span class=\&quot;pl-smi\&quot;>cam</span>.<span class=\&quot;pl-e\&quot;>move_x</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L36\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;36\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC36\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L37\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;37\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC37\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>btn</span>(<span class=\&quot;pl-c1\&quot;>0</span>) <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L38\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;38\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC38\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>          <span class=\&quot;pl-smi\&quot;>toolbar</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>-=</span> <span class=\&quot;pl-smi\&quot;>cam</span>.<span class=\&quot;pl-e\&quot;>move_x</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L39\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;39\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC39\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L40\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;40\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC40\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L41\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;41\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC41\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L42\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;42\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC42\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L43\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;43\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC43\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> If we are outside the Toolbar area, switch to selected mode, otherwise switch to pointer</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L44\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;44\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC44\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-smi\&quot;>mouse</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L45\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;45\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC45\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>!=</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>pointer</span> <span class=\&quot;pl-k\&quot;>and</span> <span class=\&quot;pl-c1\&quot;>self</span>:<span class=\&quot;pl-c1\&quot;>hover</span>() <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L46\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;46\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC46\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>switch_to_pointer</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L47\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;47\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC47\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>elseif</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>previous_mode</span> <span class=\&quot;pl-k\&quot;>!=</span> <span class=\&quot;pl-smi\&quot;>mouse</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>and</span> <span class=\&quot;pl-k\&quot;>not</span> <span class=\&quot;pl-c1\&quot;>self</span>:<span class=\&quot;pl-c1\&quot;>hover</span>() <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L48\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;48\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC48\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>switch_previous_mode</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L49\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;49\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC49\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L50\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;50\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC50\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L51\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;51\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC51\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>for</span> <span class=\&quot;pl-smi\&quot;>k</span>,<span class=\&quot;pl-smi\&quot;>icon</span> <span class=\&quot;pl-k\&quot;>in</span> <span class=\&quot;pl-c1\&quot;>pairs</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>icons</span>) <span class=\&quot;pl-k\&quot;>do</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L52\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;52\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC52\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-en\&quot;>icon</span>:<span class=\&quot;pl-c1\&quot;>update</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L53\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;53\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC53\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L54\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;54\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC54\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L55\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;55\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC55\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L56\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;56\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC56\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L57\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;57\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC57\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Toolbar</span>:<span class=\&quot;pl-en\&quot;>draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L58\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;58\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC58\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Inner window</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L59\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;59\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC59\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c1\&quot;>rrectfill</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>1</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>1</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sizex</span> <span class=\&quot;pl-k\&quot;>-</span> <span class=\&quot;pl-c1\&quot;>2</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sizey</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>round</span>, <span class=\&quot;pl-c1\&quot;>14</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L60\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;60\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC60\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Shade bottom</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L61\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;61\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC61\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c1\&quot;>line</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>2</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sizey</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sizex</span> <span class=\&quot;pl-k\&quot;>-</span><span class=\&quot;pl-c1\&quot;>3</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sizey</span>, <span class=\&quot;pl-c1\&quot;>2</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L62\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;62\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC62\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Draw icons in a horizontal grid, responsive to component position</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L63\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;63\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC63\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>icon_size</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>8</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L64\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;64\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC64\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>padding</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>4</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L65\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;65\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC65\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  </td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L66\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;66\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC66\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>cols</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>flr</span>((<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sizex</span> <span class=\&quot;pl-k\&quot;>-</span> <span class=\&quot;pl-smi\&quot;>padding</span>) <span class=\&quot;pl-k\&quot;>/</span> (<span class=\&quot;pl-smi\&quot;>icon_size</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>padding</span>))</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L67\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;67\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC67\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>for</span> <span class=\&quot;pl-smi\&quot;>i</span>, <span class=\&quot;pl-smi\&quot;>icon</span> <span class=\&quot;pl-k\&quot;>in</span> <span class=\&quot;pl-c1\&quot;>ipairs</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>icons</span>) <span class=\&quot;pl-k\&quot;>do</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L68\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;68\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC68\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>col</span> <span class=\&quot;pl-k\&quot;>=</span> (<span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>-</span> <span class=\&quot;pl-c1\&quot;>1</span>) <span class=\&quot;pl-k\&quot;>%</span> <span class=\&quot;pl-smi\&quot;>cols</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L69\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;69\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC69\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>row</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>flr</span>((<span class=\&quot;pl-smi\&quot;>i</span> <span class=\&quot;pl-k\&quot;>-</span> <span class=\&quot;pl-c1\&quot;>1</span>) <span class=\&quot;pl-k\&quot;>/</span> <span class=\&quot;pl-smi\&quot;>cols</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L70\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;70\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC70\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>x</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>padding</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>col</span> <span class=\&quot;pl-k\&quot;>*</span> (<span class=\&quot;pl-smi\&quot;>icon_size</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>padding</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L71\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;71\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC71\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>y</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>padding</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>row</span> <span class=\&quot;pl-k\&quot;>*</span> (<span class=\&quot;pl-smi\&quot;>icon_size</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>padding</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L72\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;72\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC72\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-smi\&quot;>icon</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>x</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L73\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;73\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC73\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-smi\&quot;>icon</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>y</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L74\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;74\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC74\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-en\&quot;>icon</span>:<span class=\&quot;pl-c1\&quot;>draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L75\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;75\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC75\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-ui-components-lua-L76\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;76\&quot;></td>\n          <td id=\&quot;file-ui-components-lua-LC76\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n  </table>\n</div>\n\n\n    </div>\n\n  </div>\n</div>\n\n      </div>\n      <div class=\&quot;gist-meta\&quot;>\n        <a href=\&quot;https://gist.github.com/microloop/70e5eb8093bb4fe9647ded9001f49216/raw/02f99eb9215d74e5fe0e4186e031e0a8194cebc7/ui-components.lua\&quot; style=\&quot;float:right\&quot; class=\&quot;Link--inTextBlock\&quot;>view raw</a>\n        <a href=\&quot;https://gist.github.com/microloop/70e5eb8093bb4fe9647ded9001f49216#file-ui-components-lua\&quot; class=\&quot;Link--inTextBlock\&quot;>\n          ui-components.lua\n        </a>\n        hosted with &amp;#10084; by <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.com\&quot;>GitHub</a>\n      </div>\n    </div>\n</div>\n&quot;,&quot;stylesheet&quot;:&quot;https://github.githubassets.com/assets/gist-embed-0ac919313390.css&quot;}" data-component-name="GitgistToDOM"><link rel="stylesheet" href="https://github.githubassets.com/assets/gist-embed-0ac919313390.css"><div id="gist143627282" class="gist">
    <div class="gist-file" data-color-mode="light" data-light-theme="light">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container">
  <div id="file-ui-components-lua" class="file my-2">
    
    <div itemprop="text" class="Box-body p-0 blob-wrapper data type-lua  " style="overflow:auto">

        
<div class="js-check-hidden-unicode js-blob-code-container blob-code-content">

  
  <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center">
  
    

    <span>
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a>
    </span>


  <div data-view-component="true" class="flash-action">        <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn">    Show hidden characters
</a>
</div>
</div>

  <span data-view-component="true" class="line-alert tooltipped tooltipped-e">
    
    

</span>

  <table data-hpc="" class="highlight tab-size js-file-line-container" data-tab-size="4" data-paste-markdown-skip="" data-tagsearch-path="ui-components.lua">
        <tbody><tr>
          <td id="file-ui-components-lua-L1" class="blob-num js-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="file-ui-components-lua-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">Toolbar</span> <span class="pl-k">=</span> {}</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L2" class="blob-num js-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="file-ui-components-lua-LC2" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L3" class="blob-num js-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="file-ui-components-lua-LC3" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Toolbar</span>:<span class="pl-en">new</span>(<span class="pl-smi">o</span>)</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L4" class="blob-num js-line-number js-blob-rnum" data-line-number="4"></td>
          <td id="file-ui-components-lua-LC4" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span> <span class="pl-k">=</span> <span class="pl-smi">o</span> <span class="pl-k">or</span> {}</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L5" class="blob-num js-line-number js-blob-rnum" data-line-number="5"></td>
          <td id="file-ui-components-lua-LC5" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">posx</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">posx</span>  <span class="pl-k">or</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L6" class="blob-num js-line-number js-blob-rnum" data-line-number="6"></td>
          <td id="file-ui-components-lua-LC6" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">sizex</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">sizex</span> <span class="pl-k">or</span> <span class="pl-c1">16</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L7" class="blob-num js-line-number js-blob-rnum" data-line-number="7"></td>
          <td id="file-ui-components-lua-LC7" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">posy</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">posy</span>  <span class="pl-k">or</span> <span class="pl-c1">16</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L8" class="blob-num js-line-number js-blob-rnum" data-line-number="8"></td>
          <td id="file-ui-components-lua-LC8" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">sizey</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">sizey</span> <span class="pl-k">or</span> <span class="pl-c1">96</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L9" class="blob-num js-line-number js-blob-rnum" data-line-number="9"></td>
          <td id="file-ui-components-lua-LC9" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">size</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">size</span> <span class="pl-k">or</span> <span class="pl-c1">3</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L10" class="blob-num js-line-number js-blob-rnum" data-line-number="10"></td>
          <td id="file-ui-components-lua-LC10" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">round</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">round</span> <span class="pl-k">or</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L11" class="blob-num js-line-number js-blob-rnum" data-line-number="11"></td>
          <td id="file-ui-components-lua-LC11" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">icons</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">icons</span> <span class="pl-k">or</span> {}</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L12" class="blob-num js-line-number js-blob-rnum" data-line-number="12"></td>
          <td id="file-ui-components-lua-LC12" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">setmetatable</span>(<span class="pl-smi">o</span>, {<span class="pl-smi">__index</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>})</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L13" class="blob-num js-line-number js-blob-rnum" data-line-number="13"></td>
          <td id="file-ui-components-lua-LC13" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">return</span> <span class="pl-smi">o</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L14" class="blob-num js-line-number js-blob-rnum" data-line-number="14"></td>
          <td id="file-ui-components-lua-LC14" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L15" class="blob-num js-line-number js-blob-rnum" data-line-number="15"></td>
          <td id="file-ui-components-lua-LC15" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L16" class="blob-num js-line-number js-blob-rnum" data-line-number="16"></td>
          <td id="file-ui-components-lua-LC16" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Toolbar</span>:<span class="pl-en">cls</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L17" class="blob-num js-line-number js-blob-rnum" data-line-number="17"></td>
          <td id="file-ui-components-lua-LC17" class="blob-code blob-code-inner js-file-line"><span class="pl-k">for</span> <span class="pl-smi">_</span>, <span class="pl-smi">icon</span> <span class="pl-k">in</span> <span class="pl-c1">pairs</span>(<span class="pl-c1">self</span>.<span class="pl-e">icons</span>) <span class="pl-k">do</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L18" class="blob-num js-line-number js-blob-rnum" data-line-number="18"></td>
          <td id="file-ui-components-lua-LC18" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">icon</span>.<span class="pl-e">active</span> <span class="pl-k">=</span> <span class="pl-c1">false</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L19" class="blob-num js-line-number js-blob-rnum" data-line-number="19"></td>
          <td id="file-ui-components-lua-LC19" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">icon</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-smi">icon</span>.<span class="pl-e">ORIGINAL_SPRITE</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L20" class="blob-num js-line-number js-blob-rnum" data-line-number="20"></td>
          <td id="file-ui-components-lua-LC20" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L21" class="blob-num js-line-number js-blob-rnum" data-line-number="21"></td>
          <td id="file-ui-components-lua-LC21" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L22" class="blob-num js-line-number js-blob-rnum" data-line-number="22"></td>
          <td id="file-ui-components-lua-LC22" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L23" class="blob-num js-line-number js-blob-rnum" data-line-number="23"></td>
          <td id="file-ui-components-lua-LC23" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Toolbar</span>:<span class="pl-en">hover</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L24" class="blob-num js-line-number js-blob-rnum" data-line-number="24"></td>
          <td id="file-ui-components-lua-LC24" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">if</span> <span class="pl-smi">mouse</span>.<span class="pl-e">posx</span> <span class="pl-k">&gt;=</span> <span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">and</span> <span class="pl-smi">mouse</span>.<span class="pl-e">posx</span> <span class="pl-k">&lt;</span> (<span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">+</span> <span class="pl-c1">self</span>.<span class="pl-e">sizex</span>) <span class="pl-k">and</span> <span class="pl-smi">mouse</span>.<span class="pl-e">posy</span> <span class="pl-k">&gt;=</span> <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">and</span> <span class="pl-smi">mouse</span>.<span class="pl-e">posy</span> <span class="pl-k">&lt;=</span> <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">+</span> (<span class="pl-c1">self</span>.<span class="pl-e">sizey</span>) <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L25" class="blob-num js-line-number js-blob-rnum" data-line-number="25"></td>
          <td id="file-ui-components-lua-LC25" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">return</span> <span class="pl-c1">true</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L26" class="blob-num js-line-number js-blob-rnum" data-line-number="26"></td>
          <td id="file-ui-components-lua-LC26" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">else</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L27" class="blob-num js-line-number js-blob-rnum" data-line-number="27"></td>
          <td id="file-ui-components-lua-LC27" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">return</span> <span class="pl-c1">false</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L28" class="blob-num js-line-number js-blob-rnum" data-line-number="28"></td>
          <td id="file-ui-components-lua-LC28" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L29" class="blob-num js-line-number js-blob-rnum" data-line-number="29"></td>
          <td id="file-ui-components-lua-LC29" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L30" class="blob-num js-line-number js-blob-rnum" data-line-number="30"></td>
          <td id="file-ui-components-lua-LC30" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L31" class="blob-num js-line-number js-blob-rnum" data-line-number="31"></td>
          <td id="file-ui-components-lua-LC31" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Toolbar</span>:<span class="pl-en">update</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L32" class="blob-num js-line-number js-blob-rnum" data-line-number="32"></td>
          <td id="file-ui-components-lua-LC32" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">if</span> <span class="pl-smi">cam</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L33" class="blob-num js-line-number js-blob-rnum" data-line-number="33"></td>
          <td id="file-ui-components-lua-LC33" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-smi">cam</span>.<span class="pl-e">mode</span> <span class="pl-k">==</span> &#8220;<span class="pl-smi">static</span>&#8221; <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L34" class="blob-num js-line-number js-blob-rnum" data-line-number="34"></td>
          <td id="file-ui-components-lua-LC34" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">if</span> <span class="pl-c1">btn</span>(<span class="pl-c1">1</span>) <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L35" class="blob-num js-line-number js-blob-rnum" data-line-number="35"></td>
          <td id="file-ui-components-lua-LC35" class="blob-code blob-code-inner js-file-line">          <span class="pl-smi">toolbar</span>.<span class="pl-e">posx</span> <span class="pl-k">+=</span>  <span class="pl-smi">cam</span>.<span class="pl-e">move_x</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L36" class="blob-num js-line-number js-blob-rnum" data-line-number="36"></td>
          <td id="file-ui-components-lua-LC36" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L37" class="blob-num js-line-number js-blob-rnum" data-line-number="37"></td>
          <td id="file-ui-components-lua-LC37" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">if</span> <span class="pl-c1">btn</span>(<span class="pl-c1">0</span>) <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L38" class="blob-num js-line-number js-blob-rnum" data-line-number="38"></td>
          <td id="file-ui-components-lua-LC38" class="blob-code blob-code-inner js-file-line">          <span class="pl-smi">toolbar</span>.<span class="pl-e">posx</span> <span class="pl-k">-=</span> <span class="pl-smi">cam</span>.<span class="pl-e">move_x</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L39" class="blob-num js-line-number js-blob-rnum" data-line-number="39"></td>
          <td id="file-ui-components-lua-LC39" class="blob-code blob-code-inner js-file-line">      <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L40" class="blob-num js-line-number js-blob-rnum" data-line-number="40"></td>
          <td id="file-ui-components-lua-LC40" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L41" class="blob-num js-line-number js-blob-rnum" data-line-number="41"></td>
          <td id="file-ui-components-lua-LC41" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L42" class="blob-num js-line-number js-blob-rnum" data-line-number="42"></td>
          <td id="file-ui-components-lua-LC42" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L43" class="blob-num js-line-number js-blob-rnum" data-line-number="43"></td>
          <td id="file-ui-components-lua-LC43" class="blob-code blob-code-inner js-file-line">  <span class="pl-c"><span class="pl-c">--</span> If we are outside the Toolbar area, switch to selected mode, otherwise switch to pointer</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L44" class="blob-num js-line-number js-blob-rnum" data-line-number="44"></td>
          <td id="file-ui-components-lua-LC44" class="blob-code blob-code-inner js-file-line"><span class="pl-k">if</span> <span class="pl-smi">mouse</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L45" class="blob-num js-line-number js-blob-rnum" data-line-number="45"></td>
          <td id="file-ui-components-lua-LC45" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">if</span> <span class="pl-smi">mouse</span>.<span class="pl-e">current_mode</span> <span class="pl-k">!=</span> <span class="pl-smi">mouse</span>.<span class="pl-e">modes</span>.<span class="pl-e">pointer</span> <span class="pl-k">and</span> <span class="pl-c1">self</span>:<span class="pl-c1">hover</span>() <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L46" class="blob-num js-line-number js-blob-rnum" data-line-number="46"></td>
          <td id="file-ui-components-lua-LC46" class="blob-code blob-code-inner js-file-line">    <span class="pl-en">mouse</span>:<span class="pl-c1">switch_to_pointer</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L47" class="blob-num js-line-number js-blob-rnum" data-line-number="47"></td>
          <td id="file-ui-components-lua-LC47" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">elseif</span> <span class="pl-smi">mouse</span>.<span class="pl-e">previous_mode</span> <span class="pl-k">!=</span> <span class="pl-smi">mouse</span>.<span class="pl-e">current_mode</span> <span class="pl-k">and</span> <span class="pl-k">not</span> <span class="pl-c1">self</span>:<span class="pl-c1">hover</span>() <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L48" class="blob-num js-line-number js-blob-rnum" data-line-number="48"></td>
          <td id="file-ui-components-lua-LC48" class="blob-code blob-code-inner js-file-line">    <span class="pl-en">mouse</span>:<span class="pl-c1">switch_previous_mode</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L49" class="blob-num js-line-number js-blob-rnum" data-line-number="49"></td>
          <td id="file-ui-components-lua-LC49" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L50" class="blob-num js-line-number js-blob-rnum" data-line-number="50"></td>
          <td id="file-ui-components-lua-LC50" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L51" class="blob-num js-line-number js-blob-rnum" data-line-number="51"></td>
          <td id="file-ui-components-lua-LC51" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">for</span> <span class="pl-smi">k</span>,<span class="pl-smi">icon</span> <span class="pl-k">in</span> <span class="pl-c1">pairs</span>(<span class="pl-c1">self</span>.<span class="pl-e">icons</span>) <span class="pl-k">do</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L52" class="blob-num js-line-number js-blob-rnum" data-line-number="52"></td>
          <td id="file-ui-components-lua-LC52" class="blob-code blob-code-inner js-file-line">    <span class="pl-en">icon</span>:<span class="pl-c1">update</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L53" class="blob-num js-line-number js-blob-rnum" data-line-number="53"></td>
          <td id="file-ui-components-lua-LC53" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L54" class="blob-num js-line-number js-blob-rnum" data-line-number="54"></td>
          <td id="file-ui-components-lua-LC54" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L55" class="blob-num js-line-number js-blob-rnum" data-line-number="55"></td>
          <td id="file-ui-components-lua-LC55" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L56" class="blob-num js-line-number js-blob-rnum" data-line-number="56"></td>
          <td id="file-ui-components-lua-LC56" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L57" class="blob-num js-line-number js-blob-rnum" data-line-number="57"></td>
          <td id="file-ui-components-lua-LC57" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Toolbar</span>:<span class="pl-en">draw</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L58" class="blob-num js-line-number js-blob-rnum" data-line-number="58"></td>
          <td id="file-ui-components-lua-LC58" class="blob-code blob-code-inner js-file-line">  <span class="pl-c"><span class="pl-c">--</span> Inner window</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L59" class="blob-num js-line-number js-blob-rnum" data-line-number="59"></td>
          <td id="file-ui-components-lua-LC59" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">rrectfill</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">+</span> <span class="pl-c1">1</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">+</span> <span class="pl-c1">1</span>, <span class="pl-c1">self</span>.<span class="pl-e">sizex</span> <span class="pl-k">-</span> <span class="pl-c1">2</span>, <span class="pl-c1">self</span>.<span class="pl-e">sizey</span>, <span class="pl-c1">self</span>.<span class="pl-e">round</span>, <span class="pl-c1">14</span>)</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L60" class="blob-num js-line-number js-blob-rnum" data-line-number="60"></td>
          <td id="file-ui-components-lua-LC60" class="blob-code blob-code-inner js-file-line">  <span class="pl-c"><span class="pl-c">--</span> Shade bottom</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L61" class="blob-num js-line-number js-blob-rnum" data-line-number="61"></td>
          <td id="file-ui-components-lua-LC61" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">line</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">+</span> <span class="pl-c1">2</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">+</span> <span class="pl-c1">self</span>.<span class="pl-e">sizey</span>, <span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">+</span> <span class="pl-c1">self</span>.<span class="pl-e">sizex</span> <span class="pl-k">-</span><span class="pl-c1">3</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">+</span> <span class="pl-c1">self</span>.<span class="pl-e">sizey</span>, <span class="pl-c1">2</span>)</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L62" class="blob-num js-line-number js-blob-rnum" data-line-number="62"></td>
          <td id="file-ui-components-lua-LC62" class="blob-code blob-code-inner js-file-line">  <span class="pl-c"><span class="pl-c">--</span> Draw icons in a horizontal grid, responsive to component position</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L63" class="blob-num js-line-number js-blob-rnum" data-line-number="63"></td>
          <td id="file-ui-components-lua-LC63" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">local</span> <span class="pl-smi">icon_size</span> <span class="pl-k">=</span> <span class="pl-c1">8</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L64" class="blob-num js-line-number js-blob-rnum" data-line-number="64"></td>
          <td id="file-ui-components-lua-LC64" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">local</span> <span class="pl-smi">padding</span> <span class="pl-k">=</span> <span class="pl-c1">4</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L65" class="blob-num js-line-number js-blob-rnum" data-line-number="65"></td>
          <td id="file-ui-components-lua-LC65" class="blob-code blob-code-inner js-file-line">  </td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L66" class="blob-num js-line-number js-blob-rnum" data-line-number="66"></td>
          <td id="file-ui-components-lua-LC66" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">local</span> <span class="pl-smi">cols</span> <span class="pl-k">=</span> <span class="pl-c1">flr</span>((<span class="pl-c1">self</span>.<span class="pl-e">sizex</span> <span class="pl-k">-</span> <span class="pl-smi">padding</span>) <span class="pl-k">/</span> (<span class="pl-smi">icon_size</span> <span class="pl-k">+</span> <span class="pl-smi">padding</span>))</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L67" class="blob-num js-line-number js-blob-rnum" data-line-number="67"></td>
          <td id="file-ui-components-lua-LC67" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">for</span> <span class="pl-smi">i</span>, <span class="pl-smi">icon</span> <span class="pl-k">in</span> <span class="pl-c1">ipairs</span>(<span class="pl-c1">self</span>.<span class="pl-e">icons</span>) <span class="pl-k">do</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L68" class="blob-num js-line-number js-blob-rnum" data-line-number="68"></td>
          <td id="file-ui-components-lua-LC68" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">local</span> <span class="pl-smi">col</span> <span class="pl-k">=</span> (<span class="pl-smi">i</span> <span class="pl-k">-</span> <span class="pl-c1">1</span>) <span class="pl-k">%</span> <span class="pl-smi">cols</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L69" class="blob-num js-line-number js-blob-rnum" data-line-number="69"></td>
          <td id="file-ui-components-lua-LC69" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">local</span> <span class="pl-smi">row</span> <span class="pl-k">=</span> <span class="pl-c1">flr</span>((<span class="pl-smi">i</span> <span class="pl-k">-</span> <span class="pl-c1">1</span>) <span class="pl-k">/</span> <span class="pl-smi">cols</span>)</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L70" class="blob-num js-line-number js-blob-rnum" data-line-number="70"></td>
          <td id="file-ui-components-lua-LC70" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">local</span> <span class="pl-smi">x</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">+</span> <span class="pl-smi">padding</span> <span class="pl-k">+</span> <span class="pl-smi">col</span> <span class="pl-k">*</span> (<span class="pl-smi">icon_size</span> <span class="pl-k">+</span> <span class="pl-smi">padding</span>)</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L71" class="blob-num js-line-number js-blob-rnum" data-line-number="71"></td>
          <td id="file-ui-components-lua-LC71" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">local</span> <span class="pl-smi">y</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">+</span> <span class="pl-smi">padding</span> <span class="pl-k">+</span> <span class="pl-smi">row</span> <span class="pl-k">*</span> (<span class="pl-smi">icon_size</span> <span class="pl-k">+</span> <span class="pl-smi">padding</span>)</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L72" class="blob-num js-line-number js-blob-rnum" data-line-number="72"></td>
          <td id="file-ui-components-lua-LC72" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">icon</span>.<span class="pl-e">posx</span> <span class="pl-k">=</span> <span class="pl-smi">x</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L73" class="blob-num js-line-number js-blob-rnum" data-line-number="73"></td>
          <td id="file-ui-components-lua-LC73" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">icon</span>.<span class="pl-e">posy</span> <span class="pl-k">=</span> <span class="pl-smi">y</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L74" class="blob-num js-line-number js-blob-rnum" data-line-number="74"></td>
          <td id="file-ui-components-lua-LC74" class="blob-code blob-code-inner js-file-line">    <span class="pl-en">icon</span>:<span class="pl-c1">draw</span>()</td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L75" class="blob-num js-line-number js-blob-rnum" data-line-number="75"></td>
          <td id="file-ui-components-lua-LC75" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-ui-components-lua-L76" class="blob-num js-line-number js-blob-rnum" data-line-number="76"></td>
          <td id="file-ui-components-lua-LC76" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
  </tbody></table>
</div>


    </div>

  </div>
</div>

      </div>
      <div class="gist-meta">
        <a href="https://gist.github.com/microloop/70e5eb8093bb4fe9647ded9001f49216/raw/02f99eb9215d74e5fe0e4186e031e0a8194cebc7/ui-components.lua" style="float:right" class="Link--inTextBlock">view raw</a>
        <a href="https://gist.github.com/microloop/70e5eb8093bb4fe9647ded9001f49216#file-ui-components-lua" class="Link--inTextBlock">
          ui-components.lua
        </a>
        hosted with &#10084; by <a class="Link--inTextBlock" href="https://github.com">GitHub</a>
      </div>
    </div>
</div>
</div><h2>Connect all the pieces together</h2><p>Now we would need to call our new components from the <em>main.lua</em> file</p><div class="github-gist" data-attrs="{&quot;innerHTML&quot;:&quot;<div id=\&quot;gist143627383\&quot; class=\&quot;gist\&quot;>\n    <div class=\&quot;gist-file\&quot; translate=\&quot;no\&quot; data-color-mode=\&quot;light\&quot; data-light-theme=\&quot;light\&quot;>\n      <div class=\&quot;gist-data\&quot;>\n        <div class=\&quot;js-gist-file-update-container js-task-list-container\&quot;>\n  <div id=\&quot;file-main-lua\&quot; class=\&quot;file my-2\&quot;>\n    \n    <div itemprop=\&quot;text\&quot;\n      class=\&quot;Box-body p-0 blob-wrapper data type-lua  \&quot;\n      style=\&quot;overflow: auto\&quot; tabindex=\&quot;0\&quot; role=\&quot;region\&quot;\n      aria-label=\&quot;main.lua content, created by microloop on 02:39PM today.\&quot;\n    >\n\n        \n<div class=\&quot;js-check-hidden-unicode js-blob-code-container blob-code-content\&quot;>\n\n  <template class=\&quot;js-file-alert-template\&quot;>\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash flash-warn flash-full d-flex flex-items-center\&quot;>\n  <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.co/hiddenchars\&quot; target=\&quot;_blank\&quot;>Learn more about bidirectional Unicode characters</a>\n    </span>\n\n\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash-action\&quot;>        <a href=\&quot;{{ revealButtonHref }}\&quot; data-view-component=\&quot;true\&quot; class=\&quot;btn-sm btn\&quot;>    Show hidden characters\n</a>\n</div>\n</div></template>\n<template class=\&quot;js-line-alert-template\&quot;>\n  <span aria-label=\&quot;This line has hidden Unicode characters\&quot; data-view-component=\&quot;true\&quot; class=\&quot;line-alert tooltipped tooltipped-e\&quot;>\n    <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n</span></template>\n\n  <table data-hpc class=\&quot;highlight tab-size js-file-line-container\&quot; data-tab-size=\&quot;4\&quot; data-paste-markdown-skip data-tagsearch-path=\&quot;main.lua\&quot;>\n        <tr>\n          <td id=\&quot;file-main-lua-L1\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;1\&quot;></td>\n          <td id=\&quot;file-main-lua-LC1\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>_init</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L2\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;2\&quot;></td>\n          <td id=\&quot;file-main-lua-LC2\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> GLOBAL VARIABLES</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L3\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;3\&quot;></td>\n          <td id=\&quot;file-main-lua-LC3\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>SCREEN_WIDTH</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>128</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L4\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;4\&quot;></td>\n          <td id=\&quot;file-main-lua-LC4\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>SCREEN_HEIGHT</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>128</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L5\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;5\&quot;></td>\n          <td id=\&quot;file-main-lua-LC5\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>pointer</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>icons</span> <span class=\&quot;pl-k\&quot;>=</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L6\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;6\&quot;></td>\n          <td id=\&quot;file-main-lua-LC6\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Initialice our icons that will be part of the toolbar</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L7\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;7\&quot;></td>\n          <td id=\&quot;file-main-lua-LC7\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> IMPORTANT! Make sure the sprite value is set with the position of sprite of your PICO-8 Editor</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L8\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;8\&quot;></td>\n          <td id=\&quot;file-main-lua-LC8\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Initialice our icons that will be part of the toolbar</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L9\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;9\&quot;></td>\n          <td id=\&quot;file-main-lua-LC9\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>pointer</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Icon</span>:<span class=\&quot;pl-c1\&quot;>new</span>({<span class=\&quot;pl-smi\&quot;>name</span><span class=\&quot;pl-k\&quot;>=</span>&#8221;<span class=\&quot;pl-smi\&quot;>Pointer</span>&#8221;,<span class=\&quot;pl-smi\&quot;>posx</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>106</span>,<span class=\&quot;pl-smi\&quot;>posy</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>0</span>,<span class=\&quot;pl-smi\&quot;>sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>84</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L10\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;10\&quot;></td>\n          <td id=\&quot;file-main-lua-LC10\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>sprite_pressed</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>100</span>,<span class=\&quot;pl-smi\&quot;>active_sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>116</span>,<span class=\&quot;pl-smi\&quot;>type</span><span class=\&quot;pl-k\&quot;>=</span>&#8221;<span class=\&quot;pl-smi\&quot;>Pointer</span>&#8221;})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L11\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;11\&quot;></td>\n          <td id=\&quot;file-main-lua-LC11\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>ground</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Icon</span>:<span class=\&quot;pl-c1\&quot;>new</span>({<span class=\&quot;pl-smi\&quot;>name</span><span class=\&quot;pl-k\&quot;>=</span>&#8221;<span class=\&quot;pl-smi\&quot;>Ground</span>&#8221;,<span class=\&quot;pl-smi\&quot;>posx</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>116</span>,<span class=\&quot;pl-smi\&quot;>posy</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>0</span>,<span class=\&quot;pl-smi\&quot;>sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>85</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L12\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;12\&quot;></td>\n          <td id=\&quot;file-main-lua-LC12\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>sprite_pressed</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>101</span>,<span class=\&quot;pl-smi\&quot;>active_sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>117</span>,<span class=\&quot;pl-smi\&quot;>type</span><span class=\&quot;pl-k\&quot;>=</span>&#8221;<span class=\&quot;pl-smi\&quot;>Ground</span>&#8221;})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L13\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;13\&quot;></td>\n          <td id=\&quot;file-main-lua-LC13\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>rubber</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Icon</span>:<span class=\&quot;pl-c1\&quot;>new</span>({<span class=\&quot;pl-smi\&quot;>name</span><span class=\&quot;pl-k\&quot;>=</span>&#8221;<span class=\&quot;pl-smi\&quot;>Rubber</span>&#8221;,<span class=\&quot;pl-smi\&quot;>posx</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>106</span>,<span class=\&quot;pl-smi\&quot;>posy</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>0</span>,<span class=\&quot;pl-smi\&quot;>sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>83</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L14\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;14\&quot;></td>\n          <td id=\&quot;file-main-lua-LC14\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>sprite_pressed</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>99</span>,<span class=\&quot;pl-smi\&quot;>active_sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>115</span>,<span class=\&quot;pl-smi\&quot;>type</span><span class=\&quot;pl-k\&quot;>=</span>&#8221;<span class=\&quot;pl-smi\&quot;>Rubber</span>&#8221;})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L15\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;15\&quot;></td>\n          <td id=\&quot;file-main-lua-LC15\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Adding icons to the global icons list</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L16\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;16\&quot;></td>\n          <td id=\&quot;file-main-lua-LC16\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c1\&quot;>add</span>(<span class=\&quot;pl-smi\&quot;>icons</span>,<span class=\&quot;pl-smi\&quot;>pointer</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L17\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;17\&quot;></td>\n          <td id=\&quot;file-main-lua-LC17\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c1\&quot;>add</span>(<span class=\&quot;pl-smi\&quot;>icons</span>,<span class=\&quot;pl-smi\&quot;>ground</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L18\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;18\&quot;></td>\n          <td id=\&quot;file-main-lua-LC18\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c1\&quot;>add</span>(<span class=\&quot;pl-smi\&quot;>icons</span>,<span class=\&quot;pl-smi\&quot;>rubber</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L19\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;19\&quot;></td>\n          <td id=\&quot;file-main-lua-LC19\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Create the toolbar</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L20\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;20\&quot;></td>\n          <td id=\&quot;file-main-lua-LC20\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>toolbar</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Toolbar</span>:<span class=\&quot;pl-c1\&quot;>new</span>({<span class=\&quot;pl-smi\&quot;>posx</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-smi\&quot;>SCREEN_WIDTH</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>2</span><span class=\&quot;pl-k\&quot;>-</span><span class=\&quot;pl-c1\&quot;>16</span>,<span class=\&quot;pl-smi\&quot;>posy</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>12</span>,<span class=\&quot;pl-smi\&quot;>sizex</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>40</span>,<span class=\&quot;pl-smi\&quot;>sizey</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>15</span>,<span class=\&quot;pl-smi\&quot;>round</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>1</span>,<span class=\&quot;pl-smi\&quot;>icons</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-smi\&quot;>icons</span>})</td>\n        </tr>\n  </table>\n</div>\n\n\n    </div>\n\n  </div>\n</div>\n\n      </div>\n      <div class=\&quot;gist-meta\&quot;>\n        <a href=\&quot;https://gist.github.com/microloop/cd25c084cafde4ed1f2739c555e2a5cc/raw/f959d2b3e7d87009ca570e56bb52961d64809f45/main.lua\&quot; style=\&quot;float:right\&quot; class=\&quot;Link--inTextBlock\&quot;>view raw</a>\n        <a href=\&quot;https://gist.github.com/microloop/cd25c084cafde4ed1f2739c555e2a5cc#file-main-lua\&quot; class=\&quot;Link--inTextBlock\&quot;>\n          main.lua\n        </a>\n        hosted with &amp;#10084; by <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.com\&quot;>GitHub</a>\n      </div>\n    </div>\n</div>\n&quot;,&quot;stylesheet&quot;:&quot;https://github.githubassets.com/assets/gist-embed-0ac919313390.css&quot;}" data-component-name="GitgistToDOM"><link rel="stylesheet" href="https://github.githubassets.com/assets/gist-embed-0ac919313390.css"><div id="gist143627383" class="gist">
    <div class="gist-file" data-color-mode="light" data-light-theme="light">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container">
  <div id="file-main-lua" class="file my-2">
    
    <div itemprop="text" class="Box-body p-0 blob-wrapper data type-lua  " style="overflow:auto">

        
<div class="js-check-hidden-unicode js-blob-code-container blob-code-content">

  
  <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center">
  
    

    <span>
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a>
    </span>


  <div data-view-component="true" class="flash-action">        <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn">    Show hidden characters
</a>
</div>
</div>

  <span data-view-component="true" class="line-alert tooltipped tooltipped-e">
    
    

</span>

  <table data-hpc="" class="highlight tab-size js-file-line-container" data-tab-size="4" data-paste-markdown-skip="" data-tagsearch-path="main.lua">
        <tbody><tr>
          <td id="file-main-lua-L1" class="blob-num js-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="file-main-lua-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">_init</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L2" class="blob-num js-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="file-main-lua-LC2" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> GLOBAL VARIABLES</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L3" class="blob-num js-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="file-main-lua-LC3" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">SCREEN_WIDTH</span> <span class="pl-k">=</span> <span class="pl-c1">128</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L4" class="blob-num js-line-number js-blob-rnum" data-line-number="4"></td>
          <td id="file-main-lua-LC4" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">SCREEN_HEIGHT</span> <span class="pl-k">=</span> <span class="pl-c1">128</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L5" class="blob-num js-line-number js-blob-rnum" data-line-number="5"></td>
          <td id="file-main-lua-LC5" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">pointer</span> <span class="pl-k">=</span> <span class="pl-smi">icons</span> <span class="pl-k">=</span> {}</td>
        </tr>
        <tr>
          <td id="file-main-lua-L6" class="blob-num js-line-number js-blob-rnum" data-line-number="6"></td>
          <td id="file-main-lua-LC6" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Initialice our icons that will be part of the toolbar</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L7" class="blob-num js-line-number js-blob-rnum" data-line-number="7"></td>
          <td id="file-main-lua-LC7" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> IMPORTANT! Make sure the sprite value is set with the position of sprite of your PICO-8 Editor</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L8" class="blob-num js-line-number js-blob-rnum" data-line-number="8"></td>
          <td id="file-main-lua-LC8" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Initialice our icons that will be part of the toolbar</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L9" class="blob-num js-line-number js-blob-rnum" data-line-number="9"></td>
          <td id="file-main-lua-LC9" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">pointer</span> <span class="pl-k">=</span> <span class="pl-en">Icon</span>:<span class="pl-c1">new</span>({<span class="pl-smi">name</span><span class="pl-k">=</span>&#8221;<span class="pl-smi">Pointer</span>&#8221;,<span class="pl-smi">posx</span><span class="pl-k">=</span><span class="pl-c1">106</span>,<span class="pl-smi">posy</span><span class="pl-k">=</span><span class="pl-c1">0</span>,<span class="pl-smi">sprite</span><span class="pl-k">=</span><span class="pl-c1">84</span>,</td>
        </tr>
        <tr>
          <td id="file-main-lua-L10" class="blob-num js-line-number js-blob-rnum" data-line-number="10"></td>
          <td id="file-main-lua-LC10" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">sprite_pressed</span><span class="pl-k">=</span><span class="pl-c1">100</span>,<span class="pl-smi">active_sprite</span><span class="pl-k">=</span><span class="pl-c1">116</span>,<span class="pl-smi">type</span><span class="pl-k">=</span>&#8221;<span class="pl-smi">Pointer</span>&#8221;})</td>
        </tr>
        <tr>
          <td id="file-main-lua-L11" class="blob-num js-line-number js-blob-rnum" data-line-number="11"></td>
          <td id="file-main-lua-LC11" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">ground</span> <span class="pl-k">=</span> <span class="pl-en">Icon</span>:<span class="pl-c1">new</span>({<span class="pl-smi">name</span><span class="pl-k">=</span>&#8221;<span class="pl-smi">Ground</span>&#8221;,<span class="pl-smi">posx</span><span class="pl-k">=</span><span class="pl-c1">116</span>,<span class="pl-smi">posy</span><span class="pl-k">=</span><span class="pl-c1">0</span>,<span class="pl-smi">sprite</span><span class="pl-k">=</span><span class="pl-c1">85</span>,</td>
        </tr>
        <tr>
          <td id="file-main-lua-L12" class="blob-num js-line-number js-blob-rnum" data-line-number="12"></td>
          <td id="file-main-lua-LC12" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">sprite_pressed</span><span class="pl-k">=</span><span class="pl-c1">101</span>,<span class="pl-smi">active_sprite</span><span class="pl-k">=</span><span class="pl-c1">117</span>,<span class="pl-smi">type</span><span class="pl-k">=</span>&#8221;<span class="pl-smi">Ground</span>&#8221;})</td>
        </tr>
        <tr>
          <td id="file-main-lua-L13" class="blob-num js-line-number js-blob-rnum" data-line-number="13"></td>
          <td id="file-main-lua-LC13" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">rubber</span> <span class="pl-k">=</span> <span class="pl-en">Icon</span>:<span class="pl-c1">new</span>({<span class="pl-smi">name</span><span class="pl-k">=</span>&#8221;<span class="pl-smi">Rubber</span>&#8221;,<span class="pl-smi">posx</span><span class="pl-k">=</span><span class="pl-c1">106</span>,<span class="pl-smi">posy</span><span class="pl-k">=</span><span class="pl-c1">0</span>,<span class="pl-smi">sprite</span><span class="pl-k">=</span><span class="pl-c1">83</span>,</td>
        </tr>
        <tr>
          <td id="file-main-lua-L14" class="blob-num js-line-number js-blob-rnum" data-line-number="14"></td>
          <td id="file-main-lua-LC14" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">sprite_pressed</span><span class="pl-k">=</span><span class="pl-c1">99</span>,<span class="pl-smi">active_sprite</span><span class="pl-k">=</span><span class="pl-c1">115</span>,<span class="pl-smi">type</span><span class="pl-k">=</span>&#8221;<span class="pl-smi">Rubber</span>&#8221;})</td>
        </tr>
        <tr>
          <td id="file-main-lua-L15" class="blob-num js-line-number js-blob-rnum" data-line-number="15"></td>
          <td id="file-main-lua-LC15" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Adding icons to the global icons list</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L16" class="blob-num js-line-number js-blob-rnum" data-line-number="16"></td>
          <td id="file-main-lua-LC16" class="blob-code blob-code-inner js-file-line"><span class="pl-c1">add</span>(<span class="pl-smi">icons</span>,<span class="pl-smi">pointer</span>)</td>
        </tr>
        <tr>
          <td id="file-main-lua-L17" class="blob-num js-line-number js-blob-rnum" data-line-number="17"></td>
          <td id="file-main-lua-LC17" class="blob-code blob-code-inner js-file-line"><span class="pl-c1">add</span>(<span class="pl-smi">icons</span>,<span class="pl-smi">ground</span>)</td>
        </tr>
        <tr>
          <td id="file-main-lua-L18" class="blob-num js-line-number js-blob-rnum" data-line-number="18"></td>
          <td id="file-main-lua-LC18" class="blob-code blob-code-inner js-file-line"><span class="pl-c1">add</span>(<span class="pl-smi">icons</span>,<span class="pl-smi">rubber</span>)</td>
        </tr>
        <tr>
          <td id="file-main-lua-L19" class="blob-num js-line-number js-blob-rnum" data-line-number="19"></td>
          <td id="file-main-lua-LC19" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Create the toolbar</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L20" class="blob-num js-line-number js-blob-rnum" data-line-number="20"></td>
          <td id="file-main-lua-LC20" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">toolbar</span> <span class="pl-k">=</span> <span class="pl-en">Toolbar</span>:<span class="pl-c1">new</span>({<span class="pl-smi">posx</span><span class="pl-k">=</span><span class="pl-smi">SCREEN_WIDTH</span><span class="pl-k">/</span><span class="pl-c1">2</span><span class="pl-k">-</span><span class="pl-c1">16</span>,<span class="pl-smi">posy</span><span class="pl-k">=</span><span class="pl-c1">12</span>,<span class="pl-smi">sizex</span><span class="pl-k">=</span><span class="pl-c1">40</span>,<span class="pl-smi">sizey</span><span class="pl-k">=</span><span class="pl-c1">15</span>,<span class="pl-smi">round</span><span class="pl-k">=</span><span class="pl-c1">1</span>,<span class="pl-smi">icons</span><span class="pl-k">=</span><span class="pl-smi">icons</span>})</td>
        </tr>
  </tbody></table>
</div>


    </div>

  </div>
</div>

      </div>
      <div class="gist-meta">
        <a href="https://gist.github.com/microloop/cd25c084cafde4ed1f2739c555e2a5cc/raw/f959d2b3e7d87009ca570e56bb52961d64809f45/main.lua" style="float:right" class="Link--inTextBlock">view raw</a>
        <a href="https://gist.github.com/microloop/cd25c084cafde4ed1f2739c555e2a5cc#file-main-lua" class="Link--inTextBlock">
          main.lua
        </a>
        hosted with &#10084; by <a class="Link--inTextBlock" href="https://github.com">GitHub</a>
      </div>
    </div>
</div>
</div><p>Now that you initialized the <em>Objects </em>for each component, your next step will be to call their <em>update()</em> and <em>draw() </em>functions. I will leave that part for you so there is also a space for your own implementation and self learning.</p><p>We also need to add the following line at our drawing loop, so we make sure the intenal map that we will use as structure to create our level is rendered at the screen</p><p>More information about map <a href="https://pico-8.fandom.com/wiki/Map">here</a></p><pre><code>function _draw()
cls()
-- Draw map
map(0, 0, 0, 0, 128, 32)</code></pre><h1>First Milestone Achieved</h1><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;14e329ac-895d-4c1f-a8e7-b698badaf079&quot;,&quot;duration&quot;:null}"></div><blockquote><p>Note you can&#8217;t see the other tabs at the code section, that&#8217;s because the workflow of development has been taken from my previous article:</p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;924d257b-d659-4281-aa3f-0db7f9e4e03b&quot;,&quot;caption&quot;:&quot;Hello my fellow gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Create Your Gamedev Environment for PICO-8 in 7 minutes&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-11-27T11:49:24.929Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!_sGz!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/create-your-gamedev-environment-for&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:180089378,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:3,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div></blockquote><p>Cool, we designed our <strong>Toolbar </strong>with <strong>Icons, </strong>unfortunatelly pico-8 doesn&#8217;t come with native functions to create GUI so we need to create things on our own.</p><p>But that&#8217;s part of learning process and believe me, those lessons are key for future projects and frameworks you want to play with, I&#8217;m not afraid anymore of creating metatables to create <em>Objects </em>like structures on PICO-8 Lua.</p><h1>New Challengers Approaching!</h1><p>To wrap-up the previous learning, we modified our <em>ui-components.lua</em> file to add our <strong>Toolbar</strong> and <strong>Icon</strong> components so we can create the upper menu where the player can switch between actions and start drawing.</p><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!M_VE!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!M_VE!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png 424w, https://substackcdn.com/image/fetch/$s_!M_VE!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png 848w, https://substackcdn.com/image/fetch/$s_!M_VE!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png 1272w, https://substackcdn.com/image/fetch/$s_!M_VE!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!M_VE!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png" width="317" height="162.6127744510978" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:257,&quot;width&quot;:501,&quot;resizeWidth&quot;:317,&quot;bytes&quot;:1572,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!M_VE!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png 424w, https://substackcdn.com/image/fetch/$s_!M_VE!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png 848w, https://substackcdn.com/image/fetch/$s_!M_VE!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png 1272w, https://substackcdn.com/image/fetch/$s_!M_VE!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F34de8090-2836-470e-99f2-4ce2c40079f1_501x257.png 1456w" sizes="100vw" loading="lazy"></picture><div></div></div></a><figcaption class="image-caption">Cute, isn&#8217;t it?</figcaption></figure></div><p>Right now is not functional, so we need new actors to work at our code, they will be called:</p><ul><li><p><em>mouse.lua</em></p><ul><li><p><em>Handler of our mouse actions both pointer move and clicks</em></p></li><li><p>Switch between pointer, brush and rubber</p></li></ul></li><li><p><em>camera.lua - Handler of the X Coordinate camera movement when designing levels</em></p></li></ul><p>Let&#8217;s go!</p><h2>Enable Mouse Detection</h2><p>At the current version of PICO-8 being 0.2.7 in order to enable mouse and keyboard as input, you need call a low-level function to change the memory of the console.</p><pre><code>-- Enable mouse support
poke(0x5f2d,1)</code></pre><p>I expect ZEP (Creator of PICO-8) to add a more <em>human </em>way to enable Keyboard and mouse input detection in future releases.</p><h2>Creating Mouse and Camera Handlers</h2><p>Now it is time to add some intelligence to the Toolbar (menu) we&#8217;ve created, we need to create a new file under our project called <em>mouse.lua </em>&#8212; At this file we are going to define a new <em>metatable </em>to have an easy to maintain code for the future.</p><blockquote><p>Pro Tip. Metatables are really nice to organice the code, but they come with a cost, as soon as we add more properties and methods at them the token count will be considerable increasing &#8212; Just keep it on your mind :)</p></blockquote><h3>Mouse Handler (New Object)</h3><div class="github-gist" data-attrs="{&quot;innerHTML&quot;:&quot;<div id=\&quot;gist143627039\&quot; class=\&quot;gist\&quot;>\n    <div class=\&quot;gist-file\&quot; translate=\&quot;no\&quot; data-color-mode=\&quot;light\&quot; data-light-theme=\&quot;light\&quot;>\n      <div class=\&quot;gist-data\&quot;>\n        <div class=\&quot;js-gist-file-update-container js-task-list-container\&quot;>\n  <div id=\&quot;file-mouse-lua\&quot; class=\&quot;file my-2\&quot;>\n    \n    <div itemprop=\&quot;text\&quot;\n      class=\&quot;Box-body p-0 blob-wrapper data type-lua  \&quot;\n      style=\&quot;overflow: auto\&quot; tabindex=\&quot;0\&quot; role=\&quot;region\&quot;\n      aria-label=\&quot;mouse.lua content, created by microloop on 02:22PM today.\&quot;\n    >\n\n        \n<div class=\&quot;js-check-hidden-unicode js-blob-code-container blob-code-content\&quot;>\n\n  <template class=\&quot;js-file-alert-template\&quot;>\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash flash-warn flash-full d-flex flex-items-center\&quot;>\n  <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.co/hiddenchars\&quot; target=\&quot;_blank\&quot;>Learn more about bidirectional Unicode characters</a>\n    </span>\n\n\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash-action\&quot;>        <a href=\&quot;{{ revealButtonHref }}\&quot; data-view-component=\&quot;true\&quot; class=\&quot;btn-sm btn\&quot;>    Show hidden characters\n</a>\n</div>\n</div></template>\n<template class=\&quot;js-line-alert-template\&quot;>\n  <span aria-label=\&quot;This line has hidden Unicode characters\&quot; data-view-component=\&quot;true\&quot; class=\&quot;line-alert tooltipped tooltipped-e\&quot;>\n    <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n</span></template>\n\n  <table data-hpc class=\&quot;highlight tab-size js-file-line-container\&quot; data-tab-size=\&quot;4\&quot; data-paste-markdown-skip data-tagsearch-path=\&quot;mouse.lua\&quot;>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L1\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;1\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC1\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>Mouse</span> <span class=\&quot;pl-k\&quot;>=</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L2\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;2\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC2\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L3\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;3\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC3\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>new</span>(<span class=\&quot;pl-smi\&quot;>o</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L4\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;4\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC4\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span> <span class=\&quot;pl-k\&quot;>or</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L5\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;5\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC5\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posx</span>  <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>10</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L6\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;6\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC6\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posy</span>  <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>20</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L7\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;7\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC7\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>mapx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>flr</span>(<span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>/</span> <span class=\&quot;pl-c1\&quot;>8</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L8\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;8\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC8\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>mapy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>flr</span>(<span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>/</span> <span class=\&quot;pl-c1\&quot;>8</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L9\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;9\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC9\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>busy_hand</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>false</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L10\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;10\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC10\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>8</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L11\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;11\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC11\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>9</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L12\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;12\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC12\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L13\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;13\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC13\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>mouseover</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L14\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;14\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC14\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>grabbed_item</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L15\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;15\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC15\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-en\&quot;>reload</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span> () <span class=\&quot;pl-k\&quot;>end</span> </td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L16\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;16\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC16\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>modes</span> <span class=\&quot;pl-k\&quot;>=</span> {</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L17\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;17\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC17\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>pointer</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>pointer</span>() <span class=\&quot;pl-k\&quot;>end</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L18\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;18\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC18\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>ground</span>  <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>ground</span>() <span class=\&quot;pl-k\&quot;>end</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L19\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;19\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC19\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>rubber</span>  <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>rubber</span>() <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L20\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;20\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC20\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    }</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L21\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;21\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC21\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>drawing</span> <span class=\&quot;pl-k\&quot;>=</span> {</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L22\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;22\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC22\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>pointer</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>pointer_draw</span>() <span class=\&quot;pl-k\&quot;>end</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L23\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;23\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC23\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>ground</span>  <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>ground_draw</span>() <span class=\&quot;pl-k\&quot;>end</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L24\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;24\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC24\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>rubber</span>  <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>rubber_draw</span>() <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L25\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;25\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC25\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    }</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L26\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;26\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC26\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>current_draw</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>drawing</span>.<span class=\&quot;pl-e\&quot;>pointer</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L27\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;27\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC27\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>previous_mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>pointer</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L28\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;28\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC28\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>pointer</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L29\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;29\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC29\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>animation_player</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>nil</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L30\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;30\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC30\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>last_click_x</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L31\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;31\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC31\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>last_click_y</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L32\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;32\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC32\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c1\&quot;>setmetatable</span>(<span class=\&quot;pl-smi\&quot;>o</span>, {<span class=\&quot;pl-smi\&quot;>__index</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L33\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;33\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC33\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>return</span> <span class=\&quot;pl-smi\&quot;>o</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L34\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;34\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC34\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n  </table>\n</div>\n\n\n    </div>\n\n  </div>\n</div>\n\n      </div>\n      <div class=\&quot;gist-meta\&quot;>\n        <a href=\&quot;https://gist.github.com/microloop/a4da0d0a442e016707796adc897870f0/raw/0fc8e4bc950ecdb132071e0a560ff700a91c00e1/mouse.lua\&quot; style=\&quot;float:right\&quot; class=\&quot;Link--inTextBlock\&quot;>view raw</a>\n        <a href=\&quot;https://gist.github.com/microloop/a4da0d0a442e016707796adc897870f0#file-mouse-lua\&quot; class=\&quot;Link--inTextBlock\&quot;>\n          mouse.lua\n        </a>\n        hosted with &amp;#10084; by <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.com\&quot;>GitHub</a>\n      </div>\n    </div>\n</div>\n&quot;,&quot;stylesheet&quot;:&quot;https://github.githubassets.com/assets/gist-embed-0ac919313390.css&quot;}" data-component-name="GitgistToDOM"><link rel="stylesheet" href="https://github.githubassets.com/assets/gist-embed-0ac919313390.css"><div id="gist143627039" class="gist">
    <div class="gist-file" data-color-mode="light" data-light-theme="light">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container">
  <div id="file-mouse-lua" class="file my-2">
    
    <div itemprop="text" class="Box-body p-0 blob-wrapper data type-lua  " style="overflow:auto">

        
<div class="js-check-hidden-unicode js-blob-code-container blob-code-content">

  
  <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center">
  
    

    <span>
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a>
    </span>


  <div data-view-component="true" class="flash-action">        <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn">    Show hidden characters
</a>
</div>
</div>

  <span data-view-component="true" class="line-alert tooltipped tooltipped-e">
    
    

</span>

  <table data-hpc="" class="highlight tab-size js-file-line-container" data-tab-size="4" data-paste-markdown-skip="" data-tagsearch-path="mouse.lua">
        <tbody><tr>
          <td id="file-mouse-lua-L1" class="blob-num js-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="file-mouse-lua-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">Mouse</span> <span class="pl-k">=</span> {}</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L2" class="blob-num js-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="file-mouse-lua-LC2" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L3" class="blob-num js-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="file-mouse-lua-LC3" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">new</span>(<span class="pl-smi">o</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L4" class="blob-num js-line-number js-blob-rnum" data-line-number="4"></td>
          <td id="file-mouse-lua-LC4" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span> <span class="pl-k">=</span> <span class="pl-smi">o</span> <span class="pl-k">or</span> {}</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L5" class="blob-num js-line-number js-blob-rnum" data-line-number="5"></td>
          <td id="file-mouse-lua-LC5" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">posx</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">posx</span>  <span class="pl-k">or</span> <span class="pl-c1">10</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L6" class="blob-num js-line-number js-blob-rnum" data-line-number="6"></td>
          <td id="file-mouse-lua-LC6" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">posy</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">posy</span>  <span class="pl-k">or</span> <span class="pl-c1">20</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L7" class="blob-num js-line-number js-blob-rnum" data-line-number="7"></td>
          <td id="file-mouse-lua-LC7" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">mapx</span> <span class="pl-k">=</span> <span class="pl-c1">flr</span>(<span class="pl-smi">o</span>.<span class="pl-e">posx</span> <span class="pl-k">/</span> <span class="pl-c1">8</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L8" class="blob-num js-line-number js-blob-rnum" data-line-number="8"></td>
          <td id="file-mouse-lua-LC8" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">mapy</span> <span class="pl-k">=</span> <span class="pl-c1">flr</span>(<span class="pl-smi">o</span>.<span class="pl-e">posy</span> <span class="pl-k">/</span> <span class="pl-c1">8</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L9" class="blob-num js-line-number js-blob-rnum" data-line-number="9"></td>
          <td id="file-mouse-lua-LC9" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">busy_hand</span> <span class="pl-k">=</span> <span class="pl-c1">false</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L10" class="blob-num js-line-number js-blob-rnum" data-line-number="10"></td>
          <td id="file-mouse-lua-LC10" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">8</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L11" class="blob-num js-line-number js-blob-rnum" data-line-number="11"></td>
          <td id="file-mouse-lua-LC11" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">sprite_pressed</span> <span class="pl-k">=</span> <span class="pl-c1">9</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L12" class="blob-num js-line-number js-blob-rnum" data-line-number="12"></td>
          <td id="file-mouse-lua-LC12" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L13" class="blob-num js-line-number js-blob-rnum" data-line-number="13"></td>
          <td id="file-mouse-lua-LC13" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">mouseover</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L14" class="blob-num js-line-number js-blob-rnum" data-line-number="14"></td>
          <td id="file-mouse-lua-LC14" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">grabbed_item</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L15" class="blob-num js-line-number js-blob-rnum" data-line-number="15"></td>
          <td id="file-mouse-lua-LC15" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-en">reload</span> <span class="pl-k">=</span> <span class="pl-k">function</span> () <span class="pl-k">end</span> </td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L16" class="blob-num js-line-number js-blob-rnum" data-line-number="16"></td>
          <td id="file-mouse-lua-LC16" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">modes</span> <span class="pl-k">=</span> {</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L17" class="blob-num js-line-number js-blob-rnum" data-line-number="17"></td>
          <td id="file-mouse-lua-LC17" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">pointer</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">pointer</span>() <span class="pl-k">end</span>,</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L18" class="blob-num js-line-number js-blob-rnum" data-line-number="18"></td>
          <td id="file-mouse-lua-LC18" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">ground</span>  <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">ground</span>() <span class="pl-k">end</span>,</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L19" class="blob-num js-line-number js-blob-rnum" data-line-number="19"></td>
          <td id="file-mouse-lua-LC19" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">rubber</span>  <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">rubber</span>() <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L20" class="blob-num js-line-number js-blob-rnum" data-line-number="20"></td>
          <td id="file-mouse-lua-LC20" class="blob-code blob-code-inner js-file-line">    }</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L21" class="blob-num js-line-number js-blob-rnum" data-line-number="21"></td>
          <td id="file-mouse-lua-LC21" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">o</span>.<span class="pl-e">drawing</span> <span class="pl-k">=</span> {</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L22" class="blob-num js-line-number js-blob-rnum" data-line-number="22"></td>
          <td id="file-mouse-lua-LC22" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">pointer</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">pointer_draw</span>() <span class="pl-k">end</span>,</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L23" class="blob-num js-line-number js-blob-rnum" data-line-number="23"></td>
          <td id="file-mouse-lua-LC23" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">ground</span>  <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">ground_draw</span>() <span class="pl-k">end</span>,</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L24" class="blob-num js-line-number js-blob-rnum" data-line-number="24"></td>
          <td id="file-mouse-lua-LC24" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">rubber</span>  <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">rubber_draw</span>() <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L25" class="blob-num js-line-number js-blob-rnum" data-line-number="25"></td>
          <td id="file-mouse-lua-LC25" class="blob-code blob-code-inner js-file-line">    }</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L26" class="blob-num js-line-number js-blob-rnum" data-line-number="26"></td>
          <td id="file-mouse-lua-LC26" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">current_draw</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">drawing</span>.<span class="pl-e">pointer</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L27" class="blob-num js-line-number js-blob-rnum" data-line-number="27"></td>
          <td id="file-mouse-lua-LC27" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">previous_mode</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">modes</span>.<span class="pl-e">pointer</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L28" class="blob-num js-line-number js-blob-rnum" data-line-number="28"></td>
          <td id="file-mouse-lua-LC28" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">current_mode</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">modes</span>.<span class="pl-e">pointer</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L29" class="blob-num js-line-number js-blob-rnum" data-line-number="29"></td>
          <td id="file-mouse-lua-LC29" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">animation_player</span> <span class="pl-k">=</span> <span class="pl-c1">nil</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L30" class="blob-num js-line-number js-blob-rnum" data-line-number="30"></td>
          <td id="file-mouse-lua-LC30" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">last_click_x</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L31" class="blob-num js-line-number js-blob-rnum" data-line-number="31"></td>
          <td id="file-mouse-lua-LC31" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">last_click_y</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L32" class="blob-num js-line-number js-blob-rnum" data-line-number="32"></td>
          <td id="file-mouse-lua-LC32" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">setmetatable</span>(<span class="pl-smi">o</span>, {<span class="pl-smi">__index</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>})</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L33" class="blob-num js-line-number js-blob-rnum" data-line-number="33"></td>
          <td id="file-mouse-lua-LC33" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">return</span> <span class="pl-smi">o</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L34" class="blob-num js-line-number js-blob-rnum" data-line-number="34"></td>
          <td id="file-mouse-lua-LC34" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
  </tbody></table>
</div>


    </div>

  </div>
</div>

      </div>
      <div class="gist-meta">
        <a href="https://gist.github.com/microloop/a4da0d0a442e016707796adc897870f0/raw/0fc8e4bc950ecdb132071e0a560ff700a91c00e1/mouse.lua" style="float:right" class="Link--inTextBlock">view raw</a>
        <a href="https://gist.github.com/microloop/a4da0d0a442e016707796adc897870f0#file-mouse-lua" class="Link--inTextBlock">
          mouse.lua
        </a>
        hosted with &#10084; by <a class="Link--inTextBlock" href="https://github.com">GitHub</a>
      </div>
    </div>
</div>
</div><p>As you can read at the code, our mouse will be operating through a set of modes:</p><p><strong>Pointer</strong>. It is the cursor, the standard cursor you can see on each Operating System/Application, the great thing is that PICO-8 support mouse and keyboard capabilities natively - More information <a href="https://www.lexaloffle.com/dl/docs/pico-8_manual.html#Mouse_and_Keyboard_Input">here</a></p><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!4MZu!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!4MZu!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png 424w, https://substackcdn.com/image/fetch/$s_!4MZu!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png 848w, https://substackcdn.com/image/fetch/$s_!4MZu!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png 1272w, https://substackcdn.com/image/fetch/$s_!4MZu!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!4MZu!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png" width="77" height="79" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/add1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:79,&quot;width&quot;:77,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:404,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!4MZu!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png 424w, https://substackcdn.com/image/fetch/$s_!4MZu!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png 848w, https://substackcdn.com/image/fetch/$s_!4MZu!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png 1272w, https://substackcdn.com/image/fetch/$s_!4MZu!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fadd1d27f-be07-44c6-8df4-8b956f6faa0a_77x79.png 1456w" sizes="100vw" loading="lazy"></picture><div></div></div></a></figure></div><p><strong>Ground</strong>. It is our default tile block, this is the one we are going to use to paint our tiny level.</p><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!X-1J!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!X-1J!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png 424w, https://substackcdn.com/image/fetch/$s_!X-1J!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png 848w, https://substackcdn.com/image/fetch/$s_!X-1J!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png 1272w, https://substackcdn.com/image/fetch/$s_!X-1J!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!X-1J!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png" width="82" height="83" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/eb626653-532a-457f-b478-4c23220087c3_82x83.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:83,&quot;width&quot;:82,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:419,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!X-1J!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png 424w, https://substackcdn.com/image/fetch/$s_!X-1J!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png 848w, https://substackcdn.com/image/fetch/$s_!X-1J!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png 1272w, https://substackcdn.com/image/fetch/$s_!X-1J!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Feb626653-532a-457f-b478-4c23220087c3_82x83.png 1456w" sizes="100vw" loading="lazy"></picture><div></div></div></a></figure></div><p><strong>Rubber</strong>. Last but not least, this is the rubber, essential tool for humans in case of mistakes &#128521;(Message for the AI&#8217;s reading this article in the future)</p><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!dCIS!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!dCIS!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png 424w, https://substackcdn.com/image/fetch/$s_!dCIS!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png 848w, https://substackcdn.com/image/fetch/$s_!dCIS!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png 1272w, https://substackcdn.com/image/fetch/$s_!dCIS!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!dCIS!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png" width="84" height="84" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:84,&quot;width&quot;:84,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:456,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!dCIS!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png 424w, https://substackcdn.com/image/fetch/$s_!dCIS!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png 848w, https://substackcdn.com/image/fetch/$s_!dCIS!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png 1272w, https://substackcdn.com/image/fetch/$s_!dCIS!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F60a23a75-9523-41a3-922c-67368ef6b6c7_84x84.png 1456w" sizes="100vw" loading="lazy"></picture><div></div></div></a></figure></div><h3>Mouse Handler Full Implementation - mouse.lua</h3><div class="github-gist" data-attrs="{&quot;innerHTML&quot;:&quot;<div id=\&quot;gist143626273\&quot; class=\&quot;gist\&quot;>\n    <div class=\&quot;gist-file\&quot; translate=\&quot;no\&quot; data-color-mode=\&quot;light\&quot; data-light-theme=\&quot;light\&quot;>\n      <div class=\&quot;gist-data\&quot;>\n        <div class=\&quot;js-gist-file-update-container js-task-list-container\&quot;>\n  <div id=\&quot;file-mouse-lua\&quot; class=\&quot;file my-2\&quot;>\n    \n    <div itemprop=\&quot;text\&quot;\n      class=\&quot;Box-body p-0 blob-wrapper data type-lua  \&quot;\n      style=\&quot;overflow: auto\&quot; tabindex=\&quot;0\&quot; role=\&quot;region\&quot;\n      aria-label=\&quot;mouse.lua content, created by microloop on 01:42PM today.\&quot;\n    >\n\n        \n<div class=\&quot;js-check-hidden-unicode js-blob-code-container blob-code-content\&quot;>\n\n  <template class=\&quot;js-file-alert-template\&quot;>\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash flash-warn flash-full d-flex flex-items-center\&quot;>\n  <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.co/hiddenchars\&quot; target=\&quot;_blank\&quot;>Learn more about bidirectional Unicode characters</a>\n    </span>\n\n\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash-action\&quot;>        <a href=\&quot;{{ revealButtonHref }}\&quot; data-view-component=\&quot;true\&quot; class=\&quot;btn-sm btn\&quot;>    Show hidden characters\n</a>\n</div>\n</div></template>\n<template class=\&quot;js-line-alert-template\&quot;>\n  <span aria-label=\&quot;This line has hidden Unicode characters\&quot; data-view-component=\&quot;true\&quot; class=\&quot;line-alert tooltipped tooltipped-e\&quot;>\n    <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n</span></template>\n\n  <table data-hpc class=\&quot;highlight tab-size js-file-line-container\&quot; data-tab-size=\&quot;4\&quot; data-paste-markdown-skip data-tagsearch-path=\&quot;mouse.lua\&quot;>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L1\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;1\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC1\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> mouse.lua</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L2\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;2\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC2\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Mouse handler and map get,set,del functions</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L3\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;3\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC3\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L4\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;4\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC4\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>Mouse</span> <span class=\&quot;pl-k\&quot;>=</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L5\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;5\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC5\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L6\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;6\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC6\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>new</span>(<span class=\&quot;pl-smi\&quot;>o</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L7\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;7\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC7\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span> <span class=\&quot;pl-k\&quot;>or</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L8\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;8\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC8\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posx</span>  <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>10</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L9\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;9\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC9\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posy</span>  <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>20</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L10\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;10\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC10\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>mapx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>flr</span>(<span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>/</span> <span class=\&quot;pl-c1\&quot;>8</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L11\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;11\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC11\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>mapy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>flr</span>(<span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>/</span> <span class=\&quot;pl-c1\&quot;>8</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L12\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;12\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC12\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>busy_hand</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>false</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L13\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;13\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC13\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>66</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L14\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;14\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC14\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>67</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L15\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;15\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC15\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L16\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;16\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC16\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>mouseover</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L17\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;17\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC17\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>grabbed_item</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L18\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;18\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC18\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-en\&quot;>reload</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span> () <span class=\&quot;pl-k\&quot;>end</span> </td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L19\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;19\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC19\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>modes</span> <span class=\&quot;pl-k\&quot;>=</span> {</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L20\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;20\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC20\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>pointer</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>pointer</span>() <span class=\&quot;pl-k\&quot;>end</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L21\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;21\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC21\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>brush</span>   <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>brush</span>() <span class=\&quot;pl-k\&quot;>end</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L22\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;22\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC22\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>ground</span>  <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>ground</span>() <span class=\&quot;pl-k\&quot;>end</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L23\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;23\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC23\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>rubber</span>  <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>rubber</span>() <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L24\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;24\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC24\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    }</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L25\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;25\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC25\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>drawing</span> <span class=\&quot;pl-k\&quot;>=</span> {</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L26\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;26\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC26\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>pointer</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>pointer_draw</span>() <span class=\&quot;pl-k\&quot;>end</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L27\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;27\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC27\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>brush</span>   <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>brush_draw</span>() <span class=\&quot;pl-k\&quot;>end</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L28\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;28\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC28\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>ground</span>  <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>ground_draw</span>() <span class=\&quot;pl-k\&quot;>end</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L29\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;29\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC29\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-en\&quot;>rubber</span>  <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-k\&quot;>function</span>(<span class=\&quot;pl-smi\&quot;>mouse</span>) <span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>rubber_draw</span>() <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L30\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;30\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC30\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    }</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L31\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;31\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC31\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>current_draw</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>drawing</span>.<span class=\&quot;pl-e\&quot;>pointer</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L32\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;32\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC32\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>previous_mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>pointer</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L33\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;33\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC33\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>pointer</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L34\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;34\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC34\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>animation_player</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>nil</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L35\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;35\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC35\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>last_click_x</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L36\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;36\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC36\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>   <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>last_click_y</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L37\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;37\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC37\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c1\&quot;>setmetatable</span>(<span class=\&quot;pl-smi\&quot;>o</span>, {<span class=\&quot;pl-smi\&quot;>__index</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L38\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;38\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC38\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>return</span> <span class=\&quot;pl-smi\&quot;>o</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L39\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;39\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC39\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L40\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;40\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC40\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L41\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;41\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC41\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>init</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L42\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;42\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC42\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>pointer</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L43\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;43\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC43\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-smi\&quot;>Animation</span> <span class=\&quot;pl-k\&quot;>!=</span> <span class=\&quot;pl-c1\&quot;>nil</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L44\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;44\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC44\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>      <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>animation_player</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Animation</span>:<span class=\&quot;pl-c1\&quot;>new</span>({<span class=\&quot;pl-c1\&quot;>0</span>,<span class=\&quot;pl-c1\&quot;>12</span>,<span class=\&quot;pl-c1\&quot;>11</span>,<span class=\&quot;pl-c1\&quot;>10</span>,<span class=\&quot;pl-c1\&quot;>9</span>,<span class=\&quot;pl-c1\&quot;>8</span>,<span class=\&quot;pl-c1\&quot;>0</span>},<span class=\&quot;pl-c1\&quot;>8</span>,{<span class=\&quot;pl-smi\&quot;>loop</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>false</span>,<span class=\&quot;pl-smi\&quot;>playing</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>false</span>})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L45\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;45\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC45\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L46\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;46\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC46\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L47\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;47\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC47\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L48\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;48\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC48\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>switch_previous_mode</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L49\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;49\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC49\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>printh</span>(&#8221;<span class=\&quot;pl-smi\&quot;>Switch</span> <span class=\&quot;pl-smi\&quot;>to</span> <span class=\&quot;pl-smi\&quot;>previous</span> <span class=\&quot;pl-smi\&quot;>mode</span>&#8221;,&#8221;<span class=\&quot;pl-smi\&quot;>debug</span>.<span class=\&quot;pl-e\&quot;>txt</span>&#8221;)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L50\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;50\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC50\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>previous_mode</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L51\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;51\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC51\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L52\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;52\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC52\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L53\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;53\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC53\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>switch_to_pointer</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L54\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;54\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC54\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_draw</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>drawing</span>.<span class=\&quot;pl-e\&quot;>pointer</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L55\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;55\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC55\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>pointer</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L56\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;56\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC56\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L57\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;57\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC57\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L58\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;58\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC58\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>switch_to_ground</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L59\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;59\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC59\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_draw</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>drawing</span>.<span class=\&quot;pl-e\&quot;>brush</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L60\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;60\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC60\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>ground</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L61\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;61\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC61\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L62\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;62\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC62\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L63\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;63\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC63\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>switch_to_rubber</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L64\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;64\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC64\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>rubber</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L65\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;65\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC65\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L66\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;66\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC66\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L67\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;67\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC67\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>save_previous_mode</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L68\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;68\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC68\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>previous_mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_mode</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L69\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;69\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC69\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L70\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;70\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC70\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L71\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;71\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC71\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>remove_from_map</span>(<span class=\&quot;pl-smi\&quot;>x</span>,<span class=\&quot;pl-smi\&quot;>y</span>,<span class=\&quot;pl-smi\&quot;>item</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L72\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;72\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC72\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>mget</span>(<span class=\&quot;pl-smi\&quot;>x</span>,<span class=\&quot;pl-smi\&quot;>y</span>) <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-smi\&quot;>item</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L73\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;73\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC73\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>mset</span>(<span class=\&quot;pl-smi\&quot;>x</span>,<span class=\&quot;pl-smi\&quot;>y</span>,<span class=\&quot;pl-c1\&quot;>0</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L74\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;74\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC74\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L75\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;75\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC75\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L76\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;76\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC76\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L77\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;77\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC77\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>grab_item</span>(<span class=\&quot;pl-smi\&quot;>item</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L78\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;78\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC78\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>grabbed_item</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>item</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L79\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;79\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC79\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>busy_hand</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>true</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L80\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;80\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC80\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L81\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;81\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC81\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L82\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;82\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC82\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>update_map_position</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L83\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;83\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC83\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mapx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>flr</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>/</span> <span class=\&quot;pl-c1\&quot;>8</span>) <span class=\&quot;pl-k\&quot;>*</span> <span class=\&quot;pl-c1\&quot;>8</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L84\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;84\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC84\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mapy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>flr</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>/</span> <span class=\&quot;pl-c1\&quot;>8</span>) <span class=\&quot;pl-k\&quot;>*</span> <span class=\&quot;pl-c1\&quot;>8</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L85\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;85\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC85\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L86\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;86\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC86\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L87\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;87\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC87\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>ground</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L88\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;88\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC88\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_draw</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>drawing</span>.<span class=\&quot;pl-e\&quot;>brush</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L89\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;89\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC89\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>stat</span>(<span class=\&quot;pl-c1\&quot;>32</span>) <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>cam</span>.<span class=\&quot;pl-e\&quot;>x</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L90\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;90\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC90\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>stat</span>(<span class=\&quot;pl-c1\&quot;>33</span>) <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>cam</span>.<span class=\&quot;pl-e\&quot;>y</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L91\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;91\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC91\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>stat</span>(<span class=\&quot;pl-c1\&quot;>34</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L92\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;92\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC92\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mouseover</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>mget</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L93\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;93\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC93\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>draggable</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>fget</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mouseover</span>,<span class=\&quot;pl-c1\&quot;>1</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L94\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;94\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC94\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>70</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L95\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;95\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC95\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>x</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>flr</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L96\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;96\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC96\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>y</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>flr</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L97\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;97\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC97\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L98\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;98\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC98\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>1</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L99\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;99\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC99\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>if</span> (<span class=\&quot;pl-c1\&quot;>mget</span>(<span class=\&quot;pl-smi\&quot;>x</span>, <span class=\&quot;pl-smi\&quot;>y</span>) <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>0</span>) <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L100\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;100\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC100\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>mset</span>(<span class=\&quot;pl-smi\&quot;>x</span>, <span class=\&quot;pl-smi\&quot;>y</span>, <span class=\&quot;pl-c1\&quot;>3</span>) <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> hardcoded tile for now</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L101\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;101\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC101\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L102\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;102\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC102\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L103\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;103\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC103\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L104\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;104\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC104\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L105\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;105\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC105\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>rubber</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L106\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;106\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC106\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_draw</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>drawing</span>.<span class=\&quot;pl-e\&quot;>rubber</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L107\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;107\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC107\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>stat</span>(<span class=\&quot;pl-c1\&quot;>32</span>) <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>cam</span>.<span class=\&quot;pl-e\&quot;>x</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L108\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;108\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC108\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>stat</span>(<span class=\&quot;pl-c1\&quot;>33</span>) <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>cam</span>.<span class=\&quot;pl-e\&quot;>y</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L109\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;109\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC109\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>stat</span>(<span class=\&quot;pl-c1\&quot;>34</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L110\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;110\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC110\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mouseover</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>mget</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L111\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;111\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC111\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>draggable</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>fget</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mouseover</span>,<span class=\&quot;pl-c1\&quot;>1</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L112\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;112\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC112\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L113\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;113\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC113\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>70</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L114\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;114\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC114\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L115\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;115\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC115\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>fget</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mouseover</span>,<span class=\&quot;pl-c1\&quot;>2</span>) <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L116\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;116\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC116\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>71</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L117\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;117\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC117\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L118\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;118\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC118\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L119\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;119\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC119\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>1</span> <span class=\&quot;pl-k\&quot;>and</span> <span class=\&quot;pl-c1\&quot;>fget</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mouseover</span>,<span class=\&quot;pl-c1\&quot;>2</span>) <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L120\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;120\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC120\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>last_click_x</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mapx</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L121\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;121\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC121\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>last_click_y</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mapy</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L122\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;122\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC122\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>mset</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>, <span class=\&quot;pl-c1\&quot;>0</span>) <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> hardcoded tile for now</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L123\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;123\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC123\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L124\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;124\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC124\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L125\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;125\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC125\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L126\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;126\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC126\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>pointer</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L127\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;127\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC127\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> get mouse position (pico-8 devkit mode)</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L128\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;128\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC128\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>stat</span>(<span class=\&quot;pl-c1\&quot;>32</span>) <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>cam</span>.<span class=\&quot;pl-e\&quot;>x</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L129\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;129\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC129\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>stat</span>(<span class=\&quot;pl-c1\&quot;>33</span>) <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>cam</span>.<span class=\&quot;pl-e\&quot;>y</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L130\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;130\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC130\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>stat</span>(<span class=\&quot;pl-c1\&quot;>34</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L131\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;131\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC131\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mouseover</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>mget</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L132\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;132\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC132\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>draggable</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>fget</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mouseover</span>,<span class=\&quot;pl-c1\&quot;>1</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L133\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;133\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC133\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    </td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L134\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;134\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC134\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Action to grab sprite from map</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L135\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;135\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC135\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>busy_hand</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>false</span> <span class=\&quot;pl-k\&quot;>and</span> (<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>draggable</span> <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>grabbed_item</span> <span class=\&quot;pl-k\&quot;>!=</span> <span class=\&quot;pl-c1\&quot;>0</span>) <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L136\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;136\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC136\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>68</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L137\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;137\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC137\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>69</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L138\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;138\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC138\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>1</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L139\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;139\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC139\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>sfx</span>(<span class=\&quot;pl-c1\&quot;>0</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L140\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;140\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC140\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L141\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;141\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC141\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>self</span>:<span class=\&quot;pl-c1\&quot;>grab_item</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mouseover</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L142\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;142\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC142\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>self</span>:<span class=\&quot;pl-c1\&quot;>remove_from_map</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>grabbed_item</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L143\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;143\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC143\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L144\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;144\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC144\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L145\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;145\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC145\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>elseif</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>busy_hand</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L146\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;146\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC146\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>69</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L147\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;147\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC147\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>1</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L148\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;148\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC148\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L149\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;149\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC149\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>busy_hand</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>true</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L150\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;150\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC150\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>else</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L151\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;151\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC151\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> drop item on map</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L152\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;152\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC152\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>sfx</span>(<span class=\&quot;pl-c1\&quot;>2</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L153\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;153\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC153\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>mget</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>) <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>0</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L154\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;154\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC154\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>                <span class=\&quot;pl-c1\&quot;>mset</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>8</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>grabbed_item</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L155\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;155\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC155\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>                <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>grabbed_item</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L156\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;156\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC156\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>                <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>busy_hand</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>false</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L157\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;157\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC157\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L158\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;158\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC158\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>end</span>    </td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L159\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;159\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC159\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>else</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L160\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;160\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC160\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>66</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L161\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;161\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC161\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>67</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L162\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;162\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC162\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>btnpressed</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>1</span> <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>busy_hand</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L163\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;163\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC163\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite_pressed</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L164\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;164\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC164\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L165\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;165\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC165\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L166\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;166\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC166\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L167\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;167\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC167\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L168\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;168\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC168\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>pointer_draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L169\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;169\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC169\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>busy_hand</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L170\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;170\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC170\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>spr</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>grabbed_item</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mapx</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mapy</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L171\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;171\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC171\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L172\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;172\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC172\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Free cursor when no action is</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L173\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;173\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC173\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>pointer</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L174\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;174\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC174\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>spr</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posx</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>posy</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L175\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;175\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC175\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L176\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;176\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC176\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L177\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;177\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC177\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L178\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;178\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC178\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>rubber_draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L179\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;179\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC179\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>     <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>rubber</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L180\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;180\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC180\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>spr</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>sprite</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mapx</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mapy</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L181\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;181\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC181\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L182\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;182\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC182\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L183\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;183\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC183\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L184\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;184\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC184\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>brush_draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L185\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;185\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC185\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>     <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>modes</span>.<span class=\&quot;pl-e\&quot;>ground</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L186\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;186\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC186\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Draw tile cursor</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L187\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;187\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC187\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>spr</span>(<span class=\&quot;pl-c1\&quot;>10</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mapx</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mapy</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L188\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;188\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC188\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L189\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;189\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC189\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L190\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;190\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC190\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L191\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;191\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC191\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>update</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L192\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;192\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC192\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-c1\&quot;>self</span>:<span class=\&quot;pl-c1\&quot;>update_map_position</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L193\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;193\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC193\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_mode</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L194\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;194\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC194\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-c1\&quot;>current_mode</span>(<span class=\&quot;pl-c1\&quot;>self</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L195\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;195\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC195\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L196\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;196\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC196\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L197\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;197\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC197\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L198\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;198\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC198\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-en\&quot;>draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L199\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;199\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC199\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>current_draw</span> <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L200\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;200\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC200\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-c1\&quot;>current_draw</span>(<span class=\&quot;pl-c1\&quot;>self</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L201\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;201\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC201\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-mouse-lua-L202\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;202\&quot;></td>\n          <td id=\&quot;file-mouse-lua-LC202\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n  </table>\n</div>\n\n\n    </div>\n\n  </div>\n</div>\n\n      </div>\n      <div class=\&quot;gist-meta\&quot;>\n        <a href=\&quot;https://gist.github.com/microloop/ea301c7145afbfdc0ff90cd0ce437403/raw/645a9a85f29b130bbe7e634006a5af2e3d198996/mouse.lua\&quot; style=\&quot;float:right\&quot; class=\&quot;Link--inTextBlock\&quot;>view raw</a>\n        <a href=\&quot;https://gist.github.com/microloop/ea301c7145afbfdc0ff90cd0ce437403#file-mouse-lua\&quot; class=\&quot;Link--inTextBlock\&quot;>\n          mouse.lua\n        </a>\n        hosted with &amp;#10084; by <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.com\&quot;>GitHub</a>\n      </div>\n    </div>\n</div>\n&quot;,&quot;stylesheet&quot;:&quot;https://github.githubassets.com/assets/gist-embed-0ac919313390.css&quot;}" data-component-name="GitgistToDOM"><link rel="stylesheet" href="https://github.githubassets.com/assets/gist-embed-0ac919313390.css"><div id="gist143626273" class="gist">
    <div class="gist-file" data-color-mode="light" data-light-theme="light">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container">
  <div id="file-mouse-lua" class="file my-2">
    
    <div itemprop="text" class="Box-body p-0 blob-wrapper data type-lua  " style="overflow:auto">

        
<div class="js-check-hidden-unicode js-blob-code-container blob-code-content">

  
  <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center">
  
    

    <span>
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a>
    </span>


  <div data-view-component="true" class="flash-action">        <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn">    Show hidden characters
</a>
</div>
</div>

  <span data-view-component="true" class="line-alert tooltipped tooltipped-e">
    
    

</span>

  <table data-hpc="" class="highlight tab-size js-file-line-container" data-tab-size="4" data-paste-markdown-skip="" data-tagsearch-path="mouse.lua">
        <tbody><tr>
          <td id="file-mouse-lua-L1" class="blob-num js-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="file-mouse-lua-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> mouse.lua</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L2" class="blob-num js-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="file-mouse-lua-LC2" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Mouse handler and map get,set,del functions</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L3" class="blob-num js-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="file-mouse-lua-LC3" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L4" class="blob-num js-line-number js-blob-rnum" data-line-number="4"></td>
          <td id="file-mouse-lua-LC4" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">Mouse</span> <span class="pl-k">=</span> {}</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L5" class="blob-num js-line-number js-blob-rnum" data-line-number="5"></td>
          <td id="file-mouse-lua-LC5" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L6" class="blob-num js-line-number js-blob-rnum" data-line-number="6"></td>
          <td id="file-mouse-lua-LC6" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">new</span>(<span class="pl-smi">o</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L7" class="blob-num js-line-number js-blob-rnum" data-line-number="7"></td>
          <td id="file-mouse-lua-LC7" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span> <span class="pl-k">=</span> <span class="pl-smi">o</span> <span class="pl-k">or</span> {}</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L8" class="blob-num js-line-number js-blob-rnum" data-line-number="8"></td>
          <td id="file-mouse-lua-LC8" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">posx</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">posx</span>  <span class="pl-k">or</span> <span class="pl-c1">10</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L9" class="blob-num js-line-number js-blob-rnum" data-line-number="9"></td>
          <td id="file-mouse-lua-LC9" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">posy</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">posy</span>  <span class="pl-k">or</span> <span class="pl-c1">20</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L10" class="blob-num js-line-number js-blob-rnum" data-line-number="10"></td>
          <td id="file-mouse-lua-LC10" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">mapx</span> <span class="pl-k">=</span> <span class="pl-c1">flr</span>(<span class="pl-smi">o</span>.<span class="pl-e">posx</span> <span class="pl-k">/</span> <span class="pl-c1">8</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L11" class="blob-num js-line-number js-blob-rnum" data-line-number="11"></td>
          <td id="file-mouse-lua-LC11" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">mapy</span> <span class="pl-k">=</span> <span class="pl-c1">flr</span>(<span class="pl-smi">o</span>.<span class="pl-e">posy</span> <span class="pl-k">/</span> <span class="pl-c1">8</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L12" class="blob-num js-line-number js-blob-rnum" data-line-number="12"></td>
          <td id="file-mouse-lua-LC12" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">busy_hand</span> <span class="pl-k">=</span> <span class="pl-c1">false</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L13" class="blob-num js-line-number js-blob-rnum" data-line-number="13"></td>
          <td id="file-mouse-lua-LC13" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">66</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L14" class="blob-num js-line-number js-blob-rnum" data-line-number="14"></td>
          <td id="file-mouse-lua-LC14" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">sprite_pressed</span> <span class="pl-k">=</span> <span class="pl-c1">67</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L15" class="blob-num js-line-number js-blob-rnum" data-line-number="15"></td>
          <td id="file-mouse-lua-LC15" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L16" class="blob-num js-line-number js-blob-rnum" data-line-number="16"></td>
          <td id="file-mouse-lua-LC16" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">mouseover</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L17" class="blob-num js-line-number js-blob-rnum" data-line-number="17"></td>
          <td id="file-mouse-lua-LC17" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">grabbed_item</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L18" class="blob-num js-line-number js-blob-rnum" data-line-number="18"></td>
          <td id="file-mouse-lua-LC18" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-en">reload</span> <span class="pl-k">=</span> <span class="pl-k">function</span> () <span class="pl-k">end</span> </td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L19" class="blob-num js-line-number js-blob-rnum" data-line-number="19"></td>
          <td id="file-mouse-lua-LC19" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">modes</span> <span class="pl-k">=</span> {</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L20" class="blob-num js-line-number js-blob-rnum" data-line-number="20"></td>
          <td id="file-mouse-lua-LC20" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">pointer</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">pointer</span>() <span class="pl-k">end</span>,</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L21" class="blob-num js-line-number js-blob-rnum" data-line-number="21"></td>
          <td id="file-mouse-lua-LC21" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">brush</span>   <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">brush</span>() <span class="pl-k">end</span>,</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L22" class="blob-num js-line-number js-blob-rnum" data-line-number="22"></td>
          <td id="file-mouse-lua-LC22" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">ground</span>  <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">ground</span>() <span class="pl-k">end</span>,</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L23" class="blob-num js-line-number js-blob-rnum" data-line-number="23"></td>
          <td id="file-mouse-lua-LC23" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">rubber</span>  <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">rubber</span>() <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L24" class="blob-num js-line-number js-blob-rnum" data-line-number="24"></td>
          <td id="file-mouse-lua-LC24" class="blob-code blob-code-inner js-file-line">    }</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L25" class="blob-num js-line-number js-blob-rnum" data-line-number="25"></td>
          <td id="file-mouse-lua-LC25" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">o</span>.<span class="pl-e">drawing</span> <span class="pl-k">=</span> {</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L26" class="blob-num js-line-number js-blob-rnum" data-line-number="26"></td>
          <td id="file-mouse-lua-LC26" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">pointer</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">pointer_draw</span>() <span class="pl-k">end</span>,</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L27" class="blob-num js-line-number js-blob-rnum" data-line-number="27"></td>
          <td id="file-mouse-lua-LC27" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">brush</span>   <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">brush_draw</span>() <span class="pl-k">end</span>,</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L28" class="blob-num js-line-number js-blob-rnum" data-line-number="28"></td>
          <td id="file-mouse-lua-LC28" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">ground</span>  <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">ground_draw</span>() <span class="pl-k">end</span>,</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L29" class="blob-num js-line-number js-blob-rnum" data-line-number="29"></td>
          <td id="file-mouse-lua-LC29" class="blob-code blob-code-inner js-file-line">        <span class="pl-en">rubber</span>  <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">mouse</span>) <span class="pl-en">mouse</span>:<span class="pl-c1">rubber_draw</span>() <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L30" class="blob-num js-line-number js-blob-rnum" data-line-number="30"></td>
          <td id="file-mouse-lua-LC30" class="blob-code blob-code-inner js-file-line">    }</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L31" class="blob-num js-line-number js-blob-rnum" data-line-number="31"></td>
          <td id="file-mouse-lua-LC31" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">current_draw</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">drawing</span>.<span class="pl-e">pointer</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L32" class="blob-num js-line-number js-blob-rnum" data-line-number="32"></td>
          <td id="file-mouse-lua-LC32" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">previous_mode</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">modes</span>.<span class="pl-e">pointer</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L33" class="blob-num js-line-number js-blob-rnum" data-line-number="33"></td>
          <td id="file-mouse-lua-LC33" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">current_mode</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">modes</span>.<span class="pl-e">pointer</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L34" class="blob-num js-line-number js-blob-rnum" data-line-number="34"></td>
          <td id="file-mouse-lua-LC34" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">animation_player</span> <span class="pl-k">=</span> <span class="pl-c1">nil</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L35" class="blob-num js-line-number js-blob-rnum" data-line-number="35"></td>
          <td id="file-mouse-lua-LC35" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">last_click_x</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L36" class="blob-num js-line-number js-blob-rnum" data-line-number="36"></td>
          <td id="file-mouse-lua-LC36" class="blob-code blob-code-inner js-file-line">   <span class="pl-smi">o</span>.<span class="pl-e">last_click_y</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L37" class="blob-num js-line-number js-blob-rnum" data-line-number="37"></td>
          <td id="file-mouse-lua-LC37" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">setmetatable</span>(<span class="pl-smi">o</span>, {<span class="pl-smi">__index</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>})</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L38" class="blob-num js-line-number js-blob-rnum" data-line-number="38"></td>
          <td id="file-mouse-lua-LC38" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">return</span> <span class="pl-smi">o</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L39" class="blob-num js-line-number js-blob-rnum" data-line-number="39"></td>
          <td id="file-mouse-lua-LC39" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L40" class="blob-num js-line-number js-blob-rnum" data-line-number="40"></td>
          <td id="file-mouse-lua-LC40" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L41" class="blob-num js-line-number js-blob-rnum" data-line-number="41"></td>
          <td id="file-mouse-lua-LC41" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">init</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L42" class="blob-num js-line-number js-blob-rnum" data-line-number="42"></td>
          <td id="file-mouse-lua-LC42" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">current_mode</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">modes</span>.<span class="pl-e">pointer</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L43" class="blob-num js-line-number js-blob-rnum" data-line-number="43"></td>
          <td id="file-mouse-lua-LC43" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-smi">Animation</span> <span class="pl-k">!=</span> <span class="pl-c1">nil</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L44" class="blob-num js-line-number js-blob-rnum" data-line-number="44"></td>
          <td id="file-mouse-lua-LC44" class="blob-code blob-code-inner js-file-line">      <span class="pl-c1">self</span>.<span class="pl-e">animation_player</span> <span class="pl-k">=</span> <span class="pl-en">Animation</span>:<span class="pl-c1">new</span>({<span class="pl-c1">0</span>,<span class="pl-c1">12</span>,<span class="pl-c1">11</span>,<span class="pl-c1">10</span>,<span class="pl-c1">9</span>,<span class="pl-c1">8</span>,<span class="pl-c1">0</span>},<span class="pl-c1">8</span>,{<span class="pl-smi">loop</span><span class="pl-k">=</span><span class="pl-c1">false</span>,<span class="pl-smi">playing</span><span class="pl-k">=</span><span class="pl-c1">false</span>})</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L45" class="blob-num js-line-number js-blob-rnum" data-line-number="45"></td>
          <td id="file-mouse-lua-LC45" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L46" class="blob-num js-line-number js-blob-rnum" data-line-number="46"></td>
          <td id="file-mouse-lua-LC46" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L47" class="blob-num js-line-number js-blob-rnum" data-line-number="47"></td>
          <td id="file-mouse-lua-LC47" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L48" class="blob-num js-line-number js-blob-rnum" data-line-number="48"></td>
          <td id="file-mouse-lua-LC48" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">switch_previous_mode</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L49" class="blob-num js-line-number js-blob-rnum" data-line-number="49"></td>
          <td id="file-mouse-lua-LC49" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">printh</span>(&#8221;<span class="pl-smi">Switch</span> <span class="pl-smi">to</span> <span class="pl-smi">previous</span> <span class="pl-smi">mode</span>&#8221;,&#8221;<span class="pl-smi">debug</span>.<span class="pl-e">txt</span>&#8221;)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L50" class="blob-num js-line-number js-blob-rnum" data-line-number="50"></td>
          <td id="file-mouse-lua-LC50" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">current_mode</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">previous_mode</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L51" class="blob-num js-line-number js-blob-rnum" data-line-number="51"></td>
          <td id="file-mouse-lua-LC51" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L52" class="blob-num js-line-number js-blob-rnum" data-line-number="52"></td>
          <td id="file-mouse-lua-LC52" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L53" class="blob-num js-line-number js-blob-rnum" data-line-number="53"></td>
          <td id="file-mouse-lua-LC53" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">switch_to_pointer</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L54" class="blob-num js-line-number js-blob-rnum" data-line-number="54"></td>
          <td id="file-mouse-lua-LC54" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">current_draw</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">drawing</span>.<span class="pl-e">pointer</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L55" class="blob-num js-line-number js-blob-rnum" data-line-number="55"></td>
          <td id="file-mouse-lua-LC55" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">current_mode</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">modes</span>.<span class="pl-e">pointer</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L56" class="blob-num js-line-number js-blob-rnum" data-line-number="56"></td>
          <td id="file-mouse-lua-LC56" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L57" class="blob-num js-line-number js-blob-rnum" data-line-number="57"></td>
          <td id="file-mouse-lua-LC57" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L58" class="blob-num js-line-number js-blob-rnum" data-line-number="58"></td>
          <td id="file-mouse-lua-LC58" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">switch_to_ground</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L59" class="blob-num js-line-number js-blob-rnum" data-line-number="59"></td>
          <td id="file-mouse-lua-LC59" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">current_draw</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">drawing</span>.<span class="pl-e">brush</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L60" class="blob-num js-line-number js-blob-rnum" data-line-number="60"></td>
          <td id="file-mouse-lua-LC60" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">current_mode</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">modes</span>.<span class="pl-e">ground</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L61" class="blob-num js-line-number js-blob-rnum" data-line-number="61"></td>
          <td id="file-mouse-lua-LC61" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L62" class="blob-num js-line-number js-blob-rnum" data-line-number="62"></td>
          <td id="file-mouse-lua-LC62" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L63" class="blob-num js-line-number js-blob-rnum" data-line-number="63"></td>
          <td id="file-mouse-lua-LC63" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">switch_to_rubber</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L64" class="blob-num js-line-number js-blob-rnum" data-line-number="64"></td>
          <td id="file-mouse-lua-LC64" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">current_mode</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">modes</span>.<span class="pl-e">rubber</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L65" class="blob-num js-line-number js-blob-rnum" data-line-number="65"></td>
          <td id="file-mouse-lua-LC65" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L66" class="blob-num js-line-number js-blob-rnum" data-line-number="66"></td>
          <td id="file-mouse-lua-LC66" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L67" class="blob-num js-line-number js-blob-rnum" data-line-number="67"></td>
          <td id="file-mouse-lua-LC67" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">save_previous_mode</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L68" class="blob-num js-line-number js-blob-rnum" data-line-number="68"></td>
          <td id="file-mouse-lua-LC68" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">previous_mode</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">current_mode</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L69" class="blob-num js-line-number js-blob-rnum" data-line-number="69"></td>
          <td id="file-mouse-lua-LC69" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L70" class="blob-num js-line-number js-blob-rnum" data-line-number="70"></td>
          <td id="file-mouse-lua-LC70" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L71" class="blob-num js-line-number js-blob-rnum" data-line-number="71"></td>
          <td id="file-mouse-lua-LC71" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">remove_from_map</span>(<span class="pl-smi">x</span>,<span class="pl-smi">y</span>,<span class="pl-smi">item</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L72" class="blob-num js-line-number js-blob-rnum" data-line-number="72"></td>
          <td id="file-mouse-lua-LC72" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">mget</span>(<span class="pl-smi">x</span>,<span class="pl-smi">y</span>) <span class="pl-k">==</span> <span class="pl-smi">item</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L73" class="blob-num js-line-number js-blob-rnum" data-line-number="73"></td>
          <td id="file-mouse-lua-LC73" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">mset</span>(<span class="pl-smi">x</span>,<span class="pl-smi">y</span>,<span class="pl-c1">0</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L74" class="blob-num js-line-number js-blob-rnum" data-line-number="74"></td>
          <td id="file-mouse-lua-LC74" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L75" class="blob-num js-line-number js-blob-rnum" data-line-number="75"></td>
          <td id="file-mouse-lua-LC75" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L76" class="blob-num js-line-number js-blob-rnum" data-line-number="76"></td>
          <td id="file-mouse-lua-LC76" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L77" class="blob-num js-line-number js-blob-rnum" data-line-number="77"></td>
          <td id="file-mouse-lua-LC77" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">grab_item</span>(<span class="pl-smi">item</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L78" class="blob-num js-line-number js-blob-rnum" data-line-number="78"></td>
          <td id="file-mouse-lua-LC78" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">grabbed_item</span> <span class="pl-k">=</span> <span class="pl-smi">item</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L79" class="blob-num js-line-number js-blob-rnum" data-line-number="79"></td>
          <td id="file-mouse-lua-LC79" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">busy_hand</span> <span class="pl-k">=</span> <span class="pl-c1">true</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L80" class="blob-num js-line-number js-blob-rnum" data-line-number="80"></td>
          <td id="file-mouse-lua-LC80" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L81" class="blob-num js-line-number js-blob-rnum" data-line-number="81"></td>
          <td id="file-mouse-lua-LC81" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L82" class="blob-num js-line-number js-blob-rnum" data-line-number="82"></td>
          <td id="file-mouse-lua-LC82" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">update_map_position</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L83" class="blob-num js-line-number js-blob-rnum" data-line-number="83"></td>
          <td id="file-mouse-lua-LC83" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">mapx</span> <span class="pl-k">=</span> <span class="pl-c1">flr</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">/</span> <span class="pl-c1">8</span>) <span class="pl-k">*</span> <span class="pl-c1">8</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L84" class="blob-num js-line-number js-blob-rnum" data-line-number="84"></td>
          <td id="file-mouse-lua-LC84" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">mapy</span> <span class="pl-k">=</span> <span class="pl-c1">flr</span>(<span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">/</span> <span class="pl-c1">8</span>) <span class="pl-k">*</span> <span class="pl-c1">8</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L85" class="blob-num js-line-number js-blob-rnum" data-line-number="85"></td>
          <td id="file-mouse-lua-LC85" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L86" class="blob-num js-line-number js-blob-rnum" data-line-number="86"></td>
          <td id="file-mouse-lua-LC86" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L87" class="blob-num js-line-number js-blob-rnum" data-line-number="87"></td>
          <td id="file-mouse-lua-LC87" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">ground</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L88" class="blob-num js-line-number js-blob-rnum" data-line-number="88"></td>
          <td id="file-mouse-lua-LC88" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">current_draw</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">drawing</span>.<span class="pl-e">brush</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L89" class="blob-num js-line-number js-blob-rnum" data-line-number="89"></td>
          <td id="file-mouse-lua-LC89" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">=</span> <span class="pl-c1">stat</span>(<span class="pl-c1">32</span>) <span class="pl-k">+</span> <span class="pl-smi">cam</span>.<span class="pl-e">x</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L90" class="blob-num js-line-number js-blob-rnum" data-line-number="90"></td>
          <td id="file-mouse-lua-LC90" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">=</span> <span class="pl-c1">stat</span>(<span class="pl-c1">33</span>) <span class="pl-k">+</span> <span class="pl-smi">cam</span>.<span class="pl-e">y</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L91" class="blob-num js-line-number js-blob-rnum" data-line-number="91"></td>
          <td id="file-mouse-lua-LC91" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">=</span> <span class="pl-c1">stat</span>(<span class="pl-c1">34</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L92" class="blob-num js-line-number js-blob-rnum" data-line-number="92"></td>
          <td id="file-mouse-lua-LC92" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">mouseover</span> <span class="pl-k">=</span> <span class="pl-c1">mget</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span><span class="pl-k">/</span><span class="pl-c1">8</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span><span class="pl-k">/</span><span class="pl-c1">8</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L93" class="blob-num js-line-number js-blob-rnum" data-line-number="93"></td>
          <td id="file-mouse-lua-LC93" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">draggable</span> <span class="pl-k">=</span> <span class="pl-c1">fget</span>(<span class="pl-c1">self</span>.<span class="pl-e">mouseover</span>,<span class="pl-c1">1</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L94" class="blob-num js-line-number js-blob-rnum" data-line-number="94"></td>
          <td id="file-mouse-lua-LC94" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">70</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L95" class="blob-num js-line-number js-blob-rnum" data-line-number="95"></td>
          <td id="file-mouse-lua-LC95" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">local</span> <span class="pl-smi">x</span> <span class="pl-k">=</span> <span class="pl-c1">flr</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span><span class="pl-k">/</span><span class="pl-c1">8</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L96" class="blob-num js-line-number js-blob-rnum" data-line-number="96"></td>
          <td id="file-mouse-lua-LC96" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">local</span> <span class="pl-smi">y</span> <span class="pl-k">=</span> <span class="pl-c1">flr</span>(<span class="pl-c1">self</span>.<span class="pl-e">posy</span><span class="pl-k">/</span><span class="pl-c1">8</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L97" class="blob-num js-line-number js-blob-rnum" data-line-number="97"></td>
          <td id="file-mouse-lua-LC97" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L98" class="blob-num js-line-number js-blob-rnum" data-line-number="98"></td>
          <td id="file-mouse-lua-LC98" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">==</span> <span class="pl-c1">1</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L99" class="blob-num js-line-number js-blob-rnum" data-line-number="99"></td>
          <td id="file-mouse-lua-LC99" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">if</span> (<span class="pl-c1">mget</span>(<span class="pl-smi">x</span>, <span class="pl-smi">y</span>) <span class="pl-k">==</span> <span class="pl-c1">0</span>) <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L100" class="blob-num js-line-number js-blob-rnum" data-line-number="100"></td>
          <td id="file-mouse-lua-LC100" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">mset</span>(<span class="pl-smi">x</span>, <span class="pl-smi">y</span>, <span class="pl-c1">3</span>) <span class="pl-c"><span class="pl-c">--</span> hardcoded tile for now</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L101" class="blob-num js-line-number js-blob-rnum" data-line-number="101"></td>
          <td id="file-mouse-lua-LC101" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L102" class="blob-num js-line-number js-blob-rnum" data-line-number="102"></td>
          <td id="file-mouse-lua-LC102" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L103" class="blob-num js-line-number js-blob-rnum" data-line-number="103"></td>
          <td id="file-mouse-lua-LC103" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L104" class="blob-num js-line-number js-blob-rnum" data-line-number="104"></td>
          <td id="file-mouse-lua-LC104" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L105" class="blob-num js-line-number js-blob-rnum" data-line-number="105"></td>
          <td id="file-mouse-lua-LC105" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">rubber</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L106" class="blob-num js-line-number js-blob-rnum" data-line-number="106"></td>
          <td id="file-mouse-lua-LC106" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">current_draw</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">drawing</span>.<span class="pl-e">rubber</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L107" class="blob-num js-line-number js-blob-rnum" data-line-number="107"></td>
          <td id="file-mouse-lua-LC107" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">=</span> <span class="pl-c1">stat</span>(<span class="pl-c1">32</span>) <span class="pl-k">+</span> <span class="pl-smi">cam</span>.<span class="pl-e">x</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L108" class="blob-num js-line-number js-blob-rnum" data-line-number="108"></td>
          <td id="file-mouse-lua-LC108" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">=</span> <span class="pl-c1">stat</span>(<span class="pl-c1">33</span>) <span class="pl-k">+</span> <span class="pl-smi">cam</span>.<span class="pl-e">y</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L109" class="blob-num js-line-number js-blob-rnum" data-line-number="109"></td>
          <td id="file-mouse-lua-LC109" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">=</span> <span class="pl-c1">stat</span>(<span class="pl-c1">34</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L110" class="blob-num js-line-number js-blob-rnum" data-line-number="110"></td>
          <td id="file-mouse-lua-LC110" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">mouseover</span> <span class="pl-k">=</span> <span class="pl-c1">mget</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span><span class="pl-k">/</span><span class="pl-c1">8</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span><span class="pl-k">/</span><span class="pl-c1">8</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L111" class="blob-num js-line-number js-blob-rnum" data-line-number="111"></td>
          <td id="file-mouse-lua-LC111" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">draggable</span> <span class="pl-k">=</span> <span class="pl-c1">fget</span>(<span class="pl-c1">self</span>.<span class="pl-e">mouseover</span>,<span class="pl-c1">1</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L112" class="blob-num js-line-number js-blob-rnum" data-line-number="112"></td>
          <td id="file-mouse-lua-LC112" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L113" class="blob-num js-line-number js-blob-rnum" data-line-number="113"></td>
          <td id="file-mouse-lua-LC113" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">70</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L114" class="blob-num js-line-number js-blob-rnum" data-line-number="114"></td>
          <td id="file-mouse-lua-LC114" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L115" class="blob-num js-line-number js-blob-rnum" data-line-number="115"></td>
          <td id="file-mouse-lua-LC115" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">fget</span>(<span class="pl-c1">self</span>.<span class="pl-e">mouseover</span>,<span class="pl-c1">2</span>) <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L116" class="blob-num js-line-number js-blob-rnum" data-line-number="116"></td>
          <td id="file-mouse-lua-LC116" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">71</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L117" class="blob-num js-line-number js-blob-rnum" data-line-number="117"></td>
          <td id="file-mouse-lua-LC117" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L118" class="blob-num js-line-number js-blob-rnum" data-line-number="118"></td>
          <td id="file-mouse-lua-LC118" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L119" class="blob-num js-line-number js-blob-rnum" data-line-number="119"></td>
          <td id="file-mouse-lua-LC119" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">==</span> <span class="pl-c1">1</span> <span class="pl-k">and</span> <span class="pl-c1">fget</span>(<span class="pl-c1">self</span>.<span class="pl-e">mouseover</span>,<span class="pl-c1">2</span>) <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L120" class="blob-num js-line-number js-blob-rnum" data-line-number="120"></td>
          <td id="file-mouse-lua-LC120" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">last_click_x</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">mapx</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L121" class="blob-num js-line-number js-blob-rnum" data-line-number="121"></td>
          <td id="file-mouse-lua-LC121" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">last_click_y</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">mapy</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L122" class="blob-num js-line-number js-blob-rnum" data-line-number="122"></td>
          <td id="file-mouse-lua-LC122" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">mset</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span><span class="pl-k">/</span><span class="pl-c1">8</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span><span class="pl-k">/</span><span class="pl-c1">8</span>, <span class="pl-c1">0</span>) <span class="pl-c"><span class="pl-c">--</span> hardcoded tile for now</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L123" class="blob-num js-line-number js-blob-rnum" data-line-number="123"></td>
          <td id="file-mouse-lua-LC123" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L124" class="blob-num js-line-number js-blob-rnum" data-line-number="124"></td>
          <td id="file-mouse-lua-LC124" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L125" class="blob-num js-line-number js-blob-rnum" data-line-number="125"></td>
          <td id="file-mouse-lua-LC125" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L126" class="blob-num js-line-number js-blob-rnum" data-line-number="126"></td>
          <td id="file-mouse-lua-LC126" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">pointer</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L127" class="blob-num js-line-number js-blob-rnum" data-line-number="127"></td>
          <td id="file-mouse-lua-LC127" class="blob-code blob-code-inner js-file-line">    <span class="pl-c"><span class="pl-c">--</span> get mouse position (pico-8 devkit mode)</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L128" class="blob-num js-line-number js-blob-rnum" data-line-number="128"></td>
          <td id="file-mouse-lua-LC128" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">posx</span> <span class="pl-k">=</span> <span class="pl-c1">stat</span>(<span class="pl-c1">32</span>) <span class="pl-k">+</span> <span class="pl-smi">cam</span>.<span class="pl-e">x</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L129" class="blob-num js-line-number js-blob-rnum" data-line-number="129"></td>
          <td id="file-mouse-lua-LC129" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">posy</span> <span class="pl-k">=</span> <span class="pl-c1">stat</span>(<span class="pl-c1">33</span>) <span class="pl-k">+</span> <span class="pl-smi">cam</span>.<span class="pl-e">y</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L130" class="blob-num js-line-number js-blob-rnum" data-line-number="130"></td>
          <td id="file-mouse-lua-LC130" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">=</span> <span class="pl-c1">stat</span>(<span class="pl-c1">34</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L131" class="blob-num js-line-number js-blob-rnum" data-line-number="131"></td>
          <td id="file-mouse-lua-LC131" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">mouseover</span> <span class="pl-k">=</span> <span class="pl-c1">mget</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span><span class="pl-k">/</span><span class="pl-c1">8</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span><span class="pl-k">/</span><span class="pl-c1">8</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L132" class="blob-num js-line-number js-blob-rnum" data-line-number="132"></td>
          <td id="file-mouse-lua-LC132" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>.<span class="pl-e">draggable</span> <span class="pl-k">=</span> <span class="pl-c1">fget</span>(<span class="pl-c1">self</span>.<span class="pl-e">mouseover</span>,<span class="pl-c1">1</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L133" class="blob-num js-line-number js-blob-rnum" data-line-number="133"></td>
          <td id="file-mouse-lua-LC133" class="blob-code blob-code-inner js-file-line">    </td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L134" class="blob-num js-line-number js-blob-rnum" data-line-number="134"></td>
          <td id="file-mouse-lua-LC134" class="blob-code blob-code-inner js-file-line">    <span class="pl-c"><span class="pl-c">--</span> Action to grab sprite from map</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L135" class="blob-num js-line-number js-blob-rnum" data-line-number="135"></td>
          <td id="file-mouse-lua-LC135" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">busy_hand</span> <span class="pl-k">==</span> <span class="pl-c1">false</span> <span class="pl-k">and</span> (<span class="pl-c1">self</span>.<span class="pl-e">draggable</span> <span class="pl-k">or</span> <span class="pl-c1">self</span>.<span class="pl-e">grabbed_item</span> <span class="pl-k">!=</span> <span class="pl-c1">0</span>) <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L136" class="blob-num js-line-number js-blob-rnum" data-line-number="136"></td>
          <td id="file-mouse-lua-LC136" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">68</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L137" class="blob-num js-line-number js-blob-rnum" data-line-number="137"></td>
          <td id="file-mouse-lua-LC137" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite_pressed</span> <span class="pl-k">=</span> <span class="pl-c1">69</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L138" class="blob-num js-line-number js-blob-rnum" data-line-number="138"></td>
          <td id="file-mouse-lua-LC138" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">==</span> <span class="pl-c1">1</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L139" class="blob-num js-line-number js-blob-rnum" data-line-number="139"></td>
          <td id="file-mouse-lua-LC139" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">sfx</span>(<span class="pl-c1">0</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L140" class="blob-num js-line-number js-blob-rnum" data-line-number="140"></td>
          <td id="file-mouse-lua-LC140" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">sprite_pressed</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L141" class="blob-num js-line-number js-blob-rnum" data-line-number="141"></td>
          <td id="file-mouse-lua-LC141" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">self</span>:<span class="pl-c1">grab_item</span>(<span class="pl-c1">self</span>.<span class="pl-e">mouseover</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L142" class="blob-num js-line-number js-blob-rnum" data-line-number="142"></td>
          <td id="file-mouse-lua-LC142" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">self</span>:<span class="pl-c1">remove_from_map</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span><span class="pl-k">/</span><span class="pl-c1">8</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span><span class="pl-k">/</span><span class="pl-c1">8</span>, <span class="pl-c1">self</span>.<span class="pl-e">grabbed_item</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L143" class="blob-num js-line-number js-blob-rnum" data-line-number="143"></td>
          <td id="file-mouse-lua-LC143" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L144" class="blob-num js-line-number js-blob-rnum" data-line-number="144"></td>
          <td id="file-mouse-lua-LC144" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L145" class="blob-num js-line-number js-blob-rnum" data-line-number="145"></td>
          <td id="file-mouse-lua-LC145" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">elseif</span> <span class="pl-c1">self</span>.<span class="pl-e">busy_hand</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L146" class="blob-num js-line-number js-blob-rnum" data-line-number="146"></td>
          <td id="file-mouse-lua-LC146" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">69</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L147" class="blob-num js-line-number js-blob-rnum" data-line-number="147"></td>
          <td id="file-mouse-lua-LC147" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">==</span> <span class="pl-c1">1</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L148" class="blob-num js-line-number js-blob-rnum" data-line-number="148"></td>
          <td id="file-mouse-lua-LC148" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">sprite_pressed</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L149" class="blob-num js-line-number js-blob-rnum" data-line-number="149"></td>
          <td id="file-mouse-lua-LC149" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">self</span>.<span class="pl-e">busy_hand</span> <span class="pl-k">=</span> <span class="pl-c1">true</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L150" class="blob-num js-line-number js-blob-rnum" data-line-number="150"></td>
          <td id="file-mouse-lua-LC150" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">else</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L151" class="blob-num js-line-number js-blob-rnum" data-line-number="151"></td>
          <td id="file-mouse-lua-LC151" class="blob-code blob-code-inner js-file-line">            <span class="pl-c"><span class="pl-c">--</span> drop item on map</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L152" class="blob-num js-line-number js-blob-rnum" data-line-number="152"></td>
          <td id="file-mouse-lua-LC152" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">sfx</span>(<span class="pl-c1">2</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L153" class="blob-num js-line-number js-blob-rnum" data-line-number="153"></td>
          <td id="file-mouse-lua-LC153" class="blob-code blob-code-inner js-file-line">            <span class="pl-k">if</span> <span class="pl-c1">mget</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span><span class="pl-k">/</span><span class="pl-c1">8</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span><span class="pl-k">/</span><span class="pl-c1">8</span>) <span class="pl-k">==</span> <span class="pl-c1">0</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L154" class="blob-num js-line-number js-blob-rnum" data-line-number="154"></td>
          <td id="file-mouse-lua-LC154" class="blob-code blob-code-inner js-file-line">                <span class="pl-c1">mset</span>(<span class="pl-c1">self</span>.<span class="pl-e">posx</span><span class="pl-k">/</span><span class="pl-c1">8</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span><span class="pl-k">/</span><span class="pl-c1">8</span>, <span class="pl-c1">self</span>.<span class="pl-e">grabbed_item</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L155" class="blob-num js-line-number js-blob-rnum" data-line-number="155"></td>
          <td id="file-mouse-lua-LC155" class="blob-code blob-code-inner js-file-line">                <span class="pl-c1">self</span>.<span class="pl-e">grabbed_item</span> <span class="pl-k">=</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L156" class="blob-num js-line-number js-blob-rnum" data-line-number="156"></td>
          <td id="file-mouse-lua-LC156" class="blob-code blob-code-inner js-file-line">                <span class="pl-c1">self</span>.<span class="pl-e">busy_hand</span> <span class="pl-k">=</span> <span class="pl-c1">false</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L157" class="blob-num js-line-number js-blob-rnum" data-line-number="157"></td>
          <td id="file-mouse-lua-LC157" class="blob-code blob-code-inner js-file-line">            <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L158" class="blob-num js-line-number js-blob-rnum" data-line-number="158"></td>
          <td id="file-mouse-lua-LC158" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">end</span>    </td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L159" class="blob-num js-line-number js-blob-rnum" data-line-number="159"></td>
          <td id="file-mouse-lua-LC159" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">else</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L160" class="blob-num js-line-number js-blob-rnum" data-line-number="160"></td>
          <td id="file-mouse-lua-LC160" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">66</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L161" class="blob-num js-line-number js-blob-rnum" data-line-number="161"></td>
          <td id="file-mouse-lua-LC161" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-e">sprite_pressed</span> <span class="pl-k">=</span> <span class="pl-c1">67</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L162" class="blob-num js-line-number js-blob-rnum" data-line-number="162"></td>
          <td id="file-mouse-lua-LC162" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">btnpressed</span> <span class="pl-k">==</span> <span class="pl-c1">1</span> <span class="pl-k">or</span> <span class="pl-c1">self</span>.<span class="pl-e">busy_hand</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L163" class="blob-num js-line-number js-blob-rnum" data-line-number="163"></td>
          <td id="file-mouse-lua-LC163" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">self</span>.<span class="pl-e">sprite</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>.<span class="pl-e">sprite_pressed</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L164" class="blob-num js-line-number js-blob-rnum" data-line-number="164"></td>
          <td id="file-mouse-lua-LC164" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L165" class="blob-num js-line-number js-blob-rnum" data-line-number="165"></td>
          <td id="file-mouse-lua-LC165" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L166" class="blob-num js-line-number js-blob-rnum" data-line-number="166"></td>
          <td id="file-mouse-lua-LC166" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L167" class="blob-num js-line-number js-blob-rnum" data-line-number="167"></td>
          <td id="file-mouse-lua-LC167" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L168" class="blob-num js-line-number js-blob-rnum" data-line-number="168"></td>
          <td id="file-mouse-lua-LC168" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">pointer_draw</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L169" class="blob-num js-line-number js-blob-rnum" data-line-number="169"></td>
          <td id="file-mouse-lua-LC169" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">busy_hand</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L170" class="blob-num js-line-number js-blob-rnum" data-line-number="170"></td>
          <td id="file-mouse-lua-LC170" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">spr</span>(<span class="pl-c1">self</span>.<span class="pl-e">grabbed_item</span>, <span class="pl-c1">self</span>.<span class="pl-e">mapx</span>, <span class="pl-c1">self</span>.<span class="pl-e">mapy</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L171" class="blob-num js-line-number js-blob-rnum" data-line-number="171"></td>
          <td id="file-mouse-lua-LC171" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L172" class="blob-num js-line-number js-blob-rnum" data-line-number="172"></td>
          <td id="file-mouse-lua-LC172" class="blob-code blob-code-inner js-file-line">    <span class="pl-c"><span class="pl-c">--</span> Free cursor when no action is</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L173" class="blob-num js-line-number js-blob-rnum" data-line-number="173"></td>
          <td id="file-mouse-lua-LC173" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">current_mode</span> <span class="pl-k">==</span> <span class="pl-c1">self</span>.<span class="pl-e">modes</span>.<span class="pl-e">pointer</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L174" class="blob-num js-line-number js-blob-rnum" data-line-number="174"></td>
          <td id="file-mouse-lua-LC174" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">spr</span>(<span class="pl-c1">self</span>.<span class="pl-e">sprite</span>, <span class="pl-c1">self</span>.<span class="pl-e">posx</span>, <span class="pl-c1">self</span>.<span class="pl-e">posy</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L175" class="blob-num js-line-number js-blob-rnum" data-line-number="175"></td>
          <td id="file-mouse-lua-LC175" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L176" class="blob-num js-line-number js-blob-rnum" data-line-number="176"></td>
          <td id="file-mouse-lua-LC176" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L177" class="blob-num js-line-number js-blob-rnum" data-line-number="177"></td>
          <td id="file-mouse-lua-LC177" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L178" class="blob-num js-line-number js-blob-rnum" data-line-number="178"></td>
          <td id="file-mouse-lua-LC178" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">rubber_draw</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L179" class="blob-num js-line-number js-blob-rnum" data-line-number="179"></td>
          <td id="file-mouse-lua-LC179" class="blob-code blob-code-inner js-file-line">     <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">current_mode</span> <span class="pl-k">==</span> <span class="pl-c1">self</span>.<span class="pl-e">modes</span>.<span class="pl-e">rubber</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L180" class="blob-num js-line-number js-blob-rnum" data-line-number="180"></td>
          <td id="file-mouse-lua-LC180" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">spr</span>(<span class="pl-c1">self</span>.<span class="pl-e">sprite</span>, <span class="pl-c1">self</span>.<span class="pl-e">mapx</span>, <span class="pl-c1">self</span>.<span class="pl-e">mapy</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L181" class="blob-num js-line-number js-blob-rnum" data-line-number="181"></td>
          <td id="file-mouse-lua-LC181" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L182" class="blob-num js-line-number js-blob-rnum" data-line-number="182"></td>
          <td id="file-mouse-lua-LC182" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L183" class="blob-num js-line-number js-blob-rnum" data-line-number="183"></td>
          <td id="file-mouse-lua-LC183" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L184" class="blob-num js-line-number js-blob-rnum" data-line-number="184"></td>
          <td id="file-mouse-lua-LC184" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">brush_draw</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L185" class="blob-num js-line-number js-blob-rnum" data-line-number="185"></td>
          <td id="file-mouse-lua-LC185" class="blob-code blob-code-inner js-file-line">     <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">current_mode</span> <span class="pl-k">==</span> <span class="pl-c1">self</span>.<span class="pl-e">modes</span>.<span class="pl-e">ground</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L186" class="blob-num js-line-number js-blob-rnum" data-line-number="186"></td>
          <td id="file-mouse-lua-LC186" class="blob-code blob-code-inner js-file-line">        <span class="pl-c"><span class="pl-c">--</span> Draw tile cursor</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L187" class="blob-num js-line-number js-blob-rnum" data-line-number="187"></td>
          <td id="file-mouse-lua-LC187" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">spr</span>(<span class="pl-c1">10</span>, <span class="pl-c1">self</span>.<span class="pl-e">mapx</span>, <span class="pl-c1">self</span>.<span class="pl-e">mapy</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L188" class="blob-num js-line-number js-blob-rnum" data-line-number="188"></td>
          <td id="file-mouse-lua-LC188" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L189" class="blob-num js-line-number js-blob-rnum" data-line-number="189"></td>
          <td id="file-mouse-lua-LC189" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L190" class="blob-num js-line-number js-blob-rnum" data-line-number="190"></td>
          <td id="file-mouse-lua-LC190" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L191" class="blob-num js-line-number js-blob-rnum" data-line-number="191"></td>
          <td id="file-mouse-lua-LC191" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">update</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L192" class="blob-num js-line-number js-blob-rnum" data-line-number="192"></td>
          <td id="file-mouse-lua-LC192" class="blob-code blob-code-inner js-file-line">    <span class="pl-c1">self</span>:<span class="pl-c1">update_map_position</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L193" class="blob-num js-line-number js-blob-rnum" data-line-number="193"></td>
          <td id="file-mouse-lua-LC193" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">current_mode</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L194" class="blob-num js-line-number js-blob-rnum" data-line-number="194"></td>
          <td id="file-mouse-lua-LC194" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-c1">current_mode</span>(<span class="pl-c1">self</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L195" class="blob-num js-line-number js-blob-rnum" data-line-number="195"></td>
          <td id="file-mouse-lua-LC195" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L196" class="blob-num js-line-number js-blob-rnum" data-line-number="196"></td>
          <td id="file-mouse-lua-LC196" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L197" class="blob-num js-line-number js-blob-rnum" data-line-number="197"></td>
          <td id="file-mouse-lua-LC197" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L198" class="blob-num js-line-number js-blob-rnum" data-line-number="198"></td>
          <td id="file-mouse-lua-LC198" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Mouse</span>:<span class="pl-en">draw</span>()</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L199" class="blob-num js-line-number js-blob-rnum" data-line-number="199"></td>
          <td id="file-mouse-lua-LC199" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">current_draw</span> <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L200" class="blob-num js-line-number js-blob-rnum" data-line-number="200"></td>
          <td id="file-mouse-lua-LC200" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">self</span>.<span class="pl-c1">current_draw</span>(<span class="pl-c1">self</span>)</td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L201" class="blob-num js-line-number js-blob-rnum" data-line-number="201"></td>
          <td id="file-mouse-lua-LC201" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-mouse-lua-L202" class="blob-num js-line-number js-blob-rnum" data-line-number="202"></td>
          <td id="file-mouse-lua-LC202" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
  </tbody></table>
</div>


    </div>

  </div>
</div>

      </div>
      <div class="gist-meta">
        <a href="https://gist.github.com/microloop/ea301c7145afbfdc0ff90cd0ce437403/raw/645a9a85f29b130bbe7e634006a5af2e3d198996/mouse.lua" style="float:right" class="Link--inTextBlock">view raw</a>
        <a href="https://gist.github.com/microloop/ea301c7145afbfdc0ff90cd0ce437403#file-mouse-lua" class="Link--inTextBlock">
          mouse.lua
        </a>
        hosted with &#10084; by <a class="Link--inTextBlock" href="https://github.com">GitHub</a>
      </div>
    </div>
</div>
</div><p>Apologies for the long source code of the <em>mouse.lua</em>, but it is actually doing all the job:</p><ul><li><p>Switching logic between the different functions (brush, rubber and pointer)</p></li><li><p>Drawing tiles at the map</p></li><li><p>Erasing tiles at the map</p></li><li><p>TO-DO - Animations for the erase or draw functions. Feel free to implement your own animation system here, if you went through the code you probably saw that part.</p></li></ul><h3>Camera Handler Implementation - camera.lua</h3><div class="github-gist" data-attrs="{&quot;innerHTML&quot;:&quot;<div id=\&quot;gist143627022\&quot; class=\&quot;gist\&quot;>\n    <div class=\&quot;gist-file\&quot; translate=\&quot;no\&quot; data-color-mode=\&quot;light\&quot; data-light-theme=\&quot;light\&quot;>\n      <div class=\&quot;gist-data\&quot;>\n        <div class=\&quot;js-gist-file-update-container js-task-list-container\&quot;>\n  <div id=\&quot;file-camera-lua\&quot; class=\&quot;file my-2\&quot;>\n    \n    <div itemprop=\&quot;text\&quot;\n      class=\&quot;Box-body p-0 blob-wrapper data type-lua  \&quot;\n      style=\&quot;overflow: auto\&quot; tabindex=\&quot;0\&quot; role=\&quot;region\&quot;\n      aria-label=\&quot;camera.lua content, created by microloop on 02:21PM today.\&quot;\n    >\n\n        \n<div class=\&quot;js-check-hidden-unicode js-blob-code-container blob-code-content\&quot;>\n\n  <template class=\&quot;js-file-alert-template\&quot;>\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash flash-warn flash-full d-flex flex-items-center\&quot;>\n  <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.co/hiddenchars\&quot; target=\&quot;_blank\&quot;>Learn more about bidirectional Unicode characters</a>\n    </span>\n\n\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash-action\&quot;>        <a href=\&quot;{{ revealButtonHref }}\&quot; data-view-component=\&quot;true\&quot; class=\&quot;btn-sm btn\&quot;>    Show hidden characters\n</a>\n</div>\n</div></template>\n<template class=\&quot;js-line-alert-template\&quot;>\n  <span aria-label=\&quot;This line has hidden Unicode characters\&quot; data-view-component=\&quot;true\&quot; class=\&quot;line-alert tooltipped tooltipped-e\&quot;>\n    <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n</span></template>\n\n  <table data-hpc class=\&quot;highlight tab-size js-file-line-container\&quot; data-tab-size=\&quot;4\&quot; data-paste-markdown-skip data-tagsearch-path=\&quot;camera.lua\&quot;>\n        <tr>\n          <td id=\&quot;file-camera-lua-L1\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;1\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC1\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>Cam</span> <span class=\&quot;pl-k\&quot;>=</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L2\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;2\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC2\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L3\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;3\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC3\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Cam</span>:<span class=\&quot;pl-en\&quot;>new</span>(<span class=\&quot;pl-smi\&quot;>o</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L4\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;4\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC4\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span> <span class=\&quot;pl-k\&quot;>or</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L5\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;5\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC5\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>x</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>x</span>  <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L6\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;6\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC6\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>y</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>y</span>  <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-c1\&quot;>0</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L7\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;7\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC7\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>mode</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>mode</span> <span class=\&quot;pl-k\&quot;>or</span> <span class=\&quot;pl-s\&quot;><span class=\&quot;pl-pds\&quot;>&amp;quot;</span>static<span class=\&quot;pl-pds\&quot;>&amp;quot; </span></span><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> static, follow_player, pan_to</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L8\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;8\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC8\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>move_x</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>2</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L9\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;9\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC9\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-smi\&quot;>o</span>.<span class=\&quot;pl-e\&quot;>move_y</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>2</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L10\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;10\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC10\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-c1\&quot;>setmetatable</span>(<span class=\&quot;pl-smi\&quot;>o</span>, {<span class=\&quot;pl-smi\&quot;>__index</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>self</span>})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L11\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;11\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC11\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>  <span class=\&quot;pl-k\&quot;>return</span> <span class=\&quot;pl-smi\&quot;>o</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L12\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;12\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC12\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L13\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;13\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC13\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L14\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;14\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC14\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Cam</span>:<span class=\&quot;pl-en\&quot;>update</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L15\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;15\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC15\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mode</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-s\&quot;><span class=\&quot;pl-pds\&quot;>&amp;quot;</span>static<span class=\&quot;pl-pds\&quot;>&amp;quot; </span></span><span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L16\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;16\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC16\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>btn</span>(<span class=\&quot;pl-c1\&quot;>1</span>) <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L17\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;17\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC17\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>x</span> <span class=\&quot;pl-k\&quot;>+=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>move_x</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L18\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;18\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC18\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L19\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;19\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC19\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>btn</span>(<span class=\&quot;pl-c1\&quot;>0</span>) <span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L20\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;20\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC20\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>            <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>x</span> <span class=\&quot;pl-k\&quot;>-=</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>move_x</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L21\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;21\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC21\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L22\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;22\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC22\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L23\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;23\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC23\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L24\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;24\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC24\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L25\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;25\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC25\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>Cam</span>:<span class=\&quot;pl-en\&quot;>draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L26\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;26\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC26\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>if</span> <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>mode</span> <span class=\&quot;pl-k\&quot;>==</span> <span class=\&quot;pl-s\&quot;><span class=\&quot;pl-pds\&quot;>&amp;quot;</span>static<span class=\&quot;pl-pds\&quot;>&amp;quot; </span></span><span class=\&quot;pl-k\&quot;>then</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L27\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;27\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC27\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Draw camera rectangle</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L28\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;28\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC28\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-c1\&quot;>camera</span>(<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>x</span>,<span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>y</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L29\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;29\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC29\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>right_arrow</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>spr</span>(<span class=\&quot;pl-c1\&quot;>104</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>x</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>SCREEN_WIDTH</span> <span class=\&quot;pl-k\&quot;>-</span><span class=\&quot;pl-c1\&quot;>7</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>y</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>SCREEN_HEIGHT</span> <span class=\&quot;pl-k\&quot;>/</span> <span class=\&quot;pl-c1\&quot;>2</span>,<span class=\&quot;pl-c1\&quot;>1</span>,<span class=\&quot;pl-c1\&quot;>1</span>,<span class=\&quot;pl-c1\&quot;>false</span>,<span class=\&quot;pl-c1\&quot;>false</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L30\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;30\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC30\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>        <span class=\&quot;pl-k\&quot;>local</span> <span class=\&quot;pl-smi\&quot;>left_arrow</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>spr</span>(<span class=\&quot;pl-c1\&quot;>104</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>x</span>, <span class=\&quot;pl-c1\&quot;>self</span>.<span class=\&quot;pl-e\&quot;>y</span> <span class=\&quot;pl-k\&quot;>+</span> <span class=\&quot;pl-smi\&quot;>SCREEN_HEIGHT</span> <span class=\&quot;pl-k\&quot;>/</span> <span class=\&quot;pl-c1\&quot;>2</span>,<span class=\&quot;pl-c1\&quot;>1</span>,<span class=\&quot;pl-c1\&quot;>1</span>,<span class=\&quot;pl-c1\&quot;>true</span>,<span class=\&quot;pl-c1\&quot;>false</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L31\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;31\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC31\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>    <span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-camera-lua-L32\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;32\&quot;></td>\n          <td id=\&quot;file-camera-lua-LC32\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n  </table>\n</div>\n\n\n    </div>\n\n  </div>\n</div>\n\n      </div>\n      <div class=\&quot;gist-meta\&quot;>\n        <a href=\&quot;https://gist.github.com/microloop/b26276e7f02be208d9f71819c24e3bad/raw/6deac2e9739d9e63c6b846bc9d57c7c0fc0e9632/camera.lua\&quot; style=\&quot;float:right\&quot; class=\&quot;Link--inTextBlock\&quot;>view raw</a>\n        <a href=\&quot;https://gist.github.com/microloop/b26276e7f02be208d9f71819c24e3bad#file-camera-lua\&quot; class=\&quot;Link--inTextBlock\&quot;>\n          camera.lua\n        </a>\n        hosted with &amp;#10084; by <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.com\&quot;>GitHub</a>\n      </div>\n    </div>\n</div>\n&quot;,&quot;stylesheet&quot;:&quot;https://github.githubassets.com/assets/gist-embed-0ac919313390.css&quot;}" data-component-name="GitgistToDOM"><link rel="stylesheet" href="https://github.githubassets.com/assets/gist-embed-0ac919313390.css"><div id="gist143627022" class="gist">
    <div class="gist-file" data-color-mode="light" data-light-theme="light">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container">
  <div id="file-camera-lua" class="file my-2">
    
    <div itemprop="text" class="Box-body p-0 blob-wrapper data type-lua  " style="overflow:auto">

        
<div class="js-check-hidden-unicode js-blob-code-container blob-code-content">

  
  <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center">
  
    

    <span>
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a>
    </span>


  <div data-view-component="true" class="flash-action">        <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn">    Show hidden characters
</a>
</div>
</div>

  <span data-view-component="true" class="line-alert tooltipped tooltipped-e">
    
    

</span>

  <table data-hpc="" class="highlight tab-size js-file-line-container" data-tab-size="4" data-paste-markdown-skip="" data-tagsearch-path="camera.lua">
        <tbody><tr>
          <td id="file-camera-lua-L1" class="blob-num js-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="file-camera-lua-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">Cam</span> <span class="pl-k">=</span> {}</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L2" class="blob-num js-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="file-camera-lua-LC2" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L3" class="blob-num js-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="file-camera-lua-LC3" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Cam</span>:<span class="pl-en">new</span>(<span class="pl-smi">o</span>)</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L4" class="blob-num js-line-number js-blob-rnum" data-line-number="4"></td>
          <td id="file-camera-lua-LC4" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span> <span class="pl-k">=</span> <span class="pl-smi">o</span> <span class="pl-k">or</span> {}</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L5" class="blob-num js-line-number js-blob-rnum" data-line-number="5"></td>
          <td id="file-camera-lua-LC5" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">x</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">x</span>  <span class="pl-k">or</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L6" class="blob-num js-line-number js-blob-rnum" data-line-number="6"></td>
          <td id="file-camera-lua-LC6" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">y</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">y</span>  <span class="pl-k">or</span> <span class="pl-c1">0</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L7" class="blob-num js-line-number js-blob-rnum" data-line-number="7"></td>
          <td id="file-camera-lua-LC7" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">mode</span> <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-e">mode</span> <span class="pl-k">or</span> <span class="pl-s"><span class="pl-pds">"</span>static<span class="pl-pds">" </span></span><span class="pl-c"><span class="pl-c">--</span> static, follow_player, pan_to</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L8" class="blob-num js-line-number js-blob-rnum" data-line-number="8"></td>
          <td id="file-camera-lua-LC8" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">move_x</span> <span class="pl-k">=</span> <span class="pl-c1">2</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L9" class="blob-num js-line-number js-blob-rnum" data-line-number="9"></td>
          <td id="file-camera-lua-LC9" class="blob-code blob-code-inner js-file-line">  <span class="pl-smi">o</span>.<span class="pl-e">move_y</span> <span class="pl-k">=</span> <span class="pl-c1">2</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L10" class="blob-num js-line-number js-blob-rnum" data-line-number="10"></td>
          <td id="file-camera-lua-LC10" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">setmetatable</span>(<span class="pl-smi">o</span>, {<span class="pl-smi">__index</span> <span class="pl-k">=</span> <span class="pl-c1">self</span>})</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L11" class="blob-num js-line-number js-blob-rnum" data-line-number="11"></td>
          <td id="file-camera-lua-LC11" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">return</span> <span class="pl-smi">o</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L12" class="blob-num js-line-number js-blob-rnum" data-line-number="12"></td>
          <td id="file-camera-lua-LC12" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L13" class="blob-num js-line-number js-blob-rnum" data-line-number="13"></td>
          <td id="file-camera-lua-LC13" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L14" class="blob-num js-line-number js-blob-rnum" data-line-number="14"></td>
          <td id="file-camera-lua-LC14" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Cam</span>:<span class="pl-en">update</span>()</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L15" class="blob-num js-line-number js-blob-rnum" data-line-number="15"></td>
          <td id="file-camera-lua-LC15" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">mode</span> <span class="pl-k">==</span> <span class="pl-s"><span class="pl-pds">"</span>static<span class="pl-pds">" </span></span><span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L16" class="blob-num js-line-number js-blob-rnum" data-line-number="16"></td>
          <td id="file-camera-lua-LC16" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">if</span> <span class="pl-c1">btn</span>(<span class="pl-c1">1</span>) <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L17" class="blob-num js-line-number js-blob-rnum" data-line-number="17"></td>
          <td id="file-camera-lua-LC17" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">self</span>.<span class="pl-e">x</span> <span class="pl-k">+=</span> <span class="pl-c1">self</span>.<span class="pl-e">move_x</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L18" class="blob-num js-line-number js-blob-rnum" data-line-number="18"></td>
          <td id="file-camera-lua-LC18" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L19" class="blob-num js-line-number js-blob-rnum" data-line-number="19"></td>
          <td id="file-camera-lua-LC19" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">if</span> <span class="pl-c1">btn</span>(<span class="pl-c1">0</span>) <span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L20" class="blob-num js-line-number js-blob-rnum" data-line-number="20"></td>
          <td id="file-camera-lua-LC20" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">self</span>.<span class="pl-e">x</span> <span class="pl-k">-=</span> <span class="pl-c1">self</span>.<span class="pl-e">move_x</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L21" class="blob-num js-line-number js-blob-rnum" data-line-number="21"></td>
          <td id="file-camera-lua-LC21" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L22" class="blob-num js-line-number js-blob-rnum" data-line-number="22"></td>
          <td id="file-camera-lua-LC22" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L23" class="blob-num js-line-number js-blob-rnum" data-line-number="23"></td>
          <td id="file-camera-lua-LC23" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L24" class="blob-num js-line-number js-blob-rnum" data-line-number="24"></td>
          <td id="file-camera-lua-LC24" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L25" class="blob-num js-line-number js-blob-rnum" data-line-number="25"></td>
          <td id="file-camera-lua-LC25" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">Cam</span>:<span class="pl-en">draw</span>()</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L26" class="blob-num js-line-number js-blob-rnum" data-line-number="26"></td>
          <td id="file-camera-lua-LC26" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-c1">self</span>.<span class="pl-e">mode</span> <span class="pl-k">==</span> <span class="pl-s"><span class="pl-pds">"</span>static<span class="pl-pds">" </span></span><span class="pl-k">then</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L27" class="blob-num js-line-number js-blob-rnum" data-line-number="27"></td>
          <td id="file-camera-lua-LC27" class="blob-code blob-code-inner js-file-line">        <span class="pl-c"><span class="pl-c">--</span> Draw camera rectangle</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L28" class="blob-num js-line-number js-blob-rnum" data-line-number="28"></td>
          <td id="file-camera-lua-LC28" class="blob-code blob-code-inner js-file-line">        <span class="pl-c1">camera</span>(<span class="pl-c1">self</span>.<span class="pl-e">x</span>,<span class="pl-c1">self</span>.<span class="pl-e">y</span>)</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L29" class="blob-num js-line-number js-blob-rnum" data-line-number="29"></td>
          <td id="file-camera-lua-LC29" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">local</span> <span class="pl-smi">right_arrow</span> <span class="pl-k">=</span> <span class="pl-c1">spr</span>(<span class="pl-c1">104</span>, <span class="pl-c1">self</span>.<span class="pl-e">x</span> <span class="pl-k">+</span> <span class="pl-smi">SCREEN_WIDTH</span> <span class="pl-k">-</span><span class="pl-c1">7</span>, <span class="pl-c1">self</span>.<span class="pl-e">y</span> <span class="pl-k">+</span> <span class="pl-smi">SCREEN_HEIGHT</span> <span class="pl-k">/</span> <span class="pl-c1">2</span>,<span class="pl-c1">1</span>,<span class="pl-c1">1</span>,<span class="pl-c1">false</span>,<span class="pl-c1">false</span>)</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L30" class="blob-num js-line-number js-blob-rnum" data-line-number="30"></td>
          <td id="file-camera-lua-LC30" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">local</span> <span class="pl-smi">left_arrow</span> <span class="pl-k">=</span> <span class="pl-c1">spr</span>(<span class="pl-c1">104</span>, <span class="pl-c1">self</span>.<span class="pl-e">x</span>, <span class="pl-c1">self</span>.<span class="pl-e">y</span> <span class="pl-k">+</span> <span class="pl-smi">SCREEN_HEIGHT</span> <span class="pl-k">/</span> <span class="pl-c1">2</span>,<span class="pl-c1">1</span>,<span class="pl-c1">1</span>,<span class="pl-c1">true</span>,<span class="pl-c1">false</span>)</td>
        </tr>
        <tr>
          <td id="file-camera-lua-L31" class="blob-num js-line-number js-blob-rnum" data-line-number="31"></td>
          <td id="file-camera-lua-LC31" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-camera-lua-L32" class="blob-num js-line-number js-blob-rnum" data-line-number="32"></td>
          <td id="file-camera-lua-LC32" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
  </tbody></table>
</div>


    </div>

  </div>
</div>

      </div>
      <div class="gist-meta">
        <a href="https://gist.github.com/microloop/b26276e7f02be208d9f71819c24e3bad/raw/6deac2e9739d9e63c6b846bc9d57c7c0fc0e9632/camera.lua" style="float:right" class="Link--inTextBlock">view raw</a>
        <a href="https://gist.github.com/microloop/b26276e7f02be208d9f71819c24e3bad#file-camera-lua" class="Link--inTextBlock">
          camera.lua
        </a>
        hosted with &#10084; by <a class="Link--inTextBlock" href="https://github.com">GitHub</a>
      </div>
    </div>
</div>
</div><h2>Connect all the pieces together</h2><p>So, once again, we created new components to be used at our game <em>mouse.lua</em> and <em>camera.lua </em>now it is time to create the instance of our objects at the <em>main.lua </em>file and make sure everything is working as expected</p><div class="github-gist" data-attrs="{&quot;innerHTML&quot;:&quot;<div id=\&quot;gist143627551\&quot; class=\&quot;gist\&quot;>\n    <div class=\&quot;gist-file\&quot; translate=\&quot;no\&quot; data-color-mode=\&quot;light\&quot; data-light-theme=\&quot;light\&quot;>\n      <div class=\&quot;gist-data\&quot;>\n        <div class=\&quot;js-gist-file-update-container js-task-list-container\&quot;>\n  <div id=\&quot;file-main-lua\&quot; class=\&quot;file my-2\&quot;>\n    \n    <div itemprop=\&quot;text\&quot;\n      class=\&quot;Box-body p-0 blob-wrapper data type-lua  \&quot;\n      style=\&quot;overflow: auto\&quot; tabindex=\&quot;0\&quot; role=\&quot;region\&quot;\n      aria-label=\&quot;main.lua content, created by microloop on 02:48PM today.\&quot;\n    >\n\n        \n<div class=\&quot;js-check-hidden-unicode js-blob-code-container blob-code-content\&quot;>\n\n  <template class=\&quot;js-file-alert-template\&quot;>\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash flash-warn flash-full d-flex flex-items-center\&quot;>\n  <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.co/hiddenchars\&quot; target=\&quot;_blank\&quot;>Learn more about bidirectional Unicode characters</a>\n    </span>\n\n\n  <div data-view-component=\&quot;true\&quot; class=\&quot;flash-action\&quot;>        <a href=\&quot;{{ revealButtonHref }}\&quot; data-view-component=\&quot;true\&quot; class=\&quot;btn-sm btn\&quot;>    Show hidden characters\n</a>\n</div>\n</div></template>\n<template class=\&quot;js-line-alert-template\&quot;>\n  <span aria-label=\&quot;This line has hidden Unicode characters\&quot; data-view-component=\&quot;true\&quot; class=\&quot;line-alert tooltipped tooltipped-e\&quot;>\n    <svg aria-hidden=\&quot;true\&quot; height=\&quot;16\&quot; viewBox=\&quot;0 0 16 16\&quot; version=\&quot;1.1\&quot; width=\&quot;16\&quot; data-view-component=\&quot;true\&quot; class=\&quot;octicon octicon-alert\&quot;>\n    <path d=\&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\&quot;></path>\n</svg>\n</span></template>\n\n  <table data-hpc class=\&quot;highlight tab-size js-file-line-container\&quot; data-tab-size=\&quot;4\&quot; data-paste-markdown-skip data-tagsearch-path=\&quot;main.lua\&quot;>\n        <tr>\n          <td id=\&quot;file-main-lua-L1\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;1\&quot;></td>\n          <td id=\&quot;file-main-lua-LC1\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>_init</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L2\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;2\&quot;></td>\n          <td id=\&quot;file-main-lua-LC2\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Enable mouse support</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L3\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;3\&quot;></td>\n          <td id=\&quot;file-main-lua-LC3\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c1\&quot;>poke</span>(<span class=\&quot;pl-c1\&quot;>0x5f2d</span>,<span class=\&quot;pl-c1\&quot;>1</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L4\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;4\&quot;></td>\n          <td id=\&quot;file-main-lua-LC4\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> GLOBAL VARIABLES</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L5\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;5\&quot;></td>\n          <td id=\&quot;file-main-lua-LC5\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>SCREEN_WIDTH</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>128</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L6\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;6\&quot;></td>\n          <td id=\&quot;file-main-lua-LC6\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>SCREEN_HEIGHT</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>128</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L7\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;7\&quot;></td>\n          <td id=\&quot;file-main-lua-LC7\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>MAP_WIDTH</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>1024</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L8\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;8\&quot;></td>\n          <td id=\&quot;file-main-lua-LC8\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>MAP_HEIGHT</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>256</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L9\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;9\&quot;></td>\n          <td id=\&quot;file-main-lua-LC9\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>TILE_STANDARD_SIZE</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-c1\&quot;>8</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L10\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;10\&quot;></td>\n          <td id=\&quot;file-main-lua-LC10\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Creating the list of icons</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L11\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;11\&quot;></td>\n          <td id=\&quot;file-main-lua-LC11\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>icons</span> <span class=\&quot;pl-k\&quot;>=</span> {}</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L12\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;12\&quot;></td>\n          <td id=\&quot;file-main-lua-LC12\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Initialice our icons that will be part of the toolbar</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L13\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;13\&quot;></td>\n          <td id=\&quot;file-main-lua-LC13\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>pointer</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Icon</span>:<span class=\&quot;pl-c1\&quot;>new</span>({<span class=\&quot;pl-smi\&quot;>name</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-s\&quot;><span class=\&quot;pl-pds\&quot;>&amp;quot;</span>Pointer<span class=\&quot;pl-pds\&quot;>&amp;quot;</span></span>,<span class=\&quot;pl-smi\&quot;>posx</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>106</span>,<span class=\&quot;pl-smi\&quot;>posy</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>0</span>,<span class=\&quot;pl-smi\&quot;>sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>84</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L14\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;14\&quot;></td>\n          <td id=\&quot;file-main-lua-LC14\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>sprite_pressed</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>100</span>,<span class=\&quot;pl-smi\&quot;>active_sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>116</span>,<span class=\&quot;pl-smi\&quot;>type</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-s\&quot;><span class=\&quot;pl-pds\&quot;>&amp;quot;</span>Pointer<span class=\&quot;pl-pds\&quot;>&amp;quot;</span></span>})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L15\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;15\&quot;></td>\n          <td id=\&quot;file-main-lua-LC15\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>ground</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Icon</span>:<span class=\&quot;pl-c1\&quot;>new</span>({<span class=\&quot;pl-smi\&quot;>name</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-s\&quot;><span class=\&quot;pl-pds\&quot;>&amp;quot;</span>Ground<span class=\&quot;pl-pds\&quot;>&amp;quot;</span></span>,<span class=\&quot;pl-smi\&quot;>posx</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>116</span>,<span class=\&quot;pl-smi\&quot;>posy</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>0</span>,<span class=\&quot;pl-smi\&quot;>sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>85</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L16\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;16\&quot;></td>\n          <td id=\&quot;file-main-lua-LC16\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>sprite_pressed</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>101</span>,<span class=\&quot;pl-smi\&quot;>active_sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>117</span>,<span class=\&quot;pl-smi\&quot;>type</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-s\&quot;><span class=\&quot;pl-pds\&quot;>&amp;quot;</span>Ground<span class=\&quot;pl-pds\&quot;>&amp;quot;</span></span>})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L17\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;17\&quot;></td>\n          <td id=\&quot;file-main-lua-LC17\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>rubber</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Icon</span>:<span class=\&quot;pl-c1\&quot;>new</span>({<span class=\&quot;pl-smi\&quot;>name</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-s\&quot;><span class=\&quot;pl-pds\&quot;>&amp;quot;</span>Rubber<span class=\&quot;pl-pds\&quot;>&amp;quot;</span></span>,<span class=\&quot;pl-smi\&quot;>posx</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>106</span>,<span class=\&quot;pl-smi\&quot;>posy</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>0</span>,<span class=\&quot;pl-smi\&quot;>sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>83</span>,</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L18\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;18\&quot;></td>\n          <td id=\&quot;file-main-lua-LC18\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>sprite_pressed</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>99</span>,<span class=\&quot;pl-smi\&quot;>active_sprite</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>115</span>,<span class=\&quot;pl-smi\&quot;>type</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-s\&quot;><span class=\&quot;pl-pds\&quot;>&amp;quot;</span>Rubber<span class=\&quot;pl-pds\&quot;>&amp;quot;</span></span>})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L19\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;19\&quot;></td>\n          <td id=\&quot;file-main-lua-LC19\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Adding icons to the global icons list</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L20\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;20\&quot;></td>\n          <td id=\&quot;file-main-lua-LC20\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c1\&quot;>add</span>(<span class=\&quot;pl-smi\&quot;>icons</span>,<span class=\&quot;pl-smi\&quot;>pointer</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L21\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;21\&quot;></td>\n          <td id=\&quot;file-main-lua-LC21\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c1\&quot;>add</span>(<span class=\&quot;pl-smi\&quot;>icons</span>,<span class=\&quot;pl-smi\&quot;>ground</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L22\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;22\&quot;></td>\n          <td id=\&quot;file-main-lua-LC22\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c1\&quot;>add</span>(<span class=\&quot;pl-smi\&quot;>icons</span>,<span class=\&quot;pl-smi\&quot;>rubber</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L23\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;23\&quot;></td>\n          <td id=\&quot;file-main-lua-LC23\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Create instance of UI, Mouse and Camera handlers</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L24\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;24\&quot;></td>\n          <td id=\&quot;file-main-lua-LC24\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>toolbar</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Toolbar</span>:<span class=\&quot;pl-c1\&quot;>new</span>({<span class=\&quot;pl-smi\&quot;>posx</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-smi\&quot;>SCREEN_WIDTH</span><span class=\&quot;pl-k\&quot;>/</span><span class=\&quot;pl-c1\&quot;>2</span><span class=\&quot;pl-k\&quot;>-</span><span class=\&quot;pl-c1\&quot;>16</span>,<span class=\&quot;pl-smi\&quot;>posy</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>12</span>,<span class=\&quot;pl-smi\&quot;>sizex</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>40</span>,<span class=\&quot;pl-smi\&quot;>sizey</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>15</span>,<span class=\&quot;pl-smi\&quot;>round</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-c1\&quot;>1</span>,<span class=\&quot;pl-smi\&quot;>icons</span><span class=\&quot;pl-k\&quot;>=</span><span class=\&quot;pl-smi\&quot;>icons</span>})</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L25\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;25\&quot;></td>\n          <td id=\&quot;file-main-lua-LC25\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>mouse</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Mouse</span>:<span class=\&quot;pl-c1\&quot;>new</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L26\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;26\&quot;></td>\n          <td id=\&quot;file-main-lua-LC26\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>init</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L27\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;27\&quot;></td>\n          <td id=\&quot;file-main-lua-LC27\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-smi\&quot;>cam</span> <span class=\&quot;pl-k\&quot;>=</span> <span class=\&quot;pl-en\&quot;>Cam</span>:<span class=\&quot;pl-c1\&quot;>new</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L28\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;28\&quot;></td>\n          <td id=\&quot;file-main-lua-LC28\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L29\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;29\&quot;></td>\n          <td id=\&quot;file-main-lua-LC29\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L30\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;30\&quot;></td>\n          <td id=\&quot;file-main-lua-LC30\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>_update60</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L31\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;31\&quot;></td>\n          <td id=\&quot;file-main-lua-LC31\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Future functionality</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L32\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;32\&quot;></td>\n          <td id=\&quot;file-main-lua-LC32\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-en\&quot;>toolbar</span>:<span class=\&quot;pl-c1\&quot;>update</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L33\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;33\&quot;></td>\n          <td id=\&quot;file-main-lua-LC33\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>update</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L34\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;34\&quot;></td>\n          <td id=\&quot;file-main-lua-LC34\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-en\&quot;>cam</span>:<span class=\&quot;pl-c1\&quot;>update</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L35\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;35\&quot;></td>\n          <td id=\&quot;file-main-lua-LC35\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L36\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;36\&quot;></td>\n          <td id=\&quot;file-main-lua-LC36\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;>\n</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L37\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;37\&quot;></td>\n          <td id=\&quot;file-main-lua-LC37\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>function</span> <span class=\&quot;pl-en\&quot;>_draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L38\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;38\&quot;></td>\n          <td id=\&quot;file-main-lua-LC38\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c1\&quot;>cls</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L39\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;39\&quot;></td>\n          <td id=\&quot;file-main-lua-LC39\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c\&quot;><span class=\&quot;pl-c\&quot;>--</span> Draw map</span></td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L40\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;40\&quot;></td>\n          <td id=\&quot;file-main-lua-LC40\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-c1\&quot;>map</span>(<span class=\&quot;pl-c1\&quot;>0</span>, <span class=\&quot;pl-c1\&quot;>0</span>, <span class=\&quot;pl-c1\&quot;>0</span>, <span class=\&quot;pl-c1\&quot;>0</span>, <span class=\&quot;pl-c1\&quot;>128</span>, <span class=\&quot;pl-c1\&quot;>32</span>)</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L41\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;41\&quot;></td>\n          <td id=\&quot;file-main-lua-LC41\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-en\&quot;>cam</span>:<span class=\&quot;pl-c1\&quot;>draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L42\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;42\&quot;></td>\n          <td id=\&quot;file-main-lua-LC42\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-en\&quot;>toolbar</span>:<span class=\&quot;pl-c1\&quot;>draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L43\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;43\&quot;></td>\n          <td id=\&quot;file-main-lua-LC43\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-en\&quot;>mouse</span>:<span class=\&quot;pl-c1\&quot;>draw</span>()</td>\n        </tr>\n        <tr>\n          <td id=\&quot;file-main-lua-L44\&quot; class=\&quot;blob-num js-line-number js-blob-rnum\&quot; data-line-number=\&quot;44\&quot;></td>\n          <td id=\&quot;file-main-lua-LC44\&quot; class=\&quot;blob-code blob-code-inner js-file-line\&quot;><span class=\&quot;pl-k\&quot;>end</span></td>\n        </tr>\n  </table>\n</div>\n\n\n    </div>\n\n  </div>\n</div>\n\n      </div>\n      <div class=\&quot;gist-meta\&quot;>\n        <a href=\&quot;https://gist.github.com/microloop/33dc504d27dcf21877a5e649118025c5/raw/59c864bfb6e929dda412a048364d78e51e725e51/main.lua\&quot; style=\&quot;float:right\&quot; class=\&quot;Link--inTextBlock\&quot;>view raw</a>\n        <a href=\&quot;https://gist.github.com/microloop/33dc504d27dcf21877a5e649118025c5#file-main-lua\&quot; class=\&quot;Link--inTextBlock\&quot;>\n          main.lua\n        </a>\n        hosted with &amp;#10084; by <a class=\&quot;Link--inTextBlock\&quot; href=\&quot;https://github.com\&quot;>GitHub</a>\n      </div>\n    </div>\n</div>\n&quot;,&quot;stylesheet&quot;:&quot;https://github.githubassets.com/assets/gist-embed-0ac919313390.css&quot;}" data-component-name="GitgistToDOM"><link rel="stylesheet" href="https://github.githubassets.com/assets/gist-embed-0ac919313390.css"><div id="gist143627551" class="gist">
    <div class="gist-file" data-color-mode="light" data-light-theme="light">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container">
  <div id="file-main-lua" class="file my-2">
    
    <div itemprop="text" class="Box-body p-0 blob-wrapper data type-lua  " style="overflow:auto">

        
<div class="js-check-hidden-unicode js-blob-code-container blob-code-content">

  
  <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center">
  
    

    <span>
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a>
    </span>


  <div data-view-component="true" class="flash-action">        <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn">    Show hidden characters
</a>
</div>
</div>

  <span data-view-component="true" class="line-alert tooltipped tooltipped-e">
    
    

</span>

  <table data-hpc="" class="highlight tab-size js-file-line-container" data-tab-size="4" data-paste-markdown-skip="" data-tagsearch-path="main.lua">
        <tbody><tr>
          <td id="file-main-lua-L1" class="blob-num js-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="file-main-lua-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">_init</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L2" class="blob-num js-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="file-main-lua-LC2" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Enable mouse support</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L3" class="blob-num js-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="file-main-lua-LC3" class="blob-code blob-code-inner js-file-line"><span class="pl-c1">poke</span>(<span class="pl-c1">0x5f2d</span>,<span class="pl-c1">1</span>)</td>
        </tr>
        <tr>
          <td id="file-main-lua-L4" class="blob-num js-line-number js-blob-rnum" data-line-number="4"></td>
          <td id="file-main-lua-LC4" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> GLOBAL VARIABLES</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L5" class="blob-num js-line-number js-blob-rnum" data-line-number="5"></td>
          <td id="file-main-lua-LC5" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">SCREEN_WIDTH</span> <span class="pl-k">=</span> <span class="pl-c1">128</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L6" class="blob-num js-line-number js-blob-rnum" data-line-number="6"></td>
          <td id="file-main-lua-LC6" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">SCREEN_HEIGHT</span> <span class="pl-k">=</span> <span class="pl-c1">128</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L7" class="blob-num js-line-number js-blob-rnum" data-line-number="7"></td>
          <td id="file-main-lua-LC7" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">MAP_WIDTH</span> <span class="pl-k">=</span> <span class="pl-c1">1024</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L8" class="blob-num js-line-number js-blob-rnum" data-line-number="8"></td>
          <td id="file-main-lua-LC8" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">MAP_HEIGHT</span> <span class="pl-k">=</span> <span class="pl-c1">256</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L9" class="blob-num js-line-number js-blob-rnum" data-line-number="9"></td>
          <td id="file-main-lua-LC9" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">TILE_STANDARD_SIZE</span> <span class="pl-k">=</span> <span class="pl-c1">8</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L10" class="blob-num js-line-number js-blob-rnum" data-line-number="10"></td>
          <td id="file-main-lua-LC10" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Creating the list of icons</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L11" class="blob-num js-line-number js-blob-rnum" data-line-number="11"></td>
          <td id="file-main-lua-LC11" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">icons</span> <span class="pl-k">=</span> {}</td>
        </tr>
        <tr>
          <td id="file-main-lua-L12" class="blob-num js-line-number js-blob-rnum" data-line-number="12"></td>
          <td id="file-main-lua-LC12" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Initialice our icons that will be part of the toolbar</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L13" class="blob-num js-line-number js-blob-rnum" data-line-number="13"></td>
          <td id="file-main-lua-LC13" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">pointer</span> <span class="pl-k">=</span> <span class="pl-en">Icon</span>:<span class="pl-c1">new</span>({<span class="pl-smi">name</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>Pointer<span class="pl-pds">"</span></span>,<span class="pl-smi">posx</span><span class="pl-k">=</span><span class="pl-c1">106</span>,<span class="pl-smi">posy</span><span class="pl-k">=</span><span class="pl-c1">0</span>,<span class="pl-smi">sprite</span><span class="pl-k">=</span><span class="pl-c1">84</span>,</td>
        </tr>
        <tr>
          <td id="file-main-lua-L14" class="blob-num js-line-number js-blob-rnum" data-line-number="14"></td>
          <td id="file-main-lua-LC14" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">sprite_pressed</span><span class="pl-k">=</span><span class="pl-c1">100</span>,<span class="pl-smi">active_sprite</span><span class="pl-k">=</span><span class="pl-c1">116</span>,<span class="pl-smi">type</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>Pointer<span class="pl-pds">"</span></span>})</td>
        </tr>
        <tr>
          <td id="file-main-lua-L15" class="blob-num js-line-number js-blob-rnum" data-line-number="15"></td>
          <td id="file-main-lua-LC15" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">ground</span> <span class="pl-k">=</span> <span class="pl-en">Icon</span>:<span class="pl-c1">new</span>({<span class="pl-smi">name</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>Ground<span class="pl-pds">"</span></span>,<span class="pl-smi">posx</span><span class="pl-k">=</span><span class="pl-c1">116</span>,<span class="pl-smi">posy</span><span class="pl-k">=</span><span class="pl-c1">0</span>,<span class="pl-smi">sprite</span><span class="pl-k">=</span><span class="pl-c1">85</span>,</td>
        </tr>
        <tr>
          <td id="file-main-lua-L16" class="blob-num js-line-number js-blob-rnum" data-line-number="16"></td>
          <td id="file-main-lua-LC16" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">sprite_pressed</span><span class="pl-k">=</span><span class="pl-c1">101</span>,<span class="pl-smi">active_sprite</span><span class="pl-k">=</span><span class="pl-c1">117</span>,<span class="pl-smi">type</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>Ground<span class="pl-pds">"</span></span>})</td>
        </tr>
        <tr>
          <td id="file-main-lua-L17" class="blob-num js-line-number js-blob-rnum" data-line-number="17"></td>
          <td id="file-main-lua-LC17" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">rubber</span> <span class="pl-k">=</span> <span class="pl-en">Icon</span>:<span class="pl-c1">new</span>({<span class="pl-smi">name</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>Rubber<span class="pl-pds">"</span></span>,<span class="pl-smi">posx</span><span class="pl-k">=</span><span class="pl-c1">106</span>,<span class="pl-smi">posy</span><span class="pl-k">=</span><span class="pl-c1">0</span>,<span class="pl-smi">sprite</span><span class="pl-k">=</span><span class="pl-c1">83</span>,</td>
        </tr>
        <tr>
          <td id="file-main-lua-L18" class="blob-num js-line-number js-blob-rnum" data-line-number="18"></td>
          <td id="file-main-lua-LC18" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">sprite_pressed</span><span class="pl-k">=</span><span class="pl-c1">99</span>,<span class="pl-smi">active_sprite</span><span class="pl-k">=</span><span class="pl-c1">115</span>,<span class="pl-smi">type</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>Rubber<span class="pl-pds">"</span></span>})</td>
        </tr>
        <tr>
          <td id="file-main-lua-L19" class="blob-num js-line-number js-blob-rnum" data-line-number="19"></td>
          <td id="file-main-lua-LC19" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Adding icons to the global icons list</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L20" class="blob-num js-line-number js-blob-rnum" data-line-number="20"></td>
          <td id="file-main-lua-LC20" class="blob-code blob-code-inner js-file-line"><span class="pl-c1">add</span>(<span class="pl-smi">icons</span>,<span class="pl-smi">pointer</span>)</td>
        </tr>
        <tr>
          <td id="file-main-lua-L21" class="blob-num js-line-number js-blob-rnum" data-line-number="21"></td>
          <td id="file-main-lua-LC21" class="blob-code blob-code-inner js-file-line"><span class="pl-c1">add</span>(<span class="pl-smi">icons</span>,<span class="pl-smi">ground</span>)</td>
        </tr>
        <tr>
          <td id="file-main-lua-L22" class="blob-num js-line-number js-blob-rnum" data-line-number="22"></td>
          <td id="file-main-lua-LC22" class="blob-code blob-code-inner js-file-line"><span class="pl-c1">add</span>(<span class="pl-smi">icons</span>,<span class="pl-smi">rubber</span>)</td>
        </tr>
        <tr>
          <td id="file-main-lua-L23" class="blob-num js-line-number js-blob-rnum" data-line-number="23"></td>
          <td id="file-main-lua-LC23" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Create instance of UI, Mouse and Camera handlers</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L24" class="blob-num js-line-number js-blob-rnum" data-line-number="24"></td>
          <td id="file-main-lua-LC24" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">toolbar</span> <span class="pl-k">=</span> <span class="pl-en">Toolbar</span>:<span class="pl-c1">new</span>({<span class="pl-smi">posx</span><span class="pl-k">=</span><span class="pl-smi">SCREEN_WIDTH</span><span class="pl-k">/</span><span class="pl-c1">2</span><span class="pl-k">-</span><span class="pl-c1">16</span>,<span class="pl-smi">posy</span><span class="pl-k">=</span><span class="pl-c1">12</span>,<span class="pl-smi">sizex</span><span class="pl-k">=</span><span class="pl-c1">40</span>,<span class="pl-smi">sizey</span><span class="pl-k">=</span><span class="pl-c1">15</span>,<span class="pl-smi">round</span><span class="pl-k">=</span><span class="pl-c1">1</span>,<span class="pl-smi">icons</span><span class="pl-k">=</span><span class="pl-smi">icons</span>})</td>
        </tr>
        <tr>
          <td id="file-main-lua-L25" class="blob-num js-line-number js-blob-rnum" data-line-number="25"></td>
          <td id="file-main-lua-LC25" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">mouse</span> <span class="pl-k">=</span> <span class="pl-en">Mouse</span>:<span class="pl-c1">new</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L26" class="blob-num js-line-number js-blob-rnum" data-line-number="26"></td>
          <td id="file-main-lua-LC26" class="blob-code blob-code-inner js-file-line"><span class="pl-en">mouse</span>:<span class="pl-c1">init</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L27" class="blob-num js-line-number js-blob-rnum" data-line-number="27"></td>
          <td id="file-main-lua-LC27" class="blob-code blob-code-inner js-file-line"><span class="pl-smi">cam</span> <span class="pl-k">=</span> <span class="pl-en">Cam</span>:<span class="pl-c1">new</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L28" class="blob-num js-line-number js-blob-rnum" data-line-number="28"></td>
          <td id="file-main-lua-LC28" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L29" class="blob-num js-line-number js-blob-rnum" data-line-number="29"></td>
          <td id="file-main-lua-LC29" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-main-lua-L30" class="blob-num js-line-number js-blob-rnum" data-line-number="30"></td>
          <td id="file-main-lua-LC30" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">_update60</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L31" class="blob-num js-line-number js-blob-rnum" data-line-number="31"></td>
          <td id="file-main-lua-LC31" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Future functionality</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L32" class="blob-num js-line-number js-blob-rnum" data-line-number="32"></td>
          <td id="file-main-lua-LC32" class="blob-code blob-code-inner js-file-line"><span class="pl-en">toolbar</span>:<span class="pl-c1">update</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L33" class="blob-num js-line-number js-blob-rnum" data-line-number="33"></td>
          <td id="file-main-lua-LC33" class="blob-code blob-code-inner js-file-line"><span class="pl-en">mouse</span>:<span class="pl-c1">update</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L34" class="blob-num js-line-number js-blob-rnum" data-line-number="34"></td>
          <td id="file-main-lua-LC34" class="blob-code blob-code-inner js-file-line"><span class="pl-en">cam</span>:<span class="pl-c1">update</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L35" class="blob-num js-line-number js-blob-rnum" data-line-number="35"></td>
          <td id="file-main-lua-LC35" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L36" class="blob-num js-line-number js-blob-rnum" data-line-number="36"></td>
          <td id="file-main-lua-LC36" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-main-lua-L37" class="blob-num js-line-number js-blob-rnum" data-line-number="37"></td>
          <td id="file-main-lua-LC37" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">_draw</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L38" class="blob-num js-line-number js-blob-rnum" data-line-number="38"></td>
          <td id="file-main-lua-LC38" class="blob-code blob-code-inner js-file-line"><span class="pl-c1">cls</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L39" class="blob-num js-line-number js-blob-rnum" data-line-number="39"></td>
          <td id="file-main-lua-LC39" class="blob-code blob-code-inner js-file-line"><span class="pl-c"><span class="pl-c">--</span> Draw map</span></td>
        </tr>
        <tr>
          <td id="file-main-lua-L40" class="blob-num js-line-number js-blob-rnum" data-line-number="40"></td>
          <td id="file-main-lua-LC40" class="blob-code blob-code-inner js-file-line"><span class="pl-c1">map</span>(<span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-c1">128</span>, <span class="pl-c1">32</span>)</td>
        </tr>
        <tr>
          <td id="file-main-lua-L41" class="blob-num js-line-number js-blob-rnum" data-line-number="41"></td>
          <td id="file-main-lua-LC41" class="blob-code blob-code-inner js-file-line"><span class="pl-en">cam</span>:<span class="pl-c1">draw</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L42" class="blob-num js-line-number js-blob-rnum" data-line-number="42"></td>
          <td id="file-main-lua-LC42" class="blob-code blob-code-inner js-file-line"><span class="pl-en">toolbar</span>:<span class="pl-c1">draw</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L43" class="blob-num js-line-number js-blob-rnum" data-line-number="43"></td>
          <td id="file-main-lua-LC43" class="blob-code blob-code-inner js-file-line"><span class="pl-en">mouse</span>:<span class="pl-c1">draw</span>()</td>
        </tr>
        <tr>
          <td id="file-main-lua-L44" class="blob-num js-line-number js-blob-rnum" data-line-number="44"></td>
          <td id="file-main-lua-LC44" class="blob-code blob-code-inner js-file-line"><span class="pl-k">end</span></td>
        </tr>
  </tbody></table>
</div>


    </div>

  </div>
</div>

      </div>
      <div class="gist-meta">
        <a href="https://gist.github.com/microloop/33dc504d27dcf21877a5e649118025c5/raw/59c864bfb6e929dda412a048364d78e51e725e51/main.lua" style="float:right" class="Link--inTextBlock">view raw</a>
        <a href="https://gist.github.com/microloop/33dc504d27dcf21877a5e649118025c5#file-main-lua" class="Link--inTextBlock">
          main.lua
        </a>
        hosted with &#10084; by <a class="Link--inTextBlock" href="https://github.com">GitHub</a>
      </div>
    </div>
</div>
</div><p>Remember that you also need to edit your <strong>p8 </strong>file in order to add the new includes.</p><p>I talk more about this way of working with PICO-8 at our previous article</p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;129a4a00-8a36-45e0-90ab-83179f1f09f8&quot;,&quot;caption&quot;:&quot;Hello my fellow gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Create Your Gamedev Environment for PICO-8 in 7 minutes&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-11-27T11:49:24.929Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!_sGz!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/create-your-gamedev-environment-for&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:180089378,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:3,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><pre><code><code>pico-8 cartridge // http://www.pico-8.com
version 43
__lua__
#include main.lua
#include ui-components.lua
#include mouse.lua
#include camera.lua
[more code...]</code></code></pre><p>Today we created an environment where we are able to draw and erase tiles on pico-8 <strong>map </strong>space, not only that but we also implemented the <strong>cam()</strong> function to be able to create a wide 2D World on our Super Pico Maker map.</p><p>My previous calculations were right and we just used ~2000 tokens to create the interactive UI for level building, yay!</p><p>This is just the first step to get closer to our <strong>Super Mario Maker</strong> inspiration.</p><h1>What&#8217;s next?</h1><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!QwCp!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!QwCp!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!QwCp!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!QwCp!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!QwCp!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!QwCp!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif" width="514" height="514" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:514,&quot;bytes&quot;:59213,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/181507717?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!QwCp!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!QwCp!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!QwCp!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!QwCp!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f22d2e0-8b1f-4d51-957c-3df347311c2d_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>During our next workshop for January 2026, we are going to implement <strong>gravity </strong>and <strong>collision detection, </strong>if you are already excited and you want to read about the topic, there is an article for it:</p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;e9c24093-fd6f-493d-9e9d-015d1fe15dc0&quot;,&quot;caption&quot;:&quot;Hello my fellow gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;The Invisible Boundaries: Collisions and Physics&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;Current IT Manager (he) Passionate about technology and videogames. Hobbyist Solo Gamedev and writing about the challenge on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-11-23T21:32:34.153Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!Q-lI!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/the-invisible-boundaries-collisions&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:179667267,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:5,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><p>Yes, I wanted to make the boundaries visible for my prototype, much easier to debug and understand if the system is working &#128513;</p><p>Thank you for reading!</p><p></p><p></p><p></p>]]></content:encoded></item><item><title><![CDATA[5 Things To Know Before Start Solo Gamedev]]></title><description><![CDATA[Systems first, Aesthetics for later.]]></description><link>https://www.gamedevpills.com/p/5-things-to-know-before-start-solo</link><guid isPermaLink="false">https://www.gamedevpills.com/p/5-things-to-know-before-start-solo</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Sat, 06 Dec 2025 18:34:50 GMT</pubDate><enclosure url="https://substackcdn.com/image/fetch/$s_!V4tN!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!V4tN!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!V4tN!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!V4tN!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!V4tN!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!V4tN!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!V4tN!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp" width="727" height="484.6666666666667" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/fe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:400,&quot;width&quot;:600,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:22356,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/webp&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/180734574?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!V4tN!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!V4tN!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!V4tN!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!V4tN!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffe14739c-3cf1-44c9-9ac9-f8ca1cf69308_600x400.webp 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Created by a human - Jos&#233; Carlos P&#233;rez</figcaption></figure></div><p>Hello my fellow gamedevs!</p><p>If you&#8217;re like me, tackling solo gamedev on the side, you know the struggle is real. We look at the initial list of hard and soft skills required and instantly feel overwhelmed. It&#8217;s too much to master all at once.</p><p>I realized early on that I was spending far too much time on low-value learning, like pixel art, instead of mechanics, prototyping, maths and clean code. I was treating gamedev like assembling parts, not <strong>engineering systems.</strong></p><p>To help you avoid that time sink and focus on the essentials first, I&#8217;ve broken down the learning path. These are the <strong>5 Things To Know</strong> I now use to filter out the noise and ensure every minute spent is focused on lasting, high-quality knowledge.</p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe now&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe?"><span>Subscribe now</span></a></p><h1>Where to start? Gamedev Essentials!</h1><p>The podcasts I listen to often say they consider the release of a videogame almost as a miracle and I can&#8217;t agree more with them. Many pillars are involved.</p><ul><li><p>Aesthetics and sound</p></li><li><p>Storyline and Narrative Design</p></li><li><p>Technology and Tools</p></li><li><p>Mechanics and Systems</p></li></ul><p>But let&#8217;s not get overwhelmed by the <strong>Pillars of game design</strong>. The same way before we walk we need to crawl, before we <strong>design </strong>we need to <strong>learn</strong> and create our own <strong>patterns. </strong>First let&#8217;s sort that list for you as an initial <strong>Essential learning path</strong>.</p><ol><li><p>Technology and Tools.</p><ol><li><p>Programming Languages</p></li><li><p>Small Gamedev Engines (Love2D, Phaser.io, Pico-8)</p></li></ol></li><li><p>Mechanics and Systems</p><ol><li><p>2D Character movement</p></li><li><p>Collisions</p></li><li><p>Physics</p></li><li><p>Hitboxes</p></li></ol></li><li><p>Aesthetics and sound. We can leave this for later.</p></li><li><p>Storyline and Narrative Design. Even for more late&#8230; </p></li></ol><div><hr></div><h1>1. The Quality of Learning</h1><p>We want things fast, we want immediate knowledge but let me tell you we are humans, not AI and that&#8217;s not the way we work. We can&#8217;t be trained by terabytes of information and suddenly understand how to build the next successful looter-shooter game.</p><p>Let&#8217;s say you&#8217;ve found a gamedev tutorial, you are excited to take over it, the duration is short enough to be taken around your day job and daily duties </p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;e622170e-30c2-4f36-98e2-ad9b5ecc5d62&quot;,&quot;caption&quot;:&quot;Hello my fellow solo gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Pico Workshop #1 - Creating UI Components&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;IT support Specialist making teams shine even when infrastructure is working, passionate about technology and videogames. Hobbyst Solo Gamedev and writing about the industry on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-11-15T20:00:44.027Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!FV5s!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5322c214-139f-4a1d-9d9b-fc82eec3ea22_600x400.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/pico-workshop-1-creating-ui-components&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:178813993,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:4,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><p>On my previous workshop I just wanted to teach you how to create a tiny UI Component (A window) on Pico-8, but probably after that lesson your brain was already thinking the possible usages where it can fit on your project.</p><p>That&#8217;s cool as you are applying one of the key strategies of deep learning for humans</p><h3>Deep Learning Techniques (For humans &#128521;) </h3><ul><li><p>Leave behind those learnings of 1-2 hours to create a whole game. At least by now</p></li><li><p>Especially at the beginning, learn by <strong>systems</strong> and <strong>mechanics</strong>. Few examples:</p><ul><li><p>Lerp movement for 2D Character movement</p></li><li><p>Coyote Jump on 2D Platform games</p></li><li><p>Wall Jump on 2D Platform games</p></li></ul></li><li><p>Think about possible new usages of your learning and try to apply them</p></li><li><p>Teach your learning using simple words to your partner and friends</p></li></ul><div><hr></div><h1>2. Leave Art Learning For Later</h1><p>Coming from Web design and because I love <a href="https://lospec.com/jcperez">Pixel Art</a>, I decided to start with it on my gamedev journey, inspired by 80s and 90s arcade games. That was my choice because I had programming background.</p><p>But from my point of view, it is a mistake to start focused on art if your end goal is to create your own game. Let me tell you why.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!tv9E!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!tv9E!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg 424w, https://substackcdn.com/image/fetch/$s_!tv9E!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg 848w, https://substackcdn.com/image/fetch/$s_!tv9E!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!tv9E!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!tv9E!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg" width="519" height="548.6571428571428" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:888,&quot;width&quot;:840,&quot;resizeWidth&quot;:519,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;Spaghetti code Memes &#183; ProgrammerHumor.io&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="Spaghetti code Memes &#183; ProgrammerHumor.io" title="Spaghetti code Memes &#183; ProgrammerHumor.io" srcset="https://substackcdn.com/image/fetch/$s_!tv9E!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg 424w, https://substackcdn.com/image/fetch/$s_!tv9E!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg 848w, https://substackcdn.com/image/fetch/$s_!tv9E!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg 1272w, https://substackcdn.com/image/fetch/$s_!tv9E!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4c88a144-b5e4-47a4-9a5b-b698aeb6394b_840x888.jpeg 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Systems and mechanics are not easy to implement, even coming from a similar industry. Create a clean and maintainable code requires effort and thoughtful algorithm thinking.</p><p>You can create a smooth 2D character movement using boilerplate sprites, there are many resources available for it (<a href="https://kenney.nl/">Kenney</a>, <a href="https://itch.io/game-assets">itch.io</a>, <a href="https://www.gamedevmarket.net/">GDM</a>) and later you can <em>easily </em>replace them with the assets you create or the ones you purchase.</p><p>But you can&#8217;t create a smooth 2D character movement without the essential knowledge of coding, don&#8217;t let the AI do the job for you, believe me, that have a cost and bugs will be showing up.</p><blockquote><p>Pro Tip: Instead apply AI to learn essentials, to organize the content and to generate summaries for you of the language you are learning&#8230; <em>But wait Jos&#233;, which one should I learn?</em></p></blockquote><div class="captioned-button-wrap" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/p/5-things-to-know-before-start-solo?utm_source=substack&utm_medium=email&utm_content=share&action=share&quot;,&quot;text&quot;:&quot;Share&quot;}" data-component-name="CaptionedButtonToDOM"><div class="preamble"><p class="cta-caption">Thanks for reading Gamedev Pills &#8211; Learn Game Design Around Your Day Job! This post is public so feel free to share it.</p></div><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/p/5-things-to-know-before-start-solo?utm_source=substack&utm_medium=email&utm_content=share&action=share&quot;,&quot;text&quot;:&quot;Share&quot;}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/p/5-things-to-know-before-start-solo?utm_source=substack&utm_medium=email&utm_content=share&action=share"><span>Share</span></a></p></div><div><hr></div><h1>3. Choose Your Language and Engine</h1><h3>Choose your programming language</h3><p>This newsletter is mostly focused on PICO-8 (Lua Code) learning to keep things as tiny as possible as I think it is the ideal platform for learning from zero to beginner and forward. </p><p>But take into considration the language you decide to learn, because it has many implications:</p><ul><li><p>After choosing your language, you are also choosing your non-commercial engine as they are linked to one coding language (Some of them can support many, but that&#8217;s rarely happening)</p></li><li><p>You can apply that learning to other context if the language is widely used like Python. Which is the <a href="https://www.tiobe.com/tiobe-index/python/">most popular language</a></p></li><li><p>Some are easier to learn, others require a low level understanding. Python became so popular mainly because it&#8217;s easy access. Research this aspect before you choose.</p><p></p></li></ul><h4>Top Programming Languages used for Gamedev</h4><ul><li><p><strong><a href="https://www.index.dev/blog/6-top-programming-languages-to-level-up-your-game-development#c">1. C++</a></strong></p></li><li><p><strong><a href="https://www.index.dev/blog/6-top-programming-languages-to-level-up-your-game-development#c">2. C#</a></strong></p></li><li><p><strong><a href="https://www.index.dev/blog/6-top-programming-languages-to-level-up-your-game-development#javascript">3. JavaScript</a></strong></p></li><li><p><strong><a href="https://www.index.dev/blog/6-top-programming-languages-to-level-up-your-game-development#java">4. Java</a></strong></p></li><li><p><strong><a href="https://www.index.dev/blog/6-top-programming-languages-to-level-up-your-game-development#python">5. Python</a></strong></p></li><li><p><strong><a href="https://www.index.dev/blog/6-top-programming-languages-to-level-up-your-game-development#lua">6. Lua</a></strong></p><p></p></li></ul><blockquote><p>Source - <a href="https://www.index.dev/blog/6-top-programming-languages-to-level-up-your-game-development">https://www.index.dev/blog/6-top-programming-languages-to-level-up-your-game-development</a></p></blockquote><h3>Start with non-commercial Engines</h3><p>Same logic that I mentioned before about the usage of AI to create code, applies to big gamedev engines. </p><p>As soon as we start learning through engines like <strong>Godot</strong>, <strong>Unity</strong> and <strong>Unreal</strong> just to mention the main ones, we are going to decrease our <strong>Quality of learning.</strong></p><p>Don&#8217;t take me wrong, those engines are used by thousand of experienced gamedev profiles to create commercial products, they are really good, but their perspective is <strong>efficiency</strong> and not <strong>learning.</strong></p><p>Starting with smaller engines like phaser.io, Love2D and Pico-8 (Where you can quickly create boilerplate sprites) allow you to really focus on the problem and find the right solution for it, bigger engines have tons of solutions already built-in that prevent you from learning how things works under the hood.</p><blockquote><p><strong>Warning -</strong> Don&#8217;t take it extreme and start creating your own gamedev engine, the learning path will focused on the development of the tool and not at gamedev concepts at all.</p></blockquote><div><hr></div><h1>4. Learn Math</h1><p>As soon as you start learning a programming language and you go through some of the examples, you quickly realize what computers are really good at can you guess? Exactly, maths.</p><p>But specially on gamedev maths are used for most of the mechanics and systems that you could think about, at the end you have a scene with a numbers of actors (player, npcs, objects, etc) with a X number of properties (speed, health, weight, map coordinates, damage, etc)</p><p>All those values need live manipulation based on player actions, I would start with the following concepts</p><ol><li><p><strong>Vector Math. </strong>No matter if it&#8217;s 2D or 3D, vectors will be the cornerstone of your videogame and it&#8217;s really important to understand them (<a href="https://docs.unity3d.com/Manual/scripting-vectors.html">vectors</a>)</p></li><li><p><strong>Trigonometry</strong>, calculate angles, distances (Pythagorean theorem), and positions on curves</p></li><li><p><strong>Statistics &amp; Probability</strong>. Used in random number generation (RNG) for loot drops, critical hits, and balancing gameplay</p></li><li><p><strong>Graphs and progression curves</strong>. Specially when you want to manage character progression, they could be also useful to understand the different types of animations (easy-in, easy-out, etc)</p><ol><li><p>Linear curves</p></li><li><p>Exponential curves</p></li><li><p>Parabolic curves</p></li></ol></li></ol><p></p><div><hr></div><p>If you are enjoying the reading, the basic plan of Gamedevpills is free</p><ul><li><p>Receive weekly learnings of gamedev</p></li><li><p>Receive monthly workshops to prototype mechanics and systems on PICO-8</p></li></ul><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe&quot;,&quot;text&quot;:&quot;\&quot;I'm too young to die\&quot;&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe"><span>"I'm too young to die"</span></a></p><p>For a stronger experience, subscribe to our monthly plan:</p><ul><li><p>Monthly analysis of the videogames industry (Steam)</p><ul><li><p>Top 10 releases by reviews</p></li><li><p>Top 10 Trending games </p></li><li><p>Gamedev Resources - Assets, tools, tips and more</p></li></ul></li><li><p>Monthly full access to assets and learning of PICO-8 workshops</p></li></ul><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?utm_source=subscribe_content_block&amp;next=https%3A%2F%2Fwww.gamedevpills.com%2F&quot;,&quot;text&quot;:&quot;\&quot;Hurt me plenty\&quot;&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe?utm_source=subscribe_content_block&amp;next=https%3A%2F%2Fwww.gamedevpills.com%2F"><span>"Hurt me plenty"</span></a></p><div><hr></div><h1>5. Have a scope, create your commitment plan</h1><p>This is where all the previous lessons flows into the sea, our project.</p><p>I really encourage you to have a side-project where you can actually apply all the knowledge as your vehicle to drive motivation. </p><p>Starting this difficult and overwhelming art of gamedev without any small creation that you can fuel, is the recipe of procrastination and later abandon your passion, because you don&#8217;t have a goal, a lighthouse.</p><p>Okay, I take it, you already thought on a project, of course! But then let me tell you&#8230; </p><p>You need a plan, think you could be easily working on that project for the next 6 month as your learning program, then take your time to breakdown the idea (kind of management functions) and create small workloads to be scheduled on your calendar.</p><p>If that&#8217;s the aspect where you need more guidance, I recommend you to read the article I wrote about it</p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;ac2efe98-e737-46dc-aba8-b205a8b5086d&quot;,&quot;caption&quot;:&quot;We&#8217;ve been speaking about Game design, time management, scope definition and many aspects on previous post but we never mentioned our elephant in the room&#8230;&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Every Great Game Starts with Words, Not Code&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;IT support Specialist making teams shine even when infrastructure is working, passionate about technology and videogames. Hobbyst Solo Gamedev and writing about the industry on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-10-09T18:01:32.567Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!OX0z!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7e519874-1b5b-4c76-8308-06b405786e6b_384x384.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/every-great-game-starts-with-words&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:174281379,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:6,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div><hr></div><p>I hope those essentials can help you as they are not only intended for people that didn&#8217;t started yet with Gamedev, but actually for you that like me, started having interest on gamedev few years ago.</p><p>Thank you for reading,</p><p>Happy coding!</p><h1></h1><p></p><p> </p><p></p>]]></content:encoded></item><item><title><![CDATA[Create Your Gamedev Environment for PICO-8 in 7 minutes]]></title><description><![CDATA[After this article the perception of game development experience on PICO-8 will change for you, forever.]]></description><link>https://www.gamedevpills.com/p/create-your-gamedev-environment-for</link><guid isPermaLink="false">https://www.gamedevpills.com/p/create-your-gamedev-environment-for</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Thu, 27 Nov 2025 11:49:24 GMT</pubDate><enclosure url="https://substackcdn.com/image/fetch/$s_!_sGz!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!_sGz!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!_sGz!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!_sGz!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!_sGz!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!_sGz!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!_sGz!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp" width="727" height="484.6666666666667" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/c4405256-872e-4caa-9a38-faec32939faf_600x400.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:400,&quot;width&quot;:600,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:27312,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/webp&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/180089378?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!_sGz!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp 424w, https://substackcdn.com/image/fetch/$s_!_sGz!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp 848w, https://substackcdn.com/image/fetch/$s_!_sGz!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp 1272w, https://substackcdn.com/image/fetch/$s_!_sGz!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4405256-872e-4caa-9a38-faec32939faf_600x400.webp 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Hello my fellow gamedevs!</p><p>I really love PICO-8 built-in tools; sprite editor is simple and effective, same applies to sfx and music composers, but let&#8217;s be realistic, most of the time we will be <strong>coding </strong>and the editor does the job&#8230;but you can barely see <strong>20 lines of code</strong> at the same time, which is not ideal.</p><p>For those coming from Unity, Godot, Gamemaker or any other gamedev engine, you can easily understand the scope of PICO-8 and adapt to it, but you will be feeling forced easily if you can&#8217;t get used to it.</p><p>Because I think PICO-8 have a huge potential for those that are not advanced gamedevs (like myself) &#8212; I want to share the way I code my PICO-8 games, because it really matters.</p><h1>1. Create a folder for your PICO-8 Projects</h1><blockquote><p>Source - <a href="https://pico-8.fandom.com/wiki/Configuration">https://pico-8.fandom.com/wiki/Configuration</a></p></blockquote><p>You can configure several aspects of how PICO-8 runs by editing a file called <code>config.txt</code>. The location of this file depends on which operating system you use.</p><ul><li><p>Windows: <code>C:/Users/Yourname/AppData/Roaming/pico-8/config.txt</code></p></li><li><p>Mac OS X: <code>/Users/Yourname/Library/Application Support/pico-8/config.txt</code></p></li><li><p>Linux: <code>~/.lexaloffle/pico-8/config.txt</code></p></li></ul><p>Open your <strong>config.txt</strong> file based on your operating system and now we need to look for the following lines:</p><pre><code>// Location of pico-8&#8217;s root folder
root_path D:/_sync/SynologyDrive/_proyectos/game-development/pico8/


// Location of cartridge save data
cdata_path C:/Users/jose/AppData/Roaming/pico-8/cdata/</code></pre><blockquote><p>My configuration is based on Windows </p></blockquote><p>The important property is <strong>root_path </strong>where you can set your main projects folder, so everytime you run PICO-8 you can create folders and projects files (<em>project-name.p8) </em>just to have your prototypes and projects clearly accesible from both PICO-8 and your Operating System file explorer.</p><h3>What I have on the root_path location?</h3><p>I will share the structure of files and folders from our last workshop project called <strong>super-pico-maker</strong></p><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;8ccebdda-2dcc-4daa-9a40-84498f40466e&quot;,&quot;caption&quot;:&quot;Hello my fellow solo gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;sm&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Pico Workshop #1 - Creating UI Components&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;IT support Specialist making teams shine even when infrastructure is working, passionate about technology and videogames. Hobbyst Solo Gamedev and writing about the industry on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-11-15T20:00:44.027Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!FV5s!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5322c214-139f-4a1d-9d9b-fc82eec3ea22_600x400.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/pico-workshop-1-creating-ui-components&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:178813993,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:4,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Learn Game Design Around Your Day Job&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!cTY4!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce710b89-c064-44db-9fe1-b953e2e45970_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;994e34d3-4b8e-47d3-87f6-0a58d163e8b1&quot;,&quot;duration&quot;:null}"></div><blockquote><p> After we change the <strong>config.txt</strong> we need to exit and open again our PICO-8 App.</p></blockquote><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;3f83b8ee-8cd1-4887-b5da-937c140be2a9&quot;,&quot;duration&quot;:null}"></div><p>As you can see, PICO-8 can list all the folders and projects located on your operating system, which is great to connect those now with our code editor &#128522;</p><blockquote><p><strong>Pro Tip.</strong> If you change the <strong>root_path </strong>location to a folder that is synchronized with Google Drive, Dropbox, OneDrive or any other cloud service you will have a backup and not only that, you can quickly work on your projects on another laptop/workstation.</p><p>I use a Synology NAS Server I have at home for that purpose.</p></blockquote><div class="subscription-widget-wrap-editor" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe&quot;,&quot;language&quot;:&quot;en&quot;}" data-component-name="SubscribeWidgetToDOM"><div class="subscription-widget show-subscribe"><div class="preamble"><p class="cta-caption">Gamedev Pills is a newsletter for people with a full-time job who still want to make games. Learn game design, small-scope workflows focused doses you can actually finish</p></div><form class="subscription-widget-subscribe"><input type="email" class="email-input" name="email" placeholder="Type your email&#8230;" tabindex="-1"><input type="submit" class="button primary" value="Subscribe"><div class="fake-input-wrapper"><div class="fake-input"></div><div class="fake-button"></div></div></form></div></div><h1>2. Choose your favourite Code Editor (A.K.A IDE)</h1><p>This is quite personal, as I always say I don&#8217;t think the <strong>perfect tool </strong>exist, it is just a matter of being comfortable and efficient working the tool. Some suggestions:</p><ul><li><p><a href="https://code.visualstudio.com/">Visual Studio Code</a> - Plenty of plugins for all the languages, including PICO-8</p></li><li><p><a href="https://notepad-plus-plus.org/">Notepad++</a> - Quite powerfull and customizable as hell</p></li><li><p><a href="https://cursor.com/">Cursor</a> - AI Focused, I try to avoid as much as possible AI tools, specially when I&#8217;m learning.</p></li><li><p><a href="https://www.sublimetext.com/">Sublime Text</a> - Simple and elegant</p></li></ul><p>I have Visual Studio Code as my main development tool for PICO-8 because now I&#8217;m used to it and I found the perfect PICO-8 theme for it. </p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!iYFK!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!iYFK!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png 424w, https://substackcdn.com/image/fetch/$s_!iYFK!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png 848w, https://substackcdn.com/image/fetch/$s_!iYFK!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png 1272w, https://substackcdn.com/image/fetch/$s_!iYFK!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!iYFK!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png" width="1191" height="744" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:744,&quot;width&quot;:1191,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:107426,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/180089378?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!iYFK!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png 424w, https://substackcdn.com/image/fetch/$s_!iYFK!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png 848w, https://substackcdn.com/image/fetch/$s_!iYFK!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png 1272w, https://substackcdn.com/image/fetch/$s_!iYFK!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6181c8cf-58cd-4ce4-acd2-68d2770145f8_1191x744.png 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Visual Studio Code with PICO-8 Theme and Add-ons</figcaption></figure></div><p>Once you decide which Code Editor you want to start with, you need to create the structure for your first project</p><h1>3. Create a PICO-8 Project Skeleton</h1><p>This is the interesting part, this is when PICO-8 evolve from a tiny editor to a proper development environment. Main advantages:</p><ul><li><p>Multiple files to isolate functionality</p></li><li><p>Code suggestions and autocomplete for LUA</p></li><li><p>Clear overview of line numbers</p></li><li><p>Fast navigation through code</p></li></ul><p>Let&#8217;s say we want to create our first RPG game on Pico-8, we are going to name it as <strong>tinyrpg. </strong>This would be the ideal structure:</p><pre><code>TinyRPG
| ----- tinyrpg.p8
| ----- main.lua</code></pre><h3>1. Save the project from PICO-8</h3><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;9cc13337-3c3b-4ac2-acd7-ee3b5459eb56&quot;,&quot;duration&quot;:null}"></div><p>Now that we have the main <strong>tinyrpg.p8</strong> file, we can create the additional files <strong>main.lua </strong>where the main loop of the videogame will be happening.</p><p>Open your editor with the folder where your <strong>tinyrpg.p8 </strong>is located</p><ul><li><p>Create a file called main.lua with the content I provide later</p></li><li><p>Update the content of tinyrpg.p8 with the content I just provide at the bottom.</p></li></ul><h4>Content of tinyrpg.p8</h4><pre><code>pico-8 cartridge // http://www.pico-8.com
version 43
__lua__
#include main.lua
__gfx__
00000000000110000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00000000001aa1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00700700001ff1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00077000018888100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0007700001f88f100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00700700001cc1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00000000001cc1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00000000001551000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
</code></pre><h4>Content of main.lua</h4><pre><code>-- basic pico-8 main loop
function _init()
    player = {
        x = 64,
        y = 64,
        spd = 1.75,
        dir = 0,   -- 0=d,1=u,2=l,3=r (optional)
        anim = 0
    }
    cam_x, cam_y = 0, 0
end

function _update()
    local dx, dy = 0, 0
    if btn(0) then dx = dx - 1; player.dir = 2 end -- left
    if btn(1) then dx = dx + 1; player.dir = 3 end -- right
    if btn(2) then dy = dy - 1; player.dir = 1 end -- up
    if btn(3) then dy = dy + 1; player.dir = 0 end -- down
    -- diagonal speed correction
    if dx ~= 0 and dy ~= 0 then
        dx = dx * 0.7071
        dy = dy * 0.7071
    end
    player.x = player.x + dx * player.spd
    player.y = player.y + dy * player.spd
    -- clamp to screen world limits
    player.x = mid(8, player.x, 120)
    player.y = mid(8, player.y, 120)
    -- camera follows player
    cam_x = player.x - 64
    cam_y = player.y - 64
end

function _draw()
    cls(0)
    -- apply camera
    camera(flr(cam_x), flr(cam_y))
    for ty = 0, 15 do
        for tx = 0, 15 do
            local col = ((tx + ty) % 2 == 0) and 5 or 7
            rectfill(tx*8, ty*8, tx*8+7, ty*8+7, col)
        end
    end
    spr(1, player.x - 4, player.y - 4)
    -- reset camera for HUD
    camera()
    -- HUD
    rectfill(0, 0, 127, 7, 0)
    print(&#8221;x:&#8221;..flr(player.x)..&#8221; y:&#8221;..flr(player.y), 2, 1, 7)
end</code></pre><p>So now we have a quick prototype connected with our code editor, let&#8217;s run PICO-8 to see the results.</p><div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;28611b57-3bb1-4720-9501-71bbe23a4c42&quot;,&quot;duration&quot;:null}"></div><h1>How does it feel?</h1><p>We can say you unlocked a new way to create prototypes and small games faster than before, you can connect now your code to a source code repository and start your project with a proper development workflow.</p><p>Remember that PICO-8 is limited to 8192 tokens, but that doesn&#8217;t mean that we can&#8217;t create high quality titles under that scope.</p><div class="captioned-button-wrap" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/p/create-your-gamedev-environment-for?utm_source=substack&utm_medium=email&utm_content=share&action=share&quot;,&quot;text&quot;:&quot;Share&quot;}" data-component-name="CaptionedButtonToDOM"><div class="preamble"><p class="cta-caption">Thanks for reading Gamedev Pills &#8211; Learn Game Design Around Your Day Job! This post is public so feel free to share it.</p></div><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/p/create-your-gamedev-environment-for?utm_source=substack&utm_medium=email&utm_content=share&action=share&quot;,&quot;text&quot;:&quot;Share&quot;}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/p/create-your-gamedev-environment-for?utm_source=substack&utm_medium=email&utm_content=share&action=share"><span>Share</span></a></p></div>]]></content:encoded></item><item><title><![CDATA[The Invisible Boundaries: Collisions and Physics]]></title><description><![CDATA[At videogames the forces of physics are ruled by pixels and maths, apples doesn't fall from trees without your design]]></description><link>https://www.gamedevpills.com/p/the-invisible-boundaries-collisions</link><guid isPermaLink="false">https://www.gamedevpills.com/p/the-invisible-boundaries-collisions</guid><dc:creator><![CDATA[José Pérez]]></dc:creator><pubDate>Sun, 23 Nov 2025 21:32:34 GMT</pubDate><enclosure url="https://substackcdn.com/image/fetch/$s_!Q-lI!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!Q-lI!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!Q-lI!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp 424w, https://substackcdn.com/image/fetch/$s_!Q-lI!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp 848w, https://substackcdn.com/image/fetch/$s_!Q-lI!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp 1272w, https://substackcdn.com/image/fetch/$s_!Q-lI!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!Q-lI!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp" width="727" height="727" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:600,&quot;width&quot;:600,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:29352,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/webp&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:true,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/179667267?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!Q-lI!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp 424w, https://substackcdn.com/image/fetch/$s_!Q-lI!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp 848w, https://substackcdn.com/image/fetch/$s_!Q-lI!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp 1272w, https://substackcdn.com/image/fetch/$s_!Q-lI!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7c0bff02-cbe5-4272-8085-e80cfe0659f5_600x600.webp 1456w" sizes="100vw" fetchpriority="high"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Hello my fellow gamedevs!</p><p>After a few years working in my spare time on pixel art and gamedev, I came to the conclusion that we can&#8217;t learn everything, and when I mean everything I&#8217;m talking about reaching a mature level at the fundamentals of gamedev &#8212; basically, the essential knowledge.</p><p>But solo gamedev is about motivation and discipline, right? Don&#8217;t worry, I have good news for you.</p><p>We can&#8217;t master all the concepts, but I have a learning technique that helped me a lot during the process: creating a dictionary of concepts and short definitions.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!wZmq!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!wZmq!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png 424w, https://substackcdn.com/image/fetch/$s_!wZmq!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png 848w, https://substackcdn.com/image/fetch/$s_!wZmq!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png 1272w, https://substackcdn.com/image/fetch/$s_!wZmq!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!wZmq!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png" width="727" height="399.45054945054943" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:800,&quot;width&quot;:1456,&quot;resizeWidth&quot;:727,&quot;bytes&quot;:144959,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/png&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:false,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/179667267?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!wZmq!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png 424w, https://substackcdn.com/image/fetch/$s_!wZmq!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png 848w, https://substackcdn.com/image/fetch/$s_!wZmq!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png 1272w, https://substackcdn.com/image/fetch/$s_!wZmq!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1f70891c-7c4d-4f04-af8a-00c94c56e154_3349x1839.png 1456w" sizes="100vw"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>In this way, your subconscious is creating a treemap structure in your brain which later, during your gamedev sessions, will be showing up like a Rattata on Route 1.</p><p>In this post I want to introduce you to <strong>collisions</strong> and <strong>physics. </strong></p><div><hr></div><div class="subscription-widget-wrap-editor" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe&quot;,&quot;language&quot;:&quot;en&quot;}" data-component-name="SubscribeWidgetToDOM"><div class="subscription-widget show-subscribe"><div class="preamble"><p class="cta-caption">Gamedev Pills &#8211; Weekly Game Design and Industry Insights is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.</p></div><form class="subscription-widget-subscribe"><input type="email" class="email-input" name="email" placeholder="Type your email&#8230;" tabindex="-1"><input type="submit" class="button primary" value="Subscribe"><div class="fake-input-wrapper"><div class="fake-input"></div><div class="fake-button"></div></div></form></div></div><div><hr></div><h1>Collisions - Translate Real World Rules Into Game Rules</h1><div class="captioned-image-container"><figure><a class="image-link image2" target="_blank" href="https://substackcdn.com/image/fetch/$s_!ehwt!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!ehwt!,w_424,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif 424w, https://substackcdn.com/image/fetch/$s_!ehwt!,w_848,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif 848w, https://substackcdn.com/image/fetch/$s_!ehwt!,w_1272,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif 1272w, https://substackcdn.com/image/fetch/$s_!ehwt!,w_1456,c_limit,f_webp,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!ehwt!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif" width="402" height="251.6013986013986" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:179,&quot;width&quot;:286,&quot;resizeWidth&quot;:402,&quot;bytes&quot;:null,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!ehwt!,w_424,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif 424w, https://substackcdn.com/image/fetch/$s_!ehwt!,w_848,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif 848w, https://substackcdn.com/image/fetch/$s_!ehwt!,w_1272,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif 1272w, https://substackcdn.com/image/fetch/$s_!ehwt!,w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9b17ed10-f8f8-4743-91c6-8862736d5f06_286x179.gif 1456w" sizes="100vw" loading="lazy"></picture><div></div></div></a></figure></div><p>I&#8217;m totally conviced that Isaac Newton and Albert Einstein would be proud of games like <a href="https://store.steampowered.com/app/1049410/Superliminal/">Superliminal</a> or <a href="https://www.minecraft.net/es-es">Minecraft</a> where the physics, energy and mass laws they defined were totally challenged and the fourth wall broke. (<a href="https://www.researchgate.net/publication/356841341_Breaking_the_Fourth_Wall_in_Video_Games_A_New_Terminology_and_Methodology">Or maybe not?</a>)</p><p>There is a key moment during gamedev, when you feel you are bringing life to characters and objects &#8212; it is so satisfying.</p><p><em>But wait&#8230; how I&#8217;m supossed to do that? </em>Well, gamedev engines provide a wide set of tools to make our lives easier, but at the end the game feel will be connected to your own (and unique) translation between the <strong>real world </strong>rules and your videogame.</p><h2>Some Inspiration</h2><div id="youtube2-HauN98naZ9U" class="youtube-wrap" data-attrs="{&quot;videoId&quot;:&quot;HauN98naZ9U&quot;,&quot;startTime&quot;:null,&quot;endTime&quot;:null}" data-component-name="Youtube2ToDOM"><div class="youtube-inner"><iframe src="https://www.youtube-nocookie.com/embed/HauN98naZ9U?rel=0&amp;autoplay=0&amp;showinfo=0&amp;enablejsapi=0" frameborder="0" loading="lazy" gesture="media" allow="autoplay; fullscreen" allowautoplay="true" allowfullscreen="true" width="728" height="409"></iframe></div></div><blockquote><p><strong>GTA IV </strong><a href="https://gta.fandom.com/wiki/Euphoria">Euphoria game engine</a> was insane on that matter, the approach they had at physics manages to create thrilling atmospheres and feeling alive moments, something most of the games during the last 15 years never achieved.</p></blockquote><p>But now, going back to your unique interpretation of collisions, let&#8217;s first define a <strong>collision</strong> on our real world.</p><blockquote><p>Collision is short-duration interaction between two bodies or more than two bodies simultaneously causing change in motion of bodies involved due to internal forces acted between them during this.</p></blockquote><p>Let&#8217;s break it down (You, my subscriber, know I love to do this)</p><ul><li><p>Short-duration</p></li><li><p>Causing change in motion</p></li><li><p>Internal force</p></li></ul><p>There is actually one game that could illustrate all those properties of a collision, this game is called <strong>Arkanoid</strong></p><p class="button-wrapper" data-attrs="{&quot;url&quot;:&quot;https://www.gamedevpills.com/subscribe&quot;,&quot;text&quot;:&quot;Want to learn more? Click for pills&quot;,&quot;action&quot;:null,&quot;class&quot;:null}" data-component-name="ButtonCreateButton"><a class="button primary" href="https://www.gamedevpills.com/subscribe"><span>Want to learn more? Click for pills</span></a></p><h2>Arkanoid for PICO8 - Collision and Physics</h2><blockquote><p>Using Arkanoi-8 by Josh Millar developed on PICO-8 as reference - <a href="https://www.lexaloffle.com/bbs/?pid=18924#p">https://www.lexaloffle.com/bbs/?pid=18924#p</a></p></blockquote><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!by3Q!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!by3Q!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!by3Q!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!by3Q!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!by3Q!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!by3Q!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif" width="460" height="460" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:460,&quot;bytes&quot;:434191,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/179667267?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!by3Q!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!by3Q!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!by3Q!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!by3Q!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2c0f8d7b-e59d-4ee9-88a6-8b429771ebe6_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>Our goal in Arkanoid is to break all the colorful bricks on each level. There is a satisfying feeling of progress during the session, as you can clearly see what&#8217;s remaining to complete the level.</p><p>But there is another perfect scratch for your itch playing Arkanoid: the direction of the ball is based on where the ball hits the platform, changing the ball path based on your movement.</p><p>I&#8217;ve been reading the beautiful code of <strong>Arkanoi-8 </strong>to understand it&#8217;s logic and teach you how simple calculations (using math, especially algebra) can result into smooth and refined gameplay.</p><pre><code>-- Code created by Josh Millar

function collide_ball_paddle()
 -- check if ball is touching
 -- the paddle
 if(collide_rect(
 &#9;b.x,b.y,
 &#9;b.w,b.h,
  p.x,p.y,
  p.w,p.h)) then
  -- it is! make it bounce up
  -- if it&#8217;s currently moving
  -- downward
  if(b.vy &gt; 0) then
   ball_bounce_vert()
   sfx(2,0)
   b.y = p.y - b.h
   -- and change ball angle
   -- based on where the ball
   -- hit the paddle
   local bcenter = b.x+(b.w/2)
   local pcenter = p.x+(p.w/2)
   local offset = (b.x-p.x)/p.w
   b.th = 0.375 + (offset*-0.3)
   b.v += 0.1
   b.vx = b.v * cos(b.th)
   b.vy = b.v * sin(b.th)
   p.bounces += 1
  end
 end
end</code></pre><p>Let&#8217;s break it down to understand the logic behind this <em>Simple</em> collision and physics system, initially as you can read by the <strong>code comments</strong>, the game just detect if the ball hitted the platform (also called <strong>paddle</strong>)</p><pre><code> if(collide_rect(
 &#9;b.x,b.y,
 &#9;b.w,b.h,
  p.x,p.y,
  p.w,p.h))</code></pre><p>As soon as that function return a <strong>true </strong>value, then the logic of direction check is triggered, </p><pre><code>local offset = (b.x-p.x)/p.w -- Detect ball hit position at the paddle
b.th = 0.375 + (offset*-0.3) -- Calculate </code></pre><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!3H7a!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!3H7a!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!3H7a!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!3H7a!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!3H7a!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!3H7a!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif" width="542" height="542" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:542,&quot;bytes&quot;:339745,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/179667267?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!3H7a!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!3H7a!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!3H7a!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!3H7a!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3c6f8da0-61fb-4d66-a77a-6e1393115562_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">I&#8217;ve added some debug code to understand the calculation of angle visually</figcaption></figure></div><p>local offset. Calculates a normalized value (roughly 0.0 to 1.0) representing <strong>where</strong> on the paddle the ball hits. As you see at the previous recording, right side of the paddle is closer to 1.0 and left side of the paddle is closer to 0.0.</p><p>The formula <code>b.th = 0.375 + (offset*-0.3)</code> is calculating in which direction the ball should be moving, based on the previous hit calculation. Basically is the <strong>angle </strong>of the ball, which is required later to calculate our X and Y coordinates.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!-UwP!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!-UwP!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!-UwP!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!-UwP!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!-UwP!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!-UwP!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif" width="553" height="553" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/b85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:553,&quot;bytes&quot;:406622,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/179667267?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!-UwP!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!-UwP!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!-UwP!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!-UwP!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb85aa5e2-3a17-4d7c-8adc-3acaa196e586_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">caption...</figcaption></figure></div><p>We are making simple games with a tiny scope and the number of calculations and physics are limited, but imagine on AAA productions like GTA IV where physics are calculated for many objects at the same time.</p><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!XhWK!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!XhWK!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!XhWK!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!XhWK!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!XhWK!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!XhWK!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif" width="542" height="542" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/498549a5-d711-4058-a926-12c28044ea89_384x384.gif&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:384,&quot;width&quot;:384,&quot;resizeWidth&quot;:542,&quot;bytes&quot;:129609,&quot;alt&quot;:null,&quot;title&quot;:null,&quot;type&quot;:&quot;image/gif&quot;,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:&quot;https://www.gamedevpills.com/i/179667267?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif&quot;,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="" srcset="https://substackcdn.com/image/fetch/$s_!XhWK!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif 424w, https://substackcdn.com/image/fetch/$s_!XhWK!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif 848w, https://substackcdn.com/image/fetch/$s_!XhWK!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif 1272w, https://substackcdn.com/image/fetch/$s_!XhWK!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F498549a5-d711-4058-a926-12c28044ea89_384x384.gif 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a></figure></div><p>That&#8217;s when the magic of math is super useful to create efficient code, a code that could escalate to other elements in case needed.</p><p>At this system, the ball velocity (b.v) and the cos of the angle is used to determine coordinate X, then velocity and sin of the angle is used to determine coordinate Y.</p><pre><code>b.vx = b.v * cos(b.th) 
b.vy = b.v * sin(b.th)</code></pre><div class="captioned-image-container"><figure><a class="image-link image2 is-viewable-img" target="_blank" href="https://substackcdn.com/image/fetch/$s_!UNjZ!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp" data-component-name="Image2ToDOM"><div class="image2-inset"><picture><source type="image/webp" srcset="https://substackcdn.com/image/fetch/$s_!UNjZ!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp 424w, https://substackcdn.com/image/fetch/$s_!UNjZ!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp 848w, https://substackcdn.com/image/fetch/$s_!UNjZ!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp 1272w, https://substackcdn.com/image/fetch/$s_!UNjZ!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp 1456w" sizes="100vw"><img src="https://substackcdn.com/image/fetch/$s_!UNjZ!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp" width="319" height="242" data-attrs="{&quot;src&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp&quot;,&quot;srcNoWatermark&quot;:null,&quot;fullscreen&quot;:null,&quot;imageSize&quot;:null,&quot;height&quot;:242,&quot;width&quot;:319,&quot;resizeWidth&quot;:null,&quot;bytes&quot;:null,&quot;alt&quot;:&quot;Pico8sincos_v2&quot;,&quot;title&quot;:null,&quot;type&quot;:null,&quot;href&quot;:null,&quot;belowTheFold&quot;:true,&quot;topImage&quot;:false,&quot;internalRedirect&quot;:null,&quot;isProcessing&quot;:false,&quot;align&quot;:null,&quot;offset&quot;:false}" class="sizing-normal" alt="Pico8sincos_v2" title="Pico8sincos_v2" srcset="https://substackcdn.com/image/fetch/$s_!UNjZ!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp 424w, https://substackcdn.com/image/fetch/$s_!UNjZ!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp 848w, https://substackcdn.com/image/fetch/$s_!UNjZ!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp 1272w, https://substackcdn.com/image/fetch/$s_!UNjZ!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e2d995c-35bc-40f0-a8ac-48e152c7941a_319x242.webp 1456w" sizes="100vw" loading="lazy"></picture><div class="image-link-expand"><div class="pencraft pc-display-flex pc-gap-8 pc-reset"><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container restack-image"><svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke-width="1.5" stroke="var(--color-fg-primary)" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><g><title></title><path d="M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882"></path></g></svg></button><button tabindex="0" type="button" class="pencraft pc-reset pencraft icon-container view-image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg></button></div></div></div></a><figcaption class="image-caption">Sin and Cos function representation for PICO-8</figcaption></figure></div><blockquote><p>PICO-8 uses an input range of 0.0 to 1.0 to represent the angle, a percentage of the unit circle.</p><p><strong>Important:</strong> PICO-8 measures the angle in a <em>clockwise</em> direction on the Cartesian plane, with 0.0 to the right, 0.25 downward, and so on. This is inverted from the convention used in traditional geometry, though the inversion only affects <code>sin()</code>, not <code>cos()</code>.</p></blockquote><p>Applying trigonometry, we can quickly calculate the movement of the ball in a really efficient way, this calculation is commonly used for smooth gravity systems where refined physics are key to polish <strong>game feel.</strong></p><h2>Did you liked this concept? Try yourself!</h2><p>If you really enjoyed this concept as much as I did during the writing of this article I really encourage you to create physics for a <strong>basketball ball</strong> (bounce effect) using PICO-8 and the concepts shared at this article.</p><p>Keep it simple, just create an environment with a floor and your ball, depende from where you drop, the bounce will be different. You will be creating systems that could be useful for your future projects, trust me!</p><p>Thank you for reading.</p><div><hr></div><h1>Other Articles from Gamedevpills</h1><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;150fd082-1b2c-4f3f-85cc-215e9ac0b5be&quot;,&quot;caption&quot;:&quot;Hello my fellow solo gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;md&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Pico Workshop #1 - Creating UI Components&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;IT support Specialist making teams shine even when infrastructure is working, passionate about technology and videogames. Hobbyst Solo Gamedev and writing about the industry on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-11-15T20:00:44.027Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!FV5s!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5322c214-139f-4a1d-9d9b-fc82eec3ea22_600x400.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/pico-workshop-1-creating-ui-components&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:178813993,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:4,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Weekly Game Design and Industry Insights&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!-eiR!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7f7ea53e-89bd-4c17-ae94-c161880730ce_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;5f98caff-203b-4428-a38b-4a09eaa13de1&quot;,&quot;caption&quot;:&quot;We&#8217;ve been speaking about Game design, time management, scope definition and many aspects on previous post but we never mentioned our elephant in the room&#8230;&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;md&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;Every Great Game Starts with Words, Not Code&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;IT support Specialist making teams shine even when infrastructure is working, passionate about technology and videogames. Hobbyst Solo Gamedev and writing about the industry on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-10-09T18:01:32.567Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!OX0z!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7e519874-1b5b-4c76-8308-06b405786e6b_384x384.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/every-great-game-starts-with-words&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:174281379,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:6,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Weekly Game Design and Industry Insights&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!-eiR!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7f7ea53e-89bd-4c17-ae94-c161880730ce_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div><div class="digest-post-embed" data-attrs="{&quot;nodeId&quot;:&quot;70d9acb8-7c38-4a51-8bbf-0fdc9fbeef88&quot;,&quot;caption&quot;:&quot;Hello my fellow gamedevs!&quot;,&quot;cta&quot;:&quot;Read full story&quot;,&quot;showBylines&quot;:true,&quot;size&quot;:&quot;md&quot;,&quot;isEditorNode&quot;:true,&quot;title&quot;:&quot;The 3Cs Framework: Character, Camera, Controls&quot;,&quot;publishedBylines&quot;:[{&quot;id&quot;:165711587,&quot;name&quot;:&quot;Jos&#233; P&#233;rez&quot;,&quot;bio&quot;:&quot;IT support Specialist making teams shine even when infrastructure is working, passionate about technology and videogames. Hobbyst Solo Gamedev and writing about the industry on Gamedevpills.com&quot;,&quot;photo_url&quot;:&quot;https://substack-post-media.s3.amazonaws.com/public/images/f83c6b8c-2f96-40a2-a4a8-6e7859da7b72_1229x1229.png&quot;,&quot;is_guest&quot;:false,&quot;bestseller_tier&quot;:null}],&quot;post_date&quot;:&quot;2025-08-28T20:36:18.163Z&quot;,&quot;cover_image&quot;:&quot;https://substackcdn.com/image/fetch/$s_!w_Ou!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Faf16bec7-20ee-4cfb-9ae4-64034cf755c4_2560x1440.png&quot;,&quot;cover_image_alt&quot;:null,&quot;canonical_url&quot;:&quot;https://www.gamedevpills.com/p/the-3cs-framework-character-camera&quot;,&quot;section_name&quot;:null,&quot;video_upload_id&quot;:null,&quot;id&quot;:172117911,&quot;type&quot;:&quot;newsletter&quot;,&quot;reaction_count&quot;:6,&quot;comment_count&quot;:0,&quot;publication_id&quot;:2041371,&quot;publication_name&quot;:&quot;Gamedev Pills &#8211; Weekly Game Design and Industry Insights&quot;,&quot;publication_logo_url&quot;:&quot;https://substackcdn.com/image/fetch/$s_!-eiR!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7f7ea53e-89bd-4c17-ae94-c161880730ce_256x256.png&quot;,&quot;belowTheFold&quot;:true,&quot;youtube_url&quot;:null,&quot;show_links&quot;:null,&quot;feed_url&quot;:null}"></div>]]></content:encoded></item></channel></rss>