Autor Wątek: Juice it or lose it  (Przeczytany 5527 razy)

Offline zxc

  • Użytkownik

  • +1
# Maj 28, 2012, 17:16:32
http://www.youtube.com/watch?v=Fy0aCDmgnxg

Bardzo fajny, krótki talk na temat tanich sztuczek, które potrafią mocarnie uatrakcyjnić grę. Jeśli jeszcze nie stosujecie u siebie tweenowania wszystkiego - po tej prezentacji zaczniecie.

Niecierpliwi mogą od razu obejrzeć soczyste tweenowanie w działaniu: http://grapefrukt.com/f/games/juicy-breakout/

Dobra wiedza. Od teraz jeśli ktokolwiek się Was spyta jak sprawić aby gra wyglądała atrakcyjnie: linkujcie do tego filmu.

Offline Mr. Spam

  • Miłośnik przetworów mięsnych

Offline rm-f

  • Użytkownik
    • Tu trolluje

# Maj 28, 2012, 17:24:05
Myślicie że w tej grze nie da się przegrać? :D

Tadam!

Offline Paweł

  • Użytkownik

# Maj 28, 2012, 19:19:11
Coś w tym jest. Ostatnio pisałem na zaliczenie gre w javie: http://youtu.be/3xKGe8f4UxA i z tego co się orientowałem to najbardziej podobały się wstrząsy ekranu, czyli najtańszy (czasowo) 'trik'. Niestety nie udało mi się tej gry zbalansować.

Offline zxc

  • Użytkownik

# Maj 28, 2012, 19:38:46
@Paweł: wszystkie z tych efektów są czasowo równie tanie jak wstrząs ekranem. Jeśli nie są dla Ciebie, to you're doing it wrong :).

Przykładowo: bounsnięcie wieżyczką dla Twojej gry. Tak, żeby podskoczyła przy wstawieniu.
(w AS3, z Tweenerem)
wiezyczka.scaleX = 1.2;
wiezyczka.scaleY = 1.2
Tweener.addTween(wiezyczka, {scaleX: 1, scaleY: 1, time: 0.1, transition: "easeOutElastic"});
Ważne, żeby móc to napisać w jednym miejscu i nie troszczyć się o updatowanie tej interpolacji co klatkę.

Offline jorul

  • Użytkownik

# Maj 28, 2012, 20:19:24
Myślicie że w tej grze nie da się przegrać? :D

Tadam!
A jednak się nie da. Jak przytrzymasz lewy przycisk myszki to skręca;)

A przykład super:) Dzięki!

Offline Paweł

  • Użytkownik

# Maj 28, 2012, 20:41:00
@zxc: dorobiłem 'podskok', musiałem dodać do wieżyczki pole scale i w kodzie wygląda to tak:

void addTower(){ /* ... */
class TowerTimer extends Timer{
  TowerTimer(Tower t){
    super( 30, 10 ); //wykona sie 10 razy co 30 ms
    tower = t;
    //tower.y -= 10;
  }

  @Override
  void onUpdate()
  {
    //tower.y += 1;
    tower.scale = 1.f + 0.6f*( 1.f - this.precentageProgress() );
  }
Tower tower = null;
}
}//addTower
game.timers.addTimer(new TowerTimer(t) );
towers.add(t);
Timer to także 'moja' klasa. No kodu faktycznie jest więcej, ale nie jest jakiś skomplikowany. W każdym razie dzięki za radę bo faktycznie potrzebny był jakiś znak dla gracza ( mnie ) że wieża została zbudowana.
Aczkolwiek easing fajnie wygląda i warto mieć te równania wklepane w kodzie.
« Ostatnia zmiana: Maj 28, 2012, 20:45:58 wysłana przez Paweł »

Offline zxc

  • Użytkownik

# Maj 28, 2012, 21:33:02
@Paweł: coś takiego działa, ale tu nie chodzi o to, żebyś potrafił wstawić do gry efekt, który wymyśliłeś, tylko żebyś mógł wstawiać do gry efekty błyskawicznie i mieć natychmiastowy feedback. Kluczowe jest to, żeby ten kod móc wstawić w jednym miejscu. Wtedy się nie będziesz musiał zastanawiać, tylko będziesz testował aż wyiterujesz zadowalająco wyglądającą grę.

