Creative Coding – GB Studio

Our final project for Creative Coding with Travis DuBose is to make a game (or interactive experience) in GB Studio. This has been a wild ride for me because I am not, at my core, a logical creature. I don’t think of things inside the boxes of coding traditionally, and so for me this is a real challenge. But, I got through the p5.js with a functional game, so I can do this, too!

9 April – Dev days left: 21

Stillwell

Welcome to Stillwell. There’s something wrong with this charming…. run down? …. little town that our main character has moved to. In fact, they don’t remember moving here at all! But, they wake up in a motel with a list of things to do, including buying one of the houses in town. Will our main character be able to unscramble the chaos of Stillwell?

Currently, while in my dev arc, my “main character” sprite is a piggy. I’ve named her Peony Piggy and she’s adorable. I don’t have a particular reason for having picked the piggy sprite off the Sprite Sheet of Many Sprites…but she was too cute to pass up, and everyone else was picking humans. (There’s a chicken, too…so I’m just saying Chloe Chicken may be a character soon, too.)

GB Studio

So my first challenge in this is to build my town/game map. I can struggle sometimes with spatial thinking if I don’t write it down or draw it out – so, I’ve put in placeholder (named) scenes. This isn’t the full map, this is just a section to show what I mean:

So, the next step is to use programs Aesprite and Tiled – Aesprite to make/modify pixel art, and Tiled to build the maps. This has been an interesting process and is also driving me insane, because we’re working in the gameboy standard Shades of Green. Here’s a screen shot from Aesprite, where I’m removing the bright green transparency green screen layer from the assets I purchased off of itch.io to make this game.

Next, we have a screen shot from Tiled, the program that allows you to pick and stamp these assets onto a “map” that will be displayed in the game. This has been a Very Interesting Process for me, because I had never considered the design complexity that is involved in one of these pixel-made top-down games.

It looks so easy, but then when you’re doing it yourself? For instance, my first map is the interior of a motel room where the character wakes up – before I “knew what I was doing” I had placed the assets down with the bright green screen behind them still, which resulted in some interesting errors…

Before I removed the transparency layer, those gray areas under and around the objects were just bright green. Now, they’re blank spaces in the map because I didn’t place the objects on another layer. This means they’re deleting the tiles on the floor/wall because they’re overwriting those tiles with their own blank areas. This is a simple enough fix now that I understand what I was doing wrong… happily this room isn’t even the final form for this map, but it’s nice to fix it up so it doesn’t look a mess.

Here’s a revamped version of the hotel office without those weird transparency issues. As you can see, just something as simple as learning to pay attention to layers (like you do in Photoshop, etc) can make a huge impact on the way the maps look in the game! I’ve also learned (the hard way, as usual!) to ensure that sprites can get through the spaces I mean for them to get through. This means I have to be sure they are at least 16 pixels wide, with each square on the map being 8×8 pixels.

The most difficult constraint for me here is that I can only use 4 colors per box. So, every 8×8 image I make for this can only have 4 colors; which is a huge constraint for someone like me – I love having tons of colors, shades, etc. This is also helping me better understand how the GB dev world works, though, and it’s definitely fun!

Moving back to the GB Studio environment, you can see where the maps I’ve worked on are being placed. I selected the motel room door, which is the highlighted orange box, to show what room transitions look like when they’re put in. That’s the dotted line that leads to the blue rectangle. The white arrow is the direction the sprite will be facing. The orange rectangle on the bed is the sprite’s spawn location and facing direction. All the red sections are “collision” spots for the sprites. I didn’t fix the collision in the office yet, so you can see where it isn’t correct in this screen shot, but in the other scenes, like the Wibis interior or exterior you can see all the places the sprite will collide with an “object.” You can also see all the orange rectangles that show where the character will transition in the live game!

The next thing is the visual coding that goes into GB Studio to create the interactions and game logic. This is…confusing to start, but then makes a bit of sense. I know for sure that if Professor DuBose hadn’t taken us kicking and screaming through js that I would not likely have understood the game logic side of things. Even though I’m still a day -9 coder, I’m starting to get the hang of a few things.

This is a basic if/else statement in GB Studio. This is the trigger to leave the motel room; so, when the sprite “enters” the trigger rectangle, it runs this script. First, it checks for the boolean value of the sprite’s “hasMotelKey” variable. This is default set to 0 or false. If you try to leave without the key it will say, “You should grab the key before you go.” and then the sprite will move back towards the bed side table. “Display..” is the dialog, “Player move to..” is the forced movement. If the character DOES have the key, their variable is hasMotelKey = 1, or true, and they can move out the door into the motel office. When they return there is a similar check for the key to get into the room.

While I don’t have any plans on making the main character lose the room key (yet), if they do follow through with buying a house in town they will move there and no longer need the motel room.

Now, in GB Studio, when I hit the “play button” on the top right…it will compile my game and let me run around in it!

Alright, now that I’ve hit play and waited three years, the game has popped up in its own little standalone window!

There’s not much to do in Stillwell yet, but Peony Piggy can always sit in the motel and enjoy her mocktail!

Major dev Issues this week:

9 April:

Devlog Update: Solving Dialogue Freeze & Transparency Issues in GB Studio

Milestone: Peony Pig is finally vibing in the motel — keys in hoof, cocktail in reach, and dialogue behaving exactly as it should.

This week while playtesting my Stillwell Game Boy game prototype in GB Studio 4.1.3, I ran into a couple of foundational but frustrating issues:

The Problems:

• Dialogue boxes weren’t closing, leaving my player character soft-locked in cutscenes.
• My player character, Peony Pig, was surrounded by unexpected white boxes due to a sprite transparency error for the assets on the map.
• After a scene transition, Peony briefly turned into an arrow sprite — which was hilarious but very wrong.

