@playcraft/build 0.0.2

package/templates/__modules__.js

@@ -0,0 +1,47 @@
+var loadModules = function (modules, urlPrefix, doneCallback) { // eslint-disable-line no-unused-vars
+
+    if (typeof modules === "undefined" || modules.length === 0) {
+        // caller may depend on callback behaviour being async
+        setTimeout(doneCallback);
+    } else {
+        let remaining = modules.length;
+        const moduleLoaded = () => {
+            if (--remaining === 0) {
+                doneCallback();
+            }
+        };
+
+        modules.forEach(function (m) {
+            pc.WasmModule.setConfig(m.moduleName, {
+                glueUrl: urlPrefix + m.glueUrl,
+                wasmUrl: urlPrefix + m.wasmUrl,
+                fallbackUrl: urlPrefix + m.fallbackUrl
+            });
+
+            if (!m.hasOwnProperty('preload') || m.preload) {
+                if (m.moduleName === 'BASIS') {
+                    // preload basis transcoder
+                    pc.basisInitialize();
+                    moduleLoaded();
+                } else if (m.moduleName === 'DracoDecoderModule') {
+                    // preload draco decoder
+                    if (pc.dracoInitialize) {
+                        // 1.63 onwards
+                        pc.dracoInitialize();
+                        moduleLoaded();
+                    } else {
+                        // 1.62 and earlier
+                        pc.WasmModule.getInstance(m.moduleName, () => { moduleLoaded(); });
+                    }
+                } else {
+                    // load remaining modules in global scope
+                    pc.WasmModule.getInstance(m.moduleName, () => { moduleLoaded(); });
+                }
+            } else {
+                moduleLoaded();
+            }
+        });
+    }
+};
+
+window.loadModules = loadModules;

package/templates/__settings__.template.js

@@ -0,0 +1,20 @@
+window.ASSET_PREFIX = "";
+window.SCRIPT_PREFIX = "";
+window.SCENE_PATH = "{{SCENE_PATH}}";
+window.CONTEXT_OPTIONS = {
+    'antialias': {{ANTIALIAS}},
+    'alpha': false,
+    'preserveDrawingBuffer': {{PRESERVE_DRAWING_BUFFER}},
+    'deviceTypes': [`webgl2`, `webgl1`],
+    'powerPreference': "{{POWER_PREFERENCE}}"
+};
+window.SCRIPTS = {{SCRIPTS}};
+window.CONFIG_FILENAME = "config.json";
+window.INPUT_SETTINGS = {
+    useKeyboard: {{USE_KEYBOARD}},
+    useMouse: {{USE_MOUSE}},
+    useGamepads: {{USE_GAMEPAD}},
+    useTouch: {{USE_TOUCH}}
+};
+pc.script.legacy = {{USE_LEGACY_SCRIPTS}};
+window.PRELOAD_MODULES = {{PRELOAD_MODULES}};

package/templates/__start__.js

