GBF Animation Player

Web page to play Granblue Fantasy Animations.
Click Here to access it.

Older versions of the Animation Players were originally based and modified from the chinese wiki animation player, itself based on the Granblue Fantasy Gacha page preview.

[!IMPORTANT]
This project reuse data from the Asset Lookup. As such, if you intend to keep an up-to-date version, it's recommended to also keep an up-to-date version of this other project.

Front-End

There are two pages:

• The main page, index.html.
• The demo page, demo.html, for developers interested in integrating the player in another page.

index.html is using assets and codes from GBFML.

[!NOTE]
These pages are static and are currently hosted on Github Pages, but it can technically be hosted anywhere.

Three of the JSON files in the json folder are also used:

• config.json is the first file loaded upon opening the page. It contains various constants, the layout of the index and settings of the Animation Player.
• changelog.json is loaded next. It contains the timestamp of the last update and a list of recently updated elements.
• data.json is loaded along with config.json and contains the asset catalog and more.

Back-End

Another JSON file is used for update purposes:

• manual_constants.json contains constant values used by the Updater, loaded and set on boot. They are in this separate file for maintainability and clarity.

More JSON files not specified here might appear in this folder, for development or testing purpose.

Folder Structure

The project requires GBFML to be alongside it.
It can also benefit from having GBFAL too.
The folder structure on the server is as such:

Root Folder/
├── GBFAP/
├── GBFML/
└── GBFAL/ (Optional)

If you wish to run a test server with Python for example, uses python -m http.server in the Root Folder.

Requirements

Some third party libraries used by GBF are also required by the player as a result.
You can find them in the js/vendor folder.
They are:

• Createjs.
• RequireJS.
• Backbone.js.
• Underscore.js.

Additionaly, the player in its purest form as presented in the demo.html file uses GBFML js/util.js.

Tools

The tools folder got some scripts intended for debugging:

• list_name.py will go through all main animations to try to attempt to make a list of animation names, to find missing ones. Manual checking is recommended after.
• tester.py go through all animations to look for specific terms, to ensure player compability.

Those scripts must run from inside the folder.

updater.py

This script is in charge of updating the JSON files.

[!CAUTION]
Using it can be time and bandwidth consuming.

Updater Requirements

• Python 3.13.
• Run pip install -r requirements.txt in a command prompt.
• See requirements.txt for a list of third-party modules.

Usage

GBFAP Updater v5.13
usage: updater.py [-h] [-r] [-u UPDATE [UPDATE ...]] [-c] [-d [DOWNLOAD ...]] [-nc] [-fs]
                  [-al PATH] [-dg]

Animation Updater v5.13 for GBFAP https://mizagbf.github.io/GBFAP/

options:
  -h, --help            show this help message and exit

primary:
  main commands to update the data.

  -r, --run             search for new content.
  -u, --update UPDATE [UPDATE ...]
                        update given elements.
  -c, --classes         update new classes.
  -d, --download [DOWNLOAD ...]
                        download all assets. Can specific IDs. Time and Disk space consuming.

settings:
  commands to alter the updater behavior.

  -nc, --nochange       disable update of the New category of changelog.json.
  -fs, --fixsummon      update all summons default classes.
  -al, --gbfal PATH     import data.json from GBFAL.
  -dg, --debug          enable the debug infos in the progress string.

[!TIP]
For an "every day" use case, you'll only need to:
Use -r after game updates.
Use -u for element uncaps or if an older NPC got new arts, with their IDs.
It's recommended to add -al followed by the path or url towards a GBFAL data.json, as it will automatically detect uncaps and fetch other datas from it.

Pause

You can pause updater.py with a simple CTRL+C. It opens a CLI letting you save, exit or resume with text commands.

Task System

The Updater uses wrappers around Asyncio Tasks to execute code.
Tasks/Functions calls can be queued into the Task Manager. There are 5 queues available, the first one having the highest priority.
The Task Manager itself won't run more than 90 Tasks concurrently (The number itself can be changed in the code). In the same way, the Updater is limited to 80 concurrent requests.
When a Task or the Updater judges more Task are needed, they will be queued too. That's why the number of Tasks will likely grow when executing the Updater.
It's designed to limit the memory usage while keeping the Updater always busy, to not have idle/dead times.

Additional Notes

• For testing, just run python-m http.server in a terminal, in the parent folder of the project, with GBFML on the side.
• GBFCP is the CORS Proxy used to fetch assets on the Github Page version.

Hosting

You might be interested in hosting your own copy.
There are three configurations provided in the included config.json file for you to play with. You can select which configuration to use by change the value of use_game_config.
Or for testing and debugging, in the URL parameter. Example: ?config=test.

[!IMPORTANT]
The sprite sheets cross-origin is automatically set to Anonymous if use_game_config is different from local. CTRL+F Anonymous to find the relevant part in js/loader.js if you need to change this behavior.

With a CORS Proxy

[!TIP]
This is the current way it's hosted on Github Pages.

The name of the configuration is proxy.

With this method:

• No GBF Assets are hosted.
• A proxy server is used to work around CORS policies.

Pros:

• Requires little effort to maintain.
• Little bandwidth and space requirement for the page itself.

Cons:

• Requires an extra server to act as a CORS Proxy between the page and GBF.
• Adds extra latency as a result.
• The bandwidth cost will take effect on the CORS Proxy server.

[!NOTE]
Audio assets are still fetched from the official servers in this configuration.

Setup:

1. Copy/Download/Clone this repo.
2. Setup your CORS Proxy of choise. Make sure its own CORS policy only allows access from your website. CORS Anywhere is an option, or you can use my custom solution, GBFCP (Be sure to modify its CORS Url).
3. Change the corsProxy in the configuration to the address of your proxy.
4. If you aren't using GBFCP, you might need to change testUri to another path. Any file the Proxy is able to fetch is fine. This is to test if the Proxy is working. If you don't need it, set it to null.

Hosting the Assets

[!CAUTION]
Prepare a lot of disk space. I don't know how much, at least 30~40 GB, if not more.

The name of the configuration is local.

Pros:

• Faster and not reliant on GBF being available (It will persist even after an eventual EoS).

Cons:

• Requires lot of disk space.

Setup:

1. Copy/Clone this repo.
2. Run python updater.py --download to download all the assets. (The script will ask you to confirm by typing yes).

[!CAUTION]
You'll need to run python updater.py --download after every update, but it won't re-download what's already on disk.
This also means if, for whatever reason, an old file is updated on the game side, the updater won't update it.
You can also pass specific IDs after the parameter if you only want to download some.

For Testing

[!TIP]
For testing and development purpose.

The name of the configuration is test.
This is what I use during development.

I use it alongside GBFCP using python app.py -debug to start a Proxy on port 8001.

If you're interested in tinkering locally with the project, this is the recomm