LibGDX - How do I get my button to work? - libgdx

I'm new to LibGDX and I am taking it slowly. When I run the application it just force closes due to an error. But I'm not sure what the problem is. Here is the code for the button that I have.
#Override
public void show() {
// Viewport Camera
camera = new PerspectiveCamera();
viewport = new ExtendViewport(800, 480, camera);
stage = new Stage(new ExtendViewport(800, 840));
Gdx.input.setInputProcessor(stage);
skin = new Skin(atlas);
atlas = new TextureAtlas(Gdx.files.internal("ui/button.pack"));
table = new Table(skin);
table.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
textButtonStyle = new TextButtonStyle();
textButtonStyle.up = skin.getDrawable("button.up");
textButtonStyle.down = skin.getDrawable("button.down");
buttonPlay = new TextButton("Play", textButtonStyle);
buttonPlay.setWidth((float) (Gdx.graphics.getWidth()/2.5));
buttonPlay.setHeight(Gdx.graphics.getHeight()/6);
buttonPlay.setPosition((Gdx.graphics.getWidth()/2-buttonPlay.getWidth()/2), (float) (Gdx.graphics.getHeight()-(buttonPlay.getHeight())*2.5));
buttonPlay.toFront();
stage.addActor(buttonPlay);
table.debug();
table.add(buttonPlay);
}
The error:
Exception in thread "LWJGL Application" java.lang.NullPointerException
at com.badlogic.gdx.scenes.scene2d.ui.Skin.addRegions(Skin.java:102)
at com.badlogic.gdx.scenes.scene2d.ui.Skin.<init>(Skin.java:88)
at com.badlogic.gdx.screens.Menu.show(Menu.java:83)
at com.badlogic.gdx.Game.setScreen(Game.java:61)
at com.badlogic.gdx.screens.Splash.render(Splash.java:38)
at com.badlogic.gdx.Game.render(Game.java:46)
at com.dakotapederson.slingshotsteve.SlingshotSteve.render(SlingshotSteve.java:29)
at com.badlogic.gdx.backends.lwjgl.LwjglApplication.mainLoop(LwjglApplication.java:206)
at com.badlogic.gdx.backends.lwjgl.LwjglApplication$1.run(LwjglApplication.java:114)
Line 75 is where the show() method is.

Your problem is that you are initialising your skin with an atlas before your atlas has been initialised, the atlas is the null pointer. You have done:
skin = new Skin(atlas); //Here atlas isn't loaded so exception occurs
atlas = new TextureAtlas(Gdx.files.internal("ui/button.pack"));
When it should be:
atlas = new TextureAtlas(Gdx.files.internal("ui/button.pack")); // Load atlas first
skin = new Skin(atlas);

Related

Load external SWF loader content not accessible

Actually i have a SWF that is loaded by another SWF.
This SWF that is loaded, itself load another SWF.
This may be weird, but it's in a context of an online game that let you develop SWF as plugins.
So, we have SWFA(the video game) ---> SWFB ----> SWFC
When i try to load the external SWFC, the COMPLETE event fire, but i am only able to add it to the stage by adding directly the Loader, because the loader doesn't have any content property.
public function load(){
loader = new Loader();
loader.contentLoaderInfo.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.contentLoaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIoError);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.NETWORK_ERROR, onIoError);
loader.contentLoaderInfo.addEventListener(AsyncErrorEvent.ASYNC_ERROR, onAsyncError);
applicationContext = new LoaderContext(true, ApplicationDomain.currentDomain);
loader.load(getRequest(),applicationContext);
}
private function getRequest():URLRequest {
Security.allowDomain("https://mock.com");
Security.loadPolicyFile("https://mock.com/crossdomain.xml");
var req:URLRequest = new URLRequest("https://mock.com/mock.swf");
req.method = URLRequestMethod.POST;
req.data = new URLVariables("name=kk");
var encoder:Base64Encoder = new Base64Encoder();
encoder.encode("user:pass");
var credsHeader:URLRequestHeader = new
URLRequestHeader("Authorization", "Basic " + encoder.toString());
req.requestHeaders.push(credsHeader);
return req;
}
Here is the onComplete function
public function onComplete (e:Event):void{;
this.addChild(e.target.content); // this is null
this.addChild(e.currentTarget.content); // null too
}
So, when i run my SWF from my local computer, everything goes well, e.target.content contain my external SWF.
But when i run the same within the SWF Loader inside the online game, i can't find any content property. Plus, childAllowParent property of LoaderInfo is always false.
Does someone have an idea of what's going on?
Thanks

Screen Display not proper on some screens Libgdx

