load multiple images

Hello, how to load multiple images from a URL in a single sprite?

I use firebase

If I understand correctly, you want to load multiple images from different urls in a single sprite (or multiple images from a single URL? Is that even possible?)

Suppose you want to load 2 different images from 2 URLs to a single sprite. There are 2 ways to do it:

1) create a sprite. Load the first image onto the sprite. Paste the sprite on a drawing canvas. Now load the second image on the same sprite, and paste it again on the canvas, with an offset. You now have a canvas with both images combined

2) Use scripting to create an html canvas and two images. load the images content, and paste it to the canvas. then, turn the canvas into a dataURL. Delete the canvas and use the dataURL as input to the "load from URL" action for your sprite. You now have a sprite with both images combined.

Code for number 2.

const imageUrl1 = "https://i.imgur.com/ylpLIoJ.jpeg";
const imageUrl2 = "https://i.imgur.com/pwbUJwD.jpeg";

const canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

const img1 = new Image();
const img2 = new Image();

img1.crossOrigin = 'anonymous';
img2.crossOrigin = 'anonymous';

// images are drawn onto the canvas, which is then turned into a dataURL that Construct can work with.
img1.onload = () => {
	ctx.drawImage(img1, 0, 0, 250, 250); // Draw first image
	img2.onload = () => {
		ctx.drawImage(img2, 250, 0, 250, 250); // Draw second image
		const dataUrl = canvas.toDataURL('image/png');
		runtime.callFunction("LoadImageFromDataURL" , dataUrl);
		canvas.remove();
	};
	img2.src = imageUrl2;
};
img1.src = imageUrl1;

thank you very much,

I have a Firebase project where I uploaded images for an educational program. I need an algorithm to download all the images appropriate for each word, so that the first image appears, and then the user transitions to the second image.

I would like to download all the images at once into one sprite.

Another question: Is it possible to create a grid like the one in the image, to generate icons so that each image is placed into an icon at the same time?

You should take a look at https://firebase.google.com/docs/storage/web/download-files?. What you want to do is get the download url and use as src attribute in an image (like in the second example I provided).

If your image is a sprite and you have 10 levels, your sprite should include 10 frames, with each frame corresponding to a specific level's image. To achieve this, loop through all 10 levels. In each iteration, load the appropriate level image into the corresponding frame of the sprite. Ensure that each frame is updated sequentially to avoid overwriting any previous images.

Regarding your second question: yes, you can create images dynamically or manually. If you choose the dynamic approach, you’ll need a nested loop to generate each image along with its corresponding icon. To ensure the icon stays aligned with its image, set the icon as a child of the image. This way, when you change the image’s position, the icon will automatically move to the desired position as well.

its shows the same image in single frame

That's because right now you're fetching the download link for your 3 images at the same time. Whenever a link is ready, you then apply it to all Flag objects, which is not correct. This results in every Flag object having the same image.

To fix this, you need to create the first flag, fetch the download link of the first image, on link fetched load the image on the last created flag, and only after the image has been loaded correctly proceed to create the following flag and fetch the following image.

Here's how you can do it. I can't test this since I don't have Firebase Storage, but give it a try:

Thank you for the help, but it doesn't work as it should; it just automatically changes the images for all the elements