Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Weird window size bug?
Started by efgames.net Dec 13 2019 01:34 AM

* * * * * 1 votes
28 replies to this topic
[TOPIC CONTROLS]
Page 1 of 2 1 2
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

Hey guys,

I'm trying to build a html5 build.

But! I cant track window(canvas) size.

That is what I get:

Attached File  weird_resize.png   993.67KB   0 downloads

Everything is wrong:

display.contentWidth is 1280

I have tryed to use: https://github.com/develephant/corona-html5-windowSize-plugin

and it shows that info.innerWidth is 1536

I measured canvas screen width - it is 1600

 

My game GUI is adative - so it supports anything. If I'm using 1536 - it got cropped.

 

Can someone help me to get proper size of the window?

 

Or maybe my problem is a css? How to restrain corona display width and height?



[TOPIC: post.html]
#2

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

I think my problem is scaling. How to turn it off? =)



[TOPIC: post.html]
#3

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,622 posts
  • Enterprise

display.contentWidth is the value Corona picks up from config.lua where you set the "width". But more importantly it's your "in-app content grid". If you run it on a 320x480 iPhone 4, display.contentWidth is going to return 1280. If you run it on an iPad Pro with its 2732px wide screen, display.contentWidth will be 1280. Corona will internally scale up or scale down to fit the actual device.

 

Now if your screen is bigger than your content area, display.actualContentWidth should return you the actual screen size relative to your defined content area.

 

display.pixelWidth might get you the actual window size. The values you can get back from JavaScript will be the physical window size. You could potentially use display.contentScaleX multiplied by the physical window width to get the width scaled to your content area. 

 

Rob



[TOPIC: post.html]
#4

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

display.contentWidth is the value Corona picks up from config.lua where you set the "width". But more importantly it's your "in-app content grid". If you run it on a 320x480 iPhone 4, display.contentWidth is going to return 1280. If you run it on an iPad Pro with its 2732px wide screen, display.contentWidth will be 1280. Corona will internally scale up or scale down to fit the actual device.

 

Now if your screen is bigger than your content area, display.actualContentWidth should return you the actual screen size relative to your defined content area.

 

display.pixelWidth might get you the actual window size. The values you can get back from JavaScript will be the physical window size. You could potentially use display.contentScaleX multiplied by the physical window width to get the width scaled to your content area. 

 

Rob

I'm testing html5. On Chrome*win.

 

 

Is there a way - to set display.contentScaleX = 1? somewhere? Config?

Couse I'm trying to avoid using any external scale at any cost.

I'm tryed with empy config as well - it does work for anything, but html5.

Is this a bug? Or can you help me plz?

This is not just me - I have asked other developed - and all of them expiriencing this unintended scale.

 

Here is a next screenshot - with printed display.contentScaleX and display.contentScaleY. They both 1.

Is it a bug? Or I'm using it incorectly? Or my math is off?

(sorry for pushing this - but this is critical bug, that prevents my 5 games to be published online. and as I asked around - many others developers).

Attached File  weird_resize_2.png   256.48KB   0 downloads


  • joecoronasdk likes this

[TOPIC: post.html]
#5

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

Here is test project:

http://theelitegames.net/tmp/html5_canvas_size_bug/

corona source: Attached File  html5_canvas_size_bug.zip   71.3KB   2 downloads

problem - scale is 100%. but 100x100 rectange in middle have different size, then suppose.

canvas sizes are different then the ones in code.

 

Is it me doing something wrong? Is there way around? Corona html5 bug? Config bug?

(I tryed all possible combinations for config and build settings - it always resized on 25% or something like that)

 

Attached File  weird_resize_3.png   140.52KB   0 downloads



[TOPIC: post.html]
#6

richard11

[GLOBAL: userInfoPane.html]
richard11
  • Contributor

  • 544 posts
  • Corona SDK

If your defined content size is say... 800x600 and you draw a 100x100px square in the middle, then your square will only be 100x100 if the device happens to be an 800x600 screen, because really by drawing a 100px wide square on an 800 wide canvas you're asking Corona to make it an eighth the width of the actual screen, since that canvas is being stretched to full screen.

In HTML the canvas isn't necessarily stretched to full screen, but it will still scale with the browser if you're using the default index.html that Corona generates.

If you want a literal 100x100 square on all devices, and your canvas is configured to 800x600, then you'd need to lock the resulting HTML5 canvas element to 800x600 in CSS. This way, you can resize the browser all you like, or display it on other screens, and the game area will remain fixed in the middle.

