Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Studio Chat / Full Screen on Itch?

Author
Message
PartTimeCoder
AGK Tool Maker
9
Years of Service
User Offline
Joined: 9th Mar 2015
Location: London UK
Posted: 3rd Sep 2021 03:30
I could probably figure this out but I am going to bed and I am going to be up against it over the weekend getting the various scenes done for Singularity, anyone know a sure fire way to get my app in full screen (itch.io full screen button, not agk, they don't work together, if I click the itch button it shows the agk page, I want the game fullscreen not the index.html)

For today enough, I'm beat!
Open Source plugins
Cl - DnD Plugin
Buy Me A Coffee
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 3rd Sep 2021 16:52 Edited at: 4th Sep 2021 04:38
Got it figured out in about as simple as I possibly could.

https://phaelax.itch.io/score-test?secret=9puDF0uxLwWMrv2aODZQgrmEHnM

I used this icon:



In your index file, add this CSS:



Then add this line directly under the canvas element:


The icon won't scale with the canvas size, its simply an html element that sits on top of the canvas rather than render it with the canvas (that's trickier).

Oh almost forgot, you need to add this to the outer DIV container (that wraps the canvas and overlay) CSS:
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 3rd Sep 2021 17:08 Edited at: 3rd Sep 2021 17:14
404 on the link, phaelax, but i trust you got it and thanks. I was hoping someone would offer that solution.

I just checked ur profile and it shows u have no projects so i expect the demo was added in Draft mode which means only u can use that link. To allow others, offer the Secret URL generated at the top of the project page, IIRC.
[My Itch.io Home] [Community Apps on Itch.io]
[AGK Resource Directory] [TGC @ GitHub]
[CODE lang=agk] YOUR CODE HERE [/CODE]
[VIDEO=youtube] VIDEO ID [/VIDEO]
[AGK Showcase][Google Forum Search]
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 3rd Sep 2021 17:13
Ah, probably because the privacy on the game is set in draft mode. I just made it public.
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
PartTimeCoder
AGK Tool Maker
9
Years of Service
User Offline
Joined: 9th Mar 2015
Location: London UK
Posted: 3rd Sep 2021 21:42 Edited at: 3rd Sep 2021 21:44
Under the "Draft" icon at the top of the page there is a "Secrete Link" right click and copy link address to share in development or private drafts, no need to make them public for testing.

And thanks for the walkthrough, much appreciated.
Open Source plugins
Cl - DnD Plugin
Buy Me A Coffee
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 18th Jan 2022 05:01 Edited at: 18th Jan 2022 05:02
@phaelax, your solution works fine for me in Classic (which i never had an issue with) but it doesn't seem to solve the Studio FullScreen issue: https://github.com/TheGameCreators/AGK-Studio/issues/809

since this was posted in Studio Chat, i was hoping it did. unless i did something wrong? (i basically copied the source of your Index on itch).
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 3rd Feb 2022 06:47
I don't have studio so I can't test for it. Steam has a free demo, I could try that if I feel like installing steam.
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 3rd Feb 2022 14:18
@phaelax,

i wouldn't bother with the outdated trial which would probably be different than the current version exports?

meanwhile, i've emailed you a studio export that you might be able to get FS working on where i THINK i had a fix in the HTML some time ago but "lost" it in my pile of WIP projects.

good luck. we could use the fix, no matter the source.

VN
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 8th Feb 2022 14:11 Edited at: 8th Feb 2022 14:13
guys,

i'm pretty sure i had fullscreen running fine in HTML but can't find the project nor how i did it.

i remember comparing the studio html file with the classic html file and finding something missing or different in the studio version but i'm a total novice with html and was just hacking it out.

i've attached a studio export; perhaps one of you can get it working for us or show us the way?

Attachments

Login to view attachments
hosch
Developer
2
Years of Service
User Offline
Joined: 25th May 2021
Location:
Posted: 11th Feb 2022 15:36
I've poked around in the file. The HTML code is identical. However, by clicking on the "Run in fullscreen" link, the debugger prints out the smaller window size for AppGameKit Studio and the correct window size for AppGameKit classic. It's most likely a problem with the AGKPlayer.js.
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 11th Feb 2022 18:26
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 27th Feb 2022 14:11 Edited at: 27th Feb 2022 15:07
I'm taking a look at it finally.

I'm convinced the issue is in the agkplayer.js used with studio. That or they changed something internally with how they used the canvas. Either way, I doubt we can fix it with a simple edit.

I tried on a 4k screen just to see what happens at a different resolution, it always positions the canvas at the lower left corner and fails to resize the canvas to match the screen size. I'm looking at the javascript code but its 14k lines
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 27th Feb 2022 16:12 Edited at: 27th Feb 2022 16:47
Ok, I think I fixed it, or at least have a solution.

In the updateCanvasDimensions function I added some hardcoded values for the canvas width and height. The smaller the values, the larger the canvas (weird, I don't get it). I set the values to 640x384, which if you look at the console when Nomad's app loads is the dimensions outputted. Matching those dimensions, the page will scale to fullscreen at whatever resolution your monitor is at. (I tested at 1080 and 4k)

All I did was add those dimensions like so:


I'm not super knowledgeable with canvas, but my guess is without hard set dimensions, the parent node doesn't know how to resize the children when using a percentage. This chunk of code (minus my change) is identical between studio and regular agk, so the problem technically lies elsewhere.

You can see Virtual Nomad's studio project here and verify the fullscreen working:
https://purpletoken.com/agk/2/

Here's the "fixed" version, unminified and minified (about 160kb difference).
https://purpletoken.com/agk/2/AGKPlayer.js
https://purpletoken.com/agk/2/AGKPlayer.min.js


There's still the same error that existed in the regular agk version as well but it doesn't seem to affect anything that I can tell:
AGKPlayer.js:7815 Uncaught (in promise) TypeError: Failed to execute 'exitFullscreen' on 'Document': Document not active


Hopefully this gives TGC a better idea what the cause might be and they can officially fix it.


Here's the weird thing. When I put console.log(Module["canvas"]); it clearly shows the property values for each canvas attribute (width, height). But calling on the specific attribute such as Module["canvas"].width it displays 1631 instead of 640. Also, I just realized this doesn't preserve the aspect ratio.
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 27th Feb 2022 17:33
nice work, phaelax.

and, yes your changes make it fullscreen but it's stretching the game to fill the entire screen (while not maintaining aspect ratio) vs Classic's scaling and adding black bars (on the left/right, in this example):



ie, the game is hardcoded @ 10:6 while (at least my TV) is 16:9.

but, we're closer to a resolution** thanks to you and, if we can't get closer anytime soon, i expect we can code around it by accounting for current aspect ratio the game is being displayed on.

**pun intended

meanwhile, the "unminified" version is appreciated where it's now much easier for the rest of us to review the code and see what we can do. btw, how can we "unminify" for ourselves? i wrote a quick parser as attempt to format similarly but found flaws in my (overly-simple) code ijmmediately while i assume a real editor can "unminify" with a click or 2, already?

Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 27th Feb 2022 17:39 Edited at: 27th Feb 2022 17:44
Quote: " btw, how can we "unminify" for ourselves?"


https://www.unminify2.com/

I believe that VS Code can also unminify within the editor.


I could account for the aspect ratio, but it wouldn't be centered in the window. (might be able to fix that)
For some reason I can't get the proper canvas values from any variable. If I could, then I could maintain the correct aspect without any hardcoded values. I'll try again later. Folks will just have to update the JS code with their game's resolution manually for now.
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Login to post a reply

Server time is: 2024-04-25 09:13:18
Your offset time is: 2024-04-25 09:13:18