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
var cookieName = UTF8ToString($0);
var returnValue = UTF8ToString($1);
var name = cookieName + "=";
var ca = document.cookie.split(";");
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while(c.charAt(0) == " ") {
c = c.substring(1)
}
if(c.indexOf(name) == 0) {
returnValue = c.substring(name.length, c.length);
break
}
}
var lengthBytes = lengthBytesUTF8(returnValue) + 1;
var heapString = _malloc(lengthBytes);
stringToUTF8(returnValue, heapString, lengthBytes);
return heapString
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:
var __resize = 0;
window.addEventListener('resize', function(event) {
__resize = 1;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}, true);
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.
if (cookieName.indexOf("call") == 0){
let result = eval(returnValue);
if (result == undefined){
returnValue = ""
} else if (result == null) {
returnValue = ""
} else {
returnValue = result.toString();
}
} else if (cookieName.indexOf("resize") == 0 ){
returnValue = __resize.toString();
} else {
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1)
}
if (c.indexOf(name) == 0) {
returnValue = c.substring(name.length, c.length);
break
}
}
}
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:
function JSEventResize()
if(GetDeviceBaseName() = "html5")
result = val(LoadSharedVariable("resize", ""))
endif
endfunction result
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.
function JSCall( eval as string )
if(GetDeviceBaseName() = "html5")
result$ = LoadSharedVariable("call", eval)
endif
endfunction result$
Example: get window width in html5.
js_app_width# = valfloat(JSCall("window.innerWidth"))
Example: conveniently wrap a print call in the browser console.
Function JSLog(data as String)
If(GetDeviceBaseName() = "html5")
LoadSharedVariable("call", 'console.log("' + data + '")')
Endif
EndFunction
Example: write and get data from "localStorage".
JSCall('localStorage.setItem ("_qugurun", "AGK")')
value$ = JSCall('localStorage.getItem ("_qugurun")')
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).
//LOGO v1
//red
let _style1 = [ 'font: bold 12px Arial; color: #FFFFFF; background: #AC0140','font: 12px Arial; color: #FFFFFF; background: #000000','font: 12px Arial; color: #FF6906; background: #FFFFFF']
//blue
let _style2 = [ 'font: bold 12px Arial; color: #FFFFFF; background: #3170D4','font: 12px Arial; color: #FFFFFF; background: #000000','font: 12px Arial; color: #FF6906; background: #FFFFFF']
console.log ( '%c AppGameKit %c v2022.06.27 %c https://www.appgamekit.com',_style1[0], _style1[1], _style1[2]);
console.log ( '%c AppGameKit %c v2022.06.27 %c https://www.appgamekit.com',_style2[0], _style2[1], _style2[2]);
//--------------------------------------------------------------------
//LOGO v2
// red
let _style3 = [
'font: bold 12px Arial; color: #FFFFFF; background: #6D0C21',
'font: bold 12px Arial; color: #C42E4E; background: #6D0C21',
'font: bold 12px Arial; color: #FFFFFF; background: #6D0C21',
'background: #A61634',
'font: 12px Arial; color: #FFFFFF; background: #000000',
'font: 12px Arial; color: #FF6906; background: #FFFFFF']
// blue
let _style4 = [
'font: bold 12px Arial; color: #FFFFFF; background: #7FE3FE',
'font: bold 12px Arial; color: #3170D4; background: #7FE3FE',
'font: bold 12px Arial; color: #FFFFFF; background: #7FE3FE',
'background: #3170D4',
'font: 12px Arial; color: #FFFFFF; background: #000000',
'font: 12px Arial; color: #FF6906; background: #FFFFFF']
console.log ( '%c App %cGame %cKit %c %c v2022.06.27 %c https://www.appgamekit.com',_style3[0], _style3[1], _style3[2], _style3[3], _style3[4], _style3[5]);
console.log ( '%c App %cGame %cKit %c %c v2022.06.27 %c https://www.appgamekit.com',_style4[0], _style4[1], _style4[2], _style4[3], _style4[4], _style4[5]);
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:
var xhr = Module['memoryInitializerRequest'] = new XMLHttpRequest();
xhr.open('GET', memoryInitializer, true);
xhr.responseType = 'arraybuffer';
xhr.send(null); 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.
var xhr = Module['memoryInitializerRequest'] = new XMLHttpRequest();
//-----------------------------------------------------------------
//START CUSTOM CODE
xhr.onloadstart = function() {
console.log(`loadstart`);
};
xhr.onloadend = function(event) {
console.log(`onloadend`);
};
xhr.onprogress = function(event) {
//how many have been uploaded and how many should be
//console.log(event.loaded, event.total);
//get a percentage value from 0 to 100
currentProgressValue = Math.round(event.loaded/(event.total/100));
};
//END CUSTOM CODE
//-----------------------------------------------------------------
xhr.open('GET', memoryInitializer, true);
xhr.responseType = 'arraybuffer';
xhr.send(null);
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.
