Updated fiddle, with latest version of DRGTK Standard.

Author: amirrajan

.DS_Store

@@ -1,7 +1,7 @@
 var GDragonRubyGameId = 'dragonruby-sandbox';
 var GDragonRubyGameTitle = 'DragonRuby Sandbox';
 var GDragonRubyDevTitle = 'DragonRuby';
-var GDragonRubyGameVersion = '2.0';
+var GDragonRubyGameVersion = '3.0';
 var GDragonRubyIcon = '/metadata/icon.png';
 
 function syncDataFiles(dbname, baseurl)
@@ -360,6 +360,31 @@ function syncDataFiles(dbname, baseurl)
     return retval;
 }
 
+var prepareFilesystem = function()
+{
+  // Download the game data and set up the filesystem!
+  // set up a persistent store for save games, etc.
+  FS.mkdir('/persistent');
+  FS.mount(IDBFS, {}, '/persistent');
+  FS.syncfs(true, function(err) {
+    if (err) {
+      console.log("WARNING: Failed to populate persistent store. Save games likely lost?");
+    } else {
+      console.log("Read in from persistent store.");
+    }
+
+    loadDataFiles(GDragonRubyGameId, 'gamedata/', function() {
+      console.log("Game data is sync'd to MEMFS. Starting click-to-play()...");
+      //Module.setStatus("Ready!");
+      //setTimeout(function() { Module.setStatus(""); statusElement.style.display='none'; }, 1000);
+      Module.setStatus("");
+      statusElement.style.display='none';
+      Module.startClickToPlay();
+    });
+  });
+}
+
+
 var statusElement = document.getElementById('status');
 var progressElement = document.getElementById('progress');
 var canvasElement = document.getElementById('canvas');
@@ -498,8 +523,14 @@ var base64Encode = function(ui8array) {
     return out;
 }
 
