javascript - 关于从 Sprite 添加 100+ 图像然后将它们垃圾处理的问题(长)

Question

我正在用 Html5 创建一个简短的游戏。我正在尝试找出进行英雄选择的最佳方法。

基本上有113个英雄。我创建了一个 1320x1320 的 spritesheet，每个英雄 img 都是 120x120。第一张图片实际上只是一个框，上面写着“点击选择英雄”。我的第一个问题是，因为它在开始时加载我的 spritesheet 以加载第一张图像，所以稍后当它加载其余英雄时，它不必重新加载图像，对吗？因为设置 'heroPics[i].style.backgroundImage = "url(Heroes.jpg)";'每次都让我感到不安。

对我来说第二个也是重要的问题。当我在手机游戏上工作时，我发现如果你加载一张 570 的图像，它会使用 1024x1024 的资源，最好将图像重新制作为 512 并按比例放大，从而节省负载资源。这里也一样吗？我的图像是 1320，它会像 2048 一样使用资源吗？或者因为我正在加载 120x120 的图像，它只使用 128 的资源？

现在进入真正的问题。当此人点击“点击选择英雄”时，我希望显示所有英雄图像。当他们选择一个英雄时，我想丢弃所有变量和我刚刚创建的 div，因为他们不会经常选择一个新英雄，所以最好丢弃它，对吧？或者因为 spritesheet 已经加载，所以只隐藏包含图像的 div 是值得的吗？它仍然会加载所有这些变量吗？无论如何，这是我的主要问题之一。

第二个是，如何在 div 中动态创建滚动条？我相信如果我手动设置所有属性我可以做到这一点，但我想创建标签和搜索英雄，所以滚动条必须调整到当前正在搜索的任何事件，非常感谢关于这个的任何建议。

最后，有没有办法从一开始就以一半大小创建图像？我尝试了 .style.width = "50%"和 height auto 但它不起作用，因为它是一个 spritesheet =(。所以我使用 webkit 来缩小 div，但如果可能的话我更喜欢另一个选项。

感谢您阅读到这里，很抱歉提出所有问题，这是我到目前为止所做的:

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 ++;
            }
        }
    }

我听说 math.floor 使用了太多资源，我是否应该找到一个不同的解决方案，即使它更难看，因为现在它调用 math.floor 113 次？再次感谢

编辑:

找到了我上一个关于调整图像大小的问题的解决方案:

background-size = 792px 792px;

只需在 css 类中将 1320x1320 缩小 60%，然后将 imgae 大小从 120 更改为 72 即可。

同时感谢创建一个包含大部分属性并仅在需要时使用 JS 的类的有用提示。仍然需要滚动条和其他一些方面的帮助!

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.

是的，但您最好通过 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?

首先我听说过，即使它是真的也可能依赖于浏览器。转念一想，我确实听说 iOS 在加载超出一定尺寸的图像时存在一些问题，但我不确定。我认为我目前使用的最大图像是 1440x570 左右。我必须检查 Sprite ，但它们中的大多数要小得多。

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.

如果您正在进行过滤等操作，您可以尝试在您的 div 的子项上使用类。所以你会有这样的代码:

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

然后当您选择过滤器时，您可以轻松浏览并隐藏不需要的过滤器。首先，将它们全部隐藏起来。然后显示与您的过滤器匹配的那些，所以如果他们选中“女性”，那么您的 javascript(我在这里使用 jQuery，但可以随意选择另一个):

$('#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.

听起来你想在 div 上使用 overflow:auto 或者 overflow-y: auto。

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.

听起来您正在寻找 background-size