Strona 1 z 4 123 ... OstatniOstatni
Pokaż wyniki od 1 do 10 z 38
Like Tree1Likes

Wątek: chodzenie po mapie

  1. #1
    Zasłużony Awatar sazian
    Dołączył
    Jul 2008
    Posty
    1,721

    Domyślnie chodzenie po mapie

    Witam,
    w tym artykule postaram się przybliżyć jeden ze sposobów „poruszania się po mapie”.
    Na początek przygotujmy pole bitwy
    będziemy potrzebowali

    • bibliotekę JQuery (u mnie plik o nazwie jquery.js)
    • obrazek z naszą postacią (u mnie plik o nazwie 1.png)
      moja postać została wygenerowana na stronie http://charas-project.net/charas2/index.php
      po wygenerowaniu należy usunąć zielone tło
      1.png
    • obrazek tła(u mnie plik o nazwie mapa.png)
      rozmiar kafla na mapie to 32x32px kolejne kafle oddzieliłem niebieską linią i ponumerowałem aby było łatwiej zaobserwować ruch
      mapa.jpg
    • plik w którym będzie kod HTML naszej mapy
    • plik z kodem js (u mnie skrypt_mapy.js)
    • plik idz.php sprawdzający czy możemy wejść na dane pole



    na początek trochę kodu html
    Kod:
     <!DOCTYPE html  
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">  
     <head>  
     <script  type="text/javascript" src="jquery.js"></script>  
     <script  type="text/javascript" src="skrypt_mapy.js"></script>  
     </head>  
     <body>  
     
    
     <table>  
     <tr>  
     <td>  
     </td>  
     <td>  
     <div style="width: 30px; height:30px;background-color: red;" id="g">^</div> 
     </td>  
     <td>  
     </td>  
     </tr>  
     <tr>  
     <td>  
     <div style="width: 30px; height:30px;background-color: red;"  id="l" >&#60</div>  
     </td>  
     <td>  
     </td>  
     <td>  
     <div style="width: 30px; height:30px;background-color: red;"  id="p">&#62</div> 
     </td>  
     </tr>  
     <tr>  
     <td>  
     </td>  
     <td>  
     <div style="width: 30px; height:30px;background-color: red;"  id="d">v</div> 
     </td>  
     <td>  
     
    
     </td>  
     </tr>  
     </table>  
     
    
     
    
     <div>  
     <div style="width: 24px; height:32px;position:relative; left: 70px; top: 96px; z-index: 99;background-image:url(1.png);background-position:-24px 64px" id="gracz"></div>  
     
    
     <div  style="width: 160px; height:160px;overflow: hidden; border-width:1px;border-style: solid;">  
     <img id="pole" src="mapa.png"/>  
     
    
     
    
     </div>  
     </div>  
     </body>  
     </html>
    objaśnienie
    Kod:
     <script  type="text/javascript" src="jquery.js"></script>  
     <script  type="text/javascript" src="skrypt_mapy.js"></script>
    ten fragment chyba nie wymaga większych wyjaśnień
    jedyne o czym warto wspomnieć to to że plik jquery.js mysi być wczytany przed skrypt_mapy.js inaczej nasze skrypty jquery nie będą działać


    następnie w kodzie jest tabelka w której są strzałki do poruszania się po mapie


    Kod:
     <div>  
     <div style="width: 24px; height:32px;position:relative; left: 70px; top: 96px; z-index: 99;background-image:url(1.png);background-position:-24px 64px" id="gracz"></div>  
     
    
     <div  style="width: 160px; height:160px;overflow: hidden; border-width:1px;border-style: solid;">  
     <img id="pole" src="mapa.png"/>  
     
    
     
    
     </div>  
     </div>
    w pierwszym divie jest cała mapa
    kolejny to nasz gracz
    opis stylu:
    -width: 24px; height:32px rozmiar naszej postaci
    -position:relative; left: 70px; top: 96px ustawia postać na środku „okienka mapy”
    -z-index: 99 gracz zawsze jest na wierzchu
    -background-image:url(1.png);background-position:-24px 64px wczytanie naszej postaci jako tło diva oraz ustawienie w odpowiedniej pozycji


    trzeci div to okienko mapy
    opis stylu:
    -width: 160px; height:160px ustalamy rozmiar okienka – tu dokładnie 5x5 kafelków
    -overflow: hidden; co się nie mieści w okienku zostanie ukryte
    -border-width:1px;border-style: solid;" obramowanie okienka aby było widoczne


    następnie w tym diwie wczytujemy obrazek
    <img id="pole" src="mapa.png"/>
    jeśli chcemy aby każdy obrazek był osobno należy zamiast obrazka utworzyć kolejnego diva o id=pole (oczywiście id musi być unikalne więc tylko jeden element może je posiadać)
    tak naprawdę nie jest istotne co tu wstawimy, jeżeli będzie to miało id=pole będzie się przesuwać(oraz wszystko co jest wewnątrz)


    wygląda na to że to już koniec HTML'a i css'a
    pora na js
    jak już pewnie większości z was się domyśliła nasza postać tak naprawdę będzie nieruchoma a poruszać będziemy całym światem


    plik skrypt_mapy.js
    na początek deklarujemy dwie zmienne które będą przechowywać położenie naszej postaci na mapie – a właściwie to mapy pod naszą postaciom
    fixed: proszę o dodanie trzeciej zmiennej "go" sprawdzającej czy mogę iść
    Kod:
     var x=0;  
     var y=0;
     var go=true;
    następnie deklarujemy pustą funkcję główną jquery
    Kod:
     $(document).ready(function(){
     //tu będzie kod
     });
     //tu będą inne funkcje
    a teraz funkcja przesuwająca mapę – musimy ją napisać poniżej funkcji głównej jquery inaczej nie będzie działać

    trochę teorii
    mapa a właściwie coś o id=pole będziemy przesuwać przy pomocy marginesów odpowiednio odsuwają element od swojej normalnej pozycji, należy pamiętać że będzie widoczny tylko fragment w okienku(overflow: hidden; )
    przy pomocy funkcji jquery „znajdujemy” element do przesunięcia $("#pole") znak # oznacza id
    następnie musimy zmodyfikować marginesy które są elementem css'a
    do modyfikacji css'a służy funcika o zaskakującej nazwie css która może przyjmować dwa parametry (drugi nieobowiązkowy)
    pierwsza to nazwa właściwości a druga to wartość jaką chcemy nadać, jeśli nie podamy nic funkcja odczyta obecną wartość
    koniec gadania bierzemy się do pisania
    a oto i ona, funkcja przesuwająca mapę
    Kod:
     function map_poz(x,y){  
     $("#pole").css("margin-left",x+"px"); 
     $("#pole").css("margin-top",y+"px"); 
     }
    następnie wywołujemy naszą funkcję w funkcji głównej jquery ustawiając naszą postać w punkcie 0,0 czyli na polu o numerze 1
    Kod:
     $(document).ready(function(){
     map_poz(0,0);
     });
    zapisujemy całość i sprawdzamy jak działa
    no tak ... NIE DZIAŁA !!
    nic bardziej mylnego jak pamiętamy nasza postać została przesunięta tak aby była na środku więc i mapę trzeba przesunąć
    wracamy do funkcji map_poz
    jak widzimy mapę trzeba przesunąć o dwie kratki (czyli 64px) w obu osiach
    Kod:
     function map_poz(x,y){  
     $("#pole").css("margin-left",(x+64)+"px"); 
     $("#pole").css("margin-top",(y+64)+"px"); 
     }
    jak pewnie zauważyli spostrzegawczy przy dodawaniu pojawiły się nawiasy, są one konieczne aby wartość została dodana a nie połączona.
    Zapisujemy i sprawdzamy.
    No teraz to działa
    ale ciągle nie mogę chodzić !!
    w tym celu musimy obsłużyć zdarzenie kliknięcia strzałki(tej w tabelce)
    jest to bardzo proste
    wewnątrz funkcji głównej jquery piszemy
    Kod:
     $("div#l").click(function(){  
       //tu będzie kod
     });
    jak widać przechwytujemy zdarzenie kliknięcia obiektu o id=l (mała litera L)
    jest to jedna z naszych strzałek mówiąca idź w lewo
    mamy jeszcze
    #p – idź w prawo
    #g – w górę
    #d – w duł


    wewnątrz funkcji zdarzenia wywołamy naszą funkcję map_poz
    ale funkcja map_poz ustawia nas w wybranym punkcie a nie powoduje przesunięcia, więc muszę wiedzieć gdzie jest moja postać i do obecnej pozycji dodać odpowiednią wartość
    właśnie do tego służą zmienne zadeklarowane na początku skryptu(x i y)
    musimy przypisać im odpowiednią wartość (+/- 32) i ustawić postać w tym punkcie
    więc do dzieła
    mógłbym to zrobić tak
    Kod:
     $("div#l").click(function(){  
       x=x+32;
     map_poz(x,y);
     });
    ale taki zapis jest długi
    większość pewnie powie że mogę go skrócić zastępując x=x+32; tym x+=32;
    no niby tak ale taki zapis ciągle jest długi ma aż dwie linijki a składnia js pozwala mi skrócić go jeszcze bardziej
    Kod:
     $("div#l").click(function(){  
     map_poz(x+=32,y);
     });
    od razu krócej
    zapisz i przetestuj.
    Strzałka w lewo już działa, a ja chce chodzić we wszystkie strony.
    pozostałe strzałki opisujemy identycznie zmieniają tylko parametry funkcji map_poz
    dla
    #p x-=32
    #g y+=32
    #d y-=32


    oczywiście nic nie stoi na przeszkodzie aby postać chodziła na ukos czy skakała o kilka komórek


    no dobra postać już chodzi ale jest jakaś taka drętwa
    pora na animacje postaci
    obrazek poglądowy
    2.png
    aby postać poruszała się płynnie musimy kilka razy zmienić klatkę(jeśli za mało postać dalej będzie drętwa, jeśli za dużo będzie biegać w miejscu), ja zdecydowałem się na 4 przejścia


    w jakiej kolejności zmieniać klatki??
    jest to bardzo proste
    najważniejsze aby nie skakać między klatkami (czyli zawsze przechodzimy kolejno 0=>1=>2=>1=>0), a ostatnią musi być klatka 1 aby postać stała prosto
    ponownie piszemy funkcję pod główną funkią jquery, tym razem funkcja będzie modyfikowała background-position obiektu o id=gracz
    Kod:
     function animation(klatka,kierunek){  
     $("#gracz").css("background-position",(-klatka*24)+"px "+(-kierunek*32)+"px");  
     }
    klatka*24 czyli klatka * szerokość postaci
    kierunek*32 czyli kierunek * wysokość postaci
    teraz przy obsłudze strzałek należałoby wywołać tą funkcję ale jeśli po prostu napiszemy kilka razy wywołanie tej funkcji zobaczymy jak postać przeskakuje jak poprzednio a następnie jeśli mamy dobre oko za uwarzymy kilka mignięć postaci
    więc po pierwsze trzeba wywoływać na zmianę funkcje map_poz i animation ale w funkcji map_poz nie możemy już przesuwać postaci o 32px
    ponieważ mamy 4 klatki animacji musimy przesuwać postać o 8px(32/4)
    po drugie trzeba dodać opóźnienie
    służy tego funkcja setTimeout
    więc do dzieła
    Kod:
     setTimeout("map_poz(x+=8,y);animation(0,3);",50);
     setTimeout("map_poz(x+=8,y);animation(1,3);",100);
     setTimeout("map_poz(x+=8,y);animation(2,3);",150);
     setTimeout("map_poz(x+=8,y);animation(1,3);",200);
    jak widać pierwszy parametr to funkcje do wywołania – zapisywane jako tekst !! - a drugi to opóźnienie w ms
    zapisz i sprawdź
    no teraz to zaczyna jakoś wyglądać ale dalej możemy łazić gdzie chcemy

    przyszedł czas na AJAX'a

    no i tu pozwolę sobie na małą fuszerke
    napiszemy funkcje o nazwie send która spowoduje przesłanie danych do skryptu php ten je przeanalizuje i da odpowiedz czy możemy iść w tym kierunku
    normalnie funkcja wysyłałaby jedynie informacje w którym kierunku chcemy iść a następnie php pobiera informacje z bazy ewentualnie przetwarza i daje odpowiedz
    ale ten artykuł dotyczy tylko warstwy widoku więc baz danych nawet nie tykamy
    a w związku z tym musimy dodatkowo przesłać informacje „gdzie ja jestem”
    skrypt php nie pozwoli wyjść poza obszar mapy oraz dodatkowo zablokujemy jedną kratkę mapy – tą o numerze 11
    do dzieła
    na początek piszemy wcześniej już wspomnianą funkcje send o parametrach ox,oy,kierunek – a powinien być tylko kierunek
    ox i oy - to współrzędne na które chcemy przejść
    kierunek - to chyba nie wymaga objaśnień
    funkcje oczywiście deklarujemy pod główną funkcją jquery
    fixed: dodatkowo zapytanie wykonujemy tylko jeśli zmienna go przyjmuje wartość TRUE, po wejściu do ifa zmieniamy jego wartość na FALSE - coś na kształt sekcji krytycznej
    Kod:
     function send(ox,oy,kierunek){  
    if(go){
          $.ajax({  
             type: "POST",  
             url: "idz.php",  
             data:"x="+(x+ox)+"&y="+(y+oy), 
             success: function(msg){  
                 if(msg){  
                   go=false;
     
    
                     //jeżeli mogę iść
     
    
                 }  
     
    
             }  
         });  
      }
    
     }
    krótka analiza
    .ajax({ będziemy wysyłać dane ajaxem
    url: "idz.php", dane wysyłamy do pliku idz.php
    type: "POST", metodą POST ($_POST)
    data:"x="+(x+ox)+"&y="+(y+oy), przesłane dane
    success: function(msg){ jeżeli "transfer" zakończony sukcesem
    if(msg){ jeżeli zmienna msg==true – zmienna msg to tekst odebrany z idz.php


    no właśnie i co dalej...
    teraz stanie się coś strasznego
    poruszanie postacią przenosimy do tego ifa (w miejsce oznaczone jako "//jeżeli mogę iść")
    fixed: należy jeszcze zmienić wartość zmiennej go na TRUE(zezwolić na ponowne przejście - zakończyć sekcje krytyczną) po pewnym czasie, ja zdecydowałem się na 220ms czyli 20ms po zakończeniu animacji
    Kod:
     setTimeout("map_poz(x+="+(ox/4)+",y+="+(oy/4)+");animation(0,"+kierunek+");",50); 
     setTimeout("map_poz(x+="+(ox/4)+",y+="+(oy/4)+");animation(1,"+kierunek+");",100); 
     setTimeout("map_poz(x+="+(ox/4)+",y+="+(oy/4)+");animation(2,"+kierunek+");",150); 
     setTimeout("map_poz(x+="+(ox/4)+",y+="+(oy/4)+");animation(1,"+kierunek+");",200);
    setTimeout("go=true;",220);
    we wszystkich funkcjach związanych z obsługą kliknięcia strzałki usuwamy skrypt odpowiedzialny za chodzenie i wstawiamy odpowiednio
    #l send(32,0,3);
    #p send(-32,0,1);
    #g send(0,32,0);
    #d send(0,-32,2);


    teraz plik idz.php
    dodajemy kolejne ograniczenia
    Kod php:
     if((int)$_POST['x']>|| (int)$_POST['x']<=-320){  
     echo 
    false;  
     exit;  
     } 
    próba wyjścia z mapy z lewej lub prawej
    Kod php:
     if((int)$_POST['y']>|| (int)$_POST['y']<=-320)  
     {  
     echo 
    false;  
     exit;  
     } 
    próba wyjścia z mapy z góry lub dołu
    Kod php:
     if((int)$_POST['x']==&& (int)$_POST['y']==-32){  
     echo 
    false;  
     exit;  
     } 
    zakaz wejścia na pole o numerze 11
    i na koniec jeśli żaden if nie został spełniony
    Kod php:
     echo true
    zapisujemy i sprawdzamy


    wszystko powinno działać pozostało już tylko jedno
    wracamy do pliku skrypt mapy i do głównej funkcji jquery dodajemy
    Kod:
     $().keydown(function (event) {  
         if(event.keyCode==37){$("div#l").click();} 
         if(event.keyCode==38){$("div#g").click();} 
         if(event.keyCode==39){$("div#p").click();} 
         if(event.keyCode==40){$("div#d").click();} 
     });
    ten kod da nam możliwość poruszania się po mapie przy pomocy kursorów klawiatury
    jeśli chcesz wykorzystać inne klawisze a nie wiesz jaki mają kod dopisz po prostu alert(event.keyCode); a po wciśnięciu wybranego klawisza pojawi się okienko z jego kodem


    UWAGA!!
    funkcja $().keydown nie działa we wszystkich wersjach jquery !!! nie sprawdzałem ale podejrzewam że niema jej w wersjach mini


    mam nadzieje że wszystko działa i jest zrozumiałe


    na koniec pozostaje mi tylko życzyć miłego wędrowania po bezkresnych krainach

    edit:
    pozwoliłem sobie nieco sformatować tekst aby łatwiej się czytało
    Ostatnio edytowane przez sazian ; 20-07-2010 o 20:59 Powód: poprawa błędu przechodzenia przez zablokowane pola
    perfect7m likes this.

  2. #2
    Grupa MmoCenter Awatar aris
    Dołączył
    Sep 2009
    Posty
    2,408

    Domyślnie

    a jakieś demo?

  3. #3
    Zarejestrowany Awatar Programista
    Dołączył
    Feb 2010
    Posty
    239

    Domyślnie

    Mógłbyś dać wszystko w download? Bo się pogubiłem troszkę ;/
    NIE UDZIELAM POMOCY NA GG JEŚLI POPROSISZ O POMOC ZWIĄZANĄ Z PROGRAMOWANIEM ZOSTANIESZ AUTOMATYCZNIE ZABLOKOWANY, OD TEGO JEST FORUM!

  4. #4
    Zasłużony Awatar sazian
    Dołączył
    Jul 2008
    Posty
    1,721

    Domyślnie

    demko:
    mapa1.zip
    w archiwum brakuje pliku mapa.png(to ten poniżej) ponieważ archiwum było zbyt duże
    mapa.jpg

    niestety obrazek jest słabej jakości więc daje drugi link
    http://img836.imageshack.us/img836/5541/mapa.png
    Ostatnio edytowane przez sazian ; 19-07-2010 o 13:44

  5. #5
    Zbanowany
    Dołączył
    Oct 2007
    Posty
    1,830

    Domyślnie

    Wielkie Brawa dla ciebie że w ogóle coś takiego udostępniłeś i się natrudziłeś ale również powiem że się pogubiłem z tym .

  6. #6
    Programista
    Dołączył
    Dec 2008
    Posty
    776

    Domyślnie

    Nigdy nie robiłem gier z chodzeniem po mapie. Plus dla Ciebie. Na przyszłość będę miał wzór.
    Kod php:
    echo 'A kij wam w oko!'
    Każdą decyzję analizuje na podstawie tysięcy IF'ów i ELSE'ów. ... na zasadzie (if) obiecałem (then) dzwonię - nonsopedia, informatyk

  7. #7
    Zarejestrowany Awatar AntyErrorysta
    Dołączył
    Oct 2009
    Posty
    557

    Domyślnie

    No brawa ale może jakieś demo że można sprawdzić jak w ogóle to wygląda :>

    Sygnaturka w trakcie tworzenia!


  8. #8
    Zarejestrowany Awatar Programista
    Dołączył
    Feb 2010
    Posty
    239

    Domyślnie

    Podczepiłem to wszystko pod kod php i mi nie działa chodzenie;/ nie wiem co jest. Chyba coś źle mi includuje pliki js.
    Pomoże ktoś na pw?

    Edit:// poradziłem z tym sobie lecz mam problem jak zapisać współrzędne postaci do bazy danych??
    Ostatnio edytowane przez Programista ; 19-07-2010 o 17:19
    NIE UDZIELAM POMOCY NA GG JEŚLI POPROSISZ O POMOC ZWIĄZANĄ Z PROGRAMOWANIEM ZOSTANIESZ AUTOMATYCZNIE ZABLOKOWANY, OD TEGO JEST FORUM!

  9. #9
    Zbanowany
    Dołączył
    Oct 2007
    Posty
    1,830

    Domyślnie

    A dodam takie info że jak szybko idę do góry do cofa mi się automatycznie i postać wygląda jak by chodziła tyłem pewnie jest tak kiedy wyjdę poza mape ale wole poinformować /.

  10. #10
    Zarejestrowany Awatar Programista
    Dołączył
    Feb 2010
    Posty
    239

    Domyślnie

    Zrobi mi ktoś przykład jak zapisac te współrzędne do bazy bo na js sie nie znam ;/
    NIE UDZIELAM POMOCY NA GG JEŚLI POPROSISZ O POMOC ZWIĄZANĄ Z PROGRAMOWANIEM ZOSTANIESZ AUTOMATYCZNIE ZABLOKOWANY, OD TEGO JEST FORUM!

Strona 1 z 4 123 ... OstatniOstatni

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. Chodzenie po mapie
    Przez marcelol w dziale Budowa gry via www
    Odpowiedzi: 2
    Ostatni post / autor: 04-07-2010, 09:42
  2. Pozycja na mapie
    Przez dumdas w dziale Budowa gry via www
    Odpowiedzi: 5
    Ostatni post / autor: 17-12-2009, 18:57
  3. Suwak w mapie galaktyki
    Przez Polish Hero w dziale Pytania dotyczące silnika Xnova
    Odpowiedzi: 2
    Ostatni post / autor: 14-12-2009, 17:49
  4. chodzenie
    Przez GibonZiom w dziale prp
    Odpowiedzi: 1
    Ostatni post / autor: 31-07-2009, 08:07
  5. Płynny ruch po mapie
    Przez pat15 w dziale Problemy przy tworzeniu własnej gry
    Odpowiedzi: 2
    Ostatni post / autor: 23-03-2008, 09:16

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
  •