+function startGame()
+{
+    Module["removeRunDependency"]("dragonruby_init");
+}
+
+
 var Module = {
-  noInitialRun: true,
+  noInitialRun: false,
   preInit: [],
   clickedToPlay: false,
   clickToPlayListener: function() {
@@ -510,32 +541,50 @@ var Module = {
         div.removeEventListener('click', Module.clickToPlayListener);
         document.body.removeChild(div);
     }
-    if (window.parent.window.gtk.starting) {
-      window.parent.window.gtk.starting();
-    }
-    Module["callMain"]();  // go go go!
+    // if (window.parent.window.gtk.starting) {
+    //   window.parent.window.gtk.starting();
+    // }
+
+    startGame();  // go go go!
   },
   startClickToPlay: function() {
     var base64 = base64Encode(FS.readFile(GDragonRubyIcon, {}));
     var div = document.createElement('div');
+    var leftPx = ((window.innerWidth - 640) / 2);
+    var leftPerc = Math.floor((leftPx / window.innerWidth) * 100);
     div.id = 'clicktoplaydiv';
+    div.style.width = '360px';
+    div.style.height = '360px';
     div.style.backgroundColor = 'rgb(40, 44, 52)';
-
+    div.style.position = 'absolute';
+    div.style.top = '50%';
+    div.style.left = '50%';
+    div.style.transform = 'translate(-50%, -50%)';
 
     var img = new Image();
     img.onload = function() {  // once we know its size, scale it, keeping aspect ratio.
-      img.style.width = '128px';
-      img.style.height = '101px';
+      var pct = 30;
+      var w = img.naturalWidth;
+      var h = img.naturalHeight;
+      if (!w || !h || (w == h)) {
+        img.style.width = '' + pct + '%';
+        img.style.height = '' + pct + '%';
+      } else if (w > h) {
+        img.style.width = '' + pct + '%';
+      } else {
+        img.style.height = '' + pct + '%';
+      }
       img.style.display = 'block';
     }
 
     img.style.display = 'none';
-    img.style.width = '128px';
-    img.style.height = '101px';
+    img.style.width = 'auto';
+    img.style.height = 'auto';
     img.style.margin = 0;
     img.style.position = 'absolute';
-    img.style.top = '10px';
-    img.style.left = '176px';
+    img.style.top = '50%';
+    img.style.left = '50%';
+    img.style.transform = 'translate(-50%, -50%)';
     img.src = 'data:image/png;base64,' + base64;
     div.appendChild(img);
 
@@ -553,7 +602,7 @@ var Module = {
     div.appendChild(p);
 
     p = document.createElement('p');
-    p.innerHTML = 'Click here to begin, or press Ctrl+S<br/>in the code editor to the left.';
+    p.innerHTML = 'Click the run button, or press Ctrl+S<br/>in the code editor to the left.';
     p.style['font-family'] = "monospace";
     p.style.textAlign = 'center';
     p.style.backgroundColor = 'rgb(40, 44, 52)';
@@ -568,25 +617,10 @@ var Module = {
     window.gtk.play = Module.clickToPlayListener;
   },
   preRun: function() {
-    // set up a persistent store for save games, etc.
-    FS.mkdir('/persistent');
-    FS.mount(IDBFS, {}, '/persistent');
-    FS.syncfs(true, function(err) {
-      if (err) {
-        console.log("WARNING: Failed to populate persistent store. Save games likely lost?");
-      } else {
-        console.log("Read in from persistent store.");
-      }
-
-      loadDataFiles(GDragonRubyGameId, 'gamedata/', function() {
-        console.log("Game data is sync'd to MEMFS. Starting click-to-play()...");
-        //Module.setStatus("Ready!");
-        //setTimeout(function() { Module.setStatus(""); statusElement.style.display='none'; }, 1000);
-        Module.setStatus("");
-        statusElement.style.display='none';
-        Module.startClickToPlay();
-      });
-    });
+    // this prevents the game from running. We'll remove the dependency when
+    //  we have downloaded everything and the user has clicked-through to play.
+    Module["addRunDependency"]("dragonruby_init");
+    prepareFilesystem();   // will get data, async.
   },
   postRun: [],
   print: (function() {
@@ -668,36 +702,26 @@ window.onerror = function(event) {
   };
 };
 
+// sanity check this before downloading anything heavy.
 var hasWebAssembly = false;
 if (typeof WebAssembly==="object" && typeof WebAssembly.Memory==="function") {
   hasWebAssembly = true;
 }
 //console.log("Do we have WebAssembly? " + ((hasWebAssembly) ? "YES" : "NO"));
+if (!hasWebAssembly) {
+  Module.setStatus("Your browser doesn't have WebAssembly support. Please upgrade.");
+} else {
+  var buildtype = "wasm";
+  var module = "dragonruby-" + buildtype + ".js";
+  window.gtk = {};
+  window.gtk.module = Module;
 
-var buildtype = hasWebAssembly ? "wasm" : "asmjs";
-var module = "dragonruby-" + buildtype + ".js";
-window.gtk = {};
-window.gtk.module = Module;
-
-//console.log("Our main module is: " + module);
+  //console.log("Our main module is: " + module);
 
-var script = document.createElement('script');
-script.src = module;
-if (hasWebAssembly) {
+  var script = document.createElement('script');
+  script.src = module;
   script.async = true;
-} else {
-  script.async = false;  // !!! FIXME: can this be async?
-  (function() {
-    var memoryInitializer = module + '.mem';
-    if (typeof Module['locateFile'] === 'function') {
-      memoryInitializer = Module['locateFile'](memoryInitializer);
-    } else if (Module['memoryInitializerPrefixURL']) {
-      memoryInitializer = Module['memoryInitializerPrefixURL'] + memoryInitializer;
-    }
-    var meminitXHR = Module['memoryInitializerRequest'] = new XMLHttpRequest();
-    meminitXHR.open('GET', memoryInitializer, true);
-    meminitXHR.responseType = 'arraybuffer';
-    meminitXHR.send(null);
-  })();
+  document.body.appendChild(script);
 }
-document.body.appendChild(script);
+
+// end of dragonruby-html5-loader.js ...

dragonruby-html5-loader.js

@@ -1,3 +1,6 @@
 def tick args
-  args.outputs.background_color = [40, 44, 52]
+  args.outputs.labels  << [640, 500, 'Hello World!', 5, 1]
+  args.outputs.labels  << [640, 460, 'Go to docs/docs.html and read it!', 5, 1]
+  args.outputs.labels  << [640, 420, 'Join the Discord! http://discord.dragonruby.org', 5, 1]
+  args.outputs.sprites << [576, 280, 128, 101, 'dragonruby.png']
 end

dragonruby-wasm.js

@@ -2,5 +2,5 @@ devid=dragonruby
 devtitle=DragonRuby
 gameid=dragonruby-sandbox
 gametitle=DragonRuby Sandbox
-version=2.0
+version=3.0
 icon=metadata/icon.png

dragonruby-wasm.wasm

@@ -0,0 +1,9 @@
+# ios_metadata.txt is used by the Pro version of DragonRuby Game Toolkit to create iOS apps.
+# Information about the Pro version can be found at: http://dragonruby.org/toolkit/game#purchase
+
+# teamname needs to be set to your assigned team id which can be found at https://developer.apple.com/account/#/membership/L7H57V9CRD
+teamid=
+# appid needs to be set to your application identifier which can be found at https://developer.apple.com/account/resources/identifiers/list
+appid=
+# appname is the name you want to show up underneath the app icon on the device
+appname=