Animacja ruchu po koordynatach - canvas

Utknąłem w martwym punkcie przy robieniu modułu do mini gry. Zasada jest taka, że gracz rysuje myszka linię a po kliknięciu buttona "go" kulka zasuwa według podanych koordynatów wzdłuż narysowanej linii. Udaje mi się zebrać te koordynaty czy to w formie tabeli czy obiektu ale nie wiem jak je przekazać przez requestAnimationFrame() do API canvas. Już nie zliczę ile nieskończonych pętli popełniłem do tej pory. Ma ktoś pomysł jak to zrobić? A może jest tu jakiś błąd koncepcyjny i się po prostu tak nie da?
Link do jsfiddle: http://jsfiddle.net/...moo83/exenqqdo/

Normalnie uwielebiam to forum. Zawsze się znajdzie jakiś ziomal co poratuje . Gierka jest typowo "branżowa". Tzn. dotyczy branży w mojej firmie. Chodzi o wycinanie wzorów w materiale. Trzeba będzie według szablonu jak najszybciej wyciąć jakiś tam wzór a ta "kulka" będzie miała teksturę nożyc i będzie po prostu zasuwać po tych liniach które gracz wyznaczy. To tak w skrócie bo w zamyśle jest trochę bardziej rozbudowana. Dzięki wielkie:)

Tam na końcu skryptu możesz też dać po prostu tak:

button.addEventListener("click", go);

Bo i tak to nic nie zmienia.

A w funkcji dałem ci setTimeout() zamiast requestAnimationFrame(), żeby ten timer po skończonym ruchu zatrzymać.

Fajnie to wygląda. Muszę się bliżej przyjrzeć canvasowi i jego możliwościom

Tam na końcu skryptu możesz też dać po prostu tak:

button.addEventListener("click", go);

Bo i tak to nic nie zmienia.

A w funkcji dałem ci setTimeout() zamiast requestAnimationFrame(), żeby ten timer po skończonym ruchu zatrzymać.

No właśnie zastanawiałem się czemu setTimeout(). Teraz czaję o co chodzi:)

Fajnie to wygląda. Muszę się bliżej przyjrzeć canvasowi i jego możliwościom

Gry HTML5 to jest moja największa pasja ostatno:) Normalnie korzystam z Phasera więc jest dużo łatwiej ale akurat ten projekcik będzie elementem strony www

 i nie mogę tam podpiąć zewnętrznej biblioteki dlatego muszę się męczyć z czystym JS.

Myślę, że nie ma sensu tworzyć nowego tematu więc zapytam tutaj. Kwestia dotyczy optymalizacji tej mini gierki. Jest tam zmienna

var trasa = [];

która, przechowuje koordynaty ruchu myszki. Zauważyłem, że na żadnym etapie nie czyszczę tej zmiennej i jej zawartość się kumuluje. Po kilku minutach testowania są tam już tysiące, zapisanych koordynatów. Co ciekawe nie zauważyłem żeby gra "zwalniała" przez to (może dlatego, że póki co to tylko taki "silnik" bo nie ma tam żadnych grafik jeszcze). Pytanie trochę z gatunku game dev ale jak się takie rzeczy załatwia w grach? Czy ilość danych jakie taka zmienna przechowuje może mieć wpływ na wydajność? Jeśli tak to jaka jest zasada czy trzeba ją raz na jakiś czas wyzerować czy może trasę zapisywać do wielu zmiennych? A co jeśli koncepcja gry zakłada, że potrzebuję zapisywać te wszystkie koordynaty i mieć do nich dostęp? Sorry że tak dużo pytań ale może jest tu jakiś game developer, który ma jakąś praktyczną wiedzę na ten temat i mnie nakieruje. Po prostu nie chciałbym, żeby się okazało, że finalna gra ma "buga", który powoduje, że po kilku minutach zapycha pamięć i nie da się grać.

