Difference between revisions of "HTML5 Curation"

From Flashpoint Database
Jump to: navigation, search
(added in changes to bring the tutorial up to date with version 10. Added some more troubleshooting things. Brought over some edits by prostagma as well.)
(11 intermediate revisions by 6 users not shown)
Line 1: Line 1:
 
HTML5 games are not nearly as endangered as Flash games, and are in fact often cited as replacing the Flash medium. However, they still pose a risk of disappearing at some point in time, and therefore should be considered for curation just like other web game formats.
 
HTML5 games are not nearly as endangered as Flash games, and are in fact often cited as replacing the Flash medium. However, they still pose a risk of disappearing at some point in time, and therefore should be considered for curation just like other web game formats.
  
The following page is a tutorial on how to curate HTML5 games to add to Flashpoint.
+
This tutorial assumes you've read the standard [[Curation Tutorial]], which is highly recommended to go through. Try curating a Flash game before moving on to HTML5.
 
 
== Before You Start ==
 
 
 
This tutorial will assume you've read the standard [[Curation Tutorial]], which is highly recommended to go through. Try curating a Flash game before moving on to HTML5.
 
  
 
== Identifying HTML5 Games ==
 
== Identifying HTML5 Games ==
 +
If a web game doesn't ask to enable Adobe Flash Player and there's no sign or mention of any of the other [[Platforms]], it is very likely an HTML5 game. Many use game engines as their base, the most prominent example being Unity WebGL, which replaced the previous [[Unity_Curation|Unity NPAPI implementation]] that no longer works.
  
If a web game doesn't ask to enable Adobe Flash Player and there's no sign or mention of any of the other [[Platforms]], it is very likely an HTML5 game. Some use game engines as their base, the most prominent example being UnityWebGL, which replaced the previous [[Unity_Curation|Unity NPAPI implementation]] that no longer works.
+
To confirm this, press F12 to open the Developer Tools of your browser, click on the Inspect Element button and click on the game area. This will show you in the <code>Elements</code> tab the iframe the game is located in, and there you'll find the link for the main file of the game. You can also look for a <code>.html</code> file, likely with the filename <code>index.html</code>. However this is not always present, the iframe for many modern games will have no filename or extension at the end. These look like a regular URL rather than a link to a file.
 
 
To confirm this, press F12 to open the Developer Tools of your browser, click on the Inspect Element button and click on the game area. This will show you in the <code>Elements</code> tab the iframe the game is located in, and there you'll find the link for the main file of the game. You can also look for a <code>.html</code> file, likely with the filename <code>index.html</code>.  
 
  
 
Copy the file's link and go to it. If it plays an unobstructed version of the game, you've found the source of your Launch Command. Keep in mind that not all games should be divorced from the page they are found in, such as individual games outside of webgame websites.
 
Copy the file's link and go to it. If it plays an unobstructed version of the game, you've found the source of your Launch Command. Keep in mind that not all games should be divorced from the page they are found in, such as individual games outside of webgame websites.
Line 18: Line 13:
  
 
== Grabbing The Game From The Internet ==
 
== Grabbing The Game From The Internet ==
 
 
[[File:Individual-Sprites-HTML5-example.png|thumb|300px|Some games have one or more image files that act as sprite sheets, others will have each unique texture as an individual file, so make sure to get them all.]]
 
[[File:Individual-Sprites-HTML5-example.png|thumb|300px|Some games have one or more image files that act as sprite sheets, others will have each unique texture as an individual file, so make sure to get them all.]]
  
