Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Game size in different resolutions

Ahoy, I'm currently making my sci-fi survival game (twine 2, and sugarcube 2.6.2), and have been making it on a screen with the resolution of 1366 x 768, and it all fits fine in that resolution, but when I play it on a 1080p screen, the margins seem to grow huge and the side-bar gets smaller.

I was wondering if there was a way I could make it look good on both resolutions, or if there was a way to lock the resolution to 1366x768 but be zoomed to fit the frame when played on higher resolutions.

game%2B720.PNG

and 1080p below

game%2B1080.JPG



(edit: I should have posted this as a question, not discussion, sorry bout that)

Comments

  • edited June 2016
    Without an example of your story's CSS to work with I am going to have to explain the two issues and how to fix them in general terms.

    1. The default width of the unstowed left side-bar is controlled by the following CSS.
    #ui-bar {
    	width: 17.5em;
    }
    
    ... conditionally increasing the value will make the side-bar wider in 1080p.

    note: There is an accompanying left margin on the story element that will also need to be conditionally increased by a similar amount, this margin creates the space the left side bar is place in. The relevant default CSS looks like the following, notice that it is 2.5em larger than the side-bar's width:
    #story {
    	margin-left: 20em;
    }
    

    2. The maximum width of the area the Passage content is display in and that area's left and right margins are controlled by the following CSS.
    #passages {
    	max-width: 54em;
    	margin: 0 auto;
    }
    
    ... conditionally increasing the max-width value will make the Passage area wider in 1080p. Because the left and right margins are automatically calculate they decreasing in size when you increase the max width of the area.

    I'm sure you noticed I said "conditionally increasing" in both of the above, and you can use a media at-rule to control when those increases happen. The following example increases the relevant sizes when the view-port's width is 1600px or more.
    @media screen and (min-width: 1600px) {
    	#ui-bar {
    		width: 25em;
    	}
    	#story {
    		margin-left: 27.5em;
    	}
    	#passages {
    		max-width: 65em;
    		margin: 0 auto;
    	}
    }
    
    note: I don't have a 1080p (1920 × 1080) screen so I used 1600 as an example and the values I used for width, margin-left, and max-width are made up so you will need to determine what values work best for your story.

    P.S. Because SugarCube 2 uses em units for things like widths, margins and the relative font-sizes of its components there is another method you can uses to increase the sizes of everything and that is to conditionally increase the default font size of the html element but doing so can have interesting effects.
    Replace all of the above CSS code with the following, it increases the default font size by 25% once the view-port's width reaches 1600px.
    @media screen and (min-width: 1600px) {
    	html {
    		font-size: 125%;
    	}
    }
    
    ... again you will need to adjust the 1600px and 125% to suit your needs.
  • Thanks a bunch, Greyelf. I've been able to get it looking nicer on the larger screen, and just need to tweak it a bit more to get it juuust right. Your help has helped me avoid fiddling with parts of the css I shouldn't have been touching.
Sign In or Register to comment.