HTML5 Get image

[Chaser]

Hi, just reaching out for a bit of guidance or to point me in the right direction on what i'm doing wrong. i have been at his all day, reading the manuals, htttp get file, http get, async funtions, sprite add etc i think i have got myself very confused with it all and got myself in a bit of a head mess. So figured it was time to just ask for some help.

I'm just trying to grab a PNG from a server and have it as the sprite. (not that big a deal)

Now i have got this to work on the windows module no problem, sprite add,file get etc, so im cool with that, but i'm using the HTML5 module and its a little bit different and i can't seem to get it to work.

I have read the manual, and other threads here, but nothing that i can find HTML5 wise. I have just lost my way a bit and doing it a bit backwards.

appreciate any help on this.

 

[Kahrabaa]

Hi, Ive never tried this but I saw this post.

You can load sprites from the internet. Here's an example below:

sprite = sprite_add(pictureURL,0,0,0,0,0);

 

[FrostyCat]

Your problem is likely because the server hosting the PNG file is not supplying CORS headers, and it isn't the same domain as the game. enable-cors.org has lots of information on how to enable this, for example this one for Apache.

As for the part setting sprite_index, you should be doing that in the Image Loaded event (which guarantees that the sprite is there for you to use), not in the same event starting the asynchronous request.

Create:

load_image = sprite_add("https://chasersgamingwebsite.000webhostapp.com/SPR_SMS_Genre_Select_strip8.png", 8, false, false, 0, 0);

Image Loaded:

if (async_load[? "id"] == load_image) {
  if (async_load[? "status"] >= 0) {
    sprite_index = load_image;
  } else {
      // Error here?
    break;
  }
}

Both of these are described in finer point on the Manual entry for sprite_add():

NOTE: On HTML5, if you are loading a sprite from a secure server you may need to set the cross-origin type and use a relative path instead of an absolute path. See http_set_request_crossorigin for more details.
NOTE: If you are loading the sprite from a URL, then loading will be done asynchronously and trigger an asynchronous Image Loaded event.

 

[Chaser]

Hi, Ive never tried this but I saw this post.

Yep, I saw this too, works great for Windows, not for HTML5

 

[Chaser]

Your problem is likely because the server hosting the PNG file is not supplying CORS headers, and it isn't the same domain as the game. enable-cors.org has lots of information on how to enable this, for example this one for Apache.

As for the part setting sprite_index, you should be doing that in the Image Loaded event (which guarantees that the sprite is there for you to use), not in the same event starting the asynchronous request.

Create:

load_image = sprite_add("https://chasersgamingwebsite.000webhostapp.com/SPR_SMS_Genre_Select_strip8.png", 8, false, false, 0, 0);

Image Loaded:

if (async_load[? "id"] == load_image) {
  if (async_load[? "status"] >= 0) {
    sprite_index = load_image;
  } else {
      // Error here?
    break;
  }
}

Both of these are described in finer point on the Manual entry for sprite_add():

Interesting, i didn't notice this. As above the sprite add works fine windows, but no go on HTML5, so i looked into the 'crossover' and installed the CORS for Chrome. however it has left me with a question.
Those that use my application for which i need to use a CORS , would that mean They too would have to installed the CORS for there browsers as well? for it to work properly. .
and the reason i may not of seen the 'Crossover' part is because i am using GMS1 not GMS2, these functions are not in GMS1, so is it not possible as of now, to use GMS1 for the reason i'm trying to because of the CORS now being needed to allow cross server requests?


Thanks, for your responses

 

[FrostyCat]

Interesting, i didn't notice this. As above the sprite add works fine windows, but no go on HTML5, so i looked into the 'crossover' and installed the CORS for Chrome. however it has left me with a question.
Those that use my application for which i need to use a CORS , would that mean They too would have to installed the CORS for there browsers as well? for it to work properly. .
and the reason i may not of seen the 'Crossover' part is because i am using GMS1 not GMS2, these functions are not in GMS1, so is it not possible as of now, to use GMS1 for the reason i'm trying to because of the CORS now being needed to allow cross server requests?

If you configured your server to send CORS headers instead of trying to fake something that only works on your system, the clients won't need to install anything. This is a JS-level limitation that applies equally to GMS 1 and GMS 2.

Once again, get on enable-cors.org and learn how to enable CORS from the server side. Uninstall that crossover thing from your system and do it right. Also, see the reply to this topic on 000webhost's forums (which I assume you're using given the domain name on the image).

 

[Chaser]

If you configured your server to send CORS headers instead of trying to fake something that only works on your system, the clients won't need to install anything. This is a JS-level limitation that applies equally to GMS 1 and GMS 2.

Once again, get on enable-cors.org and learn how to enable CORS from the server side. Uninstall that crossover thing from your system and do it right. Also, see the reply to this topic on 000webhost's forums (which I assume you're using given the domain name on the image).

Ok , I shall read and look into it all. thanks for your time and efforts.