Lekcja pierwsza - nowy element w menu NPC

Witajcie!

Zaczniemy od czegoś prostego, będzie to dodatkowy element pokazujący się w menu po kliknięciu myszką na NPC. Napiszemy w tym celu prosty dodatek do nowego silnika, który rozszerzy domyślne menu o dodatkowy element o nazwie 'Kim jesteś?'. A tak to będzie wyglądało na żywo:

Nowy element w menu po kliknięciu na NPC

Akurat to menu pojawiło się po kliknięciu na 'Anzelma' w mieście Karka-Han. Trochę go to przerosło i schował sie pod nim, ale to nic, ważne że działa ;) Po krótkiej prezentacji efektu końcowego przejdźmy do części praktycznej poradnika.

Gdzie szukać kodu, który pokazuje menu ?

Do wyszukiwania kodu przydają się narzędzia takie jak WebDeveloper oraz JavascriptBeautifier (opisane w poprzednim poradniku) Zaczynamy od znalezienia pliku w którym znajduje się kod odpowiedzialny za zachowanie obiektów typu NPC (w tym także za menu, które pokazuje się po kliknięciu na tych obiektach) W tym celu logujemy się do gry (na nowy silnik) i wybieramy z menu WebDevelopera [Informacje] -> [Wyświetl Aplety JavaScript] po tej operacji powinna pokazać nam się lista plików JS dołączonych do strony, zerknijmy na http://game8.margonem.pl/js/elements.js Ze względów oszczędnościowych plik został zapisany w jednej linii (mniej wtedy zajmuje i zjada mniej transferu) przez to czyta się to jak chińsko-egipskie mazańce i będziemy potrzebować upiększacza żeby cokolwiek z tego kodu zrozumieć. Potraktujmy go więc tym narzędziem: http://jsbeautifier.org/ wynik kopiujemy do naszego ulubionego edytora i woila :)

Opis klasy NPC zawiera się w linijkach od 21 do 131 i to jest to co nas będzie interesować, żeby być jeszcze bardziej precyzyjnym oto kod, który odpowiada za budowę menu podręcznego:

//linia 79 - 108
$("#npc" + k).css({
            left: e[k].x * 32,
            top: e[k].y * 32 - 16,
            zIndex: 10 + e[k].y + ((e[k].type == 4) ? parseInt(e[k].wt) : 0)
        }).click(function (h) {
            var f = this.id.substr(3);
            if (Math.abs(g.npc[f].x - hero.x) > 1 || Math.abs(g.npc[f].y - hero.y) > 1) {
                hero.mClick(h);
                return
            }
            var d = [];
            if (g.npc[f].type == 4) {
                return
            }
            if (g.npc[f].type == 0) {
                d[0] = ["Rozmawiaj", '_g("talk&id=' + f + '")']
            }
            if (g.npc[f].type == 2 || g.npc[f].type == 3) {
                d[0] = ["Atakuj", '_g("fight&a=attack&auto=1&id=-' + f + '")']
            }
            if (g.npc[f].type == 2 || g.npc[f].type == 3) {
                d[1] = ["Walcz turowo", '_g("fight&a=attack&id=-' + f + '")']
            }
            if (g.npc[f].type == 5) {
                d[0] = [(g.npc[f].wt == 1) ? "Uruchom" : "Obejrzyj", '_g("talk&id=' + f + '")']
            }
            showMenu(g.npc[f].x * 32 + 16, g.npc[f].y * 32 + 8, d)
        }).mousedown(function (d) {
            return false
        });

I to jest dokładnie to czego potrzebujemy. Teraz będziemy musieli się wstrzelić ze swoim kodem w kod silnika tak aby każdy napotkany NPC miał taką opcję w menu :) za dobre miejsce uznałem linijkę tuż przed wywołaniem funkcji odpowiedzialnej za pokazanie menu:

            if (g.npc[f].type == 5) {
                d[0] = [(g.npc[f].wt == 1) ? "Uruchom" : "Obejrzyj", '_g("talk&id=' + f + '")']
            }
            //NASZ KOD BĘDZIE TUTAJ
            showMenu(g.npc[f].x * 32 + 16, g.npc[f].y * 32 + 8, d)

Jak dodać nowy element menu ?

Wiemy już gdzie wstawić kod, nie wiemy jednak co wstawić :) Można to wywnioskować po kawałku kodu odpowiedzialym za tworzenie menu. Jest tam kilka instrukcji warunkowych sprawdzających z jakim typem NPC mamy do czynienia i w zależności od tego tworzone jest odpowiednie menu.

W Margonem potworki oraz niektóre przedmioty tak jak np. skrzynka pocztowa są traktowane jako NPC. Coś co je rozróżnia to własność o nazwie 'type' którą posiada każdy obiekt NPC

if (g.npc[f].type == 2 || g.npc[f].type == 3) {
	d[0] = ["Atakuj", '_g("fight&a=attack&auto=1&id=-' + f + '")']
}
if (g.npc[f].type == 2 || g.npc[f].type == 3) {
	d[1] = ["Walcz turowo", '_g("fight&a=attack&id=-' + f + '")']
}
 

W powyższym kodzie widać sposób tworzenia menu dla NPC który jest stworkiem do atakowania, łatwo można zauważyć znane nam z gry elementy menu: 'Atakuj' i 'Walcz turowo'. Po tym kodzie można też stwierdzić, że każdy element menu jest dodawany jako osobny element tablicy, który jeszcze dodatkowo zawiera w sobie dwa elementy. Są nimi etykietka menu oraz funkcja którą wywoła kliknięcie na ten właśnie element menu. Można się domyśleć co powinniśmy teraz zrobić :) Dodajemy nowy element menu:

if (g.npc[f].type == 5) {
                d[0] = [(g.npc[f].wt == 1) ? "Uruchom" : "Obejrzyj", '_g("talk&id=' + f + '")']
            }
			d[2] = ["Kim jesteś?", 'alert("test")'];
            showMenu(g.npc[f].x * 32 + 16, g.npc[f].y * 32 + 8, d)

Teraz po kliknięciu na nasz nowy element menu powinno pokazać się coś takiego:

Taki alert jest jednak bez sensu bo po pierwsze nic nie robi a po drugie wstrzymuje wykonywanie pozostałych skryptów co powoduje restrart silnika ;) Zmienimy to więc na coś bardziej zaawansowanego. W tym celu posłużę się kilkoma fajnymi funkcjami, które zostały opisane w tym temacie na forum Margonem: opis przydatnych funkcji na nowym silniku, ja skorzystałem z mAlert() oraz message(). Co robią ? poczytajcie na forum :)

Dodatek: Info o NPC

Nasz prosty alert postanowiłem rozszerzyć do czegoś bardziej skomplikowanego aczkolwiek niezbyt trudnego, żeby nie zniechęcać was na samym początku :) Będzie to okienko z informacjami na temat klikniętego NPC oraz przyciskami tak/nie pod którymi będzie mała niespodzianka. Zaczynamy...

Na początek napiszemy sobie prostą funkcję która będzie przyjmowała jeden parametr - id odpowiadające klikniętemu NPC. W tej funkcji będziemy wyciągać obiekt NPC z globalnej tablicy obiektów posługując się w tym celu wcześniej wspomnianym parametrem (id). Następnie wyciągniemy z tego obiektu potrzebne informacje, złożymy to wszystko w ładnie wyglądający ciąg znaków i wyświetlimy za pomocą funkcji mAlert(). Oto kod funkcji:

myFunction = function(npcId){
	mAlert("Jestem "+g.npc[npcId].nick+"<br />Mam "+g.npc[npcId].lvl+" poziom<br /><br />Podobało się?", 2, {0:function(){message("Super! "+g.npc[npcId].nick+" Cię lubi")}, 1:function(){message("Szkoda, "+g.npc[npcId].nick+" Cie nie lubi")}})
}

W tej funkcji użyłem mAlert() wraz z callbackami które uruchamiają się po kliknięciu na tak lub nie, całość powinna wyglądać tak:

Po kliknięciu na Slina w Karka-Han i wybraniu nowego elementu z menu, ukazujesię nam coś takiego :) Mam nadzieję, że się wam podobało, wystarczy tylko podpiąć naszą fukncję pod element menu zamiast wcześniejszego alerta:

if (g.npc[f].type == 5) {
	d[0] = [(g.npc[f].wt == 1) ? "Uruchom" : "Obejrzyj", '_g("talk&id=' + f + '")']
}
d[2] = ["Kim jesteś?", 'myFunction("'+f+'")']; //nasz kod 
showMenu(g.npc[f].x * 32 + 16, g.npc[f].y * 32 + 8, d)
 

To narazie wszystko, cały dodatek możecie znaleźć tutaj jest tam cały kod, który pisany był w tym poradniku + dodatkowo kilka rzeczy kóre są niezbędne żeby dodatek działał prawidłowo po automatycznym zainstalowaniu. Dodatek można uruchomić na nowym świecie wklejając ten kod w konsoli i wciskając enter:

addon http://www.margoextend.net/install/30/npc-info-nowy-element-w-menu.user.js

Pozdrawiam i życzę miłego korzystania :)