@@ -0,0 +1,332 @@
+(function () {
+    // Shared Lib
+    var CANVAS_ID = 'application-canvas';
+
+    // Needed as we will have edge cases for particular versions of iOS
+    // returns null if not iOS
+    var getIosVersion = function () {
+        if (/iP(hone|od|ad)/.test(navigator.platform)) {
+            var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
+            var version = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
+            return version;
+        }
+
+        return null;
+    };
+
+    var lastWindowHeight = window.innerHeight;
+    var lastWindowWidth = window.innerWidth;
+    var windowSizeChangeIntervalHandler = null;
+
+    var pcBootstrap = {
+        reflowHandler: null,
+        iosVersion: getIosVersion(),
+
+        createCanvas: function () {
+            var canvas = document.createElement('canvas');
+            canvas.setAttribute('id', CANVAS_ID);
+            canvas.setAttribute('tabindex', 0);
+
+            // Disable I-bar cursor on click+drag
+            canvas.onselectstart = function () { return false; };
+
+            // Disable long-touch select on iOS devices
+            canvas.style['-webkit-user-select'] = 'none';
+
+            document.body.appendChild(canvas);
+
+            return canvas;
+        },
+
+
+        resizeCanvas: function (app, canvas) {
+            canvas.style.width = '';
+            canvas.style.height = '';
+            app.resizeCanvas(canvas.width, canvas.height);
+
+            var fillMode = app._fillMode;
+
+            if (fillMode === pc.FILLMODE_NONE || fillMode === pc.FILLMODE_KEEP_ASPECT) {
+                if ((fillMode === pc.FILLMODE_NONE && canvas.clientHeight < window.innerHeight) || (canvas.clientWidth / canvas.clientHeight >= window.innerWidth / window.innerHeight)) {
+                    canvas.style.marginTop = Math.floor((window.innerHeight - canvas.clientHeight) / 2) + 'px';
+                } else {
+                    canvas.style.marginTop = '';
+                }
+            }
+
+            lastWindowHeight = window.innerHeight;
+            lastWindowWidth = window.innerWidth;
+
+            // Work around when in landscape to work on iOS 12 otherwise
+            // the content is under the URL bar at the top
+            if (this.iosVersion && this.iosVersion[0] <= 12) {
+                window.scrollTo(0, 0);
+            }
+        },
+
+        reflow: function (app, canvas) {
+            this.resizeCanvas(app, canvas);
+
+            // Poll for size changes as the window inner height can change after the resize event for iOS
+            // Have one tab only, and rotate from portrait -> landscape -> portrait
+            if (windowSizeChangeIntervalHandler === null) {
+                windowSizeChangeIntervalHandler = setInterval(function () {
+                    if (lastWindowHeight !== window.innerHeight || lastWindowWidth !== window.innerWidth) {
+                        this.resizeCanvas(app, canvas);
+                    }
+                }.bind(this), 100);
+
+                // Don't want to do this all the time so stop polling after some short time
+                setTimeout(function () {
+                    if (!!windowSizeChangeIntervalHandler) {
+                        clearInterval(windowSizeChangeIntervalHandler);
+                        windowSizeChangeIntervalHandler = null;
+                    }
+                }, 2000);
+            }
+        }
+    };
+
+    // Expose the reflow to users so that they can override the existing
+    // reflow logic if need be
+    window.pcBootstrap = pcBootstrap;
+})();
+
+
+(function () {
+        // template varants
+    var LTC_MAT_1 = [];
+    var LTC_MAT_2 = [];
+
+    // varants
+    var canvas = pcBootstrap.createCanvas();
+    var app = new pc.AppBase(canvas);
+
+    function initCSS() {
+        if (document.head.querySelector) {
+            // css media query for aspect ratio changes
+            // TODO: Change these from private properties
+            var css = `@media screen and (min-aspect-ratio: ${app._width}/${app._height}) {
+                #application-canvas.fill-mode-KEEP_ASPECT {
+                    width: auto;
+                    height: 100%;
+                    margin: 0 auto;
+                }
+            }`;
+            document.head.querySelector('style').innerHTML += css;
+        }
+
+        // Configure resolution and resize event
+        if (canvas.classList) {
+            canvas.classList.add(`fill-mode-${app.fillMode}`);
+        }
+    }
+
+    function displayError(html) {
+        var div = document.createElement('div');
+        div.innerHTML = `<table style="background-color: #8CE; width: 100%; height: 100%;">
+        <tr>
+            <td align="center">
+                <div style="display: table-cell; vertical-align: middle;">
+                    <div style="">${html}</div>
+                </div>
+            </td>
+        </tr>
+    </table>`;
+        document.body.appendChild(div);
+    }
+
+    function createGraphicsDevice(callback) {
+        var deviceOptions = window.CONTEXT_OPTIONS ? window.CONTEXT_OPTIONS : {};
+
+        if (typeof window.Promise === 'function') {
+            var LEGACY_WEBGL = 'webgl';
+            var deviceTypes = [...deviceOptions.deviceTypes, LEGACY_WEBGL];
+
+            var gpuLibPath = window.ASSET_PREFIX ? (window.ASSET_PREFIX.replace(/\/$/g, '') + '/') : '';
+
+            // new graphics device creation function with promises
+            var gfxOptions = {
+                deviceTypes: deviceTypes,
+                glslangUrl: gpuLibPath + 'glslang.js',
+                twgslUrl: gpuLibPath + 'twgsl.js',
+                powerPreference: deviceOptions.powerPreference,
+                antialias: deviceOptions.antialias !== false,
+                alpha: deviceOptions.alpha === true,
+                preserveDrawingBuffer: !!deviceOptions.preserveDrawingBuffer
+            };
+        
+            pc.createGraphicsDevice(canvas, gfxOptions).then((device) => {
+                callback(device);
+            }).catch((e) => {
+                console.error('Device creation error:', e);
+                callback(null);
+            })
+        } else {
+            var igl1 = deviceOptions.deviceTypes.indexOf('webgl1');
+            var igl2 = deviceOptions.deviceTypes.indexOf('webgl2');
+            
+            // old webgl graphics device creation
+            var options = {
+                powerPreference: deviceOptions.powerPreference,
+                antialias: deviceOptions.antialias !== false,
+                alpha: deviceOptions.transparentCanvas !== false,
+                preserveDrawingBuffer: !!deviceOptions.preserveDrawingBuffer,
+                preferWebGl2: igl2 > igl1
+            };
+
+            if (pc.platform.browser && !!navigator.xr) {
+                options.xrCompatible = true;
+            }
+
+            callback(new pc.WebglGraphicsDevice(canvas, options));
+        }
+    }
+
+    function initApp(device) {
+        try {
+            var createOptions = new pc.AppOptions();
+            createOptions.graphicsDevice = device;
+
+            createOptions.componentSystems = [
+                pc.RigidBodyComponentSystem,
+                pc.CollisionComponentSystem,
+                pc.JointComponentSystem,
+                pc.AnimationComponentSystem,
+                pc.AnimComponentSystem,
+                pc.ModelComponentSystem,
+                pc.RenderComponentSystem,
+                pc.CameraComponentSystem,
+                pc.LightComponentSystem,
+                pc.script.legacy ? pc.ScriptLegacyComponentSystem : pc.ScriptComponentSystem,
+                pc.AudioSourceComponentSystem,
+                pc.SoundComponentSystem,
+                pc.AudioListenerComponentSystem,
+                pc.ParticleSystemComponentSystem,
+                pc.ScreenComponentSystem,
+                pc.ElementComponentSystem,
+                pc.ButtonComponentSystem,
+                pc.ScrollViewComponentSystem,
+                pc.ScrollbarComponentSystem,
+                pc.SpriteComponentSystem,
+                pc.LayoutGroupComponentSystem,
+                pc.LayoutChildComponentSystem,
+                pc.ZoneComponentSystem,
+                pc.GSplatComponentSystem,
+            ].filter(Boolean);
+
+            createOptions.resourceHandlers = [
+                pc.RenderHandler,
+                pc.AnimationHandler,
+                pc.AnimClipHandler,
+                pc.AnimStateGraphHandler,
+                pc.ModelHandler,
+                pc.MaterialHandler,
+                pc.TextureHandler,
+                pc.TextHandler,
+                pc.JsonHandler,
+                pc.AudioHandler,
+                pc.ScriptHandler,
+                pc.SceneHandler,
+                pc.CubemapHandler,
+                pc.HtmlHandler,
+                pc.CssHandler,
+                pc.ShaderHandler,
+                pc.HierarchyHandler,
+                pc.FolderHandler,
+                pc.FontHandler,
+                pc.BinaryHandler,
+                pc.TextureAtlasHandler,
+                pc.SpriteHandler,
+                pc.TemplateHandler,
+                pc.ContainerHandler,
+                pc.GSplatHandler
+            ].filter(Boolean);
+
+            createOptions.elementInput = new pc.ElementInput(canvas, {
+                useMouse: INPUT_SETTINGS.useMouse,
+                useTouch: INPUT_SETTINGS.useTouch
+            });
+            createOptions.keyboard = INPUT_SETTINGS.useKeyboard ? new pc.Keyboard(window) : null;
+            createOptions.mouse = INPUT_SETTINGS.useMouse ? new pc.Mouse(canvas) : null;
+            createOptions.gamepads = INPUT_SETTINGS.useGamepads ? new pc.GamePads() : null;
+            createOptions.touch = INPUT_SETTINGS.useTouch && pc.platform.touch ? new pc.TouchDevice(canvas) : null;
+            createOptions.assetPrefix = window.ASSET_PREFIX || '';
+            createOptions.scriptPrefix = window.SCRIPT_PREFIX || '';
+            createOptions.scriptsOrder = window.SCRIPTS || [];
+            createOptions.soundManager = new pc.SoundManager();
+            createOptions.lightmapper = pc.Lightmapper;
+            createOptions.batchManager = pc.BatchManager;
+            createOptions.xr = pc.XrManager;
+
+            app.init(createOptions);
+            return true;
+
+        } catch (e) {
+            displayError('Could not initialize application. Error: ' + e);
+            console.error(e);
+            return false;
+        }
+    }
+
+    function configure() {
+        app.configure(window.CONFIG_FILENAME, (err) => {
+            if (err) {
+                console.error(err);
+                return;
+            }
+
+            initCSS();
+
+            if (LTC_MAT_1.length && LTC_MAT_2.length && app.setAreaLightLuts.length === 2) {
+                app.setAreaLightLuts(LTC_MAT_1, LTC_MAT_2);
+            }
+
+            // do the first reflow after a timeout because of
+            // iOS showing a squished iframe sometimes
+            setTimeout(() => {
+                pcBootstrap.reflow(app, canvas);
+                pcBootstrap.reflowHandler = function () {
+                    pcBootstrap.reflow(app, canvas);
+                };
+        
+                window.addEventListener('resize', pcBootstrap.reflowHandler, false);
+                window.addEventListener('orientationchange', pcBootstrap.reflowHandler, false);
+
+                app.preload(() => {
+                    app.scenes.loadScene(window.SCENE_PATH, (err) => {
+                        if (err) {
+                            console.error(err);
+                            return;
+                        }
+
+                        app.start();
+                    })
+                })
+            });
+        });
+    }
+
+    function main() {
+        createGraphicsDevice((device) => {
+            if (!device) {
+                return;
+            }
+
+            if (!initApp(device)) {
+                return;
+            }
+
+            if (window.PRELOAD_MODULES.length) {
+                loadModules(window.PRELOAD_MODULES, window.ASSET_PREFIX, () => {
+                    configure(() => {
+                        console.timeEnd('start');
+                    });
+                })
+            } else {
+                configure();
+            }
+        });
+    }
+    main();
+})(); // Add scope to avoid polluting window scope

package/templates/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover' />
+    <meta charset='utf-8'>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <link rel="manifest" href="manifest.json">
+    <style></style>
+    <title>{{PROJECT_NAME}}</title>
+    <script src="playcanvas-stable.min.js"></script>
+    <script src="__settings__.js"></script>
+</head>
+<body>
+    <script src="__modules__.js"></script>
+    <script src="__start__.js"></script>
+    <script src="__loading__.js"></script>
+</body>
+</html>

package/templates/manifest.json

@@ -0,0 +1 @@
+{"short_name":"Roll a Ball","name":"Roll a Ball","start_url":"","display":"fullscreen","icons":[{"src":"thumbs/180.jpg","sizes":"180x180","type":"image/jpeg"},{"src":"thumbs/360.jpg","sizes":"360x360","type":"image/jpeg"},{"src":"thumbs/540.jpg","sizes":"540x540","type":"image/jpeg"},{"src":"thumbs/720.jpg","sizes":"720x720","type":"image/jpeg"}]}