I'm not sure why you'd want to do that though. One of the advantages to using Corona compared to writing your game in native JavaScript is surely its content scaling mechanic?

Alternatively, if you want to keep the canvas full size but draw your elements at literal pixel sizes, you could reverse the math yourself using display.contentScale*. I.e. if your canvas is 800 wide and contentScaleX reports 2, then the screen must be 1600 wide meaning a 50px wide rectangle will render at 100px on that screen. So rather than drawing a 100px square, if you draw a 100/display.contentScaleX and 100/display.contentScaleY square, you'd presumably get a square that outputs at a literal 100px? Untested, admittedly.

[TOPIC: post.html]
#7

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

If your defined content size is say... 800x600 and you draw a 100x100px square in the middle, then your square will only be 100x100 if the device happens to be an 800x600 screen, because really by drawing a 100px wide square on an 800 wide canvas you're asking Corona to make it an eighth the width of the actual screen, since that canvas is being stretched to full screen.

In HTML the canvas isn't necessarily stretched to full screen, but it will still scale with the browser if you're using the default index.html that Corona generates.

If you want a literal 100x100 square on all devices, and your canvas is configured to 800x600, then you'd need to lock the resulting HTML5 canvas element to 800x600 in CSS. This way, you can resize the browser all you like, or display it on other screens, and the game area will remain fixed in the middle.

I'm not sure why you'd want to do that though. One of the advantages to using Corona compared to writing your game in native JavaScript is surely its content scaling mechanic?

Alternatively, if you want to keep the canvas full size but draw your elements at literal pixel sizes, you could reverse the math yourself using display.contentScale*. I.e. if your canvas is 800 wide and contentScaleX reports 2, then the screen must be 1600 wide meaning a 50px wide rectangle will render at 100px on that screen. So rather than drawing a 100px square, if you draw a 100/display.contentScaleX and 100/display.contentScaleY square, you'd presumably get a square that outputs at a literal 100px? Untested, admittedly.

I have tested - plz look above. contentScale* is showing 1. So I can not use this technic.

I have tryed to limit element in CSS - that dosent helped as well.

I have spend many hours on this issue - even if it looks like a simple missunderstanding on my part - it dosent. I tryed and tested many configurations =)

 

I suspect, I may miss some properly working method. Can you tell me - how to keep 100% scale for my project? 

(One that you described - I already tested above, and it dosent work like that)

(Or it jus a bug - that can be fixed)



[TOPIC: post.html]
#8

richard11

[GLOBAL: userInfoPane.html]
richard11
  • Contributor

  • 544 posts
  • Corona SDK

Ah, you're saying display.contentScaleX and display.contentScaleY report as 1 in the HTML5 builds?

 

@Rob if this is the case, it does sound like a bug to me now actually...



[TOPIC: post.html]
#9

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

Ah, you're saying display.contentScaleX and display.contentScaleY report as 1 in the HTML5 builds?

 

@Rob if this is the case, it does sound like a bug to me now actually...

Yes. I do.

 

You can see it for your self, no?

 http://theelitegames.net/tmp/html5_canvas_size_bug/

You can see R4 at top - they both 1x1 (display.contentScaleX and display.contentScaleY).

And you can measure rectangle at center - it size 100x100(but on your screen it will be bigger).



[TOPIC: post.html]
#10

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,622 posts
  • Enterprise

Ah, you're saying display.contentScaleX and display.contentScaleY report as 1 in the HTML5 builds?

 

@Rob if this is the case, it does sound like a bug to me now actually...

No, I'm not saying that at all. I'm not sure how that was implied from what I said.

 

display.contentScaleX * display.actualContentWidth should equal display.pixelWidth. 



[TOPIC: post.html]
#11

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

No, I'm not saying that at all. I'm not sure how that was implied from what I said.

 

display.contentScaleX * display.actualContentWidth should equal display.pixelWidth. 

@Rob

can you plz take a look?

You can see display.actualContentWidth.."x"..display.actualContentHeight as "R2" second pair.

And, yes, display.contentScaleX * display.actualContentWidth = display.pixelWidth as you can see in my example.

(1134 * 1 = 1134)

BUT!

that is incorrect - whole screen red(1400*900)(I measured it in photoshop), or what JS telling: 1536*754.

 

So I have all this numbers, that dosent make sence together.