Ty dla każdego nowego efektu musisz stworzyć sobie nową klasę rozszerzającą Timer? To oznacza zbyt dużo roboty przy każdym efekcie, aby swobodnie je sobie wstawiać i kombinować - mówię z własnego doświadczenia, mi się nie chciało. Od biedy możesz podawać timerowi dynamiczną funkcję, którą on będzie odpalał na updacie i będziesz miał rozwiązanie w jednej linijce. Ale najlepiej poszukaj jakiejś biblioteki tweenującej do Javy.

Generalnie polecam samemu kombinować. Łatwe i szybkie tweenowanie to jest coś, o czym mało kto mówi, a jest absolutną podstawą jeśli chcesz zrobić fajnie wyglądającą grę.

Powiedzmy, że chcę mieć napis, który jak się pojawia na ekranie  to powinien podskoczyć, obrócić się, zostać na pół sekundy, a później powoli zgasnąć. Ja to robię w 3 właściwych linijkach:

napis.scaleX = 0;
napis.scaleY = 0;
Tweener.addTween(napis, {scaleX: 1, scaleY: 1, time: 1, transition: "EaseOutElastic"});
Tweener.addTween(napis, {rotation: 360, time: 0.5, delay: 1, transition: "EaseOutExpo"});
Tweener.addTween(napis, {alpha: 0,  time: 2, delay: 2, transition: "linear"});

I już po chwili wiem, że to wygląda brzydko :). Jak szybko Ty byś mógł przetestować taki pomysł u siebie?

Offline .:NOXY:.

  • Użytkownik
    • Profil

# Maj 28, 2012, 21:46:15
Genialna prezentacja w sumie moj konik :) jak by na to nie patrzec w pracy glownie walsnie takim czyms sie zajmuje :3

Offline raver

  • Użytkownik
    • Moja strona domowa.

# Maj 28, 2012, 23:23:47
napis.scaleX = 0;
napis.scaleY = 0;
Tweener.addTween(napis, {scaleX: 1, scaleY: 1, time: 1, transition: "EaseOutElastic"});
Tweener.addTween(napis, {rotation: 360, time: 0.5, delay: 1, transition: "EaseOutExpo"});
Tweener.addTween(napis, {alpha: 0,  time: 2, delay: 2, transition: "linear"});
Mnie tylko jedno zastanawia - czemu do tego nigdzie nie mogę znaleźć fajnego toola przy pomocy którego mógłbym w prosty sposób wyklikać sobie taką animację i wyeksportować do jakiegoś zjadliwego formatu i potem użyć w grze? Toż to się samo prosi o zrobienie czegoś takiego, zamiast pisać to wszystko w kodzie :).
« Ostatnia zmiana: Maj 28, 2012, 23:26:50 wysłana przez raver »

Offline Paweł

  • Użytkownik

# Maj 28, 2012, 23:50:30
@zxc: Rozszerzenie klasy to dla mnie właśnie ułatwienie, by nie trzeba było pisać wiele razy kodu odmierzającego czas i wykonującego zadanie. Niestety w javie nie ma funkcji więc tylko klasy ( interfejsy ) zostają. Np. w c++ można by to tak zapisać:
game.timers.addTimer(30,10, [&tower](float precentageProgress){
  tower->scale = 1.f + 0.6f*( 1.f - precentageProgress );
} );
Taki urok javy.
Mimo to zgadzam się z tobą w zupełności. Im szybciej uda się utworzyć i przetestować efekty tym lepiej i fajniej. I nie dotyczy to tylko efektów ale także logiki. Np. nie dokończyłem balansowania gry, ponieważ zmiana parametrów wież ( cena, szybkość strzału, obrażenia, zasięg, szybkość pocisku ) oraz statków ( szybkość, życie, kasa, ilość w fali, przyrost życia ) zajmowała za dużo czasu. Zmień wartość - kompiluj - uruchom.  W c++ jest jeszcze gorzej bo kompilacja jest dłuższa niż w javie. Wyrzucenie tego do skryptu zapewne polepszyłoby sytuację, ale i tak najlepsze efekty dałoby gui pozwalające tweakować te parametry. Gui też jednak trzeba napisać/podpiąć, ustawić kontrolki, zrobić skina żeby pasował do gry itd. W podlinkowanej grze jest fajne gui, służy jednak bardziej do wyboru efektów niż ich tweakowania. Pytanie czy przy mniejszych produkcjach takie gui to nie jest overkill?
A co do podskakującego tekstu to pewnie najwięcej czasu z tego zajełoby mi napisanie równań easeOut, bo ciało klasy to mi eclipse wygeneruje.
Choć przyznaje, że twenner może okazać się praktyczniejszy do kontroli zmiennych niż Timer (który napisałem do odtwarzania animacji eksplozji i tak już został).


