Short Tutorial - Escape game


I apologize to you for my english

I did not find tutorials for this type of games and I thought it might be interesting.

I will be very short, I have developed games of this type and some successfully.
AB is excellent for this type of games
In this example I use 3 images on canvas and interact with them depending on where I touch
To do this we will use the x and y coordinates, the main obstacle is the different size of the displays.
We overcome this obstacle with a simple mathematical proportion
We use 2 variables having value of the height and width of the canvas under development

the TouchUp block set up in this way will be used during development, and will give us information on the x y coordinates, will be disabled when build app

I then create the blocks that allow me to verify when I touch at a certain point

In our case the event is generated when the image is 1.jpg and if all the conditions are verified(Xmin - Xmax - Ymin - Ymax)
Thanks to the mathematical proportion, the coordinates will be exact on each screen

The procedure to follow is this, you just have to add your imagination :slight_smile:
In the example I repeated the procedure at the touch of the door, the other plant, the tablet and the recycle bin. The background changes if you touch some items. I used the back button to go back to the main background
If you want to insert ImagineSprite in a specific point, you can rely on a similar proportion

That’s all

Remember that if you change the values ​​of the variables, all points x and y must be changed by checking them on your display
tutorialEscapeGame.aia (116.0 KB)



Excuse me but I could not understand how you got the coordinates of the action points in the objects of an image (the four that an event mask creates when you click) on the screen. Can you provide me with a table of these points ?, is that I want to create a variation of your project where you click on objects and characters in an image and the image is waked up. Thank you.


There is no table for points.
Enable the following block

and find the points of interest by tapping the screen


I’m new to this from the App Inventor world. So I did not know about deactivating blocks. Effectively I gave right click on that block and activate it, changing the activity of the text on the action points by this deactivated block, showing numerically coordinates X and Y. Like I had to put a point or a comma in the middle of the block where there is an empty text because the coordinates were seen together.

Even so, I have had problems for the points to perform the action in the place where I place the four coordinates (two X from left to right, and two Y from top to bottom), due to the fact that the action does not exactly do it there, if not in another point near where you assign it, sometimes very to the right or very far to the left, and it does not cover the whole object. So it’s up to me to manually test until I do the action with the name I put on the object in the image, fortunately AppyBuilder allows me to perform those tests quickly.

I appreciate the help, if you can tell me why this happens. Tested on a Motorola G1 XT1032, with resolution 720x1280 LandScape mode. I’ll have to try another device if the action points are running


did you change the value of the variables?
You must change the value with that of your device

if you build my file, without modifying it, it works on all devices. If you need to change, you will need to change the variables and then take all the new coordinates


How did you make your compilation compatible values for all devices ?. Is there something I can not know?

You can test what I’ve done with your material. :slight_smile:



It works fine on my device(1920 x 1080). the last line does not work

no, I simply used these blocks


Great, I appreciate it. Then just one more thing to get rid of doubts. I have to configure that with the resolution of my device that I am performing the test, right ?. 720x1280 LandScape mode, and any other device will automatically adjust the image and collisions ?. Or should I create a different app for each resolution, changing those parameters ?.

(On the last line, do you mean the last column where there is a character less? I will try to emulate that resolution in an emulator to have such a collider)

Thank you very much for your .ai when I finish my App I will give you credits. :slight_smile:


no, take your values ​​from the canvasWidth and canvasHeight blocks of your device and use them to value the variables. the rest is just math :slight_smile:
look at the example


Thank you. It seems incredible to me that even if the image is resized, the touches are molded to it. Your contribution has been very useful. Could you collaborate with any name or pseudonym of yours to give you credits ?. Happy New Year. :slight_smile:


Thanks but it is not necessary to give credits to me. I’m happy to have been helpful. Happy New Year to you :wink:


I refer to this topic to show an example of what can be created in this way

I promised myself not to create more games, but I made an exception :sweat_smile:
This game is a Remake of my previous game, where I added some improvements. Originally it was created with App Inventor (lost source :expressionless:), the remake instead was created entirely with AppyBuilder

The types of game that can be created are of the Escape Room type, this is a variant, a very short Escape Adventure

There are many images, so I opted for a low resolution of them, but on small screens they look fine

The game is in English, but there may be incorrect phrases. If someone wants to try it and find something wrong, I will correct it

Of course I can explain how I created certain logics if someone wants to know

Not available in Italy

Escape Adventure - Fear


Run away from the rooms of fear
You will make it?
Mini-games, emigmas, friend monsters and two alternative endings await you
Have fun
Escape Adventure - Fear


I have too many crushes.
When i press the settings button:

During the 1st level:


Thanks for trying. I tried it on two devices and an emulator and this problem never showed up. I try to understand where the problem is. The second mistake I think is a memory problem


@George_Loungos The first error may depend on the new release of AppyBuilder. This error occurs when I try to reopen screen 1 after closing it. Now I fixed it by not closing the screen at all 1.

The second error, as I told you, is a memory error, it doesn’t show up in my devices, despite this I deleted a large image that remained in the background. This could improve memory usage

I have released a new fix version
Thank you for your contribution


you might want to check tip 2 here


Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.


@Taifun thanks also to you for the suggestion. the screens I use are at most 2. The images in this app are almost all in low resolution but some improvements can be made. I had no errors on the test devices and I underestimated the problem. :sweat_smile: