Wstęp
Przedstawiam wam tutorial pt. Jak zrobić własny skin do gry OGame na podstawie skina EpicBlue.
Na wstępnie zapoznaj się ze słownikiem pojęć, podstawami html i css oraz pobierz specjalnie przygotowany skin EpicBlue, z którego usunięto zbędne obrazy i dodano komentarze do pliku formate.css.
Słownik pojęć:
arkusz stylów - plik z rozszerzeniem .css zawiera w sobie informacje na temat stylu wyświetlania stron OGame
pliki obowiązkowe - wykorzystywane przez grę
pliki nieobowiązkowe - określone przez nas w arkuszu stylów
Podstawy html i css:
http://kurshtml.boo.pl/html/zielony.html
http://kurshtml.boo.pl/style/wstep.html
http://kurshtml.boo.pl/style/definicje.html
http://kurshtml.boo.pl/style/wstawianie.html
http://kurshtml.boo.pl/html/dalej.html
Pobierz szkoleniowy skin EpicBlue
Skład skina
Przyjrzyjmy się z czego składa się skin.
Skin EpicBlue składa się z 6 folderów i kaskadowego arkusza stylów(plik formate.css).
Przejdźmy do podfolderów. Pierwszy nazywa się gebaeude w nim znajdują się obrazki budynków, badań, statków i obrony. Są to pliki obowiązkowe.
Następny to folder o nazwie gfx, w którym przechowywane są belki z menu. Są to pliki obowiązkowe, ale możemy je ukryć za pomocą stylów.
W folderze pod tytułem images są obrazki surowców (te wyświetlane na górze prawie każdej strony). Są to pliki obowiązkowe.
Folder img przechowuje kilka znaczący plików:
b.gif - ikona BuddyListy
e.gif - ikona szpiegowania
m.gif - ikona wiadomości
r.gif - ikona ataku rakietowego
s.gif - ikona do przekazywania raportów
- są to pliki obowiązkowe.
background.jpg - tło strony
bg1.gif - tło górnego wiersza tabeli
bg2.gif - tło tabeli
- są to pliki nieobowiązkowe. Cała reszta obrazków nie jest wykorzystywane przez grę więc w pobranym przez was skinie ich nie ma.
W folderze pic znajdują się 3 obrazy wyświetlane w zarządzaniu sojuszem. Są to pliki obowiązkowe.
I ostatni folder nazywa się planeten, jak się zapewne domyślacie w nim umiejscowione są obrazki planet, księżyca i pola zniszczeń. Dodatkowo w tym folderze jest podfolder small w którym znajdują się miniaturki planet i księżyca .
Edytowanie arkusza stylów
Nie przechodź dalej jeśli nie zapoznałeś sie z podstawami html i css.
http://kurshtml.boo.pl/html/zielony.html
http://kurshtml.boo.pl/style/wstep.html
http://kurshtml.boo.pl/style/definicje.html
http://kurshtml.boo.pl/style/wstawianie.html
http://kurshtml.boo.pl/html/dalej.html
Wszystkie informacje o sposobie wyświetlania gry (np. kolor tła, wielkość czcionki) są zawarte w arkuszu stylów (plik formate.css). Do edytowania arkusza można używać przeróżnych programów, ale my będziemy to robić za pomocą zwykłego notatnika. Dla osoby kompletnie zielonej tworzenie własnych stylów może wydać się ogromnie trudne ale zaraz przekonacie się że tak nie jest. Zobaczmy na przykładowy styl css:
Jak widać jest to zbiór logicznie poukładanych elementów i atrybutów w języku angielskim. table(tabela) to element html do którego odnoszą się atrybuty font-family(rodzaj czcionki) i font-size(wielkość czcionki).
W przykładowym skinie dodałem komentarze, które ułatwią wam rozpoznanie wszystkich elementów, wygląda to tak:
Komentarze są zamknięte w nawiasie /**/ który powoduje, że tekst w nim jest ignorowany przez przeglądarkę internetową.
Skąd wiedzieć do jakich elementów się odnosić
W tej sytuacji musimy zaglądać do źródła stron gry co za tym idzie znajomość htmla wymagana. Aby zobaczyć źródło html strony należy:
W przeglądarce Internet Explorer:
Kliknij prawym przyciskiem myszy na stronę i wybierz "Pokaż źródło".
W przeglądarce Firefox:
Kliknij prawym przyciskiem myszy na stronę i wybierz Ramka / Pokaż źródło ramki. Udogodnieniem w Firefoxie jest przeglądanie źródła zaznaczenia w tym celu zaznacz dowolne elementy strony kliknij prawym przyciskiem myszy na stronę i wybierz Pokaż źródło zaznaczenia. Nakłaniam do korzystania z tej funkcji bo zdecydowanie skraca czas szukania elementów w kodzie html.
Klasy elementów
Wprowadzenie klas(class) w kodzie html powoduje że możemy zastosować różne atrybuty dla tego samego elementu ale o różnych klasach. Przykładowo:
element td(komórka tabeli), klasa tlo:
ten sam element td(komórka tabeli), ale klasa beztla:
Aby odnieść się do odpowiedniej klasy należy wpisać za nazwą elementu kropkę i nazwę klasy np. td.tlo
Element potomka
Jeśli jakieś elementy nie mają klas a chcemy im przypisać odmienne atrybuty to możemy zastosować odniesienie do potomka. Najlepiej to wytłumaczyć na przykładzie. Mamy kod html:
Aby przypisać jakiś atrybut -powiedzmy obramowanie(border) grube na 1 piksela- dla elementu td(komórka tabeli) za pomocą css to styl musi wyglądać:
- oddzielamy potomków spacją.
Odniesienie do elementu z atrybutami Na przykład:
Selektory mieszane Na przykład:
Kilka selektorów Na przykład:
Najlepszym sposobem na uczenie się cssa i htmla jest praktyka. Na początek spróbujcie edytować arkusz, o którym była mowa we wstępie. W miarę przybywania wiedzy będziecie potrafili stworzyć całkowicie własny styl.
Klasy dla poszczególnych elementów gry
Gra OGame jest zbudowana z 2 stron połączonych ramkami. Pierwsza ramka to lewe menu a w drugiej wyświetla się cała treść poszczególnych podstron (np. Podgląd , Galktyka). Programiści gry oznaczyli dokument html lewego menu klasą style, dzięki czemu możemy dla menu zastosować odmienne atrybuty.
Aby poznać klasy z innych stron musisz sam przeanalizować kod html gry.
Tricki
Jak zamiast obrazów .jpg zastosować pliki w innym formacie?
To proste jeśli chcemy podmienić plik jpg na gif to musimy zmodyfikować odpowiednio nazwę pliku gif, na przykład:
z debris.gif na debris.jpg.gif
odczywiście można na odwrót:
z metall.jpg na metall.gif.jpg
i z różnymi formatami:
z debris.png na debris.jpg.png
Usuwanie obrazków z menu
Zmniejszanie obrazków planet z podglądu
Zmniejszanie/Usuwanie obrazków planet z galaktyki
Autor: Jarusek ©