Pokaż wyniki od 1 do 3 z 3

Wątek: [CANVAS] Przygotowywanie obrazów do załadowania i operacje na nich

  1. #1
    Aktywny
    Dołączył
    Dec 2011
    Posty
    273

    Domyślnie [CANVAS] Przygotowywanie obrazów do załadowania i operacje na nich

    Witajcie!

    Mam mały problem z przygotowywaniem obrazków które będą sklejane w canvas'ie. Jak wiecie przed sklejeniem obrazów trzeba je najpierw załadować. No i to jest problem. Lepiej najpierw pokażę Wam kod abyście zobaczyli co mam dokładnie na myśli i mieli mniej więcej pewien obraz jak to ma działać:
    Kod:
    // pętla
    // tworzymy nowy obraz
    var image = new Image();
    // czekamy aż obraz się załaduje
    image.onload = [...]
    // podajemy ścieżkę do obrazka
    image.src = 'images/maps/'+(map.textures_0[y][x])+'.png';
    
    // rysujemy obrazek					
    context.drawImage(image, x * 44, y * 44);
    // koniec pętli
    ... oczywiście mógłbym obejść się bez czekania aż obrazek się załaduję, w FireFox'ie działa, ale w Google Chrome już nie. Tak więc moje pytanie: co mam robić podczas ładowania się obrazków, jak je sklejać dopiero po załadowaniu?

    Jak podglądałem w pewnej "grze" a raczej silniku w którym sklejano mniej więcej w podobny sposób obrazki zauważyłem, że najpierw w pierwszej pętli liczy wszystkie obrazki które mają się załadować a potem w ".onload" sprawdza czy ilość załadowanych do tej pory obrazków + 1 jest większa lub równa wcześniej zliczonych wszystkich obrazków. Jeżeli tak to wykonuje się funkcja ładująca grę. Wyglądało to mniej więcej tak:
    Kod:
    // pętla licząca wszystkie obrazki (numImages)
    // druga pętla
    image[src] = new Image();
    image[src].onload = function(){
    	if (++loadedImages >= numImages) {
    		initGame();
    	}
    };
    image[src].src = imageSource[src];
    // koniec drugiej pętli
    Do tej funkcji już niestety nie miałem dostępu. Mógłbym zrobić coś podobnego, tylko jak wygląda ta funkcja ładująca grę? Nie widziałem wcześniej, sam też nie wiem jak przechwycić załadowane obrazki i jeżeli wszystkie się załadują skleić. Tym bardziej, że operuję dużą ilością obrazów...

  2. #2
    Zarejestrowany
    Dołączył
    Feb 2014
    Posty
    10

    Domyślnie

    Pokombinuj sobie z moim kodem, powinno Ci to pomóc


    Kod:
    <canvas id="mojaMapa" width="2578" height="2000"></canvas>
        <script>
          function ladujObrazki(sources, callback) {
            var images = {};
            var licznikObrakow = 0;
            var iloscObrazkow = 0;
    				
            
            for(var src in sources) {
              iloscObrazkow++;
            }
    				
            for(var src in sources) {
              images[src] = new Image();
              images[src].onload = function() {
                  if(++licznikObrakow >= iloscObrazkow) {
    			 callback(images);
                   }
              };
              images[src].src = sources[src];
            }
          }
    			
    			
          var canvas = document.getElementById('mojaMapa');
          var context = canvas.getContext('2d');
    
          var sources = {
            obrazki: 'images/maps/'+(map.textures_0[y][x])+'.png'
          };
    
          ladujObrazki(sources, function(images) {
    			
            context.drawImage(images.obrazki,x * 44, y * 44);
    				
          });
    
        </script>

  3. #3
    Aktywny
    Dołączył
    Dec 2011
    Posty
    273

    Domyślnie

    Dzięki, aktualnie już skończyłem pisać całą grę, ale dzięki za dobre chęci.

Informacje o wątku

Użytkownicy przeglądający ten wątek

Aktualnie 1 użytkownik(ów) przegląda ten wątek. (0 zarejestrowany(ch) oraz 1 gości)

Podobne wątki

  1. Odpowiedzi: 3
    Ostatni post / autor: 22-04-2013, 10:36
  2. Operacje na plikach w php
    Przez ekiso w dziale PHP / MySql
    Odpowiedzi: 1
    Ostatni post / autor: 01-07-2011, 10:39
  3. [javascript] precaching obrazów
    Przez arxetec w dziale JavaScript/AJAX
    Odpowiedzi: 6
    Ostatni post / autor: 18-06-2009, 06:51
  4. Czas ładowania
    Przez pivot w dziale Support Vallheru
    Odpowiedzi: 16
    Ostatni post / autor: 14-06-2008, 20:22
  5. [Php] Rysowanie, malowanie i edycja obrazów w PHP
    Przez Microbyte w dziale PHP / MySql
    Odpowiedzi: 0
    Ostatni post / autor: 26-05-2008, 22:05

Zakładki

Uprawnienia umieszczania postów

  • Nie możesz zakładać nowych tematów
  • Nie możesz pisać wiadomości
  • Nie możesz dodawać załączników
  • Nie możesz edytować swoich postów
  •