Creation of the 1st assets !

OK now, I have a nice logo, I can create a main menu screen that will display this logo, and at least a button that you have to press to start playing. Eventually, I'll add an "Option" button and a "Quit" button.

Before creating the main menu screen, I need to create few assets, just to give a nice look to the buttons.

For that I'll use 2 tools :

1. draw9patch.bat

2.Texture Packer.jar

Creating NinePatch

What is a NinePatch and why do we need NinePatchs ? A NinePatch is an image that you can stretch along X and Y axis in order to fill a region. It's very useful to create nice user interface, for example to skin buttons. The NinePatch is divided in 9 regions, among which 5 are scalable while the 4 regions in the corner will keep their size and proportions. Here is an illustration that shows the difference between scaling a NinePatch vs scaling a normal image.

Thus, I created my first assets, composed of 4 NinePatchs, with the tool draw9patch (that you'll find in you SDK tool folder), with which I will create my UI.

The 2 big images will be used for buttons. There is one picture for the button in initial state, and one that will be used when the button is pressed. The small square will be used for basic representation of the oxygen and fuel levels during the game, and the last one will be used as background for various Tables.

Creating the TextureAtlas

Now that I have my first assets, I need to pack them in a single png image with the Texture Packer that you can download here. Packing all the pictures in a single file will optimize the GPU usage : You load the big picture only once, then you draw only the portion you need.

Once you packed your assets, you obtain two files : the .png file that contains every picture you packed, and a .pack file, that is a text file containing the name and the coordinate of all the pictures. Therefore, in your code you'll access every single picture by it's name.

Now that we have assets, we need an Asset Manager ! For the Asset Manager , I create it in the loading screen.

Creating the loading screen

Actually, we already have the Asset Manager , as I created it in the Main activity, remember :

public class MyGdxGame extends Game implements ApplicationListener{
    public SpriteBatch batch;
    public AssetManager assets;
    
    @Override
    public void create () {
        batch = new SpriteBatch();
        assets = new AssetManager();
        
        this.setScreen(new GameScreen(this));
    }

    @Override
    public void render () {
        super.render();
    }
}

Finally, we create the loading screen, in which we'll load a lot of things in the Asset Manager. This screen will be displayed only during the loading time. Thus, with a very small image to load, the screen will appear during less that one second, but when we'll have a lot of pictures in our Texture Atlas, it will take more time.

During the loading screen, I load the Texture Atlas, and I create and load several fonts that will be used during the game.

During the loading time, the screen will display the nice logo I created yesterday.

Important : every asset (image, texture atlas, font file, sound, level maps...) must be stored in the folder Android ---> Asset. In the Asset folder, I create subfolders Image, Sound, Fonts. Every time you put an asset or modify in the Asset folder, you need to refresh the Android folder in Eclipse.

Here is the code for the LoadingScreen.java :

public class LoadingScreen implements Screen{

    final MyGdxGame game;
    OrthographicCamera camera;
    private Texture textureLogo;
    private Image imageLogo;
    private Stage stage;
    
    public LoadingScreen(final MyGdxGame game){
        this.game = game;

        camera = new OrthographicCamera();
        camera.setToOrtho(false, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        
        //Creating the logo picture
        textureLogo = new Texture(Gdx.files.internal("Images/Logo.jpg"), true);
        textureLogo.setFilter(TextureFilter.MipMapLinearNearest, TextureFilter.MipMapLinearNearest);
        imageLogo = new Image(textureLogo);
        imageLogo.setWidth(Gdx.graphics.getWidth());
        imageLogo.setHeight(textureLogo.getHeight() * imageLogo.getWidth()/textureLogo.getWidth());
        imageLogo.setX(Gdx.graphics.getWidth()/2 - imageLogo.getWidth()/2);
        imageLogo.setY(Gdx.graphics.getHeight()/2 - imageLogo.getHeight()/2);

        stage = new Stage();
        
        //Loading of the TextureAtlas
        game.assets.load("Images/Images.pack", TextureAtlas.class);
        
        //Loading of the Freetype Fonts
        FileHandleResolver resolver = new InternalFileHandleResolver();
        game.assets.setLoader(FreeTypeFontGenerator.class, new FreeTypeFontGeneratorLoader(resolver));
        game.assets.setLoader(BitmapFont.class, ".ttf", new FreetypeFontLoader(resolver));
        
        FreeTypeFontLoaderParameter size1Params = new FreeTypeFontLoaderParameter();
        size1Params.fontFileName = "Fonts/good times rg.ttf";            
        size1Params.fontParameters.genMipMaps = true;                    
        size1Params.fontParameters.minFilter = TextureFilter.Linear;
        size1Params.fontParameters.magFilter = TextureFilter.Linear;                        
        size1Params.fontParameters.size = Gdx.graphics.getWidth()/18;
        game.assets.load("fontMenu.ttf", BitmapFont.class, size1Params);
        
        FreeTypeFontLoaderParameter size2Params = new FreeTypeFontLoaderParameter();
        size2Params.fontFileName = "Fonts/good times rg.ttf";            
        size2Params.fontParameters.genMipMaps = true;                    
        size2Params.fontParameters.minFilter = TextureFilter.Linear;
        size2Params.fontParameters.magFilter = TextureFilter.Linear;                        
        size2Params.fontParameters.size = Gdx.graphics.getWidth()/35;
        game.assets.load("fontTable.ttf", BitmapFont.class, size2Params);
        
        FreeTypeFontLoaderParameter size3Params = new FreeTypeFontLoaderParameter();
        size3Params.fontFileName = "Fonts/good times rg.ttf";            
        size3Params.fontParameters.genMipMaps = true;                    
        size3Params.fontParameters.minFilter = TextureFilter.Linear;
        size3Params.fontParameters.magFilter = TextureFilter.Linear;                        
        size3Params.fontParameters.size = 13 * Gdx.graphics.getWidth()/1000;
        game.assets.load("fontHUD.ttf", BitmapFont.class, size3Params);
    
        //Displaying the logo picture
        stage.addActor(imageLogo);        
        imageLogo.addAction(Actions.sequence(Actions.alpha(0)
                ,Actions.fadeIn(0.1f),Actions.delay(1.5f)));
    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        
        camera.update();
        game.batch.setProjectionMatrix(camera.combined);
    
        stage.act();
        stage.draw();
        
        if(game.assets.update())
            ((Game)Gdx.app.getApplicationListener()).setScreen(new MainMenuScreen(game));                
    }

    @Override
    public void dispose() {
        stage.dispose();
    }
}

About this code :

• In the creator, I first create the logo picture and the stage that will contain the picture.
• I then load the texture atlas in the Asset Manager. See how easy it is to load the Texture Atlas : it only require this code line : game.assets.load("Images/Images.pack", TextureAtlas.class); And when will need to access this Texture Atlas from the Asset Manager, it will be as easy, with this single code line : game.assets.get("Images/Images.pack", TextureAtlas.class);
• I then create fonts and load them in the Asset Manager. Note that for the fonts, I always use FreeTypeFonts. I find them VERY convenient to create fonts which the size will adapt to the screen size. For that, you first need to put a .ttf file of the font you want in your Asset folder.
• In the render(), we go to the MainMenuScreen only once the Asset Manager finished loading everything we wanted to load (game.assets.update()).

And that's it ! We have our first assets : Pictures packed in a Texture Atlas and fonts. All these assets are loaded in the Asset Manager. Now we are ready to use them to create our UI.