14 listopada 2017

Angularowy Wojownik Autostrady cd

Oj sporo czasu minęło od ostatniego wpisu. Spieszę powiedzieć że nie był to czas stracony. Angularowy Wojownik Autostrady powstaje i to bardzo intensywnie. Udało mi się wyrobić nawyk programowania na komputerze dzięki czemu nawet 15 minutowe posiadówki za klawiaturą pozwalają napisać kilka linii kodu.

A sam projekt?

Cóż :-) przerobiłem niemal wszystkie paragrafy na wersję interaktywną. Z 350 paragrafów jeszcze 7 nie zachowuje się jak trzeba.
Powstał nowy, błyszczący silnik zarządzający grą. Jego poziom komplikacji jest nieporównywalnie większy od tego co zrobiłem dla Sladuma (wybacz stary :) ) i jednocześnie otrzymał sporo nowych możliwości.
Wykorzystuje sporo z tego co daje angular - w efekcie, aby wszystko działało tak jak potrzebuję musiałem podnieść używaną wersję z 1.3 do 1.5. Wreszcie pojawiły się dialogi, korzystam z angularowych eventów, local storage i canvasów. Ogólnie zastosowane rozwiązania zasługują na osobny wpis (a może nawet kilka). Postaram się je w miarę możliwości zrobić.

A jak to teraz wygląda?
Tak wyglądało z miesiąc temu:


A tak wygląda teraz:


28 września 2017

Angularowy Wojownik Autostrady

Powoli ruszyłem z pracami nad mechaniką tworzenia postaci.
Jeśli ten element wykonam prawidłowo reszta pójdzie z górki. W tej chwili stworzyłem dwa nowe ekrany - losowania umiejętności oraz wyboru podstawowego ekwipunku.
Zrzuty poniżej

Wybór ekwipunku

Wybór umiejętności

19 września 2017

Interaktywny Wojownik Autostrady

Powoli przygotowuję kolejny paragrafowy projekt. Tym razem na stół wziąłem znaną wszystkim fanom paragrafówek grę Wojownik Autostrady. Stwierdziłem, że zmierzę się z kultowym produktem i jednocześnie trudniejszą mechaniką.
O ile niemal od ręki przeniosłem definicje paragrafów do formatu identycznego z tym jaki zaprojektowałem dla Przygody barbardzyńcy Sladuma tak przygotowanie mechaniki gry nie jest  łatwym zadaniem. Muszę dopisać mechanizm tworzenia postaci, specyficznych testów opartych o umiejętności, szeroką obsługę ekwipunku... W efekcie dojdzie kilka dodatkowych ekranów i sporo kodu.
Tekst gry będzie w dwóch wersjach językowych - polskiej oraz angielskiej.

Jak szaleć to dla szerokiego grona!

03 września 2017

Paragrafówka przygoda w Angularze cz5 - KONIEC PRAC

Udało się! Paragrafówkowy silnik (o tyle o ile może to powiedzieć autor jakiegokolwiek programu) ukończony. Możecie się z nim zapoznać grając pod tym linkiem:


Życzę powodzenia w odkrywaniu sekretów świątyni Seta.

p.s.
W razie uwag, błędów cóż - piszcie :P

19 sierpnia 2017

Paragrafówka przygoda w Angularze cz4

Prawie koniec !
Pojawiła się obsługa przedmiotów posiadanych w ekwipunku oraz przełączanie aktywnej broni. Właściwi są to ostanie elementy, które chciałem dodać. Na razie ekwipunek nie jest ładowany jako modalne okienko bo w końcu dałem sobie spokój z tym rozwiązaniem
Poniżej efekt 'live', menu bohatera. Dostępne jest po prostu pod przyciskiem i ładuje się nad paragrafem. Tak prezentuje się charakterystyka postaci:
Jak widać można - w przypadku zbyt małej ŻYW użyć mikstur leczenia. Efektem leczenia jest wzrost ŻYW i zniknięcie mikstury z listy:
Przełączenie broni i leczenie dostępne jest tylko poza walką
A tu widać że Sladum zdobył dwuręczny miecz, którego użyje w walce jeśli klikniemy klawisz 'Użyj'.
Użycie przekłada się na walkę. Zgodnie z definicją broni + 2 kostki do ataku:
Iiii.... zostały poprawki błędów i jakiś refaktor. Niedługo będziecie mogli zagrać sami!

17 sierpnia 2017

Paragrafówka przygoda w Angularze cz3

