Ćwiczenia CSS: Spite'y

Koncepcja i stosowanie tła obrazkowego w technice zwajej Sprite'y.

Przygotowanie

Utwórz nowy arkusz CSS do zapisu klas sprite'ów /media/sprites/map-1.css z przeznaczeniem na konkretny plik graficznej textury.
Użyj programu graficznego, który wyświetla w pikselach pozycję x, y kursora znajdującego się nad grafiką (np. GIMP, Paint)
Przygotuj serię tzw. Sprite'ów zgodnie z listą kategorii z Listingu 1.2
Zbuduj mapę do gry wg. wzorca z Listingu 1.1 stosując utworzone klasy Sprite'ów bazując na strukturze kodu HTML z Listingu 1.3
Zapisz projekt mapy w dokumencie stworzonym na poprzednich zajęciach game.html w węźle #game stosując się do poleceń z Listingu 1.4.

Wzorcowy wygląd mapy — 1.1 Przykład mapy wygenerowanej z utworzonych sprite'ów

1.2 Kategorie i nazwy dla tworzonych sprite'ów

Należy zastanowić się nad konwencją nazewniczą klas dla poszczególnych płytek Sprite'ów - NAZWA-NUMER: kolejna płytka na pozycji x,y (np. s-1-20), czy pełne nazwy kategorii (np. ulica-13) lub kategorie abc (np. a-15).

a LUB str - ulice
b LUB sdw - chodniki
c LUB bld - budynki
i LUB ind - instalacje przemysłowe
n LUB nat - trawy i wody
e LUB equ - ekwipunek
v LUB veh - pojazdy
z LUB sig - znaki

.texture1 {
  height: ?px;
  width: ?px;
}
.texture1 div {
/* klasa pojedynczego pliku złączonych tekstur */
  background-image: url('full-texture-1.png');
  display: inline-block; /* zostanie niedługo podmienione */
  height: ?px;
  width: ?px;
}
.texture1 .sprite1 {
/* pozycja obrazu tła:	X oraz Y; */
  background-position: -384px -128;
}
.texture1 .sprite2 {
  background-position: 0px -192px;
}
.r90 {
/* klasa obrotu dla każdej płytki */
	transform: rotate(90deg);
}

1.3 Przykład implementacji projektu mapy

Implementacja przykładowej mapy o rozmiarze 3x3 - składającej się z 3 wierszy płytek oraz 3 kolumn płytek.

<div class="texture1">
  <div class="str-10"></div><div class="str-11"></div><div class="str-12"></div>
  <div class="str-14"></div><div class="str-11"></div><div class="str-10"></div>
  <div class="str-14"></div><div class="str-11"></div><div class="str-10"></div>
</div>

render

1.4 Implementacja projektu mapy

Odwzoruj mapę z Listingu 1.1

W węźle #game utwórz nowy węzeł div#gameMap i umieść w nim kod z płytkami Sprite'ów.
Ułóż strukturę kodu HTML zaprezentowaną w Listingu 1.3 o rozmiarze 9 płytek szerokości oraz 6 płytek wysokości.
W pliku arkusza ui.css dopisz brakujące selektory oraz reguły dla #gameMap tak by zbudowana mapa wyświetlała się we właściwym miejscu interfejsu gry, a pojedyncze płytki sprite'ów wyświetlały się jedna za drugą.
Określ rozmiar kontenera mapy (9x6 płytek budowanej planszy) w pliku arkusza CSS map-1.css.

Sprite'y - tworzenie mapy gry

Zasoby lekcji

Ćwiczenia CSS: Spite'y

Przygotowanie