Can you make sure that html5 builds are 100% scale? Or add a option to enforce it? Or if it there - let me know where?



[TOPIC: post.html]
#12

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,622 posts
  • Enterprise

Actually my answer was to Richard above.

 

I'm not sure what you're end goal is and more importantly I don't know why you want to avoid using Corona's content scaling. I have a saying "Don't fight the system" and that's what I feel you're trying to do here.

 

I changed your config.lua to:

application =
{
	content =
	{
		width = 768,
		height = 1024, 
		scale = "letterbox",
		fps = 60,

	},
}

I added this to build.settings:
 

	window = 
	{
		defaultViewWidth = 1024,
		defaultViewHeight = 768,
		resizable = true,
		minViewWidth = 1024,
		minViewHeight = 768,
	},

I'm not sure if HTML5 windows are resizable or not, so the resizable = true might not mean much here.

 

Doing this gets you a 1:1 contentScale value. Your window size is an exact match to what the content area is set to. In this scenario, rounding errors aside, contentWidth = actualContentWidth.  .pixelWidth is still bigger (but the values seem inverted). 

 

Remember HTML5 is still considered Beta. But I believe you need to use the window table in build.settings to control your physical HTML5 window size.

 

Rob 


  • Michael Flad likes this

[TOPIC: post.html]
#13

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

@Rob

 

Yes, I did noticed that you ignored my reply. Plz dont =) Sorry for my English. I'm panicking here - I want to release a html5 version of my games, but I cant:

 

What is my Goal here? Why do I need to be scale 100%?

This is really simple question: I using corona for developing games - I dont want them to be ugly or croped.

 

I tryed your settings, and here what I got(spoiler - it is still not correct):

Attached File  weird_resize_4.png   94.15KB   1 downloads

 

It is still incorrect.

I dont mind "going with the flow". But do you think it is ok to have random unchangeable scale? And it is hard to fix it or give control over it?

 

Can you accept this as a bug? Or can I submit it as a bug? Or can you tell me how to set 100% scale?

Again sorry for my english - this issue is very important to me. But since you mentioned that html5 is somehow working - and it is, except this easy-to-fix-but-critical scaling bug.

Thx! 



[TOPIC: post.html]
#14

richard11

[GLOBAL: userInfoPane.html]
richard11
  • Contributor

  • 544 posts
  • Corona SDK

@Rob sorry, I think my response above caused some confusion here.

My first paragraph wasn't directed at you. It was me realising what OP was getting at and it does sound like a bug to me, but a lot is getting lost in translation here.

As far as I can tell, what's happening is that content scaling is kicking in properly, as it should, but display.contentScaleX and display.contentScaleY are reporting as 1 despite the mechanism working.

So if OP has width and height of 800x600 defined in config.lua but the HTML5 build is shown at 1600x1200, content scaling is correctly doubling up his 100px square to 200px, but display.contentScaleX is still reporting 1 instead of 2.

Now, like you I'm not sure on the logic of not wanting content scaling to kick in, but that aside I'd expect to be able to circumvent it by drawing that rectangle at 100/display.contentScaleX so that it's actually drawn at 50px and upscaled by *2 on the 1600 screen, and drawn at 100px and upscaled by *1 on the 800 screen. I.e. to still be a 100px output on either screen. Does this make sense?

With contentScaleX and contentScaleY reporting as 1 though, this workaround isn't possible.

In a nutshell it makes sense for these values to be based on pixel density when building to an app, but when building to an HTML5 canvas surely it makes more sense for these values to be based on the size that canvas is output at? I.e. if config.lua defines an 800px width but the HTML5 canvas element ends up with a width of 1600, contentScaleX should be 2 I think.
  • Michael Flad likes this

[TOPIC: post.html]
#15

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

@Rob @richard11

If you dont udnerstand why I do not need corona scaling - Upscale is ugly and makes no sence. And my games can scale them self perfectly fine.

 

Bigest issue are fonts - they look terrible when scaled up.

(plz open this image as 100%)

Attached File  weird_resize_5.png   284.05KB   0 downloads



[TOPIC: post.html]
#16

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,622 posts
  • Enterprise

I did not ignore your post. It takes time to research problems. I posted to Richard to clarify what I meant.

 

Can you share the code for the images above with the images (i.e. zip it up please)

 

Rob



[TOPIC: post.html]
#17

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

I did not ignore your post. It takes time to research problems. I posted to Richard to clarify what I meant.

 

