javascript - CSSスプライトを使用して、すべての場合にクラスを記述せずに状態を切り替えます

Question

この問題を解決するためにJavaScriptを使用することは避けたいと言って、この質問の前置きをさせてください。可能であれば（そうではないかもしれませんが）、この「ロジック」をすべてCSSに保持したいと思います。

私はjavascriptで楽しむためのボードゲーム（ Khet ）を作成しています。ボードピースは、次のような複数の状態を持つことができます。

• 色（どのプレイヤーが作品を所有しているか）
• どんな種類の作品（ピラミッド、スフィンクス、空白のタイルなど）
• ピースが向いている方向（ピースは回転したり移動したりできます）
• 作品がレーザーを反射している場合
• 部品がレーザーによって損傷した場合

そうは言っても、sprite.pngすべてのピースの可能なすべての組み合わせを含む1つのファイルがあり、CSSクラスを使用してピースを状態間で移動できるようにしたいと思います。

たとえば、赤いプレーヤーがボード上にピラミッドピースを持っていて、それが北東を向いていると想像してください。このピースには、、、、およびのクラスが.redあり.pyramidます.northeast。ピースがレーザーに当たって反射した場合、私がしなければならないのは.laser、ピースにクラスを追加することだけです。CSSbackground-positionクラスが開始され、適切なイメージを持つようにピースが変更されます。

これはいくつかの質問につながります：

1. これは純粋なCSSでも可能ですか？
2. sprite.pngこれらのbackground-positionクラスが機能するように、画像をどのように配置しますか？
3. クラスはどのようになりますか（これはおそらく＃2に依存します）？
4. 画像を分解する必要がありますか？すべての赤い部分を1つsprite_red.pngに、青い部分を1つに配置するのが好きsprite_blue.pngですか？

ゲームの他の部分のいくつかに取り組んでいる間、私はこれをバックバーナーに置きました。どんな助けでもいただければ幸いです！

Answer 1

これはすべて1つのスプライトで確実に実行できます。処理する画像の大きさの問題です。

|      SPHINX         |        Pyramid       |
Red  |  Blue  | Oran  |  Red  |  Blue  | Oran
 N       N       N        N       N       N
 NE      NE      NE       NE      NE      NE
 E       E       E        E       E       E
 SE      SE      SE       SE      SE      SE
 S       S       S        S       S       S
 SW      SW      SW       SW      SW      SW
 W       W       W        W       W       W
 NW      NW      NW       NW      NW      NW
|               DAMAGE                       |
 N       N       N        N       N       N
 NE      NE      NE       NE      NE      NE
 E       E       E        E       E       E
 SE      SE      SE       SE      SE      SE
 S       S       S        S       S       S
 SW      SW      SW       SW      SW      SW
 W       W       W        W       W       W
 NW      NW      NW       NW      NW      NW
 ....etc....

そこから、CSSのような

.piece { background:url('giant-sprint.png') no-repeat 0 0 }

.piece.sphinx.red.n { background-position:0px 0px }
.piece.sphinx.red.n.damage { background-position:0px 108px }

.piece.sphinx.red.s.damage { background-position:0px 156px }
.piece.pyramid.blue.s.damage { background-position:60px 156px }

.piece.pyramid.blue.sw { background-position:60px 72px }
.piece.sphinx.blue.sw.damage { background-position:60px 168px }

それほど長くはかからないので、列の左右の位置と、確立されたパターンからそれらがどの部分を表しているかを覚えておくことができます。

私は間違いなくピースを単一のコンテナーに制限します（少なくともv1.0の場合）。通常の状態用のスプライトと損傷した部分用のスプライト...多分...メンテナンスPOVからあなたの生活を楽にするかもしれません。ゲームが成熟するにつれて、適切な方法がより明白になるはずです。

Answer 2

1）これは純粋なCSSでも可能ですか？

はい！ただし、2つの制限に直面する必要があります。数学がないことと、との個別の割り当てがないことですbackground-position-x（background-position-yこれらのプロパティは非標準であるため）。その結果、、などのすべての組み合わせに対してセレクターとルールが必要に.red.pyramid.northeastなり.red.pyramid.northeast.reflectingます.red.pyramid.northeast.damaged。これも質問3に答えると思います。

2）これらのbackground-positionクラスが機能するように、sprite.pngの画像をどのように配置しますか？

複数の可能性があります。同じ図形を列にグループ化してから、異なる色ごとにそれらの列を繰り返すようなものを使用します。行は、3つの状態を掛けた8つの可能な方向に対応します。

4）画像を分解する必要がありますか？すべての赤い部分を1つに配置しprite_red.png、青い部分を1つに配置するようにsprite_blue.png？

私は当初、それは良い考えだと思いました。たぶんそうかもしれませんが、それでも多くのルールが必要になります。

本当にCSSだけを使用したい場合は、何らかのスクリプトを使用してスタイルシートを生成し（おそらく、SASSが少ないですか？使用したことがないのでわかりません）、展開のために縮小することを強くお勧めします。そうでなければ、それを維持することはおそらく不快な経験になるでしょう。

