Na grę z czerwca przeznaczyłem dużo czasu, dlatego w lipcu musiałem trochę się ograniczyć. Postanowiłem, że stworzę bardzo prostą grę. Aby jednak była ona w jakiś sposób ciekawa, skonfigurowałem ją tak aby działała na urządzeniach mobilnych.
Nie jest to prawdziwa, natywna aplikacja mobilna. Po protu, gdy gracz otworzy grę na telefonie, zawartość strony dostosuję się odpowiednio do jego urządzenia 🙂 .
Aby zagrać w grę wystarczy kliknąć w obrazek powyżej. Zachęcam do zrobienia tego zarówno na komputerze jak i na telefonie lub tablecie. Na komputerze, poruszamy się strzałkami, natomiast na urządzeniach mobilnych, za pomocą specjalnych przycisków.
Co do samej gry jest to bardzo minimalistyczny projekt. Nawet grafikę ograniczyłem do prostych figur geometrycznych 🙂 Celem jest jak najdłuższe poruszanie się po platformach, które cały czas opadają w dół. Jeżeli gracz, w którymkolwiek momencie wyjdzie poza pole gry, skusi i zakończy grę.
Czas przejść do najważniejszego, czyli do kodu 🙂 . Jak w przypadku poprzednich projektów, i tu wspomogłem się frameworkiem Phaser. Większość elementów powinna być już znajoma. Architektura gry, wygląda identycznie jak w przypadku Robota. W grze istnieją trzy stany i każdy z nich znajduje się w osobnym pliku. Nie będę opisywał w jaki sposób są wywoływane, informacje na podstawowe tematy związane z Phaserem można znaleźć w opisach wcześniejszych moich gier.
Skupię się na tych elementach kodu, które są nowe. Na początek idzie stan inicjalizujący init, który znajduje się w pliku init.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var Jumper = {}; Jumper.init = { preload: function() { game.load.image('platform', 'GFX/platform.png'); game.load.image('player', 'GFX/player.png'); game.load.image('splash', 'GFX/splash.png'); game.load.image('left', 'GFX/left.png'); game.load.image('right', 'GFX/right.png'); game.load.image('up', 'GFX/up.png'); }, create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.renderer.renderSession.roundPixels = true; game.forceSingleUpdate = true; game.stage.backgroundColor = '#3498db'; game.cursor = game.input.keyboard.createCursorKeys(); game.spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); if (!game.device.desktop) { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.setMinMax(game.width/2, game.height/2, game.width*2, game.height*2); game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; document.body.style.backgroundColor = '#000'; } game.state.start('welcome'); } } |
Większość kodu powinna wyglądać znajomo. Najciekawszym elementem jest zdecydowanie klauzula if wewnątrz metody create. Sprawdza ona warunek !game.device.desktop. Są to właściwości Phasera. device.desktop zwraca true, jeżeli aplikacja uruchamiana jest na komputerze. Ja sprawdzam zaprzeczenie tej właściwości, więc zawartość ifa, wykona się tylko jeżeli gra zostanie uruchomiona na urządzeniu mobilnym. Kod który się tam znajduje, służy do zeskalowania aplikacji tak, aby wyświetlała się na całej wolnej przestrzeni wyświetlacza.
Kolejny stan, który uruchamiany jest zaraz po init, to welcome. Jest to stan powitalny, z którego gracz może przejść już bezpośrednio do gry. Kod tego stanu znajduje się w pliku welcome.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
Jumper.welcome = { create: function() { this.platforms = Jumper.createPlatforms(game); game.add.sprite(0,0, 'splash'); this.platforms.setFirstThree(); this.platforms.started = true; this.welcomeText; if (game.device.desktop) { this.welcomeText = 'press space to start'; } else { this.welcomeText = 'touch the screen to start'; } this.startLabel = game.add.text(game.world.width*0.5, game.world.height-80, this.welcomeText, { font: '25px Arial', fill: '#ffffff' }); this.startLabel.anchor.set(0.5); }, update: function() { if (game.spaceKey.isDown) { game.state.start('main'); } if (!game.device.desktop) { game.input.onDown.add(function(){ game.state.start('main'); }, this); } } } |
Na początku metody create do stanu dodaje grupę obiektów reprezentujących platformy. Nie będę teraz opisywał jak działają, chodzi o to, żeby poruszały się w tle, taki mały bajer 😉
Następnie po raz kolejny pojawia się instrukcja warunkowa sprawdzająca czy gra otwarta jest na urządzeniu mobilnym czy desktopie. Zależnie od wyniku, tekst wyświetlający się na ekranie będzie inny.
Sprawdzanie tego na jakim urządzeniu działa gra pojawia się również w metodzie update. W tym stanie gra czeka tylko na sygnał od gracza, że chce on rozpocząć rozgrywkę. Domyślnie sygnał ten wywoływany jest spacją, lecz jeżeli gra jest uruchomiona na urządzeniu mobilnym, gra zmienia stan gdy zostanie wywołane wydarzenie onDown, obiektu input. Wydarzenie to wywoływane jest gdy obszar gry zostanie dotknięty lub kliknięty. Idealnie.
Główny stan gry nie zawiera niczego nadzwyczajnego. Tworzę w nim grupę obiektów reprezentujących opadające platformy. Korzystam ze wszystkich mechanizmów phaserowych grup. W Robocie tworzyłem własne kolekcje w tablicach i mam wrażenie, że było to jedną z przyczyn spowolnienia gry na niektórych przeglądarkach. Teraz będę używał już tylko z opcji dostarczanych przez framework.
Oprócz tego w głównym stanie znajduje się też obiekt gracza, który musi skakać po platformach. W zasadzie to wszystko. Nie będę wklejał całego kodu, można go przejrzeć na własną rękę. Jeżeli coś będzie nie jasne, dajcie znać w komentarzach. Chętnie postaram się rozwiać wszelkie wątpliwości 🙂 .
To co chciałbym opisać, to sposób sterowania graczem. Tak wygląda funkcja, która tworzy ten obiekt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
Jumper.createPlayer = function(game,firstPlat){ var player = game.add.sprite(firstPlat.x+firstPlat.width*0.5, firstPlat.y-50, 'player'); game.physics.arcade.enable(player); player.body.gravity.y = 2000; player.moveLeft = false; player.moveRight = false; player.checkWorldBounds = true; player.outOfBoundsKill = true; player.update = function() { if (game.cursor.left.isDown || this.moveLeft) { player.body.velocity.x = -200; } else if (game.cursor.right.isDown || this.moveRight) { player.body.velocity.x = 200; } else { player.body.velocity.x = 0; } if (game.cursor.up.isDown && player.body.touching.down) { player.body.velocity.y = -800; } } return player; } |
Funkcję tę wywołuję w głównym stanie gry, aby stworzyć obiekt gracza. Nie zawiera ona nic nadzwyczajnego, są to wręcz podstawowe mechanizmy. Warto tylko zwrócić uwagę na dwa pola obiektu moveLeft oraz moveRight. Domyślnie są one równe false. W metodzie update widać jednak, że mogą one przyjąć inną wartość. Postać będzie poruszać się w lewo lub w prawo, gdy odpowiedni przycisk na klawiaturze zostanie wciśnięty LUB gdy moveLeft albo moveRight równe będzie true. Jak można zmienić ich wartość? Wprowadzam do gry specjalne przyciski, które właśnie do tego służą. Ich tworzeniem zajmuje się funkcja addMobileInputs, wywoływana podczas tworzenia głównego stanu gry, jeżeli gra uruchomiona jest na urządzeniu mobilnym.
Oto treść funkcji addMobileInputs:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
Jumper.addMobileInputs = function(player){ var jumpButton = game.add.sprite(380, 250, 'up'); jumpButton.inputEnabled = true; jumpButton.alpha = 0.5; jumpButton.events.onInputDown.add(function(){ if (player.body.touching.down) { player.body.velocity.y = -800; } }, this); var leftButton = game.add.sprite(30, 250, 'left'); leftButton.inputEnabled = true; leftButton.alpha = 0.5; leftButton.events.onInputOver.add(function(){ player.moveLeft = true; }, this); leftButton.events.onInputOut.add(function(){ player.moveLeft = false; }, this); leftButton.events.onInputDown.add(function(){ player.moveLeft = true; }, this); leftButton.events.onInputUp.add(function(){ player.moveLeft = false; }, this); var rightButton = game.add.sprite(120, 250, 'right'); rightButton.inputEnabled = true; rightButton.alpha = 0.5; rightButton.events.onInputOver.add(function(){ player.moveRight = true; }, this); rightButton.events.onInputOut.add(function(){ player.moveRight = false; }, this); rightButton.events.onInputDown.add(function(){ player.moveRight = true; }, this); rightButton.events.onInputUp.add(function(){ player.moveRight = false; }, this); } |
Metoda ta dodaje do gry trzy przyciski. Jeden powodujący, że gracz podskakuje i dwa odpowiedzialne za poruszanie go na boki. W argumencie funkcji przekazuję też obiekt gracza, tak aby tworzone przyciski mogły na niego wpływać.
Pierwszy przycisk odpowiada za skakanie. Tutaj sytuacja jest prosta. Używam phaserowego obiektu button, do którego można dodać nasłuchiwanie eventów. Przypisuję mu funkcję odpalaną w wyniku zdarzenia onInputDown. Tak jak wcześniej, zdarzenie to wywoływane jest gdy przycisk zostanie kliknięty myszką lub dotknięty na ekranie telefony. Odpalana funkcja sprawdza, czy gracz stoi na platformie, jeżeli tak otrzymuje ujemną wartość prędkości na osi Y. Czyli podskoczy 🙂 .
Poruszanie na boki sprawia trochę większy kłopot. Są dwa wydarzenia, które są wywołane przez dotknięcie ekranu i oba je chcę wziąć pod uwagę. Pierwsze to onInputOver. W przypadku myszki, oznacza najechanie kursorem na przycisk, jednak w przypadku ekranu dotykowego może być równe z dotknięciem. Drugi event, który muszę sprawdzić to onInputDown, tu chodzi o klasyczne kliknięcie/dotknięcie 🙂 .
Gdy któryś z tych eventów zostanie zarejestrowany na przyciskach, odpala się funkcja, która zmienia wartość moveLeft lub moveRight gracza na true. Muszę też zmienić te wartość z powrotem na false, gdy gracz przestanie dotykać przycisk. Inaczej postać poruszała by się w bok bez końca.
Naszczęście są odpowiednie eventy rejestrujące puszczenie przycisku, są to odpowiednie onInputOut i onInputUp. gdy zostanie zarejestrowany któryś z nich, odpowiednie pole w metodzie gracza przestawia się z powrotem na false, a postać przestaje się poruszać 🙂 .
I tak naprawdę to cała gra. To znaczy jest jeszcze kilka dodatków, ale to tylko dodatki. Aby przystosować tę prostą gierkę urządzeń mobilnych wystarczyło parę prostych tricków. Oczywiście ogromnie pomaga mi tu Phaser. Bez tego było by pewnie trochę trudniej.
Nic teraz nie stoi na przeszkodzie aby użyć jakiegoś oprogramowania do stworzenia z tego paczki androidowej i stworzenia natywnej wersji gry. Chociaż może lepiej poczekać z tym na jakiś bardziej ambitny projekt 🙂 .
To tyle na dziś. Jeżeli podobał Ci się ten wpis, koniecznie zajrzyj na mojego facebooka. Zawsze zamieszczam tam informacje o nowościach, więc warto polubić tę stronę jeśli chce się być na bieżąco 🙂