I'm using Scene2d to build ui for my screen.
Stage stage = new Stage(new StretchViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight()));
Skin skin = ResourceManager.getSkin("uiskin");
Label label = new Label("my text", skin);
When stage.draw() has called, the label appeared in left bottom corner of the screen. But I want to use the viewport with unit size.
float ratio = (float)Gdx.graphics.getWidth() / Gdx.graphics.getHeight();
Stage stage = new Stage(new StretchViewport(ratio, 1));
In this way I can define size of other actors in percents of screen height - 0.5 , 0,23 ect. And it works well for other Actors, ImageActors, but how I can properly change size of my label? Label draw in the same place, I think, but it is tremendous for the stage, be cause its size is in pixel 183 *10 ect. And
label.setBounds(.....);
isn't working.
You need to set the scale on the font. I'm not sure why it doesn't happen automatically, but the fix is to add a line like:
font.GetData().setScale(<viewport width>/Gdx.graphics.getWidth(), <viewport height>/Gdx.graphics.getHeight());
Related
I'm working on a puzzle game using text to arrange, for the blocks themselves I create a children DisplayObject which contains a Texfield and I set the size of the texfield using a variable because each frame has a different font size, for example:
var sizeOfTF = 35;
var my_text_format: TextFormat = new TextFormat();
my_text_format.size = sizeOfTF ; // set size
puzzle.text.defaultTextFormat = my_text_format;
puzzle.text.setTextFormat(my_text_format);
puzzle.text.autoSize = TextFieldAutoSize.LEFT;
stage.addChild(DisplayObject(puzzle));
then I have a project with a stage size of 720x1280 and the text appears normally, when I change the stage to 390x 694 with content scale enabled, the children do not change and the text size remains the same as at 720x1280.
how to know the font-size difference if the stage changes?
or how to make children responsive adjust the size of the stage?
Previously I used scaleX and scaleY to set the font size but it only worked in one frame.
i work with a new game , i have create 2 camera one camera for real world and another (GUI) camera for a static resolution (800 x 480)
private void init () {
camera = new OrthographicCamera(16,9);
camera.position.set(0, 0, 0);
camera.update();
cameraGUI = new OrthographicCamera(800,480);
cameraGUI.position.set(0, 0, 0);
cameraGUI.update();
And i want to use a textButton in my game , so i've create a new stage using a new fitViewPort
fitViewPort=new FitViewport(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
gameController.stage=new Stage(fitViewPort);
then i create my textButtons using my bitmap font and i try it on the Desktop , and it's great
desktop
but when i try another device , the position is not the same
Tablet
then i think for using the cameraGui Width and height for my view port , the font is very bad stretched
any help please :(
Don't create a special camera for GUI, because viewport already has a camera.
Make your viewport width and height fixed, in your case:
fitViewPort = new FitViewport(800, 480);
gameController.stage = new Stage(fitViewPort);
And then just add actors to stage and draw it just by calling method
gameController.stage.draw();
Note: Remember to add gameController.stage.getViewport().update(width, height); in your resize method.
Edit: Using small fixed viewport (800x480 is small) will cause scaling, that is why the font is stretched. For example if you run a 800x480 layout on 1920x1080 display it will be scaled by 225%.
What you can do is generate a font with big size and the set scale to its data fe. bitmapFont20.getData().setScale(0.5F); (in this case font is generated by FreeTypeFontGenerator with size 40). Using this trick you will be able to get a great results. The proof is below. It is viewport of 640x360F * (float) Gdx.graphics.getHeight() / (float) Gdx.graphics.getWidth() scaled to 1920x1080. Font is generated with size 72 and then data scale is set to 0.5F
Here is the same text, but without modified data scale.
I an currently using Libgdx Animation class( com.badlogic.gdx.graphics.g2d.Animation) in a game. However I need the animation to grow in size on certain events. How do I accomplish this?
Animation is used to select the correct frame (TextureRegion) based on the time elapsed. It has nothing to do with how you render that frame. Therefor it is not different as how you render anything else.
You didn't provide enough information for that. But usually you'd render it something like this:
TextureRegion textureRegion = animation.getKeyFrame(time += delta);
spritebatch.draw(textureRegion, x, y, width, height);
So to change the size would be to change the width and height variables. You didn't provide enough information on how you'd like to do that. But you can do that for example using this:
width = 0.8f;
height = 1.9f;
Basically I've got a bitmap which is an image that the user captures from a webcam which was previously stored as bitmapdata which I converted into a bitmap and added it onto the stage..
From here I want the bitmap to be selectable so I can do other things to it, so I realised I would need to add this into sprite in order to add event listeners onto it.
Having done so, for some reason my application ain't wanting to recognise the events added?
Here is the code I've got..
Bitmap..
//Create a new bitmap from the video capture
image = new Bitmap(bitmap,"auto",true);
//Set the width and height properties
image.width=150;
image.height=125;
//Set the stage position
image.x = 430;
image.y = 280;
stage.addChild(image);
Sprite..
var imageSprite:Sprite;
imageSprite = new Sprite();
imageSprite.x = 200;
imageSprite.y = 50;
imageSprite.addChild(image);
stage.addChild(imageSprite);
Event listener:
imageSprite.addEventListener(MouseEvent.MOUSE_DOWN, SelectWebImage1);
Function:
function SelectWebImage1(e:MouseEvent): void {
trace("Clicked");
}
I receive no errors from this but I noticed that when I have that code written in my application, all of the code underneath it doesn't seem to function?
I really don't know what i'm doing wrong, any help appreciated thanks!
When you set Sprite's dimensions, you implicitly set its scale, and also if you place some graphics by using width and height, the width and height includes any sprite's children, accounting for their position. You should place that bitmap into imageSprite and not set x,y proerties for the bitmap, this way you won't have to account for its position inside the sprite to position the bitmap.
As of right now, I am trying to create a tiling effect for a game I am creating. I am using a tilesheet and I am loading the tiles to the sprite like so...
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(30, 0,tWidth ,tHeight );
var tileImage is the bitMapData. 30 is the Number of pixels to move retangle. then tWidth and tHeight is how big the rectangle is. which is 30x30
This is what I do to change the bitmap when I role over the tile
this.graphics.clear();
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(60, 0,tWidth ,tHeight );
I clear the sprite canvas. I then rewrite to another position on tileImage.
My problem is....
It removes the old tile completely but the new tile positions farther to the right then where the old bitmap appeared.
My tile sheet is only 90px wide by 30px height. On top of that, it appears my new tile is drawn behind the old tile. Is there any better way to perfect this.
again, all i want is for the bitmap to change colors
You could try to load the whole tilesheet in your sprite, and then redefine the scrollRect property each time you need to.
this.scrollRect = new Rectangle( 30, 0, tWidth ,tHeight );
Note that you can't just edit scrollRect.x, .y, .width or .height ; you have to redefine a new Rectangle each time.
Using scrollRect will probably be much faster that redrawing part of the bitmap.
You can read this excellent article from Grant Skinner for more informations about scrollRect.