TextureAtlas Loading image data is insecure

Hello,

after loading succesfully images in the indigo demo application: [Log] [INFO] [Indigo] [Image] Loading assets/dots.png (mygame-indigo_demo-fastopt.js, line 75157) [Log] [INFO] [Indigo] [Image] Success assets/dots.png (mygame-indigo_demo-fastopt.js, line 75157) [Log] [INFO] [Indigo] Asset load complete (mygame-indigo_demo-fastopt.js, line 75157) [Log] [INFO] [Indigo] Creating atlases. Max size: 4096x4096 (mygame-indigo_demo-fastopt.js, line 75157)

I get the following error, right after the atlas creation instruction: Unable to get image data from canvas because the canvas has been tainted by cross-origin data. (anonymous function) — TextureAtlas.scala:226 (anonymous function) — TextureAtlas.scala:248 (anonymous function) — TextureAtlas.scala:267:110 (anonymous function) — AnonFunctions.scala:27 create__sci_List__F1__F2__Lindigo_platform_assets_TextureAtlas — TextureAtlas.scala:38 createTextureAtlas__Lindigo_platform_assets_AssetCollection__s_util_Try — List.scala:245 initialise__s_util_Try — Platform.scala:39 (anonymous function) — GameEngine.scala:142 (anonymous function) — GameEngine.scala:107 foreach__F1__V — Try.scala:260 run__V — Promise.scala:444 scala$scalajs$concurrent$QueueExecutionContext$PromisesExecutionContext$$$anonfun$execute$2__jl_Void__jl_Runnable__sjs_js_$bar — QueueExecutionContext.scala:52 promiseReactionJob $p_jl_JSConsoleBasedPrintStream__doWriteLine__T__V — System.scala:389

See: https://github.com/PurpleKingdomGames/indigo/blob/b3bb061b609f819358fd361e3bc58233c8d9c3be/indigo/indigo-platforms/src/main/scala/indigo/platform/assets/TextureAtlas.scala#L226

The issue occurs when trying to run it in an ios or android cordova container. My impression is that it has to do with recent restriction being put on loading files through file:/// protocol.

How could I resolve this issue? Is this something that will be addressed, or is it something that can be workaround, e.g. hosting the images on a CDN rather than including them in the app assets?

[laurensdv]

A config.xml would be required indeed and also a package.json, the package.json would contain the correct version of any needed platforms and plugins that align with the config.xml.

See: https://cordova.apache.org/docs/en/latest/platform_plugin_versioning_ref/index.html

In the docs of cordova, it is expected that cordova is installed in global npm space.

[davesmith00000]

Just having a quick play with resizing as the window changes size. This isn’t quite good enough but it illustrates the idea, you just need to add the following to the index.html file.

  <script type="text/javascript">
    function resizeCanvas() {
      var c = document.getElementById("indigo");
      c.height = window.innerHeight;
      c.width = window.innerWidth;
    }

    window.onresize = resizeCanvas;
  </script>

The problems with that are:

1. It doesn’t work until you’ve resized, i.e. the canvas is initially drawn at the wrong size, but you could solve that (probably) by passing the window’s innerWidth and innerHeight as flags and setting the game width and height to those value in the GameConfig.
2. You get some unpleasant tearing in the graphics and the canvas adapts. So I think you’d want something a little smarter that only resizes the canvas once you stop resizing (after a delay?) rather than constantly.