[Vuejs]-How can I distribute the two pieces of a game engine in an efficient way?

by

0👍

✅

Here’s the solution I ended up coming up with (basically option #3 from above, just slightly modified):

  1. Create build system for the engine that generates a engine.js file where the contents of the file is stored in the format of:

    let engineCode = 'engineCodeHere';
let sharedCode = 'code shared between engine and editor goes here';

  2. import the engine.js file into the vue editor and on initial load, put the code into <script> tags

    const engineTag = document.createElement('script');
const sharedTag = document.createElement('script');

engineTag.id = 'engineCode';
sharedTag.id = 'sharedCode';
engineTag.innerHTML = engineCode;
sharedTag.innerHTML = sharedCode;

document.body.appendChild(engineTag);
document.body.appendChild(sharedTag);

engineCode = null;
sharedCode = null;

    once they are imported as script tags the original variables are cleared so we’re not story duplicate data in memory.

  3. Now, not only do I have access to the runnable js code as if I had imported it normally, but I also have the added benefit of being able to get that code as text so I can use it when packaging the final game "executable."

    let engineText = document.getElementById('engineCode').innerHTML;
let sharedText = document.getElementById('sharedCode').innerHTML;

This will allow me to pack the engine just a single time, instead of once as JS and once as text. For added efficiency I can even hold off creating the engine tag until the game is run in the editor to save on resources.

Leave a comment