Witam!
Piszę sobie grę w html5 z pomocą canvas, gdyż stwierdziłem, że może czas najwyższy zainteresować się tym zagadnieniem. Sprawa przedstawia się tak:
Mamy background tiles a więc tło zbudowane z takich małych kwadracików ładowanych z jednego pliku grafiki, mapa jest zdefiniowana za pomocą tablicy dwuwymiarowej gdzie mamy numery odpowiadające poszczególnym kwadracikom i za pomocą pętli wyrysowywuje sobie taka mapke, cos jak tutaj:
http://blog.sklambert.com/create-a-canvas-tileset-background/
Nie bylby to problem gdyby nie fakt, że u mnie canvas jest mniejszy niż cała mapka, a więc kiedy taki przykładowy "ludzik" dochodzi do krawędzi mapki to przesuwa się ona w odpowiednią stronę. Tutaj właśnie mam problem, gdyż nie do końca wiem jak to rozwiązać. Z dużym pojedynczym plikiem grafiki nie byłoby jako takiego problemu gdyż z pomocą drawImage() ustawiłbym mu po prostu odpowiednio x i y.
Czy tutaj mam wyrysowywać sobie po prostu widoczną mapkę zaczynającą się powiedzmy 32px przed widocznm canvasem i tyle samo konczaca za zeby uzytkownik mogl widziec jakies polkwadraciki kiedy przesunie tylko troche mape, a kiedy przesunie juz na tyle ze beda potrzebne dalsze kwadraciki to na podstawie obecnych koordynatow rysowac dalsza czesc za pomoca petli? Takie rozwiazanie przyszlo mi do glowy na szybko jako najlepsze i nie moge wymyslic nic lepszego a mam pewne watpliwosci co do optymalnosci i wydajnosci czegos takiego... Po przyjrzeniu sie widzimy, ze kiedy gracz idzie caly czas w bok i odslania niewidoczna jeszcze czesc mapki to ona caly czas na nowo musi sie renderowac a wiec przelicza ktore kwadraty ma narysowac, robi petle po odpowiednich komorkach tabeli i przy kazdej uzywa znowu drawImage() zeby takowy narysowac w odpowiednim miejscu. Mysle, ze nie powinno sie zbytnio ciac przy mozliwosciach dzisiejszych maszyn szczegolnie jesli zastosujemy dodatkowo buffor, tak jak np. tutaj:
http://www.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games
Ale czy jest to rozwiazanie do przyjecia czy moze z latwoscia nasuwa sie wam inne na ktore przez roztargnienie lub brak wiedzy nie wpadlem?
Z gory dziekuje za odpowiedz i pozdrawiam
Eluzive
PS. Jesli cos jest niezrozumiale to prosze pisac choc staralem sie wyjasnic problem najlepiej jak umiem.
EDIT: Rozwiązanie się nasunęło, tworzymy buffer o wielkości całej gotowej mapki, który rysujemy tylko raz a następnie w naszym widocznym canvasie w miare jak ludzik się przemieszcza przerysowujemy odpowiednia czesc buffera
context.drawImage(buffer, _X, _Y, canvas.width, canvas.height, X, Y, canvas.width. canvas.height);
To tak jakby ktoś miał podobny problem i nie mogl znalezc rozwiazania (tak na marginesie, to mozliwe ze na moim mikroblogu w najblizszym czasie pojawi sie seria tutoriali). Temat mysle, ze mozna zamknac chyba, ze ktos chce udzielic jakiejs konstruktywnej uwagi