Gestion du code des URI de données longs

Question

J'utilise des données URI, base64 pour ajouter des images et des vidéos à mon jeu, mais j'ai découvert que si je veux créer un jeu avec plusieurs vidéos, chaque vidéo comportera plus de 500 lignes de code, alors existe-t-il une bonne méthode ? Il est recommandé de gérer ce type de fichier, ce que j'ai réellement fait a été de créer un fichier Mixin et de créer plusieurs fonctions qui renvoient base64.

export default{
    stage1(){
        return "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAFkAdtZGF0AAADAAYF///........."
    },
    stage2(){
        return "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAFkAdtZGF0AAADAAYF///........."
    },
}

Answer 1

Je recommande d'utiliser un bundler comme (webpack, parcel, rollup, browserify, etc.), vous pouvez programmer dans plusieurs fichiers et avant le déploiement, le bundler fusionnera tous les fichiers en un seul fichier < em>( et le réduira) .

En utilisant un bundler comme webpack vous pouvez créer un fichier json contenant toutes les dataurls comme :

// filename data.json
{
    "video1": "data:video/mp4;base64,AAAA...", 
    "video2": "data:video/mp4;base64,AAAA...", 
    "video3": "data:video/mp4;base64,AAAA...",
    // ...
}

Dans le script d'application :

import videoData from './data.json';

 ...
     stage1(){
         return videoData.video1;
     }
     stage2(){
         return videoData.video2;
     }
 ...

Et dans le fichier d'application, vous pouvez importer le fichier json et il sera intégré à l'action de construction du bundler. Et créez un fichier unique qui contient tous les fichiers de l'application.

Pour plus d'informations sur webpack et comment configurer votre projet consultez la documentation . C'est trop long de le décrire dans une réponse, et il existe déjà de bons articles/vidéos à ce sujet. (mais vous pouvez également utiliser n'importe quel autre bundler)

Ma réponse vous a orienté dans la bonne direction.

Mise à jour :

Un petit projet de démonstration (si vous avez node et npm installés)  :

Installez ces packages en utilisant npm

• html-inline-script-webpack-plugin
• html-webpack-plugin
• Forfait Réseau
• webpack-cli

Créez un fichier de configuration de base pour webpack :

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, "scripts/app.js"),
    output: {
        path: path.resolve(__dirname, './dist'),
    },
    module:{
        rules: [{
            test: /\.(mp4|png)/,
            type: 'asset/inline'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new HtmlInlineScriptPlugin(),
    ],
};

Voici le code de l'application démo :

// app.js
import Phaser from './phaser.min.js';

import videoFile from '../media/video.mp4';
import imageFile from '../media/demo.png';

let base64ImageFile = imageFile;
let base64VideoFile = videoFile;

let config = {
    scene: { 
        preload: function(){
            this.textures.addBase64('demo', base64ImageFile);
            this.load.video('video', base64VideoFile);
        },
        create: function() { 
            this.add.text(10, 10, 'DEMO')
                .setOrigin(0); 
            this.add.image(10, 30, 'demo')
                .setScale(.25)
                .setOrigin(0);
            this.add.video(300, 30, 'video')
                .setScale(.5)
                .setOrigin(0);
        } 
    }
};

new Phaser.Game(config);

La structure du projet de démonstration est la suivante :

Cela créera uniquement un fichier HTML de sortie, tous les autres fichiers seront intégrés.