Web App Manual
WebAppManual
WebAppManual
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 8
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 2
1.1 Celdziałania ........................................ 2
2 Edycja mapy 2
2.1 Parametrymapy ...................................... 3
2.2 Elementymapy....................................... 3
2.3 Tworzeniemapy ...................................... 5
3 Zarządzanie mapami 6
3.1 Stwórzlosowąmapę .................................... 6
3.2 PobierzMapę........................................ 6
3.3 Wyślijmapę......................................... 6
3.4 Listmap........................................... 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
(a) Ściana (b) Drzewa
Rysunek 5: Elementy statyczne
4
2.3 Tworzenie mapy
Naciskając lewy przycisk myszy na dowolną ikonkę reprezentującąc dany element mapy poja-
wia 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ąga-
nym 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 DOWN-
LOAD 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 Pustamapa-rozmiar5x5................................. 2
2 Panel zmiany rozmiarów mapy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3 Postacie ........................................... 3
4 Przedmioty ......................................... 4
5 Elementystatyczne..................................... 4
6 Przykładowamapa..................................... 5
7 Przesuwanieelementów .................................. 5
8 Przyciski do zarządzania mapami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
9 Listamapzbazydanych.................................. 6
7
