[Canvas] Optymalizacja kodu obracającego koło z kulkami Opcje

[bpawel10]

Witajcie,

piszę w canvas grę na systemy mobilne korzystając z Apache Cordova.
Mam na planszy koło puste w środku, taki jakby pierścień, w którym są kulki. Gdy gracz kliknie na dowolną kulkę i zacznie przesuwać myszkę (lub palcem po ekranie), to koło razem z kulkami ma się obracać, podążać za palcem/myszą. Już napisałem kod za to odpowiedzialny, wszystko działa idealnie, ale niestety tylko na kompie. Komórka nie nadąża i przy szybkim obracaniu jest bardzo duży brak płynności.
Mój kod działa tak: gdy wykryjemy ruch myszy/palca przy wciśniętej myszy, pobieramy współrzędne dotknięcia/myszy i obliczamy kąt. następnie rysujemy w canvasie tło, aby zmazać poprzednie kule, po czym rysujemy kule od nowa, ale zaczynając od wyliczonego kąta. Nawet zmodyfikowałem kod w ten sposób, żeby kąty zokrąglać do pełnych stopni, i kulki są renderowane co 1 stopień. Ale dalej nie jest płynnie, da się to jeszcze jakoś zoptymalizować, bo już nie mam pomysłu? Mam nadzieję, że jednak uda się to z Cordovą, bo nauka natywnego programowania to kolejna książka do przeczytania :/

[lukasz1985]

Moje sugestie są takie:
- "zcacheować" pewne zmienne, które są obliczane przy każdym wykonaniu funkcji lub wielokrotnie podczas jednego wykonania, czyli np, zamiast pisać:

[JAVASCRIPT] pobierz, plaintext 
 
var dx3=Math.round(dx2*Math.cos(angle)-dy2*Math.sin(angle));
var dy3=Math.round(dx2*Math.sin(angle)+dy2*Math.cos(angle));
[JAVASCRIPT] pobierz, plaintext 

To napisać zmienne:

[JAVASCRIPT] pobierz, plaintext 
var sinAgnle = Math.sin(angle);
var cosAngle = Math.cos(angle);
 
 
var dx3=Math.round(dx2*cosAngle-dy2*sinAgnle);
var dy3=Math.round(dx2*sinAgnle+dy2*cosAngle);
[JAVASCRIPT] pobierz, plaintext 

I używać tych zmiennych bezpośrednio w kodzie, później.

Druga sprawa, unikać "if" -ów. Czyli zamiast pisać:

[JAVASCRIPT] pobierz, plaintext 
if(x_dist>=0 && y_dist>=0)
 
			return Math.PI-Math.atan(tan);
 
		else if(x_dist<0 && y_dist>=0)
 
			return Math.PI+Math.atan(tan);
 
		else if(x_dist<0 && y_dist<0)
 
			return 2*Math.PI-Math.atan(tan);
 
		else
 
			return Math.atan(tan);
[JAVASCRIPT] pobierz, plaintext 

To napisać instrukcje łączne:

[JAVASCRIPT] pobierz, plaintext 
 
 
if( (x_dist>=0 && y_dist>=0 )  ||  (x_dist<0 && y_dist>=0))
 
			return Math.PI-Math.atan(tan);
 
 
		else if(x_dist<0 && y_dist<0)
 
			return 2*Math.PI-Math.atan(tan);
 
		else
 
			return Math.atan(tan);
 
[JAVASCRIPT] pobierz, plaintext 

Co do funkcji trygonometrycznych: można spróbować używać tablic trygonometrycznych, możliwe, że taka optymalizacja coś da. W ostateczności warto spróbować, więcej do poczytania w temacie
http://jfdube.wordpress.com/2011/12/06/tri...bles-revisited/

To prawdopodobnie i tak nie wiele da.

W ostateczności można by spróbować stworzyć jakiś mechanizm, który reaguje na zdarzenia w regularnych odstępach czasu. Wtedy myślę, że aplikacja troche by skakała ale nie chodziła powoli.