Pierwsze kroki z Cocos2d-JS

Gry wideo są obecnie jednym z najważniejszych elementów gospodarki cyfrowej, każdego roku w projektowanie, rozwój i utrzymanie gier wideo inwestuje się miliardy dolarów, a jednocześnie większą kwotę otrzymują konsumenci tego typu treści.
Bardzo łatwo jest pomyśleć, że gry wideo są tylko dla dzieci lub dla ludzi, którzy są w tym świecie, ale rzeczywistość jest inna, nie wszystkie gry są dla dzieci i nie wszyscy ludzie muszą być fanami, aby cieszyć się dobrą grą, są tysiące przypadków, ale mogą być dwa przykłady Cukierki zmiażdżyć i Simowie, pierwsza była rewolucją w obszarze gier w sieciach społecznościowych i mobilnych, generujących codziennie dużo pieniędzy, a druga, znacznie starsza, była rewolucją w grach na PC, ponieważ obejmowała wiele osób, które nigdy nie myślały o wzięciu zainteresowanie grami wideo.

POWIĘKSZAĆ

Całe to wprowadzenie prowadzi nas do narzędzia, które ułatwia tworzenie gier wideo, tak jak jest Cocos2d-JS, który jest niczym innym jak frameworkiem, który pozwala nam tworzyć proste gry dwuwymiarowe na dowolny typ urządzenia, które obsługuje JavaScript Tak HTML5.
Dzięki temu, że ten framework jest w całości wykonany w JavaScript, wymagania dotyczące użytkowania nie są trudne do spełnienia, zobaczmy, czego potrzebujemy do tego samouczka, aby tworzyć projekty z Cocos2d-JS:
Edytor tekstuPotrzebujemy narzędzia, które pozwoli nam napisać kod do naszych aplikacji, obecnie istnieje SDI oficer, kim on jest? Kod IDE Cocos jednak jest dostępny tylko dla Okna Tak PROCHOWIEC. Oczywiście możemy użyć edytora naszych preferencji, więc powyższe IDE jest pierwszą sugestią, w przypadku tego samouczka używany jest edytor Wzniosły tekst w wersji 2, ale nie jest to konieczne.
Serwer WWWZe względu na różne części frameworka potrzebujemy serwera WWW do tworzenia naszych aplikacji, ogólnie środowiska Apache posłuży nam tak, jak może być XAMPP, LAMPA lub WAMP, nawet jeśli mamy rozległą wiedzę w zakresie konfiguracji serwera, możemy użyć takiego serwera jak Nginx do obsługi naszych treści, ale nie jest to wymagane.
Przeglądarka z obsługą HTML5W naszym przypadku użyjemy Firefox Developer Edition ze względu na korzyści dla tworzenia stron internetowych, ale jeśli mamy preferowaną przeglądarkę, możemy nadal z niej korzystać bez problemów.
Pierwszą rzeczą, którą musimy zrobić, to pobrać niezbędne pliki, aby móc korzystać z dostępnych zasobów, w tym celu możemy uzyskać dostęp do oficjalnej strony internetowej i dokonać odpowiedniego pobrania, początkowo musimy wybrać najbardziej aktualną wersję, w szczególności w naszym przypadku to jest 3.5Jednak może pojawić się więcej poprawek. Zobaczmy, jak wygląda obszar pobierania:

POWIĘKSZAĆ

Widzimy, że mamy inne produkty firmy odpowiedzialnej za framework, takie jak SDI oraz zestaw narzędzi programistycznych, jednak jesteśmy zainteresowani tylko w tej chwili Cocos2d-JS, który widzimy jako drugi na liście produktów. Ważne jest, aby pamiętać, że zrzut jest większy niż 350 MB więc musimy przygotować miejsce na ten plik, ale nie należy się bać, ponieważ ten download zawiera dużą ilość materiału, więc prawdziwy silnik nie jest tak ciężki.
Gdy mamy już framework na naszym komputerze, musimy rozpakować plik i do folderu frameworki zamierzamy zlokalizować folder cocos2d-html5 i skopiujemy go do katalogu, w którym będziemy uruchamiać nasz projekt, który w tym przypadku będzie się nazywał pierwsza gra, początkowo powinno to wyglądać tak:

Następnie w ramach naszego projektu musimy stworzyć folder o nazwie src oraz trzy dodatkowe pliki; ten index.html który jest głównym kontenerem naszej aplikacji i jest plikiem, który zostanie wywołany w przeglądarce z serwera WWW. Plik main.js który będzie zawierał cały nasz kod JavaScript odpowiadający logice naszej gry, a wreszcie plik projekt.json który będzie zawierał parametry konfiguracyjne, aby nasza gra mogła działać poprawnie. Zobaczmy, jak powinna wyglądać nasza ostateczna struktura:

