Gra z klocków

Nie wystarcza ci już korzystanie z gotowych aplikacji? Chciałbyś stworzyć coś własnego, ale nie masz doświadczenia w programowaniu? Dzięki technologii Popfly zbudujesz prostą grę, nie wikłając się w skomplikowane tworzenie kodu.

Gra z klocków

Zanim zaczniesz

Silnikiem napędzającym wszystkie projekty tworzone w ramach serwisu Popfly jest technologia Silverlight – opracowane przez Microsoft konkurencyjne rozwiązanie w stosunku do popularnego formatu Adobe Flash, stosowanego na wielu stronach WWW. Serwis Popfly nie będzie działał poprawnie, jeżeli nie zainstalujesz programu Silverlight. Instalacja jest prosta, a o konieczności jej przeprowadzenia jesteś informowany podczas pierwszych odwiedzin w serwisie Popfly. Wystarczy, że będziesz postępował wg wyświetlanych wskazówek. Jeżeli chcesz zainstalować Silverlighta jeszcze przed odwiedzeniem serwisu Popfly, zacznij od wizyty na stronie www.microsoft.com/silverlight/overview/default.aspx

O technologii Microsoft Popfly umożliwiającej budowę prostych aplikacji z gotowych, programowych „prefabrykatów” wspominaliśmy już w poprzednim wydaniu PC Formatu, przy okazji prezentowania stu dodatków do systemu Windows. Pokazaliśmy, jak korzystać z Popfly, by zbudować prosty dodatek – gadżet do paska bocznego Windows Vista. Tym razem proponujemy zmierzenie się z nieco ambitniejszym zadaniem. Wspólnie zbudujemy prostą grę, w której gracz steruje statkiem kosmicznym i musi zniszczyć wrogie pojazdy. Gra jest bardzo prosta, wzorowana na legendarnej Space Invaders.

Rozpoznanie terenu – wybór projektu gry

Zanim przystąpisz to tworzenia gry, przejrzyj strukturę serwisu Popfly oraz wybierz typ projektu. Ułatwi to poniższy warsztat.

Krok 1

Uruchom przeglądarkę internetową (zgodnie z informacjami Microsoftu serwis Popfly jest sprawdzany pod kątem poprawnego działania w przeglądarkach Internet Explorer oraz Firefox) i w pasku adresu wpisz www.popfly.com. Ponieważ do tworzenia czegokolwiek za pomocą narzędzi udostępnianych w serwisie jest potrzebne konto użytkownika, zarejestruj konto. Popfly jest usługą Microsoftu, możesz się więc zalogować, używając identyfikatora Live ID wspólnego dla wszystkich usług Windows Live Microsoftu. Masz taki identyfikator, jeżeli korzystasz z którejkolwiek usługi online Microsoftu lub jeżeli używasz komunikatora Live Messenger. Kliknij Sign In.

Krok 2

Jeżeli masz już identyfikator Live ID, na kolejnej stronie zaloguj się, wypełniając pola tekstowe danymi uwierzytelniającymi, i kliknij Sign in. Jeżeli natomiast nie masz jeszcze identyfikatora Live ID, kliknij przycisk Sing up. Na kolejnej stronie będziesz musiał wypełnić formularz rejestracyjny. Gdy go wypełnisz, zostaniesz automatycznie zalogowany w serwisie.

Obraz

Krok 3

Po zalogowaniu znajdziesz się automatycznie na stronie głównej serwisu. Kliknij przycisk Create i z rozwiniętego w ten sposób menu wybierz pozycję Game.

Obraz

Krok 4

Zobaczysz ramkę Create a New Game z wyświetloną listą projektów makiet (ang. template). Możesz wybrać dowolny „fundament” do swojej gry. W naszym przykładzie wybraliśmy przykładowy projekt o nazwie Space Shooter.

Obraz

Przegląd i samodzielna modyfikacja elementów projektu

Wiesz już, jak wybrać projekt, który będzie stanowił fundament do tworzonej gry. Po wyborze projektu witryna Popfly jest przełączana w tryb zwany Game Creator (kreator gier). Wszystkie działania będziesz wykonywał w tym trybie. Czas zatem na zapoznanie się ze składnikami projektu, a potem modyfikowanie wyglądu i właściwości poszczególnych elementów.

