HTML5 Curation: Difference between revisions

From Flashpoint Datahub
Jump to navigation Jump to search
(Placeholder)
 
(9 intermediate revisions by 4 users not shown)
Line 1: Line 1:
In this guide I’ll explain how to curate HTML5 games. This will only cover games that don’t require a persistent server connection.
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.


== Recognizing an HTML5 game ==
The following page is a tutorial on how to curate HTML5 games to add to Flashpoint.


Without looking at a web page’s source, there’s no definitive way to tell if you’re dealing with an HTML5 game. You can however easily discard Flash by whether a lego brick-shaped plug-in icon is displayed to the left of the address bar. The same goes for any technologies that make use of browser plugins (e.g. Java).
== Before You Start ==


[[File:PluginIcon.PNG|plugin]]
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.


== Required software ==
== Identifying HTML5 Games ==


These will be required to perform the curation process:
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.


* [https://bluemaxima.org/flashpoint/downloads/ Flashpoint Core] (Optional, recommended)
To confirm this, press F12 to open the Developer Tools of your browser and click the Network tab. Look for a .html file, likely with the filename "index.html". 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.
* [https://eternallybored.org/misc/wget/ wget for Windows]


The guide below will explain how to use them.
'''Make sure to always use http:// instead of https:// to make sure Flashpoint grabs files from the fake Internet instead of the real one!'''


== Curation ==
== Grabbing The Game From The Internet ==


In order to curate an HTML5 game, we first want to retrieve all the URLs required by the specific game we’re dealing with.
Use cURLsDownloader to create a content folder with your Launch Command. Simply copy the Launch Command's URL, open cURLsDownloader, paste in the URL, and hit Enter.


There’s two ways to do so:
== Moving The Game Into Flashpoint ==


* Using a web debugging proxy like Fiddler or Charles Proxy
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.
* Using the browser’s console


I personally prefer using Charles Proxy, I also use it for curating Flash games, which requests are not displayed in the browser’s console. I like its interface and it allows you to view the directory hierarchy of all HTTP requests.
Copy the content folder outputted by cURLsDownloader, select the "Open Folder" button on your curation in the Curate tab, and paste the folder into the "content" folder in your curation.


For the purposes of this guide I’m going to keep it simple and stick to Firefox’s console, which should be similar enough to that of Chrome. If you do opt for a debugging proxy it’s imperative to clear the browser’s cache EVERY time you attempt to capture the game’s requests.
Test your game with the "Run" button. Don't be surprised if it doesn't work at first, because 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 described [[Curation Tutorial#Multi-Asset_Games|here]].


I’ll illustrate each step with an example of a real HTML5 game. I’m going to attempt to curate Google’s snake clone that you get by performing a search for “snake”.
Alternatively, if you don't want to jump back and forth between getting 404s and downloading them, you can use [[MAD4FP]]. Please be careful when using this, as it downloads every file requested by the game that still exists on the live web, meaning you can get a lot of files that are unnecessary for the game to work.


Here’s our prey:
== Wrapping It Up ==


[[File:Snake.png|screenshot]]
Follow the proper [[Curation Format]], just like with any curation.


Let’s start off by opening the console, we can easily do this by pressing '''Ctrl+Shift+I''' or by right clicking anywhere in the page and then selecting “Inspect”. Then navigate to the “Network” tab.
Pack everything into a single .7z or .zip file and submit it to the #other-game-curations channel of the Flashpoint Discord. Use the HTML5 emoji when submitting.
 
If any requests are already shown, click on the “Clear” icon to get a fresh start. While this tab is selected, our browser will record all requests made by the page and display them as a list.
 
Refresh the page, this will cause it to make a bunch of requests to display the page. As the game loads, a bunch more requests will be made.
 
Now, here’s where it gets tricky because most HTML5 games won’t request all of the files it needs at once but rather will request them sort of on-demand.
 
Imagine a game that has multiple stages, and stage two uses a different music track, it may not request it until that stage starts. Depending on the game though, it is sometimes possible to retrieve a list of most if not all of the files it needs by exploring the contents of other files it requests.
 
This could be an XML or JSON file that lists the music track to be used for each stage, for example. However, I won’t get into detail for now. This game does not require any of that.
 
Play around with the game until no more requests are made or you feel satisfied. Then look for a button named “HAR”, it should be in the top right of the editor in Firefox, download icon in Chrome. Click it and select “Save everything as HAR”.
 
This file contains the data of all the requests listed in the console. You can quickly extract all the requested URLs by opening the file in a text editor (i.e. notepad) and copy/pasting the contents in the left text box shown [https://jsfiddle.net/XXLuigiMario/pxcmew9t/show here].
 
Copy the URLs from the right and save them in a new text file in its own dedicated folder.
 
At this point, make sure you have a copy of Flashpoint for testing. Flashpoint Core is recommended but any version can be used.
 
Next up, we’ll need to use a tool called wget. Chances are you have heard about it before, you can download it for Windows [https://eternallybored.org/misc/wget/ here].
 
Save it in the same folder as the text file with the URLs, then open a command line window. To do so, simply press '''Win+R''', type “cmd” and then '''Enter'''.
 
Type “cd”, without quotes, followed by the path to the folder where you saved your text file and '''Enter'''. Example: cd C:\Users\Foo\Game\
 
Then enter “wget -x -i filename.txt” and let it do its thing. Once all files have been downloaded, copy the resulting folder(s) to the “htdocs” folder in your Flashpoint directory, you will find it under a folder named “Server”.
 
Navigate into a folder named “FPSoftware” next to where you found “Server”, find an executable for a web browser named Basilisk in it and run it. Copy the base URL of the game into its address bar and press '''Enter'''.
 
If the game works then you’re almost done! :)

Revision as of 21:18, 20 October 2020

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.

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

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.

To confirm this, press F12 to open the Developer Tools of your browser and click the Network tab. Look for a .html file, likely with the filename "index.html". 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.

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

Use cURLsDownloader to create a content folder with your Launch Command. Simply copy the Launch Command's URL, open cURLsDownloader, paste in the URL, and hit Enter.

Moving The Game Into Flashpoint

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 HTML5 games.

Copy the content folder outputted by cURLsDownloader, select the "Open Folder" button on your curation in the Curate tab, and paste the folder into the "content" folder in your curation.

Test your game with the "Run" button. Don't be surprised if it doesn't work at first, because 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 described here.

Alternatively, if you don't want to jump back and forth between getting 404s and downloading them, you can use MAD4FP. Please be careful when using this, as it downloads every file requested by the game that still exists on the live web, meaning you can get a lot of files that are unnecessary for the game to work.

Wrapping It Up

Follow the proper Curation Format, just like with any curation.

Pack everything into a single .7z or .zip file and submit it to the #other-game-curations channel of the Flashpoint Discord. Use the HTML5 emoji when submitting.

Retrieved from "https://flashpointarchive.org/w/index.php?title=HTML5_Curation&oldid=3369"