LibGDX post #4: Counting the drags, adding sound, and designing a splashscreen

December 16, 2016

For those five or six of you reading these LibGDX posts, my apologies. I took a bit of a hiatus from Android development over the past two months, but I'm back at it now, and determined to finish Olivia's Fireflies before the end of the year — or get damn close.

Counting the fireflies

As I try to nail down the basics before diving into the details, I knew that I needed to count — or do something — each time I successfully dragged a firefly into the jar. Since I already had a System.out.println going to the console each time, I knew it wouldn't be too hard. I spent a little bit of time looking into custom fonts for LibGDX, but the more I tested things out, the quicker I realized that fonts still have a way to go — I soon lost patience, anyway. So instead, I compressed some transparent PNGs, and I was off to the races.


// THIS IS FOR THE TARGET ... THE JAR
// IT TURNS YELLOW WHEN A FIREFLY GETS DRAGGED ON IT
dragAndDrop.addTarget(new DragAndDrop.Target(validTargetImage) {
    public boolean drag (DragAndDrop.Source source, DragAndDrop.Payload payload, float x, float y, int pointer) {
    getActor().setColor(Color.YELLOW);
    return true;
}

public void reset (DragAndDrop.Source source, DragAndDrop.Payload payload) {
    getActor().setColor(Color.WHITE);
}

// INCREMENTS A VARIABLE FOR EACH SUCCESSFUL CAPTURE
public void drop (DragAndDrop.Source source, DragAndDrop.Payload payload, float x, float y, int pointer) {
    System.out.println("Accepted: " + payload.getObject() + " " + x + ", " + y);
    addNumber();
}
});

So once we hit the drop method (successfully dropped the item to the target) — I threw in a method named addNumber().

Here's how that switch statement looks:

// METHOD FOR INCREMENTING VARIABLE
public void addNumber() {
numberCounter++;

System.out.println("Count is now " + numberCounter);

switch (numberCounter) {
    case 1:  showNumber(new Texture(
        Gdx.files.internal("numbers/1.png")));
    break;
    case 2:  showNumber(new Texture(
        Gdx.files.internal("numbers/2.png")));
    break;
    case 3:  showNumber(new Texture(
        Gdx.files.internal("numbers/3.png")));
    break;
    case 4:  showNumber(new Texture(
        Gdx.files.internal("numbers/4.png")));
    break;
    case 5:  showNumber(new Texture(
        Gdx.files.internal("numbers/5.png")));
    break;
    case 6:  showNumber(new Texture(
        Gdx.files.internal("numbers/6.png")));
    break;
    case 7:  showNumber(new Texture(
        Gdx.files.internal("numbers/7.png")));
    break;
    case 8:  showNumber(new Texture(
        Gdx.files.internal("numbers/8.png")));
    break;
    case 9:  showNumber(new Texture(
        Gdx.files.internal("numbers/9.png")));
    break;
    case 10: showNumber(new Texture(
        Gdx.files.internal("numbers/10.png")));
    break;

}

}

You can see I'm just pulling in PNG files from my android assets/numbers folder. Within my switch statement, I'm introducing a method named showNumber(), (see below) which is letting me control how the numbers each animate on the screen. You should look into the Action class to see what all it can do. In addition, I'm running a simple if statement, checking to see when the user drags in their tenth firefly — when the number reaches ten, we first slide that number off the screen, and then use setScreen() to change scenes to the Farm screen.


public void showNumber(Texture numTexture) {
    // Instead of strings, maybe make the arg a texture?
    // Then, we can do a series of actions where the number falls
    // into place, pauses, and then moves off the screen to the right.

    //font.setColor(Color.WHITE);
    //font.getData().setScale(16f);
    numberTexture = numTexture;
    numImage = new Image(numberTexture);
    numImage.setPosition(1400, 1000);

    Action moveDown1 = Actions.moveTo(1400, 200, .2f);
    Action pause = Actions.delay(2f);
    Action moveDown2 = Actions.moveTo(1400, -900, .2f);

    Action numberMove = Actions.sequence(moveDown1, pause, moveDown2);

    stage.addActor(numImage);

    // This is so that I can get the "10" off the screen
    // before I go to another screen

    RunnableAction run = new RunnableAction();
    run.setRunnable(new Runnable() {
        @Override
        public void run() {
            game.setScreen(new Farm(game));
        }
    });


    if (numberCounter == 10) {
        SequenceAction sa = new SequenceAction();
        sa.addAction(numberMove);
        sa.addAction(run);
        numImage.addAction(sa);
    }
    else {
        numImage.addAction(numberMove);
    }


    System.out.println("Number on screen is " + number);

}

Adding sound

What's a evening forest scene without a few crickets?

First, I needed to go out and find a (hopefully) free loop of crickets chirping. I first went to my go-to site back in 2000, FlashKit, but didn't quite find what I wanted. In the end, I either got it off freesound.org — or possibly YouTube. I played around with a few audio classes in LibGDX, but the one that seemed to work best for me was the Music class.

First, I introduced my Music variable up top.

private Music crickets;
Then, in my show() method, I imported my audio file.
// IMPORT AUDIO
crickets =  Gdx.audio.newMusic(Gdx.files.internal("Sounds/crickets.ogg"));

crickets.setLooping(true);

It's working well right now, but I'll likely go back into the file and edit it so my loop feels smooth.

Adding a splashscreen

Yes, I said I would stick with the basics, but I'm impatient by nature. While there are a few more features I know that I need to add, I couldn't resist doing a little bit of old-fashioned Photoshop work. I first sketched out a rough idea of what I wanted, below. A simple nighttime forest scene, with a Mason jar containing a captured firefly, the main logo, and a start button.

I then started out with one of my background files (they have the correct dimensions), and began building layers in Photoshop — it was a combination of individual stock art (a jar, a firefly, a forest scene, some pine trees, etc), some fun fonts, and some Photoshop juju. This is my first attempt, and I'll likely stick with it for now.

My final goal is to actually have two apps: one that's free, and counts to ten in a single forest scene — but I'll also have a paid app (probably 99 cents) that contains multiple scenes, and also spells out farm animal names ... potentially types of vehicles in a city scene, etc, etc. We'll see how it goes.

All for now. Good luck with your Android-ing!