How to load multiple textures from external files into multiple sprites?

Post reply
Not favoritedFavorited Favorited 0 favourites
  • 8 posts
From the Asset Store
Custom Loading Icons
$3 USD
Custom Loading Icons to Enhance Your Loading Screens
Cosmic Lotus's avatar
Cosmic Lotus

  • I’m building a game where I want to download images from a back end which isn’t ready.

    Instead, I’ve added them as project files so I can use AJAX to retrieve them.

    When the back end’s ready, I’ll update the AJAX request’s URLs.

    I also want to save the images to local storage.

    (I’m using a Binary Data object for the local storage and AJAX requests.)

    So the flow is:

    1. Does the image exist in local storage?
    2. No? Request it from AJAX
    3. When it’s returned from AJAX, write it to local storage.
    4. When it’s written to local storage, request it back.
    5. If it does already exist in local storage, request it.
    6. When the request from local storage is complete (from either of the two routes above) create sprite.
    7. When the sprite’s created, load its texture from the picture returned from local storage.

    This works for the first image loaded, but when it does it for the second, it also overwrites the texture of the first and so on. I'm picking the sprite to load the texture into based on "on created" and confirm that only one sprite is selected by writing pickedCount to the console.

    Is this a bug or am I doing something wrong?

    Minimal reproducable project:

    drive.google.com/file/d/1Jr40AlfrJyxgY3jSjtBM37ua876FNqTH/view

    EDIT - I though reusing the same binaryData Object for both AJAX and local storage might be the issue, but if I remove local storage entirely and just download the file every time and load it straight into the sprite, the same thing happens.

    EDIT 2 - Ok, I'm being dumb - instances of a sprite can't have different textures.

    So can anyone suggest how I can best handle this? Different frames? If I need to download 50 images, would that cause size/performance issues?

    EDIT 3 - editing that test project to use tiled backgrounds instead of sprites appears to work - will try that for real...

  • You can do this...

    It creates a new animation called "load" and based on the variable it will load on the first frame else on a new frame without replacing the original frame.

  • You can do this...

    Thanks for this - I did consider adding as new frames or animations but was concerned about sizing so I'm now trying with tiled backgrounds - I'll see how that goes and might revert back to a single sprite.

    One issue I've encountered with loading tiled backgrounds from a URL is that there's no "resize to image" option, so at the moment, I'm loading the image into a sprite, then resizing the tile map to the sprite's dimension, then loading the image into the tile, then destroying the sprite!

    I'll report back here when I have a fully working solution!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • I'm having problems using tiled backgrounds.

    Firstly, there's no "resize to image" option when loading an image into the tiled background instance from a URL. I tried creating a sprite first that does have "resize to image", then setting the tiled background instance to the same size. Then I realised that setting the size of the tiled background only changes its bounding box and doesn't zoom in/out! Then I got stuck calculating the correct scale so that the image fits perfectly into the bounding box.

    But the main problem is that it takes several seconds to load everything - particularly now that I'm having to load the sprite first.

    So I think I'm going to revert to my original solution which is to only load the picture into the sprite on demand - there's small delay here (which is what I was trying to avoid by trying to load them all up front). I'm also going to try preloading the previous and next pictures whilst the current one is being viewed.

  • citron2010

    Hey, I’m not fully sure why you’re using a Tiled Background for this.

    I’m assuming you’re trying to place multiple sprites side by side to create some kind of board, and maybe you’re worried that having too many sprite instances on screen may affect performance, especially if the original sprite is a larger size.

    Another option could be using the Drawing Canvas object... you will need to paste the updated sprites (after you created and resized them) onto it , then destroy and clean up the sprite instances from memory. There might be a slight delay during this process, but it reduces image memory usage since the sprites are already resized before being pasted and destroyed

  • It was ChatGPT that suggested trying tiled backgrounds, but I scrapped that idea for the reasons explained above!

    It did also suggest using canvases, but warned that it might consume more memory than sprites.

    My ultimate aim is to be able to display maybe up to 50 photographs one at a time and try to avoid delays either preloading them all or the delay pulling them back from local storage when loading on demand. I'm currently doing the latter and there's a slight delay which is why I'm considering preloading just the next and previous ones whilst the current one is being displayed.

  • It was ChatGPT that suggested trying tiled backgrounds, but I scrapped that idea for the reasons explained above!

    It did also suggest using canvases, but warned that it might consume more memory than sprites.

    My ultimate aim is to be able to display maybe up to 50 photographs one at a time and try to avoid delays either preloading them all or the delay pulling them back from local storage when loading on demand. I'm currently doing the latter and there's a slight delay which is why I'm considering preloading just the next and previous ones whilst the current one is being displayed.

    Please don't listen to ChatGPT. Refer to YouTube tutorials, documentation, or a forum post like this.

  • Please don't listen to ChatGPT. Refer to YouTube tutorials, documentation, or a forum post like this.

    Sorry, but ChatGPT is massively helpful working with Construct - yes, it's not perfect - its suggestion to use tiled backgrounds cost me around 15 minutes - but as I'd found no other solution, I felt it was worth investigating.

    I'm working on a new project and decided to use LLMs as much as possible and ChatGPT (and Gemini to some degree) have speeded up my workflow enormously. It's just helped me set up a file server and serve it over https using Caddy in minutes. Admittedly that wasn't Construct related, but it then helped me set up all the AJAX requests to authenticate, set request headers and make requests to upload and download text and binary files to this server from Construct - all using events. It's also helped in this project with JSON & array manipulation (two areas I know trip many Construct users (including myself) up), plus helping to resize and position objects to fit constraints, styling elements with CSS, correctly structuring and configuring 9-patches etc. etc.

Post reply
  • 8 posts
Index icon Return to board index
Jump to:
Active Users
There are 0 visitors browsing this topic (0 users and 0 guests)