JS Canvas kolizje kwadratow

Bazan OP · 24-05-2014 19:40

Witam,

w ramach nauki javascript robie sobie rozne testy na canvasie. Zrobilem sobie jakies tam kwadraciki ale mam problem z kolizjami.

Dzialaja ale tak mocno średnio, i jeszcze nie na kursor a powinny. :/
Za duzo zjadaja CPU i jak jest za duzo kwadratow to cholernie zacina sie. Teraz ustawilem na 3, na 7 juz mialem pokaz slajdow, a docelowo to powinno działać i na 50 :/

Moj projekt jest tutaj: http://html.stronademo.pl/canvas_test/

Kod mozecie sobie oczywiscie pobrac bez problemu.

Jak zrealizowac kolizje klasycznych kwadratow?

Na razie jest tak ze na drugim canvas nie widocznym, obiekty kolizyjne rysuje na czerwono. I przy kazdej klatce dla kazdego obiektu przy akcji rysuj wykonuje funkcje hittest ktora odpowiednio odbija kwadrat w poziomie lub pionie.

Kompletnie nie wiem jak zrealizowac to zeby kwadrat odbil sie nawet jak odbije sie od niego inny kwadrat duzo mniejszy. Nie wiem jak efektywnie sprawdzic odbicie na kazdej ze scian. Najpierw zrobilem petle for po kazdym pikselu dla kazdej ze scian (gorna dolna prawa lewa), ale cholernie zamulalo. Pozniej zrobilem tak ze dla kazdej sprawdzam 4 punkty na scianie, troche lepiej chodzilo ale nadal klatkowalo :/

Anyone?

Mistrzu dragon · 24-05-2014 20:23

Dopiero jutro zabieram się za naukę tego (xd), ale może to w czymś pomoże : http://jsfiddle.net/AbdiasSoftware/Y7MFq/14/

Alex Fortune · 24-05-2014 20:56

Jak na moje źle podzielone odpowiedzialnosci.

Wprowadzilbym cos na zasadzie WorldMatrix , do tego CollisionDetector. I tam posylasz dwa kwadraty i sprawdzasz na tej podstawie ;p

@Edit
I sprawdzaj po intach a nie GetImageData, bo to jest overkill.

Zaraz Ci skubne przykład

Bazan OP · 25-05-2014 01:30

Alex Fortune napisał

Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.

WorldMatrix , do tego CollisionDetector

Dafuq? xD

Stary pisz do mnie po polsku xD

A tak serio :P Tez stwierdzilem ze sprawdzanie kazdej sciany po kolei jest glupie. Lepiej jest sprawdzic czy moze aktualny obiekt nie jest w polu sprawdzanego obiektu.

Cos na zasadzie:

Kod:

Foreach wszystkie_obiekty as obiekt {

 if (moj_obiekt zawiera sie w obiekt) { odbij(); }

}

Dobrze mysle?

Ale co w przypadku gdy obiektow bedzie na prawde duzo? Chcialbym cos niezaleznego od ilosci obiektow w canvasie :/

Co do getImageData to widzialem to w tutorialu i na chlopski rozum to bylo dla mnie spoko, ale jesli przegladarce to dlugo zajmuje wyciagnac dane z pixela to moze faktycznie za duzo roboty i wyjasnialoby to takie sciny ;P

albo jak to zrobic gdy chcialbym by na canvasie poruszaly sie obiekty kolidujace lub nie. Np bede mial jakies fajerwerki / fale wodne / lasery / ruchome tło, ogolnie otoczenie ktore ma sie wyswietlac ale nie ma kolidowac ze statkami/piłkami/etc.

W tutorialu jak robił grę asteroids gdzie miał statek jako trójkąt i asteroidy oparte na kole, to asteroidy właśnie rysował jako czerwony kolor, i wierzchołki statku sprawdzał czy są na czerwonym tle. Ale w moim przypadku jak chce sprawdzac powierzchnie (tak naprawde to obwod) a nie punkty to sie chyba nie sprawdza :/

**zakius** · 25-05-2014 16:11

nie iwem, czy js ma jakies fajne tablice coby wszystkie gowna latwo do nich wrzucac i iterowac, ale tak to

Bazan napisał

Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.

Dobrze mysle?

ta
gorzej jak masz kolka,a juz w ogole bardziej nieregularne, zazwyczaj sie upraszcza do kwadratow bo o ile kolo czy elipse nawet da rade sobie wyliczyc to z ksztaltem bardziej abstrakcyjnym nie jest zabawnie

Bazan OP · 25-05-2014 16:30

zakius napisał

Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.

nie iwem, czy js ma jakies fajne tablice coby wszystkie gowna latwo do nich wrzucac i iterowac, ale tak to

ta
gorzej jak masz kolka,a juz w ogole bardziej nieregularne, zazwyczaj sie upraszcza do kwadratow bo o ile kolo czy elipse nawet da rade sobie wyliczyc to z ksztaltem bardziej abstrakcyjnym nie jest zabawnie