@Noxy: huh, pozazdrościć :)

Offline zxc

  • Użytkownik

  • +2
# Maj 29, 2012, 00:11:40
To nie tak :).

W kodzie jest szybciej z większością prostych rzeczy. Program musisz otwierać (ok, załóżmy, że jest otwarty), później wyklikiwać animację, później ekportować ją, później importować, po drodze przechodzisz przez system plików i wybierasz zapis do odpowiedniego katalogu. I to musisz zrobić przy każdej zmianie. Szybciej jest wpisać linijkę kodu.

Pisząc w AS3 alternatywą dla tweenowania programowego jest Adobe Flash - program do animacji. Tam możesz sobie to wszystko wyklikać, a później z łatwością wywołać z poziomu kodu. I rzeczywiście do bardziej zaawansowanych zachowań jest niezastąpiony. Ale to do bardziej skomplikowanych rzeczy niż wyskakujący napis - animacja postaci, elementów świata gry, dziwniejszych partykli.

@Paweł:
tutaj jest jakieś javowe rozwiązanie do tweenowania i wygląda bardzo praktycznie:
http://stackoverflow.com/questions/4963902/is-there-a-tweenmax-equivalent-in-java

Jeśli chodzi o tweakowanie gry, to z reguły można znaleźć jakieś fajne rozwiązanie pośrednie. Możesz wczytywać dane z xmla, edytować xmla w czasie tweakowania i do samej gry dodać tylko przycisk "refresh", który wczytuje nowe dane.

Ja w najnowszej grze mam edytor, który polega na tym, że w grze się edytuje xmla, który jest parsowany kiedy naciśniesz f1. Do tego przesuwanie obiektów z alt-kliknięciem i tyle. Zrobienie tego edytora zajęło dzień. Jestem dumny z tego rozwiązania, bo było szybko i działało. Pod każdym względem jest to słaby edytor - poza tym, że zrobiłem na nim wszystko, czego potrzebowałem :).

Na specjalne menu do tweakowania nie traciłbym czasu. Za mała elastyczność - każdą nową funkcję musisz wyciągnąć do tego menu, aby tweakować. Strata czasu w większości przypadków, IMHO.

Offline Krzysiek K.

  • Redaktor
    • DevKK.net

# Maj 29, 2012, 11:10:29
Cytuj
Mnie tylko jedno zastanawia - czemu do tego nigdzie nie mogę znaleźć fajnego toola przy pomocy którego mógłbym w prosty sposób wyklikać sobie taką animację i wyeksportować do jakiegoś zjadliwego formatu i potem użyć w grze? Toż to się samo prosi o zrobienie czegoś takiego, zamiast pisać to wszystko w kodzie :).
Słabo szukałeś. Taki tool to na przykład Adobe Flash CS6. ;)

Cytuj
Zmień wartość - kompiluj - uruchom.
Ant Tweak Bar - googluj. No i stosuj precompiled headery (w których inkludujesz TYLKO pliki systemowe i bibliotek) oraz inkluduj własne pliki H tylko tam gdzie potrzeba. Od kiedy to stosuję nie mogę narzekać na czas kompilacji.

Cytuj
Program musisz otwierać (ok, załóżmy, że jest otwarty), później wyklikiwać animację, później ekportować ją, później importować, po drodze przechodzisz przez system plików i wybierasz zapis do odpowiedniego katalogu. I to musisz zrobić przy każdej zmianie. Szybciej jest wpisać linijkę kodu.
Program masz otwarty i skryptujesz go tak by eksport robic jednym kliknięciem (przykład: skrypt Pythona w Blenderze siedzący w osobnym miniaturowym okienku i wyświetlający przycisk). Ten sam skrypt może odpalać konwerter przez command line. A gra po zauważeniu zmiany czasu modyfikacji może sama zassać nowy plik. Efekt: jedno kliknięcie.