Krok 1

Bezpośrednio po wyborze projektu jesteś przekierowany na stronę Game Creatora. Na górze po lewej stronie jest widoczne główne menu kategorii edytowanych elementów składające się z czterech pozycji: aktualnie zaznaczonej (dlatego większej) pozycji Actors, a następnie Scenes, Game, Play.

Obraz

Krok 2

Domyślnie uaktywnianym menu jest Actore. W tym trybie pracy masz możliwość przejrzenia wszystkich dostępnych w grze obiektów. Pozioma lista dostępnych obiektów jest wyświetlona po prawej stronie głównego menu kategorii edytowanych elementów. Pierwsze dwa elementy Search i New nie są obiektami, lecz funkcjami umożliwiającymi odpowiednio wyszukiwanie obiektów w grze lub tworzenie nowego obiektu. Dalej, po prawej stronie, widzisz już ikony statków kosmicznych, licznika punktów, eksplozji i pocisku. Kliknięcie ikony ze strzałką w prawo przewija menu obiektów, byś mógł zobaczyć dalszych „aktorów” w grze.

Obraz

Krok 3

Kliknij teraz pozycję Scenes. Tak jak w przypadku obiektów (zwanych tu aktorami) po prawej stronie zobaczysz poziomą listę wszystkich scen w danej grze. W przypadku wybranego przez nas projektu występuje 5 scen: od wstępu Intro po instrukcję How to Play.

Obraz

Krok 4