There are an extremely low number of HTML5 games that are single-asset. Your curation is almost guaranteed to be multi-asset. From here, you have two main options, both of which are [[Curation Tutorial#Multi-Asset_Games|described here]], but each is more suited for different tasks which we'll explain here.
+
There are an extremely low number of HTML5 games that are single-asset. For multi-asset curations, you have two main options, both of which are [[Curation Tutorial#Multi-Asset_Games|described here]], but each is more suited for different tasks which we'll explain here.
  
Create a new curation in the Curate tab of Flashpoint Core and fill it out with as much information as you can, including the Launch Command you found earlier. The Platform should be <code>HTML5</code>, and the Application Path should be <code>FPSoftware\Basilisk-Portable\Basilisk-Portable.exe</code>, referring to the Basilisk browser used for HTML5 games.
+
Create a new curation in the Curate tab of Flashpoint Core and fill it out with as much information as you can, including the Launch Command you found earlier. The Platform should be <code>HTML5</code>, and the Application Path should be <code>FPSoftware\Basilisk-Portable\Basilisk-Portable.exe</code>, referring to the Basilisk browser used for most HTML5 games.
  
 
After inputting the launch command, use <code>Run with MAD4FP</code>, and start playing the game. [[MAD4FP]] will download any assets automatically as you play and make progress.
 
After inputting the launch command, use <code>Run with MAD4FP</code>, and start playing the game. [[MAD4FP]] will download any assets automatically as you play and make progress.
Line 29: Line 23:
 
'''REMEMBER, ALWAYS TEST THE GAME 100%, NO MATTER HOW BIG OR SMALL!''' This is true for all games, but especially HTML5, as nearly none are single-asset, you are almost guaranteed to find a multi-asset. Because of how it works, most games will only call assets when needed, so make sure to navigate all the menus, click all the buttons, and play the game as thoroughly as possible. This may include hidden collectables, unique voice lines, downloadables, completion bonuses, etc.
 
'''REMEMBER, ALWAYS TEST THE GAME 100%, NO MATTER HOW BIG OR SMALL!''' This is true for all games, but especially HTML5, as nearly none are single-asset, you are almost guaranteed to find a multi-asset. Because of how it works, most games will only call assets when needed, so make sure to navigate all the menus, click all the buttons, and play the game as thoroughly as possible. This may include hidden collectables, unique voice lines, downloadables, completion bonuses, etc.
  
Wayback will not save these missing assets on a normal capture, and computers/browsers tend to clear cache much more frequently for optimization, making cache dumps unlikely to yield anything, so once it's gone, it's likely gone for good. Better to catch everything first try and make sure it's not lost. for more information on multi-assets in general, [[Curation Tutorial#Multi-Asset_Games|go here]].
+
Wayback will not save these missing assets on a normal capture, and computers/browsers tend to clear cache much more frequently for optimization, making cache dumps unlikely to yield anything, so once it's gone, it's likely gone for good. Better to catch everything first try and make sure it's not lost. For more information on multi-assets in general, [[Curation Tutorial#Multi-Asset_Games|go here]].
 +
 
 +
Once you've finished playing through the game, you need to make sure that all of the game's assets have actually been downloaded. To do this, first clear Basilisk's cache by following [[Extended FAQ#ClearBasiliskCache|these instructions]], then close Basilisk. Next, press the <code>Run</code> button to test the game again, this time without using MAD4FP. If the game does not work, MAD4FP likely failed to download some of the required assets. Follow the instructions in the [[#Missing Assets|Missing Assets]] section to complete the curation.
 +
 
 +
== Other Browsers ==
 +
[[File:BasiliskError.png|thumb|300px|Common error message for games that don't work in Basilisk.]]
 +
[[File:UnityWebglError.PNG|thumb|300px|Error message seen in Unity WebGL games that need to be run in another browser.]]
 +
Some games will not work in the version of Basilisk used by Flashpoint. This is generally for one of two reasons: 1) The game requires a feature or technology not present in the 32-bit version of Basilisk, which no longer receives updates; or 2) The game requires a Chromium-based browser to work properly. In order for these games to work in Flashpoint, two other browsers were added, <code>Browser Mode</code> and <code>Chromium</code>. The two have somewhat different uses, so testing the game in both versions may be needed to see what will work best.
 +
 
 +
Sometimes a game that doesn't work in Basilisk will show an error message. A message similar to the examples is typically a sure sign that another browser must be used for the curation. In other cases, the game may work to some degree, but certain elements may be missing or not working properly. Common issues include: the game loading with no graphics, the game's music and/or sound effects not playing, the game's controls not working, or the game experiencing lag issues not present in other browsers. Performance issues are especially common with Unity WebGL games in Basilisk.
 +
 
 +
=== Browser Mode ===
 +
Browser Mode is a way of running games using Flashpoint's launcher. It is usually the first one to try when a game doesn't work in Basilisk. However, since Browser Mode is not a full web browser, it has some limitations that mean it isn't an option for all games.
 +
 
 +
The limitations of Browser Mode include:
 +
* Cannot open multiple tabs or windows.
 +
* Doesn't support games that require a webcam
 +
* Games that require the cursor to be captured may not work properly.
 +
* Currently cannot be used for Alternate Applications (but may support them in the future).
 +
 
 +
'''The Application Path for Browser Mode is''' <code>:browser-mode:</code>.
 +
 
 +
=== Chromium ===
 +
Ungoogled Chromium is included in Flashpoint as a second full browser alongside Basilisk. It is currently not used for many games but fixes issues that Basilisk and Browser Mode cannot. The main limitation Chromium has over the other two browsers is that it cannot load Flash content for the few HTML5/Flash hybrid games.
 +
 
 +
'''The Application Path for Chromium is''' <code>FPSoftware\startChrome.bat</code>.
 +
 
 +
== Google Fonts Elements ==
 +
[[File:Google Fonts Missing.png|thumb|300px|Missing icons and the default font, compared to how it should look with everything being displayed.]]
 +
Some games will make use of Google's library of fonts and icons, and these can have trouble displaying in Flashpoint.
 +
 
 +
This may be because the <code>index.html</code> (or equivalent) may not be calling the font file directly, but making a request to Google's servers to serve one or more fonts depending on the URL parameters. When the page uses multiple fonts, the same <code>css</code> file may be requested with different parameters. If so, you'll need to follow the steps below to make the fonts display properly.
 +
 
 +
<ol>
 +
<li>
 +
Look at the logs and check for any 404 requests from <code>fonts.googleapis.com</code>. You might observe the differences between the version you have and the one hosted on the live web, but check the logs to be sure. <br>
 +
For example, <code>https://fonts.googleapis.com/css?family=Corben:400&display=swap&subset=latin-ext</code>
 +
</li>
 +
<li>
 +
Take the request URL and open it in your web browser. <br>
 +
The previous example will get this response from the server:
 +
<pre>/* latin-ext */
 +
@font-face {
 +
  font-family: 'Corben';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  font-display: swap;
 +
  src: url(https://fonts.gstatic.com/s/corben/v14/LYjDdGzzklQtCMpNqQNFlVs.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Corben';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  font-display: swap;
 +
  src: url(https://fonts.gstatic.com/s/corben/v14/LYjDdGzzklQtCMpNpwNF.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 +
}</pre>
 +
</li>
 +
<li>
 +
Search the response for the font/icon URLs. In the previous example, these are the font URLs:
 +
<pre>https://fonts.gstatic.com/s/corben/v14/LYjDdGzzklQtCMpNqQNFlVs.woff2
 +
https://fonts.gstatic.com/s/corben/v14/LYjDdGzzklQtCMpNpwNF.woff2</pre>
 +
Download the URLs with cURLsDownloader to get them with the correct file structure, then move them to the curation <code>content</code> folder.
 +
</li>
 +
<li>
 +
Open a text editor such as Notepad and copy the server response into it, replace any <code>https</code> URLs with <code>http</code>, then save the file as <code>fonts.css</code> (not .txt!)<br>
 +
Several of these request URLs may be present so name subsequent ones sequentially (<code>fonts2.css</code> <code>fonts3.css</code>). In the case of Icons use <code>icons.css</code>.
 +
</li>
 +
<li>
 +
Place these files in the same folder where the <code>.html</code> file is located.
 +
</li>
 +
<li>
 +
Open the <code>.html</code> file in a text editor and replace the original requests with the name of the .css file you created. <br>
 +
For example, replace: <br>
 +
<code>https://fonts.googleapis.com/css?family=Corben:400&display=swap&subset=latin-ext</code> with <code>fonts.css</code> <br>
 +
<code>https://fonts.googleapis.com/icon?family=Material+Icons</code> with <code>icons.css</code> <br>
 +
And so on.
 +
</li>
 +
<li>
 +
Repeat this with other request URLs the game might need.
 +
</li>
 +
</ol>
  
After making sure you got the whole game, test it again, this time without using MAD4FP pressing the <code>Run</code> button.
+
After this, make sure the fonts are displaying correctly just like they are on the live web version.
  
 
== Responsive Design Mode and Mobile Elements ==
 
== Responsive Design Mode and Mobile Elements ==
Line 41: Line 118:
  
 
Make sure to skim through the entire game where these elements might show up, like parts with game controls or menus.
 
Make sure to skim through the entire game where these elements might show up, like parts with game controls or menus.
 +
 +
== YouTube Games ==
 +
See [[HTML5 Curation/YouTube Games]].
  
 
== Troubleshooting ==
 
== Troubleshooting ==
 +
=== HTTPS Removal ===
 +
Don't be surprised if it doesn't work at first, HTML5 games are relatively stable and mostly work, but a common occurrence is the game refusing to load assets.
  
=== https removal ===
+
This most likely is because of <code>https</code> requests inside the code of the game calling for files on the live web and failing, instead of <code>http</code> which calls local files. You will need to find and replace all instances of <code>https</code> with <code>http</code> in the game files. You might need to repeat this step multiple times for different parts of the game, due to most games being muiltiassets, they will only call certain parts that are needed during sections of gameplay.
  
Don't be surprised if it doesn't work at first, HTML5 games are relatively stable and mostly work, but a common occurrence is the game refusing to load assets.  
+
To streamline and simplify the process, we suggest using Notepad++ and its <code>Find in Files</code> function, where you can input the Directory that points to the content folder of your curation, and then click <code>Replace in Files</code> where it will search in all the game files each instance and replace it.
  
This most likely is because of <code>https</code> requests inside the code of the game calling for files on the live web and failing, instead of <code>http</code> which calls local files. You will need to find and replace all instances of <code>https</code> with <code>http</code> in the game files. You might need to repeat this step multiple times for different parts of the game, due to most games being muiltiassets, they will only call certain parts that are needed during sections of gameplay.  
+
Doing this process once is not always enough, so if the game continues to not load assets, you'll probably need to do it multiple times. You'll need to download more files before replacing <code>https</code> again.
  
To streamline and simplify the proccess, we suggest using Notepad++ and its <code>Find in Files</code> function, where you can input the Directory that points to the content folder of your curation, and then click <code>Replace in Files</code> where it will search in all the game files each instance and replace it.
+
In rare cases, you may have <code>https</code> requests coming from an obfuscated file. In these cases you will need to deobfuscate the code. There are online tools that can help with this.
  
 
This is a really common form of modification for HTML5 games, but it is minor enough that games with altered https requests don't really need to be marked as Hacked. Note that this rule only applies to text files (such as HTML and JS files); you must always mark a game as Hacked if you edit binary files (such as SWFs).
 
This is a really common form of modification for HTML5 games, but it is minor enough that games with altered https requests don't really need to be marked as Hacked. Note that this rule only applies to text files (such as HTML and JS files); you must always mark a game as Hacked if you edit binary files (such as SWFs).
  
=== Missing assets ===
+
=== Missing Assets ===
While curating, there can apear missing files, so to get them we can use cURLsDownloader;
+
While curating, there might be a few missing files, so to get them we can use cURLsDownloader.
  
* If MAD4FP isn't able to download certain files, or they are missng while testing without it, go to the Logs tab, click on <code>Copy 404 URLs</code> , create a <code>.txt</code> file, paste and save.
+
* If MAD4FP isn't able to download certain files, or they are missing while testing without it, go to the Logs tab, click on <code>Copy 404 URLs</code>, create a <code>.txt</code> file, paste and save.
 
* If Basilisk is having trouble running the application, run the game on the live web with the network tab open, and play the game as if you were curating it as normal. After finishing, copy all cURLs, create a <code>.txt</code> file, paste and save.  
 
* If Basilisk is having trouble running the application, run the game on the live web with the network tab open, and play the game as if you were curating it as normal. After finishing, copy all cURLs, create a <code>.txt</code> file, paste and save.  
  
Next, drag & drop the file onto <code>cURLsDownloader.bat</code>. Copy the contents of the <code>Downloads</code> folder outputted by cURLsDownloader, select the <code>Open Folder</code> button on your curation in the Curate tab, and paste the folder into the <code>content</code> folder of your curation.
+
Next, drag & drop the file onto <code>cURLsDownloader.bat</code>. Copy the contents of the <code>Downloads</code> folder outputted by cURLsDownloader, select the <code>Open Folder</code> button on your curation in the Curate tab, and paste the folder into the <code>content</code> folder of your curation. For more information about cURLsDownloader, be sure to read the included manual.
 
 
=== Clean-up of junk Files ===
 
  
 +
=== Clean-up of Junk Files ===
 
Since MAD4FP downloads every file requested by the game that still exists on the live web, you can get a lot of files that are unnecessary for the game to work. Be careful not to enter pages outside of the game as it will download them too, best way to prevent this is by knowing where this happens inside the game.
 
Since MAD4FP downloads every file requested by the game that still exists on the live web, you can get a lot of files that are unnecessary for the game to work. Be careful not to enter pages outside of the game as it will download them too, best way to prevent this is by knowing where this happens inside the game.
  
 
Even with these precautions, you will download junk from other services the website uses outside of the game. After deleting them, make sure the games still work without them.
 
Even with these precautions, you will download junk from other services the website uses outside of the game. After deleting them, make sure the games still work without them.
  
=== Broken or non-functional games ===
+
=== Broken Or Non-Functional Games ===
 
+
Some games might require a certain browser we do not support or features not available in the browsers we have. While we are now able to support most HTML5 games, there are still some that may not be curatable. The most common example of this is HTML5 games that only work in a mobile browser. While we may be able to support these games in the future, they are currently unable to be properly added to Flashpoint.
Some games might require a certain browser we do not support or newer features not available on the 32bit version of Basilisk, which will no longer receive updates. This version is used to ensure compatibility with 32bit machines, and also because it houses most NPAPI plugins. Staff is working on implementing a replacement browser for these newer HTML5 titles. Make sure to ask staff if this is really the problem.
 
 
 
If yes, although unable to be played on the current version of Flashpoint being used, it should still be saved, as these features are likely to be supported in the future and the game work as a result.
 
 
 
For this situation, download the [[Launcher Extensions|Brwoser Mode Launcher Extension]], and type <code>:browser-mode:</code> in the application path field. This will use Flashpoint's built in Browser, which is more feature complete. This will fix most compatibility issues, you can still use MAD4FP with it.
 
  
Make sure to write a note explaining that the game does not currently run in flashpoint:
+
When dealing with a game we currently can't support, the best option (if possible) is to run the game on the live web with the network tab open, and playing the game as if you were curating it as normal. After finishing, copy all cURLs, create a <code>.txt</code> file, paste and save. Next, drag & drop the file onto <code>cURLsDownloader.bat</code>. Copy the contents of the <code>Downloads</code> folder outputted by cURLsDownloader, select the <code>Open Folder</code> button on your curation in the Curate tab, and paste the folder into the <code>content</code> folder of your curation.
<pre>Game only currently works with the :browser-mode: application path extension as of Flashpoint version X.X, please test once a new version is released and remove this sentence if it's able to work without it.
 
</pre>
 
 
 
If it still doesn't work, the best option is to run the game on the live web with the network tab open, and playing the game as if you were curating it as normal. After finishing, copy all cURLs, create a <code>.txt</code> file, paste and save. Next, drag & drop the file onto <code>cURLsDownloader.bat</code>. Copy the contents of the <code>Downloads</code> folder outputted by cURLsDownloader, select the <code>Open Folder</code> button on your curation in the Curate tab, and paste the folder into the <code>content</code> folder of your curation.
 
  
 
Upload this curation to #curator-lounge on our Discord server for safekeeping, as it might be able to work in the future.
 
Upload this curation to #curator-lounge on our Discord server for safekeeping, as it might be able to work in the future.
  
 
== Wrapping It Up ==
 
== Wrapping It Up ==
 +
{{:Wrapping It Up}}
  
Follow the proper [[Curation Format]], just like with any curation.
+
<noinclude>
 
+
[[Category:Curation Guides]]
Click on <code>Export</code> button at the bottom of your Curation, this will create a single <code>.7z</code> file containing the entire curation, which can be found by clicking <code>Exported Curations</code> on the Curate tab, which opens the folder. Once you have the file, submit it to the #other-game-curations channel of the Flashpoint Discord, typing the name of the game and using the HTML5 emoji when submitting. If the file is too large for discord, upload it to https://other.curations.unstable.life/, and type the name with the emoji in the Discord channel.
+
</noinclude>

Revision as of 20:53, 17 September 2021

HTML5 games are not nearly as endangered as Flash games, and are in fact often cited as replacing the Flash medium. However, they still pose a risk of disappearing at some point in time, and therefore should be considered for curation just like other web game formats.

This tutorial assumes you've read the standard Curation Tutorial, which is highly recommended to go through. Try curating a Flash game before moving on to HTML5.

Identifying HTML5 Games

If a web game doesn't ask to enable Adobe Flash Player and there's no sign or mention of any of the other Platforms, it is very likely an HTML5 game. Many use game engines as their base, the most prominent example being Unity WebGL, which replaced the previous Unity NPAPI implementation that no longer works.

To confirm this, press F12 to open the Developer Tools of your browser, click on the Inspect Element button and click on the game area. This will show you in the Elements tab the iframe the game is located in, and there you'll find the link for the main file of the game. You can also look for a .html file, likely with the filename index.html. However this is not always present, the iframe for many modern games will have no filename or extension at the end. These look like a regular URL rather than a link to a file.

Copy the file's link and go to it. If it plays an unobstructed version of the game, you've found the source of your Launch Command. Keep in mind that not all games should be divorced from the page they are found in, such as individual games outside of webgame websites.

Make sure to always use http:// instead of https:// to make sure Flashpoint grabs files from the fake Internet instead of the real one!

Grabbing The Game From The Internet

Some games have one or more image files that act as sprite sheets, others will have each unique texture as an individual file, so make sure to get them all.

There are an extremely low number of HTML5 games that are single-asset. For multi-asset curations, you have two main options, both of which are described here, but each is more suited for different tasks which we'll explain here.

Create a new curation in the Curate tab of Flashpoint Core and fill it out with as much information as you can, including the Launch Command you found earlier. The Platform should be HTML5, and the Application Path should be FPSoftware\Basilisk-Portable\Basilisk-Portable.exe, referring to the Basilisk browser used for most HTML5 games.

After inputting the launch command, use Run with MAD4FP, and start playing the game. MAD4FP will download any assets automatically as you play and make progress.

REMEMBER, ALWAYS TEST THE GAME 100%, NO MATTER HOW BIG OR SMALL! This is true for all games, but especially HTML5, as nearly none are single-asset, you are almost guaranteed to find a multi-asset. Because of how it works, most games will only call assets when needed, so make sure to navigate all the menus, click all the buttons, and play the game as thoroughly as possible. This may include hidden collectables, unique voice lines, downloadables, completion bonuses, etc.

Wayback will not save these missing assets on a normal capture, and computers/browsers tend to clear cache much more frequently for optimization, making cache dumps unlikely to yield anything, so once it's gone, it's likely gone for good. Better to catch everything first try and make sure it's not lost. For more information on multi-assets in general, go here.

Once you've finished playing through the game, you need to make sure that all of the game's assets have actually been downloaded. To do this, first clear Basilisk's cache by following these instructions, then close Basilisk. Next, press the Run button to test the game again, this time without using MAD4FP. If the game does not work, MAD4FP likely failed to download some of the required assets. Follow the instructions in the Missing Assets section to complete the curation.

Other Browsers

Common error message for games that don't work in Basilisk.
Error message seen in Unity WebGL games that need to be run in another browser.

Some games will not work in the version of Basilisk used by Flashpoint. This is generally for one of two reasons: 1) The game requires a feature or technology not present in the 32-bit version of Basilisk, which no longer receives updates; or 2) The game requires a Chromium-based browser to work properly. In order for these games to work in Flashpoint, two other browsers were added, Browser Mode and Chromium. The two have somewhat different uses, so testing the game in both versions may be needed to see what will work best.

Sometimes a game that doesn't work in Basilisk will show an error message. A message similar to the examples is typically a sure sign that another browser must be used for the curation. In other cases, the game may work to some degree, but certain elements may be missing or not working properly. Common issues include: the game loading with no graphics, the game's music and/or sound effects not playing, the game's controls not working, or the game experiencing lag issues not present in other browsers. Performance issues are especially common with Unity WebGL games in Basilisk.

Browser Mode

Browser Mode is a way of running games using Flashpoint's launcher. It is usually the first one to try when a game doesn't work in Basilisk. However, since Browser Mode is not a full web browser, it has some limitations that mean it isn't an option for all games.

The limitations of Browser Mode include:

  • Cannot open multiple tabs or windows.
  • Doesn't support games that require a webcam
  • Games that require the cursor to be captured may not work properly.
  • Currently cannot be used for Alternate Applications (but may support them in the future).

The Application Path for Browser Mode is :browser-mode:.

Chromium

Ungoogled Chromium is included in Flashpoint as a second full browser alongside Basilisk. It is currently not used for many games but fixes issues that Basilisk and Browser Mode cannot. The main limitation Chromium has over the other two browsers is that it cannot load Flash content for the few HTML5/Flash hybrid games.

The Application Path for Chromium is FPSoftware\startChrome.bat.

Google Fonts Elements

Missing icons and the default font, compared to how it should look with everything being displayed.

Some games will make use of Google's library of fonts and icons, and these can have trouble displaying in Flashpoint.

This may be because the index.html (or equivalent) may not be calling the font file directly, but making a request to Google's servers to serve one or more fonts depending on the URL parameters. When the page uses multiple fonts, the same css file may be requested with different parameters. If so, you'll need to follow the steps below to make the fonts display properly.

  1. Look at the logs and check for any 404 requests from fonts.googleapis.com. You might observe the differences between the version you have and the one hosted on the live web, but check the logs to be sure.
    For example, https://fonts.googleapis.com/css?family=Corben:400&display=swap&subset=latin-ext
  2. Take the request URL and open it in your web browser.
    The previous example will get this response from the server:
    /* latin-ext */
    @font-face {
      font-family: 'Corben';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/corben/v14/LYjDdGzzklQtCMpNqQNFlVs.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Corben';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/corben/v14/LYjDdGzzklQtCMpNpwNF.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
  3. Search the response for the font/icon URLs. In the previous example, these are the font URLs:
    https://fonts.gstatic.com/s/corben/v14/LYjDdGzzklQtCMpNqQNFlVs.woff2
    https://fonts.gstatic.com/s/corben/v14/LYjDdGzzklQtCMpNpwNF.woff2

    Download the URLs with cURLsDownloader to get them with the correct file structure, then move them to the curation content folder.

  4. Open a text editor such as Notepad and copy the server response into it, replace any https URLs with http, then save the file as fonts.css (not .txt!)
    Several of these request URLs may be present so name subsequent ones sequentially (fonts2.css fonts3.css). In the case of Icons use icons.css.
  5. Place these files in the same folder where the .html file is located.
  6. Open the .html file in a text editor and replace the original requests with the name of the .css file you created.
    For example, replace:
    https://fonts.googleapis.com/css?family=Corben:400&display=swap&subset=latin-ext with fonts.css
    https://fonts.googleapis.com/icon?family=Material+Icons with icons.css
    And so on.
  7. Repeat this with other request URLs the game might need.

After this, make sure the fonts are displaying correctly just like they are on the live web version.

Responsive Design Mode and Mobile Elements

Some games will have mobile controls, loading different assets.

Unlike traditional plugins, HTML5 allows games to be played on both Desktop and Mobile. This means that some games will implement Responsive Design elements so games work better on mobile platforms. This can load new assets such as the pages, scripts, elements, images, etc.

To check whether a game has these elements, play the game both in desktop and Responsive mode. On Basilisk in the developer console, enable Responsive Design Mode, then on the Responsive menu enable Touch Events, and make sure to reload the page as these elements might not have been loaded on Desktop mode. Use the Rotate button to test, as some games do not allow you to play in a certain orientation and will load warning messages.

Make sure to skim through the entire game where these elements might show up, like parts with game controls or menus.

YouTube Games

See HTML5 Curation/YouTube Games.

Troubleshooting

HTTPS Removal

Don't be surprised if it doesn't work at first, HTML5 games are relatively stable and mostly work, but a common occurrence is the game refusing to load assets.

This most likely is because of https requests inside the code of the game calling for files on the live web and failing, instead of http which calls local files. You will need to find and replace all instances of https with http in the game files. You might need to repeat this step multiple times for different parts of the game, due to most games being muiltiassets, they will only call certain parts that are needed during sections of gameplay.

To streamline and simplify the process, we suggest using Notepad++ and its Find in Files function, where you can input the Directory that points to the content folder of your curation, and then click Replace in Files where it will search in all the game files each instance and replace it.

Doing this process once is not always enough, so if the game continues to not load assets, you'll probably need to do it multiple times. You'll need to download more files before replacing https again.

In rare cases, you may have https requests coming from an obfuscated file. In these cases you will need to deobfuscate the code. There are online tools that can help with this.

This is a really common form of modification for HTML5 games, but it is minor enough that games with altered https requests don't really need to be marked as Hacked. Note that this rule only applies to text files (such as HTML and JS files); you must always mark a game as Hacked if you edit binary files (such as SWFs).

Missing Assets

While curating, there might be a few missing files, so to get them we can use cURLsDownloader.

  • If MAD4FP isn't able to download certain files, or they are missing while testing without it, go to the Logs tab, click on Copy 404 URLs, create a .txt file, paste and save.
  • If Basilisk is having trouble running the application, run the game on the live web with the network tab open, and play the game as if you were curating it as normal. After finishing, copy all cURLs, create a .txt file, paste and save.

Next, drag & drop the file onto cURLsDownloader.bat. Copy the contents of the Downloads folder outputted by cURLsDownloader, select the Open Folder button on your curation in the Curate tab, and paste the folder into the content folder of your curation. For more information about cURLsDownloader, be sure to read the included manual.

Clean-up of Junk Files

Since MAD4FP downloads every file requested by the game that still exists on the live web, you can get a lot of files that are unnecessary for the game to work. Be careful not to enter pages outside of the game as it will download them too, best way to prevent this is by knowing where this happens inside the game.

Even with these precautions, you will download junk from other services the website uses outside of the game. After deleting them, make sure the games still work without them.

Broken Or Non-Functional Games

Some games might require a certain browser we do not support or features not available in the browsers we have. While we are now able to support most HTML5 games, there are still some that may not be curatable. The most common example of this is HTML5 games that only work in a mobile browser. While we may be able to support these games in the future, they are currently unable to be properly added to Flashpoint.

When dealing with a game we currently can't support, the best option (if possible) is to run the game on the live web with the network tab open, and playing the game as if you were curating it as normal. After finishing, copy all cURLs, create a .txt file, paste and save. Next, drag & drop the file onto cURLsDownloader.bat. Copy the contents of the Downloads folder outputted by cURLsDownloader, select the Open Folder button on your curation in the Curate tab, and paste the folder into the content folder of your curation.

Upload this curation to #curator-lounge on our Discord server for safekeeping, as it might be able to work in the future.

Wrapping It Up

First, make sure that you have thoroughly tested your curation and followed the Curation Format. Scroll down in the Curate tab and click the Export button at the bottom of your curation to save it as a .7z file. After you've exported the curation, you can find it by clicking the Exported Curations button on the Curate tab (as long as you didn't choose to save it somewhere else). Once you have the file, submit it to the Flashpoint Submission System. An explanation of how the site works is available here.

After you have uploaded your curation to the website, a Curator will check it. This can take some time, so please be patient. You will be pinged in the #fpfss-notifications channel about whether or not your submission was approved, and if any changes need to be made.

Congratulations! Your submitted game/animation will appear in the next version of Flashpoint.