bitsy workshop

for nywf at nywf

by @haraiva

→ bit.ly/nywf-bitsy

bitsy v5.3
who am i? harrypotter.gif
hello i’m cecile and here are
some fun facts about me:

i’m a melbourne-based graphic

designer/illustrator/comics artist/
tiny game dev.

i am non-binary and my pronouns

are they/them.

i like magpies and afl. where you can find me

this year i made two games so far,
novena and touch melbourne. website cecile-richard.com
twitter @haraiva
i am here to talk to you about bitsy. games haraiva.itch.io
what’s bitsy? what should i make?
“bitsy is a little editor for little games or you can make (almost) anything!
worlds. the goal is to make it easy to make short narrative games are the
games where you can walk around and talk most common, but you could
to people and be somewhere.” also make a vignette game, or a
tiny adventure. some people
– adam le doux, even made a bitsy mmo!
father of bitsy
for inspiration, you can take a
look at the bitsy pieces twitter
or claire morley’s cool examples
i like bitsy because of cool games at the bottom of
her tutorial.
- it’s easy and satisfying to use.
- pixel art is (mostly) accessible and fun. bitsy has a growing, diverse,
- i t’s versatile while also having constraints. extremely supportive community,
- the community is cool and is a genuinely exciting tool
- there’s a bitsy jam every month! because of its versatility.
→ to bitsy editor
bitsy basics buttons
navigate
let’s start with the basics. rooms/tiles/sprites

once you have the editor open you can take a look at the find specific

various tools/panels. toggle your toolbar by clicking on room/tile/sprite

the tools button next to the title field. create new

room/sprite

a room is a place or scene in your game world.

duplicate
room/tile/sprite
you can make multiple rooms that you connect with duplicate
each other using exits. room/tile/sprite

a tile is a piece of scenery in your room. you can make toggle

your tile into a wall, making it impassable. grid view

the avatar is the player character, which you control toggle

using the arrow keys, and you can interact with sprites
walls view

by walking up to them.
an item is a sprite you can pick up. you can assign toggle to make your tile a wall
variables to your items if you want, but you don’t have to.
an ending is an exit that ends the game. you can have
multiple endings. toggle for 2 frame animation
drawing in bitsy
each tile and sprite’s
canvas is a 8×8 grid.
you can draw in the paint
panel by clicking on the
squares.

once you’re done making

your avatar, you can click
on animation to make a
two-frame animation. edit
your second frame and
now your avatar is moving!

this process is the same

for tiles and sprites.
drawing in bitsy tips
the one thing that’s different don’t overthink your
in tiles is the wall button. drawings! in pixel art
it’s important to get
you can toggle this to make across the essence
your tile impassable, which of whatever you’re
means your avatar can’t go drawing, but it’s also
through, or on it. okay to keep it vague.
vagueness can bring
you can make as many interesting results.
tiles as you want.
don’t forget to name
also, you can only have one your tiles and sprites!
iteration of a given non-item it’s helpful when you
sprite in a game, so if you end up having a lot of
want multiples of the them and you can
same sprite, you have to easily search them
duplicate them. using the find button.
room design
now that you have some
sprites and tiles set up,
it’s time for some interior
design. let’s put the tiles
in your room!

you can find your tiles and

sprites easily in the find
drawing panel.

place your tiles in your

room. click and drag on
the room if you want
to place a tile multiple
times quickly.
room design tips
toggle the wall button i generally roughly
in the room panel to see plan out my rooms
where your walls are. on paper, then create
them, adding
click the play button to, placeholder tiles
well, play your game. where i want my
that way you can check if walls and exits to be.
your walls work, and you
can also just get a feel of there are some bitsy
how to navigate your game. pieces that take place
only in one room, but
once you have at least two you can add as many
rooms, you can connect rooms as you want, so
them using exits. you can go wild with
them as well.
exits
you’ve heard of “making
an entrance”, let’s make
an exit.

open the exits panel, and

click the place new exit
button. a mini-map of the
room will appear with a
dropdown list of all your
rooms. select the room
you want, and then click
in the mini-map to create
an exit destination.
editing an exit tips
while the exits panel is still open, click on its tile in the always remember to
room panel to select it, and the mini-map will reappear test your game to see
so that you can click on a new tile for the destination, if your exits work as
or drag it over to the desired tile. you want them to.

