Multilayer image .png

[Vladimir_C]

Hello everyone
This is my first time here.
Sorry for my English.
I need help, I need to add some transparent images PNG format.
So that all layers are displayed and I can hide any of them without hiding all the others.
Now I get it like this: if I add a second PNG image, it overlaps the first image, and the third overlaps the second, although the images are transparent...

how can i solve this problem?

[TIMAI2]

Please show your relevant blocks and screenshots of your app in use the show what you are trying to achieve.

[SteveJG]

@Vladimir_C

how can i solve this problem?

• you might be dealing with Sprite Cannibalism and stacking images may be causing you issues.

• do you know that sprites have three parameters; x, y, and z. Z controls the layer. See ImageSprite
  Z affects how the ImageSprite should be layered relative to other Balls and ImageSprites, with higher-numbered layers in front of lower-numbered layers.

• without having your sprites with transparent backgrounds, no one can test this behavior .

• overlapping sprites: although your image looks like a knight or a duck, its actual dimensions are that of a rectangle and its boundaries are not the visible image but rather the rectangle of the png image.

[Vladimir_C]

This is in a different development environment (I hope I am not breaking the forum rules)
there are 4 PNG images, each image has its own triangle, I just created 4 images and loaded my file into each one.

In MIT app I did the same thing (I haven't created any blocks yet), but one image overlaps the other, although all the files are transparent.

[SteveJG]

@Vladimir_C

one image overlaps the other, although all the files are transparent.

You are placing four Image controls in a HorizontalArrangement. Perhaps you want to use the Canvas and ImageSprites. Sorry, Vladimir, it is not clear what you want to do once you have the four Image controls in the arrangement.

You might find these articles useful:

• How do you adjust collision on mit app inventor - #4 by SteveJG
• Creating Animated Apps

[Vladimir_C]

@SteveJG

ou are placing four Image controls in a HorizontalArrangement. Perhaps you want to use the Canvas and ImageSprites. Sorry, Vladimir, it is not clear what you want to do once you have the four Image controls in the arrangement.

You might find these articles useful:

I need to display the desired triangle by changing the values in the code.
All images are the same size, but the triangle is in different corners.
Imagine that I have 4 buttons, clicking on each one, I need to hide / show the given triangle.

[SteveJG]

You could do something like this using a Table arrangement (6x6) and label spacers set on the Label properties. Click on an Image and the image reverts to a blue rectangle; click again and the original image returns. What you do depends on what you want to do and why. It might be easier to use a Canvas and sprites.

Here are some resources to help you learn to use the AI2 tools. A very good way to learn App Inventor is to read the free Inventor's Manual here in the AI2 free online eBook http://www.appinventor.org/book2 ... the links are at the bottom of the Web page. The book 'teaches' users how to program with AI2 blocks.

There is a free programming course here http://www.appinventor.org/content/CourseInABox/Intro and the aia files for the projects in the book are here: http://www.appinventor.org/bookFiles

How to do a lot of basic things with App Inventor are described here: http://www.appinventor.org/content/howDoYou/eventHandling .

Also look here http://kio4.com/appinventor/index.htm and here http://www.imagnity.com/tutorial-index/ for more tutorials.

Learn about components http://ai2.appinventor.mit.edu/reference/components/
and visit the Library http://appinventor.mit.edu/explore/library Help>Library on the MENU

[RR_Media]

Pehaps this topic and extension might help:

Overlap View Extension: Create overlying layout

OverlapView allows you to make a user interface without any limitations, now you can create overlying layouts as you imagined without increasing the size of your application via using png images. Blocks: Methods: [blocks (18)] Properties: [blocks (12)] Overlap View is allowed to be redistributed by MIT as part of the Appathon 2021 Example: Download : com.vsatish.overlapview.aix (7.2 KB)

[RR_Media]

Or this extension:
Taifun Image Extension

[ChrisWard]

Hello Vladimir

Do mean the images overlap but you do not want them to overlap? You can use Arrangement Components to 'hold' Image Components, as per your screenshot of the other platform.

[Vladimir_C]

Thank you all more for trying to help me.
I think the triangle example was inappropriate.
Imagine the face of a person who has two eyes, a nose and a mouth.
There is an image (let's call it number 1), which depicts a person's face, with open eyes and closed mouth.
Then, I create another image (number 2) with only the left eye drawn and closed, and everything else in the picture has a transparent background.
Create image (number 3) with the right eye closed, everything else has a transparent background.
I create an image (number 4) where only the mouth is drawn and it is open, everything else in this image has a transparent background.
All of these images are the same size.
I need all these layers, to superimpose one on top of another, thus, in the program, I can make a certain layer visible or invisible.

Аll images have a transparent background, this means that the nose in the first image should not overlap all other layers (they are transparent) and on the first post (in another development environment) this is exactly how it works...
But in MIT APP the upper layers of the images overlap the lower ones, although their background is transparent.
To be honest, I thought that the solution in MIT APP would be much easier)

[Vladimir_C]

@SteveJG

You could do something like this using a Table arrangement (6x6) and label spacers set on the Label properties. Click on an Image and the image reverts to a blue rectangle; click again and the original image returns. What you do depends on what you want to do and why . It might be easier to use a Canvas and sprites

Thanks for the answer.
You propose to me to create 4 tables, in different corners ?)

[Vladimir_C]

Thanks, I'll take a look at this extension

@RR_Media

Taifun Image Extension

This solution seems too cumbersome for me if I have 10-15 images.
There, in one block, you can add only two images.

[Vladimir_C]

@ChrisWard

Do mean the images overlap but you do not want them to overlap? You can use Arrangement Components to 'hold' Image Components, as per your screenshot of the other platform.

I want them to overlap each other, but if I understand correctly, MIT APP does not perceive PNG files correctly, the upper layers overlap the lower ones, although the background is transparent and this should not be. But "another" platform understands these files correctly, so you see all four triangles, and not one on the very last layer

[TIMAI2]

Here attached a face example using a canvas and four images, all transparent png files. Even though they overlap this does not show. Cannibalism has been fixed , and when a sprite it moved it is set to the top of the Z order so that it is over the other sprites. Is this what you need?

faceparts.aia (73.4 KB)

[SteveJG]

One table with 4 columns and 4 rows.

transparentImages.aia (11.7 KB)

@SteveJG

What you do depends on what you want to do and why .

[Vladimir_C]

This is not what I wanted, but thank you for the example and for the links to manuals, I will study them.

[Vladimir_C]

An interesting tool, but I have not yet figured out how it is configured, there are no examples ...

@Overlap View Extension: Create overlying layout Extensions

OverlapView

[Vladimir_C]

You know, yes, this is what I need.
I thought we could limit ourselves to the image component.
I assume Canvas and ImageSprites are a powerful tool for my simple task, like transporting one person on a Semitrailer)
But yes, it solved what I wanted.
Thank you for taking your time for me and helping me, making an example