Powoli pracę nad angularowa paragrafówką dobiegają końca. Od ostatniego wpisu poprawiłem wiele niedoróbek, dodałem obsługę warunkowego wyłączania wyjść/wejść do paragrafów dzięki czemu np. nie da się dwa razy przeszukać pomieszczenia czy dwukrotnie wejść w tryb walki z raz pokonanym przeciwnikiem.
Po drodze powstała obsługa pułapek i kilka mechanicznych elementów gry. Niewiele zostało do dopisania (min.: wliczanie bonusów z przedmiotów w walce czy leczenie się).
Nadal nie ma modalnego okienka ekwipunku postaci! Nie udało mi się pokonać problemów z wyświetleniem głupiego modalnego diva ze wsparciem Angulara. W sieci znalazłem co najmniej kilkanaście przykładów opisujących jak to zrobić, ale żaden te z tych, które użyłem nie zadziałał. W końcu i to zaziała ale sądziłem że jest to rozwiązanie przysłowiowo dostępne prosto z pudełka.
Fajnie działa opcja sprawdzenia czy dane wyjście z paragrafu jest dostępne lub niedostępne. Efekt jest lepszy niż sobie obiecywałem po tym rozwiązaniu. Pokaże to na przykładzie działających paragrafów.
W ramach oryginalnego paragrafu 27 definicja była następująca:
Widać, że ilość obsługiwanych opcji jest duża i ew. gracz może po prostu ominąć te, które są dla niego niewygodne.
Dzięki wprowadzeniu kilku mechanizmów obsługiwanych z poziomy angulara pierwsze podejście do paragrafu wygląda następująco:
Co się stało? Otóż pojawiły się następujące rzeczy:
  • Sprawdzane jest czy postać posiada w ekwipunku klucz do drzwi
  • Jeśli go nie posiada, blokowane są wyjścia odpowiadające za obsługę klucza
A teraz chwilę pozwiedzaliśmy dostępne paragrafy (i nie wyważyliśmy drzwi) i mamy w ręce klucz pasujący do drzwi. Dostępne wyjścia prezentują się następująco:
jednocześnie dzieje się coś dodatkowego. Bez klucza (lub wyważenia drzwi) nie można było wejść do świątyni, ale i przejście ze środka świątyni na dziedziniec było zablokowane! (paragraf 11)
jednak w momencie gdy trafimy do paragrafu 11 z kluczem zdobytym na dziedzińcu (lub też wyważyliśmy drzwi) zmienia się ilość dostępnych możliwości:
Efekt jest przyjemny i intuicyjny. Chciałbym już oddać to co napisałem, ale jeszcze muszę się powstrzymać. Nie wszystko działa tak jak trzeba.

01 sierpnia 2017

Paragrafowa przygoda w Angularze cz2

Wbrew pozorom prace nad angularowym silnikiem gry paragrafowej trwają dalej. W tej chwili dotarłem do momentu, w którym kod idzie w logikę obsługi  działania paragrafów niż naukę Angulara. Oczywiście staram się jak mogę wprowadzać rozwiązania angularowe, ale nie oszukując - nie da się wszystkiego napisać tak, aby powstało tylko na angularowy sposób.
W tej chwili próbuje nauczyć się jak wygenerować modalne okienko potrzebne do wyświetlania  stanu ekwipunku postaci. Już sprawiło mi to sporo kłopotów i ...  nadal nie działa.
Kolejny element framweworka jaki chce zastosować to fabryki do tworzenia źródła danych (teraz tworzonego statycznie w jednym z plików) oraz niemal najważniejszy element Angulara czyli dyrektywy. Tylko co ja tą dyrektywą będę robił to nie wiem :).

Takie podejście to trochę przerost formy nad treścią jednak bez użyci możliwie dużej ilości wbudowanych elementów frameworka nie da się go nauczyć na trochę bardziej niż podstawowym poziomie.

 Sam silnik w międzyczasie od ostatniego wpisu otrzymał kilka nowych funkcjonalności. W tym:
  • testy warunkowe
  • testy kumulatywne
  • zbieranie przedmiotów po testach i po walce (przykład na zrzutach)
    Przed walką
    Po walce
  • sprawdzenie czy postać posiada przedmiot potrzebny do przejścia paragrafu
  • zapis historii poruszania się po paragrafach
  • kilka poprawek blokujących wyświetlanie paragrafów
  • dużo innych drobnych poprawek

Pojawił się już efekt kuli śnieżnej - drobna zmiana w miejscu X powoduje ZŹŻ zmian w 3 innych miejscach. Powoduje to standardowe zamieszanie - rzeczy które działały tydzień wcześniej nie działają dzisiaj.

Poważnie rozrosła się definicja pojedynczego paragrafu. Pierwotnie był tekst paragrafu plus linki przekierowań. Wraz z dodawaniem nowych funkcjonalności poziom komplikacji zmienił się i trzeba pamiętać o nowo dodanych rzeczach oraz o tym jak wpłyną na to co już jest napisane.

Poniżej przykłady jak wygląda definicja paragrafu w zależności od tego jak dużo operacji udostępnia.

