LibGDX Simple Slides

Currently working on a game for Wing Wing Shoot Bag using Java with LibGDX. While trying to learn Pixel/Game art I produced a few animated GIFS, one of which would be perfect for the main screen.

Being a little lazy I thought of loading in the individual images and looping through them rather than create one large image and cut it up programmatically for an animation. This worked, I had created a sort of slide player.

After pressing start within the game menu I wanted the current frame to pause and fade out, then the intro of the game would play. The intro follows the movie to which the game is based, several images would fade in, hold then fade out.

Fading in and out
First off I needed to find a way to fade an image in or out, there is a library available to do this: https://code.google.com/p/java-universal-tween-engine/

I followed the guide and setup a Sprite Accessor class: Class source

Slide Manager
Next I created a slide manager class, this would hold an array of slides which could have some simple attributes:

  • sprite;              // The image
  • fade_duration  // Time to fade in or out
  • hold_duration  // Time to hold slide on screen after fade in
  • total_duration  // time for fade in, hold and fade out
  • gap_duration   // time between slides

Classes: Slide ClassSlide Manager

Creating and using the Slide manager
Basically you initiate the new class then add to the array of images with some settings. During the render loop you tell the class to update and it will play your images in order; fading them in and out.

// Declare a new var
SlideManager slide_manager;

// Slides
slide_manager = new SlideManager();

// Add slides that fade in for 4 seconds, holds for 1 seconds
// After fade out leaves a gap of 1 seconds before next slide

slide_manager.add_slide(new Slide(“intro/screens/russian.png”, 4, 1, 1));
slide_manager.add_slide(new Slide(“intro/screens/spy.png”, 4, 1, 1));

// Add a slide with an overlay animation
// Passes animation width, speed and position
slide_manager.add_slide(new Slide(“bck.png”, 2, 0, 1, “frames.png”, 70, 0.1f, 45, 25));

I started playing about with a few variations of slides, would probably move the extras such as animations into an array and create a new animation class to pass with the slide.

This is a render loop for the intro screen, when the slides are done it just loads the next screen:

public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
slide_manager.tick(delta);

// DRAW
batch.begin();
if (!slide_manager.finished){
slide_manager.draw(batch);
}
batch.end();

if (slide_manager.finished){
game.setScreen(game.level_one);
}
}

This is a very quick prototype which only allows simple fading in and out and overlaying of one animation. It requires a library to be imported even though setting the colour(Alpha) of a sprite over time is very simple I could go on to use many more of the libs features.

This class will allows me to quickly create simple comic book style cuts scenes between levels while prototyping.

 

Pixel Art and new project

I have been busy lately with all sorts of things, time off work, ran a marathon but I did start learning pixel art recently so thought I would blog about it.

There many types of artists, sadly I fall into the category of a coder with a zero game budget who has to make all his own art or will have no game. After making the two Jam games I felt it was time to return to my main game “Endure” but while wasting some time on FaceBook I saw a message on a group I follow saying they were celebrating their 10 Year anniversary:

Wing Wing Shoot Bag Facebook group

Anyway, I offered to make the group a game based on a feature length movie they made some 6 years ago about a transgender cop called “Susan Balaka”, they also make short comedy sketches but this had a full story which would be awesome to make into a game.

Oh yes Pixel Art,the game would require lots of animated scenes and pixel style art, so I started having a go:

First Attempt at Balaka

This was a bit shoddy and the guns look like socks! Next I found some forums and asked for help, you may find these useful:


Forums
Final Boss Blues
Way of the Pixel
Pixel Joint
Reddit – pixelart

With some help and reading tutorials I broke a whole new set of pixel art rules and came up with these:

Two main characters (Line from the movie)

One rule I broke early on was using far to many colours, the advise I received most often referred to colour palette and contrast between colours. A useful site for checking how many colours your using:
http://wouterpleizier.nl/pj/index.php?input=http://snag.gy/FngMY.jpg

After some help from Final Boss Blues I started adding some shading to the characters faces, as you progress you look back at your earlier work and realise you will need to redo them over.

Trying to add detail

There will be all sorts of assets in the Balaka game, I had a go at making an arcade machine to test the use of isometric angles with pixel art, I am far from good at this but you can see what it is and its not too ugly?

After making several static images that I tried my hand at animation, I have made simple animations for other games but I always seem to make some sort of mistake, here the flash from the screen is not really pixel art as such and the feet/body position is all wrong.

So there you have it, I am now learning pixel art while making a game. I would suggest finding some good pixel artists and following their work, realise that you will make mistakes, when asking for help do not take criticisms to heart and say thanks when people take the time out to give help.

“His head looks like a potato” – I could have tried to defend this comment but its true and made me laugh.

Happy Pixeling!

 

Random Island Generator