Answer 3

1. Is this even possible to do in pure CSS?

はい、間違いなく実行可能であり、それを実行するための多くの可能な方法です。

2.How would you arrange the images in sprite.png such that these
background-position classes would work?

議論のために、これらのボードピースが取ることができる6つの異なるボードピースと6つの異なる色があるとしましょう。

それらをどのように配置するかは完全にあなた次第です。あなたにとって意味のある方法でそれをしてください。

最初の列にあるすべてのピラミッドのピースを、すべて異なる色で表示することができます。次に、2行目にすべてのスフィンクスピースを配置できます。

ボードピースの方向と、それが反射レーザーまたはレーザー損傷を示しているかどうかについては、次のように、考えられる3つのレイヤーごとに個別の要素をお勧めします。

したがって、他の2つのSPANタグを含むSPANタグがあります。

• 最初のSPANタグには、ボードピースの背景が正しい色で表示されています。
• 2番目のSPANタグには、方向アイコンの背景があります。
• 3番目のSPANタグには、反射または損傷したレーザーアイコンの背景があります。

そして、CSSの絶対位置とz-indexを使用して、スパンを互いに積み重ねるだけです。明らかに、方向と反射/損傷したアイコンはPNG画像である必要があります。これにより、それらが透明になり、その下にボードピースのアイコンが表示されます。

これは、特定の方向、レーザー反射などのレーザー損傷を伴う、各色のバリエーションの各ボードピースのバージョンを作成する必要がないことを意味します。

3. What would the classes look like?

.layer1 {
    position: relative;
    z-index: 1;
    background-image: url(spite1.png);
    background-repeat: no-repeat;
}

.layer2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-image: url(spite2.png);
    background-repeat: no-repeat;
}


.layer3 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background-image: url(spite2.png);
    background-repeat: no-repeat;
}

.pyramid-red {
    background-position: 0 0;
}

.pyramid-blue {
    background-position: -24px 0;
}



4. Do I need to break the image apart? Like placing all red pieces in one sprite_red.png and blue in sprite_blue.png?

2つのスプライスを使用することをお勧めします。

• 最初のものには、ボードピースとそのカラーバリエーションが含まれます。

• 2つ目は、指向性画像と反射状態および損傷状態を含みます。

私はすべてが理にかなっていることを願っています！

Answer 4

最初のステップは、スプライトマップを計画することです。

2種類設定します。それはクラスtype1とtype2になり、水平方向に進みます。そして、私は4つの方向を設定します、それは垂直に行きます。スプライトのサイズが32の場合、type2の水平方向のオフセットは32になり、方向のオフセットは32、64、および96になります。

次は色になります。ここで、私はいくつかの数学をする必要があります。CSSで可能ですか？いいえ、はい。要素を別の要素の中に入れると、左のプロパティは累積されます。したがって、別の要素が必要になり、左と上で遊ぶことになります。

.type1             { position: relative;}
.type2             { left: -32px; position: relative;}

.dir1             { }
.dir2             { top: -32px}
.dir3             { top: -64px}
.dir4             { top: -96px}

.color2 img  { left: -64px}

そのためのマークアップは

<div class="clip solution">
<div class="type2 dir4 color2 reflecty damagey">
<img src="./SpritewithImages.png">
</div>
</div>

カラークラスは画像に合わせる必要がありますが、2つの異なる場所にクラスがあると問題が発生するため、父のセレクターで機能するようにCSSルールを設定しました。2種類あるため、カラークラスは64ピクセル単位になります。もっとあれば、それに応じて増加します。これで、2次元が残ります。これに対応するには、divの別のレイヤーが必要になります。これを回避するために、1つの次元に2つの決定を詰め込みます。はい、損傷はい、およびその両方を反映します（損傷なしまたは反射なしを指定する必要はありません）。複合セレクター：

.reflecty img  { top: -128px}
.damagey img  { top: -256px}
.reflecty.damagey img  { top: -384px}

そしてそれがすべてです！もちろん、ターゲットはスプライトですべてを行うことではない可能性があります。次に、おそらく回転で遊ぶことができ、レーザーのものは重ねられた透明な層に入る可能性があります。

それはフィドルです

最終的なスプライトに到達する前に、選択された中間スプライトが表示されます。

編集

状態を切り替えるためのフィドルボタンを含めました。右側にスプライトのあるグリッドが表示されます。列は次のように意図されています。

1 - figure 1, color 1
2 - figure 2, color 1
- separator
3 - figure 1, color 2
4 - figure 2, color 2

と列は

1 - direction 1
2 - direction 2
4 - direction 4
- separator
5 - reflection, direction 1
8 - reflectio , direction 4
- separator
9 - damaged, direction 1
12 - damaged, direction 4
- separator 
13 reflection, damaged, direction 1

更新されたフィドルはここにあります