Definicja zwykłego paragrafu z jednym przekierowaniem
new Paragraf({
    number: 2,
    text: '<p>Zajmujesz miejsce woźnicy. Brama otwiera się jak tyko do niej podjeżdżasz</p>',
    exits: [new Redirect({
        target: 30,
        text: '<p><a  class="more-link"  href="#/paragraf/30">Na dziedzińcu strażnicy podchodzą do Ciebie</a></p>'
    })],
    enemy: [],
    tests: [],
    treasure: []
}),


A tutaj mamy definicję paragrafu z wrogiem i możliwością zdobycia - po walce - przedmiotu, miecza do rąk dwóch. Oczywiście obiekt mieczDwureczny jest odpowiednio budowany wcześniej:
new Paragraf({
        number: 142,
        text: '<p>Paragraf na potrzeby podniesienia przedmiotu po walce</p>',
        exits: [
            new Redirect({
                target: 144,
                text: '<p><a  class="more-link" href="#/paragraf/144">Pokonałeś wroga</a></p>',
                type: FIGHT_WON
            }),
            new Redirect({
                target: 144,
                text: '<p><a  class="more-link" href="#/paragraf/144">Poległeś</a></p>',
                type: FIGHT_FAILED
            })
        ],
        enemy: [new Enemy({name: 'Czarodziej', hp: 1, deffence: 1, proffesion: MAGE, special: [], status: 1})],
        tests: [],
        treasure: [mieczDwureczny]
    }),


O i definicja miecza:
var mieczDwureczny =  new Treasure({
    id: 2,
    name:'Miecz dwuręczny',
    bonus:2,
    bonusType:'SF',
    diceType:'DYNAMIC_MD'
});


Tu zaś mamy definicję paragrafu z testem kumulatywnym. Sama definicja testu jest już skomplikowana...
new Paragraf({
        number: 139,
        text: '<img src="img/swiatynia_wejscie.png" style="width: 50%;height: auto;  float: right; margin: 0 0 10px 10px;"/> ' +
        'Test KUMULATYWNY (charyzmy) CH: 4(5)',
        exits: [
            new Redirect({target: 144, text: '<p><a  class="more-link" href="#/paragraf/144">Wyjscie jakie pojawi się ponizej 4 rund UDANE </a></p>'}),
            new Redirect({target: 144, text: '<p><a  class="more-link" href="#/paragraf/144">Wyjscie jakie pojawi się przy 4 rundach UDANE </a></p>'}),
            new Redirect({target: 144, text: '<p><a  class="more-link" href="#/paragraf/144">Wyjscie jakie pojawi się przy 5 próbach UDANE </a></p>'}),
            new Redirect({target: 144, text: '<p><a  class="more-link" href="#/paragraf/144">TEST NIEUDANY PO 5 probach</a></p>'}
            )
        ],
        enemy: [],
        tests: [new Test({parameter: CH, difficulty: 4, success: 5, cumulative: true, conditionalExits: ['WON:LT:4', 'WON:EQ:4', 'WON:GT:4', 'FAILED:GT:5']})],
        treasure: []
    }),


I tak dalej. Możliwości jest sporo w efekcie kod szybko puchnie.

Gdzieś przy okazji napisałem parser w javie, który przeniósł poprzednią wersję paragrafówki do wersji angularowej. Można prowadzić walki, przeprowadzać część testów i poruszać się między paragrafami. Dzięki temu zauważyłem też, że konstrukcja niektórych paragrafów stanowi poważny problem dla aktualnej wersji silnika.
Wygląda tak i jest w pełni grywalna (nie licząc problematycznych paragrafów)


Cyferki na górze ekranu to paragrafy, które minął bohater zanim dotarł do paragrafu 23.

 Tutaj przykład testu kumulatywnego i jego efekt:




i da się dojść do końca gry. Log paragrafów pokazuje co się działo po drodze :)






Mimo wszelkich problemów jadę z kodem dalej.


p.s.
Kod javascript generowany z hilite.me

10 lipca 2017

Paragrafowa przygoda w Angularze cz1

Wspominałem w poprzednim wpisie o pewnej niespodziance przygotowywanej wraz z przygotowaną paragrafową grą Przygoda barbarzyńcy Sladuma. Tydzień temu nie wiedziałem jednak czy będę miał czas i chęci (jakże są ważne), aby zrobić to co miałem na myśli.


