Exploring the World of Indie Game Development: My Journey from Pixel Art to JavaScript Frameworks and Beyond
Tags: gamedev, javascript
Published: 2023-01-23 18:30:30

> **TLDR**: As a web developer I look into what it takes to make a GBA style Pokémon game from the tools used to make Sprites ([Aseprite](https://www.aseprite.org/), [Tiled](https://www.mapeditor.org/)) to the tools available for coding the game ([Phaser](https://phaser.io/), [GBStudio](https://www.gbstudio.dev/)) 
 as well as avenues for distribution (ROMs, HTML, [itch.io](https://itch.io/)).

I've been interested in video game development because it combines several things I love: pixel art, graphic design, and the indie gaming scene. I've always been fascinated with pixel art, especially since playing the original Pokémon games on the Game Boy. I've been closely aligned with pixel art since my days messing around with MS paint and in college, studying graphic design and using Photoshop and Illustrator. Pixel pushing was also a [big part of the 2000s web aesthetic](https://reggi.tumblr.com/post/707163709625221120).

The indie gaming scene is thriving, particularly in the horror genre. Early classics like Silent Hill and Resident Evil helped pave the way for the horror genre, but I believe the recent rise in popularity is attributed to Five Nights at Freddy's (FNaF). The simplicity of the original game from a technical perspective makes the barrier of entry seem accessible. Now, FNaF is a franchise that is fully established with merchandise and even a possible movie deal.

One thing that contributes to the popularity of these games is that they serve as content for YouTubers and streamers. They can play a small indie game and create content from it, providing free advertising for the game. For example, the channel [Game Theory](https://www.youtube.com/watch?v=hfgKdbdVt1I) has several videos exploring the lore of FNaF. One content creator under the name of [ManlyBadassHero](https://www.youtube.com/@ManlyBadassHero/videos) on YouTube, who primarily plays indie horror games, has exposed me to a variety of different game mechanics and indie storytelling.

I discovered [itch.io](https://itch.io/) a few months ago and was impressed by its design and goals. It has a clean interface and allows creators to put their creations on the web for free or for purchase. If the game is HTML compatible, it can be played directly on the site, and if it's for a specific platform, it can be downloaded. Creators can set strict pricing for their work or use a flexible "pay what you want" model. I believe that sites like itch.io, which adapt to the new era of the web and provide creators with tools to monetize their work, are the future.

Inspired by some of the indie games on the site like [Adulting! by Eric Wilder](https://eric-c-wilder.itch.io/adulting) and [Waste Eater by Cain](https://cmddx.itch.io/waste-eater), I wanted to understand the process of creating a game. Even though I've never played it, I've heard the stories surrounding Stardew Valley, where a single developer spent 2 years in a room and came out with a fantastic game, designing all the art, mechanics, and music. These stories are incredibly inspiring. I was curious about the amount of effort that goes into creating "orthogonal" or top-down games like The Legend of Zelda: A Link to the Past or Pokemon Emerald.

Coincidentally, I purchased Aseprite a few months ago as well, as I was interested in the modern tools that creators were using. Aseprite is a sprite editor. I wanted to experience that old MS Paint nostalgia and see what I could create.

When I am interested in something that is programming related but not specifically in languages or frameworks that I am familiar with, I often append "JavaScript" to my search. This time was no different, I quickly found [Phaser](https://phaser.io/), a JavaScript framework that suited my needs. I came across an article called "[Modular Game Worlds in Phaser 3 (Tilemaps #1) — Static Maps](https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6)", which was exactly what I was looking for.

As I went through the [code samples of the Pokémon clone ](https://codepen.io/mikewesthad/pen/BVeoYP)provided in the article, with only a minimal understanding of sprite maps, I was surprised to see that this clone was created entirely in JavaScript and with under 200 lines of code. I learned that JSON plays a significant role in how these games work. I also realized that Aseprite alone is not enough and that another piece of the puzzle, a map editor called "[Tiled](https://www.mapeditor.org/)," was necessary to build these JSON files.

The sprites are divided into three main "sheets": the player or "atlas," the "maps" consisting of different layers (Below Player, World, Above Player), and individual movable objects. The code is relatively simple to set up using Phaser, once all the images are exported from Tiled and JSON files are generated. The code itself is not overly complex.

Through my learnings, I came to understand that the technical capabilities are not the most challenging aspect of creating a game like this. The difficulty lies in creating the artwork, writing the story, and ultimately getting other people to play your game.

Creating a few sprite tiles, maps, and objects without any experience can take hours, if not days. I made a house and a few objects and quickly got absorbed in the work. After about 6 hours of pixel pushing, I zoomed out and had the smallest house and bed, and in the grand scheme of a full game, it would take much longer. While this was my first time working with these tools, palettes, and layers, and I may become faster with more experience. One thing I learned is that it takes much less time if you limit your palette, for example, using a limited four-color Gameboy color palette can save time.

I recently played with an alternative to Phaser called [GBStudio](https://www.gbstudio.dev/), which boasts "A quick and easy-to-use drag-and-drop retro game creator for your favorite handheld video game system." It is a full-featured editor or IDE for developing GameBoy games, which is very different from using Phaser. The major benefit of using GBStudio over Phaser is that GBStudio can export an actual ROM file that can be used with GameBoy emulators and even flashed onto a cartridge to play directly on a GameBoy, which is really cool. GBStudio also allows you to export the game for the web using a WASM emulator. This means you have multiple avenues for distribution on itch.io, even selling boxed, stickered, and flashed cartridges. One possible advantage of using Phaser is if you wanted to create something web based or multiplayer, something like "Among Us", then I wouldn't go with GBStudio. 

I think my journey has led me to appreciate game development much more. It's not easy to create all the various components and bring them together to create an experience and tell a story. I noticed the trend of games like [Inscryption](https://store.steampowered.com/app/1092790/Inscryption/) and [NieR:Automata](https://store.steampowered.com/app/524220/NieRAutomata/) that incorporate different game types within the same game, shifting or changing things as the game progresses. [Dwarf Fortress](https://www.youtube.com/watch?v=VAhHkJQ3KgY) is also super inspiring, as a project that two brothers have worked on for many years. I wonder how games will change and evolve over the next few years as virtual reality and artificial intelligence tools become more prevalent and how they will play with our existing expectations of what a game should be and change them. Is there a future where tools like MidJourney can just generate all the pixel artwork for you? Will people use ChatGPT for aiding in the narrative storytelling? Will this liberate people and offer new avenues for creative expression? Or will this saturate the market with cheap copy cats looking to score a quick buck? Only time will tell.