Merge pull request #282 from Insality/example_rework

Example rework
2025-06-27 10:27:47 +02:00 · 2024-10-17 02:03:35 +03:00 · 2024-10-17 02:03:35 +03:00 · 4d29363678
commit 4d29363678
parent 032eb4aac5 dd41aab962
373 changed files with 41957 additions and 37839 deletions
--- a/deployer_build_stats.csv
+++ b/deployer_build_stats.csv
@ -1,20 +0,0 @@
-date,sha,version,build_size,build_time,platform,mode,is_cache_using,commits_count
-2022-02-28T19:06:43Z,3b329f9c25c9672e4030edb039b0225fa46f7ce1,0.8.521,4356,68,armv7-android,debug,true,521
-2022-02-28T19:14:56Z,3b329f9c25c9672e4030edb039b0225fa46f7ce1,0.8.521,4356,51,armv7-android,debug,true,521
-2022-02-28T19:16:23Z,3b329f9c25c9672e4030edb039b0225fa46f7ce1,0.8.521,4356,11,armv7-android,debug,true,521
-2022-02-28T19:19:46Z,3b329f9c25c9672e4030edb039b0225fa46f7ce1,0.8.521,4356,11,armv7-android,debug,true,521
-2022-02-28T19:22:51Z,3b329f9c25c9672e4030edb039b0225fa46f7ce1,0.8.521,4356,11,armv7-android,debug,true,521
-2022-03-12T10:01:30Z,d0f3d6641a08b0d6b719b13017aa85907d1667e5,0.8.564,2200,44,js-web,release,true,564
-2022-08-29T18:27:58Z,b2643ebd268b15884363efd17724e689279946f1,0.9.589,2316,45,js-web,release,true,589
-2022-08-29T18:46:47Z,13003e472169cbd261e703eca7b133adf64a24f7,0.9.592,2316,40,js-web,release,true,592
-2022-09-09T17:55:42Z,072507cc9e715541bdee7636d2e5eeeb3c22a57d,0.10.603,2340,43,js-web,release,true,603
-2022-09-09T18:00:07Z,072507cc9e715541bdee7636d2e5eeeb3c22a57d,0.10.603,2340,5,js-web,release,true,603
-2023-07-05T20:19:22Z,d0062c2a78e618871ebb4c8ee66b1509b763f069,0.10.671,3292,12,x86_64-linux,headless,true,671
-2023-07-13T18:37:07Z,1cbe57376397a8352bbafcc67de0b6f95ae37b35,0.10.682,2496,53,js-web,release,true,682
-2023-07-13T19:31:47Z,ea185622702e6691275187741b1e2ee0c7f079ec,0.11.686,2452,51,js-web,release,true,686
-2023-07-15T12:56:18Z,556e1a9bae620e2df290b10287fa8d0f64d47293,0.11.690,2468,51,js-web,release,true,690
-2023-08-05T16:02:55Z,628723386eb3875f7190d079a2e7c510d044a311,0.11.692,2456,40,js-web,release,true,692
-2023-08-05T16:31:19Z,37fff52aa59feb20f761ef4d340d9f677743d54b,0.11.693,2456,43,js-web,release,true,693
-2023-08-05T16:41:25Z,d7dd4a86b81d73d345ad7e136de9c2c488bc4d8b,0.11.694,2452,43,js-web,release,true,694
-2023-10-20T08:23:33Z,9132dc477b645d674ec21efbfcf85f48ef0ea8a6,0.11.718,2544,47,js-web,release,true,718
-2024-10-15T16:54:05Z,ea80c874f6c0ea175b317d01ac45c567db9179c7,0.11.0,1840,24,js-web,release,true,796
--- a/docs/druid/archive/archive_files.json
+++ b/docs/druid/archive/archive_files.json
@ -1 +1 @@
-{"content":[{"name":"game.projectc","size":4141,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":23248,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":608384,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":26065,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}
+{"content":[{"name":"game.projectc","size":4491,"pieces":[{"name":"game0.projectc","offset":0}]},{"name":"game.arci","size":11968,"pieces":[{"name":"game0.arci","offset":0}]},{"name":"game.arcd","size":3549174,"pieces":[{"name":"game0.arcd","offset":0},{"name":"game1.arcd","offset":2097152}]},{"name":"game.dmanifest","size":13396,"pieces":[{"name":"game0.dmanifest","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game0.public.der","offset":0}]}],"total_size":3579191}
--- a/docs/druid/archive/game.arcd0
+++ b/docs/druid/archive/game.arcd0
--- a/docs/druid/archive/game.arci0
+++ b/docs/druid/archive/game.arci0
--- a/docs/druid/archive/game.dmanifest0
+++ b/docs/druid/archive/game.dmanifest0
--- a/docs/druid/archive/game0.arcd
+++ b/docs/druid/archive/game0.arcd
--- a/docs/druid/archive/game0.arci
+++ b/docs/druid/archive/game0.arci
--- a/docs/druid/archive/game0.dmanifest
+++ b/docs/druid/archive/game0.dmanifest
--- a/docs/druid/archive/game0.projectc
+++ b/docs/druid/archive/game0.projectc
@ -1,24 +1,25 @@
 [project]
-title = druid
-version = 0.11.718
+title = Druid
+version = 1.0.0
 write_log = 0
 compress_archive = 1
 publisher = Insality
-developer = Insality
-commit_sha = 9132dc477b645d674ec21efbfcf85f48ef0ea8a6
-build_date = 2023-10-20T08:23:33Z
-title_as_file_name = druid
+developer = Maksim Tuprikov
+custom_resources = /example/locales
+commit_sha = 3579370287f00a1a03e89dbb01a2a5b953e83991
+build_date = 2024-10-16T22:59:05Z
+title_as_file_name = Druid

 [display]
-width = 600
-height = 900
+width = 1920
+height = 1080
 high_dpi = 1
 samples = 0
 fullscreen = 0
 update_frequency = 0
 swap_interval = 1
 vsync = 1
-display_profiles = /example/custom.display_profilesc
+display_profiles = /builtins/render/default.display_profilesc
 dynamic_orientation = 1
 display_device_info = 0

@ -51,7 +52,7 @@ velocity_threshold = 1
 max_fixed_timesteps = 2

 [bootstrap]
-main_collection = /example/example.collectionc
+main_collection = /example/druid.collectionc
 render = /builtins/render/default.renderc

 [graphics]
@ -59,8 +60,9 @@ default_texture_min_filter = linear
 default_texture_mag_filter = linear
 max_draw_calls = 128
 max_characters = 8192
+max_font_batches = 128
 max_debug_vertices = 10000
-texture_profiles = /example/custom.texture_profiles
+texture_profiles = /builtins/graphics/default.texture_profiles
 verify_graphics_calls = 0
 memory_size = 512

@ -84,7 +86,7 @@ max_resources = 1024
 repeat_delay = 0.5
 repeat_interval = 0.2
 gamepads = /builtins/input/default.gamepadsc
-game_binding = /input/game.input_bindingc
+game_binding = /builtins/input/all.input_bindingc
 use_accelerometer = 0

 [sprite]
@ -123,13 +125,14 @@ pre_renderered_icons = 0
 bundle_identifier = example.unnamed
 bundle_name = 
 infoplist = /builtins/manifests/ios/Info.plist
+privacymanifest = /builtins/manifests/ios/PrivacyInfo.xcprivacy
 default_language = en
 localizations = en

 [android]
-version_code = 718
+version_code = 806
 minimum_sdk_version = 19
-target_sdk_version = 33
+target_sdk_version = 34
 package = com.insality.druid
 gcm_sender_id = 
 manifest = /builtins/manifests/android/AndroidManifest.xml
@ -139,10 +142,12 @@ immersive_mode = 0
 display_cutout = 1
 debuggable = 0
 proguard = 
+extract_native_libs = 1

 [osx]
 app_icon = 
 infoplist = /builtins/manifests/osx/Info.plist
+privacymanifest = /builtins/manifests/osx/PrivacyInfo.xcprivacy
 bundle_identifier = example.unnamed
 bundle_name = 
 bundle_version = 1
@ -156,7 +161,7 @@ app_icon =
 custom_heap_size = 0
 heap_size = 64
 htmlfile = /builtins/manifests/web/engine_template.html
-cssfile = /example/light_theme.css
+cssfile = /builtins/manifests/web/dark_theme.css
 splash_image = /media/druid_logo.png
 archive_location_prefix = archive
 archive_location_suffix = 
@ -164,17 +169,14 @@ engine_arguments = --verify-graphics-calls=false
 wasm_streaming = 0
 show_fullscreen_button = 0
 show_made_with_defold = 0
-show_console_banner = 1
-scale_mode = fit
+show_console_banner = 0
+scale_mode = stretch

 [particle_fx]
 max_count = 0
 max_emitter_count = 0
 max_particle_count = 0

-[iap]
-auto_finish_transactions = 1
-
 [network]
 http_timeout = 0
 ssl_certificates = 
@ -198,6 +200,7 @@ sleep_between_server_updates = 0
 [liveupdate]
 settings = /liveupdate.settings
 enabled = 1
+mount_on_start = 1

 [tilemap]
 max_count = 0
@ -206,6 +209,7 @@ max_tile_count = 0
 [engine]
 run_while_iconified = 0
 fixed_update_frequency = 60
+max_time_step = 0.5

 [druid]
 no_auto_input = 0
@ -223,5 +227,13 @@ input_scroll_up = mouse_wheel_up
 input_scroll_down = mouse_wheel_down

 [native_extension]
-app_manifest = /example/game.appmanifest
+app_manifest = 
+
+[saver]
+autosave_timer = 2
+
+[lang]
+path = /example/locales
+langs = en,ru,es,de,fr,ja,pt,it,kr,zh
+default = es

--- a/docs/druid/archive/game0.public.der
+++ b/docs/druid/archive/game0.public.der
--- a/docs/druid/archive/game1.arcd
+++ b/docs/druid/archive/game1.arcd
--- a/docs/druid/dmloader.js
+++ b/docs/druid/dmloader.js
@ -1,3 +1,93 @@
+/*
+*     'archive_location_filter':
+*         Filter function that will run for each archive path.
+*
+*     'unsupported_webgl_callback':
+*         Function that is called if WebGL is not supported.
+*
+*     'engine_arguments':
+*         List of arguments (strings) that will be passed to the engine.
+*
+*     'custom_heap_size':
+*         Number of bytes specifying the memory heap size.
+*
+*     'disable_context_menu':
+*         Disables the right-click context menu on the canvas element if true.
+*
+*     'retry_time':
+*         Pause before retry file loading after error.
+*
+*     'retry_count':
+*         How many attempts we do when trying to download a file.
+*
+*     'can_not_download_file_callback':
+*         Function that is called if you can't download file after 'retry_count' attempts.
+*
+*     'exe_name':
+*         Executable name which used for find right binary to load
+*
+*     'resize_window_callback':
+*         Function that is called when resize/orientationchanges/focus events happened
+*/
+var CUSTOM_PARAMETERS = {
+    archive_location_filter: function( path ) {
+        return ("archive" + path + "");
+    },
+    engine_arguments: ["--verify-graphics-calls=false",],
+    custom_heap_size: 67108864,
+    full_screen_container: "#canvas-container",
+    disable_context_menu: true,
+    retry_time:1.0,
+    retry_count:10,
+    unsupported_webgl_callback: function() {
+        var e = document.getElementById("webgl-not-supported");
+        e.style.display = "block";
+    },
+    resize_window_callback: function() {
+        var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+        var buttonHeight = 0;
+        var prevInnerWidth = -1;
+        var prevInnerHeight = -1;
+        
+        
+        // Hack for iOS when exit from Fullscreen mode
+        if (is_iOS) {
+            window.scrollTo(0, 0);
+        }
+    
+        var app_container = document.getElementById('app-container');
+        var game_canvas = document.getElementById('canvas');
+        var innerWidth = window.innerWidth;
+        var innerHeight = window.innerHeight - buttonHeight;
+        if (prevInnerWidth == innerWidth && prevInnerHeight == innerHeight)
+        {
+            return;
+        }
+        prevInnerWidth = innerWidth;
+        prevInnerHeight = innerHeight;
+        var width = 1920;
+        var height = 1080;
+        var targetRatio = width / height;
+        var actualRatio = innerWidth / innerHeight;
+    
+    
+        //Stretch
+        width = innerWidth;
+        height = innerHeight;
+    
+    
+    
+        var dpi = 1;
+    
+        dpi = window.devicePixelRatio || 1;
+    
+        app_container.style.width = width + "px";
+        app_container.style.height = height + buttonHeight + "px";
+        game_canvas.width = Math.floor(width * dpi);
+        game_canvas.height = Math.floor(height * dpi);
+    }
+}
+
 // file downloader
 // wraps XMLHttpRequest and adds retry support and progress updates when the
 // content is gzipped (gzipped content doesn't report a computable content length
@ -9,31 +99,36 @@ var FileLoader = {
    },
    // do xhr request with retries
    request: function(url, method, responseType, currentAttempt) {
-        if (typeof method === 'undefined') throw "No method specified";
-        if (typeof method === 'responseType') throw "No responseType specified";
+        if (typeof method === 'undefined') throw TypeError("No method specified");
+        if (typeof method === 'responseType') throw TypeError("No responseType specified");
        if (typeof currentAttempt === 'undefined') currentAttempt = 0;
        var obj = {
            send: function() {
                var onprogress = this.onprogress;
                var onload = this.onload;
                var onerror = this.onerror;
+                var onretry = this.onretry;

                var xhr = new XMLHttpRequest();
+                xhr._loadedSize = 0;
                xhr.open(method, url, true);
                xhr.responseType = responseType;
-                xhr.onprogress = function(e) {
-                    if (onprogress) onprogress(xhr, e);
+                xhr.onprogress = function(event) {
+                    if (onprogress) onprogress(xhr, event, xhr._loadedSize);
+                    xhr._loadedSize = event.loaded;
                };
-                xhr.onerror = function(e) {
+                xhr.onerror = function(event) {
                    if (currentAttempt == FileLoader.options.retryCount) {
-                        if (onerror) onerror(xhr, e);
+                        if (onerror) onerror(xhr, event);
                        return;
                    }
-                    currentAttempt = currentAttempt + 1;
+                    if (onretry) onretry(xhr, event, xhr._loadedSize, currentAttempt);
+                    xhr._loadedSize = 0;
+                    currentAttempt += 1;
                    setTimeout(obj.send.bind(obj), FileLoader.options.retryInterval);
                };
-                xhr.onload = function(e) {
-                    if (onload) onload(xhr, e);
+                xhr.onload = function(event) {
+                    if (onload) onload(xhr, event);
                };
                xhr.send(null);
            }
@ -60,29 +155,21 @@ var FileLoader = {
        request.send();
    },
    // Do HTTP GET request
-    // onprogress(loaded, total)
+    // onprogress(loadedDelta)
    // onerror(error)
    // onload(response)
-    load: function(url, responseType, estimatedSize, onprogress, onerror, onload) {
+    // onretry(loadedSize, currentAttempt)
+    load: function(url, responseType, onprogress, onerror, onload, onretry) {
        var request = FileLoader.request(url, "GET", responseType);
-        request.onprogress = function(xhr, e) {
-            if (e.lengthComputable) {
-                onprogress(e.loaded, e.total);
-                return;
-            }
-            var contentLength = xhr.getResponseHeader('content-length');
-            var size = contentLength != undefined ? contentLength : estimatedSize;
-            if (size) {
-                onprogress(e.loaded, size);
-            } else {
-                onprogress(e.loaded, e.loaded);
-            }
+        request.onprogress = function(xhr, e, ls) {
+            var delta = e.loaded - ls;
+            onprogress(delta);
        };
        request.onerror = function(xhr, e) {
            onerror("Error loading '" + url + "' (" + e + ")");
        };
        request.onload = function(xhr, e) {
-            if (xhr.readyState === 4) {
+            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var res = xhr.response;
                    if (responseType == "json" && typeof res === "string") {
@ -95,113 +182,145 @@ var FileLoader = {
                }
            }
        };
+        request.onretry = function(xhr, event, loadedSize, currentAttempt) {
+            onretry(loadedSize, currentAttempt);
+        }
        request.send();
    }
 };


 var EngineLoader = {
-    wasm_size: 2000000,
-    wasmjs_size: 250000,
+    wasm_size: 2374239,
+    wasmjs_size: 340441,
    asmjs_size: 4000000,
+    wasm_instantiate_progress: 0,

-    stream_wasm: false,
+    stream_wasm: "false" === "true",

-    loadAndInstantiateWasmAsync: function(src, fromProgress, toProgress, callback) {
-        FileLoader.load(src, "arraybuffer", EngineLoader.wasm_size,
-            function(loaded, total) { Progress.calculateProgress(fromProgress, toProgress, loaded, total); },
+    updateWasmInstantiateProgress: function(totalDownloadedSize) {
+        EngineLoader.wasm_instantiate_progress = totalDownloadedSize * 0.1;
+    },
+
+    // load and instantiate .wasm file using XMLHttpRequest
+    loadAndInstantiateWasmAsync: function(src, imports, successCallback) {
+        FileLoader.load(src, "arraybuffer",
+            function(delta) { 
+                ProgressUpdater.updateCurrent(delta);
+            },
            function(error) { throw error; },
            function(wasm) {
-                Module.instantiateWasm = function(imports, successCallback) {
-                    var wasmInstantiate = WebAssembly.instantiate(new Uint8Array(wasm), imports).then(function(output) {
-                        successCallback(output.instance);
-                    }).catch(function(e) {
-                        console.log('wasm instantiation failed! ' + e);
-                        throw e;
-                    });
-                    return {}; // Compiling asynchronously, no exports.
+                if (wasm.byteLength != EngineLoader.wasm_size) {
+                    throw "Invalid wasm size. Expected: " + EngineLoader.wasm_size + ", actual: " + wasm.byteLength;
                }
-                callback();
+                var wasmInstantiate = WebAssembly.instantiate(new Uint8Array(wasm), imports).then(function(output) {
+                    successCallback(output.instance);
+                }).catch(function(e) {
+                    console.log('wasm instantiation failed! ' + e);
+                    throw e;
+                });
+            },
+            function(loadedDelta, currentAttempt){
+                ProgressUpdater.updateCurrent(-loadedDelta);
            });
    },

-    setupWasmStreamAsync: async function(src, fromProgress, toProgress) {
+    // stream and instantiate .wasm file
+    streamAndInstantiateWasmAsync: async function(src, imports, successCallback) {
        // https://stackoverflow.com/a/69179454
        var fetchFn = fetch;
        if (typeof TransformStream === "function" && ReadableStream.prototype.pipeThrough) {
            async function fetchWithProgress(path) {
                const response = await fetch(path);
-                // May be incorrect if compressed
-                var contentLength = response.headers.get("Content-Length");
-                if (!contentLength){
-                    contentLength = EngineLoader.wasm_size;
+                if (response.ok) {
+                    const ts = new TransformStream({
+                        transform (chunk, controller) {
+                            ProgressUpdater.updateCurrent(chunk.byteLength);
+                            controller.enqueue(chunk);
+                        }
+                    });
+
+                    return new Response(response.body.pipeThrough(ts), response);
+                } else {
+                    return new Response(null, response);
                }
-                const total = parseInt(contentLength, 10);
-
-                let bytesLoaded = 0;
-                const ts = new TransformStream({
-                    transform (chunk, controller) {
-                        bytesLoaded += chunk.byteLength;
-                        Progress.calculateProgress(fromProgress, toProgress, bytesLoaded, total);
-                        controller.enqueue(chunk)
-                    }
-                });
-
-                return new Response(response.body.pipeThrough(ts), response);
            }
            fetchFn = fetchWithProgress;
        }

-        Module.instantiateWasm = function(imports, successCallback) {
-            WebAssembly.instantiateStreaming(fetchFn(src), imports).then(function(output) {
-                Progress.calculateProgress(fromProgress, toProgress, 1, 1);
-                successCallback(output.instance);
-            }).catch(function(e) {
-                console.log('wasm streaming instantiation failed! ' + e);
-                throw e;
-            });
-            return {}; // Compiling asynchronously, no exports.
-        }
+        WebAssembly.instantiateStreaming(fetchFn(src), imports).then(function(output) {
+            ProgressUpdater.updateCurrent(EngineLoader.wasm_instantiate_progress);
+            successCallback(output.instance);
+        }).catch(function(e) {
+            console.log('wasm streaming instantiation failed! ' + e);
+            console.log('Fallback to wasm loading');
+            EngineLoader.loadAndInstantiateWasmAsync(src, imports, successCallback);
+        });
    },

    // instantiate the .wasm file either by streaming it or first loading and then instantiate it
-    // https://github.com/emscripten-core/emscripten/blob/master/tests/manual_wasm_instantiate.html#L170
+    // https://github.com/emscripten-core/emscripten/blob/main/test/manual_wasm_instantiate.html
    loadWasmAsync: function(exeName) {
-        if (EngineLoader.stream_wasm && (typeof WebAssembly.instantiateStreaming === "function")) {
-            EngineLoader.setupWasmStreamAsync(exeName + ".wasm", 10, 50);
-            EngineLoader.loadAndRunScriptAsync(exeName + '_wasm.js', EngineLoader.wasmjs_size, 0, 10);
-        }
-        else {
-            EngineLoader.loadAndInstantiateWasmAsync(exeName + ".wasm", 0, 40, function() {
-                EngineLoader.loadAndRunScriptAsync(exeName + '_wasm.js', EngineLoader.wasmjs_size, 40, 50);
-            });
-        }
+        Module.instantiateWasm = function(imports, successCallback) {
+            if (EngineLoader.stream_wasm && (typeof WebAssembly.instantiateStreaming === "function")) {
+                EngineLoader.streamAndInstantiateWasmAsync(exeName + ".wasm", imports, successCallback);
+            }
+            else {
+                EngineLoader.loadAndInstantiateWasmAsync(exeName + ".wasm", imports, successCallback);
+            }
+            return {}; // Compiling asynchronously, no exports.
+        };
+        EngineLoader.loadAndRunScriptAsync(exeName + '_wasm.js');
    },

    loadAsmJsAsync: function(exeName) {
-        EngineLoader.loadAndRunScriptAsync(exeName + '_asmjs.js', EngineLoader.asmjs_size, 0, 50);
+        EngineLoader.loadAndRunScriptAsync(exeName + '_asmjs.js');
    },

    // load and start engine script (asm.js or wasm.js)
-    loadAndRunScriptAsync: function(src, estimatedSize, fromProgress, toProgress) {
-        FileLoader.load(src, "text", estimatedSize,
-            function(loaded, total) { Progress.calculateProgress(fromProgress, toProgress, loaded, total); },
+    loadAndRunScriptAsync: function(src) {
+        FileLoader.load(src, "text",
+            function(delta) {
+                ProgressUpdater.updateCurrent(delta);
+            },
            function(error) { throw error; },
            function(response) {
                var tag = document.createElement("script");
                tag.text = response;
                document.body.appendChild(tag);
+            },
+            function(loadedDelta, currentAttempt){
+                ProgressUpdater.updateCurrent(-loadedDelta);
            });
    },

-    // load engine (asm.js or wasm.js + wasm)
+    // left as entrypoint for backward capability
+    // start loading archive_files.json
+    // after receiving it - start loading engine and data concurrently
    load: function(appCanvasId, exeName) {
-        Progress.addProgress(Module.setupCanvas(appCanvasId));
-        if (Module['isWASMSupported']) {
-            EngineLoader.loadWasmAsync(exeName);
-        } else {
-            EngineLoader.loadAsmJsAsync(exeName);
+        ProgressView.addProgress(Module.setupCanvas(appCanvasId));
+        CUSTOM_PARAMETERS['exe_name'] = exeName;
+
+        FileLoader.options.retryCount = CUSTOM_PARAMETERS["retry_count"];
+        FileLoader.options.retryInterval = CUSTOM_PARAMETERS["retry_time"] * 1000;
+        if (typeof CUSTOM_PARAMETERS["can_not_download_file_callback"] === "function") {
+            GameArchiveLoader.addFileDownloadErrorListener(CUSTOM_PARAMETERS["can_not_download_file_callback"]);
        }
+        // Load and assemble archive
+        GameArchiveLoader.addFileLoadedListener(Module.onArchiveFileLoaded);
+        GameArchiveLoader.addArchiveLoadedListener(Module.onArchiveLoaded);
+        GameArchiveLoader.setFileLocationFilter(CUSTOM_PARAMETERS["archive_location_filter"]);
+        GameArchiveLoader.loadArchiveDescription('/archive_files.json');
+
+        // move resize callback setup here to make possible to override callback
+        // from outside of dmloader.js
+        if (typeof CUSTOM_PARAMETERS["resize_window_callback"] === "function") {
+            var callback = CUSTOM_PARAMETERS["resize_window_callback"]
+            callback();
+            window.addEventListener('resize', callback, false);
+            window.addEventListener('orientationchange', callback, false);
+            window.addEventListener('focus', callback, false);
+        }        
    }
 }

@ -232,9 +351,6 @@ var GameArchiveLoader = {
    _onArchiveLoadedListeners:[],        // signature: void
    _onFileDownloadErrorListeners: [],   // signature: name

-    _currentDownloadBytes: 0,
-    _totalDownloadBytes: 0,
-
    _archiveLocationFilter: function(path) { return "split" + path; },

    cleanUp: function() {
@ -244,13 +360,10 @@ var GameArchiveLoader = {
        this._onGameArchiveLoaderCompletedListeners = [];
        this._onAllTargetsBuiltListeners = [];
        this._onFileDownloadErrorListeners = [];
-
-        this._currentDownloadBytes = 0;
-        this._totalDownloadBytes = 0;
    },

    addListener: function(list, callback) {
-        if (typeof callback !== 'function') throw "Invalid callback registration";
+        if (typeof callback !== 'function') throw TypeError("Invalid callback registration");
        list.push(callback);
    },
    notifyListeners: function(list, data) {
@ -292,22 +405,31 @@ var GameArchiveLoader = {
        FileLoader.load(
            this._archiveLocationFilter(descriptionUrl),
            "json",
-            undefined,
-            function (loaded, total) { },
+            function (delta) { },
            function (error) { GameArchiveLoader.notifyFileDownloadError(descriptionUrl); },
-            function (json) { GameArchiveLoader.onReceiveDescription(json); });
+            function (json) { GameArchiveLoader.onReceiveDescription(json); },
+            function (loadedDelta, currentAttempt) { });
    },

    onReceiveDescription: function(json) {
+        var totalSize = json.total_size;
+        var exeName = CUSTOM_PARAMETERS['exe_name'];
        this._files = json.content;
-        this._totalDownloadBytes = 0;
-        this._currentDownloadBytes = 0;

-        // calculate total download size of all files
-        for(var i=0; i<this._files.length; ++i) {
-            this._totalDownloadBytes += this._files[i].size;
+        var isWASMSupported = Module['isWASMSupported'];
+        if (isWASMSupported) {
+            EngineLoader.loadWasmAsync(exeName);
+            totalSize += EngineLoader.wasm_size + EngineLoader.wasmjs_size;
+        } else {
+            EngineLoader.loadAsmJsAsync(exeName);
+            totalSize += EngineLoader.asmjs_size;
        }
        this.downloadContent();
+        ProgressUpdater.resetCurrent();
+        if (isWASMSupported) {
+            EngineLoader.updateWasmInstantiateProgress(totalSize);
+        }
+        ProgressUpdater.setupTotal(totalSize + EngineLoader.wasm_instantiate_progress);
    },

    downloadContent: function() {
@ -327,30 +449,25 @@ var GameArchiveLoader = {
        }
    },

-    notifyDownloadProgress: function() {
-        Progress.calculateProgress(50, 100, this._currentDownloadBytes, this._totalDownloadBytes);
+    notifyDownloadProgress: function(delta) {
+        ProgressUpdater.updateCurrent(delta);
    },

    downloadPiece: function(file, index) {
        if (index < file.lastRequestedPiece) {
-            throw "Request out of order";
+            throw RangeError("Request out of order: " + file.name + ", index: " + index + ", last requested piece: " + file.lastRequestedPiece);
        }

        var piece = file.pieces[index];
        file.lastRequestedPiece = index;
        file.totalLoadedPieces = 0;

-        var total = 0;
-        var downloaded = 0;
        var url = this._archiveLocationFilter('/' + piece.name);

        FileLoader.load(
-            url, "arraybuffer", undefined,
-            function (loaded, total) {
-                var delta = loaded - downloaded;
-                downloaded = loaded;
-                GameArchiveLoader._currentDownloadBytes += delta;
-                GameArchiveLoader.notifyDownloadProgress();
+            url, "arraybuffer",
+            function (delta) {
+                GameArchiveLoader.notifyDownloadProgress(delta);
            },
            function (error) {
                GameArchiveLoader.notifyFileDownloadError(error);
@ -361,8 +478,10 @@ var GameArchiveLoader = {
                total = piece.dataLength;
                downloaded = piece.dataLength;
                GameArchiveLoader.onPieceLoaded(file, piece);
-                GameArchiveLoader.notifyDownloadProgress();
                piece.data = undefined;
+            },
+            function(loadedDelta, currentAttempt){
+                ProgressUpdater.updateCurrent(-loadedDelta);
            });
    },

@ -373,10 +492,10 @@ var GameArchiveLoader = {
            var start = piece.offset;
            var end = start + piece.data.length;
            if (0 > start) {
-                throw "Buffer underflow";
+                throw RangeError("Buffer underflow. Start: " + start);
            }
            if (end > file.data.length) {
-                throw "Buffer overflow";
+                throw RangeError("Buffer overflow. End : " + end + ", data length: " + file.data.length);
            }
            file.data.set(piece.data, piece.offset);
        }
@ -407,12 +526,11 @@ var GameArchiveLoader = {
            actualSize += file.pieces[i].dataLength;
        }
        if (actualSize != file.size) {
-            throw "Unexpected data size";
+            throw "Unexpected data size: " + file.name + ", expected size: " + file.size + ", actual size: " + actualSize;
        }

        // verify the pieces
        if (file.pieces.length > 1) {
-            var output = file.data;
            var pieces = file.pieces;
            for (i=0; i<pieces.length; ++i) {
                var item = pieces[i];
@ -422,13 +540,13 @@ var GameArchiveLoader = {
                if (0 < i) {
                    var previous = pieces[i - 1];
                    if (previous.offset + previous.dataLength > start) {
-                        throw "Segment underflow";
+                        throw RangeError("Segment underflow in file: " + file.name + ", offset: " + (previous.offset + previous.dataLength) + " , start: " + start);
                    }
                }
                if (pieces.length - 2 > i) {
                    var next = pieces[i + 1];
                    if (end > next.offset) {
-                        throw "Segment overflow";
+                        throw RangeError("Segment overflow in file: " + file.name + ", offset: " + next.offset + ", end: " + end);
                    }
                }
            }
@ -456,14 +574,42 @@ var GameArchiveLoader = {
 /* Default splash and progress visualisation                             */
 /* ********************************************************************* */

-var Progress = {
+var ProgressView = {
    progress_id: "defold-progress",
    bar_id: "defold-progress-bar",

+    addProgress : function (canvas) {
+        /* Insert default progress bar below canvas */
+        canvas.insertAdjacentHTML('afterend', '<div id="' + ProgressView.progress_id + '" class="canvas-app-progress"><div id="' + ProgressView.bar_id + '" class="canvas-app-progress-bar" style="transform: scaleX(0.0);"></div></div>');
+        ProgressView.bar = document.getElementById(ProgressView.bar_id);
+        ProgressView.progress = document.getElementById(ProgressView.progress_id);
+    },
+
+    updateProgress: function(percentage) {
+        if (ProgressView.bar) {
+            ProgressView.bar.style.transform = "scaleX(" + Math.min(percentage, 100) / 100 + ")";
+        }
+    },
+
+    removeProgress: function () {
+        if (ProgressView.progress.parentElement !== null) {
+            ProgressView.progress.parentElement.removeChild(ProgressView.progress);
+
+            // Remove any background/splash image that was set in runApp().
+            // Workaround for Safari bug DEF-3061.
+            Module.canvas.style.background = "";
+        }
+    }
+};
+
+var ProgressUpdater = {
+    current: 0,
+    total: 1,
+
    listeners: [],

    addListener: function(callback) {
-        if (typeof callback !== 'function') throw "Invalid callback registration";
+        if (typeof callback !== 'function') throw TypeError("Invalid callback registration");
        this.listeners.push(callback);
    },

@ -473,32 +619,64 @@ var Progress = {
        }
    },

+    setupTotal: function (total) {
+        this.total = total;
+    },
+
+    setCurrent: function (current) {
+        this.current = current;
+        var percentage = this.calculateProgress();
+        ProgressView.updateProgress(percentage);
+        this.notifyListeners(percentage);
+    },
+
+    updateCurrent: function (diff) {
+        this.current += diff;
+        var percentage = this.calculateProgress();
+        ProgressView.updateProgress(percentage);
+        this.notifyListeners(percentage);
+    },
+
+    resetCurrent: function () {
+        this.current = 0;
+    },
+
+    complete: function () {
+        this.setCurrent(this.total);
+    },
+
+    calculateProgress: function () {
+        return this.current / this.total * 100;
+    }
+};
+
+/* DEPRECATED!
+* Use ProgressUpdater and ProgressView instead.
+* Left for backward compatability.
+*/
+var Progress = {
+    addListener: function(callback) {
+        ProgressUpdater.addListener(callback);
+    },
+
+    notifyListeners: function(percentage) {
+        // no-op
+    },
+
    addProgress : function (canvas) {
-        /* Insert default progress bar below canvas */
-        canvas.insertAdjacentHTML('afterend', '<div id="' + Progress.progress_id + '" class="canvas-app-progress"><div id="' + Progress.bar_id + '" class="canvas-app-progress-bar" style="width: 0%;"></div></div>');
-        Progress.bar = document.getElementById(Progress.bar_id);
-        Progress.progress = document.getElementById(Progress.progress_id);
+        ProgressView.addProgress(canvas);
    },

    updateProgress: function(percentage) {
-        if (Progress.bar) {
-            Progress.bar.style.width = percentage + "%";
-        }
-        Progress.notifyListeners(percentage);
+        // no-op
    },

    calculateProgress: function (from, to, current, total) {
-        this.updateProgress(from + (current / total) * (to - from));
+        // no-op
    },

    removeProgress: function () {
-        if (Progress.progress.parentElement !== null) {
-            Progress.progress.parentElement.removeChild(Progress.progress);
-
-            // Remove any background/splash image that was set in runApp().
-            // Workaround for Safari bug DEF-3061.
-            Module.canvas.style.background = "";
-        }
+        ProgressView.removeProgress();
    }
 };

@ -512,7 +690,7 @@ var Module = {
    _filesToPreload: [],
    _archiveLoaded: false,
    _preLoadDone: false,
-    _waitingForArchive: false,
+    _isEngineLoaded: false,

    // Persistent storage
    persistentStorage: true,
@ -550,7 +728,6 @@ var Module = {
        var error = errObj || (typeof window.event != "undefined" ? window.event.error : "" ) || err || "Undefined Error";
        var message = "";
        var stack = "";
-        var backtrace = "";

        if (typeof error == "object" && typeof error.stack != "undefined" && typeof error.message != "undefined") {
            stack = String(error.stack);
@ -603,61 +780,14 @@ var Module = {

    /**
    * Module.runApp - Starts the application given a canvas element id
-    *
-    * 'extra_params' is an optional object that can have the following fields:
-    *
-    *     'archive_location_filter':
-    *         Filter function that will run for each archive path.
-    *
-    *     'unsupported_webgl_callback':
-    *         Function that is called if WebGL is not supported.
-    *
-    *     'engine_arguments':
-    *         List of arguments (strings) that will be passed to the engine.
-    *
-    *     'persistent_storage':
-    *         Boolean toggling the usage of persistent storage.
-    *
-    *     'custom_heap_size':
-    *         Number of bytes specifying the memory heap size.
-    *
-    *     'disable_context_menu':
-    *         Disables the right-click context menu on the canvas element if true.
-    *
-    *     'retry_time':
-    *         Pause before retry file loading after error.
-    *
-    *     'retry_count':
-    *         How many attempts we do when trying to download a file.
-    *
-    *     'can_not_download_file_callback':
-    *         Function that is called if you can't download file after 'retry_count' attempts.
    **/
-    runApp: function(appCanvasId, extra_params) {
+    runApp: function(appCanvasId, _) {
+        Module._isEngineLoaded = true;
        Module.setupCanvas(appCanvasId);

-        var params = {
-            archive_location_filter: function(path) { return 'split' + path; },
-            unsupported_webgl_callback: undefined,
-            engine_arguments: [],
-            persistent_storage: true,
-            custom_heap_size: undefined,
-            disable_context_menu: true,
-            retry_time: 1,
-            retry_count: 10,
-            can_not_download_file_callback: undefined,
-        };
+        Module.arguments = CUSTOM_PARAMETERS["engine_arguments"];

-        for (var k in extra_params) {
-            if (extra_params.hasOwnProperty(k)) {
-                params[k] = extra_params[k];
-            }
-        }
-
-        Module.arguments = params["engine_arguments"];
-        Module.persistentStorage = params["persistent_storage"];
-
-        var fullScreenContainer = params["full_screen_container"];
+        var fullScreenContainer = CUSTOM_PARAMETERS["full_screen_container"];
        if (typeof fullScreenContainer === "string") {
            fullScreenContainer = document.querySelector(fullScreenContainer);
        }
@ -667,31 +797,22 @@ var Module = {
            Module.canvas.focus();

            // Add context menu hide-handler if requested
-            if (params["disable_context_menu"])
+            if (CUSTOM_PARAMETERS["disable_context_menu"])
            {
                Module.canvas.oncontextmenu = function(e) {
                    e.preventDefault();
                };
            }
-
-            FileLoader.options.retryCount = params["retry_count"];
-            FileLoader.options.retryInterval = params["retry_time"] * 1000;
-            if (typeof params["can_not_download_file_callback"] === "function") {
-                GameArchiveLoader.addFileDownloadErrorListener(params["can_not_download_file_callback"]);
-            }
-            // Load and assemble archive
-            GameArchiveLoader.addFileLoadedListener(Module.onArchiveFileLoaded);
-            GameArchiveLoader.addArchiveLoadedListener(Module.onArchiveLoaded);
-            GameArchiveLoader.setFileLocationFilter(params["archive_location_filter"]);
-            GameArchiveLoader.loadArchiveDescription('/archive_files.json');
+            Module._preloadAndCallMain();
        } else {
-            Progress.updateProgress(100, "Unable to start game, WebGL not supported");
+            // "Unable to start game, WebGL not supported"
+            ProgressUpdater.complete();
            Module.setStatus = function(text) {
                if (text) Module.printErr('[missing WebGL] ' + text);
            };

-            if (typeof params["unsupported_webgl_callback"] === "function") {
-                params["unsupported_webgl_callback"]();
+            if (typeof CUSTOM_PARAMETERS["unsupported_webgl_callback"] === "function") {
+                CUSTOM_PARAMETERS["unsupported_webgl_callback"]();
            }
        }
    },
@ -703,11 +824,7 @@ var Module = {
    onArchiveLoaded: function() {
        GameArchiveLoader.cleanUp();
        Module._archiveLoaded = true;
-        Progress.updateProgress(100, "Starting...");
-
-        if (Module._waitingForArchive) {
-            Module._preloadAndCallMain();
-        }
+        Module._preloadAndCallMain();
    },

    toggleFullscreen: function(element) {
@ -720,7 +837,6 @@ var Module = {

    preSync: function(done) {
        if (Module.persistentStorage != true) {
-            Module._syncInitial = true;
            done();
            return;
        }
@ -820,26 +936,33 @@ var Module = {

    postRun: [function() {
        if(Module._archiveLoaded) {
-            Progress.removeProgress();
+            ProgressView.removeProgress();
        }
    }],

    _preloadAndCallMain: function() {
-        // If the archive isn't loaded,
-        // we will have to wait with calling main.
-        if (!Module._archiveLoaded) {
-            Module._waitingForArchive = true;
-        } else {
-            Module.preloadAll();
-            Progress.removeProgress();
-            if (Module.callMain === undefined) {
-                Module.noInitialRun = false;
-            } else {
-                Module.callMain(Module.arguments);
+        if (Module._syncInitial || Module.persistentStorage != true) {
+            // If the archive isn't loaded,
+            // we will have to wait with calling main.
+            if (Module._archiveLoaded) {
+                Module.preloadAll();
+                if (Module._isEngineLoaded) {
+                    // "Starting...."
+                    ProgressUpdater.complete();
+                    Module._callMain();
+                }
            }
        }
    },

+    _callMain: function() {
+        ProgressView.removeProgress();
+        if (Module.callMain === undefined) {
+            Module.noInitialRun = false;
+        } else {
+            Module.callMain(Module.arguments);
+        }
+    },
    // Wrap IDBFS syncfs call with logic to avoid multiple syncs
    // running at the same time.
    _startSyncFS: function() {
@ -864,6 +987,26 @@ var Module = {
    },
 };

+// common engine setup
+Module['persistentStorage'] = (typeof window !== 'undefined') && !!(window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB);
+
+Module['INITIAL_MEMORY'] = CUSTOM_PARAMETERS.custom_heap_size;
+
+Module['onRuntimeInitialized'] = function() {
+    Module.runApp("canvas");
+};
+
+Module["locateFile"] = function(path, scriptDirectory)
+{
+    // dmengine*.wasm is hardcoded in the built JS loader for WASM,
+    // we need to replace it here with the correct project name.
+    if (path == "dmengine.wasm" || path == "dmengine_release.wasm" || path == "dmengine_headless.wasm") {
+        path = "Druid.wasm";
+    }
+    return scriptDirectory + path;
+};
+
+
 window.onerror = function(err, url, line, column, errObj) {
    if (typeof Module.ccall !== 'undefined') {
        var errorObject = Module.prepareErrorObject(err, url, line, column, errObj);
--- a/docs/druid/druid.wasm
+++ b/docs/druid/druid.wasm
--- a/docs/druid/druid_asmjs.js
+++ b/docs/druid/druid_asmjs.js
--- a/docs/druid/druid_logo.png
+++ b/docs/druid/druid_logo.png
--- a/docs/druid/druid_wasm.js
+++ b/docs/druid/druid_wasm.js
--- a/docs/druid/index.html
+++ b/docs/druid/index.html
@ -7,7 +7,7 @@
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

-	<title>druid 0.11.718</title>
+	<title>Druid 1.0.0</title>
 	<style type='text/css'>
 	/* Disable user selection to avoid strange bug in Chrome on Windows:
 	* Selecting a text outside the canvas, then clicking+draging would
@ -54,7 +54,7 @@
 		-moz-outline-style: none;
 	}

-	div {
+	body, div {
 		-webkit-tap-highlight-color: rgba(0,0,0,0);
 		-webkit-touch-callout: none;
 		-webkit-user-select: none;
@ -66,7 +66,7 @@

 		.canvas-app-progress {
 		position: absolute;
-		background-color: #d1dbeb;
+		background-color: #394046;
 		height: 6px;
 		margin-top: -6px;
 		width: 100%;
@ -79,6 +79,9 @@
 		background-color: #1a72eb;
 		text-align: center;
 		line-height: 20px;
+		transition: transform 1s ease;
+		transform-origin: left;
+		transform: scaleX(1.0);
 	}
 	.link, .button {
 		font-family: sans-serif;
@ -92,133 +95,54 @@
 	}

 	.buttons-background {
-		background-color: #ffffff;
+		background-color: #1e2226;
 		width: 100%;
 		height: 42px;
 	}

 	body {
-		background-color: #ffffff;
+		background-color: #1e2226;
 	}

 	.canvas-app-container {
-		background: rgba(250,252,255,1);
-		background: -moz-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
-		background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(250,252,255,1)), color-stop(50%, rgba(250,252,255,1)), color-stop(50%, rgba(245,249,255,1)), color-stop(100%, rgba(245,249,255,1)));
-		background: -webkit-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
-		background: -o-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
-		background: -ms-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
-		background: linear-gradient(135deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
-		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafcff', endColorstr='#f5f9ff', GradientType=1 );
+		background: rgba(36,41,46,1);
+		background: -moz-linear-gradient(-45deg, rgba(36,41,46,1) 0%, rgba(36,41,46,1) 49%, rgba(38,43,49,1) 50%, rgba(38,43,49,1) 100%);
+		background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(36,41,46,1)), color-stop(49%, rgba(36,41,46,1)), color-stop(50%, rgba(38,43,49,1)), color-stop(100%, rgba(38,43,49,1)));
+		background: -webkit-linear-gradient(-45deg, rgba(36,41,46,1) 0%, rgba(36,41,46,1) 49%, rgba(38,43,49,1) 50%, rgba(38,43,49,1) 100%);
+		background: -o-linear-gradient(-45deg, rgba(36,41,46,1) 0%, rgba(36,41,46,1) 49%, rgba(38,43,49,1) 50%, rgba(38,43,49,1) 100%);
+		background: -ms-linear-gradient(-45deg, rgba(36,41,46,1) 0%, rgba(36,41,46,1) 49%, rgba(38,43,49,1) 50%, rgba(38,43,49,1) 100%);
+		background: linear-gradient(135deg, rgba(36,41,46,1) 0%, rgba(36,41,46,1) 49%, rgba(38,43,49,1) 50%, rgba(38,43,49,1) 100%);
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#24292e', endColorstr='#262b31', GradientType=1 );
 	}

 	.canvas-app-canvas {
 		background-repeat:no-repeat;
 		background-position: center center;
-		background-size: contain;
 		background-image: url("druid_logo.png");
 	}
-
 	</style>
 </head>

 <body>
-	<div id="running-from-file-warning" style="display: none; margin: 3em;">
-		<h1>Running from local file ⚠️</h1>
-		<p>It seems like you have opened this file by double-clicking on it. In order to test your build in a browser <b>you need to load this file from a web server</b>. You can either upload this file and the rest of the files from a Defold HTML5 bundle to a web hosting service OR host them using a local web server on your home network.</p>
-		<p><a href="https://defold.com/manuals/html5/#testing-html5-build" target="_blank">Learn more about running a local web server in the Defold HTML5 manual</a>.</p>
-	</div>
+
 	<div id="app-container" class="canvas-app-container">
+		<div id="running-from-file-warning" style="display: none; margin: 3em;">
+			<h1>Running from local file ⚠️</h1>
+			<p>It seems like you have opened this file by double-clicking on it. In order to test your build in a browser <b>you need to load this file from a web server</b>. You can either upload this file and the rest of the files from a Defold HTML5 bundle to a web hosting service OR host them using a local web server on your home network.</p>
+			<p><a href="https://defold.com/manuals/html5/#testing-html5-build" target="_blank">Learn more about running a local web server in the Defold HTML5 manual</a>.</p>
+		</div>
+		<div id="webgl-not-supported" style="display: none; margin: 3em;">
+			<h1>WebGL not supported ⚠️</h1>
+			<p>WebGL is not supported by your browser - visit <a href="https://get.webgl.org/">https://get.webgl.org/</a> to learn more.</p>
+		</div>
 		<div id="canvas-container" class="canvas-app-canvas-container">
-			<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="600" height="900"></canvas>
+			<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="1920" height="1080"></canvas>
 		</div>
 		<div class="buttons-background">
 		</div>
 	</div>
 	<!-- -->
 	<script id='engine-loader' type='text/javascript' src="dmloader.js"></script>
-	<!-- -->
-	<script id='engine-setup' type='text/javascript'>
-	var extra_params = {
-		archive_location_filter: function( path ) {
-			return ("archive" + path + "");
-		},
-		engine_arguments: ["--verify-graphics-calls=false",],
-		custom_heap_size: 67108864,
-		full_screen_container: "#canvas-container",
-		disable_context_menu: true
-	}
-
-	Module['INITIAL_MEMORY'] = extra_params.custom_heap_size;
-
-	Module['onRuntimeInitialized'] = function() {
-		Module.runApp("canvas", extra_params);
-	};
-
-	Module["locateFile"] = function(path, scriptDirectory)
-	{
-		// dmengine*.wasm is hardcoded in the built JS loader for WASM,
-		// we need to replace it here with the correct project name.
-		if (path == "dmengine.wasm" || path == "dmengine_release.wasm" || path == "dmengine_headless.wasm") {
-			path = "druid.wasm";
-		}
-		return scriptDirectory + path;
-	};
-
-	
-
-	var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-	var buttonHeight = 0;
-	var prevInnerWidth = -1;
-	var prevInnerHeight = -1;
-	function resize_game_canvas() {
-		// Hack for iOS when exit from Fullscreen mode
-		if (is_iOS) {
-			window.scrollTo(0, 0);
-		}
-
-		var app_container = document.getElementById('app-container');
-		var game_canvas = document.getElementById('canvas');
-		var innerWidth = window.innerWidth;
-		var innerHeight = window.innerHeight - buttonHeight;
-		if (prevInnerWidth == innerWidth && prevInnerHeight == innerHeight)
-		{
-			return;
-		}
-		prevInnerWidth = innerWidth;
-		prevInnerHeight = innerHeight;
-		var width = 600;
-		var height = 900;
-		var targetRatio = width / height;
-		var actualRatio = innerWidth / innerHeight;
-	
-	
-	
-		//Fit
-		if (actualRatio > targetRatio) {
-			width = innerHeight * targetRatio;
-			height = innerHeight;
-			app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
-			app_container.style.marginTop = "0px";
-		}
-		else {
-			width = innerWidth;
-			height = innerWidth / targetRatio;
-			app_container.style.marginLeft = "0px";
-			app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
-		}
-	
-	
-		app_container.style.width = width + "px";
-		app_container.style.height = height + buttonHeight + "px";
-		game_canvas.width = width;
-		game_canvas.height = height;
-	}
-	resize_game_canvas();
-	window.addEventListener('resize', resize_game_canvas, false);
-	window.addEventListener('orientationchange', resize_game_canvas, false);
-	window.addEventListener('focus', resize_game_canvas, false);
-	</script>

 	<script id='engine-start' type='text/javascript'>
 		var runningFromFileWarning = document.getElementById("running-from-file-warning");
@ -226,8 +150,7 @@
 			runningFromFileWarning.style.display = "block";
 		}
 		else {
-			EngineLoader.stream_wasm = "false" === "true";
-			EngineLoader.load("canvas", "druid");
+			EngineLoader.load("canvas", "Druid");
 			runningFromFileWarning.parentNode.removeChild(runningFromFileWarning);
 		}
 	</script>
--- a/docs/index.html
+++ b/docs/index.html
@ -40,7 +40,6 @@
  <li><a href="modules/StaticGrid.html">StaticGrid</a></li>
  <li><a href="modules/Text.html">Text</a></li>
  <li><a href="modules/BaseComponent.html">BaseComponent</a></li>
-  <li><a href="modules/PinKnob.html">PinKnob</a></li>
  <li><a href="modules/RichInput.html">RichInput</a></li>
  <li><a href="modules/RichText.html">RichText</a></li>
  <li><a href="modules/Druid.html">Druid</a></li>
@ -109,10 +108,6 @@
 		<td class="name"  nowrap><a href="modules/BaseComponent.html">BaseComponent</a></td>
 		<td class="summary">Basic class for all Druid components.</td>
 	</tr>
-	<tr>
-		<td class="name"  nowrap><a href="modules/PinKnob.html">PinKnob</a></td>
-		<td class="summary">Druid pin knob custom component.</td>
-	</tr>
 	<tr>
 		<td class="name"  nowrap><a href="modules/RichInput.html">RichInput</a></td>
 		<td class="summary">Druid Rich Input custom component.</td>
--- a/docs/modules/BackHandler.html
+++ b/docs/modules/BackHandler.html
@ -56,7 +56,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/BaseComponent.html
+++ b/docs/modules/BaseComponent.html
@ -56,7 +56,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Blocker.html
+++ b/docs/modules/Blocker.html
@ -57,7 +57,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Button.html
+++ b/docs/modules/Button.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Checkbox.html
+++ b/docs/modules/Checkbox.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/CheckboxGroup.html
+++ b/docs/modules/CheckboxGroup.html
@ -57,7 +57,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/DataList.html
+++ b/docs/modules/DataList.html
@ -57,7 +57,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
@ -358,7 +357,7 @@
         The <a href="../modules/Scroll.html#">Scroll</a> instance for Data List component
        </li>
        <li><span class="parameter">grid</span>
-            <span class="types"><span class="type">StaticGrid</span> or <span class="type">DynamicGrid</span></span>
+            <span class="types"><span class="type">StaticGrid</span></span>
         The <a href="../modules/StaticGrid.html#">StaticGrid</a> or <a href="../modules/DynamicGrid.html#">DynamicGrid</a> instance for Data List component
        </li>
        <li><span class="parameter">create_function</span>
@ -552,7 +551,7 @@

    <ul>
        <li><span class="parameter">grid</span>
-            <span class="types"><span class="type">StaticGrid</span> or <span class="type">DynamicGrid</span></span>
+            <span class="types"><span class="type">StaticGrid</span></span>
         <a href="../modules/StaticGrid.html#">StaticGrid</a>, <a href="../modules/DynamicGrid.html#">DynamicGrid</a>
        </li>
    </ul>
--- a/docs/modules/Drag.html
+++ b/docs/modules/Drag.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Druid.html
+++ b/docs/modules/Druid.html
@ -56,7 +56,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/DruidEvent.html
+++ b/docs/modules/DruidEvent.html
@ -56,7 +56,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/DruidInstance.html
+++ b/docs/modules/DruidInstance.html
@ -56,7 +56,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
@ -493,7 +492,7 @@ end
         The Scroll instance for Data List component
        </li>
        <li><span class="parameter">druid_grid</span>
-            <span class="types"><span class="type">StaticGrid</span> or <span class="type">DynamicGrid</span></span>
+            <span class="types"><span class="type">StaticGrid</span></span>
         The <a href="../modules/StaticGrid.html#">StaticGrid</a> or <a href="../modules/DynamicGrid.html#">DynamicGrid</a> instance for Data List component
        </li>
        <li><span class="parameter">create_function</span>
--- a/docs/modules/DynamicGrid.html
+++ b/docs/modules/DynamicGrid.html
@ -57,7 +57,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Helper.html
+++ b/docs/modules/Helper.html
@ -56,7 +56,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Hotkey.html
+++ b/docs/modules/Hotkey.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Hover.html
+++ b/docs/modules/Hover.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Input.html
+++ b/docs/modules/Input.html
@ -58,7 +58,6 @@
  <li><strong>Input</strong></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
@ -605,10 +604,6 @@
            <span class="types"><span class="type">function</span></span>
         (self, button_node) Callback on wrong user input
        </li>
-        <li><span class="parameter">button_style</span>
-            <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
-         Custom button style for input node
-        </li>
    </ul>


--- a/docs/modules/LangText.html
+++ b/docs/modules/LangText.html
@ -57,7 +57,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><strong>LangText</strong></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Layout.html
+++ b/docs/modules/Layout.html
@ -56,7 +56,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><strong>Layout</strong></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Progress.html
+++ b/docs/modules/Progress.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><strong>Progress</strong></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/RadioGroup.html
+++ b/docs/modules/RadioGroup.html
@ -57,7 +57,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><strong>RadioGroup</strong></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/RichInput.html
+++ b/docs/modules/RichInput.html
@ -57,7 +57,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><strong>RichInput</strong></li>
@ -118,6 +117,18 @@
 	<td class="summary">On input field text change to empty string callback(self, input_text)</td>
 	</tr>
 	<tr>
+	<td class="name" nowrap><a href="#cursor_position">cursor_position</a></td>
+	<td class="summary">On input field text change to empty string callback(self, input_text)</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#cursor_text">cursor_text</a></td>
+	<td class="summary">On input field text change to empty string callback(self, input_text)</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#drag">drag</a></td>
+	<td class="summary">On input field text change to empty string callback(self, input_text)</td>
+	</tr>
+	<tr>
 	<td class="name" nowrap><a href="#druid">druid</a></td>
 	<td class="summary">The component druid instance</td>
 	</tr>
@ -126,13 +137,25 @@
 	<td class="summary">On input field text change callback(self, input_text)</td>
 	</tr>
 	<tr>
+	<td class="name" nowrap><a href="#input_text">input_text</a></td>
+	<td class="summary">On input field text change to empty string callback(self, input_text)</td>
+	</tr>
+	<tr>
 	<td class="name" nowrap><a href="#placeholder">placeholder</a></td>
 	<td class="summary">On input field text change to max length string callback(self, input_text)</td>
 	</tr>
 	<tr>
+	<td class="name" nowrap><a href="#placeholder">placeholder</a></td>
+	<td class="summary">On input field text change to empty string callback(self, input_text)</td>
+	</tr>
+	<tr>
 	<td class="name" nowrap><a href="#root">root</a></td>
 	<td class="summary">Root node</td>
 	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#text_position">text_position</a></td>
+	<td class="summary">On input field text change to empty string callback(self, input_text)</td>
+	</tr>
 </table>

 <br/>
@ -356,6 +379,66 @@



+</dd>
+    <dt>
+    <a name = "cursor_position"></a>
+    <strong>cursor_position</strong>
+    </dt>
+    <dd>
+    On input field text change to empty string callback(self, input_text)
+
+
+    <ul>
+        <li><span class="parameter">cursor_position</span>
+            <span class="types"><span class="type">vector3</span></span>
+
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "cursor_text"></a>
+    <strong>cursor_text</strong>
+    </dt>
+    <dd>
+    On input field text change to empty string callback(self, input_text)
+
+
+    <ul>
+        <li><span class="parameter">cursor_text</span>
+            <span class="types"><span class="type">node</span></span>
+
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "drag"></a>
+    <strong>drag</strong>
+    </dt>
+    <dd>
+    On input field text change to empty string callback(self, input_text)
+
+
+    <ul>
+        <li><span class="parameter">drag</span>
+            <span class="types"><span class="type">druid.drag</span></span>
+
+        </li>
+    </ul>
+
+
+
+
+
 </dd>
    <dt>
    <a name = "druid"></a>
@ -396,6 +479,26 @@



+</dd>
+    <dt>
+    <a name = "input_text"></a>
+    <strong>input_text</strong>
+    </dt>
+    <dd>
+    On input field text change to empty string callback(self, input_text)
+
+
+    <ul>
+        <li><span class="parameter">input_text</span>
+            <span class="types"><span class="type">druid.text</span></span>
+
+        </li>
+    </ul>
+
+
+
+
+
 </dd>
    <dt>
    <a name = "placeholder"></a>
@ -416,6 +519,26 @@



+</dd>
+    <dt>
+    <a name = "placeholder"></a>
+    <strong>placeholder</strong>
+    </dt>
+    <dd>
+    On input field text change to empty string callback(self, input_text)
+
+
+    <ul>
+        <li><span class="parameter">placeholder</span>
+            <span class="types"><span class="type">druid.text</span></span>
+
+        </li>
+    </ul>
+
+
+
+
+
 </dd>
    <dt>
    <a name = "root"></a>
@ -436,6 +559,26 @@



+</dd>
+    <dt>
+    <a name = "text_position"></a>
+    <strong>text_position</strong>
+    </dt>
+    <dd>
+    On input field text change to empty string callback(self, input_text)
+
+
+    <ul>
+        <li><span class="parameter">text_position</span>
+            <span class="types"><span class="type">vector3</span></span>
+
+        </li>
+    </ul>
+
+
+
+
+
 </dd>
 </dl>

--- a/docs/modules/RichText.html
+++ b/docs/modules/RichText.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
@ -184,10 +183,6 @@ type druid.rich_text.metrics = {
 	<td class="summary">The component druid instance</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#icon_prefab">icon_prefab</a></td>
-	<td class="summary">The icon prefab node</td>
-	</tr>
-	<tr>
 	<td class="name" nowrap><a href="#root">root</a></td>
 	<td class="summary">The root node of the Rich Text</td>
 	</tr>
@ -513,26 +508,6 @@ Words &lt;nobr&gt;inside tag&lt;/nobr&gt; won't <span class="keyword">break</spa



-</dd>
-    <dt>
-    <a name = "icon_prefab"></a>
-    <strong>icon_prefab</strong>
-    </dt>
-    <dd>
-    The icon prefab node
-
-
-    <ul>
-        <li><span class="parameter">icon_prefab</span>
-            <span class="types"><span class="type">node</span></span>
-
-        </li>
-    </ul>
-
-
-
-
-
 </dd>
    <dt>
    <a name = "root"></a>
--- a/docs/modules/Scroll.html
+++ b/docs/modules/Scroll.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
@ -270,7 +269,7 @@
         <a href="../modules/Scroll.html#">Scroll</a>
        </li>
        <li><span class="parameter">grid</span>
-            <span class="types"><span class="type">StaticGrid</span> or <span class="type">DynamicGrid</span></span>
+            <span class="types"><span class="type">StaticGrid</span></span>
         Druid grid component
        </li>
    </ul>
--- a/docs/modules/Slider.html
+++ b/docs/modules/Slider.html
@ -57,7 +57,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/StaticGrid.html
+++ b/docs/modules/StaticGrid.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Swipe.html
+++ b/docs/modules/Swipe.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Text.html
+++ b/docs/modules/Text.html
@ -58,7 +58,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/docs/modules/Timer.html
+++ b/docs/modules/Timer.html
@ -57,7 +57,6 @@
  <li><a href="../modules/Input.html">Input</a></li>
  <li><a href="../modules/LangText.html">LangText</a></li>
  <li><a href="../modules/Layout.html">Layout</a></li>
-  <li><a href="../modules/PinKnob.html">PinKnob</a></li>
  <li><a href="../modules/Progress.html">Progress</a></li>
  <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
  <li><a href="../modules/RichInput.html">RichInput</a></li>
--- a/druid/annotations.lua
+++ b/druid/annotations.lua
@ -311,7 +311,7 @@ function druid__checkbox_group.set_state(self, indexes, is_instant) end


 ---@class druid.data_list : druid.base_component
---@field grid druid.static_grid|druid.dynamic_grid The Druid Grid component
+---@field grid druid.static_grid The Druid Grid component
 ---@field last_index number The current last index of visual elements
 ---@field on_element_add druid.event On DataList visual element created Event callback(self, index, node, instance)
 ---@field on_element_remove druid.event On DataList visual element created Event callback(self, index)
@ -356,7 +356,7 @@ function druid__data_list.get_index(self, data) end
 --- The @{DataList} constructor
 ---@param self druid.data_list @{DataList}
 ---@param scroll druid.scroll The @{Scroll} instance for Data List component
---@param grid druid.static_grid|druid.dynamic_grid The @{StaticGrid} or @{DynamicGrid} instance for Data List component
+---@param grid druid.static_grid The @{StaticGrid} or @{DynamicGrid} instance for Data List component
 ---@param create_function function The create function callback(self, data, index, data_list). Function should return (node, [component])
 function druid__data_list.init(self, scroll, grid, create_function) end

@ -834,34 +834,6 @@ function druid__lang_text.translate(self, locale_id, a, b, c, d, e, f, g) end
 local druid__layout = {}


---@class druid.pin_knob : druid.base_component
---@field druid druid_instance The component druid instance
---@field is_drag boolean Is currently under user control
---@field node node The pin node
-local druid__pin_knob = {}
-
--- The @{PinKnob} constructor
---@param self druid.pin_knob @{PinKnob}
---@param callback function Callback(self, value) on value changed
---@param template string The template string name
---@param nodes table Nodes table from gui.clone_tree
-function druid__pin_knob.init(self, callback, template, nodes) end
-
--- Set current and min/max angles for component
---@param self druid.pin_knob @{PinKnob}
---@param cur_value number The new value for pin knob
---@param min number The minimum value for pin knob
---@param max number The maximum value for pin knob
---@return druid.pin_knob @{PinKnob}
-function druid__pin_knob.set_angle(self, cur_value, min, max) end
-
--- Set current and min/max angles for component
---@param self druid.pin_knob @{PinKnob}
---@param value number|nil The spin speed multiplier. Default: 1
---@return druid.pin_knob @{PinKnob}
-function druid__pin_knob.set_friction(self, value) end
-
-
 ---@class druid.progress : druid.base_component
 ---@field key string The progress bar direction.
 ---@field max_size number Maximum size of progress bar
@ -948,10 +920,16 @@ function druid__radio_group.set_state(self, index, is_instant) end

 ---@class druid.rich_input
 ---@field cursor node On input field text change to empty string callback(self, input_text)
+---@field cursor_position vector3 On input field text change to empty string callback(self, input_text)
+---@field cursor_text node On input field text change to empty string callback(self, input_text)
+---@field drag druid.drag On input field text change to empty string callback(self, input_text)
 ---@field druid druid_instance The component druid instance
 ---@field input druid.input On input field text change callback(self, input_text)
+---@field input_text druid.text On input field text change to empty string callback(self, input_text)
 ---@field placeholder druid.text On input field text change to max length string callback(self, input_text)
+---@field placeholder druid.text On input field text change to empty string callback(self, input_text)
 ---@field root node Root node
+---@field text_position vector3 On input field text change to empty string callback(self, input_text)
 local druid__rich_input = {}

 --- Set input field text
@ -995,7 +973,6 @@ function druid__rich_input.set_text(self, text) end

 ---@class druid.rich_text : druid.base_component
 ---@field druid druid_instance The component druid instance
---@field icon_prefab node The icon prefab node
 ---@field root node The root node of the Rich Text
 ---@field style druid.rich_text.style Component style params.
 ---@field text_prefab node The text prefab node
@ -1071,7 +1048,7 @@ local druid__scroll = {}

 --- Bind the grid component (Static or Dynamic) to recalculate  scroll size on grid changes
 ---@param self druid.scroll @{Scroll}
---@param grid druid.static_grid|druid.dynamic_grid Druid grid component
+---@param grid druid.static_grid Druid grid component
 ---@return druid.scroll Current scroll instance
 function druid__scroll.bind_grid(self, grid) end

@ -1595,7 +1572,7 @@ function druid_instance.new_checkbox_group(self, nodes, callback, click_nodes) e
 --- Create @{DataList} component
 ---@param self druid_instance
 ---@param druid_scroll druid.scroll The Scroll instance for Data List component
---@param druid_grid druid.static_grid|druid.dynamic_grid The @{StaticGrid} or @{DynamicGrid} instance for Data List component
+---@param druid_grid druid.static_grid The @{StaticGrid} or @{DynamicGrid} instance for Data List component
 ---@param create_function function The create function callback(self, data, index, data_list). Function should return (node, [component])
 ---@return druid.data_list @{DataList} component
 function druid_instance.new_data_list(self, druid_scroll, druid_grid, create_function) end
--- a/example/assets/druid.atlas
+++ b/example/assets/druid.atlas
@ -0,0 +1,40 @@
+images {
+  image: "/example/assets/images/empty.png"
+}
+images {
+  image: "/example/assets/images/icon_cross.png"
+}
+images {
+  image: "/example/assets/images/pixel.png"
+}
+images {
+  image: "/example/assets/images/ui_circle_8.png"
+}
+images {
+  image: "/example/assets/images/ui_circle_16.png"
+}
+images {
+  image: "/example/assets/images/ui_circle_32.png"
+}
+images {
+  image: "/example/assets/images/ui_circle_64.png"
+}
+images {
+  image: "/example/assets/images/ui_rounded_top_32.png"
+}
+images {
+  image: "/example/assets/images/icon_arrow.png"
+}
+images {
+  image: "/example/assets/images/icon_check.png"
+}
+images {
+  image: "/example/assets/images/rect_round2_width1.png"
+}
+images {
+  image: "/example/assets/images/ui_circle_64_blur_8.png"
+}
+images {
+  image: "/example/assets/images/icon_heart.png"
+}
+extrude_borders: 2
--- a/example/assets/druid_logo.atlas
+++ b/example/assets/druid_logo.atlas
@ -0,0 +1,16 @@
+images {
+  image: "/example/assets/images/icon_druid.png"
+}
+images {
+  image: "/example/assets/images/logo_druid.png"
+}
+images {
+  image: "/example/assets/images/sponsor_coffee.png"
+}
+images {
+  image: "/example/assets/images/sponsor_github.png"
+}
+images {
+  image: "/example/assets/images/sponsor_kofi.png"
+}
+extrude_borders: 2
--- a/example/assets/fonts/Exo2-LightItalic.ttf
+++ b/example/assets/fonts/Exo2-LightItalic.ttf
--- a/example/assets/fonts/Exo2-Regular.ttf
+++ b/example/assets/fonts/Exo2-Regular.ttf
--- a/example/assets/fonts/Roboto-Bold.ttf
+++ b/example/assets/fonts/Roboto-Bold.ttf
--- a/example/assets/fonts/Roboto-Regular.ttf
+++ b/example/assets/fonts/Roboto-Regular.ttf
--- a/example/assets/fonts/RobotoCJKSC-Bold.ttf
+++ b/example/assets/fonts/RobotoCJKSC-Bold.ttf
--- a/example/assets/fonts/RobotoCJKSC-Regular.ttf
+++ b/example/assets/fonts/RobotoCJKSC-Regular.ttf
--- a/example/assets/fonts/exo2.ttf
+++ b/example/assets/fonts/exo2.ttf
--- a/example/assets/fonts/game.font
+++ b/example/assets/fonts/game.font
@ -1,17 +0,0 @@
-font: "/example/assets/fonts/exo2.ttf"
-material: "/builtins/fonts/font-df.material"
-size: 40
-antialias: 1
-alpha: 1.0
-outline_alpha: 1.0
-outline_width: 2.0
-shadow_alpha: 1.0
-shadow_blur: 0
-shadow_x: 3.0
-shadow_y: -4.0
-extra_characters: "\342\204\226%;"
-output_format: TYPE_DISTANCE_FIELD
-all_chars: true
-cache_width: 0
-cache_height: 0
-render_mode: MODE_MULTI_LAYER
--- a/example/assets/fonts/game_thin.font
+++ b/example/assets/fonts/game_thin.font
@ -1,17 +0,0 @@
-font: "/example/assets/fonts/Exo2-Regular.ttf"
-material: "/builtins/fonts/font-df.material"
-size: 40
-antialias: 1
-alpha: 1.0
-outline_alpha: 0.0
-outline_width: 0.0
-shadow_alpha: 0.0
-shadow_blur: 0
-shadow_x: 0.0
-shadow_y: 0.0
-extra_characters: ""
-output_format: TYPE_DISTANCE_FIELD
-all_chars: false
-cache_width: 0
-cache_height: 0
-render_mode: MODE_MULTI_LAYER
--- a/example/assets/fonts/game_thin_italic.font
+++ b/example/assets/fonts/game_thin_italic.font
@ -1,17 +0,0 @@
-font: "/example/assets/fonts/Exo2-LightItalic.ttf"
-material: "/builtins/fonts/font-df.material"
-size: 40
-antialias: 1
-alpha: 1.0
-outline_alpha: 0.0
-outline_width: 0.0
-shadow_alpha: 0.0
-shadow_blur: 0
-shadow_x: 0.0
-shadow_y: 0.0
-extra_characters: ""
-output_format: TYPE_DISTANCE_FIELD
-all_chars: false
-cache_width: 0
-cache_height: 0
-render_mode: MODE_MULTI_LAYER
--- a/example/assets/fonts/text_bold.font
+++ b/example/assets/fonts/text_bold.font
--- a/example/assets/fonts/text_regular.font
+++ b/example/assets/fonts/text_regular.font
--- a/example/assets/images/back/back_blue.png
+++ b/example/assets/images/back/back_blue.png
--- a/example/assets/images/back/back_gray.png
+++ b/example/assets/images/back/back_gray.png
--- a/example/assets/images/back/back_green.png
+++ b/example/assets/images/back/back_green.png
--- a/example/assets/images/back/back_red.png
+++ b/example/assets/images/back/back_red.png
--- a/example/assets/images/buttons/button_blue.png
+++ b/example/assets/images/buttons/button_blue.png
--- a/example/assets/images/buttons/button_green.png
+++ b/example/assets/images/buttons/button_green.png
--- a/example/assets/images/buttons/button_red.png
+++ b/example/assets/images/buttons/button_red.png
--- a/example/assets/images/buttons/button_yellow.png
+++ b/example/assets/images/buttons/button_yellow.png
--- a/example/assets/images/empty.png
+++ b/example/assets/images/empty.png
--- a/example/assets/images/icon_arrow.png
+++ b/example/assets/images/icon_arrow.png
--- a/example/assets/images/icon_check.png
+++ b/example/assets/images/icon_check.png
--- a/example/assets/images/icon_cross.png
+++ b/example/assets/images/icon_cross.png
--- a/example/assets/images/icon_druid.png
+++ b/example/assets/images/icon_druid.png
--- a/example/assets/images/icon_heart.png
+++ b/example/assets/images/icon_heart.png
--- a/example/assets/images/kenney.atlas
+++ b/example/assets/images/kenney.atlas
@ -1,71 +0,0 @@
-images {
-  image: "/example/assets/images/back/back_blue.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/back/back_green.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/back/back_red.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/buttons/button_green.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/buttons/button_red.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/buttons/button_yellow.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/empty.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/progress/progress_back.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/progress/progress_fill_yellow.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/radio/check_back_circle.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/radio/check_back_square.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/radio/checkmark.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/radio/tick.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/slider/slider_back.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/slider/slider_move.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/buttons/button_blue.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-images {
-  image: "/example/assets/images/logo.png"
-  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
-}
-margin: 0
-extrude_borders: 2
-inner_padding: 0
--- a/example/assets/images/logo.png
+++ b/example/assets/images/logo.png
--- a/example/assets/images/logo_druid.png
+++ b/example/assets/images/logo_druid.png
--- a/example/assets/images/pixel.png
+++ b/example/assets/images/pixel.png
--- a/example/assets/images/progress/progress_back.png
+++ b/example/assets/images/progress/progress_back.png
--- a/example/assets/images/progress/progress_fill_green.png
+++ b/example/assets/images/progress/progress_fill_green.png
--- a/example/assets/images/progress/progress_fill_red.png
+++ b/example/assets/images/progress/progress_fill_red.png
--- a/example/assets/images/progress/progress_fill_yellow.png
+++ b/example/assets/images/progress/progress_fill_yellow.png
--- a/example/assets/images/radio/check_back_circle.png
+++ b/example/assets/images/radio/check_back_circle.png
--- a/example/assets/images/radio/check_back_square.png
+++ b/example/assets/images/radio/check_back_square.png
--- a/example/assets/images/radio/checkmark.png
+++ b/example/assets/images/radio/checkmark.png
--- a/example/assets/images/radio/tick.png
+++ b/example/assets/images/radio/tick.png
--- a/example/assets/images/rect_round2_width1.png
+++ b/example/assets/images/rect_round2_width1.png
--- a/example/assets/images/slider/slider_back.png
+++ b/example/assets/images/slider/slider_back.png
--- a/example/assets/images/slider/slider_move.png
+++ b/example/assets/images/slider/slider_move.png
--- a/example/assets/images/sponsor_coffee.png
+++ b/example/assets/images/sponsor_coffee.png
--- a/example/assets/images/sponsor_github.png
+++ b/example/assets/images/sponsor_github.png
--- a/example/assets/images/sponsor_kofi.png
+++ b/example/assets/images/sponsor_kofi.png
--- a/example/assets/images/ui_circle_16.png
+++ b/example/assets/images/ui_circle_16.png
--- a/example/assets/images/ui_circle_32.png
+++ b/example/assets/images/ui_circle_32.png
--- a/example/assets/images/ui_circle_64.png
+++ b/example/assets/images/ui_circle_64.png
--- a/example/assets/images/ui_circle_64_blur_8.png
+++ b/example/assets/images/ui_circle_64_blur_8.png
--- a/example/assets/images/ui_circle_8.png
+++ b/example/assets/images/ui_circle_8.png
--- a/example/assets/images/ui_rounded_top_32.png
+++ b/example/assets/images/ui_rounded_top_32.png
--- a/example/assets/sounds/click.ogg
+++ b/example/assets/sounds/click.ogg
--- a/Show More
+++ b/Show More