I am trying to make a game in Unity3d 5. What I am trying to do right now is to make a scrollable panel filled with toggles/buttons. The panel should fit the frame on the screen and is masked so it hides under image frame. The concept is under this link:
https://www.dropbox.com/s/9zxwx33orz46q60/Screenshot2.png?dl=0
As you can see I managed to make toggles fill the panel, but not exactly as it should be. I us content size fitter on panel with both vertical and horizontal fitting set as preferred size. Also I put LayoutElement on panel and set min width and min height as 200. There is VerticalLAyoutGroup with only "Height" checked.
The panel is filled during runtime with quite simple prefab. It has preferred width also set at 200.
So it would not be much problem but when I buid it and run on Galaxy S5 it looks like this:
https://www.dropbox.com/s/9zrv6kyf4n0ueam/Screenshot1.png?dl=0
So question is: how can I make it to always fit the panel? I was changing a lot of different setting and what I once managed to do was that toggles/prefabs did fit the width of the panel but did not keep aspect ratio about 3 (they were flat and unreadable. On other instances the panels overlap partially or completely.
Please help.
EDIT
I managed to achieve this:
https://www.dropbox.com/s/6w80qnuekqyrx96/Screenshot3.png?dl=0
With settings as:
Panel:
* Content Fitter: horizontal - unconstrained, veertical - preferred size
* Child Force expand - both height and width checked
* Anchors and size stretched to fit scroll rect
Once again I struggle with something for few days, finally post a question here... and solve a problem in few minutes.
So the problem was in keeping aspect ration while resizing the prefab. When it was resized horizontally to fit panel it might be resized vertically too, but the position was not adjusted to compensate this change. So what was needed was to change the preferred height of the prefab on the basis of panel width (could not use toggle width, since it was not right yet (not resized yet)). In the code where I create togges for every toggle I had to put (3f is my aspect ratio):
float width = contentPanel.GetComponent<RectTransform> ().rect.width;
newPower.GetComponent<LayoutElement> ().preferredHeight = width / 3f;
Other settings are:
Panel uses vertical fit as preffered and horizontal as unconstricted
Toggle uses aspect ratio fitter set as Width controls height and aspect as 3
Related
I'm an iOS developer who has an Android Studio question. In interface builder in Xcode, there is an aspect ratio constraint that can be set to your view to make to view scale according to its set aspect ratio:
Through searching, I have been unable to find a similar ability in Android Studio. I want to build a 2x6 grid view that scales to all screen sizes similar to this layout:
In Xcode, I accomplished this by setting the leading, trailing, top and bottom space constraints based on square location in the grid, and then set the aspect ratio to self and self to the aspect ratio of the view containing the subview. How would I best accomplish this in Android Studio using constraint layout?
To further clarify, here is how I want the grid to look at all screen sizes:
But when I enlarge the container text view holding these buttons, they don't scale to meet the size of their container:
Update:
I tried the answer provided by #Psest328 and this works scaling the individual grid items, but now I want to maintain the aspect ratio of the grid in both orientation views. Here it is in portrait and in landscape:
As you can see the landscape orientation has caused the container view to "skew" to fit the view size. I want it to maintain its shape and aspect ratio.
This was all done in the graphical interface in AS...
What I did here was lay out 6 buttons. 1 at each corner and 1 on each side in the middle.
Select the top 2, right-clicked, and chose "expand horizontally"
Select the middle 2, right-clicked, and chose "expand horizontally"
Select the bottom 2, right-clicked, and chose "expand horizontally"
Select the entire left column (3 buttons), right-clicked and
selected "expand vertically"
Select the entire right column (3 buttons), right-clicked and
selected "expand vertically"
Click the light bulb (infer constraints)
Here's the result:
EDIT:
Per your update, I copied the layout to res/layout-land and repositioned the buttons the way I wanted and did the same steps from before (expand horizontally, then vertically, then infer constraints).
The editor smartly picks the correct layout file when clicking orientation change:
I need a ViewPort with following the properties :
maintain aspect ratio
fill x axis
always align the top of the screen
cut the bottom if screenHeight < viewPortHeight
Do I need to extend ViewPort or use existing implementations with some configurations, to achieve such behavior ?
I am developing a simple game using libgdx in android. I created an actor. I want to resize the actor according to the screen size. Can anyone please suggest me a simple tutorial to do the same
well it depends on how you set the viewport of your Stage.
lets say your stage viewport is set to stage.setViewport(16,10,false) within your resize()-method.
This way, your screen will always show the region from (0,0) in the bottom left to (16,10) in the top-right corner...
If you create an Actor with width=8 and height=5, it will always be half of the screen width and half of the screen height big.
Of course, the example above will usually distort your screen when it resizes... So you could use the setViewport(16,10,true); This way, you will keep the aspect ratio, but might need to resize or reposition some actors within the resize() method, e.g. when they are to be shown on the right edge of the screen.
The other way is by setting the viewport to the same coordinate systems as the pixels on the screen: stage.setViewport(width,height,false); (within the resize(...)-method). This way, one unit in the stage coordinate system equals one pixel on the screen.
When doing so, you will have to resize the actors in the resize() method after setting the viewport:
actor.setSize(0.2f*stage.getWidth(), 0.2f*stage.getWidth() * actor.getHeight()/actor.getWidth()):
Doing so will always make the actor be exactly one fifth of the screen width and have its height matched so it doesn't get distorted.
Hope this helps a bit...
If you are using the latest version (nightlies) you may have seen the Viewport class.
This class is what you are looking for. Lets say you have a 1600 * 900px monitor and you set your Viewport to 16 * 9, every unit in your Viewport will be 100px on your Screen.
This means, if you set your Stages Viewport to 16 * 9 an Actor with the size of 1 will be 100*100px big. If you are using a 800*450px monitor it will be 50*50px big.
There are also different Viewport types:
StretchViewport: Your Virtual Viewport gets stretched to fill the whole Screen. So if you have a 1600 * 900 monitor and a Virtual Viewport of 16/10, a 1x1 Actor will be 100px wide, but only 90px heigh. So the aspect ratio is not the same anymore.
FitViewport: If your Virtual Viewport has a different aspect ratio the Screen will be filled with black bars. So on a 1600*900 Screen with 16/10 virtual Viewport a collumn of 80px width on both sides of the Screen will be black ((virtualWidth / wirtualHeight) * realHeight = realWidth, physicalWidth - realWidth = blackWidth, to have the game in center blackWidth/2 on both sides), to keep aspect ratio.
There are also others, but those are the most important 2 imho. You can read more on the article i linked.
If you are not using the latest nightlies, you need to use camera. The constructor of the OrthographicCamera takes the viewport width and height. Those are the same as for the viewport. The difference is, that it is a "StretchViewport" automatically, so you have to manually set the glViewport like in this tutorial.
I hope i could help.
I have a few buttons I want to display in a row in a decision tree. I'm trying to get the buttons in each row of the tree to be the same size. But the buttons have different text. Some have a couple words and some have a sentence. Is there a way I can get the buttons to all be the same size and all maintain the same width to height (4:3) ratio?
I can get the heights the same using fill parent on the button heights while having the parent row layout_height set to wrap_content. How can I get the width of the buttons to be the same size while maintaining a 4:3 width to height ratio. (The width to height ratio constraint is so I don't end up with really tall and thin buttons, which would look silly)
Anyone have any suggestions?
Edit:
I just saw this link which is kinda what I am looking for: Scaling layout with invariant aspect ratio in Android
My problem with this is that it will inflate all the buttons and introduce a lot of empty space around the text inside.
If I could find a way to incrementally increase the width or height (whichever is smaller) of the button and then resize it so it re-"wraps_content", then this could work. Anyone know how to re-wrap the content?
If you are able to get the same height for all you can use android:layout_weight="1" for all buttons and put android:layout_width="0dip" so all buttons will have same width
I have a SurfaceView which has a fixed height within the game (let's say it is always 400 pixels high). However, the content that I display within that SurfaceView is tile-based, so at any point within the game, the content can have a "virtual" height of any value, 400 or more pixels. When the content height is larger than the SurfaceView height, the user can scroll that content up and down. When that happens, I would like to add a standard scrollbar to indicate where the user is scrolling currently within that content.
How is it possible to add the standard scrollbar and change its length (height in this case) depending on the height of my "virtual" content? Thank you!