Bitsy 4.3 (well, 4.3 when I started and 4.5 by the time I'd finished writing this!)

Nearing its first anniversary (January 16th, 2018), Bitsy has evolved so much, and is still continuing to do so!
My old tutorial is already out of date so I thought I'd make a new game and tutorial (the second tutorial, the ..two-torial.. no I will not apologise, and yes the next one will be three-torial even though that won't make sense any more) to talk about the features that have come in since.

What do the new features look like?

The new features are primarily witin the dialog window, and include some cool 'text effects', as well as customisable ordering of sections of text (e.g. shuffling and lists), 'items' which are essentially sprites that you can pick up, and a simple language for using variables associated with items.
I made a new game to attempt to sum up some of these changes while writing this tutorial, which is embedded below and available here. There are many much more interesting examples of the new dialog on though, which I would encourage you to browse and play through! I've added a list at the bottom of the page with a few that I particularly enjoyed.

Tell me more!

First, if you're not already there, go to .
The new features are primarily within the dialog window. You'll see two tabs, 'new section' and 'text effects'. The 'new section' tab contains the editing area for the body of your dialog, whereas the 'text effects' section allows you to add some really cool visuals to indiviual letters, words, or whole passages.

One quick thing to mention which is incredibely useful is the ability to name your rooms now! This shows up in your game data, and is very handy when navigating between rooms and scrolling through a list when placing exits.
Exploring the dialog window

To access the dialog window, either click the dialog tab from the main Bitsy menu, or, above the old dialog editor in a sprite (or item - which I will come on to later!), click the button highlighted here.

To add a text effect, highlight the section of text that you want to modify and then click on one of the 6 options above it. This will insert tags in curly braces around your text (you can also write any of this in manually rather than clicking the buttons if you are familiar with the tags).
Select the 'preview' button at the top of the dialog window and scroll to your room view to see how this effect looks in-game. Press stop at any time to exit the preview.
There's also a button called 'show code' next to 'preview'. If you click on this it shows you the code associated with that section of dialog. This will be really helpful later when dealing with more advanced dialog options, but for now it's just useful to know it is there! Click 'hide code' to return to the default dialog screen. The text effect tags are really cool in that they can also be combined. Play around with them and see what effects you can make!
As a quick guide:

  • color 1: makes the text the 'background' colour from the current room's palette

  •  color 2: makes the text the 'tile' colour from the current room's palette

  •  color 3: makes the text the 'sprite' colour from the current room's palette

  • wavy: makes the text wavy!

  • shaky: makes the text shaky!

  • rainbow: makes the text flash in rainbow colours!
As a tip - if you make a new room and are overwhelmed by the blank space, try making a really simple tile (even just one solid colour) and block out the rough layout of the room, maybe indicating the path the player will walk through or the location of key objects and scenery. Then you can replace the tiles gradually and move them around until it’s right (this is also how I do any multi-tile pieces of scenery).

If your room is anything like mine, it looks like it needs to lead somewhere else. You could definitely make an entire Bitsy game in one room (see my list at the end for a couple of examples of this), but ‘exits’ (transitions between rooms) are one of the core elements of Bitsy, and are one of the most interestingly explored parts of the tool in my opinion.

Let’s start with something basic though and just allow the player to walk into a new room from the edge of this one.

Click on the ‘room tools’ tab underneath the room. There’s a few useful navigation and view tools here which are worth exploring. The ‘grid’ button toggles the tile grid on and off, which can make it easier to see what’s going on in the room. The ‘walls’ button shows you a mask of all the tiles that are marked as ‘wall’, which is really handy for quickly checking your collision zones. To make a new room, either use the + button, or the duplicate button next to it if you want to preserve your tile placements. A new room appears and you can now move back and forth between rooms using the arrow buttons.
Let’s put an exit in first so you can see how it works - you can change the placement, delete it, or add more later if you want to.

In the tools menu at the top of Bitsy, make sure ‘exits’ is selected. Navigate back to Room 0, then click ‘place new exit’ in the ‘exits’ panel. A mini-view of the room will appear, and a dropdown list of all your rooms. Select the room you want, and then click on the location in the mini-map for the exit destination.

A good way to think of these exits is as teleporters for your avatar. The exits can lead anywhere, even within the same room. As far as I know there is also no limit on the amount of exits you can place. Once you’ve placed the destination, play the game to see how it works.

To edit an exit, click on its tile in the room panel to select it, and the mini-map will reappear so that you can click on a new location for the destination. You can also delete any exit that you have selected using the ‘delete selected exit’ button at the bottom of the ‘exits’ panel. Try placing and editing a few exits until you feel comfortable with the process.
Something to consider when placing exits is how they will affect the player’s orientation. They may become disoriented if you lead them out of the right-hand side of the room, only to appear at the top of the next screen - why has the direction of movement suddenly changed? It can be frustrating if you have to search for your own avatar in a room (I certainly had a few rooms in one of my games that did this…). HOWEVER! Maybe this is the effect you want? Is your game about feeling lost and confused? Then maybe that’s a great way to emphasise that. Or maybe you don’t even want the player to realise they’ve changed rooms?

