23 03 2017
Szczegóły, które podnoszą grywalność – „soczystość” na przykładzie rozwijanego projektu
Czas na kolejny DevLog – tym razem o szczegółach, które podnoszą grywalność, a nie wymagają dużego nakładu pracy. Mowa o „soczystości” produktu.
Before / after
Najlepiej pokazać to na przykładzie. Niżej krótki film z włączonymi i wyłączonymi efektami soczystości. Dla lepszego efektu mogłem również wyłączyć rożne dźwięki np. trampolin etc. to też można zaliczać pod „soczystość”.
Więcej cząsteczek! – Particles, particle effects
Bardzo prosty efekt, przez który nasz gra zyska na soczystości. Jest to często wykorzystywane np. podczas poruszania się bohatera. Łatwo o tym zapomnieć, bo wydaje się to „oczywiste”, ale znacząco wpływa na odbiór produktu.
Niżej przykład cząsteczek deszczu, cząsteczek przy kontakcie z podłożem i wpadaniu do lawo-kwasu w moim projekcie. Było to bardzo proste do zaimplementowania, a dodaje smaku.
Jak takie coś uzyskać w własnym projekcie? Kod źródłowy najlepiej sobie zobaczyć na przykładach ze strony Phasera.
Tweeny
Tween, czyli zmiana danej wartości w jakimś czasie. Możemy np. pobawić się przezroczystością (zwiększa się i zmniejsza), by uzyskać np. taki efekt:
Sam skok postaci (podczas którego się obraca), to nie jest żadna animacja. To również prosty tween zriobiony 1 linijką kodu:
game.add.tween(player).to( { angle: 360 }, 600, Phaser.Easing.Linear.None, true);
Również do tweenów znajdziecie przykłady na stronie Phasera.
Camera shake – prosty i skuteczny efekt
Wykorzystuję np. delikatny wstrząs kamerą podczas wpadania do lawo-kawsu:
Albo trochę intensywniej podczas efektu wybuchu TNT. 😀
Ponownie przykłady z phaser.io pomogą uzyskać szukany przez Was efekt.
Dźwięk
W filmie z „before / after” należy również zwrócić uwagę na dźwięk. Dodanie w tle dźwięku deszczu + cząsteczki z efektem deszcze to 20 minut pracy, a dodaje całości dużo uroku.
Juice it or lose it! Świetny talk na ten temat
Jeśli macie 15-16 minut, to polecam zobaczenie talku „Juice ot or lose it” – bardzo sympatycznie omówiony jest temat soczystości w naszym produkcie.
Zalety otwartego kodu. Pierwsza pomoc na na GitHubie!
Nie mam z tym problemu, by dalej pisać kod, który jest daleki od ideału. Ważne, by nie mieć blokady, po prostu pisać i uczyć się na projekcie, a nie przez suchą teorię.
Np. includowanie plików w pliku index.html od początku wydawało mi się trochę dziwne. Na szczęście pojawiła się osoba, która na GitHubie zasugerowała mi lepsze rozwiązanie.
Postaram się temu zasugerowanemu importowaniu niedługo przyjrzeć.
Po raz kolejny widać, ze w ramach nauki trzeba po prostu pisać, nie bać się i pokazywać kod. Napiszę kiepsko, później odrobinę lepiej, ktoś coś doradzi (albo sam na coś trafię) i tak w kółko. Jeszcze 2-3 tygodnie temu moje pisanie w JS było bezmyślnym klepaniem kodu, który działał, ale wiele rzeczy nie do końca rozumiałem. Teraz to wszystko powoli zaczyna mieć to jakąś strukturę i lepiej wiem co się gdzie dzieje. Nie można dać się zwariować tym, że jest tyle rzeczy, których wciąż nie wiemy (np. powoli wszystko w moich oczach ma lepszą strukturę, ale jestem pewny, że jest masę dobrych praktyk w JS, o których nie mam pojęcia) – ważne, że dzisiaj wiem trochę więcej niż wczoraj.
Co za tydzień?
Jeszcze do końca nie wiem… może pokaże parę przykładów z czyszczenia kodu źródłowego pierwotnego prototypu?
Do zobaczenia w kolejnym DevLogu gry webowej za tydzień!
Kontaktowanie mediów z własnym projektem? Porady, krótkie case study i doświadczenia po „byciu mediami” Gruby kot nie poluje. Co robić jak się już nie rozwijamy, wypalamy?
Co do kamery, w grach 2D absolutny must have: interpolacja. Świetnie dodaje dynamizmu i dodaje filmowego uroku.
Nie próbowałem nigdy – dzięki. 🙂
Właściwie to można to rozwinąć do ogólnego unikania stałego ruchu, jeżeli coś przyspiesza aby osiągnąć daną prędkość to jest to zdecydowanie milsze dla oka niż gdy ten ruch jest nagły. Jeżeli mamy gdzieś kręcący się element symbolizujący oczekiwanie to przyspieszanie i zwalnianie tej rotacji sprawia, że nie jest już taki nudny. To jest chyba oczekiwanie z win10: https://4.bp.blogspot.com/-tqB3UP6KYaM/VItDu0F9kdI/AAAAAAAAATs/QB0X4AqWWY0/s1600/spinningwheel.gif ta niejednostajność dodaje uroku 🙂 Minus jest taki, że tego typu rzeczy są dość trudne do zaimplementowania.
Ja skorzystałem ostatnio z https://github.com/lean/phaser-es6-webpack
Fajna sprawa, bo jak zapiszę w edytorze, to webpack od razu przeładuje stronę.
O, dzięki za pro-tip.