How to change a level’s world size

If you want your level to be larger or smaller, you can change the world size by clicking on the Levels tab in the sidebar on the left, and then clicking on the settings icon to expand the settings for that level.

Type in the x field how wide you want your level to be, and then type in the y field how tall you want it to be (default size is 2880 by 2880 pixels).

How to open previous versions of your game (in case something went wrong)

Gamefroot keeps track of every change you’ve made to your game by saving version history. This can be really helpful if you want to undo something that you’ve saved, or in the unfortunate case that a bug has broken your game, an earlier version might be bug-free.

To access earlier versions of a game you’ve been working on, open your Saved Games, find the game in question, and then click on Versions for that game.

Then select the version you want to load. You can see the time and date for when each version was saved. Handy, right?

If you load an earlier version of your game, and you want this to become the latest version, just make sure to click File, Save.


Interactive Fiction Games in Gamefroot

Creating Interactive Fiction Games in Gamefroot

We recently updated our user interface to make creating Interactive Fiction games in Gamefroot even easier. We’ve done this by adding “visual wires” that you can use to connect passages of text together. 

Here are three example games that we have made in partnership with our friend and fellow game designer Edwin “Narrative Designer Extraordinaire“ McRae. 

Continue reading “Interactive Fiction Games in Gamefroot”

What coding conventions does Gamefroot use?

Coding conventions are style guidelines for programming.

They typically cover:

  • Naming and declaration rules for variables and functions
  • Rules for the use of spacing and comments
  • Programming practices and principles

Coding conventions 

  • secure quality
  • Improve code readability
  • Makes code maintenance easier


When making games in Gamefroot, we should follow widespread JavaScript naming conventions. These allow us to distinguish variables, classes, and constants, so we can more easily see what code is supposed to do.


Variables are places to store changeable data. Name them in Camel Case. Start by making all capital letters lowercase. Then capitalise the first letter after each space. Finally, take out all the spaces. For example starting position x becomes startingPositionX.


A class is a specific kind of object that can be distinguished from other objects, like a name or type. For example, two obstacles have the same class. Name them in Pascal Case. This is just like Camel Case, but the first letter is capitalised too. For example, you win becomes YouWin


Constants are places to store data that never changes. Name them in Screaming Snake Case. Start by making all letters capitals. Then replace all spaces with underscores. For example, starting position x becomes STARTING_POSITION_X. Constants look distinctive, so you can quickly tell if an item is supposed to change. 


To tidy code in Gamefroot, right-click on the Script Stage and click Clean up Blocks. This makes it much easier to find code in a large script. 

Can I draw my own assets and use them in Gamefroot so I can add scripts to them?

There’s nothing stopping you drawing your own art and importing it into your game! You can take photographs of the landscapes around your area and use these as game backgrounds.

You could use any photo editing or drawing software (e.g. Photoshop). Photopea is a free online alternative and it has a great set of community made tutorials on YouTube.

When drawing new game art, you can grab a screenshot of your current game, and then draw your new art over the top. Make a new document 960 x 540 pixels, then import your screenshot and draw over it (or import existing images). A tile is 48 x 48 pixels, and a character is roughly 100 pixels tall.

Make sure to use layers and paint onto a new transparent layer so that you aren’t painting straight onto your background. That way you can hide your background layer when you go to export your assets as PNGs.