Canvas - czy da się płynnie?

Odpowiedz Nowy wątek
2018-11-12 23:10
0

Cześć
Zastanawia mnie pewna rzecz związana z <canvas>.
W tym nieprofesjonalnym przykładzie https://jsfiddle.net/uqzvjg71/2/ zmieniając dl można regulować prędkość kwadratu.
Pojawia się jednak problem.
W miarę zwiększania dl patrzenie na ten kwadrat coraz bardziej boli, bo on coraz bardziej "skacze" po ekranie

Czy w canvas można animować kwatrat tak aby w ciągu tych 60Hz przechodził przez wszystkie piksele pomiędzy?

Pozostało 580 znaków

2018-11-12 23:31
2

To, że skacze po ekranie to normalne, bo tak zaprogramowałeś (a nie ma tu żadnego tweeningu, więc jak dodasz ileś pikseli do ostatniej pozycji, to ci skacze po ekranie).

Chociaż czasem w grach są takie smugi ruchu (nie wiem jak to nazwać, ale chodzi o złudzenie, że coś się rusza za pomocą wyrenderowania takich smug za obiektami edit: zdaje się, że to "motion blur").

Możesz też zastosować easing, i będzie bardziej płynnie się odbijał.

Chyba, że ci chodzi o gubienie klatek albo przeskoki w renderingu, ale jeśli tak to raczej problem z wydajnością i mógłbyś:

  • zoptymalizować istniejący kod (np. czy musisz odpalać ctx.clearRect do całego canvasa, nawet jeśli wiesz, że tylko kawałek zmieniasz?)
  • zmienić technikę renderingu, np. pójść w WebGL, albo spróbować jakby to poszło na zwykłych divach z użyciem transform(), czy nie byłoby płynniej
  • jest jeszcze taka kwestia, że zawsze dodajesz tę samą liczbę pikseli. Natomiast nie wiesz tak naprawdę ile czasu upłynęło od ostatniego renderingu. Więc może się tak zdarzyć, że będzie jakaś zamuła procesora i nowa klatka odpali się po dłuższym czasie. W takim układzie to, co mógłbyś zrobić to np. liczyć ile milisekund upłynęło od ostatniego renderingu i potem wziąć tę liczbę milisekund i pomnożyć przez ustaloną szybkość w pikselach na milisekundę. Wtedy bardziej "równo" by to jechało przynajmniej

((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);
edytowany 2x, ostatnio: LukeJL, 2018-11-12 23:42

Pozostało 580 znaków

2018-11-13 01:06
0

Zrobiłem to samo w CSS ale niestety też rozmywa.

#wrapper {
    width: 500px;
    height: 300px;
    background: green;
}
#swingingSquare {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: #000;
    animation: swinging 4s linear infinite;
    -webkit-animation: swinging 4s linear infinite;
}

@keyframes swinging {
    0%   {left:0px; top:100px;}
    50%  {left:400px; top:100px;}
    100% {left:0px; top:100px;}
}

@-webkit-keyframes swinging {
    0%   {left:0px; top:100px;}
    50%  {left:400px; top:100px;}
    100% {left:0px; top:100px;}
}

<div id="wrapper">
    <div id="swingingSquare"></div>
</div>

If you are the smartest person in a room then you are in the wrong room.
spróbuj użyć transform i translate zamiast left i top. - LukeJL 2018-11-13 20:13

Pozostało 580 znaków

2018-11-13 14:00
0

Zaprogramowałem tak bo nie wiem jak można w canvas przyspieszyć ten kwadrat bez skakania po ekranie.
To nie problem z wydajnością.
Chcę żeby poruszał się szybko && Chcę żeby, np w kamerze poklatkowej, było widać że przemieszcza się co 1px.
Chciałbym to wykorzystać do tworzenia gry więc CSS odpada.

edytowany 1x, ostatnio: adams0, 2018-11-13 14:00

Pozostało 580 znaków

2018-11-13 15:13
1

https://stackoverflow.com/que[...]ps-with-requestanimationframe
Wstaw sobie licznik FPS.
Jak chcesz zobaczyć przemieszczanie się co 1px? Przy dużych prędkościach kwadratu tego nie ogarnie monitor i oko ludzkie też nie.

edytowany 1x, ostatnio: Markuz, 2018-11-13 15:13
Pokaż pozostałe 2 komentarze
Jak np. ruszasz myszką to też kursor skacze czy nie? - Markuz 2018-11-13 16:42
Ok W sensie chodzi mi o odczucia a nie widzenie per se. - adams0 2018-11-13 16:46
Tak, kursor trochę mi skacze też :D - adams0 2018-11-13 17:01
Jak ma nie skakać jednocześnie przenosząc się o np. 500px w ciągu 1 sekundy? - Markuz 2018-11-13 17:13
:D Nie mam pojęcia. Ale przetestuje kiedyś na 144Hz i zobaczę. - adams0 2018-11-13 19:44

Pozostało 580 znaków

2018-11-13 21:49
0

@LukeJL:
Coś takiego, czy można to lepiej zapisać?

#wrapper {
    width: 500px;
    height: 300px;
    background: green;
    position: relative;
}
#swingingSquare {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    background-color: #000;
    animation: swinging 4s linear infinite;
}

@keyframes swinging {
    0%     {transform: translate(0, -50%)}
    50%   {transform: translate(400px, -50%)}
    100% {transform: translate(0, -50%)}
}

If you are the smartest person in a room then you are in the wrong room.
edytowany 1x, ostatnio: rotatimrod, 2018-11-13 21:52

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0