Szczegółowy widok gry – dynamiczne kolorowanie

Odpowiednia prezentacja danych (cześć 2 z 3)

Dbałość o szczegóły – etap 1., czyli dynamiczny kolor boxa zależny od oceny gry przez użytkownika i przygody z modelami przestrzeni kolorów.

Podstawowy box

BoardGamePage_RatingColor2
Nowy szczegółowy widok gry

W podstawowej wersji box to zwykły grid z szarym tłem i ciemniejszą ramką. Jednak by urozmaicić widok pojedynczej gry zdecydowałem się dodać kolorowanie boxa z oceną użytkownika w zależności od jej wartości. Dzięki temu informacja ta jest lepiej przyswajalna i wizualnie przyjemniejsza.

RGB a HSL

W modelu przestrzeni barw RGB każdy kolor reprezentowany jest przez współrzędne w sześcianie:

Model przestrzeni barw RGB
Model przestrzeni barw RGB

Kolor można jednak opisywać na różne sposoby, dlatego też powstało wiele różnych modeli(lista). Jednym z nich jest HSL, który jest bardzo przydatny przy tworzeniu gradientów. Składa się od z trzech składników:

  • Hue – barwa (położenie na kole kolorów)
  • Saturation – nasycenie („ilość” koloru)
  • Luminosity – jasność (jak jasny jest kolor)
Model przestrzeni barw HSL
Model przestrzeni barw HSL

Standardowo do opisu koloru w HSL używa się opisu typu (°, %, %), np. (36°, 73%, 10%). Zaletą HSL jest powiązanie ze sobą kolorów:

HSL_ColorComparison
Brązowy (36, 73%, 10%) a kremowy (36, 33%, 80%)

To ten sam kolor tylko ze zmniejszonym nasyceniem i zwiększoną jasnością. Voilà, prosty sposób na płynne przejście między kolorami. Dla porównania w RGB ów brąz to rgb(44, 29, 7) a kremowy rgb(221, 207, 187).

Konwerter

Jest tylko jeden drobny szkopuł – Windows.UI nie wspiera natywnie HSL, zatem musimy napisać własny konwerter z HSL do RGB. Wikipedio, ratuj!

Akurat w tym przypadku przydatniejszy okazał się post autorstwa Nikolaia Waldmana – link oraz kod autorstwa Jamesa Ramsdena – link. Rezultat:

Mając konwerter z HSL do RGB możemy zacząć ustalać jak będzie wyglądało nasze dynamiczne kolorowanie. Jako że gra może być oceniona w skali od 1 do 10 to można przyjąć analogie do sygnalizatorów ulicznych i 1 to gra, której należy się wystrzegać(czerwony) a 10 oznacza grę, którą trzeba kupić(zielony). Po drodze zahaczymy o pomarańcz – zastanów się czy warto. Na kole barw(hue) odpowiadają tym kolorom wartości od 0 do 100.

Liniowość vs wielomian

Miło się złożyło, że skala ocen to 1-10 a kolorów 1-100, więc szybko nasuwa się proste rozwiązania pt. mnożenie przez 10. Biorąc pod uwagę fakt, że ludzie nie korzystają z pełnej skali tylko ich oceny skupiają się wokół niskich bądź wysokich not(impuls do wysiłku w postaci wystawienia oceny) warto, żeby były one jak najbardziej rozróżnialne wizualnie. // (wygooglujcie: np. rating scales science)

RatingColor_comparison
Porównanie dwóch funkcji obliczania koloru

Jak stworzyłem drugą funkcję? O dziwo, przydały mi się tu studia i znajomość pojęcia pt. interpolacja wielomianowa. Chciałem, żeby kolor w górnym przedziale(>6) zmieniał się w większym stopniu, dlatego stworzyłem szybki programik w C++(link) i uzyskałem przykładowe wartości dla kolejnych ocen:

Następnie wystarczyło skorzystać z jakiegoś narzędzia z funkcją interpolacji wielomianowej np. Octave i uzyskałem ów wzór. Oczywiście mogłem stworzyć tabelkę 10 wartości, ale byłoby to rozwiązanie mało uniwersalne (szczególnie, że chwilę później zmieniłem przeskok w suwaku na 0.5).

W środę chciałbym opisać kontrolkę Content Dialog, zatem wracam do Blenda 😉

Autor: Paweł Rzepiński

Dev-wannabe, pasjonat gier planszowych i zimowego szusowania

Jedna myśl na temat “Szczegółowy widok gry – dynamiczne kolorowanie”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *