Wprowadzenie:

Na początku chcemy się przedstawić, mamy na imię Dawid i Szymon. Głupio zaczynać tak jak każdy z tych wykopów: Zrobiłem grę..., więc nie piszemy tego. Po prostu chcemy podzielić się z Wami tym, co zajęło nam kilka miesięcy i w kilku słowach opisać jak gra została stworzona oraz na koniec oczywiście odpowiedzieć na Wasze wszystkie pytania.

Podstawowe informacje:

Nazwa projektu: Squarge
Silnik: AndEngine
Wersje: Free (reklamy) oraz Pro (brak reklam, ranking z wykorzystaniem Google Play Games)
Tłumaczenia: polski, angielski

Skąd pomysł, dlaczego, co nas skłoniło:

Już od ponad roku planowaliśmy stworzyć jakaś aplikację/grę, jednakże ze względu na studia ciężko było się za to zabrać. W ostatnim semestrze trafił nam się przedmiot Aplikacje mobilne. Przedmiot był oczywiście możliwy do zaliczenia, przez zrobienie aplikacji. Postanowiliśmy więc właśnie stworzyć grę. Na sam pomysł gry wpadała dziewczyna Szymona. Gier o podobnej logice jest sporo w markecie, jednak żadna z diamencikowych wersji nie wpada w oko.
Cytat ze sprawozdania jakie załączyliśmy do projektu:

Na ekranie pojawia się 36 różnokolorowych (sześć różnych kolorów) losowo rozmieszczonych kwadratów (6x6). Zadaniem użytkownika jest poruszanie wybraną kolumną lub wierszem, tak aby minimum trzy kwadraty o tym samym kolorze znalazły się obok siebie w jednej linii. Po połączeniu takiej kombinacji, zostaje ona usunięta z ekranu, użytkownik dostaje punkty, pozostałe kwadraty zjeżdżają w dół, a na górze ekranu w wolnych miejscach pojawiają się nowe losowe kwadraty. Za połączone klocki gracz dostaje punkty, które może zapisać w najlepszych wynikach.
Oraz przewidywana funkcjonalność gry:

• wypełnienie planszy różnokolorowymi kwadratami
• obsługa ruchu wierszy i kolumn (odpowiednio zapętlone w pionie i poziomie)
• łączenie kombinacji tego samego koloru, usuwanie z ekranu i przyznawanie punktów
• animacje spadania klocków, pojawiania się oraz usuwania
• wypełnienie pustych pól różnokolorowymi kwadratami
• obsługa menu
• obsługa listy najlepszych wyników wraz z ich dodawaniem
• przyciąganie klocków do siatki
• możliwość kontynuacji przerwanie gry
• animacje menu

Więc koncepcja banalnie prosta. Idealna rozrywka na "wolne 5 minut" lub podróż do pracy/szkoły. Projekt zaczęliśmy rozwijać początkowo pod nazwą Match Lines. Prace rozpoczęliśmy 19 marca.

Kluczowe etapy rozwoju:

Chcemy teraz pokazać Wam kluczowe etapy rozwoju na podstawie zrzutów ekranu

Jest to nasza pierwsza aplikacja na Androida. W marcu nie wiedzieliśmy kompletnie nic na ten temat, nikt z nas nawet nie pisał wcześniej w Javie, więc można powiedzieć, że na każdym kroku się czegoś uczyliśmy. Pierwsze co nam przyszło na myśl to to, że pewnie da się stworzyć jakiegoś canvasa i na nim właśnie narysować siatkę gry. Tak powstała pierwsza wersja aplikacji: biała aktywność z kwadratami.

Po paru godzinach pracy, kolumny oraz wiersze dało się przesuwać, jednak pozycja elementów nie była jeszcze zapamiętywana. Pamiętam jak w drodze na uczelnie próbowałem ułożyć klocki tak, aby wszystkie znajdowały się w 1 miejscu. Ale w końcu doszedłem do wniosku, że to było chyba niemożliwe :D