After making a few maps with Tiled I realized it was slow and tedious, I thought a procedural island would be doable, I read a few articles on different methods and decided to go with one which was simple enough for me to code.
Step 1
Create a 18×18 array of Tiles, this is a simple class with variables, name, x, y, number, texture, code. The texture for each tile is set to water:
 private void create_water_map(){
  int id = 0;
  SQUARE = 18;

  for (int i = 0; i < LAYERS; i++) {
    for (int y = 0; y < SQUARE; y++) {
      for (int x = 0; x < SQUARE; x++) { 
 Tile tile = new Tile(x << 5, y << 5, x, y, "WATER", Art.water, id);
 id += 1;
 tileArray_1.add(tile);
      }
    }  
   }
 }
Step 2
Take the centre tile and spiral out, for the first 3 or 4 passes set the Tile to grass, then set the tile to grass if random number < value, the chance gets less as the number of the cycle goes up.
private void create_mini_island(){
  int number_of_cycles = 7;
  int move_amount = 0;
  int random_cycle_no = 3;
  int tile_count = SQUARE * SQUARE;
  int tile_no = tile_count/2 + (SQUARE/2);
  int prev_tile_no = tile_no;
  
  Tile current_tile = tileArray_1.get(tile_no);
  current_tile.texture = Art.grass;
  current_tile.name = "GRASS";
  
  for(int cycle = 1; cycle <= number_of_cycles;cycle++){ 
    int rnd = 100 - (cycle*12);
  
    for(int d = 0; d < 4; d++){
      if(d == 0 || d == 2){
        move_amount += 1;
      }
      for (int m = 1; m <= move_amount; m ++ ){
        if (d == DOWN){
   tile_no -= SQUARE;     
 }else if (d == LEFT){
         tile_no -= 1;             
 }else if (d == UP){
   tile_no += SQUARE;       
 }else if (d == RIGHT){
   tile_no += 1;
 }
 
        process_direction(tile_no,prev_tile_no, tile_count, "GRASS", current_tile, Art.grass, rnd, cycle, random_cycle_no);    
        prev_tile_no = tile_no; 
      }
    }
  }
}
Step 3
The map resembles a basic island but is way too small, now loop through the array and split each tile up into many more and set the border to water, this will help make the island less block like later on.

 

 


 

 

private void enlarge_mini_island(){
  int x,y,start_x,start_y;
  int count = -1;
  int t = -1;
  int split_by = 8;
  land_keep_percent = (int) (split_by * 0.8);
  
  for (Tile tile : tileArray_1) {
    count ++;
    for (int h = 0; h < split_by; h++){
      if (count == t){
 for (int w = 0; w < split_by; w++){
   int row = tile.number / SQUARE;
   int column = tile.number % SQUARE;
   // replace hard coded new width and height 144 and 1008
   int id = w + ((tile.number)*split_by) + (h*144) + (row * 1008);
   
          if (count == t){System.out.println(id + " tile: " + count + " w:" + w + " h:" + h + " row: " + row );}
     start_x = (column*split_by) + w;
     x = (start_x << 5);
     start_y = (row * split_by) + h;
     y = (start_y << 5);
     Tile new_tile;
     // make centre tiles water
     if (w < 1 || w > land_keep_percent || h < 1 || h > land_keep_percent){
       new_tile = new Tile(x, y, row, column, "WATER", Art.water, id);
     } else {
       new_tile = new Tile(x, y, row, column, tile.name, tile.texture, id);
     }
            
            tileArray_2.add(new_tile);
     if (w == 1 && h == 1 && new_tile.name.equals("GRASS")){
       new_tile.marker = true;
       tile_connector.add(new_tile);
            }
        }
      }
    }
  Collections.sort(tileArray_2);  
}

Step 4
 For each tile added to the connector array check down to see if there is land, if yes then turn the tiles below into grass, repeat this for left also which now gives us this:

 

 

Step 5
Smoothing out the land to make the grass areas less box like, loop through all the tiles, if the tile is water and touching at least x number of grass tiles then turn it into grass.

 

Repeat

 

 Step 6
Loop through the array of tiles again making water tiles touching grass randomly into grass.

 

Step 7
Now that the island is finished loop through the array once more, every tile that is water and touching grass becomes sand. Run through this again randomly this time so some shores are thicker.

 

Step 8
Next for each tile that is sand and touching grass calculate which sand to grass tile it should be.
Check the 3 tiles above, to the left and right and the 3 tiles below use this to create a code. If the water tile code is 001 01 001 then it has 3 sand tiles to the right so show the correct tile.
The sand to grass tiles:

 

 Repeat this process for water touching sand.

 

 

The next stages include creating rivers, placing rocks etc and identifying areas to place trees and so on. I have included some code snippets just to give an idea how how parts of this work, its quite simple and takes only a moment to run through.