you can add exits

going back to the
thinking about exits previous room to
make it two-way.
exits are commonly used as doors between rooms, but i’ve
seen them being used to make animations, show the passing generally, you want
of time, or making sprites appear out of nowhere. to make it obvious
where the exits in a
if you’re placing them as doors, it’s important to keep room are, unless it’s
continuity in mind, as to not confuse the player (unless that’s part of your game to
your aim). for example, it makes sense for the character to make it confusing.
exit at the right-side and enter a new room from its left side.
dialog tips
now that we have most of dialog is usually one of
the basics covered, let’s talk the last things i add to
about dialog. my game.

sprites and items are the what i do is write

only elements to which you down all of my dialog
can add dialog. in a text editor
and then copy/paste
to edit dialog for each and edit that dialog
sprite you make, go to the in bitsy for each
paint panel and type into of my sprites.
the dialog field.

now click play and walk up

to the sprite and it will talk
to you!
advanced dialog memo
with your paint panel still list dialog is used if you
open, click on the dialog want your sprite to say
tool to open the advanced a lines in a sequence
dialog panel. (say the lines only
once), a cycle (say the
there you can find different lines once then repeat
kinds of dialog sections from the first line),
(simple, list, conditional). and shuffle (say lines
in a random order).
and text effects! you can
change colours of your text conditional dialog
or make it wavy, or shaky, or is used in association
rainbow, or all of them at the with item variables.
same time! for example a sprite
will say a line only once
you have picked up a
specific item.
colour palettes game data settings
set colour palettes for your in the game data panel, in the settings panel
game in the colors panel. you can find the text you can change the
you can make multiple version of the game itself. background colour
colour palettes and apply you could tweak it in the of the html file of the
them to different rooms by editor, but i recommend game (so that it matches
selecting the one you want pasting it in a text the background colour
in the dropdown menu in editor like sublimetext of your room), set the
the room tools. for that. this is also the game window size and
data you need to use with change dialog fonts.
hacks like borksy.
inventory
the inventory panel is download game
the one you use for setting
variables. check out the in this panel you download your game’s html file.
tutorials if you want to that’s the file you need for uploading to itch.io.
know more about them. you can also import a game from its html here.
useful tools tutorials
image to bitsy turn any image into a bitsy room. text tutorial
pixilart online pixel art tool i use for this is a tutorial by claire
making room backgrounds. set the morley. it’s very good and
canvas to 128×128px, draw, save. inspired me a lot for these
import your drawing to image to slides.
bitsy, get the code. easy! video tutorial
fontsy make a custom font for your if you’re more of a video
bitsy’s in-game text. person, dan cox has got
spritesy 
sprite editor, mainly used for you covered.
collaborations and multiple frame variables tutorial
animations.
a tutorial by andrew
borksy tool for incorporating various yolland about variables,
bitsy hacks easily. which you may have
sublimetext 
for working on your html code noticed in inventory.
outside of the bitsy editor.
note: adding music to your bitsy
you can add music to your bitsy using the aforementioned borksy,
but if it confuses you (understandable) or if you want just one track
looping in your game, you can:

1. place your audio file somewhere relative to your bitsy html file
(in the zip if you’re uploading to itch.io). name it music.mp3.
2. open your bitsy html in sublimetext
copy-paste
<audio loop=”loop” autoplay=”autoplay”>
<source src=“music.mp3”>
</audio>
in <!-- DOCUMENT BODY -->
before the </body> tag.

this works only if you upload on itch.io. test if your music

implementation is working either inside your itch project by making
a private upload/project or in a browser other than google chrome.
some bitsy pieces
here are some examples of what you can make with bitsy. click through to play.
→ vitreous → noodle escape ! → forgotten depths → bitsy spider

by breogan hackett by mary t., pete ellison, vince bondy by mark wonnacott by rabbitboots

→ silverybield foss → the eviction game → the_right_song_now.mp3 → novena

by twisted tree by raulhaagensen by karina popp by haraiva (me)

thanks @haraiva

cecile-richard.com thanks