Libgdx sprite not scalling with viewport - libgdx

I have a stretch viewport that I update everytime the screen is rezised with:
viewport.update(x, y, true);
I drew a background with photoshop and then i removed the objects and put those in a separate file, so what i mean by this is that the objects are in the correct size from origin since i separated them from the original background and texturepacked them.
What i find is that if i draw this objects (using Sprite) i have to set the scale of each sprite to 2.25 otherwise the sprites would be smaller and I dont know what i am doing wrong since im using a single camera/viewport, a single batch and calling batch.setProjectionMatrix(camera.combined).
What i am doing wrong?
This is how i created the viewport and camera:
public static Dimension virtualResolution = VirtualResolution.RES_768x432.resolution;
public static Dimension screenResolution = new Dimension(1920, 1080);
camera = new OrthographicCamera();
camera.setToOrtho(false, GameSettings.virtualResolution.getWidth(), GameSettings.virtualResolution.getHeight());
camera.update();
viewport = new StretchViewport(GameSettings.screenResolution.getWidth(), GameSettings.screenResolution.getHeight(), camera);
viewport.apply();

You are not using Cameras and Viewports correctly.
Cameras have their own "view width" and "view height" which you actually specify in the setToOrtho method. However you don't need to set such things to a camera when you are using a Viewport.
Instead you give these size parameters to the Viewport constructor along with an Orthographic camera.
gamecam = new OrthographicCamera();
gamePort = new StretchViewport(V_WIDTH, V_HEIGHT, gamecam);
gamePort.apply();
gamecam.position.set(new Vector3(100, 100, 0));
In your game you will always work with the camera unless the screen is resized.
If the screen is resized is the code will look like this.
#Override public void resize(int width, int height) {
gamePort.update(width, height); // The third boolean parameter
// centers the camera
}
In your question you used two sizes, one based off of the screen resolution, the other a virtual width and height. You will only use one and this gets passed to the Viewport.
This should now correctly scale your sprites!
I hope this answer helped! If you have any more questions please feel free to comment below!

Related

Preffered viewPort to dealing with textButton libgdx

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.

How do I scale a Libgdx Animation?

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;

How to render properly Box2DDebugRenderer

I've some problem for render Box2D Debug with Box2DDebugRenderer.
I've 2 OrthographicCamera, one for render the world (named Cam) and one for the HUD (healthBar, Armor, ...) (named hudCam).
I've tried to render :
b2dr.render(world, cam.combined); -> I can't see the Box2D
b2dr.render(world, cam.projection);
b2dr.render(world, hudCam.combined);
b2dr.render(world, hudCam.projection);
b2dr.render(world, new OrthographicCamera().combined); and b2dr.render(world, new OrthographicCamera().projection)
I can't find a way to render the Box2D exactly like cam, to see the edge of all bodies.
If somebody understand my problem, please help me !
Thx.
Unfortunately some tutorial out there suggest to use a meter-to-pixel-conversion when using Box2D. This is not neccessary (at least with Libgdx), as this conversion can be done by using a camera.
The problem in your case is, that you are using a meter-to-pixel-conversion when rendering the Sprites, while the Box2DDebugRenderer renders everything 1:1.
To solve this problem you have to get rid of the meter-to-pixel conversion and use the camera or the viewport to "scale" the things.
THis way, the Box2DDebugRenderer and your SpriteBatch can (and should) use the same camera to render.
For the camera/viewport:
The constructor has the params width and height. Those params are often set as Gdx.graphics.getWidth() and Gdx.graphics.getHeight(), which in my optinion is not right, the game should be resolution-independent.
You should instead select those values depending on how big your player (or any other visible entity) is in real life and how big it should be on screen.
Let's say you have a little characte, like in your game. It is 1m tall in real live and should take 1/13 of the screen height (more or less like in your first picture, where the screen is about 13 times as high as the character).
So your cameras height should be 13, your characters height (also it's Box2Ds Body height) should be 1m. Next you need to define the width. For that i like to think about my desired aspect ratio. Lets assume the game should focus on 16/9 devices, the width is then (13/9)*16=23.
Now your camera should be created like this:
camera = new OrthographicCamera(23, 13);

Unable to play Sprite Images with aspect ratio in Windows Phone 8

I am trying to play sprite images on windows phone 8. But its not playing correctly, if the single sprite image is larger than screen dimensions. I try to reduce the image with aspect ratio by using rectangle and ImageBrush. Still I am facing the same problem. Please find the below scenario.
Scenario :
Sprite Width/Height : 22100 / 516
Single Sprite Width/Height : 850/516
Mobile Dimensions : 800/480
Could anyone can help me out.
So, if I understood your question, all you need to do is:
Create a BitMapImage, don't use ImageBrush or Rectangle..
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri(imagePathOrUrl, UriKind.RelativeOrAbsolute);
I suggest you to add also this instruction to prevent memory issues:
bitmapImage.DecodePixelWidth = imageWidth;
Add the BitMapImage to an Image control and set the **Stretch** property for the aspect ratio:
Image img = new Image();
img.Source=bitmapImage;
img.Stretch = Stretch.Uniform;
Stretch property has also other values, so be sure to do some test with the other values to see what value adapts better to your needs.
Let me know if it works!

How to have an application to automatically scale when launched?

I want my application to automatically scale its size depending on the screen size. I want my application to fit any screen size automatically. I am making my application for mobile devices, how can I do this? I am fairly new at flash so please make it a bit simple!
Yes, there is no simple answer but the basics is:
stage.addEventListener(Event.RESIZE,onStageResize);
function onStageResize(e:Event):void {
// Use stage size for placing elements to their position..
// Position to left top
element1.x = 10;
element1.y = 10;
// Position to right top
element2.x = stage.stageWidth - element2.width - 10;
element2.y = 10;
// Position element to center and make it's width to scale with stage..
element3.width = stage.stageWidth - 20;
element3.x = 10;
element3.y = stage.stageHeight / 2 - element3.height / 2;
}
To scale elements place them inside on Sprite or MovieClip and scale that element like:
element.scaleX = 1.6; // scale 1 = 100% 2 = 200% etc
element.scaleY = element.scaleX;
I usually create public function "resizeElements(e:Event = null):void" for visual subclasses/components and call that from the main thread. In that function the object can resize it self.
In addition to #hardy's answer it's important to set the following variables on the stage:
// disables default 100% scaling of entire swf
stage.scaleMode = StageScaleMode.NO_SCALE;
// disables default align center
stage.align = StageAlign.TOP_LEFT;
Also, since the original question was regarding resize on launch, and this is mobile deployment it's important to call onStageResize(); once manually because the RESIZE event may not be fired initially. This would require changing:
function onStageResize(e:Event):void { ... }
to
function onStageResize(e:Event = null):void { ... }
Saying "automatically scale to screen" is too generic. The requirements this statement imposes is totally different between apps depending on what they need to do. There is no simple answer.
If your app has a main content canvas area, do you want to zoom to the content to fit the area? Do you want to keep the content the same size and show more of it? Maybe both - you could want to show more to a point, and then scale if there is still more room.
What do you want your UI to do? Dialogs could shrink/grow and remain central. Maybe you want to reflow them completely?
Do you have a slick UI? Maybe a menu with a set of buttons. Do the buttons need to be sized proportionally to the screen? What about the gaps between them? What if the screen ratio is different so if you scale them to fit they no longer work?
The point is, there isn't a simple answer. For basic layout there are UI frameworks that can assist you in placement and scaling, but you still need to decide how you want your app to behave. That totally depends on the app and what your intended design is.