0

Html5でショートゲームを作っています。ヒーローの選択を行うための最良の方法を見つけようとしています。

基本的に113人のヒーローがいます。各ヒーロー画像が 120x120 である 1320x1320 のスプライトシートを作成しました。最初の写真は、実際には「クリックしてヒーローを選択」と書かれたボックスです。私の最初の質問は、最初にスプライトシートをロードして最初の画像をロードするため、後で残りのヒーローをロードするときに画像を再ロードする必要がないということです。「heroPics[i].style.backgroundImage = "url(Heroes.jpg)";」を設定しているためです。毎回不安になります。

私にとって2番目の重要な質問です。私がモバイル向けのゲームに取り組んでいたとき、570 の画像をロードすると 1024x1024 のリソースを使用することになり、画像を 512 に作り直して拡大するだけで、負荷を節約できることがわかりました。資力。ここも同じですか？私のイメージは 1320 で、リソースを 2048 として使用しますか? または、画像 120x120 をロードしているので、128 のリソースしか使用していませんか?

では本当の質問に移ります。人が「クリックしてヒーローを選択」をクリックすると、すべてのヒーロー画像が表示されるようにします。彼らがヒーローを選ぶとき、私が作成したばかりのすべての変数と div をガベージしたいのですが、彼らは新しいヒーローをあまり頻繁に選ぶことはないので、ガベージしたほうがよいのではないでしょうか? または、スプライトシートが既に読み込まれているので、代わりに画像を含む div を非表示にするだけの価値がありますか? これらの変数はすべてロードされたままですか？とにかく、それは私の主要な質問の 1 つです。

2つ目は、div内にスクロールバーを動的に作成するにはどうすればよいですか? すべてのプロパティを手動で設定すればできると思いますが、タグを作成してヒーローを検索したいので、現在アクティブに検索されているものに合わせてスクロールバーを調整する必要があります。これに関するアドバイスは大歓迎です.

最後に、最初から半分のサイズで画像を作成する方法はありますか? .style.width = "50%" と height auto を試しましたが、スプライトシート =( であるため機能しません。したがって、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% 縮小し、画像サイズを 120 から 72 に変更したところ、うまくいきました。

また、プロパティの大部分を保持するクラスを作成し、必要な場合にのみ JS を使用するという便利なヒントにも感謝します。スクロールバーと他のいくつかのヘルプが必要です!

4

2 に答える 2

2

基本的に113人のヒーローがいます。各ヒーロー画像が 120x120 である 1320x1320 のスプライトシートを作成しました。最初の写真は、実際には「クリックしてヒーローを選択」と書かれたボックスです。私の最初の質問は、最初にスプライトシートをロードして最初の画像をロードするため、後で残りのヒーローをロードするときに画像を再ロードする必要がないということです。「heroPics[i].style.backgroundImage = "url(Heroes.jpg)";」を設定しているためです。毎回不安になります。

はい。ただし、CSS を使用してこれを行う方がよいでしょう。

私にとって2番目の重要な質問です。私がモバイル向けのゲームに取り組んでいたとき、570 の画像をロードすると 1024x1024 のリソースを使用することになり、画像を 512 に作り直して拡大するだけで、負荷を節約できることがわかりました。資力。ここも同じですか？私のイメージは 1320 で、リソースを 2048 として使用しますか? または、画像 120x120 をロードしているので、128 のリソースしか使用していませんか?

最初に聞いたことがありますが、本当だとしてもブラウザに依存する可能性があります。よく考えてみると、iOS には特定のサイズを超える画像をロードする際にいくつかの問題があると聞きましたが、確かではありません。現在使用していると思われる最大の画像は 1440x570 程度です。スプライトをチェックする必要がありますが、それらのほとんどははるかに小さいです。

では本当の質問に移ります。人が「クリックしてヒーローを選択」をクリックすると、すべてのヒーロー画像が表示されるようにします。彼らがヒーローを選ぶとき、私が作成したばかりのすべての変数と div をガベージしたいのですが、彼らは新しいヒーローをあまり頻繁に選ぶことはないので、ガベージしたほうがよいのではないでしょうか? または、スプライトシートが既に読み込まれているので、代わりに画像を含む div を非表示にするだけの価値がありますか? これらの変数はすべてロードされたままですか？とにかく、それは私の主要な質問の 1 つです。

フィルタリングなどを行っている場合は、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();

2つ目は、div内にスクロールバーを動的に作成するにはどうすればよいですか? すべてのプロパティを手動で設定すればできると思いますが、タグを作成してヒーローを検索したいので、現在アクティブに検索されているものに合わせてスクロールバーを調整する必要があります。これに関するアドバイスは大歓迎です.

あなたが望むoverflow:autoか、おそらくoverflow-y: autodivにあるように聞こえます。

最後に、最初から半分のサイズで画像を作成する方法はありますか? .style.width = "50%" と height auto を試しましたが、スプライトシート =( であるため機能しません。したがって、webkit を使用して div を縮小しますが、可能であれば別のオプションを使用したいと思います。

探しているようですねbackground-size

于 2013-06-07T18:54:08.407 に答える
1

JavaScript を使用してあまりにも多くのプロパティを作成しています。より良い解決策は、共通のプロパティを持つ 1 つの親クラスを作成し、このクラスをすべての div に適用し、残りのプロパティを Javascript で変更することです。

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

CSS を記述する SASS スタイルに精通している場合は、sass を記述し、すべての子 div 要素の css にコンパイルできます。

@for $i from 1 through 114 {
div:nth-child(#{$i}) {
  /* example --width: 100% / #{$i}*/
 }
 }
于 2013-06-07T18:42:30.870 に答える