Web App Manual
WebAppManual
WebAppManual
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 8
| Download | |
| Open PDF In Browser | View PDF |
Politechnika Wrocławska Projekt zespołowy User’s manual Steal The Treasure Game - edytor map 05.06.2018 r. Spis treści 1 Wstęp 1.1 Cel działania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 2 Edycja mapy 2.1 Parametry mapy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2 Elementy mapy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.3 Tworzenie mapy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 3 5 3 Zarządzanie mapami 3.1 Stwórz losową mapę 3.2 Pobierz Mapę . . . . 3.3 Wyślij mapę . . . . . 3.4 List map . . . . . . . 6 6 6 6 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Wstęp Edytor map służy do stworzenia własnej mapy, której następnie można użyć w grze Steal The Treasure Game. Aplikacja daje możliwość stworzenia własnej mapy od podstaw. Istnieje również możliwość wczytania wcześniej zrobionej w edytorze mapy i edycji jej. Wczytywanie odbywa się bezpośrednio z bazy danych znajdującej sie w chmurze, a więc jeżeli użytkownik będzie chciał wczytać mapy z bazy danych potrzebne będzie połączenie z internetem. Możliwe jest również wczytywanie map bezpośrednio z dysku. Po stworzeniu mapy zapisywana jest w formacie .JSON na dysku lub do bazy danych. 1.1 Cel działania Aplikacja ma na celu zapewnienie możliwości tworzenia i edytowania map w pełni kompatybilnych z grą Steal The Treasure Game i zarządzanie nimi. Dodatkową funkcjonalnością jest możliwość wymiany map między użytkownikami gry dzięki zaimplementowanej bazie danych. 2 Edycja mapy Każda mapa tworzona w grze oparta jest na siatce - gridzie (cały obszar mapy podzielony jest na mniejsze kwadraty, jeden przedmiot na mapie zajmuje dokładnie jeden kwadrat w edytorze). Umożliwia to łatwie i intuicyjne układanie elementów obok siebie, które ze sobą nie kolidują i na siebie nie zachodzą. Rysunek 1: Pusta mapa - rozmiar 5x5 2 2.1 Parametry mapy Przed stworzeniem każdej mapy możemy określić dokładną ilość pól (kwadratów) z których będzie się składała mapa oraz ich wielkość w edytorze. Rysunek 2: Panel zmiany rozmiarów mapy Kolejne pola panelu zmiany rozmiarów mapy oznaczają następujące wartości: • Box size - wielkość pojedynczego pola mapy • Width - ilość pól na szerokość • Height - ilośc pól na wysokość Po naciśnięciu przycisku CHANGE rozmiar mapy zostaje zmieniony. 2.2 Elementy mapy Powyżej widoku mapy znajduje się zbiór obrazków (ikon) reprezentujących konkretne obiekty użyte w grze. 1. Postacie (a) Główny bohater - agent (b) Strażnik Rysunek 3: Postacie 3 2. Przedmioty (a) Walizka (b) Mina (c) Mikstura (d) Karta dostępu Rysunek 4: Przedmioty 3. Elementy statyczne (b) Drzewa (a) Ściana Rysunek 5: Elementy statyczne 4 2.3 Tworzenie mapy Naciskając lewy przycisk myszy na dowolną ikonkę reprezentującąc dany element mapy pojawia się on na siatce reprezentującej mapę poniżej. Przykładowa mapa po kliknięciu kilku losowych elementów wygląda następująco: Rysunek 6: Przykładowa mapa Wszystkie elementy znajdujące się na mapie możemy dowolnie ustawić. Wstarczy przytrzymać lewy przycisk myszy na tym elemencie na mapie i przeciągnąć go na inne miejsce. Pod przeciąganym obiektem zaznaczane będzie pole, na które możemy upuścić przeciągany element. Zaznaczane pole będzie zmianiało kolor na następujące: • zielony - pole jest puste, po upuszczeniu obiektu zostanie on na to polu umieszczony • czerwony - na danym polu nastepuje kolizja z innym przedmiotem, po upuszczeniu obiektu wróci on na swoje poprzedniem miejsce (a) Wolne pole - kolor zielony (b) Zajęte pole - kolor czerowny Rysunek 7: Przesuwanie elementów Po dwukrotnym wciśnięciu lewego przycisku myszy na danym elemencie umieszczonym na mapie zostaje usunięty. 5 3 Zarządzanie mapami W aplikacji webowej istnieje możliwość zapisywania i wczytywania map. Służą do tego przycisku znajdujące się w górnej części ekranu przeglądarki: Rysunek 8: Przyciski do zarządzania mapami 3.1 Stwórz losową mapę W edytorze map dostepna jest opcja do stworzenia losowej mapy. Po wcisnięciu przycisku o nazwie CREATE RANDOM MAP zostaje wygenerowana losowa mapa o wielkości zapisanej w parametrach mapy. Losowa mapa pojawia się na siatce mapy w dolnej części ekranu. Mapę można również edytować. 3.2 Pobierz Mapę Przycisk ten służy do zapisania aktualnie tworzonej mapy. Po wciśnięciu przycisku DOWNLOAD MAP stworzona przez nas mapa w dolnej części ekranu zapisywana jest do pliku .JSON. Następnie pojawia się okienku wyboru miejsca zapisu pliku na dysku. Tak zapisaną mapę można ponownie wczytać lub użyć w grze. 3.3 Wyślij mapę Wysyła aktualnie tworzoną mapę do bazy danych będącej w chmurze. Po wciśnięciu przycisku UPLOAD MAP plik .JSON wysyłany jest do bazy danych. Do zakończenia tej czynności potrzebny jest dostęp do internetu. 3.4 List map Możliwe jest również pobranie map stworzonych przez nas lub też przez innych użytkowników. Mapy te pobierane są z bazy danych. Po naciśnięciu przycisku LIST MAPS wyświetlana jest lista zapisanych w bazie map. Rysunek 9: Lista map z bazy danych Po wyświetleniu listy map możemy wybrać konkretną mapę do wczytania. Po najechaniu myszką na obszar listy map podświetlana jest mapa pod kursorem myszy. Po naciśnięciu lewego przycisku myszy na element z listy, mapa jest wczytywana i zostaje wyświetlona w widoku mapy w dolnej części ekranu. 6 Spis rysunków 1 2 3 4 5 6 7 8 9 Pusta mapa - rozmiar 5x5 . . . . Panel zmiany rozmiarów mapy . Postacie . . . . . . . . . . . . . . Przedmioty . . . . . . . . . . . . Elementy statyczne . . . . . . . . Przykładowa mapa . . . . . . . . Przesuwanie elementów . . . . . Przyciski do zarządzania mapami Lista map z bazy danych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 3 4 4 5 5 6 6
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.5 Linearized : No Page Count : 8 Producer : MiKTeX pdfTeX-1.40.19 Creator : TeX Create Date : 2018:06:12 02:54:34+02:00 Modify Date : 2018:06:12 02:54:34+02:00 Trapped : False PTEX Fullbanner : This is MiKTeX-pdfTeX 2.9.6642 (1.40.19)EXIF Metadata provided by EXIF.tools