[J.....n]

Mam problem, którego nie potrafię rozwiązać(pewnie z nieznajomości dostępnych narzędzi). Uczę się js pod zrobienie jakieś fajnej gierki. W moich wyobrażeniach była to jak na razie plansza widziana od góry podzielona na x*y pól. Na każde pole dało się wejść swoją postacią, tak jak bywa to w internetowych rpgach. Chciałem poddać animacji najeżdżane myszką pola, a dokładnie lekko powiększyć. Pola są ułożone obok siebie bez żadnych przerw.

Stworzyłem sobie więc canvas, stworzyłem te x*y pól. Zrobiłem także, żeby się powiększały i tu zaczęły się pierwsze problemy, bo jak szybko poruszałem kursorem po planszy to nie wszystkie kwadraty załączyły się do powiększenia. Niektóre omijało po drodze. Trochę to zignorowałem. Powiększanie zrobiłem tak, że po prostu rysowałem nowy coraz to większy kwadrat. Drugi - większy problem polega na tym, że nie mam pojęcia jak je pomniejszać jak się odjedzie myszką.

Pierwszy pomysł był taki, żeby ponownie narysować w normalnym rozmiarze wszystkie 8 sąsiadujących pól z tym "pomniejszanym". Kiedy zrobiłem taki zabieg to nasilił się bardzo problem nr 1 i na planszy połowa kwadratów się pomniejszała, połowa nie i jeszcze inne dziwne rzeczy. Po kilku przejechaniach cała plansza zamieniła się w różnej wielkości prostokąty pozakrywane przez siebie nawzajem.

Jak uniknąć problemu nr 1 i czy jest jakiś sposób na wykonanie inaczej pomniejszania? Może ogólnie całej procedury animacji.
#javascript #canvas

[larvaexotech]

@JustMMan: masz jakiś przykład jak to powinno wyglądać? bo z opisu trudno mi sobie to wyobrazić.

[J.....n]

@larvaexotech: https://jsfiddle.net/eeeu6ouf/
Tak wygląda teraz. Chciałbym, żeby się pomniejszały po odjechaniu. Tamto pomniejszanie które powodowało zepsucie całej strony praktycznie usunąłęm

[larvaexotech]

@JustMMan: rozumiem i nisetety Cię zmartwię bo uważnie przeczytałem kod i niestety zupełnie spudłowałeś z podejściem.

musisz zrobić sobie funkcje która na podstawie pewnych danych wejściowych odrysuje Ci ekran od podstaw i wywoływać ją co ruch myszy. jak jesteś zainteresowany to po 18:00 mogę Ci napisać jak to powinno poprawnie wyglądać bo tego programu nie da się tak prosto zmienić zeby działał poprawnie.

[J.....n]

@larvaexotech: Hmm bardziej liczę na po prostu wskazówki. Jak napiszę to od nowa to trudno. Przynajmniej się czegoś nauczę. Nie wiem czy dobrze zrozumiałem twoją wypowiedź. Rysuję sobie ekran i co każdy ruch myszką rysuję go sobie od nowa?

[larvaexotech]

Dokładnie tak, tak działają wszystkie gry, 2d, 3d, 18d , filmy , nawet interfejs windowsa (w uproszczeniu dużym) tak działa. Np. gdy grasz sobie w Counter Strike GO to gra 60 razy na sekundę czyści ekran do zera, do czanrego tła, po czym odrysowuje znów podłoże, otoczenie, obiekty, broń, elementy interfejsu itp itd. :) Jeśli CS:GO potrafi to zrobić z modelami trójwymiarowymi, efektami hdr, oświetleniem, odbiciami, itp itd to sądzisz że Twoja

[larvaexotech]

@JustMMan: dodam jeszcze że obiekty możesz też mutować, tzn. jak chcesz mu zmienić wartość np. colorR:

kwadrat[x][y].colorR = 128;

I teraz w onmousemove zrób tylko coś takiego że kwadrat na który najedziesz myszką to za pomocą requestAnimationFrame zmieniaj mu powoli wielkość tak żeby łagodnie z 1.0 przeszło np. na 1.2 a w tym samym czasie dla wszystkich innych kwadratów zmniejszaj wielkość dopóki nie osiągniesz 1.0.

[J.....n]

@larvaexotech: Rozumiem. Chyba też miałem taki pomysł, ale się w nim pogubiłem. Obiektami będzie łatwiej. Dzięki. Zdam relację jak to pchnę :)

[larvaexotech]

@JustMMan: Jasne jakbyś miał jeszcze jakieś pytania to daj znać. Zwróc tylko uwage na odmienność filozofii:

logika twojej gry powinna siedzieć zawsze w kodzie. to co jest na canvasie to jest tylko taki jakby hologram tego co masz zapisane w Twoich tablicach z danymi, rolą canvasa jest tylko formatowanie danych z tych tablic na efekt czytelny dla użytkownika :)

a wszelkie manipulacje stanem gry dokonujesz poprzez zmienianie właściwości tych obiektów, canvas