Short Tutorial - Escape game


#1

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
ojji

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)

Marco


#2

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.


#3

There is no table for points.
Enable the following block

and find the points of interest by tapping the screen


#4

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


#5

did you change the value of the variables?
var
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


#6

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:

image


#7

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

no, I simply used these blocks


#8

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:


#9

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


#10

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:


#11

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