Can you share the code for the images above with the images (i.e. zip it up please)

 

Rob

Sorry for assuming that.

Yes! Thx!

 

Rectangle test: http://theelitegames.net/tmp/html5_canvas_size_bug/

Rectangle source: Attached File  html5_canvas_size_bug.zip   71.31KB   2 downloads

more clean sources: Attached File  html5_canvas_size_bug2.zip   71.57KB   2 downloads

 

We tested it on many computers today at my classes. And it looks like - it works ok if page is smaller or same as size defined in build.settings

But not - if page is bigger.

 

Here is another example of my problem with ilustration why I dont want upscale:

Attached File  weird_resize_6.png   625.91KB   0 downloads



[TOPIC: post.html]
#18

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,622 posts
  • Enterprise

I was hoping you would give me the code for that produced "Problem Problem Problem" and "Better" with the images you used. 

 

Rob



[TOPIC: post.html]
#19

sporkfin

[GLOBAL: userInfoPane.html]
sporkfin
  • Contributor

  • 780 posts
  • Corona SDK

I'm not sure how to turn off the scaling but I wanted to tell you that you project looks really good!



[TOPIC: post.html]
#20

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

@sporkfin thx!

@Rob sure, here we go:

corona: Attached File  html5_canvas_size_bug2.zip   74.09KB   1 downloads

problem (you can see that it is upscaled and have a blur when I run it as html5 build): 

Attached File  weird_resize_7.png   117.88KB   0 downloads



[TOPIC: post.html]
#21

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,622 posts
  • Enterprise

I really really want the code you used to generate the two images with the text "Problem Problem Problem" and "Better" 

 

I want to see how you're sizing the images. 

 

Looking at what you sent, you're trying to take a 76x76 image and scale it up to something quite large. In digital imagery, any time you size up an image it gets blurry. This is why we let you specify @2x and @4x images so you can provided resolution preferred images instead of trying to enlarge something beyond what it can do.

 

Looking at those images, it seems like you're managing to get a resize done with a different resampling method. By default, Corona uses a method that works well for taking a large image and making it smaller, but going larger means the image becomes blurry. You can go in to Photoshop and do this yourself. Blow your 76x76 up to say 760x760 and see how blurry it gets. But you can play with the different resample methods and find something that's better with enlargements, but it's still not good, but for some pixel art it's tolerable.

 

Corona lets you change the method. See: http://docs.coronalabs.com/api/library/display/setDefault.html#texture-keys and the magTextureFilter option and try setting it to Linear. If you do this, Corona will scale your images up using a method kinder to pixel art.

 

Rob



[TOPIC: post.html]
#22

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

@Rob

I do use "texture-keys" for my pixel art games already.

I do NOT do resize. Resize is done by corona - without my consent.

I marked with green(at attached image in previous post) - corona thinks it is 100% scale(BUG!).

That is something that I'm trying to turn off, or report to you - and asking to fix it. (Is it this hard?)

 

I'm not trying to ask how scaling works - sorry for my English. I'm trying to report a BUG.

 

Just to be clear - I dont resize anything. Corona*HTML5 doing that. I'm trying to ask you - how to disable scaling for html5 builds. Reason - it is bugged.

 

Can you make "build.settings@resizable=false" to work? Or remove default scaling if it turned off?

Attached File  weird_resize_8.png   162.66KB   1 downloads



[TOPIC: post.html]
#23

ponywolf

[GLOBAL: userInfoPane.html]
ponywolf
  • Contributor

  • 274 posts
  • Corona SDK

That resizable option is for desktop window resizing. Maybe you want adaptive scaling and handle everything yourself?

 

https://docs.coronalabs.com/guide/system/adaptiveScale/index.html#adaptive



[TOPIC: post.html]
#24

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

That resizable option is for desktop window resizing. Maybe you want adaptive scaling and handle everything yourself?

 

https://docs.coronalabs.com/guide/system/adaptiveScale/index.html#adaptive

Yes, I d love to handle scaling by my self. That would be great. If that would work. It does NOT(I rebuilded test project):

Attached File  weird_resize_9.png   132.95KB   0 downloads



[TOPIC: post.html]
#25

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

@Rob

Ane news on this bug? Any ETA on fixing it?

(this is super big-issue that is super fast&easy to fix =))


  • Michael Flad and joecoronasdk like this


[topic_controls]
Page 1 of 2 1 2
 
[/topic_controls]