preface

In the last section we were able to make a small program that logs out events, but we can see that the output of the program is on the console, and the pop-up window has no response.

So now that we’re familiar with the basics of libGDX, it’s time to work on the GUI interface.

Basic knowledge of

Assets folder

Under the libGDX project, you have an assets folder (or android project) and apply all the assets (images, audio…). Are in this directory, where the application reads the resource and uses it, and can create subdirectories under asset. Such as assets/images.

FileHander

Com. Badlogic. Etf has. Files. FileHander store a file reference. FileHander’s constructors are:

  • FileHander(java.lang.string) : Passes an absolute or relative path (under the project file) to the path file (folder)
  • FileHander(FileHander) : Passing in a FileHander object and pointing to the file it points to (folder)

Read the file using gdx.files

We usually don’t use FileHander own constructor, but instead USES com. Badlogic. Etf has. The etf has. Files to read the file.

In gdx.files, there are generally three ways to get a FileHander:

  • internal( String ) :Obtain the file (folder) in the path (relative path under assets), read-only.Generally read as pictures, etc
  • local( String ) :Get local files (application private directory), readable and writable.Used to save game data
  • external( String ) :Get external files (C:\Users\ current user \ or SD card.Tips:For details, see External storage permission for AndroidAndroid wheels elder brother), can read and write.Used to save large data or export data, etc

How to use it is simple:

FileHander internalFile=Gdx.files.internal("images/photo.png");
FileHander localFile=Gdx.files.local("data.txt");
FileHander externalFile=Gdx.files.external("C:\\test.txt");
Copy the code

The Pixmap pixel figure

We can use com. Badlogic. Etf has. The graphics. The Pixmap class to build a simple pixel texture. The constructors commonly used for Pixmap are:

  • Pixmap(FileHander) : Pass in a FileHander and read the image into Pixmap
  • Pixmap(int,int,Pixmap.Format) :Pass in the image width and height (integers in pixels) and the Format object (image encoding, in pixmap. Format,Generally, Format.RGBA8888 is used)

At this time the image is still blank, we need to draw graphics in the image:

// Both are set to black
pixmap.setColor(com.badloc.gdx.graphics.Color.BLACK);
pixmap.setColor(0.0.0.1);
Copy the code

Draw a graph with coordinates based on the image (0,0 on the upper left) and the new graph will overwrite the old one:

pixmap.fill();  // Fill the entire image
pixmap.fillCircle(10.10.10);  // Draw a (10,10) solid circle with radius 10
pixmap.fillRectangle(30.10.10.20);  // draw a (30,10) solid rectangle of size 10 by 20
Pixmap.fillTriangle(0.10.5.0.10.10); // draw a solid triangle (0,10),(5,0),(10,10)
pixmap.drawCircle(10.10.10);  // Draw a hollow circle
pixmap.draRectangle(30.10.10.20);  // Draw a hollow rectangle
pixmap.drawLine(0.0.100.100);  // draw a line from (0,0) to (100,100) (1 pixel)
pixmap.drawPixmap(pixmap2,0.0);  // Draw another Pixmap on the image (doll doge)
Copy the code

Texture Texture

Com. Badlogic. Etf has. Graphics. Texture store a reference image, the structure of the commonly used method is as follows:

  • Texture(FileHander) : Gets a reference to the picture at the path (within assets only)
  • Texture(String) : Same as above, but less often
  • Texture(Pixmap) : Use pixel images to construct textures, as Pixmap cannot draw directly

Demonstration:

// This is how it works
Texture texture=new Texture(Gdx.files.internal("images/photo.png"));
Copy the code

TextureRegion texturing area

Unlike Texture, com. Badlogic. Etf has. Graphics. G2d. TextureRegion classes are not stored the whole image, but only part of the capture image (upper left to 0, 0), a common constructor is as follows:

  • TextureRegion(Texture Texture) : Stores the whole image directly
  • TextureRegion(Texture,int width,int height) : intercepts the image from 0,0 with a certain width*height
  • TextureRegion(Texxture,int x,int y,int width,int height) : Extracts a picture from (x,y) with width*height

SpriteBatch brush

Empty texture cannot be displayed on the screen, as a result, we need to com. Badlogic. Etf has. Graphics. G2d. SpriteBatch “brush” according to texture mapping on the screen:

SpriteBatch batch=new SpriteBatch();
Copy the code

To draw a texture using SpriteBatch, you call the begin() method to start drawing, the draw() method to draw the texture, and the end() method to end the drawing.

Common draw() methods are as follows:

  • Draw (Texture Texture,float x,float y) : Draw from (x,y)
  • Draw (Texture Texture,float x,float y,float width,float height) : Draw from (x,y) and limit the Texture size

Use as follows:

batch.begin();
batch.draw(texture,0.0);
batch.draw(texture,0.0.50.50);
batch.end();
Copy the code

Gl CLS

Since the texture is drawn in the render() method and the texture does not automatically refresh, we need to use com.badloc.gdx.gdx.gl to clear the screen, otherwise each rendering will overlap:

// This is usually enough
Gdx.gl.glClearColor(1.1.1.1);  // Set the white clear screen
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);  / / clear screen
Copy the code

LibGDX DE try

Now we’ll make a small program that displays various graphics and a libGDX image:

Image (named libgdx.png and placed in assets folder) :

// Set the initiator class window to 500*500
package com.libGDX.test;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Pixmap;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;

public class Test extends ApplicationAdapter {
	Pixmap pixmap;
	SpriteBatch sb;
        // Pixel texture
	Texture texture;
        // Image texture
	Texture texture2;
	@Override
	public void create(a) {
		super.create();
		pixmap=new Pixmap(500.500,Pixmap.Format.RGBA8888);
                // Draw a black solid circle with radius 50 at the center of (50,50)
		pixmap.setColor(Color.BLACK);
		pixmap.fillCircle(50.50.50);
                // start with (0,0) (bottom left) and draw a hollow blue rectangle 100 by 100Pixmap. SetColor (Color. BLUE); pixmap.drawRectangle(0.0.100.100);
                // draw a solid gray triangle of (0,150),(50,50),(100,150)
		pixmap.setColor(Color.GRAY);
		pixmap.fillTriangle(0.150.50.50.100.150);
                Draw a green line from (0,0) to (500,500)
		pixmap.setColor(Color.GREEN);
		pixmap.drawLine(0.0.500.500);
		sb=new SpriteBatch();
		texture=new Texture(pixmap);
                pixmap.dispose;
		
		texture2=new Texture(Gdx.files.internal("libGDX.png"));
	}
	@Override
	public void render(a) {
		super.render();
		Gdx.gl.glClearColor(1.1.0.1);
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
		sb.begin();
                // The coordinates drawn are the coordinates in the lower left corner of the texture
		sb.draw(texture, 0.0);
		sb.draw(texture2,200.200);
		sb.end();
	}
        @Override 
        public void dispose(a){
            //texture.dispose(); texture2.dispose(); sb.dispose(); }}Copy the code

Running results: