GB Studio(Gameboy Studio)
Published: 2023-03-06 14:47:18

In the past (1989) there was a handheld system that was used for entertainment. That handheld was called Nintendo Gameboy, it was an 8-bit fourth-generation handheld game console. Was created by the popular game company Nintendo. This handheld game console was very popular in the past and is still popular today. Many people would like to go back and play some old classic games. But due to new popular game consoles like the Nintendo switch, older game consoles were in less demand and Nintendo discontinue production. Many people who loved the Gameboy were upset that they could no longer play Gameboy games or buy a replacement for the Gameboy. Luckily one of those people made a Gameboy base game and a system for Game Jam. Then later after the Game Jam the inventor made some changes to the system and released it to the public for anyone to use. It name was Gameboy Studio (GB).

**Background on GB Studio**

GB Studio only uses JavaScript language in a coding block style. This system was created by Chris Maltby in the year 2019 for a pixel art game jam where it was Gameboy. After they released GB Studio many people started to create Gameboy games. Like most game-building software you can play these Gameboy games on any system from your computer, laptop, and mobile device. You are even able to put it on a real Gameboy cartridge to play on a real Gameboy. It is a great starter system when you are learning how to code. The block style of coding allows the user to understand the logic that goes into coding.

Since GB studio is a base for the Gameboy you might be wondering what am I able to do with it. 
.make maps and code
.make sprite animations
.edit color pallet
the last update added
.make music
.dialoged review

Also to make any maps or sprite you need a pixel art map maker and image editor. Here are two I would recommend:
.tiled
.gimp

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/677g59riquh04gep4jb2.PNG)

If you look at the top left you will see a toolbar with five tools. The tools are select, add, erase, wall, and color tool.
.Select: lets you select maps, triggers, and actors
.Add: lets you add maps, triggers, and actors
.Erase: lets you remove triggers and actors
.Wall: lets you place walls in maps to limit the player's moments
.Color:  allows you to change the color pallet

 You are probably wondering what are maps, triggers, and actors? 
.map: A flat 2d world where the player can move around
.trigger: A marked area where if the player leaves or enters that area it will run a carton event 
.Actor: A Npc or none playable charter which the player can interact with. it can also be an object or item, like a chest or sword; 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zxbc15pv2k5qqnlyx26.PNG)

if you look at the right you will see a coding panel. At the top of the panel, it will display the selected trigger name or actor name with their current position and size. Then, if you look in the middle of the panel you will see a button that says add an event. After clicking it a search bar and dropdowns will appear with the name of each function in Gb Studios. After you make a selection a function will be added to the panel. You are then able to drag and drop any function in the panel in any position or any function. Like all coding languages, it runs the block code from top to bottom and you can still create variables.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8scb3pt3js5vktc128b8.PNG)


**Sprites**

Let's take a look at sprites but, what are sprites? They are png/images with a pixel art style. They can be a  Charter, an item, or something else. Sprites are used to represent the player or some type of actor. At the top left, there is a drop-down filled with different editing modes. After entering the sprite mode on the top left a new toolbar will appear with a bottom panel. The bottom panel will hold a png of your sprite with a frames panel. The frames panel will allow you to give a sprite animation and hold a certain position like an idle down state. The new toolbar that appears will allow you to play those animations. Also, you need to drag and drop certain parts of your png into the middle of the page to create a frame. An important thing to remember about making a sprite is the color pallet. GB studio will only accept four colors with one being a transparent color. You can change the color in the pallet inside GB studios and allow for more than four colors to be used on a sprite and map.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9rcir77n5uso7qwc9jv.PNG)

**Adding Text & Music**

Now that we know how to add maps, actors, triggers, and even create sprites with animations let's look at how to add text and music. In the game world mode when an actor or trigger is given a text/message to say a message. For example, "HI". This message would then be added to the coding panel. But what if you want to look at a specific text and you can't remember where it is? If you head to the top left drop-down and select Dialogue review. It will show multiple drop-downs connected to each map that stores every text used in that map. Then if head back to the top left drop-down and select music, it will enter the music mode. This is similar to the sprite mode with an animation toolbar and a frames panel at the bottom. The main difference is it is called patterns instead of frames. In the middle panel, there is a keyboard with a graph on the side, if you select a box in the graph it will be marked. Then after hitting the play button in the toolbar. A red line will appear and move right on the graph and play a sound after hitting a selected key. After the red line moves to the end of the graph, it will move on to the next pattern. You are even able to overlap other patterns to make some nice music.  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyim6jvbfnzq7c8s0fhg.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rjsztdibli44kiwo3ve.PNG)




All information and images that were used for this blog are linked below. Some images are screenshots taken from the GB studio default game.

//sites
https://www.gbstudio.dev/
https://en.wikipedia.org/wiki/Game_Boy
https://www.gbstudio.dev/about
https://chrismaltby.itch.io/untitled-gb-game
https://www.youtube.com/watch?v=5RfCv7k1ymo&t=443s