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.
Related
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!
I have OrthographicCamera with viewport 16x9.
Lets say for example that devices real resolution is 1024x576
this.cam = new OrthographicCamera(16, 9);
I create BitmapFont like this:
FreetypeFontLoader.FreeTypeFontLoaderParameter params = new FreetypeFontLoader.FreeTypeFontLoaderParameter();
params.fontFileName = "font.ttf";
params.fontParameters.size = 19;
Font size in pixels iz 19. That is calculated like this: screenHeight(576)/cameraViewportHeight(9)*0.3
0.3 is how big font should be in camera units
Since font is rendered on camera mentioned above, we have to scale font to our camera size:
font.getData().setScale(0.015f);// 0.3/19
I dont know if my math is ok, but this works fine on libgdx version 1.7.1. If i update to any higher version (currently 1.9.2, but i also tried 1.7.2), font just dont display
What am i doing wrong?
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!
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());
What I need is take advantage of the all area of the screen, independent of user's screen proportions.
By default, Air apps scales proportionately from the inside out. This would be great if we hadn't so different screens sizes and proportions in Android.
Angry Birds is a good example of what I call of fluid layout, it always scales/zooms the three layers(front, game and background layer) accordinly.
My app is mostly a inteface based game, the user must see some info and click on some buttons. I think I could base my scale primarily in the user screen's width, and use a scroll if needed. The problem is how do that.
Fluid / liquid / responsive layouts would likely imply a layout manager of some kind.
This functionality is built in to Flex.
Per Flash, and more specifically to what you've noted per requirements it sounds like some basic scaling and positioning is what you desire.
Layers
As you've noted, different layers will have different requirements per scaling:
background
game play
interface / controls
Background and game play might be a single layer; however, you may want different constraints on the foreground user controls for readability and interaction.
Setting up the stage
If you want to control scaling, you should set:
import flash.display.StageAlign;
import flash.display.StageScaleMode;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
This also assists with orientation change of mobile devices swapping between portrait and landscape.
Browsers can be resized; so, you need to listen for resize events:
stage.addEventListener(Event.RESIZE, resizeHandler);
stage.dispatchEvent(new Event(Event.RESIZE));
function resizeHandler(event:Event=null):void
{
/* scale code ... */
}
Positioning
Top and left positioning are always easy, because top-left is 0x0 coordinate. Right and bottom require subtracting a DisplayObject width from stage.
Right align example:
mc.x = stage.stageWidth - mc.width;
Bottom align example:
mc.y = stage.stageHeight - mc.height;
Keeping something in the center of the stage:
mc.x = (stage.stageWidth * 0.5) - (mc.width * 0.5);
mc.y = (stage.stageHeight * 0.5) - (mc.height * 0.5);
Scaling
You need to determine what your constraint is to avoid blank / empty regions on the stage.
This can be implemented using a ratio variable:
var ratio:Number = 1.0;
Proportional scaling:
ratio = stage.stageWidth / gameMovieClip.width;
gameMovieClip.scaleX = ratio;
gameMovieClip.scaleY = ratio;
Stretch display object to fit stage:
gameMovieClip.scaleX = stage.stageWidth / gameMovieClip.width;
gameMovieClip.scaleY = stage.stageHeight / gameMovieClip.height;
Best fit algorithms require fitting the minimum constraint of your display object within a bounds. There are libraries that can assist with this, such as Greensock auto fit area.
Virtual Cameras
Virtual cameras have been popular in Flash. The concept is that you design your view then pan and zoom a camera to show a specific region.
O'Reilly ActionScript for Non-Coders
Example 1
Example 2
Example 3
Virtual camera FLA example:
http://bryanheisey.com/blog/wp-content/uploads/2009/02/vcam_as3.fla
Virtual camera example:
http://www.fluidanims.com/FAelite/phpBB3/viewtopic.php?f=43&t=3369
http://www.neoseeker.com/forums/87/t647746-cam-virtual-cam-for-flash-mx-lower-level-intermediate/
http://www.flashkit.com/movies/Components/Flash_V--_redesig-10378/index.php
Google "Flash virtual camera" or "Flash v-cam" for examples.