There’s a LOT of options with exits, and great examples of how they’ve been used (I’ll add some links at the end, because I could talk about this here for a long time).

Also, make sure that it’s obvious where your exit actually is (unless that’s part of your game), as it can be a frustrating experience to have to search for a way to continue the game.

Oh, also, remember to put exits going back to the previous room unless you want the game to be a one-way system! 

Only 3 colours?

It’s probably time to make a few more tiles for your next room, but first I’ll go over color palettes so that you know how they work and can be incorporated into your new rooms.

From the tools at the top, make sure ‘colors’ is selected. You’ll see the palette of 3 colours that you can edit, and what they represent in-game. You can either start editing the default palette, or if you want to keep this one, add a new palette by opening the ‘palettes’ section at the bottom, and edit the new one instead. To see how your new palette looks in the game, select the palette you want from the dropdown list at the bottom of the ‘room’ panel. You can set one palette per room, so the 3 colour limit isn’t quite as strict as it sounds!
When you’re choosing your colours, think about things like how the scene is lit - are the colours warm or cold? Should there be a lot of contrast? Try keeping the background colour constant and changing the lightness of the tile colour for some cool effects! I’ll add some more links at the end with interesting examples of colour use.

If you’re stuck you could try a website like , where you can play around with colour schemes. You could also take a look at for some interesting combinations.
The end, almost

After you’ve added all the sprites, tiles, rooms and dialogue that you want, you might want a way to end your game (although, really this is optional).

Select the ‘endings’ tool, type in the text you want for the ending, and then place it in the same way as you would for an exit. You can have as many endings as you want, and place them wherever you want in the game.

Play your game through, and admire your work!

Downloading/Saving your game

There are a few final tools that I haven’t covered yet. The first is the ‘record gif’ panel, which does exactly what it says. While you are in play mode, press ‘start recording’, move through the sequence you want to record, then press ‘stop recording’. It will only record the time that you are moving, so don’t worry about getting the timing perfect. You can then download the gif to do what you like with!

You can also download the html of the game in the ‘download’ panel, which will allow you to upload it to (and submit it to the monthly Bitsy jams!).

TIP! - When uploading your game to, set the viewport dimesnions to 560x560 pixels in the embed options when editing your game page as the default dimensions can lead to the bottom half of your game being chopped off!

The ‘game data’ panel gives you the text version of the game itself (I always copy and paste it into a text file before starting a new project, just in case). Have a look through this data if you are interested, you’ll be able to see every decision you made here!
When downloading your game, you can select the html page colour, which will set the background colour behind the game in the page.
I want to make more games!

If you are happy with your game, it’s downloaded and saved and you’re ready to move on - start a new game with the ‘new game’ button! If you refresh the page or close your browser, the most recent version of whatever Bitsy game you are working on will be opened. But once you have started a new game it’s not an easy process to get the game back unless you’ve saved out the game data, so make sure you are ready to move on, and when you are, create away!
Game Data for the Tutorial game

I'll pop the game data for the game I made while writing this tutorial here in case anyone wants to just play around with it - it's got a section of interesting room transitions so you can see how that works (although, it actually looks kind of intense as I had to duplicate a LOT of sprites to do it, and there's at least 4 exits per room, but, it can be done! Oh, you'll also notice blocks of ~80 identical sprites, that's for the colour palette rooms - I mean, don't do what I did, find a better way to do something cooler!)

Extra Bitsy Tips!!

I've added an extra page with advanced Bitsy tips, which are generally things not built into Bitsy such as adding music and using custom tilesets. I'll try and keep this up to date with cool things that people in the community are exploring and sharing!

I'm ready to explore...
Cool examples of cool games

I’d like to include some examples of Bitsy games that I’ve particularly enjoyed in the past (today being 7th October 2017, as a disclaimer to all the amazing future-Bitsy games I’m inevitably going to forget to add in to this list at a later date), ones that I’ve found particularly inspirational when thinking about my own games:

Interesting narrative: - an autobiography, and inspiration for my tutorial game

Amazing room transitions: - transitions can be time as well as space - it looks so simple until you remember how it’s made

Interesting avatars: - listen to people’s thoughts


Use of other game genres:  - has an interesting battle mechanic - a cool puzzle game!

Use of audio! This still amazes me...: - ambient sound effects

Beautiful art:

Experiments with Bitsy:

'One Room' games:

And if you're interested, you can find my games at
You can also find me at

Also thank you Mark for helping me edit this and adding some great advice!

And obviously thank you Adam for making Bitsy and the whole amazing community that surrounds it!!