After learning about resolution and aspect ratio independence, we are now able to create our splash screen with the help of scene2D. I have to note here that LibGDX has a great documentation about everything we are going to use, thus i am not going into much detail about every key function and little detail.
LibGDX orthographic camera
It's time to create our camera class.
On the " core → java → com.getest.game " (in here we will create everything from now and on) create a new package with the name " camera ". Inside, create a java class with the name " AndroidCamera " and place the code below;
package com.getest.game.camera;
import com.badlogic.gdx.graphics.OrthographicCamera;
public class AndroidCamera extends OrthographicCamera {
public AndroidCamera(float width, float height) {
super((float)width, (float)height);
this.position.x = (float)(width / 2);
this.position.y = (float)(height / 2);
}
}
We just created a camera that extends libGDX's OrthographicCamera class and takes 2 arguments, the width and the height of our world. Then the camera's position will be in the center of this world, meaning that if we for example say that we want the width and the height to be 1280 and 720, then the camera will view the world from the position (620, 360). The world we will see from this camera
expands 620 units on the left and right of this position and 360 units on top and bottom, thus we will see a 1280 x 720 world. This is how virtual resolution looks like!
LibGDX splash screen using scene2D
Now, create a package with the name " screens " and inside create a java class with the name " SplashScreen " This class must implement libGDX's Screen. If you do that correctly a notation will pop - up telling you to implement all the methods. The class should look like;
package com.getest.game.screens;
import com.badlogic.gdx.Screen;
public class SplashScreen implements Screen {
@Override
public void show() {
}
@Override
public void render(float delta) {
}
@Override
public void resize(int width, int height) {
}
@Override
public void pause() {
}
@Override
public void resume() {
}
@Override
public void hide() {
}
@Override
public void dispose() {
}
}- show is the method that will be called first. We have to write all the key code there.
- render is responsible for the rendering, without it we won't be able to see anything on the screen.
- hide is called when we are moving on to another screen for example.
- We will call dispose when we will move from the splash screen.
- Whenever a resize event occurs, resize function is called.
- We won't use the other methods for now.
In the show method place this code;
Don't worry if there is an error, we just have to declare all the variables. We will do it at the next step, where i will show you the whole code.
Now then, we have to understand every line of the above code, because then will understand how scene2D functions. First of all, we define a resolution of 1280 x 720 that will be our virtual one.
Then we create a texture from the png image (our logo) that is in the file splashScreen. So, we have to create a file with the name splashScreen inside the assets file of our project in AndroidStudioProjects. I have already taught you how to get in there in the How To 2 tutorial. From there, you can also download the logo.
To achieve resolution independence we have to filter our texture with the best filters. The optimal would be to also create different sets of graphics, as i told you in the Common Problems 1 tutorial and decide which to choose upon finding the device's resolution, but for the purposes of this tutorial we won't be doing that yet (we will do that when we create the final, fully functional game).
Then we define an image with this filtered texture and we also define it's size to be the same with our virtual resolution, because we want the image to cover the whole screen.
After that, we create a stage with a FitViewport and the AndroidCamera we previously created. Viewports + camera = aspect ratio independence. We defined a stage that has 1280 x 720 virtual resolution and thus 16:9 aspect ratio and the FitViewport method is the technique that takes a 16:9 window in the screen and fills the rest of the space with black bars. The black bars won't look ugly in our case because our logo background is already black, so no harm at all!
Finally, we add the image as an actor to our stage and define an action for this actor. We want the image to fade in, wait a little bit and then fade out.
That's is exactly how scene2D works. There is a stage which we must specify and in there, there are actors with their own actions.
In the render method place this code;
We clear the screen, set the default colour of it to be black, we render the stage and we order it to act.
The final class should like this;
The final touch was to call the dispose method when the screen changes. In the dispose method we destroy the stage and the loaded texture. Always remember to get rid of textures and generally of everything you don't need.
Everything is fine now, but
" How do we call the splash screen? "
Create a package with the name " game " and drag and drop inside the " GeTest " java class. We previously used this class to display our logo but that won't happen now. This class is called first when we run our game, so from there we must call our splash screen. In the GeTest class place the code below;
@Override
public void show() {
WIDTH = 1280;
HEIGHT = 720;
splashtexture = new Texture(Gdx.files.internal("splashScreen/splashScreen.png"));
splashtexture.setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear);
splashimage = new Image(splashtexture);
splashimage.setSize(1280,720);
splashstage = new Stage(new FitViewport(WIDTH,HEIGHT, new AndroidCamera(WIDTH,HEIGHT)));
splashstage.addActor(splashimage);
splashimage.addAction(Actions.sequence(Actions.alpha(0.0F), Actions.fadeIn(1.25F),Actions.delay(1F), Actions.fadeOut(0.75F)));
}Don't worry if there is an error, we just have to declare all the variables. We will do it at the next step, where i will show you the whole code.
Now then, we have to understand every line of the above code, because then will understand how scene2D functions. First of all, we define a resolution of 1280 x 720 that will be our virtual one.
Then we create a texture from the png image (our logo) that is in the file splashScreen. So, we have to create a file with the name splashScreen inside the assets file of our project in AndroidStudioProjects. I have already taught you how to get in there in the How To 2 tutorial. From there, you can also download the logo.
To achieve resolution independence we have to filter our texture with the best filters. The optimal would be to also create different sets of graphics, as i told you in the Common Problems 1 tutorial and decide which to choose upon finding the device's resolution, but for the purposes of this tutorial we won't be doing that yet (we will do that when we create the final, fully functional game).
Then we define an image with this filtered texture and we also define it's size to be the same with our virtual resolution, because we want the image to cover the whole screen.
After that, we create a stage with a FitViewport and the AndroidCamera we previously created. Viewports + camera = aspect ratio independence. We defined a stage that has 1280 x 720 virtual resolution and thus 16:9 aspect ratio and the FitViewport method is the technique that takes a 16:9 window in the screen and fills the rest of the space with black bars. The black bars won't look ugly in our case because our logo background is already black, so no harm at all!
Finally, we add the image as an actor to our stage and define an action for this actor. We want the image to fade in, wait a little bit and then fade out.
That's is exactly how scene2D works. There is a stage which we must specify and in there, there are actors with their own actions.
In the render method place this code;
@Override
public void render(float delta) {
Gdx.gl.glClearColor(0.0F, 0.0F, 0.0F, 0.0F);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
splashstage.act();
splashstage.draw();
}We clear the screen, set the default colour of it to be black, we render the stage and we order it to act.
The final class should like this;
package com.getest.game.screens;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.actions.Actions;
import com.badlogic.gdx.scenes.scene2d.ui.Image;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.getest.game.camera.AndroidCamera;
public class SplashScreen implements Screen {
private Texture splashtexture;
private Image splashimage;
private Stage splashstage;
private float WIDTH,HEIGHT;
public SplashScreen() {
}
@Override
public void show() {
WIDTH = 1280;
HEIGHT = 720;
splashtexture = new Texture(Gdx.files.internal("splashScreen/splashScreen.png"));
splashtexture.setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear);
splashimage = new Image(splashtexture);
splashimage.setSize(1280,720);
splashstage = new Stage(new FitViewport(WIDTH,HEIGHT, new AndroidCamera(WIDTH,HEIGHT)));
splashstage.addActor(splashimage);
splashimage.addAction(Actions.sequence(Actions.alpha(0.0F), Actions.fadeIn(1.25F),Actions.delay(1F), Actions.fadeOut(0.75F)));
}
@Override
public void render(float delta) {
Gdx.gl.glClearColor(0.0F, 0.0F, 0.0F, 0.0F);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
splashstage.act();
splashstage.draw();
}
@Override
public void resize(int width, int height) {
splashstage.getViewport().update(width,height,true);
}
@Override
public void pause() {
}
@Override
public void resume() {
}
@Override
public void hide() {
dispose();
}
@Override
public void dispose() {
splashtexture.dispose();
splashstage.dispose();
}
}
The final touch was to call the dispose method when the screen changes. In the dispose method we destroy the stage and the loaded texture. Always remember to get rid of textures and generally of everything you don't need.
Everything is fine now, but
" How do we call the splash screen? "
Create a package with the name " game " and drag and drop inside the " GeTest " java class. We previously used this class to display our logo but that won't happen now. This class is called first when we run our game, so from there we must call our splash screen. In the GeTest class place the code below;
package com.getest.game.game;
import com.badlogic.gdx.Game;
import com.getest.game.screens.SplashScreen;
public class GeTest extends Game {
public GeTest(){
}
public void create() {
setScreen(new SplashScreen());
}
public void render() {
super.render();
}
}
The packages and classes structure should look like this image;
Everything is completed now. Just run the game and here it comes, your first fully responsive splash screen!
Note;; For every dependency, a line of code will be automatically underlined in Android Studio. Just click alt + enter when this happens and add the needed dependency. Be careful to add the right one. For example we need the badlogic's screens when we implement it and not the java's one.
Feel free to ask any questions in the comments below!
 |
| Packages and classes |
Everything is completed now. Just run the game and here it comes, your first fully responsive splash screen!
Note;; For every dependency, a line of code will be automatically underlined in Android Studio. Just click alt + enter when this happens and add the needed dependency. Be careful to add the right one. For example we need the badlogic's screens when we implement it and not the java's one.
Feel free to ask any questions in the comments below!
Awesome, Thanks for your work, but if i want to ad smaller actors, what ratio would i use for their sizes?.
ReplyDeleteAt this stage, our world is 1280 x 720 units and the aspect ratio is 16:9 which can easily be derived by dividing 1280 by 720.
DeleteThe ratio of another smaller actor doesn't matter at all. It just has to be between 1280 units wide and 720 units tall. For example another button with dimensions 200 x 200 would look great.
Let me know if you have any more questions!