Jeżeli widzisz że coś jest uciążliwe, to to popraw. :)

Cytuj
Na specjalne menu do tweakowania nie traciłbym czasu. Za mała elastyczność - każdą nową funkcję musisz wyciągnąć do tego menu, aby tweakować. Strata czasu w większości przypadków, IMHO.
Co prawda tego nie używam ale całkiem niedawno zrobiłem sobie częściowo system (jeden plik H), w którym:
- możesz deklarować zmienne globalne poprzez specjalne makro,
- wszystkie te zmienne są widoczne i edytowalne przez AntTweakBar,
- po wyjściu z programu zmiany wartości są zapisywane spowrotem do kodu ;)

Prościej się chyba nie da. :)

Offline Kos

  • Użytkownik
    • kos.gd

# Maj 29, 2012, 11:21:10
Na specjalne menu do tweakowania nie traciłbym czasu. Za mała elastyczność - każdą nową funkcję musisz wyciągnąć do tego menu, aby tweakować. Strata czasu w większości przypadków, IMHO.
Wciąganie nowej funkcji do menu to mniej więcej taki effort jak wstawienie nowego tweena :) Jedna linijka kodu.

Pamiętam zabawę z biblioteczką do C++/OpenGL pod tytułem AntTweakBar- banalna do podpięcia, robi wszystko co trzeba (dodawała na wierzch aplikacji przesuwalne i zamykalne okienko, do którego można było dodać 1 linią kodu przez wskaźnik dowolne zmienne do tweakowania).

e-> Ups, Krzysiek już napisał. :D

Cytuj
ale całkiem niedawno zrobiłem sobie częściowo system (jeden plik H), w którym (...)
Link do githuba plz? :D
« Ostatnia zmiana: Maj 29, 2012, 11:23:26 wysłana przez Kos »

Offline zxc

  • Użytkownik

# Maj 29, 2012, 12:22:15
Cytuj
Wciąganie nowej funkcji do menu to mniej więcej taki effort jak wstawienie nowego tweena :) Jedna linijka kodu.
Z reguły to wygląda tak, że robisz sobie narzut "podepnę tweakbara, żeby móc łatwo edytować WSZYSTKIE wartości", a później jak już to wszystko wyciągniesz to się nie chce edytować.

Cytuj
Program masz otwarty i skryptujesz go tak by eksport robic jednym kliknięciem (przykład: skrypt Pythona w Blenderze siedzący w osobnym miniaturowym okienku i wyświetlający przycisk). Ten sam skrypt może odpalać konwerter przez command line. A gra po zauważeniu zmiany czasu modyfikacji może sama zassać nowy plik. Efekt: jedno kliknięcie.
Mówiłem o prostych animacjach w stylu "napis wjeżdża z lewej, zatrzymuje się na 2 sekundy, wyjeżdża z prawej". Takich animacji przy grze potrzeba dużo i podtrzymuję: łatwiej napisać to w trzech linijkach niż edytować w oddzielnym programie.

Wyobrażam sobie, że Ty wykorzystywałeś taką technikę robiąc swoje FPSy, gdzie edytowałeś poziomy w blenderze. Dla takich rzeczy to jest ekstra podejście, bo tu rzeczywiście potrzeba zewnętrznego programu.

Cytuj
Co prawda tego nie używam ale całkiem niedawno zrobiłem sobie częściowo system (jeden plik H), w którym:
- możesz deklarować zmienne globalne poprzez specjalne makro,
- wszystkie te zmienne są widoczne i edytowalne przez AntTweakBar,
- po wyjściu z programu zmiany wartości są zapisywane spowrotem do kodu ;)
Fajne! Zwłaszcza to zapisywanie z powrotem do kodu. Przy tweakbarze jest problem, że fajnie się pobawić suwakami, ale później przepisywać tych wartości się nie chce.

Offline mihu

  • Użytkownik
    • mihu

# Maj 29, 2012, 12:25:40
Cytuj
Ant Tweak Bar - googluj.
Good shit. :D Zintegrowałem z "silnikiem" w 10 minut.