1 (edited by masodo 2019-07-02 09:57:14)

Topic: How to do it.

I had somebody ask me how to convert games and wanted to re-post my reply here for wider consumption:
------

I have no experience in Flash game conversions so I really have no idea where you are coming from (experience-wise.)

Converting HTML5 games is just something I picked up and have really figured it out on my own for the most part. The real beauty of the HTML5 games is the open nature of the source code and the ability to edit in a text editor. I use EditPad Pro although I believe Notepad++ is preferred by most. I have also developed an appreciation for the Online JavaScript beautifier and have installed to my domain: http://deburger.com/ARCADE/acpi/js-beautify/ it will take the often obfuscated, un-formatted and minimized code included with some games and format it for readability.

I have converted several games so far and have really only been doing this for a year at most. Here is the collection of those I have worked on:
http://deburger.com/ARCADE/index.php?se … h#indextop

Most of my education came in the form of getting games that did not work (for whatever reason) to work in my arcade. I run a home-brew arcade script (PracticalLightning Arcade) that has its roots in the PHP-Quick Arcade by JCINK.
Developing that arcade has taught me a lot about coding in PHP/MySQL and getting into the games themselves has lead to a greater comfort working in JavaScript. I have been programming for the internet since the mid 90's and have experience in html, html5, JavaScript, ASP, ASPX, C#, VBScript, MySQL, MS-SQL, Linux, DOS, Perl & Python.  I have developed a home-brew content management system at InfinitelyRemote.com (also hosts gopher there on port:70) and run a GeekLog blog at BlogDogIt.com and work full-time as IT Manager in the Trade Show industry.

I trust you know that in order to record a score in an IBPro arcade there is a GET and a POST component that must be triggered at the appropriate time to submit a score. While there are many ways to go about this I have cobbled together a system that works for most situations. I have a script that I embed into a games "index.html" page (all games use this page to initialize themselves.) This script provides the function to submit the score to the arcade:

<script>
function bell(high){
//alert('Game Over!'); //optional
function scorepost(href, named, scored) {
            var gform = document.createElement('form');
            gform.method = 'post';
            gform.action = href;
            gform.target = '_top';
            var input = document.createElement('input');
                input.setAttribute('name', 'gname');
                input.setAttribute('value', named);
                gform.appendChild(input);
            var input2 = document.createElement('input');
                input2.setAttribute('name', 'gscore');
                input2.setAttribute('value', scored);
                gform.appendChild(input2);
            document.body.appendChild(gform);
            gform.submit();
            document.body.removeChild(gform);
}
let pathArray = window.location.pathname.split('/');
            let newpath = '';
            if (pathArray[1] && pathArray[1] != 'arcade' && pathArray[1] != 'games') {
                newpath = '/' + pathArray[1];
            }
scorepost(window.location.protocol + '//' + window.location.hostname + newpath + '/index.php?act=Arcade&do=newscore', '*IDnameOfTheGameHere*', high);
}
</script>

This function I have named "bell" (as in 'ring the bell') and once this script is added to the index page it is then a matter of finding the appropriate spot in the code to call the function and discovering the variable used to track the game's score.  So say, the game stores the score in the variable named "MyScore" you would have to find the best place in the "Game Over" sequence to insert the following:

bell(MyScore);

And this will send the score value to the submit function.

On multi-level games it is usually necessary to locate the location in the code that deals with "level failed" to also insert the bell call. Multi-level games also present special challenges in that level scores are often held in an array in "LocalStorage" (written to memory on the user's device) and these individual level scores must be tallied into a grand total for submitting to the arcade.

It is quite challenging to figure out these sorts of games mainly because you almost need to get a handle on the games logic beyond simply hunting down "Game Over"

Very often I have found it expedient to create my own variable named 'MyTally' and set it to zero in the very beginning of the game function:

var MyTally = 0;

and then seek out the "level completed" function/sequence and add the level score to the variable:

MyTally = MyTally + MyScore

and then at game over / level failed call:

bell(MyTally);

I have devised a method to parse data from local storage and add up the scores but it can be quite challenging to accomplish but is worth the effort on really good multi-level games.

When using this method I embed a function called 'collectScore()' to the end of the game script and rather than call 'bell(score) at gameover / level-failed I call:

collectScore();

which jumps us to:

function collectScore(){var a;if(a=localStorage.getItem("Name_Of_Storage"),parsedData=JSON.parse(a),null!=parsedData)var b=parsedData.ScoreArray;if(null!==b);var numbers = b;function getSum(total, num) {return total + num;}scoretally=numbers.reduce(getSum);bell(scoretally);};

As you can see this function ends in calling to bell().

The trick here is figuring out the name of the storage data array. Very often this can be found by searching for the keyword "localStorage" in the script then you must discover the name of the array that holds the accumulated scores ('ScoreArray' in the above example.) Sometimes inserting an alert in the script will 'spill-the-beans' and expose the contents of localStorage:

alert(localStorage.getItem("Name_Of_Storage"));

Then it is a matter of finding the most effective place to insert the alert - trial and error usually hits on it in short order with some careful evaluation of the neighboring logic.

-----

Now as for finding the games themselves... (?)

I like to search out HTML5 games on the internet that are freely available. GitHub.com has been a good resource for games that have never been designed for arcade use but are quite open and great exercise for honing the requires skills to apply the principles outlined above. I have found searching for 'JavaScript games' has also been rewarding as there are quite a few competitions that result in some interesting games coming into the public gaming arena.

Any of the commercial games I have added to my portfolio of converted games are games that did not work well or were poorly converted that I reworked into a better functioning script. Please visit http://DeBurger.com/ARCADE/ and visit the sites in my affiliate banner marquee to see my usual source of games.

Games designed for incompatible arcades should also be considered prime candidates for conversion to IBPro Arcade (or PracticalLightning Arcade) use.

Re: How to do it.

Great information Mike, thanks

Re: How to do it.

Hi Mike, is it possible to convert a flash game to HTML5. Is it possiblr or a hard task?
Ron.

Re: How to do it.

Hi Ron
To the best of my knowledge it would be practically impossible to convert from flash to html5, unless you were the original creator. It depends on how the original flash game was assembled. Some really basic games may be reverse engineering-able but I think most of the flash games have been compiled from C language programming whereas html5 is chiefly javascript driven.

Sometimes the best you can do is salvage the artwork from a flash game to use in a total rebuild.

I know... there are many flash games i wish i could convert but alas that shall never be wink