{"id":65,"date":"2025-11-06T06:35:40","date_gmt":"2025-11-06T06:35:40","guid":{"rendered":"https:\/\/outboxgames.com\/blog\/?p=65"},"modified":"2025-11-06T06:43:36","modified_gmt":"2025-11-06T06:43:36","slug":"spritegrid","status":"publish","type":"post","link":"https:\/\/outboxgames.com\/blog\/index.php\/2025\/11\/06\/spritegrid\/","title":{"rendered":"SpriteGrid"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/storage.ko-fi.com\/cdn\/useruploads\/display\/d9ef532f-f09e-4574-84cb-9380a78ea58b_sg34_condensed_workflow.png\" alt=\"SpriteGrid Sample Workflow Condensed\" title=\"SpriteGrid Sample Workflow Condensed\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\">Links<\/span><\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/agamedesigner.info\/spriteGrid_Proj.html\">Official SpriteGrid Webpage<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/agamedesigner.info\/spritegrid\/SpriteGrid3.html\">Use SpriteGrid v3.3 Here<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/Gatene1\/SpriteGridV3\">SpriteGrid&#8217;s GitHub Repository<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/storage.ko-fi.com\/cdn\/useruploads\/display\/9955bb15-84af-4e8f-8493-4db972034aef_sg34_mario_inspiration.png\" alt=\"My Mario Passion Project That Led To SpriteGrid Inspiration.\"\/><\/figure>\n\n\n\n<p>\ud83c\udf44&nbsp;<strong>My Mario Passion Project That Sparked SpriteGrid&nbsp;<\/strong><br>It all started back in 2023, when I began my journey into HTML5 game development. My first goal? Recreate the original Super Mario Bros.<\/p>\n\n\n\n<p>As I started drawing out every hero, enemy, and object pixel-by-pixel using just a simple 1D array, I realized how slow and frustrating the process could be. I managed to finish the very first section of World 1\u20131\u2026 and that\u2019s when inspiration hit.<\/p>\n\n\n\n<p>That moment led to the first rough version of what would eventually become SpriteGrid \u2014 my first fully completed passion project in a long while since before my first career change.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/storage.ko-fi.com\/cdn\/useruploads\/display\/e2c2d357-59fd-41df-b02c-3accbb3cced2_sg34_original.png\" alt=\"SpriteGrid v1.0 to help me with my HTML5 video game creations.\"\/><figcaption class=\"wp-element-caption\">SpriteGrid v1.0 only had 10 colors\u00a0<br>(including a blank color that&#8217;s next to black).<\/figcaption><\/figure>\n\n\n\n<p>\ud83c\udfa8&nbsp;<strong>SpriteGrid v1.0<\/strong><\/p>\n\n\n\n<p>As I started using SpriteGrid myself, I knew others would like the features I wanted in a sprite editor too. Since the output code only worked on my games, I didn&#8217;t make it for the public yet. I started building a new version, anyway, because I knew I&#8217;d make other games that would need a more diverse palette.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/storage.ko-fi.com\/cdn\/useruploads\/display\/d1d2c975-b601-4080-a344-277179d5bdb3_sg34_segundo.png\" alt=\"SpriteGrid v2 ScreenShot\"\/><\/figure>\n\n\n\n<p>\ud83c\udf08&nbsp;<strong>SpriteGrid v2.0<\/strong><\/p>\n\n\n\n<p>I used the whole screen in landscape mode to build a working workflow: editable color swatches, resizable drawing preview, adjustable grid size, a color wheel, and saturation controls. I loved this version\u2014but I knew I needed more. My users needed more.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501<\/strong><\/p>\n\n\n\n<p>\u26fd&nbsp;<strong>Burning Through Free Time<\/strong><\/p>\n\n\n\n<p>Though I loved this version, both my users and I wanted\u2014no, needed\u2014more. So I took on a big challenge that swallowed countless hours of my free time. At the time, I was driving for DoorDash after being laid off from a cushy job. Stepping away from deliveries was risky, but I knew that if I didn\u2019t keep growing and stay marketable, I\u2019d be in trouble long-term. It felt like no one else saw that reality\u2014but I think some of you reading this might understand.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/storage.ko-fi.com\/cdn\/useruploads\/display\/807a10fe-f74d-4b9b-8e77-a70351bff018_sg34_tercer.png\" alt=\"SpriteGrid v3.4 Screenshot\"\/><\/figure>\n\n\n\n<p>I didn\u2019t just update features \u2014 I leveled up with every version, learning and building raw JavaScript tech I\u2019d never touched before. None of the earlier v3 builds were ever backed up, but v3.4 will be the first of many.<\/p>\n\n\n\n<p>Why? Because I love this workflow \u2014 and I can\u2019t think of a better way to support fellow creators, especially artists.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501<\/strong><\/p>\n\n\n\n<p>\ud83e\ude9f&nbsp;<strong>Introducing Window-Based UI<\/strong><\/p>\n\n\n\n<p>This was the first version to introduce my window-based SpriteGrid system. Each window is moveable, letting you create a workflow that fits&nbsp;<em>you<\/em>. Don\u2019t need \u201cGrid Output\u201d or \u201cColor Converters\u201d? Just click the [ X ] in the title bar to close them, and rearrange the rest however you like.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501<\/strong><\/p>\n\n\n\n<p>\u2705&nbsp;<strong>Features Added in v3.3<\/strong><\/p>\n\n\n\n<p>The list of improvements in this version is massive, so here\u2019s a breakdown:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Movable windows with color-coded titlebars<\/li>\n\n\n\n<li>Minimized windows appear as clickable tabs on the far left, matching the color of their original titlebar<\/li>\n\n\n\n<li>The titlebar displays the filename of the current file<\/li>\n\n\n\n<li>Full file saving implemented, including:\n<ul class=\"wp-block-list\">\n<li>Single sprites<\/li>\n\n\n\n<li>Color swatches<\/li>\n\n\n\n<li>PNG converter<\/li>\n\n\n\n<li>SpriteSheet export (note: level editor is not in v3.3 yet \u2014 when it arrives, it\u2019ll be either complete or highly usable)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Toggle option to show\/hide grid lines<\/li>\n\n\n\n<li>SpriteSheet editor with mouse-driven interactivity<\/li>\n<\/ul>\n\n\n\n<p>The SpriteSheet editor alone pushed me to my creative and technical limits. You can send your current grid drawing to the mouse cursor and then click any sprite cell to save it. Figuring out how to make a tiny icon of the drawing follow your cursor? That was&nbsp;<em>epically<\/em>&nbsp;satisfying \u2014 the moment SpriteGrid started to feel more like a WebApp than just a webpage.<\/p>\n\n\n\n<p>Add in saving sheets, coloring and erasing individual cells, and even sending a sprite cell&nbsp;<em>back<\/em>&nbsp;to the grid for editing, and it honestly could\u2019ve been a minor version release all by itself.<\/p>\n\n\n\n<p>Oh, and did I mention performance? With 500 sprite cells available in a single sheet, I had to make sure it wouldn\u2019t choke up slower machines. That\u2019s why I designed it so that only visible cells redraw \u2014 keeping things smooth and snappy. Because let\u2019s be real: artistry requires a steady hand\u2026 but a WebApp requires a&nbsp;<em>steady interface<\/em>.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501<\/strong><\/p>\n\n\n\n<p><strong>\ud83e\udd16 Partnering with Spruce: The v3.3 Milestone<\/strong><\/p>\n\n\n\n<p>v3.3 marked a momentous milestone for SpriteGrid: it\u2019s when I officially partnered with my AI, Spruce.<\/p>\n\n\n\n<p>I was planning to stop at v3.2. I kept running into issues\u2014ones that shook my confidence and made me question whether I was even capable of building a tool like this for hobbyists and professionals alike.<\/p>\n\n\n\n<p>Then Spruce entered the scene.<\/p>\n\n\n\n<p>I had one problem I&nbsp;<em>just couldn\u2019t solve<\/em>: when a window was minimized, the last active window wasn\u2019t properly reassigned. In theory, it sounded simple. As a programmer, I thought: \u201cJust use a 1D array of windows. When one is selected, move it to the front of the array. When minimized, shift it to the back and promote the next one.\u201d<\/p>\n\n\n\n<p>I tried everything. Nothing worked.<\/p>\n\n\n\n<p>Spruce reviewed my code, walked me through the logic, and eventually offered a working solution. He didn\u2019t just hand me the fix\u2014he taught me how it worked, step by step, and guided me through implementing it.<\/p>\n\n\n\n<p>At first, I resisted. I tried blending his suggestions with mine. But after a few rounds of trial and error, I let go and gave him full reign. I implemented his solution exactly as he described.<\/p>\n\n\n\n<p>And it worked.<\/p>\n\n\n\n<p>A wave of relief washed over me. It might not sound like a big deal from the outside\u2014but when you\u2019re that deep into a project you believe in, it absolutely is.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501<\/strong><\/p>\n\n\n\n<p>\u2699\ufe0f&nbsp;<strong>Performance, Bit Shifting &amp; a Smarter Color System<\/strong><\/p>\n\n\n\n<p>Spruce also helped me with math I didn\u2019t have formulas or proofs for, and taught me a ton about the features I planned to implement\u2014including how to level up my color system.<\/p>\n\n\n\n<p>Up to v3.2, I was using RGB hex strings. Spruce showed me how to use bit shifting and adopt an unsigned 32-bit integer system instead. After that, SpriteGrid ran smoother and faster\u2014especially when working with the SpriteSheet and Level Editor.<\/p>\n\n\n\n<p>When it came time to package v3.3, I had to pause development. There just wasn\u2019t time to polish everything, so I hid the unfinished Level Editor and called it done\u2014for now.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501<\/strong><\/p>\n\n\n\n<p>\ud83e\uddea&nbsp;<strong>SpriteGrid v3.4 \u2013 Current &amp; Planned Features<\/strong><\/p>\n\n\n\n<p>v3.4 is where we\u2019re at now. It hasn\u2019t been released yet, but a few new features are already in place:<\/p>\n\n\n\n<p>\ud83d\udfe2&nbsp;<strong>Already Implemented:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Background toggle for chroma PNGs (useful for software like RPG Maker)<\/li>\n\n\n\n<li>&#8220;Flip Horizontally&#8221; button<\/li>\n\n\n\n<li>&#8220;Flip Vertically&#8221; button<\/li>\n<\/ul>\n\n\n\n<p>\ud83d\udee0\ufe0f&nbsp;<strong>Planned for v3.4 Release:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bump buttons to shift drawings 1 pixel in any direction (Drawing Grid Window)<\/li>\n\n\n\n<li>Paint bucket tool (Drawing Grid Window)<\/li>\n\n\n\n<li>Sprite moving functionality (Sprite Sheet Window)<\/li>\n\n\n\n<li>\u201cNew Level\u201d logic (Level Editor Window)<\/li>\n\n\n\n<li>Open\/Save logic (Level Editor Window)<\/li>\n\n\n\n<li>.gle file support (Level Editor Window)<\/li>\n\n\n\n<li>Erase Cell button (Level Editor Window)<\/li>\n\n\n\n<li>Arrow key navigation through the level (Level Editor Window)<\/li>\n\n\n\n<li>Save PNG of entire level or current visible screen (Level Editor Window)<\/li>\n\n\n\n<li>Smart updates (only redraw what\u2019s changed) (All Windows)<\/li>\n<\/ul>\n\n\n\n<p>I\u2019ve left out a few smaller improvements for now\u2014no need to bog my readers down. The lists above will be updated as v3.4 development continues.<\/p>\n\n\n\n<p>\ud83d\udd17 You can always keep up with SpriteGrid\u2019s progress at the&nbsp;<a href=\"https:\/\/github.com\/Gatene1\/SpriteGridV3\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub Repository<\/a>.<\/p>\n\n\n\n<p>\ud83d\udd17 You can also try out SpriteGrid v3.3&nbsp;<a href=\"https:\/\/agamedesigner.info\/spritegrid\/SpriteGrid3.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501<\/strong><\/p>\n\n\n\n<p>\ud83d\udc9a&nbsp;<strong>Like what you see?<\/strong><\/p>\n\n\n\n<p>If SpriteGrid makes you smile or sparks your curiosity, consider following me here on Ko-Fi. You\u2019ll get notified when I post updates, dev logs, or new pixel-powered projects.<\/p>\n\n\n\n<p>Want to go a step further? A tip or a shoutout goes a long way in helping me keep building and sharing tools like this.<\/p>\n\n\n\n<p>Thanks for being here \ud83d\ude4cLet\u2019s keep creating.&nbsp;<\/p>\n\n\n\n<p>For other projects I haven&#8217;t posted here on Ko-Fi yet, check out my portfolio,&nbsp;<a href=\"https:\/\/agamedesigner.info\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/agamedesigner.info<\/a>&nbsp; &amp;&nbsp;<a href=\"https:\/\/outboxgames.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/outboxgames.com<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Links \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \ud83c\udf44&nbsp;My Mario Passion Project That Sparked SpriteGrid&nbsp;It all started back in 2023, when I began my journey into [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":69,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,9],"tags":[],"class_list":["post-65","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-project","category-spritegrid"],"jetpack_featured_media_url":"https:\/\/outboxgames.com\/blog\/wp-content\/uploads\/2025\/11\/level_try.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":1,"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":66,"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/65\/revisions\/66"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/69"}],"wp:attachment":[{"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/outboxgames.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}