I am developing a game in which i am making a Game Over Screen but the components are not rearranging properly.
What i am Getting on 1024 * 720 screen is:
and what it should look like:
and the code is:
#Override
public void show() {
stage = new Stage(new ScreenViewport());
camera = new OrthographicCamera(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
Gdx.input.setInputProcessor(stage);
font = new BitmapFont(Gdx.files.internal("newfont.fnt"));
verysmallfont = new BitmapFont(Gdx.files.internal("verysmallfont.fnt"));
smallfont = new BitmapFont(Gdx.files.internal("smallfont.fnt"));
atlas = new TextureAtlas("ui/buttons.pack");//add atlas
skin = new Skin(atlas);
table = new Table(skin);
actiontable = new Table(skin);
actionbar = new Table(skin);
actionbar2 = new Table(skin);
table.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
actiontable.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
actionbar.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
actionbar2.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
TextButton.TextButtonStyle buttonback = new TextButton.TextButtonStyle();
buttonback.up = skin.getDrawable("back");
buttonback.pressedOffsetX = 1;
buttonback.pressedOffsetY = -1;
buttonback.font = font;
buttonBack = new TextButton("",buttonback);
TextButton.TextButtonStyle lifebuttonstyle = new TextButton.TextButtonStyle();
lifebuttonstyle.up = skin.getDrawable("life");
lifebuttonstyle.pressedOffsetX = 1;
lifebuttonstyle.pressedOffsetY = -1;
lifebuttonstyle.font = font;
buttonlife = new TextButton("",lifebuttonstyle);
TextButton.TextButtonStyle textButtonStyle = new TextButton.TextButtonStyle();
textButtonStyle.up = skin.getDrawable("heart_game_continue");
textButtonStyle.pressedOffsetX = 1;
textButtonStyle.pressedOffsetY = -1;
textButtonStyle.font = font;
buttonPlay = new TextButton("",textButtonStyle);
TextButton.TextButtonStyle adsfreeStyle = new TextButton.TextButtonStyle();
adsfreeStyle.up = skin.getDrawable("Video");
adsfreeStyle.pressedOffsetX = 1;
adsfreeStyle.pressedOffsetY = -1;
adsfreeStyle.font = font;
buttonVideo = new TextButton("",adsfreeStyle);
TextButton.TextButtonStyle sharebuttonStyle = new TextButton.TextButtonStyle();
sharebuttonStyle.up = skin.getDrawable("Replay");
sharebuttonStyle.pressedOffsetX = 1;
sharebuttonStyle.pressedOffsetY = -1;
sharebuttonStyle.font = font;
buttonReplay = new TextButton("",sharebuttonStyle);
Label.LabelStyle headingstyle = new Label.LabelStyle(font,Color.WHITE);
label = new Label("Game Over",headingstyle);
label.setFontScale(1.7f);
Label.LabelStyle contstyle = new Label.LabelStyle(smallfont,Color.WHITE);
cont = new Label("Continue?",contstyle);
cont.setFontScale(2f);
Label.LabelStyle replaystyle = new Label.LabelStyle(verysmallfont,Color.WHITE);
replay = new Label("Replay",replaystyle);
shortVideo = new Label("(Short Video)",replaystyle);
replay.setFontScale(2f);
shortVideo.setFontScale(2f);
table.align(Align.top);
table.padTop(197f);
table.add(label);
table.getCell(label).spaceBottom(150f);
table.row();
table.add(cont);
table.getCell(cont).spaceBottom(80f);
table.row();
table.add(buttonPlay).size(200f,200f);
actiontable.add(buttonVideo).size(200f,200f);
actiontable.add(buttonReplay).size(200f,200f);
actiontable.align(Align.bottom);
actiontable.getCell(buttonVideo).spaceBottom(20f).padRight(100f);
actiontable.getCell(buttonReplay).spaceBottom(20f).padLeft(100f);
actiontable.row();
actiontable.add(shortVideo).padRight(100f);
actiontable.add(replay).padLeft(100f);
actiontable.padBottom(197f);
actiontable.setFillParent(true);
actionbar.align(Align.topLeft).setWidth(Gdx.graphics.getWidth());
actionbar.add(buttonBack).align(Align.left).size(90f,90f);
actionbar2.align(Align.topRight);
actionbar2.add(buttonlife).align(Align.right).size(90f,90f);
actionbar.getCell(buttonBack).pad(43f);
actionbar2.getCell(buttonlife).align(Align.right).pad(43f);
stage.addActor(actionbar2);
stage.addActor(actionbar);
stage.addActor(table);
stage.addActor(actiontable);
buttonPlay.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y) {
((Game) Gdx.app.getApplicationListener()).setScreen(new Main(level,a,start,sweep,collide,innerarcs,out,mid,arcsleft,left,pointerColor));
};
});
buttonReplay.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y) {
int total = out+mid+innerarcs;
((Game) Gdx.app.getApplicationListener()).setScreen(new Main(level,a,total,pointerColor));
}
});
buttonBack.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y) {
((Game) Gdx.app.getApplicationListener()).setScreen(new Menu(level));
}
});
}
SpriteBatch batch;
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0.184f,0.184f,0.184f,1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.act(delta);
stage.draw();
}
private OrthographicCamera camera;
#Override
public void resize(final int width, final int height) {
table.setTransform(true);
table.setSize(width,height);
actiontable.setTransform(true);
actiontable.setSize(width,height);
actionbar.setTransform(true);
actionbar.setSize(width,height);
}
I am new to libgdx please help i dont have any knowledge about how to use camera and viewports.
Thanks in advance..
€dit: sorry my bad - there's nothing like "stage.resize"
But I'll let the answer in, because it'll fix your problem, though not as fast as you wish, but in a more clear way.
(THE FOLLOWING TEXT IS NOT NECESSARRY FOR THE ANWSER AND ARE ONLY SUGGESTIONS)
(if you follow the following steps, you'll save yourself time & headaches in the future)
I'd suggest a viewport, because they'll kill many problems with scaling, and there are quite a few, from which you can choose, as you need.
LibGdx Viewports
A viewport takes care for different screen sizes with the help from different techniques (e.g. scaling, black bars)
Additionally a viewport is SUPER easy to implement.
You'll do the following(e.g. FitViewport(stretches content, if necessary)):
stage = new Stage();
OrthographicCamera cam = new OrthographicCamera();
cam.setToOrtho(false, 800, 600);
stage.setViewport(new FitViewport(800, 600, cam));
TADA. You implemented a viewport. Was not so hard.
(but make sure to call stage.getViewport().update(w, h) in the resize(w, h) method!! AND DON'T FORGET IT!!)
Second suggestion I'd do is:
Use a main table.
So you do following
Table myMothershipTable = new Table();
myMothershipTable.setFillParent(true);
myMothershipTable.add(add);
myMothershipTable.add(all);
myMothershipTable.add(content);
stage.addActor(myMothershipTable);
Now you've only one actor, which is the table, and you can be damned sure, that this table will fill the whole screen.
Your screen is 10999x3? yeah. the table will be 10999x3.
Good. If you've refactored your whole stuff into one table I'd suggest the next step:
stage.setDebugAll(true); //this will help you to see the actual buildup from your actors & elements
So heres the why:
The viewport takes care for your stage size
the single table makes sure, that your complete content will be within the screen ==> now you can add one item after another, and make sure with..
stage.setDebugAll(true).. that your content is placed properly.
If you follow this simple steps, you'll save yourself a lot of time and headache with designing the UI.

LibGDX: Skin and scaling problems

I'm trying to use Skins with TextButtons. However I'm having an issue where the TextureRegions of the Skin are NOT being scaled down to the tablesize.
This is leading to an issue like in this image:
As you can see that is the e from the word Hello. I managed to scale that down to a more reasonable size (still wrong). However the Button textures are still way too large.
Any ideas? Because I am pulling my hair out. I am using a custom viewport with a custom screenspace width and height. Here is the create method for the menu.
public void create(){
menuStage = new Stage();
camera = new OrthographicCamera();
viewPort = new StretchViewport(SCREEN_SPACE_WIDTH, SCREEN_SPACE_HEIGHT, camera);
viewPort.setWorldSize(SCREEN_SPACE_WIDTH, SCREEN_SPACE_HEIGHT);
menuStage.setViewport(viewPort);
devTexture = new Sprite (new Texture(Gdx.files.internal("data/16by9.png"), true));
Image newActor = new Image(devTexture.getTexture());
newActor.setSize(
viewPort.getWorldWidth(),
viewPort.getWorldHeight()
);
menuStage.addActor(newActor);
skin = new Skin(Gdx.files.internal("data/uiskin.json"));
menuTable = new Table();
skin.getFont("default-font").setScale(0.08f);
menuTable.debugAll();
menuTable.setFillParent(true);
TextButton a,b,c;
a = new TextButton("hello", skin);
b = new TextButton("hello", skin);
c = new TextButton("hello", skin);
a.getStyle().up.setMinWidth(2.0f);
b.getStyle().up.setMinHeight(2.0f);
b.getStyle().up.setMinWidth(2.0f);
c.getStyle().up.setMinHeight(2.0f);
c.getStyle().up.setMinWidth(2.0f);
menuTable.row();
menuTable.add(a).size(2.0f, 1.0f);
menuTable.add(b).size(2.0f, 1.0f);
menuTable.add(c).size(2.0f, 1.0f);
menuStage.addActor(menuTable);
camera.translate(
newActor.getWidth() / 2,
newActor.getHeight() / 2
);
}

How to re-size a TextButton accordingly to the Stage size using Libgdx

As you can see in my code below, I create a camera using the width and height of the device target. Then I create stage with the size of the camera viewport and add a Window to it (everything works fine till here in any device).
However, when add a TextButton to the Windows is not re-sized accordingly to the Stage size.
So, how can I re-size a TextButton to looks good in any device?
#Override
public void create() {
.
.
.
// Define camera our view port in meters because of Box2D
camera = new OrthographicCamera(20,
20 * (Gdx.graphics.getHeight() / (float) Gdx.graphics.getWidth()));
// create stage with the size of the viewport
stage = new Stage(new StretchViewport(camera.viewportWidth,camera.viewportHeight));
// create restart button
atlas = new TextureAtlas("data/ui/atlas.pack");
skin = new Skin(Gdx.files.internal("data/ui/menu_skin.json"), atlas);
TextButton restartButton = Util.createTextButton("Restart", skin, "red",
new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
timer=timeMax;
}
});
// create a window and add the restart to it
skin.add("texture", new Texture("data/texture.png"));
WindowStyle windowStyle = new WindowStyle(new BitmapFont(), Color.WHITE, skin.newDrawable("texture"));
windowTryAgain = new Window("", windowStyle);
windowTryAgain.setMovable(false);
//windowTryAgain.padTop(20);
//stage.addActor(window);
windowTryAgain.setPosition(0, 0);
windowTryAgain.setSize(2,2);
windowTryAgain.row().fill().expandX();
windowTryAgain.add(restartButton).fill(0f, 0f);
windowTryAgain.center();
windowTryAgain.setVisible(false);
stage.addActor(windowTryAgain);
.
.
.
}
public class Util {
public static TextButton createTextButton(String text, Skin skin,
String styleName, EventListener listener) {
TextButton textButton = new TextButton(text, skin, styleName);
textButton.pad(10);
//Set height does not work in my case
//textButton.setHeight(0.1f);
textButton.addListener(listener);
return textButton;
}
}
You can make a secondary camera and attach it to your stage. To scale the table just scale the viewport size of the secondary camera
An example would be:
//Heres where you set the scale of your buttons and your table
Camera secondaryCamera = new Camera(Gdx.graphics.getWidth() * scale,
Gdx.graphics.getHeight() * scale);
Stage stage = new Stage();
Table table = new Table();
ImageButton button = new ImageButton(drawableUp, drawableDown, drawableChecked);
table.setFillParent(true);
stage.getViewport().setCamera(secondaryCamera);
table.add(ImageButton);
stage.addActor(table);
This works great when your using it for touch controls. You can use a table for the entire UI and scale it to your liking independent of your other game items;

