Renderer
1. Before the Rendering
2. RGB values
3. The Loading Screen
4. Pre Game Screen
5. Rendering the GameScreen
6. GameScreen Show Man
7. GameScreen Show Crystals
8. Showing the Score
9. Finishing Up
The renderer you use for your games is going to be where you display all of your images. It will differ in each of your games based on what it is that you are rendering. Here, we'll go through an example of a renderer for the Basic Game from my Basic Game Tutorial. You'll likely want to go through the entire Basic Game tutorial as much of what we are rendering makes more sense in the context of the entire game we're doing.
1) Before the Rendering
So first off, we'll declare vars and set the initial values we'll need for the game. Here's the constructor for the renderer:
public Renderer(BasicGame game) {
this.game = game;
this.man = game.man;
this.assetMgr = game.assetMgr;
this.scoreArea = game.scoreArea;
this.bar = game.bar;
titleImage = assetMgr.getImg("badlogic.jpg");
// RGB values for the game screen background
redGame = 147;
greenGame = 218;
blueGame = 249;
// RGB values for the pre game screen background
redPreGame = 55;
greenPreGame = 55;
bluePreGame = 55;
// RGB values for the loading screen background
redLoading = 74;
greenLoading = 137;
blueLoading = 242;
} // END Renderer
As you can see, we simply create local references for the major game objects, load the image shown on the initial screen, and set vars for the RGB values for different screens. The image loading code is explained in my Asset Manager tutorial. Now let's go through the RGB values.
2) RGB values
RGB values are 3 numbers that specify the color we want to use. In this case, the colors are used to change the background. Let's take a look at the "gameScreen" colors:
redGame = 147;
greenGame = 218;
blueGame = 249;
What that says is "change the Red portion to '147', change the green portion to '218' and change the blue portion to '249'". That gives you the light blue color of the background shown during the game. I decided to specify these for each screen and then reference them on the appropriate screen to make it easier to change them if needed. Now let's take a look at the individual rendering methods.
3) The Loading Screen
Rendering the loading screen is pretty straightforward. All we do is change the color of the screen to the color we specified in the previous section, start our batch, render our image, and stop the batch. We also show the bar after the batch is stopped. Here's the method:
public void loadingScreen(SpriteBatch batch, float stateTime) {
Gdx.gl.glClearColor(redLoading/255f, greenLoading/255f, blueLoading/255f, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(titleImage, 150, 100);
batch.end();
bar.showBar();
} // END loadingScreen
Pretty straightforward, right? You can see what the "bar.showBar" method does in the Percent Bar tutorial here.
And here's what the loading screen looks like:
4) Pre Game Screen
The Pre Game Screen is basically just like the loading screen with the addition of 2 stage commands which draw the buttons and allow the buttons to receive presses. Here's the method:
public void preGameScreen(SpriteBatch batch, float stateTime, Stage stage) {
Gdx.gl.glClearColor(redPreGame/255f, greenPreGame/255f, bluePreGame/255f, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(titleImage, 100, 200);
batch.end();
// set stage for buttons
stage.act();
// show buttons
stage.draw();
} // END render pre game
Again, pretty straightforward code.
5) Rendering the GameScreen
Now the Game Screen renderer is slightly more complex than the other renderers we've gone over. Once we begin the batch, we aren't simply displaying an image: we're displaying all of the game elements. So here, we start the batch and call methods which take care of the different parts of the game that need to be shown here's the method:
public void gameScreen(SpriteBatch batch, float stateTime, Array<Crystal> crystals) {
Gdx.gl.glClearColor(redGame/255f, greenGame/255f, blueGame/255f, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
showMan(batch);
showCrystals(batch,crystals);
showScore(batch);
batch.end();
bar.showBar(); // must be outside of the batch processing
} // END render game
So this one is just like the Loading Screen except for the methods that need to be called within the batch commands. So let's go over those methods.
6) GameScreen Show Man
In this method we display the current frame for the "man". Here's the code:
public void showMan(SpriteBatch batch) {
// get the current animation to display
currentRegion = man.getCurrentRegion();
batch.draw(currentRegion, man.getX(), man.getY());
} // END show man
Basically we get the current region to display from the Man class and display it here. We also use methods in the Man class to determine where to display the region. You can see the full class for the Man in the Basic Game Tutorial.
7) GameScreen Show Crystals
The method to show the crystals in the game is basically like the method to show the Man except that the crystals are in an array as there are generally multiple crystals that need to be rendered. Here's the method:
public void showCrystals(SpriteBatch batch, Array<Crystal> crystals) {
for(Crystal crystal : crystals) {
currentRegion = crystal.getCurrentRegion();
if(currentRegion != null)
batch.draw(currentRegion, crystal.getX(), crystal.getY());
} // END for
} // END show crystals
We just get the current region from the crystal class (from the Basic Game tutorial) and then check to make sure there is at least 1 crystal to render, and render them in a loop.
8) Showing the Score
Displaying the score is a bit more involved than the man and the crystals. For this one I strongly suggest you take a look at the ScoreArea tutorial and the Graphic text tutorial. Those will provide the foundations for the way the rendering is done here. Once you see how those are set up, then this rendering code will make more sense. Finished with those tutorials? Good! Now here's the rendering code for the score:
public void showScore(SpriteBatch batch) {
allDigits = scoreArea.getScoreDigits();
// loop through digits passed back
if(allDigits != null) {
int i = 0;
for(Texture img : allDigits) {
batch.draw(img, scoreArea.getX(i), scoreArea.getY());
i++;
} // END for
} // END if
} // END show score
On a basic level, it works the same way the other rendering methods work: get the info to be rendered from the specific class, check to make sure something is there to render, and loop through the items to be rendered. This is a bit more specific as we are rendering each digit, and we have an variable as an index (i) to keep track of so we know which digit we are rendering. This needs to be passed to the "getX" method so it returns the correct X location to render the current digit. Again, look at the ScoreArea tutorial in order to see a more complete breakdown of how this works.
9) Finishing Up
Well, that's the renderer! It really doesn't stand on its' own well as it's here to render graphics which have been "set up" in other classes. But this is an example of how you put all of your rendering into one class. Hopefully it can give you an idea of how to set of a renderer for your own games. I understand that this tutorial borrowed heavily on other code which we didn't go over here, but creating a renderer outside of the context of a specific game is quite difficult, so we used an example with the Basic Game tutorial on this site.