Create games, write interactive stories, and build animations!
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).
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.
Coding conventions are style guidelines for programming.
They typically cover:
Coding conventions
NAMING CONVENTIONS
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
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.
CLASSES and UNIQUE IDENTIFIERS
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
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.
CODE FORMATTING
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.
Use the “Camera boundaries” blocks from Looks: “set camera x minimum to 0” and “set camera y minimum to 0”.
Try different maximums depending on how large your level is.
Use the selection tool (mouse cursor icon) and drag over the objects to select them. Then click and drag one of them to move them all together.
Yes, open the CODE sidebar, find and select the script you want to put on multiple objects, then click on the objects in your level to attach the script to them.
Now they will all behave in the same way.
In the Script Editor, click on the menu button (in the top left) and select Export.
Right-click on the code, click Select All, then right-click and select Copy (or press CTRL + C).
Close that script, make a new script, then open the menu from the top-left and select Import.
Right-click in the text area and select Paste. Then click Import to see the blocks appear.
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 https://www.photopea.com/ 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.
You won’t lose the script – all scripts you create are saved in the Code sidebar.
You need to delete the asset, then select the correct layer and place the asset in your level.
Then open the CODE sidebar, select the correct script, and click on the object to reattach the script.
Delete the asset from your level and place the new asset in your level. Open the CODE sidebar, select your script, then click on the new asset to attach the script.