Questions about adding 100+ Images from a Sprite and then garbaging them (long)

Question

I'm creating a short game in Html5. I'm trying to figure out the best way to do the Hero selection.

Basically there are 113 heroes. I created a spritesheet that is 1320x1320 with each hero img being 120x120. The first picture is actually just a box that says 'Click to pick hero' in it. My first question is, since it loads my spritesheet at the beginning to load the first image, later on when it loads the rest of the heroes it won't have to reload the image right? Because setting 'heroPics[i].style.backgroundImage = "url(Heroes.jpg)";' each time makes me feel uneasy.

Second and important question to me. Back when I worked on games for mobiles, I found out that if you loaded an image that's 570 it'd use resources for a 1024x1024 and that it'd be better to remake the image to 512 and just scale it up, saving loads of resources. Is it the same here? My image being 1320 would it use resources as a 2048? Or since I'm loading images 120x120 it's only using resources for 128?

Now on to the real question. When the person clicks on 'Click to pick hero', I want all the hero images to appear. When they pick a hero I'd like to garbage all the variables and the div I just created, because they will not be picking a new hero too often, so it's better to garbage it, right? Or since the spritesheet is already loaded it's worth it to just hide the div containing the images instead? It'd still have all those variables loaded tho? Anyway that's one of my major question.

Second one is, how do I create a scrollbar inside a div dynamically? I believe I could do it if I set all the properties manually but I want to create tags and a search for the heroes, so the scrollbar has to adjust to whatever is currently being searched active, any advice on this one is greatly appreciated.

And last of all, is there a way to create the image at half it's size from the beginning? I tried .style.width = "50%" and height auto but it doesn't work since it's a spritesheet =(. So I use the webkit to scale down the div but I'd prefer another option if possible.

Thanks for reading this far and sorry for all the questions, here is what I've done so far:

function selectHero() {
    var gg = 1;
    var bg = 0;
        for (var i = 1; i < 114; i++) { 
            heroPics[i] = new Image();
            heroPics[i].style.backgroundImage = "url(newHeroes.jpg)";
            heroPics[i].style.width = "120px";
            heroPics[i].style.height = "120px";
            heroPics[i].style.backgroundPosition = (-(120 * i)) + "px" + " " + (-((Math.floor(i / 11)) * 120)) + "px";
            heroPics[i].style.position = "absolute";
            heroPics[i].style.left = -90 + (75 * gg) + "px";
            heroPics[i].style.top = -30 + (75 * bg) + "px";
            heroPics[i].style.webkitTransform  = 'scale(0.6, 0.6)'; 
            heroPics[i].draggable = false;
            someDiv.appendChild(heroPics[i]);
            //heroPics[i].addEventListener( "click", heroChosen, false );
            gg ++;
            if(gg > 17) {
                gg = 1;
                bg ++;
            }
        }
    }

I heard math.floor uses way too much resources, should I find a different solution even if it's uglier since right now it's calling math.floor 113 times? Thanks once again

Edit:

Found a solution to my last question about resizing images:

background-size = 792px 792px;

Just scaled 1320x1320 down by 60% in the css class and then changed the imgae size from 120 to 72 and it worked.

Also thanks for the useful tip of creating a class that holds the majority of the properties and using JS only when needed. Still need help with the scrollbar and a few others!

Answer 1

Basically there are 113 heroes. I created a spritesheet that is 1320x1320 with each hero img being 120x120. The first picture is actually just a box that says 'Click to pick hero' in it. My first question is, since it loads my spritesheet at the beginning to load the first image, later on when it loads the rest of the heroes it won't have to reload the image right? Because setting 'heroPics[i].style.backgroundImage = "url(Heroes.jpg)";' each time makes me feel uneasy.

Yes, but you would probably be better off doing this via CSS.

Second and important question to me. Back when I worked on games for mobiles, I found out that if you loaded an image that's 570 it'd use resources for a 1024x1024 and that it'd be better to remake the image to 512 and just scale it up, saving loads of resources. Is it the same here? My image being 1320 would it use resources as a 2048? Or since I'm loading images 120x120 it's only using resources for 128?

First I have heard of that, and it is likely to be browser dependent even if true. On second thought, I did hear that iOS had some issues with loading images that were beyond a certain size, but I'm not certain. The largest image I think I currently use is 1440x570 or so. I'd have to check the sprites, but most of them are much smaller.

Now on to the real question. When the person clicks on 'Click to pick hero', I want all the hero images to appear. When they pick a hero I'd like to garbage all the variables and the div I just created, because they will not be picking a new hero too often, so it's better to garbage it, right? Or since the spritesheet is already loaded it's worth it to just hide the div containing the images instead? It'd still have all those variables loaded tho? Anyway that's one of my major question.

If you are doing filtering etc, you might try something like using classes on the children of your div. So you would have code like:

<div id="heroselection">
<div class="hero1 fighter male"></div>
<div class="hero2 wizard female"></div>
</div>

Then as you select filters, you can easily go through and hide the ones you don't need. First, hide them all. Then show the ones that match your filters, so if they checkbox "female" then your javascript (I'm using jQuery here, but feel free to pick another):

$('#heroselection > div').hide();
$('#hereselection > div.female').show();

Second one is, how do I create a scrollbar inside a div dynamically? I believe I could do it if I set all the properties manually but I want to create tags and a search for the heroes, so the scrollbar has to adjust to whatever is currently being searched active, any advice on this one is greatly appreciated.

Sounds like you want overflow:auto or perhaps overflow-y: auto on the div.

And last of all, is there a way to create the image at half it's size from the beginning? I tried .style.width = "50%" and height auto but it doesn't work since it's a spritesheet =(. So I use the webkit to scale down the div but I'd prefer another option if possible.

Sounds like you are looking for background-size

Answer 2

you are creating too much properties using javascript better solution is to create one parent class with common properties and apply this class to all divs and modify remaining properties with Javascript.

#parent > div{
background:url('newHeroes.jpg');
width:120px;
height:120px;
}

If you are familiar with SASS style of writing CSS then you can write sass and compile to css for all child div elements

@for $i from 1 through 114 {
div:nth-child(#{$i}) {
  /* example --width: 100% / #{$i}*/
 }
 }