Zaczęło się niewinnie. Nie dalej jak dwa tygodnie temu stwierdziłem, że nauczę się AngularJS - webowego frameworka do JavyScript. Umożliwia on - podobnie jak jQuery - na zaawansowaną pracę na poziomie przeglądarki z wyświetlanym kodem HTML. Trochę takie jQuery na sterydach. Jak pewnie podejrzewacie, nauka czegokolwiek związanego z programowanie wiąże się z pisaniem miej lub bardziej skomplikowanych programów pokazujących podstawy języka czy frameworku. I w tym wypadku zacząłem tak samo, ale po przerobieniu tego i owego z książki (zawierającej błędy w napisanym kodzie!)  doszedłem do wniosku, że ten sposób nauki jest, ogólnie rzecz ujmując, mało wydajny i do dupy. Robienie pseudostron z opisanych w książce przykładów czy wyświetlanie przysłowiowego "Hello world" nie jest zbyt rozwijające i bynajmniej nie pozwala na nauczenie się czegokolwiek w sensownym czasie. Trzeba podejść do tematu tak, aby nie znudził po kilku godzinach nauki.

Z tego też powodu wpadłem na pomysł, aby przy nauce Angulara zrobić całkowicie interaktywną grę paragrafową. Połączę dzięki temu przyjemne (robienie gier) z  pożytecznym (nauka frameworku). Częściowo jest to też efekt malkontenckich uwag mojego kolegi, którego mierził obowiązek wyjmowania kości do gry w grę uruchomioną na przeglądarce oraz że jest tak mało interaktywna. 

 W efekcie mam na tapecie paragrafówkę Przygoda Sladuma przerabianą na, ni mniej, ni więcej, grę tekstową, w której interakcja, poza klikaniem na paragrafy i okazyjnie na aktywne przyciski, nie wymaga od grającego więcej wysiłku. Testy i walka rozwiązywane są przez wbudowany silnik gry paragrafowej napisany w javaScript na frameworku Angular.

W tej chwili postęp prac w stworzeniu w pełni interaktywnej paragrafówki oceniam na jakieś 50%. Zbudowałem mechanizm przekierowań między paragrafami (oparty $location), szablonów ekranów (angularowe szablony), prowadzenia walki, testów pojedynczej cechy, losowania kostek (angularowe serwisy), wyświetlanie paragrafów i wstępna obsługa błędów (angularowe kontrolery). Brakuje dobrej obsługi błędów przekierowań i kilku aspektów mechaniki gry paragrafowej. Muszę też popracować nad  wyglądem np. listy wyników rzutów przy walce czy wygląd ekraniku ekwipunku. 

Efekty są zachęcający. Wszystkie działania gracza oraz podjęte akcje trzyma w pamięci przeglądarka, nie trzeba przechodzić między stronami, aby otworzyć kolejny paragraf. Wbudowałem proste zabezpieczenie przed oszukiwaniem poprzez cofanie stron :p. Prace trwają.


Poniżej kilka zrzutów:

Walka:

Przykład walki z dwoma przeciwnikami
Ciąg dalszy walki, dla postaci Sladuma, w zależności od potrzeb, aktywują się umiejętności przydatne w walce. Oczywiście
paski Żywotności zmieniają się dynamicznie.



Wygląd paragrafu przed testem wymagającym jednego rzutu.

Test nieudany + przekierowanie


Test udany + przekierowanie


p.s.
Jeśli zajrzy tu ktoś zainteresowany ja działa Angular użyty do stworzenia gry oczywiście mogę o tym napisać.

04 lipca 2017

Gra paragrafowa z KC w tle

Zapewne wiecie czym są gry paragrafowe. Jeśli nie to odsyłał do Wikipedii. A dlaczego o tym piszę? Powód jest prosty.
Właśnie jedną napisałem.
Tak - nie kłamie :). Pomysł pojawił sie przypadkiem podczas pisania postów na forum kc-towym.  
Dzięki zaangażowaniu i silnej woli udało się skończyć projekt!.

Gra została zamknięta w 80 paragrafach.
Spytacie - a gdzie można w nią zagrać?

A TUTAJ: Przygoda barbarzyńcy Sladuma

p.s. W związku z tym projektem przygotowuje jeszcze jedną niespodziankę. Jest jeszcze w fazie tworzenia i opracowywania koncepcji, ale efekty są obiecujące!

23 marca 2017

Rogalik

Oho, ale zrobiłem długą przerwę.

Niestety spowodowana jest brakiem czasu na rozwój gry. Ciężko zmusić się do pisania kodu, gdy wolne godziny, które możesz na to poświęcić, mieszczą się w granicy od 23:30 do 0:30 :).
Może aktualizacje będą się pojawiać jak wrócę do tematu chociaż na 15 min dziennie?

Rozważałem (za namową kolegi) do umieszczenia kodu na jakimś githubie czy innym gicie online. Tak, abym sam miał do niego łatwy dostęp z dowolnego komputera jak i z tego powodu, że może tajemnicze ktosie będą chciały partycypować w projekcie (i nie zaorają kodu wirusami:) ) podsuwają pomysły i poprawiając istniejące rozwiązania.

Jednak w tej chwili kod podróżuje w mailach, a powyższa propozycja pozostaje w sferze marzeń :).