WriteableBitmapRenderer.RenderAsync() ArgumentException "Value does not fall within the expected range"

I'm developing a WP8 app using Nokia Imaging SDK.
I'm trying to add filter effect to an image and render it into a WriteableBitmap.
Here is my code:
private async void PhotoChosen(object sender, PhotoResult photoResult)
{
if (photoResult != null)
{
BitmapImage bitmap = new BitmapImage();
bitmap.SetSource(photoResult.ChosenPhoto);
WriteableBitmap wb = new WriteableBitmap(bitmap.PixelWidth, bitmap.PixelHeight);
StreamImageSource source = new StreamImageSource(photoResult.ChosenPhoto);
var effects = new FilterEffect(source);
effects.Filters = new IFilter[] { new SketchFilter() };
var renderer = new WriteableBitmapRenderer(effects, wb);
await renderer.RenderAsync();
}
}
All is going fine, but when this line is processing:
await renderer.RenderAsync();
This ArgumentException is thrown:
Value does not fall within the expected range
I think I've made a mistake creating the IImageProvider effects or the WriteableBitmap wb
Does anyone got this problem and found an issue ?
Thanks :)
You need to set the stream position before setting it as source for StreamImageSource.
BitmapImage bitmap = new BitmapImage();
bitmap.SetSource(photoResult.ChosenPhoto);
WriteableBitmap wb = new WriteableBitmap(bitmap.PixelWidth, bitmap.PixelHeight);
photoResult.ChosenPhoto.Position = 0;
StreamImageSource source = new StreamImageSource(photoResult.ChosenPhoto);
You need to do this because you have called bitmap.SetSource(photoResult.ChosenPhoto). That means that the stream has already been read once, therefore it's position is at the very end of the stream. When StreamImageSource tries to read it, it is already at the end, thus "Value does not fall within the expected range."