I'm designing a game that requires generating a vast array of buttons, with different combinations of background colors and outlines. I already have a Sprite for the background and a Sprite for the outline and apply tints to each.
I've already tried to join both on a SpriteBatch but have had no luck converting it to a structure that ImageButton supports.
Thanks in advance.
You could make your own version of an ImageButton by extending the Actor class and implementing your own methods for drawing. The example below isn't tested but should give you and idea on how to make your own Custom button:
private class LayeredButton extends Actor{
private int width = 100;
private int height = 75;
private Texture backGround;
private Texture foreGround;
private Texture outline;
public LayeredButton(Texture bg, Texture fg, Texture ol){
setBounds(this.getX(),this.getY(),this.width,this.height);
backGround = bg;
foreGround = fg;
outline = ol;
addListener(new InputListener(){
public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
// do something on click here
return true;
}
});
}
#Override
public void draw(Batch batch, float alpha){
// draw from back to front
batch.draw(backGround,this.getX(),this.getY());
batch.draw(foreGround,this.getX(),this.getY());
batch.draw(outline,this.getX(),this.getY());
}
#Override
public void act(float delta){
// do stuff to button
}
}
Related
I am trying to implement a map of the universe. When mouse on a pic of the planet simply hovering on the picture, I want to see some information. How to handle this in libgdx?
In the following example, I am trying to give mouseClick sound while hovering, still does not work.
ImageButton imageButton = new ImageButton(drawable);
imageButton.setSize(100,100);
imageButton.setPosition(100,100);
imageButton.addListener(new FocusListener() {
#Override
public boolean handle(Event event) {
mouseClick.play();
return true;
}
});
Here how my override methods #enter and #exit looks`, I created HoverListener and override both methods.
#Override
public void enter(InputEvent event, float x, float y, int pointer, Actor fromActor) {
super.enter(event, x, y, pointer, fromActor);
fromActor.setName("Hello");
}
#Override
public void exit(InputEvent event, float x, float y, int pointer, Actor toActor) {
super.exit(event, x, y, pointer, toActor);
toActor.setName("Bye");
}
Then btn_station.addListener(new HoverListener());
Still no interaction :/
Check the following:
You stage is the input processor: Gdx.input.setInputProcessor(stage)
Your Actor is on the stage: stage.addActor(actor)
The size of your actor is set: actor.setSize(100f, 100f)
You handle input events correctly (implement and override relevant interfaces)
As per your response to my comments, it sounds like in this case you did not set the stage as the input processor.
i am making a game in libgdx. I have a super class Monster with child classes of that monster (warrior,mage,..). I would like to render this Monster class (actually his child) in playScreen class. Each class has its own animaton and textures, damage/health values. How do i do that? In which class do i define position for rendering, animation of that monster? in child classes, super class or in playScreen? My current code is here:
public class Monster {
public Animation monster;
public TextureAtlas atlas;
public int health;
public int damage;
public Monster(){
atlas = new TextureAtlas(Gdx.files.internal("mons1.txt"));
monster = new Animation(1/15f, atlas.getRegions());
}
Child class:
public class Mage extends Monster {
public Mage(int health,int damage, Animation animation){
super(health, damage, animation);
}
PlayScreen class:
public class PlayScreen implements Screen, InputProcessor {
private SpriteBatch batch;
public TextureAtlas atlas;
TextureRegion region;
private int height;
private Viewport viewport;
private Camera camera;
private int width;
private float elapsedTime = 0;
private Handler h;
private Stage stage;
private InputProcessor processor;
public PlayScreen(Handler h){
this.h = h;
batch = h.batch;
camera = h.camera;
viewport = h.viewport;
height = h.height;
width = h.width;
region = new TextureRegion();
stage = new Stage(viewport,batch);
stateTime = 0f;
}
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
batch.begin();
batch.end();
}
Create base class that will have methods for all entities in your world.
For example let's give in name Entity. It will have only fields and methods that base for all monsters, creatures, player also, etc.
class Entity {
protected int x; // use getters/setters to get/change these fields
protected int y;
protected int width;
protected int height;
protected Texture texture;
public Entity(Texture texture, int x, int y, int width, int height) {
this.texture = texture;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
void draw(SpriteBatch batch) {
batch.draw(texture, x, y, width, height);
}
}
Now you can create base entity that will simple draw one texture always.
How to animate it? Create inheritor.
class AnimatedEntity extends Entity{
protected float stateTimer = 0f; // use getters/setters to get/change these fields
protected Animation animation;
public AnimatedEntity(Animation animation, int x, int y, int width, int height) {
super(animation.getKeyFrames(0), x, y, width, height); // calls parent constructor
this.animation = animation;
}
#Override
void draw(SpriteBatch batch) {
texture = animation.getKeyFrame(stateTimer); // texture from parent visible here
super(batch); // calls draw method from Entity
}
}
Now you can extend Monster from AnimatedEntity class. To add attack method for example. Hope you got it. I mean principe.
How to draw all my entities?
Outside constructor :
ArrayList<Entity> entities;
In constructor :
entities = new ArrayList<>();
AnimatedEntity mage = new AnimatedEntity(someAnimation, x, y, width, height);
entities.add(mage);
In render(..) :
for (e in entities) {
e.draw(batch);
}
You could make a render method in the monster and/or child class. It depends if all monsters are going to be rendered the same way, either way it is useful to make an empty render method in the monster class nonetheless (so we do not have to cast classes in future).
public class Monster {
public Animation monster;
public TextureAtlas atlas;
public int health;
public int damage;
public Monster(){
atlas = new TextureAtlas(Gdx.files.internal("mons1.txt"));
monster = new Animation(1/15f, atlas.getRegions());
}
public void render(SpriteBatch batch) {
// here you will use your animation and textureAtlas to render
}
You then call the render method in your main render in PlayScreen, make sure to put the batch as parameter.
If you have one monster you wish to render differently, you could override the monster's render method like this:
public class Mage extends Monster {
public Mage(int health,int damage, Animation animation){
super(health, damage, animation);
}
#Override
public void render(SpriteBatch batch) {
// your mage specific render
// calling super.render(batch) will call its superclass' render
}
I hope you know how to use your animation to actually render it now, otherwise here is a useful link. Good luck!
I am trying to make a sprite move, rotate and resize by using MoveToAction, RotateToAction and ScaleToAction. The first two works fine, but I have a problem with ScaleToAction.
I add the action to the Actor just like I do with the two that works. I think the problem might be in the #Override? When I run the code the sprite moves and rotates but no scaling is done.
I tried to use sprite.setscale as suggested in the answer below, but still no luck. I add the code from the class here:
public class Prizes extends Actor {
private LearnToRead game;
private TextureAtlas atlas;
private TextureRegion prizepic;
private Sprite sprite;
private RotateToAction rta;
private ScaleToAction sta;
private MoveToAction mta;
public Prizes(LearnToRead game) {
this.game = game;
atlas = new TextureAtlas("prizes.pack");
prizepic = atlas.findRegion("haxhatt");
sprite = new Sprite(prizepic);
sprite.setPosition(450 - sprite.getWidth() / 2, 450 * Gdx.graphics.getHeight() / Gdx.graphics.getWidth() - sprite.getHeight() / 2);
//setBounds(sprite.getX(), sprite.getY(), sprite.getWidth(), sprite.getHeight());
setTouchable(Touchable.enabled);
rta = new RotateToAction();
sta = new ScaleToAction();
mta = new MoveToAction();
rta.setRotation(180f);
sta.setScale(2f);
mta.setPosition(0, 0);
mta.setDuration(5f);
rta.setDuration(5f);
sta.setDuration(5f);
Prizes.this.addAction(rta);
Prizes.this.addAction(sta);
Prizes.this.addAction(mta);
}
#Override
public void draw(Batch batch, float parentAlpha) {
sprite.draw(batch);
}
#Override
public void act(float delta) {
super.act(delta);
}
#Override
protected void positionChanged() {
sprite.setPosition(getX(), getY());
}
#Override
protected void rotationChanged() {
sprite.setRotation(getRotation());
}
#Override
protected void sizeChanged() {
sprite.setScale(getScaleX(), getScaleY());
}
}
If also tried to remove sprite and just use the TextureRegion, but didn't get it to work. The texture is drawn, but not moving. I post that code as well, but I do confess that I am quite uncertain about this code:
public class Prizes extends Actor {
private LearnToRead game;
private TextureAtlas atlas;
private TextureRegion prizepic;
private RotateToAction rta;
private ScaleToAction sta;
private MoveToAction mta;
public Prizes(LearnToRead game) {
this.game = game;
atlas = new TextureAtlas("prizes.pack");
prizepic = atlas.findRegion("haxhatt");
Prizes.this.setBounds(450 - Prizes.this.getX(), Prizes.this.getY(), Prizes.this.getWidth(), Prizes.this.getHeight());
setTouchable(Touchable.enabled);
rta = new RotateToAction();
sta = new ScaleToAction();
mta = new MoveToAction();
rta.setRotation(180f);
sta.setScale(2f);
mta.setPosition(0, 0);
mta.setDuration(5f);
rta.setDuration(5f);
sta.setDuration(5f);
Prizes.this.addAction(rta);
Prizes.this.addAction(sta);
Prizes.this.addAction(mta);
}
#Override
public void draw(Batch batch, float parentAlpha) {
game.batch.begin();
game.batch.draw(prizepic, Gdx.graphics.getWidth() / 2, Gdx.graphics.getHeight() / 2);
game.batch.end();
}
#Override
public void act(float delta) {
super.act(delta);
}
#Override
protected void positionChanged() {
Prizes.this.setPosition(getX(), getY());
}
#Override
protected void rotationChanged() {
Prizes.this.setRotation(getRotation());
}
#Override
protected void sizeChanged() {
Prizes.this.setScale(getScaleX(), getScaleY());
}
}
Maybe someone has a good idea about what I am doing wrong?
Use sprite.setScale instead of sprite.scale. The difference is that you are setting it a specific value instead of multiplying the current scale by some value.
But it is redundant to use Sprite with Actor because both classes store position, rotation, scale, and color. It makes more sense to use a TextureRegion with Actor. Or you can use the Image class, which already handles this for you.
Edit:
I see the other part of the issue. You are overriding sizeChanged, but it's the scale, not the size, that you are changing with a ScaleToAction. Actor doesn't have a callback for the scale changing. You could override the setScale methods to apply your change to the Sprite, but like I said above, it doesn't make sense to be using a Sprite for this. You should reference a TextureRegion, and draw it with all the appropriate parameters in the draw() method.
I am creating a game wherein an apple is being shot with an arrow. The apple's location is the XY location of the user input and the arrow actor has to move to that location using the code actor.moveto. The problem is the arrow only moves only once to the user input's direction. I know that the moveTo action of the actor is updated many times per second when I called stageArrow.act in the update method so I am wondering why the arrow only moves once. Here's my code:
appleclass.java
public class AppleClass implements Screen {
Arrow arrow;
private final MainApp app;
public Image ShotImage;
public AppleClass(final MainApp app){
this.app = app;
this.stageApple = new Stage(new StretchViewport(app.screenWidth,app.screenHeight , app.camera));
this.stageArrow =new Stage(new StretchViewport(app.screenWidth,app.screenHeight , app.camera));
arrow = new ArrowClass(app);
}
#Override
public void show() {
InputMultiplexer inputMultiplexer = new InputMultiplexer();
inputMultiplexer.addProcessor(stageApple);
inputMultiplexer.addProcessor(stageArrow);
Gdx.input.setInputProcessor(inputMultiplexer);
arrow();
}
public void arrow(){
arrow.isTouchable();
stageArrow.addActor(arrow);
arrow.addAction((moveTo(Gdx.input.getX(),Gdx.input.getY(),0.3f))); //===> only executes once.
arrow.addListener(new InputListener(){
public void enter(InputEvent event, float x, float y, int pointer, Actor fromActor){
if (Gdx.input.isTouched()){
ShotImage.setVisible(true);
}
}
});}
}
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
update(delta);
}
public void update(float deltaTime){
stageApple.draw();
stageArrow.draw();
stageApple.act(deltaTime);
stageArrow.act(deltaTime);
}
ArrowClass.java
public class ArrowClass extends Actor {
MainApp app;
AppleClass appleClass;
public Texture arrowTexture;
public ArrowClass(final MainApp app){
this.app = app;
arrowTexture = new Texture("medievalarrow.png");
this.setSize(arrowWidth, arrowHeight);
this.setTouchable(Touchable.enabled);
this.setBounds(app.screenWidth*0.45f,0,arrowWidth,arrowHeight);
this.setOrigin(0,0);
}
#Override
public void draw(Batch batch, float parentAlpha) {
super.draw(batch, parentAlpha);
final float delta = Gdx.graphics.getDeltaTime();
this.act(delta);
app.batch.begin();
app.batch.draw(arrowTexture, getX(),getY(),getWidth(),getHeight());
app.batch.end();
}
}
Any help will be highly appreciated. Thanks.
I think the problem is because you are calling this.act(delta) in your ArrowClass' draw method. When you call Stage#act(), it will call the act method on all of its actors for you. Since you're calling it once when you draw and again when you update the stage, it's moving at twice the normal speed and that could be causing it to reach its destination prematurely.
A few other comments about your code, if I may:
First, you probably don't want two separate stages- unless you're using Scene2D.UI, you would normally have a single stage with Arrow and Apple added to it as actors.
Second, when you override Actor#draw(), you should use the batch it passes you to do the rendering instead of using the one from app. You also don't want to call begin() and end() inside your draw method- these are 'expensive' and you only want to call them once per frame. However, if you just use the batch that is passed to draw(), the Stage class will handle beginning and ending for you and you won't need to call them explicitly.
Third, you actually don't need to call super.draw(batch, parentAlpha) because it's an empty method in the Actor class.
Thus, your class could be simplified to the following:
public class ArrowClass extends Actor {
AppleClass appleClass; // You never set this; you may not need it
Texture arrowTexture;
public ArrowClass(MainApp app, arrowWidth, arrowHeight) {
arrowTexture = new Texture("medievalarrow.png");
this.setSize(arrowWidth, arrowHeight);
this.setTouchable(Touchable.enabled);
this.setBounds(app.screenWidth*0.45f,0,arrowWidth,arrowHeight);
this.setOrigin(0,0);
}
#Override
public void draw(Batch batch, float parentAlpha) {
batch.draw(arrowTexture, getX(),getY(),getWidth(),getHeight());
}
}
I want to make a text appear in the center of the screen, indicating
the current level. It should appear gradually and after a while disappear gradually. I'm using scene2d with stages, actors.. so i would use Actions.
This is what i have now:
public class TextActor extends Actor {
private BitmapFont font;
private CharSequence charSequence;
public TextActor(CharSequence charSequence) {
font = new BitmapFont(Gdx.files.internal("fonts/white_standard_font.fnt"));
this.charSequence = charSequence;
}
#Override
public void act(float delta) {
super.act(delta);
}
#Override
public void draw(Batch batch, float delta) {
super.draw(batch, delta);
font.draw(batch, charSequence, getX(), getY());
}
}
In the class that creates the TextActor..
textActor.addAction(Actions.sequence(Actions.fadeIn(1f), Actions.delay(1f), Actions.fadeOut(1f), new Action() {
#Override
public boolean act(float delta) {
textActor.remove();
transitionInProgress = false;
gameState = GameState.RUNNING;
Gdx.input.setInputProcessor(stage);
return true;
}
}));
gameTable.addActor(textActor);
fadeIn, fadeOut, alpha.. don't work. I tried with "moveBy" and it works, so it seems a problem concerning the appearance of the Actor. There is something that escapes me.
The fade actions modify the alpha value of the Actor's color (getColor().a). You're drawing the font directly without applying the color associated with the actor.
Take a look at how Label.draw is implemented for a better understanding. In the meantime, just try adding this above your font.draw(...) call:
font.setColor(getColor())
Or, if you don't want to modify the entire color, just the alpha, try this:
font.getColor().a = getColor().a;
UPDATE:
Also note that you should apply the parentAlpha (second parameter of draw - labelled as delta in your example) to the final alpha:
font.getColor().a = getColor().a * parentAlpha
This allows your actor to fade if you change the alpha of the stage or any parents.