Kolejna pozycja menu głównego to Game. Po jej kliknięciu pojawią się w obszarze roboczym parametry związane z celem rozgrywki (w tym przypadku celem jest zdobycie jak największej liczby punktów, co sygnalizuje zaznaczona ikona higher score is better. W tym trybie działania Game Creatora masz też dostęp do prostego menedżera plików Files, za którego pomocą możesz kopiować pliki istotne dla gry między lokalnym serwisem a przestrzenią udostępnioną ci w serwisie Popfly.

Obraz

Krok 5

Ostatnią pozycją głównego menu Game Creatora jest Play. W tym trybie masz możliwość przetestowania gry. Podpowiadamy: każdy z predefiniowanych projektów dostępnych w serwisie Popfly jest w pełni aktywny i można go uruchomić nawet bez wprowadzania żadnych poprawek. W przypadku wybranego przez nas projektu Space shooter wystarczy kliknąć planszę gry, by rozpocząć rozgrywkę.

Obraz

Krok 1

Zmianę domyślnych parametrów warto rozpocząć choćby od przetłumaczenia plansz gry. Dzięki temu dowiesz się, jak przebiega proces modyfikacji. W głównym menu Game Creatora kliknij Scenes, a następnie z poziomej listy scen wybierz (klikając) scenę o nazwie Intro. W obszarze roboczym w środkowej części strony zobaczysz planszę tytułową gry.

Obraz

Krok 2

Jeżeli w obszarze roboczym nie widzisz całej planszy tytułowej, przewiń podgląd planszy za pomocą suwaków. Następnie zaznacz click to play. Po prawej stronie planszy na panelu edycyjnym zobaczysz modyfikowalne parametry wybranego elementu. W polu tekstowym wpisz polskojęzyczną frazę Kliknij i graj!. Możesz zmienić czcionkę – domyślna to Troglodyte, a także zmienić wielkość zaznaczonego napisu, przesuwając suwak Size, oraz zmodyfikować kolor, klikając wybraną barwę w kwadracie barwnym. W analogiczny sposób możesz przetłumaczyć napisy na wszystkich planszach gry, na których one występują.

Obraz

Krok 3

Wybierz teraz z poziomego menu kolejną planszę o nazwie Main. W obszarze roboczym zobaczysz główną planszę z rozmieszczonymi na planetarnym tle statkami kosmicznymi. Wybierając (kliknięciem) jeden ze statków, zobaczysz dookoła niego ramkę selekcyjną. Teraz możesz, np. przeciągając wybrany obiekt myszką, zmienić jego położenie na planszy.

Obraz

Krok 4

Przykładowy projekt gry Space Shooter ma tylko jedną planszę w samej grze (pomijając plansze tytułowe i końcowe oraz instrukcję). Warto zatem rozbudować grę, dodając do niej kolejną planszę. Aby to zrobić, kliknij New w poziomym pasku plansz.

Obraz

Krok 5

Pojawi się ramka Add a Scene, w której masz do wyboru albo dodanie nowej, pustej sceny (w wyniku kliknięcia ikony w grupie Add), albo sklonowanie istniejącej. To drugie rozwiązanie jest łatwiejsze. Kliknij Main.

Obraz

Krok 6

Powrócisz do głównego okna edycji. W obszarze roboczym będzie aktywny podgląd dodanej właśnie sceny. Powinna mieć nazwę Scene 6. Jej ikonę zobaczysz na poziomym pasku scen.

Obraz

Krok 1

Samo dodanie sceny nie spowoduje jeszcze zmian podczas gry. Co prawda scena jest dodana do projektu, ale gdybyś teraz rozpoczął grę, to po zakończeniu pierwszej planszy (zniszczeniu wszystkich przeciwników), zamiast przejść do drugiej planszy, zostałbyś przekierowany od razu do zwycięskiej sceny końcowej. Musisz zatem zmodyfikować działanie gry. Kliknij ikonę sceny Main, a następnie na poziomym pasku ikon, widocznym po lewej stronie obszaru roboczego z podglądem planszy, kliknij ikonę Behaviors.

Obraz

Krok 2

Zobaczysz ramkę Main Scene Behaviors, w której są widoczne dwa elementy. Pierwszy ResetScore, oznacza wyzerowanie wyniku podczas uruchamiania danej planszy. Ponieważ edytujesz właściwości pierwszej planszy gry, jest to jak najbardziej wskazane. Drugi element WinWhenBadGuysAreGone, określa, co ma się stać w grze, kiedy nastąpi określone wydarzenie – w tym przypadku zastrzelenie wszystkich przeciwników na danej planszy. Skąd wiadomo, że o taki warunek chodzi? Kliknij ikonę Event.

Obraz

Krok 3

Zobaczysz szczegóły warunku wyzwalającego dane działanie. Wiersz widoczny na ekranie: Raise this event when the Main property ... należy interpretować następująco: wywołaj dane działanie, kiedy na planszy main właściwość o nazwie liczba statków # of Smooth Spaceship będzie równa zeru. Warunek ten jest zgodny z tym, co powinno nastąpić, by gracz awansował do następnej, dodanej przez ciebie wcześniej, planszy. Nie musisz zatem niczego modyfikować, tylko kliknij widoczny w prawym górnym rogu ramki przycisk zamknięcia.

Krok 4

Powrócisz do ramki Main Scene Behaviors. Wiesz już, jaki warunek wyzwala działanie WinWhenBadGuysAre Gone. W domyślnych ustawieniach, gdy warunek ten zostanie spełniony (czyli liczba przeciwników na planszy będzie równa zeru), zostaniesz przeniesiony na planszę końcową, co widać po obecności ikony Won. Kliknij tę ikonę.

Obraz

Krok 5

W ramce Choose a scene wybierz ikonę Scene 6 jako tę, która ma być wywołana po zestrzeleniu wszystkich przeciwników w scenie pierwszej. Zamknij ramkę, klikając X, a następnie zamknij ramkę Main Scene Behaviors.

Krok 6

Powrócisz do głównego okna edycji. Czas na modyfikację właściwości kolejnej planszy. Kliknij ikonę Scene 6, a następnie Behaviors.

Krok 7

W ramce Scene 6 Scene Behaviors kliknij kółko z krzyżykiem widoczne po lewej stronie elementu ResetScore, usuwając w ten sposób ten element. Zrozumiałe, że przy przejściu do drugiej planszy zerowanie wyniku jest bezsensem. Zdobyte w pierwszej planszy punkty powinny być dodawane w kolejnej planszy. Pozostałych elementów nie musisz modyfikować. Ponieważ w naszym przykładowym projekcie są tylko dwie plansze, ustawienie przekierowania do planszy końcowej jest w tym wypadku poprawne.

Obraz

Krok 8

Teraz pozostaje przetestować wprowadzone modyfikacje.

Wybrane dla Ciebie