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 Classic Chat / Anyone got experience with HTML5 export?

Author
Message
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 13th Feb 2019 10:28
On a whim, I tried exporting one of my projects to HTML5. To my utter surprise, it worked right away! Or, kind of worked. The clever code I used to make the play area fit the screen resolution didn't work at all. This is because the game starts up in a tiny frame instead of fullscreen, which influences GetDeviceHeight()

I couldn't find any way of detecting if the game is in fullscreen or not. But I think I could just set SetWindowSize( 555, 201, 0 ) and then ask if GetDeviceWidth() = 555

The exporter said that it works best with Firefox and Chrome. I have only tried it in Firefox, but if I got something finished here, I would need to check it on other browsers too. Possibly add some warnings if incompatible browsers are detected.

When exporting for HTML5, there's also a "Dynamic Memory" checkbox. Not really sure what that one does.

I really feel there's some potential in fullscreen browser games! Downloading an executable feels like a lot more of a bother than simply running the game directly from the web page. Today, browser game is associated with pure casuals like Candy Crush, but back in the Flash era, there were lots of really innovative games running in the browser.
fubarpk
Retired Moderator
19
Years of Service
User Offline
Joined: 11th Jan 2005
Playing: AGK is my friend
Posted: 13th Feb 2019 10:43
Im sure there is a way of setting fullscreen mode in windows
perhaps SetWindowSize( getDeviceWidth(),GetDeviceWidth(), 0 )
I think that's needed before any setvirtual resolution commands etc

Quote: "When exporting for HTML5, there's also a "Dynamic Memory" checkbox. Not really sure what that one does."

me neither lol I just experiment each time. I understand what dynamic memory is just what this choice is about and how it effects the program
fubar
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 13th Feb 2019 11:24 Edited at: 13th Feb 2019 11:51
It's only because I render to a renderimage and then display that on the screen. If I don't do all that fancy stuff, the fullscreen mode works right away!
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 13th Feb 2019 12:14
I found a few commands that specifically mentions HTML5:

Music
The old music commands have been deprecated in favour of the new OGG music commands (except on HTML5). The new commands require files compressed with OGG Vorbis, but will work on all platforms, support multiple music files playing at the same time, and allow seamless looping.
On HTML5 the old music commands have better performance than the newer commands.

GetMaxDeviceHeight
For HTML5 apps this will return the size of the current HTML document, and is not guaranteed to work if the HTML5 app is running in full screen mode. A better name for this command would be GetMaxWindowHeight, but it is now set in stone.

SetSyncRate
Note that on HTML5 the use of SetSyncRate is highly discouraged as it uses the Javascript SetTimeout function for timing, which can cause inaccurate frame rates and suttering. On HTML5 the prefered method of frame rate control is SetVSync.

SetVSync
On Linux, Mac, and HTML5 you can use a value greater than 1 to skip refreshes, for example if the monitor refresh rate is 60Hz then a mode value of 1 would limit the app to 60fps, but a mode value of 2 would skip every other refresh which would limit the app to 30fps.

AddHTTPHeader
RemoveHTTPHeader
SendHTTPRequest
SendHTTPFile
JoinNetwork
HostNetwork

(...) Note that this command does not work in the HTML5 version.

SetHTTPHost
Sets the domain of the host you want to connect to, for example to access www.thegamecreators.com/index.php you would use a host value of www.thegamecreators.com, do not include the http: that usually goes before it. Note that trying to use a specific port with www.thegamecreators.com:8080 may be ignored on some platforms and port 80 will be used in these cases.
When exporting to HTML5 note that web browsers limit which servers you can connect to. By default you are limited to files hosted by the same server as your app. However if the server sends an Access-Control-Allow-Origin header in its response that allows your app's server, then the browser will let you connect to it.

ConnectSocket
Creates a socket and attempts to connect to the specified IP address. This will create a TCP connection that you can then use to send and receive data. This command will return immediately and connect in the background, you should use GetSocketConnected to check if the socket connects successfully or fails. You should give a timeout value that is long enough for the socket to connect, typically 3000 milliseconds is a good value, but high latency connections might need longer. If the connection times out then this command will return 0. The port number must match the listening port of the device you are connecting to.
This works slightly differently when exported to HTML5, it uses a WebSocket which sends an HTTP style header and requires an HTTP style response to connect.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 13th Feb 2019 17:06 Edited at: 13th Feb 2019 17:19
Uh-oh! Big negative found:
1) The exported HTML5 gives different errors than when I compile with F5. Also, that error doesn't bother mentioning the line number
2) It is not possible to create a keyboard shortcut to HTML5 export
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 13th Feb 2019 21:26
HTML5 is one of my favorite platforms and always export to it without any problems anymore at least.

What kind of errors are you getting? There are some differences such as on Windows loading media the names are not case sensitive. In HTML5 the names are case sensitive as I recall. In Windows a sprite seems to default to transparency. In HTML5 it defaults to opaque so you should explicitly set transparencymode for transparent if needed as I recall. The SetSpriteAlpha might not work in HTML 5 and instead should set using the long form of SetSpriteColor if I recall correctly. Some of these may have been changed but basically there are just several things with different behaviors but once you sort them out HTML5 builds work awesome.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 14th Feb 2019 11:57
The problem is that I made the project fairly big, and now that I test it in HTML5, I have no clue which part screws up. This is the error:

Quote: "Error: Failed to create render image 1 – image already exists in _init.agc at line 81"


This is the only place where CreateRenderImage() is called, and the gosub its in is only called once. So it's a bit strange.

Of course, I also need to fix the fullscreen, but I have this bit worked out, just not implemented. My plan is that the player starts the game by going to fullscreen, the non-fullscreen version just shows an inviting banner, nothing more.

Attachments

Login to view attachments
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 15th Feb 2019 00:11

Nothing much here --- just a console screen that can go fullscreen, but does nothing. But I uploaded it to itch.io without problems. Yay! Maybe a console game where you play a computer virus who surf the interweb and eat files?

https://kasper-hviid.itch.io/eat?secret=bn0xff2qBvxeR7B1V5tkr2WxyQ
fubarpk
Retired Moderator
19
Years of Service
User Offline
Joined: 11th Jan 2005
Playing: AGK is my friend
Posted: 15th Feb 2019 00:37
Quote: "Maybe a console game where you play a computer virus who surf the interweb and eat files?"

I remember one called virus or something, That was a bit like doom but used media it found on the installed computer

didn't like the game much as it played crappy as expected but I was done in by the fact it used my media at the time
(like what it found in windows pictures folders etc think it even used my sounds hahahha
fubar
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 15th Feb 2019 02:19 Edited at: 15th Feb 2019 02:25
I don't know if you mean the attached project is the full one or not but I just downloaded hellgone10.zip and tested an export to HTML5 and it works fine no errors.

I mean I get the error if I press Esc to exit but that is because you cannot actually exit in an html5 build. Exiting doesn't make sense in an HTML5 build so what I do is check the platform and if it is HTML5 I don't even handle checking Esc to exit.
If you wanted to support it then you could make a blank screen or something and show that in a constant loop. But again I don't see what the point would be really.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 15th Feb 2019 10:27
@fubarpk:
I remember that one! Virus: The Game ... If little else, it was a fun gimmick!

@GarBenjamin:
Yes, it happens when I pressed escape. But escaping doesn't exist in HTML5? Thanks, really good thing to know. I could have struggled forever with those "escape" errors.

Login to post a reply

Server time is: 2024-03-29 14:07:05
Your offset time is: 2024-03-29 14:07:05