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/AppGameKit Studio Showcase / HTML5 - Call and Callback JavaScript

Author
Message
Qugurun
Valued Member
9
Years of Service
User Offline
Joined: 8th Dec 2014
Playing: AppGameKit
Posted: 21st Jan 2023 21:55 Edited at: 10th Feb 2023 20:03
Thanks to Prime, he found the processing of the Load Shared Variable command in AGKPlayer.js allowed you to write a call to JS code with a result if the code implies it.
My implementation is different, I don't bind to just one command, for example localStorage.setItem, but I did that you can call any JS code\functions and if the function returns something, then we will get it back to AGK.

Original code: line ~1400


This implementation is the same as with the DLL, here you also need to poll JS for changes to something. This will allow you to perform actions that will replace callbacks.

At the very beginning of the AGKPlayer.js file wrote addEventListener and when it fires then I have a variable that stores information about it:


Since window changes are an important part of working with html5 games, I made it into a separate function by changing the code in AGKPlayer.js.


And now, by polling the JS code after a certain time interval, I can find out if the window sizes have changed, and in AppGameKit I implemented a check call like this:

The data that can be obtained from GetDeviceWidth() and GetDeviceHeight() are relevant only at the start of the application, but when resizing the browser window, these functions return old data, so if you want the game to be responsive to window changes, you need to get the window sizes from JS.

Be sure to set SetVSync( 1 ) otherwise the game will stutter\ slow down. Why is this happening? It is written in detail in the documentation.

Everything else can be called marked "call".
Example: it is convenient to wrap a call of any JS code.


Example: get window width in html5.


Example: conveniently wrap a print call in the browser console.


Example: write and get data from "localStorage".


I made a beautiful icon to display information about the engine in the console, there are four options to choose from. By the way, this code can also be called via LoadSharedVariable("call", your code).





I also changed the html, using canvas 2D I display a splash screen with a progress indicator while loading the game. At the same time, it automatically adjusts to the size of the screen.

This is, of course, good, but need to redo it in css so that it is more responsive.

About the progress bar, there is such a code in html:


xhr has built-in functions to track the start and end of the download, as well as the size of the received file and the downloaded size at the moment, by manipulating this data, you can make a progress bar.


I hope you were interested, ask me if you don't understand something.

P.S.
The most important thing for me was that it would finally allow me to make full-fledged html5 games with the embedding of advertising SDKs, receive information about the reward \ viewing ads, etc. and receive income from this.


UPD:
Live: https://qugurun.github.io/appgamekit/js/index.html

The new html can be viewed on github.

Attachments

Login to view attachments
Virtual Nomad
Moderator
17
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 21st Jan 2023 22:23
oh, man. this looks delicious, Qugurun.

i feel like many doors have been opened for us with this knowledge.

now, more than ever, do i need to learn some .js

thanks for sharing!
Qugurun
Valued Member
9
Years of Service
User Offline
Joined: 8th Dec 2014
Playing: AppGameKit
Posted: 22nd Jan 2023 01:41 Edited at: 23rd Jan 2023 17:53
I made an example and now you can watch it live.



For automatic scaling, I use this logic:


JS:


This doesn't work for html5:


Live: https://qugurun.github.io/appgamekit/js/index.html

The new html can be viewed on github.
Qugurun
Valued Member
9
Years of Service
User Offline
Joined: 8th Dec 2014
Playing: AppGameKit
Posted: 22nd Jan 2023 02:00
Console:


local Storage:


And the resulting size from the server is very pleasing when gzip is enabled:
Qugurun
Valued Member
9
Years of Service
User Offline
Joined: 8th Dec 2014
Playing: AppGameKit
Posted: 22nd Jan 2023 06:13 Edited at: 10th Feb 2023 15:36
Functions like GetResumed() and GetPaused() don't work in html5. But since you and I have learned how to get data from JS, we will use this. I propose to start listening for the loss of focus (this is when we clicked outside the canvas of the game, for example, in the address bar) and the visibility of the tab (when we switched to another tab), by the way, the loss of focus also works when we switch to another tab.

js:


And in AppGameKit, we use a call-back function that reads the variable we need from JS.
agk:


Such and similar things in JS for AppGameKit pull on a separate JS library.

It seems that the topic of HTML5 games on AppGameKit deserves a separate thread on the forum.
Qugurun
Valued Member
9
Years of Service
User Offline
Joined: 8th Dec 2014
Playing: AppGameKit
Posted: 22nd Jan 2023 10:28 Edited at: 22nd Jan 2023 10:55
The goal is to make a convenient functionality for adding advertising SDKs and functionality in general.

Successful attempt to embed code from the media/JS/mylibrary resource file.js with some clarifications, for example, this thing does not like anonymous functions or it is necessary to avoid double quotes in the js file. I will still look at options for solving this issue, but this result is quite working.
JS:


AGK:


And so, here are my observations, if the first parameter let or var is passed to JSCall, then eval will not execute the code.
blink0k
Moderator
10
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 22nd Jan 2023 19:21
This is superb. Awesome work!
Qugurun
Valued Member
9
Years of Service
User Offline
Joined: 8th Dec 2014
Playing: AppGameKit
Posted: 22nd Jan 2023 19:45 Edited at: 22nd Jan 2023 19:48
Virtual Nomad, blink0k, Thanks for the feedback!

Continuing the topic of JS polling, there is an important point between wasm - (WebAssembly) and JavaScript, there is a very narrow connection, similar to a bottleneck, and for stable operation you need to adhere to the fact that requests to JS should not be executed every frame, otherwise the stability of execution is likely to be disrupted.

Therefore, I recommend sticking to something like this for frequent requests. As I gave an example earlier.

Prime
1
Years of Service
User Offline
Joined: 15th Jun 2022
Location:
Posted: 13th Feb 2023 18:22
This looks great. I was hoping someone who knows js would pick it up and do it right.
Zoff
AGK Developer
8
Years of Service
User Offline
Joined: 2nd Oct 2015
Location:
Posted: 19th Feb 2023 15:07
Wow! this is a great method. Было бы не плохо иметь такую подробную инструкцию, например, для ЯндексИгры, у кого плоховато с JS.))
Qugurun
Valued Member
9
Years of Service
User Offline
Joined: 8th Dec 2014
Playing: AppGameKit
Posted: 19th Feb 2023 17:08 Edited at: 21st Feb 2023 07:40
Zoff, So everything is the same as for html5, everything is connected the same way, except that you need to be a little smart for callbacks. Telegram @Qugurun

Login to post a reply

Server time is: 2023-12-09 16:17:11
Your offset time is: 2023-12-09 16:17:11