Założyliśmy sobie, że kod musi być napisany tak, aby zmiany w kodzie nie powodowały żadnych problemów np. zwiększenie wielkości siatki. Wszystko miało być maksymalnie dynamicznie tworzone, w zależności od głównych zmiennych oraz wielkości ekranu. Także teraz, gdy gra jest skończona, aby zmienić wielkość siatki na 10x10 wystarczy zmienić jedną zmienną konfiguracyjną i wszystko będzie działać, a przynajmniej powinno :D

Jakiś miesiąc przed wersją ze screenu powyżej pojawiła się na Wykopie gra Motocross Rider. Wtedy też dowiedzieliśmy się o AndEngine. Początkowo nie planowaliśmy stworzenia gry właśnie na tym silniku, jednakże po komentarzach w sieci na temat wydajności canvasa do tworzenia gier 2D postanowiliśmy, że gra będzie wykorzystywała OpenGL. Zaczęliśmy pisać grę w "czystym" OpenGL. Wyglądało to dość słabo i męcząco. Były problemy z kamerą, tworzeniem obiektów. Lekko zniechęceni stwierdziliśmy, że spróbujemy wyżej wymienionego AndEngine. Dodatkowym istotnym aspektem wyboru tego silnika było to, że wspiera on Androida 2.2 lub wyżej. Pierwsza wersja na silniku AndAngine wyglądała jak ta na screenie powyżej. Dodatkowo przygotowaliśmy tekst pod wyświetlanie aktualnego poziomu w grze i pasek, który się zmniejszał wraz z upływającym czasem.

