How to create a game with multiple levels using Pages


Anton
Last Updated: 1 month ago

Everyone knows how easy it is to create any game on Interacty. But did you know that you can combine them into one big and engaging multi-level game using the Page tool? In this tutorial, we'll show you how.

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/U9rxfHdqlR6NWAz5cK8olgKLNEPnou2NN4EL6Xtj-0.gif

Create a project

First of all, you have to Log In into your account on interacty.me:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/z63ndnXtx6g9Vb037W0x7pXhVPbzkJC07KOZKO8Y-Auth%20%20Interacty%20-%20Google%20Chrome.png

After you have signed in, click Create to get going:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/whJjG7sjI5K5FEBL1kagImVm1PtsSS91gxd2zIi4-2.png

Select Create from scratch option:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/Fpe5gYNxj5j6l2Z2TY1MzXqNmchHswDKZzmHCtv1-4.png

Good job! Let's add our first block. For this mechanic, we're going to use an Interactive Image block. Let’s click All Blocks first:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/KXjycQrUEHp2JOKqVmb8Wk5SL7GAiD1nptWHhjQq-5.png

And select Interactive Image on the drop-down menu on the left:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/4DLpVFjLvvaEyaB0SUOeUCQ02TFQHLOSwKqn7kM6-6.png

Here are some templates that you can use. It's possible to add another background image later on, if needed. Let's choose one of these templates:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/38SCff52nCzCfvevwh8tZ1e6h1EhIpMcYhCPn9vX-7.png

Connect Pages

We are going to use this image for the tutorial. As you can see, it contains 3 tags. So, let's create 3 pages, for each of these tags. To do this, just click on Add Page button three times:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/p0Kvqz6mu5UHvAQUwCUcClRBbCTEevRC4I2S4aH2-9.png

It's done! Each tag should bring us to the new game page, right? So let's connect these tags with the pages. Select the first tag:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/wGVZYnLTXIVuprXs2z9smrxVqRKd9kRwXyjUmMID-90.png

And click Internal page on the right menu:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/O14z0EyIc3a88S0Fv9LWqIry3CF7SWTHSsnafSbf-Create%20interactive%20content%20in%20minutes.%20Free%20-%20Google%20u6.png

Select Page 1 in the new pop-up window:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/6wHuS1wGufvESpPzuGPlNvCFFP8ZFtAnsZOdxRuQ-35.png

Your first page has been connected! From now on, when the user clicks on the first tag, he will get to Page 1. After this, just repeat these steps for the other tags. This time, they will lead to Page 2 and Page 3:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/9weiPr5L2eBpKCS02yc08JvKW68pz0KbJYeLwRKd-Create%20interactive%20content%20in%20minutes.%20Free%20-%20Google%20Chrome2.png

It''s time to start adding your content to each of the pages. Let's click on Page 1 on the left menu:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/x5WEidnFxRI9NscoxvCKEJnLgJVsryjoDsM4taFl-Create%20interactive%20content%20in%20minutes.%20Free%20-%20Google%20Chrome3.png

As you can see, this page is empty for now, but we're going to add some content, right? Let's click All blocks button:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/ZPL7rcRT7QoHMW5s8hIcMkGGF9kWVXzlkC0ENgww-Create%20interactive%20content%20in%20minutes.%20Free%20-%20Google%20Chrome4.png

Select the content you like from the drop-down menu on the left. Let's pick one of the Trivia templates, as an example:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/PKjWqqByP6W0ywVpQaXloscxRSbkCbfARwwNhWXo-Create%20interactive%20content%20in%20minutes.%20Free%20-%20Google%20Chrome5.png

You can use any other templates you like, or even create your own project from scratch.

Your game will appear on the Page 1. Perfectly done! But how the user can get back from this page to the main one? Well, that's a good question. Let's create a button which will bring users back. To do this, click Call to Action button:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/YfZse7blINxWDEAKJDzGsDaMKKh0M4UvemnxAEFL-Create%20interactive%20content%20in%20minutes.%20Free%20-%20Google%20Chrome8.png

Choose a button text (Back for example), and click Internal page:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/4Mk6psFuEORb8Xp8en0JH4Sl47WT1oAKZF6SGbrr-Create%20interactive%20content%20in%20minutes.%20Free%20-%20Google%20Chrome9.png

We want this button to bring users back to the main page, right? So let's select Home page:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/XpBfLUEJFJaTcPxWg19icAh18Bym3rBcYu2dgOks-Create%20interactive%20content%20in%20minutes.%20Free%20-%20Google%20Chrome10.png

Perfect! You can continue to add new games to the Page 2 and Page 3 using all tips above:

https://helpcenter-io.s3.amazonaws.com/uploads/interacty/FS4XFegemdyotpgA1BvzyWxEP3Qe40y5kSuhoUpD-Create%20interactive%20content%20in%20minutes.%20Free%20-%20Google%20Chrome76.png

That's pretty much all about Pages! This was just an example of the simplest multi-level game and you can create way more difficult projects. For example, let users to complete some games to get the code and get an award. Here are some examples of multi-level games for your inspiration:

"Animals" — Multi-level Game - click to play!

"Help Santa Find the Gifts" — Christmas Multi-level Game - click to play!

"Treasure map" — Multilevel game - click to play!


Teach with love.

Interacty


Was this article helpful?