Kiedy już mamy wstępne ustawienia, nadszedł czas, aby stworzyć naszą grę, oczywiście gra jest złożona i to, co stworzymy, będzie miało bardzo podstawową funkcjonalność, po prostu wyświetlając nam komunikat na ekranie, nie jest to coś, co konkuruje z gry na rynku, ale to początek, aby zobaczyć, jak wszystko działa w ramach.
W naszym archiwum index.html musimy uwzględnić bibliotekę CCBoot z Cocos2d-JS, musimy również dołączyć nasz plik main.jsi wreszcie w naszym ciało musimy dołączyć etykietę płótno która odpowiada za odbieranie informacji o tworzonym przez nas przykładzie, zobaczmy jak wygląda kod źródłowy naszego przykładu:

 Nasza pierwsza gra 

Skoro mamy już pierwszy krok, przejdziemy do pliku main.js, ten plik zwykle nie zawiera twardej logiki gry, jego funkcjonalność przez większość czasu polega na tym, aby służyć jako plik konfiguracyjny do wskazania niektórych parametrów silnikowi i aby móc zawrzeć prawdziwą logikę w projekcie, w nim umieścimy następujący kod:

 cc.game.onStart = function () {cc.view.setDesignResolutionSize (320, 480, cc.ResolutionPolicy.SHOW_ALL); cc.director.runScene (nowa gameScene ()); }; cc.game.run ();

Tutaj po prostu zdefiniowaliśmy, co się stanie, gdy gra się rozpocznie, dwie linie wewnątrz funkcji głównej mają wskazać rozdzielczość i scenę, od której ma się rozpocząć, a na końcu w ostatniej linii wskazujemy, że ma ona rozpocząć grę. Kod wydaje się na początku nieco skomplikowany, ale stopniowo zrozumiemy, a wraz z nim złożoność będzie się zmniejszać.
Teraz skonfigurujemy nasz projekt, w tym celu zmodyfikujemy plik projekt.json, w którym zdefiniujemy silnik, liczbę klatek na sekundę gry, czyli jej kontener, oraz listę plików zawierających logikę naszej gry, tę ostatnią zobaczymy w kolejnym kroku. Na razie zobaczmy, co wstępnie umieścimy w pliku:

 {"debugMode": 0, "showFPS": false, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "cocos2d-html5 /", "modules": [" cocos2d "]"," jsList ": [" src / gamescript.js "]}

Bardzo ważne jest, aby zawartość tego pliku była JSON ważne, ponieważ w przeciwnym razie nasza aplikacja się nie uruchomi.
Gdy to zrobisz, nadszedł czas, aby włączyć logikę dla naszego pierwszego przykładu, w tym celu przechodzimy do folderu src naszego projektu, gdzie zamierzamy stworzyć plik gamescript.js, jeśli jesteśmy obserwatorami, zdamy sobie sprawę, że jest to plik, który definiujemy w projekt.json i zaczynamy widzieć, jak kawałki zaczynają do siebie pasować.
W tym nowym pliku stworzymy scenę naszej gry, w tym ją uruchomimy, oczywiście nie mamy nic graficznego do pokazania, więc po prostu wydrukujemy coś na konsoli JavaScript, zobaczmy kod, który musimy uwzględnić:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Nasza gra nie jest fajna, ale działa =)"); }});

Teraz, gdy wszystko jest na swoim miejscu, musimy wywołać nasz folder projektu z przeglądarki i otworzyć konsolę programisty lub jakiś dodatek, który pozwala nam zobaczyć konsolę JavaScript aby zobaczyć efekt całej naszej pracy:

POWIĘKSZAĆ

Jak widać, nasza pierwsza próba zakończyła się sukcesem, mamy już określoną bazę do pracy i postawiliśmy pierwsze kroki z tym frameworkiem.
Po co tworzyć gry 2D?Oddzielnie, wielu może się zastanawiać, jakie są dziś zalety tworzenia gry w 2 wymiarach, a odpowiedź jest bardzo prosta: ponieważ są zabawne i pozwalają nam wykorzystać możliwość tworzenia gier w środowiskach o niskiej wydajności , co może przybliżyć nas do dużej masy potencjalnych graczy, którzy nie mają konsoli, ale którzy przy pomocy odpowiednich słów i czynów mogą kupić naszą grę lub jeśli jest to darmowy model, aby być częścią naszej społeczności.
Na tym zakończyliśmy ten samouczek i możemy powiedzieć, że generowanie zabawnych treści jest obecnie jednym z obszarów o największym wzroście i konkurencji, który nadal będzie się rozwijał, zwłaszcza na urządzeniach mobilnych, i oczekuje się, że duża gier wideo, takich jak Nintendo zamierza się bawić w te platformy, więc jeśli interesuje nas kawałek tego tortu, narzędzia takie jak Cocos2d-JS Pomogą nam łatwiej wejść na rynek.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt