Laying out images on the screens

Question

I'm trying to display image files for the android layout of each screen.

I tried displaying the base menu picture file and image 2 and add them both into the screen. However, I seem to capture the base menu but not the 2nd image.

My function for getting the images, under class name "MyResource'

public function getImage(name:String):Image{
    var img:Image = new Image(assetManager.getTexture(name));
    return img;
}

My 'main menu' class. It has a bunch of buttons that will redirect it to selected the selected class containing the screens.

switch (btn.name)
{
   case "genji": 
    trace("Genji voice menu was selected.");
    app.getScreenManager().getScreen(ScreenManager.SCREEN_GENJI);
    break;
} 

The screen class that's supposed to display the 2nd image.

public class GenjiScreenClass extends Screens 
{
    public function GenjiScreenClass(app:StarlingBaseClass) 
    {
        super(app);
    }

    override public function initialize():void{
        trace("I am in GenjiScreenClass initialize() function");
        var img:Image = myResource.getImage("basemenu320x480");
        var genjiImage:Image = myResource.getImage("GenjiMenuPicture")
        this.addChild(genjiImage);
        this.addChild(img);
    }
} 

The image files are all under asset/x1. The base menu image came out but how come the 2nd one didn't?

Answer 1

You add img last:

    this.addChild(genjiImage);
    this.addChild(img);

This means img is on top of genjiImage covering it up. Depending on the content and size of the images the above one might entirely hide the below one, which can lead to the impression that only the top one is being displayed.

Swap the order of these two statements to solve the problem.