Mieliśmy więc już siatkę oraz kwadraciki, które po prostu się przesuwały. Nastąpił czas implementacji przyciągania kwadratów do siatki gry oraz zapamiętywania ich pozycji. Nie ukrywam, że ta wersja bardzo mi się podobała. W drodze na uczelnie po raz kolejny mogłem się nieźle bawić. Tworzyłem domki, drzewa, jakieś dziwne wzorki. Miałem mnóstwo zrzutów z różnymi figurami, lecz ostatnio przy instalacji nowego Androida sformatowałem kartę pamięci i wszystko przepadło :( Jak widać na zrzutach dodaliśmy także czcionkę pod punkty.
W tym miejscu nasza praca się rozdzieliła na 2 osobne branche: master oraz featureMenu. Zadaniem Szymona była dalsza implementacja siatki gry na masterze, natomiast ja miałem zająć się menu na featureMenu.

Pierwsza wersja menu jaka powstała to oczywiście 3 kwadraty. Przedstawiam wyżej już tą jedną z ostatecznych. Nie miałem za bardzo pomysłu jak będziemy przechodzić teraz do innych widoków. Wymyśliłem sobie animację i nazwałem ją liść. Nie wiem czemu wszyscy się śmieją kiedy o tym mówię...

To jest właśnie liść. Początkowo nie mogliśmy dojść do porozumienia, czy animacja ma zostać. Znajomi byli podzieleni, ale większości się podobała, więc postanowiliśmy ją zostawić. Stworzenie takiej animacji w Andzie jest banalnie proste. Posiada on gotowe metody na różne operacje na obiektach. Rotacja prostokąta o 90 stopni w ciągu 2 sekund to dosłownie 1 linia kodu.


W tym samym czasie Szymon rozwijał obsługę siatki gry. Jego zadanie było zdecydowanie trudniejsze, algorytmy odpowiedzialne za przesuwanie, sprawdzanie kombinacji oraz inne rzeczy musiały być optymalne, ponieważ już na tym etapie tworzenia aplikacji było widać, że staje się ona coraz cięższa.

Gdy siatka oraz menu było w miarę gotowe postanowiliśmy dodać splashscreena, który był jednocześnie ekranem ładowania. Tutaj napotkaliśmy na kilka problemów. Nie chce się wdawać w nudne szczegóły, ale jest kilka problemów, które trzeba obchodzić. Dodatkowo był problem z odpowiednim znikaniem splasha. Początkowe wersje miały na sztywno przypisane, że ma trwać on 4 sekundy, teraz znika dokładnie wtedy, kiedy wszystko załaduje.

Grze brakowało informacji, co to za gra, więc dodaliśmy ją do menu. W międzyczasie dużo razy zmienialiśmy sposób naliczania punktów.

Cały czas brakowało ekranu końca gry, więc rozpoczęliśmy jego tworzenie. Początkowo wprowadzanie imienia odbywało się bezpośrednio przez wysunięcie klawiatury i wprowadzanie wejścia na ekran. Rozwiązanie to okazało się niekoniecznie fajne, więc został dodany dialog Androidowy, który jest do dziś.

Stworzenie tego dialoga zajęło bardzo dużo linii kodu. Trzeba było ręcznie wszystko wyrównać oraz dodać rożnego rodzaju filtry.
Możliwość wprowadzania imienia już była, brakowało więc jego wyświetlania. W tym czasie postał ekran wyników. Coraz większa ilość elementów na scenie powodowała, że musieliśmy rozpocząć gruntowną optymalizację, bo gra po prostu straciła płynność. Tutaj zauważyliśmy, że bardzo długo trwa tworzenie obiektów Font pod obiekt Text. Musieliśmy sporo zmienić. Bardzo ważna rolę w optymalizacji aplikacji odegrały metody odpowiedzialne za: widoczność obiektów oraz wyłącznie uaktualniania obiektów, kiedy nie są one widoczne dla użytkownika. Tak naprawdę to dzięki nim gra wróciła do pełnej płynności.

Na uczelni jedna z koleżanek zaproponowała fajną opcję, którą zaimplementowaliśmy: mieszanie klocków na wstrząśnięcie telefonem. Była to ostatnia funkcjonalność, która została dodana przed oddaniem projektu. Wszystkie założone cele zostały spełnione. W międzyczasie doszły take rzeczy jak: zmieniający kolor pasek czasu gry, dodanie animacji nowego poziomu oraz zwiększania punktów oraz sporo innych. Etap ten trwał do połowy czerwca.

Po oddaniu projektu:

Po oddaniu projektu mieliśmy dość ciężką sesję, dlatego rozwój aplikacji został wstrzymany. Około 2 tygodnie temu wróciliśmy do aktywnego rozwoju aplikacji, bo od początku założeniem było oddanie projektu, a następnie opublikowanie aplikacji w Google Play. Stworzyliśmy więc 3 branche: master - czysta aplikacja, admob - wersja z reklamami, pro - wersja bez reklam z rankingiem wykorzystującym Google Play Games.
Tutaj nie będę dokładnie opisywał całej procedury, bo i tak tekst jest już dość długi. Jeśli macie pytania dotyczące admob, Google Play Games lub po prostu publikacji to czekamy za nimi, postaramy się odpisać na wszystkie, na które znamy odpowiedź.

Nazwa:

Zapomniałem wyżej wspomnieć o nazwie. Podczas tworzenia projektu postanowiliśmy ją zmienić na Squarge. Nazwa pochodzi od połączenia wyrazów Square oraz Merge.

Ikonki:

Historia ikonek bez aktualnej:

Ilość linii kodu:

master: 3658
admob: 3727
pro: 4614

Drzewo projektu:

Od lewej: pierwsza wersja gry, wczesna wersja po przejściu na AndEngine oraz końcowa wersja Pro.

Najlepsze wyniki:

Podczas testów aplikacji udało nam się osiągnąć takie wyniki:
* siostra Dawida - 34 521
* Dawid - 29 543
* Szymon - 24 644
Nasze rankingi były wielokrotnie kasowane w celu testowania, więc bez dowodów, musicie wierzyć na słowo :)

Podsumowanie:

Biorąc pod uwagę czas i wielkość projektu, można powiedzieć, że sporo czasu zajęło nam stworzenie tej gry. Na pewno więcej niż sami się tego spodziewaliśmy. Naszą wymówką są oczywiście inne projekty związane z uczelnią, które musieliśmy oddawać między czasie, ale przede wszystkim na każdym kroku staraliśmy się o to, żeby gra nie miała bugów, aby animacje były płynne, itd.

Linki do Google Play:

Wersja Free
Wersja Pro