LibGDX ScrollPane Showing Black Screen

Question

Situation:
First of all, I'm newbie in LibGDX.

I'm making a game where players may see all achievements in a screen, so I'm using a ScrollPane for this.

The achievements are shown in a form of pop up (see image below). The list of achievements will be inside those red lines.

Screenshot:

Problem:
The problem is: the screen only shows black screen when I added a widget to the ScrollPane.

The weird thing is:
- When I dragged the ScrollPane, everything is rendered properly.
- But when I let go, the screen goes black again.

What I've done:
- I figured out that any actors (not just table) I put inside the ScrollPane parameter will result in black screen.
- If I set it to null, it works fine.

Code:

public void show() {
    stage = new Stage();

    roomScreenUI = new RoomScreenUI();
    roomScreenUI.setName("RoomScreenUI");
    stage.addActor(roomScreenUI);

    roomScreenButton = new RoomScreenButton[5];
    for(int i=0; i<roomScreenButton.length; i++){
        roomScreenButton[i] = new RoomScreenButton(i+1, roomScreenUI.getScaleFactor());
        roomScreenButton[i].setName("RoomScreenButton");
        stage.addActor(roomScreenButton[i]);
    }

    roomScreenAchievementUI = new RoomScreenAchievementUI(roomScreenUI.getScaleFactor());
    roomScreenAchievementUI.setName("RoomScreenAchievementUI");
    stage.addActor(roomScreenAchievementUI);


    //----------------THE PROBLEM LIES HERE----------------//

    achievementContainer = new Table();

    scrollPane = new ScrollPane(achievementContainer);
    // scrollPane = new ScrollPane(null); <-- If I replace it with this line, it works fine

    //----------------THE PROBLEM LIES HERE----------------//

    achievementTable = new Table();
    achievementTable.setSize(roomScreenAchievementUI.getWidth() * 0.9f, roomScreenAchievementUI.getHeight() * 0.8f);
    achievementTable.setPosition(roomScreenAchievementUI.getX() + roomScreenAchievementUI.getWidth() / 2 - achievementTable.getWidth() / 2, roomScreenAchievementUI.getY() + roomScreenAchievementUI.getHeight() * 0.48f - achievementTable.getHeight() / 2);
    achievementTable.debug();
    achievementTable.add(scrollPane).expand().fill();
    achievementTable.setName("AchievementTable");
    stage.addActor(achievementTable);

    Gdx.input.setInputProcessor(stage);
}

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

    // ... code omitted ... //

    stage.act(delta);
    stage.draw();
}

Question:
Anyone has any ideas about what's going on?
And how do I fix it?
Thx in advance...

================================================================================== UPDATE ==================================================================================
After hours of experiment, I created a much simpler project with only a screen and an actor from a scratch:

TestActor.java (this is the actor)

Texture texture;
Sprite sprite;

public TestActor(){
    // I used the default generated image badlogic.jpg
    texture = new Texture(Gdx.files.internal("badlogic.jpg"));
    sprite = new Sprite(texture);
}

@Override
public void draw(Batch batch, float alpha){
    batch.draw(sprite, 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
}

TestClass.java (this is the screen)

Stage stage;
ScrollPane scrollPane;
Table outerTable, innerTable;
TestActor testActor;

@Override
public void show() {
    stage = new Stage();

    testActor = new TestActor();
    stage.addActor(testActor);

    //---------THE PROBLEM IS STILL HERE---------//

    innerTable = new Table();
    scrollPane = new ScrollPane(innerTable); // change it to null, it works

    //---------THE PROBLEM IS STILL HERE---------//

    outerTable = new Table();
    outerTable.setPosition(0, 0);
    outerTable.setSize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
    outerTable.debug();
    outerTable.add(scrollPane).fill().expand();
    stage.addActor(outerTable);
}

@Override
public void render(float delta) {
    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    stage.act(delta);
    stage.draw();
}

Also I figured out something that may be a clue while I was debugging:
- At the first frame, everything is rendered properly.
- Starting from second frame, the screen goes black.

Is this a bug?
Or is it something that I misunderstand?
Any help would be greatly appreciated...

Briannabrianne

Are you sure that you are adding your ScrollPane and your achievementContainer to your stage? – Kalbli

I set achievementContainer as widget of scrollPane. Next I added scrollPane to achievementTable as a new cell. So yes, I'm sure. – Briannabrianne

Wild guess...what if you put something drawable into your scroll pane? Not having anything in it to draw or give it an interior size may be triggering some bug, since it's an unusual use case. – Greco

Yes I've tried that before. And the result was anything inside the scroll pane was rendered properly, but everything else was black :( – Briannabrianne

Do you mean the entire screen is black, or only the area where the scroll pane is? – Greco

The area where the scroll pane is OK, but the area outside it is black – Briannabrianne

@JayKazama, same thing here... Did you have any luck fixing/finding out what was going on? – Killick

@Killick I had help from angelangel, try his solution in his answer below. – Briannabrianne

Answer 1

Edit tray this code

example:

public class TestActor extends Widget {
Texture texture;
Sprite sprite;

public TestActor(){
    // I used the default generated image badlogic.jpg
    texture = new Texture(Gdx.files.internal("badlogic.jpg"));
    sprite = new Sprite(texture);
}

@Override
public void draw(Batch batch, float parentAlpha){

    Color color = getColor();
    batch.setColor(color.r, color.g, color.b, color.a * parentAlpha);

    batch.draw(sprite, 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
}

}

Rafferty

Um... If you take a look at my game screenshot, the scrollpane is in a form of pop up in the middle of the screen. That's why I need an actor that draw everything as the background (the room) and separated it from the scrollpane. Your example just draws everything inside the scrollpane (the achievements), not outside it. – Briannabrianne

@Jay Kazama is costing me understand what you want to do, if you want to put, actorTest behind the outerTable try this: – Rafferty

Your last 2 lines gave me errors. setFillParent method is not available for testActor, addActorBefore method is also not available for stage. – Briannabrianne

The result is still the same as before (black screen). – Briannabrianne

@Jay Kazama was my mistake confused with stage actor, I just corrected – Rafferty

I get your idea but it seems that you misunderstand me. I'm going to use outerTable as the boundary of the scrollpane, while innerTable is necessary since the scrollpane can only have 1 child. If you take a look at my screenshot, I still need an actor outside the outerTable for the background. The outerTable itself will contain the list of achievements. – Briannabrianne

@Jay Kazama you can put a screenshot of how it looks your GDX – Rafferty

It's not even drawing anything now, not even in the first frame. Also I don't think I can use table for the background, since there are buttons at fixed positions, it will be hard for me to set the position using cells. – Briannabrianne

You should try to test the project yourself, it's just a few minutes to create. See if you understand what I mean by black screen. – Briannabrianne

Answer 2

Here is a workaround for one who still meet this error: try scrollpane.setFadeScrollBars(false);

Kirt