The Fixes:

• Dialogue Freeze: I discovered that GB Studio 4.1.3 handles dialogue closing through the “Behavior” tab inside each Display Dialog event.
  Setting “Close When: Button Pressed” (A/B/Any) resolved the stuck text box issue.
• Transparency Issue: I re-exported Peony’s sprite sheet and ensured the background was properly indexed as transparent in Aseprite for both the sprite and the assets used to make the map.
  • Layers must be used in Tiled when making a map.
    • Retooled the scene maps so that the floor/wall textures were on the bottom layer, the decorations were on a second or third layer, and removed the bright green layer from the assets to ensure smooth transparency!
  • Problem solved — no more floating white rectangles.
• Arrow Sprite “Glitch”: This happened because the target scene didn’t have Peony set as the default player sprite! I fixed it by making sure her sprite sheet is assigned globally in Project Settings.

Outcome:

Peony can now:

• Pick up her motel room key!
• Exit and re-enter scenes with no softlocks!
• Fully render without transparency artifacts
• Sip her ghostly cocktail in peace!

Screenshot:

“The cocktail’s strong. The vibes are stronger.”
— Peony, definitely

April 17 – Bugs, Beds, and Banter

This week’s focus was scene transitions, sprite persistence, and the uncanny joys of watching a pig wake up in a haunted motel room.

Issues Encountered:

• Player sprite wasn’t persisting between scenes due to GB Studio resetting to the default scene sprite sheet.
• Dialog box wouldn’t close after the motel key trigger fired.
• Trigger conditions weren’t correctly recognizing global variables due to confusion between local and actual global variables.

Solutions:

• Confirmed that global variables are displayed in dropdowns with $, but are still scoped globally. Used On Init in each scene to reapply the correct sprite based on character selection.
• Discovered the fix for frozen dialog: changing the “Close When” behavior in the Display Dialogue block under the Behavior tab from “A” to “Any.” (This may have been related to my own computers and not the GB Studio program, but a lot of times when I hit Z the game did not respond. Switching to ANY for prompts that didn’t require an A/B differentiation fixed this.)
• Added debug dialogue to confirm which condition was firing—but this didn’t work as well as printing to console did with p5.js. Professor Dubose showed me the debugging panel and how to manually set variables to do troubleshooting without having to run through the whole game to pick up variable changes.

Sprint Plan Made:

• Define the flow for character persistence and intro.
• Animate the Wibis sign and incorporate tile priority to let Peony Pig (and other characters) sleep under the blanket, as a queen should.
• Implement triggers that allow the player to interact with the motel key and set a variable to track it.

---

April 24 – Wibis is Watching

This week focused on polish, misdirection, and environmental storytelling. We began implementing hidden words, flickering lights, and the surreal atmosphere that defines Stillwell.

New Additions:

• Used image layering and collision masking to hide the word “DEVIATE” in a Wibis shelf. Not entirely successful, it looks very clear to me.
• Created eerie cooler doors that display “RUN” and “HELP” when looked at closely, one is backwards and both are attempted to be obscured by following the coloring and patterns of surrounding coolers.
• Implemented animated Wibis signage that flickers erratically, using variable frame timing to give it an off-kilter, possessed energy. I’d like to actually make this longer, but i’m not sure if it will upset the memory capabilities of GB Studio. I’d like it to look “dark” or off for an extended period of time and then flash back on.

Technical Fixes:

• Learned how to use tile priority to eliminate the need for actor-based shelf overlays. I’m not sure what I did wrong, but this doesn’t seem to be working even though Professor Dubose showed me this in class and it worked fine for him. (Of course it works fine for him! LOL!)
• Reorganized map tiles to simplify pathing and visual hierarchy.
• Added “character flavor intros” — eerie, personalized lines that fire based on which character is selected (Rebel, Jenkins, Cowboy, or Peony).

Sprint Plan Made:

• Fix the motel parking lot visual cues and clarify entry points using path tiles and props.
• Add NPC dialogue for the motel drone and Wibis cat clerk.
• Implement key pickup as an actor that vanishes after hasMotelKey = true.

---

May 1 – Final Sprint, Full Possession

The last full week before presentations. Much of the work was around integration, polish, and demo experience flow.

Major Milestones:

• Finished the “Road to Town” scene and created a final screen that says something along the lines of:
  “Stillwell is waiting for you… Find out what you left behind in the full version.”
• The sign at the end of the road now triggers a soft stop in gameplay, directing the player to rest — mirroring themes of grief, exhaustion, and denial – and pulls them into a ‘garden’ scene where the game returns to the start after setting the sprite back to the ‘mouse’ so they don’t just jump in the well again.

Creative Highlights:

• The intro scene starts with a literal mouse (not a cursor!) who attempts to jump into the well to start the game — and is denied. The “mouse” can’t begin until the player picks a form. It’s weird. It’s perfect. It’s Stillwell. I considered using a cursor type actor for this, but the idea of it being an actual mouse made me laugh. A lot.

Sprint Plan Made:

1. Build “Road to Town”
2. Create “Thanks for Visiting” scene
3. Clarify barriers in parking lots – this needs to be revisited, it’s currently just a bunch of added barriers that don’t really fit the game’s aesthetic.
4. Write NPC dialogue (motel clerk & Wibis cat)
5. Implement tile priority fixes
6. Create key sprite & pickup logic
7. Stretch goal: asset refinement

Do you want to know more about my degree program? I’m in the Emerging Media program at Rutgers-Camden. I’d love to talk to you about the program, our wonderful professors, and the delightful cohort we have here. Drop me a line and let me know you found my blog and want to know more!