Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

[libGDX] Spine Actors in ScrollPane

kosanake

Hi!

Tried to put three animated actors in a ScrollPane of scene2d:

        imagesTable = new Table();

    Table pic1 = new Table();
    pic1.add(new SpineActor1());
    imagesTable.add(pic1);

    Table pic2 = new Table();
    pic2.add(new SpineActor2());
    imagesTable.add(pic2);

    Table pic3 = new Table();
    pic3.add(new SpineActor1());
    imagesTable.add(pic3);

    scrollPane = new ScrollPane(imagesTable);

Actors doesn't scroll as smooth as Images (but "discretly") and i see two neighbour actors simultaneously on a cell. Is there any workaround for that?

kosanake

Nate

Show SpineActor1 please.

kosanake

Hi Nate! Here is simplified code:

public class SpineActor1 extends Actor{

private AnimationState animationState;
private Skeleton skeleton;
private SkeletonRenderer skeletonRenderer;

public SpineActor1() {

    setWidth(325);
    setHeight(125);
    setPosition(0,0);
    setName("20");

    loadAnimation();
}

private void loadAnimation() {

    SkeletonJson json = new SkeletonJson(Assets.img_atlas_actors);
    SkeletonData data = json.readSkeletonData(Gdx.files.internal("data/animation/jet.json"));

    AnimationStateData stateData = new AnimationStateData(data);

    animationState = new AnimationState(stateData);

    skeleton = new Skeleton(data);
    skeleton.setToSetupPose();
    skeleton.updateWorldTransform();

    skeletonRenderer = new SkeletonRenderer();

    animationState.setAnimation(0, "flight", true);
}

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

    skeleton.getColor().a = parentAlpha;

    skeletonRenderer.draw(batch, skeleton);

    super.draw(batch, parentAlpha);
}

@Override
public void act(float delta) {

    skeleton.setX(getX() + getWidth() / 2);
    skeleton.setY(getY());

    skeleton.update(delta);
    skeleton.updateWorldTransform();

    super.act(delta);
}
}

Nate

To put it in a table, it should be a widget. Implement getPrefWidth/Height so the table knows how big the actor wants to be. Or you could leave it as is and specify the size on the table cell the actor goes in:

pic1.add(new SpineActor1()).size(100,200);

Once the table knows how big it needs to be, the scrollpane knows how big the table wants to be so it knows how to scroll it, if needed. There should be no difference in smoothness of scrolling or animating.

kosanake

Hi Nate! Sorry for late reply!

Code above doesn't work for me. But it's ok, i'll use static images )

Maybe you'll help with another issue.. I wanna make button row with spine actors below the scrolling images:

        //Scroll
        scrollPane = new PlaneScrollPane(imagesTable);
        scrollPane.setScrollingDisabled(false, true);

    // Buttons
    Table buttons = new Table();
    FrameButton fb = new FrameButton();
    buttons.add(fb).size(70);

    container.add(scrollPane);
    container.row();
    container.add(buttons);
    stage.addActor(container);

I see the button in center of row in debug mode and when press animation works fine, BUT the actor (image) is at 0,0 position of the stage. Tried to modify setPosition(200, 200) - it doesn't react - all the same at 0, 0.

Here the actor's code:

public class FrameButton extends Actor {

public Skeleton getSkeleton() {
    return skeleton;
}

private Skeleton skeleton;
private SkeletonRenderer skeletonRenderer;
private AnimationState animationState;

public FrameButton() {

    setPosition(200, 200);
    setWidth(70);
    setHeight(70);

    loadAnimation();

    addListener(listener);

}

private void loadAnimation() {

    SkeletonJson json = new SkeletonJson(HaresAssets.img_atlas_actors);
    SkeletonData data = json.readSkeletonData(Gdx.files.internal("data/animation/button.json"));

    AnimationStateData stateData = new AnimationStateData(data);

    animationState = new AnimationState(stateData);

    skeleton = new Skeleton(data);
    skeleton.setToSetupPose();
    skeleton.updateWorldTransform();

    skeletonRenderer = new SkeletonRenderer();

}


@Override
public void act(float delta) {

    skeleton.setX(getX() + getWidth() / 2);
    skeleton.setY(getY());

    skeleton.update(delta);
    skeleton.updateWorldTransform();

    animationState.update(delta);
    animationState.apply(skeleton);

    super.act(delta);
}

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

    skeleton.getColor().a = parentAlpha;

    skeletonRenderer.draw(batch, skeleton);

    super.draw(batch, parentAlpha);

}

InputListener listener = new InputListener() {
    @Override
    public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {

        animationState.setAnimation(0, "press", false);

        return true;
    }

    @Override
    public void touchUp(InputEvent event, float x, float y, int pointer, int button) {


        super.touchUp(event, x, y, pointer, button);
    }
};
   }

Nate

An actor in a table is sized and positioned by the table:
https://code.google.com/p/libgdx/wiki/scene2dui#Layout

kosanake

Such a strange code in actor's act method helped me with last issue:

        skeleton.setX(getParent().getX() + getParent().getParent().getX());
        skeleton.setY(getParent().getY() + getParent().getParent().getY() ) ;

Nate

Not sure why you need that, but if it works, then great. 🙂