No wiec dlatego w tutorialu koles robil drugi canvas jako maske obiektow, i sprawdzal piksele czy sa czerwone. Ale on sprawdzal po 1 pikselu dla pociskow, i 3 piksele dla statku. A ja sprawdzalem Wszystkie piksele dla kazdej sciany, dla kazdego obiektu. I tak on sprawdzal jakies 20 warunkow a ja jakies 6000 xD

Bede sie musial wiecej wczytac na ten temat chyba jednak :/

**zakius** · 25-05-2014 16:33

Dlatego nie sprawdzasz po pikselu a po wymiarach obliczasz
moge ci kawalek mojego kodu w c znalezc, robilem po kwadracie co prawda, ale jakos ogarniesz :p

Kod:

for(k=0; k<3; k++)
		{
			while(duckSpeed[k] > 0)
			{
	 			for(i=0; i<ducks; i++)
	 			{
					if(q[i].type==k)
					{
						q[i].x+=q[i].x_speed;
						if((q[i].x<=25 && q[i].x_speed < 0)|| (q[i].x>=775 && q[i].x_speed > 0))
							q[i].x_speed*=(-1);
						q[i].y+=q[i].y_speed;	
						if((q[i].y<=25 && q[i].y_speed < 0) || (q[i].y>=500 && q[i].y_speed > 0))
							q[i].y_speed*=(-1);	
					}		
				}
				duckSpeed[k]--;
			}	
		}//moving ducks if needed

tu masz wartosci wielkosci ekranu, zdecydowanie mniej zabawne jest dla innych ksztaltow, ale pewnei sie jakos zrobi, mozesz poguglac

zawsze mozesz probowac tworzyc obiekt z kilku mozliwie kwadratowych podobiektow na granicach i duzego wypelnienia czy cos, ale jest z tym zabawa

znalazlem libke w cpp ktora mozesz przepisac jak chcesz, am kwadrat, okrag i do pixela(ale tutaj sporo zabawy bo pixelperfect jednak wymaga okreslenia granic jakos) https://github.com/LaurentGomila/SFM...sion-Detection

**Killavus** · 26-05-2014 18:43

Co do kolizji okręgów, można wykorzystać prosty sposób - obliczyć wektor od środka okręgu do punktu, po czym obliczyć jego długość i sprawdzić, czy jest większa od promienia okręgu.

Częsta optymalizacja dot. kolizji polega na tym, żeby podzielić sobie przestrzeń na dyskretne części - jak np. w kliencie Tibii.

Pozdrawiam
Killavus

**zakius** · 26-05-2014 19:06

W tibii jest jak w tetrisie: "piksel" jest duży i tyle

a jeśli chodzi o prostokątny to wystarczająca wydajność powinna być przy dobrze zrobionym do piksela, sam test już dałem tylko dane wrzucić do niego w pętli po obiektach, można opakowac w funkcję czy metodę klasy czy co kto potrzebuje

konto usunięte · 26-05-2014 19:17

Killavus napisał

Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.

Częsta optymalizacja dot. kolizji polega na tym, żeby podzielić sobie przestrzeń na dyskretne części - jak np. w kliencie Tibii.

@Killavus

Gdzie w kliencie Tibii?

**zakius** · 26-05-2014 20:04

przybliża się obiekt do kwadratu, ale to jest typowy grid map, nie ma sytuacji, że obiekt znajduje się pomiędzy polami, jesli ich speed jest identyczny to pozycj zmienia się w połowie ruchu i wtedy nowe warunki kolizji powstają. a same kolizje są jak w snejku per grid element

**Killavus** · 27-05-2014 10:34

Mówię o tym w tym sensie, że Tibia podzielona jest na siatkę kwadratów 32x32, z własnym stosem przedmiotów na kwadratach - sprawdzanie kolizji w tym wypadku jest banalne, bo po prostu sprawdzamy czy jakieś itemy na danej kratce są 'blokujące'. Możemy zastosować pomysł podobny do quad tree, żeby takie wykrywanie kolizji ulepszyć.

Pozdrawiam
Killavus

**zakius** · 27-05-2014 15:27

ale to jest dokładnie to samo co kolizje per pixel, nawet kod może być identyczny
tylko, że w tibii każdy obiekt zajmuje dokladnie 1 "piksel" co jeszcze ułatwia sprawę

Temat: JS Canvas kolizje kwadratow

Narzędzia tematu

Oceń ten temat

JS Canvas kolizje kwadratow

Informacje o temacie

Użytkownicy przeglądający temat

Podobne tematy

[JS/HTML5] Zapętlony obraz w canvas

Kursownik.pl - Świetny videoKurs HTML/CSS oraz JS Canvas!

Zakładki

Zakładki

Zasady postowania