Want to create interactive content? It’s easy in Genially!

Get started free

Breakout V2

Davide Roia

Created on September 29, 2023

Start designing with a free template

Discover more than 1500 professional designs like these:

Adventure Breakout

Team Building Mission Escape Game

Onboarding Escape Game

Christmas Escape Room

Flags Challenge

Museum Escape Room

Education Escape Room

Transcript

Breakout Version 2

An easy way of creating an escape room

Reuse

Featuring DND by

Instructions

Template

Tutorial

Examples

Video is for version 1 but the principle is the same

Old version

*Borrar la página anterior para que esta sea la portada

Home page

You can decorate the front page as you like. Keep the "New game", "continue" and/or "map" buttons *You could change it but note which page it links to and the grouping of the orange squares.

New game

Map

Continue

Info

Generator page

  1. 5
  2. [1-5]
  3. color
  4. #FF9900, #FAF700, #00CC00, #FF0000, #6633FF
  5. no-repeat

Group the images of the rewards we want them to get for each challenge. They will come out randomly

What to do with this page: This page should contain the introduction to your game. The orange box and the pictures with the pink boxes will be invisible, just keep them in the corner of the page. Make sure this page is skipped when "continue" is selected on the first slide, otherwise your game might be reset to zero. First, change the parameters of the game by changing the text next to your own preferences (see explanation below). Make sure to keep the text grouped with the orange box. Ungroup the Easter eggs and the pink boxes. Replace the eggs with your own pictures and group each with a pink box. Remember that they will be randomly assigned to a challenge, so the order here is not relevant. Delete the current texts on this slide and replace them with your own game instructions, introduction to the story or just with pictures.

  1. 5 indicates how many challenges you have. Make sure you have the same number of reward pictures (instead of Easter eggs)
  2. Optional [1-5] indicates the range of possible values for the pass code. If you don't specify a range, any number between 0-9 can be included
  3. Optional: backgrounds of found passcord will have different, random colours (out of the ones below)
  4. Optional: colour hex codes that associated with each digit. To find the hex code, open the colour palette, e.g. for font colour, and choose a colour. Then copy the code that appears underneath it (always starts with a #)
  5. no-repeat makes the digits/images/colours of the password non-repeating (if there are enough pictures available and the number range is large enough)

NEXT

MISSION ACCOMPLISHED! GO GET YOUR FINAL REWARD

Saving...

80%

80%

Map

Page to create the route of your challenges You can change it to your own design and increase or decrease the number of challenges (needs to be the same as set on the generator page). If you want to let players decide on the order, just delete all locks, they are optional.

Saving...

ENTER THE SECRET CODE

Reward overview

The # will show the random digit that the players have "won" in each challenge. The font, colour and size can be changed. The circles will change to one of the colours predefined on the generator page (in random order), The pink square will be replaced by the image of the random reward that was won in each challenge (out of the pictures added to the generator page).

Saving...

Challenge 1

This will allow you to save the game wherever you want. You need the black box below "auto save bookmark". You can modify text and images by ungrouping and regrouping.

Customise this page as you wishIt should be the introduction to challenge 1.

START

Saving...

Challenge 1

Create your activity for challenge 1

NEXT

Saving...

Challenge 1

You can use this page to do another activity for challenge 1. Delete or duplicate it in case you want to do more/less activities.

NEXT

Saving...

80%

Recompensa 1

The pink box is automatically replaced by one of the images grouped on the generator page.

The # is automatically replaced with the first digit that the players "win" in challenge 1. You can change the colour and font, even put more than one # as in the example.

GO TO REWARDS

Saving...

Challenge 2

Customise this page as you wish

START

Saving...

Activity 2

NEXT

Saving...

Challenge 2

More activities for 2

NEXT

Saving...

80%

Recompensa 2

GO TO REWARDS

Saving...

Challenge 3

START

Saving...

Challenge 3

Create your activity for challenge 3

NEXT

Saving...

Challenge 3

More activities

NEXT

Saving...

80%

Recompensa 3

GO TO REWARDS

Guardando...

Challenge 4

START

Saving...

Challenge 4

Create your activity for challenge 4

NEXT

Saving...

Challenge 4

more activities

NEXT

Saving...

80%

Reward 4

GO TO REWARDS

Saving...

Challenge 5

START

Saving...

Challenge 5

Create your activity for challenge 5

NEXT

Saving...

Challenge 5

more activities

NEXT

Guardando...

80%

Recompensa 5

GO TO REWARDS

OPEN

ERROR

Editable success and error text ->

Unlock the padlock

All text, including numbers, on this screen can be customised.

12345

Here you will see the digits we have collected in the challenges and the digits we need to unlock the lock (optional).

On top of the numbers is a "d-TOUCHE" box grouped with a number. You can move them the side to change the keypad below and put them back on top of the correct number. They keyboard could also be changed to letters.

We have recovered these figures, will it work?

$CODE$

This will disappear when the padlock is opened.

The "d-SUPPR" needs to be on top of a "back" button, and "d-VIDE" on top of a "delete" button".

<

1234

This button will appear when the lock is unlocked. It can be changed. Don't forget to add a link to the final reward page.

Basado en GICODE de S'cape

Final reward

Congratulations!

Decorate this page with the final reward

Templates

Template slides are only visible in edit mode. The next two slides (teal background) are the original sandbox templates. The pink slides after that are Julia's version where the elements are sorted by page where they need to be used.

Page by Page template

You need the following pages in your game: 1. A title page. 2. an intoduction/generator page. 3. A map 4. Several activitiy pages (up to 10 different rewards/numbers can be collected, but each could require several tasks to be completed. Each needs to end with a reward page. 5. A reward overview A lock page 6. An final reward page 7. optional: an avatar page.

Title page

Mandatory element on the first page to be grouped with your "map" button. You also need a new game" button

Optional element on the first page to be grouped with a continue button. Takes you to the last bookmarked page

Continue

  1. 5
  2. [1-5]
  3. color
  4. #FF9900, #FAF700, #00CC00, #FF0000, #6633FF
  5. no-repeat

Introduction/Generator page

. Mandatory element. It must be placed on a page that is obligatory to go through at the beginning. For example, the introduction page. Make sure this page is SKIPPED when "continue game" is pressed as it resets any progress.

  1. 5 indicates how many challenges you have. Make sure you have the same number of reward pictures (instead of Easter eggs) #
  2. Optional [1-5] indicates the range of possible values for the pass code. If you don't specify a range, any number between 0-9 can be included
  3. Optional: backgrounds of found passcord will have different, random colours (out of the ones below)
  4. Optional: colour hex codes that associated with each digit. To find the hex code, open the colour palette, e.g. for font colour, and choose a colour. Then copy the code that appears underneath it (always starts with a #)
  5. no-repeat makes the digits/images/colours of the password non-repeating (if there are enough pictures available and the number range is large enough)

If you want players to win random reward item, add all the pictures of possible rewards to your introduction page and group each one with a different "IMG PSW" box. They will be invisible on this page.

Avatar page (optional)

Make as many copies of the red box as you have avatar options. Group each avatar option with a red box (change the size of the red box first). Place the green box on ALL pages where you want the chosen avatar to be visible. Keep it grouped with any picture - the picture will be replaced with the chosen avatar.

Any page (optional)

Saving...

Place these elements on any page where you want to create automatic bookmarks. The progress through your game will be saved automatically even without theses bookmarks. as long as the players don't go back to the introdcution page, which will reset any progress.

Map page

Map page

Add links to your activity/task pages. Also add a link to the reward page.Add one of the progress bars from the progress bar template page.

Optional: If you want your character/avatar to move around the map, use the extension below.

Add the yellow box somewhere on your page - will be invisible.

Group the blue boxes and green "off boss" with a feebback text or picture (e.g. a tick or a star) which will appear after each challenge is complete. Use as many as you need (up to 10). Make sure you keep them in the right order. If you want to stop players from re-playing challenges, make sure the feedback object covers the link to the challenge.

Group this text with the picture of the character or the green avatar box. The picture has to face forwards or to the right (the picture will flip when going from right to left)

The three elements below can be copied and pasted to create as many as you need. Duplicating and grouping them changes the number and their order, so make sure you always group them in the right order. When you group or duplicate, the number will change to X - go to a different slide and come back and it will show the current number (always starting with 0). Make sure that the three elements with the same number are all next to each other/on top of each other.

Group this text with the names of your challenges - this is where you need to click to make it move.

Place this text on top of the "zone de clic" (don't group!) This it where the picture will move to.

Group this text an arrow/word/picture that is linked to the activity page. It will pop up when the character reaches the destination.

Map page

Optional (if you want the challenges to be played in a certain order) Group the "lock" elements with image or any Genially element, for example the picture of a padlock. It will then be visible until the previous challenge is completed, then it will disappear. Place it so it covers the link to the corresponding challenge so that it prevent players from playing the challenge until the previous ones are completed.

Group with any element. Appears when all challenges are completed and the bar is filled to 100%.

Group with an image that covers up the link to the final reward page or to the lock page. It will disappear when all challenges have been completed.

Group with image or text. Appears when the final passcode of the game has been entered and the game has been won.

Reward page

For each rewards page you need to group these four elements1. a green COMPLETE box - this wil tell the elements on the map page that the challenge is complete and switch the locks off. 2. a # -this will be replaced with a random number as defined on the introduction page 3. a pink IMG REC element - it will be automatically replaced with one of the images from the introduction page 4 a shape from the resources tab behind the #, - it will take one of the coloures defined on the introduction page.

You need one reward page for each challenge. Players should only be able to reach it after completing the task. Group one of the green boxes grouped with an #, with a pink IMG REC element (it will be automatically replaced with one of the images from the introduction page) and add a shape from the resources tab behind the #, (it will take one of the coloures defined on the introduction page) lock.

Add a arrow/text with a link to the reward overview and/or the map.

Reward overview

This page will show the players all the obejcts, numbers and colours they have collected so far, so they should be able to go from the map page to the reward overview and back. You need a similar group as on the individual reward pages, but here you them all together. For each challenge, group a blue box, a pink box, a # and a shape. They will be replaced with the correct number, colour and picture once the corresponding challenge has been completed.

Lock page

The text/picture grouped with the green box will appear when the correct code has been entered. Group it with an element that links to the final reward page.

These are the numbers where players will enter all the numbers they have found to open the final lock. If you don't like the design, place them on top of the picture of the numbers you would like to use and make them transparent (checkered icon at the top).

Optional: The text/picture grouped with the red box will disappear when the correct code has been entered.

Group this with the button that takes you to the final reward. It only appears after the correct number has been entered.

"ECRAN" will display the numbers as the player enters them. You can change the font/colour/size. Keep the numbers as 123... but add as many digits as you have activities. Do the same for "digi_code".

12345

Group this box and text, it will display the code that has been collected in the challenges.

1234

$CODE$

The text grouped with these two purple elements will appear when the code has been entered correctly/incorrectly. You can change the text and the font/size/colour but keep it grouped.

Keep these somewhere on the page

ERROR

OPEN

Create your own progress bar Go into preview mode (!) dand play with the controls until you have a progress bar design that you like. Now copy the code text in the bottom right. Go to the page where you want to use it, go to the "Insert" tab, then "others and paste the code in the box.