-1

I'm creating a game using HTML5 and JavaScript, and it is going to be using a ton of images. Having all of those images at once takes a lot of memory, and I was wondering how I could load/unload different images so that whoever plays the game doesn't need 8GBs of memory or so just for the images.

<img src = "source1" id = "img1"></img>
<img src = "source2" id = "img2"></img>
<img src = "source3" id = "img3"></img>
<!--Just imagine this for every image, which is likely going to peak over 10,000 at some point-->
<img src = "source10000" id = "img10000"></img>

<canvas width = "1350" height = "600" id = "canva"></canvas>
<script>
var canvas = document.getElementById("canva");
var can = canvas.getContext("2d");

var imge = function(im, x, y, w, h) {
can.drawImage(document.getElementById(im), x, y, w, h);
};

var playerX = 0;
var playerY = 0;

var run = function() {
imge("img1", playerX, playerY, 32, 32);
//Need to use tones of images
requestAnimationFrame(run);
};
run();

</script>

I don't need to use 10,000 images at once, more like have 60 at once(player animations, blocks, enemy animations, particles, etc), and since I'm early in development I'm open to having to redo stuff, like how I grab images.

Question: How can I load/unload images in HTML5/JavaScrpit

Improve this question
9
  • Don't use too much images.Better create larger images with multiple sprites and animate them with CSS background positioning. Take a look here for examples: spriters-resource.com/snes/smarioworld/sheet/53664 Commented Mar 10, 2019 at 23:22
  • 8GB of images? What's the life-time of your game? Sounds a bit much if you're not doing an open world. Probably there is something you must check in there already. Commented Mar 10, 2019 at 23:45
  • @Kaiido That was exaggerating to get a point across. My game should only require 500MB at most. Commented Mar 10, 2019 at 23:46
  • Why exaggerate? You don't deal the same way 500MB assets and 8GB ones... Commented Mar 10, 2019 at 23:48
  • I meant how much memory is being used, not storage. If I load 10,000 images and I'm only using 60 of them, I'm wasting memory on 9,940 unused images. Commented Mar 10, 2019 at 23:50

2 Answers 2

Reset to default
2

You can control loading images in JavaScript. However, you seemingly cannot force the browser to unload an image. The browser will decide for itself when to unload it from memory as long as you no longer have any references to that image in your code.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the answer, however to me that seems like it would still be wasting memory on sprites currently being unused.
0

1) Load Images - using a js function, that triggers on page load and ensure you set sufficient cache on images so that they are just requested from network once and served from browser's cache when requested again. There are multiple ways to do this, however best done with js since you need to keep a reference variable of these images for step 2.

2) Unload images - There is no unload image from memory yet in browsers. However, you can toggle the source of image to a smaller image, when it is not being used.

3) Render function - You'll need to write a switch function to toggle in the images, when you need them & toggle out the images when not in need.

Improve this answer

22 Comments

Your answer just gave me an idea. Would changing the SRC of an image work and then use that when going somewhere else? For instance, the image with the source of blackBlock and id 'basicBlock' when in room A, and source of whiteBlock and id 'basicBlock in room B.
Changing the src is a very bad idea. Like point 2 says, it will not even free memory, you'll just have loaded 2 images instead of one... + Next time you'll need to use it, you'll have to wait for the image gets parsed again, instead of being able to use it directly.
Yes that's my point. Point 2 makes no sense, like this answer.
@Vakore: 1) Yes keeping a map and naming convention can help you write optimal algorithms. 2) Memory cleanup will happen by GC whenever required by browser. Look at this answer for understanding this cycle: stackoverflow.com/questions/18800440/… The purpose of 2) is removing reference to the image, so it is collected by GC whenever it runs.
you can trigger GC in node: stackoverflow.com/questions/27321997/… However I have no experience with electron. this link says it should behave like browser: electronjs.org/blog/electron-internals-weak-references you'll need to run some tests/ create a POC to check it out.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.