Odświeżam temat
Koncepcja gry się na tyle rozrosła i pozmieniała, że zrezygnowałem z robienia tego w czystym JS bo stwierdziłem, że prędzej osiwieję niż to skończe. Gierka będzie oparta na bibliotece Phaser. Pytanie do osób obeznanych z tą biblioteką:

Używając klasy 'tween' uruchamiam w tej grze animację wycinania według zaznaczonych koordynatów. Zauważyłem, że animacja na ułamek sekundy zacina się na ostatnim koordynacie. Wie ktoś jaka jest tego przyczyna? Za cholerę nie umiem tego rozkminić.

Kolejna rzecz to ta funkcja:

game.add.tween(scissors).to( { x: pathX, y: pathY}, 2000, "Sine.easeInOut", true, 0, 0, false);

Potrzebuję do obiektu

{ x: pathX, y: pathY}

na samym końcu tabeli pathX i pathY przekazać z powrotem koordynaty pierwszego punktu, żeby nożyce wycieły pełny kształt. Na chwilę obecną dojeżdżają do ostatniego punktu i uciekają do schowka. Wiem, że to może być zbyt niejasne ale może ktoś robi gry na tej bibliotece i spotkał sie z podobnymi problemami.

Tutaj wrzucam ten moduł animacji wycinania:

http://test3.ct8.pl/

Użytkownik przemoo83 edytował ten post 30 czerwca 2015 - 15:12

To powiem ci, że dobrze trafiłeś. Moja ulubiona bibliotek. Niedawno zostało ponownie uruchomiane forum dla twórców gier http://webgamedev.pl gdzie tym razem znajduje się dział poświęcony tej bibliotece. Oficjalne forum twórcy tej biblioteki to http://html5gamedevs.com
W tej chwili ci nie odpowiem na pytanie, zajrzę tam w wolnej chwili.

Nawet nie wiedziałem, że jest polskie forum Phasera. Póki ci widzę, że niewiele się tam dzieje ale chętnie dołoże starań żeby je rozruszać .  Co do

http://html5gamedevs.com

to znam to forum bardzo dobrze bo dzięki nim stawiałem pierwsze kroki w grach HTML5. Problem z nimi jest taki, że tam jest tyle tematów, że mało komu się chce zaglądac do kodu jeśli jest dłuższy niż pare linijek więc szukam pomocy gdzie się da  

Nawet nie wiedziałem, że jest polskie forum Phasera. Póki ci widzę, że niewiele się tam dzieje ale chętnie dołoże starań żeby je rozruszać .  Co do

http://html5gamedevs.com

to znam to forum bardzo dobrze bo dzięki nim stawiałem pierwsze kroki w grach HTML5. Problem z nimi jest taki, że tam jest tyle tematów, że mało komu się chce zaglądac do kodu jeśli jest dłuższy niż pare linijek więc szukam pomocy gdzie się da

A tam. Ja Wam tutaj dzial zaloze Powiedzcie jakie subfora chcecie

A tam. Ja Wam tutaj dzial zaloze Powiedzcie jakie subfora chcecie

Robiłem tak i mi nie działało ale teraz jak mi o tym przypomniałeś to spróbowałem od nowa i wiem w czym problem. Ta sama funkcja, która wysyła nożyczki z powrotem w kąt zeruje również wszystkie poprzednie koordynaty. Nie mogło to działać bo tablice były wyzerowane. Wrzucę sobie to czyszczenie do innej funkcji albo w jakiś callback i powinno działać

Robiłem tak i mi nie działało ale teraz jak mi o tym przypomniałeś to spróbowałem od nowa i wiem w czym problem. Ta sama funkcja, która wysyła nożyczki z powrotem w kąt zeruje również wszystkie poprzednie koordynaty. Nie mogło to działać bo tablice były wyzerowane. Wrzucę sobie to czyszczenie do innej funkcji albo w jakiś callback i powinno działać

Ciekaw jestem jak to się rozwija. Jak możesz to pokaż

Jak tylko będzie miało to jakąś "grywalną" postać to na pewno wrzucę . Póki co gra jest w "kawałkach"