Spodobało mi się granie we własnoręcznie napisaną grę na telefonie. Dlatego postanowiłem, że sierpniowa gra, też będzie mobilna. Od jakiegoś czasu nosiłem się z zamiarem napisania czegoś w rodzaju klonu popularnego Space Impact, gry znanej każdemu kto miał telefon-cegłę Nokia 3310.
Tak właśnie powstał prototyp gry na ten miesiąc. Już na sammym początku dodałem do niej funkcjonalność pozwalającą na grę na telefonie.
Aktualną wersję gry można przetestować klikając w obrazek powyżej. Na moim githubie znajduje się repozytorium zawierające jak najaktualniejszy stan gry. Wersja przedstawiona w poście dostępna jest po zajrzeniu w źródło strony gry .
Póki co w grze nie dzieje się zbyt wiele, nawet grafiki są póki co tylko prowizoryczne 😉 Nie, docelowo nie ma się latać prostokątem 🙂 . Na komputerze statkiem poruszamy się używając strzałek w górę i w dół. Aby strzelić należy nacisnąć spację. Na telefonie, do sterowania używamy przycisków widocznych po lewej i prawej stronie obszaru gry.
Przejdę od razu do kodu. Plikiem, którego zawartość uruchamia grę jest game.js. Oto jego treść:
|
1 2 3 4 5 |
var game = new Phaser.Game(900, 612, Phaser.AUTO, ''); game.state.add('init', SpaceShooter.init); game.state.add('game', SpaceShooter.main); game.state.start('init',true,true); |
Tworzę w nim nową instancję gry Phaserowej, dodaję do niej stany, oraz uruchamiam pierwszy z nich. Stany, jak i wszystkie inne elementy gry, znajdują się w module SpaceShooter. Ponieważ game.js jest dodany do dokumentu html na końcu, treść wszystkich plików jest dla niego dostępna.
Pierwszym uruchamianym stanem jest, klasycznie, init, którego zawartość 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 30 31 |
var SpaceShooter = {}; SpaceShooter.init = { preload: function() { game.load.image('background', 'GFX/bg.png'); game.load.image('player', 'GFX/player.png'); game.load.image('bullet', 'GFX/bullet.png'); game.load.image('bigAsteroid', 'GFX/bigAsteroid.png'); game.load.image('smallAsteroid', 'GFX/smallAsteroid.png'); game.load.image('up', 'GFX/up.png'); game.load.image('down', 'GFX/down.png'); game.load.image('shoot', 'GFX/shoot.png'); }, create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.renderer.renderSession.roundPixels = true; game.forceSingleUpdate = true; 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/3, game.height/3, game.width*2, game.height*2); game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; document.body.style.backgroundColor = '#000'; } game.currTime; game.state.start('game'); } } |
Nie tworzę tu nic czego nie używałbym już, w którejś z poprzednich gier. Ponieważ jest to pierwszy plik dołączany do dokumentu, muszę w nim stworzyć pusty moduł SpaceShooter. następnie przypisuję do niego definicje stanu. Sam stan ma dwie metody, init, w której definiuję potrzebne do gry grafiki oraz create, w którym konfiguruję wszystkie opcje gry. Myślę, że ten kod powinien być w miarę jasny. Jeżeli coś nie jest, dajcie znać. Postaram się wyjaśnić co trzeba.
Gdy stan init zrobi swoją robotę, uruchamiany jest stan game, którego zawartość znajduje się w pliku main.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
SpaceShooter.main = { create: function() { this.background = SpaceShooter.createBackground(game); this.player = SpaceShooter.createPlayer(game); this.smallAsteroids = SpaceShooter.createSmallAsteroids(game); this.bigAsteroids = SpaceShooter.createBigAsteroids(game, this.smallAsteroids); if (!game.device.desktop) { SpaceShooter.addMobileInputs(game, this.player); } }, update: function() { game.currTime = this.game.time.now; game.physics.arcade.overlap(this.player.bullets, this.bigAsteroids, SpaceShooter.bigAsteroidHit, null, this); game.physics.arcade.overlap(this.player.bullets, this.smallAsteroids, SpaceShooter.smallAsteroidHit, null, this); } } |
W metodzie create, dodaję do gry cztery obiekty: tło, obiekt gracza, obiekt małych asteroidów, oraz obiekt dużych asteroidów. Jeżeli gra nie jest uruchomiona na komputerze wywołuję również metodę addMobileInputs, odpowiedzialną za dodanie do gry przycisków.
Gdy wszystko jest już gotowe, program przechodzi do metody update, czyli game loopa tego stanu. Wewnątrz, najpierw przypisuję aktualny czas do globalnej zmiennej currTime a następnie sprawdzam, czy pomiędzy pociskami gracza a którymś z asteroidów nie zaszła kolizja. Proszę zwrócić uwagę, że używam metod fizyki frameworka. Mam tu do czynienia tylko i wyłącznie z phaseorwymi grupami. Nie tworzę już własnych kolekcji tak jak w Robocie. Po pierwsze kod jest dzięki temu czystszy, po drugie, liczę, że w ten sposób uniknę problemów z wydajnością.
Zanim przejdę do opisu obiektów, muszę pokazać treść pliku helpers.js. Zawiera on te funkcje, które nie pasowały nigdzie indziej 🙂 . Wiem, średnio fajna praktyka, ale cóż… To będzie mała gra 😉
|
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 41 42 43 44 45 46 47 48 49 50 |
SpaceShooter.addMobileInputs = function(game, player){ var upButton = game.add.sprite(30, 320, 'up'); upButton.inputEnabled = true; upButton.alpha = 0.3; upButton.events.onInputOver.add(function(){ player.moveUp = true; }, this); upButton.events.onInputOut.add(function(){ player.moveUp = false; }, this); upButton.events.onInputDown.add(function(){ player.moveUp = true; }, this); upButton.events.onInputUp.add(function(){ player.moveUp = false; }, this); var downButton = game.add.sprite(30, 470, 'down'); downButton.inputEnabled = true; downButton.alpha = 0.3; downButton.events.onInputOver.add(function(){ player.moveDown = true; }, this); downButton.events.onInputOut.add(function(){ player.moveDown = false; }, this); downButton.events.onInputDown.add(function(){ player.moveDown = true; }, this); downButton.events.onInputUp.add(function(){ player.moveDown = false; }, this); var shootButton = game.add.sprite(780, 470, 'shoot'); shootButton.inputEnabled = true; shootButton.alpha = 0.3; shootButton.events.onInputOver.add(function(){ player.shoot(); }, this); shootButton.events.onInputDown.add(function(){ player.shoot(); }, this); } SpaceShooter.bigAsteroidHit = function(bullet,asteroid){ asteroid.smallOnes.addSmall(asteroid.x,asteroid.y); bullet.kill(); asteroid.kill(); } SpaceShooter.smallAsteroidHit = function(bullet,asteroid){ bullet.kill(); asteroid.kill(); } |
helpers.js zawiera w sobie 3 funkcje, wszystkie wykorzystywane są w głównym stanie gry. Pierwsza z nich to addMobileInputs. Służy ona do dodania do gry przycisków, dzięki którym gracz może sterować statkiem również na telefonie. Kod wygląda niemalże tak samo jak ten w poprzedniej grze mobilnej. Gdy któryś z przycisków odpowiedzialnych za poruszanie się zostanie naduszony, wartość odpowiedniego pola (moveUp lub moveDown) w obiekcie gracza (do którego mamy dostęp dzięki parametrowi w funkcji) zmienia się na true. Naciśnięcie przycisku odpowiedzialnego za strzelanie wywołuje metodę obiektu gracza shoot.
Dwie pozostałe metody, wywoływane są gdy w głównym stanie gry zostanie wykryta kolizja pomiędzy pociskami gracza a dużymi i małymi asteroidami. Działają one niemal identycznie. W wyniku kolizji, oba obiekty usuwane są z gry. Jeżeli zestrzelony zostanie duży asteroid, dodatkowo wywoływana jest metoda addSmall pola smallOnes asteroida.
Ok, teraz mogę przejść do obiektów gry. Pierwszy a zarazem najmniej skomplikowany z nich to tło, logika tego obiektu znajduje się wewnątrz pliku background.js:
|
1 2 3 4 5 6 7 8 9 10 11 |
SpaceShooter.createBackground = function(game){ var bg = game.add.tileSprite(0, 0, 900, 612, 'background'); bg.speed = -1.5; bg.update = function(){ this.tilePosition.x += this.speed; }; retrurn bg; } |
Wykorzystuję tu ten sam mechanizm co w poprzednich grach phaserowych. Do modułu gry przypisuję funkcję, która zwraca gotowy obiekt. Dzięki temu te same obiekty mogę wykorzystywać wiele razy w różnych stanach.
W tym wypadku do gry dodaję obiekt typu tileSprite. Jest on o tyle wyjątkowy, że układa grafikę w tle gry wiele razy. Oznacza to, że obok jednego tileSprite, znajduje się jeszcze jeden, taki sam. Mi pasuje to idealnie, ponieważ, mogę dzięki temu przesuwać je w lewo co daje wrażenie, że tło porusza się w nieskończoność. W obecnej wersji gry może nie być tego widać tak dobrze, ponieważ tło to póki co wielka czarna przestrzeń i mały pasek, reprezentujący powierzchnie obcej planety, na dole. W przyszłości grafika będzie bogatsza a „przesuwanie” tła będzie lepiej widoczne i da ciekawszy efekt.
Dokładnie takim przesuwaniem zajmuje prosta logika metody bg aktualizującej obiekt tła.
Kolejny obiekt dodany do gry to obiekt gracza. Oto treść pliku player.js, który zawiera odpowiedzialny kod.
|
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 41 42 43 44 45 46 47 48 49 |
SpaceShooter.createPlayer = function(game){ var player = game.add.sprite(150,300, 'player'); game.physics.arcade.enable(player); player.bullets = game.add.group(); player.bullets.enableBody = true; player.bullets.createMultiple(10, 'bullet'); player.moveUp = false; player.moveDown = false; player.lastShot = 0; player.update = function() { if (game.cursor.up.isDown || this.moveUp) { this.body.velocity.y = -200; } else if (game.cursor.down.isDown || this.moveDown) { this.body.velocity.y = 200; } else { this.body.velocity.y = 0; } if (game.spaceKey.isDown) { this.shoot(); } if(this.y <= 10){ this.y = 10; } if(this.y >= game.world.height - this.height - 50){ this.y = game.world.height - this.height - 50; } } player.shoot = function(){ var bullet = this.bullets.getFirstDead(); if (!bullet) { return; } if(game.currTime - this.lastShot > 250){ bullet.anchor.setTo(0.5); bullet.reset(player.x+player.width, player.y+player.height*0.5); bullet.body.velocity.x = 500; bullet.checkWorldBounds = true; bullet.outOfBoundsKill = true; this.lastShot = game.currTime; } } return player; } |
Kod tego pliku wydaje się być największy, jednak powinien on również wyglądać najbardziej znajomo. W funkcji createPlayer tworzę obiekt gracza, który na końcu zostaje zwrócony. Posiada on pole bullets, które jest phasrową grupą przechowującą pociski. Są też pola moveUp oraz moveDown, których wartości boolowskie mogą być zmienione przez dotykanie przycisków odpowiedzialnych za ruch. Jest też pole lastShot, w którym przetrzymywać będę czas ostatnigo strzału.
Metoda upate obiektu gracza również powinna wyglądać znajomo. Jeżeli wciśnięte są odpowiednie klawisze na klawiaturze, lub dotknięte odpowiednie przyciski, statek zacznie poruszać się lub wystrzeli pocisk.
Ostatnia metoda obiektu zwracanego przez createPlayer to shoot. Jak nazwa wskazuje, obsługuje ona logikę strzelania. Działanie tutaj jest bardzo proste. Program pobiera pierwszy niekatywny obiekt z grupy bullets, resetuje go, ustawia mniej więcej w miejscu z którego wystrzeliwane są pociski i nadaje mu prędkość w poziomie. Każdy pocisk jest deaktywowany gdy wyleci poza obszar gry, lub gdy zetknie się z asteroidem.
Ostatnie dwa elementy gry to asteroidy. Są one do siebie bardzo podobne. Oto kod odpowiadający za logikę małego asteroida. Znajduje się on w pliku smallAsteroids.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 30 31 32 33 34 35 36 |
SpaceShooter.createSmallAsteroids = function(game){ smallAsteroids = game.add.group(); smallAsteroids.enableBody = true; smallAsteroids.createMultiple(15, 'smallAsteroid'); smallAsteroids.speed = 50; smallAsteroids.addSmall = function(astX,astY) { var astNum = game.rnd.integerInRange(2, 4); for (var i = 0; i < astNum; i++) { var asteroid = this.getFirstDead(); if (!asteroid) { return; } var verticalspeed = game.rnd.integerInRange(-50, 50); var hotizonstalspeed = game.rnd.integerInRange(-50, -150); asteroid.anchor.setTo(0.5); asteroid.reset(astX, astY); asteroid.body.velocity.x = hotizonstalspeed; asteroid.body.velocity.y = verticalspeed; asteroid.checkWorldBounds = true; asteroid.outOfBoundsKill = true; } } smallAsteroids.update = function(){ this.forEachExists(function(item){ item.angle += 2; if(item.y >= game.world.height - item.height - 50) { item.y = game.world.height - item.height - 55; item.body.velocity.y *= -1; } },this) } return smallAsteroids; } |
Zwracanym obiektem jest tym razem grupa. Posiada ona dwie metody. Pierwsza odpowiada za dodanie nowych asteroidów do gry. Miejsce ich pojawienia się, zależy od współrzędnych przekazanych w argumencie.
Podobnie jak w przypadku pocisków, metoda pobiera te asteroidy z grupy które są nieaktywne. Różnica jest taka, że tworzonych asteroidów jest kilka. Osiągam to za pomocą pętli, której liczba obiegów jest losowa. Idea jest taka, że po zestrzeleniu dużego asteroida, ten rozdziela się na kilka małych. Każdy nowy asteroid otrzymują losową prędkość w pionie i w poziomie. Jeżeli wyleci on poza obszar gry, jest deaktywowany.
Metoda update, powoduje, że asteroid obraca się wkoło i jeżeli zbliży się do dolnej krawędzi obszaru gry, ‚odbije się’.
Kod obsługujący duże asteroidy znajduje się w pliku bigAsteroids.js. Tak wygląda jego treść:
|
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 |
SpaceShooter.createBigAsteroids = function(game, small){ bigAsteroids = game.add.group(); bigAsteroids.enableBody = true; bigAsteroids.createMultiple(10, 'bigAsteroid'); bigAsteroids.speed = 50; bigAsteroids.lastAsteroid = -200; bigAsteroids.asteroidsEvery = 2200; bigAsteroids.addAsteroid = function() { var asteroid = this.getFirstDead(); if (!asteroid) { return; } var verticalPos = game.rnd.integerInRange(50, game.world.height - 100); asteroid.turnDirection = game.rnd.integerInRange(0, 1); asteroid.anchor.setTo(0.5); asteroid.reset(game.world.width, verticalPos); asteroid.body.velocity.x = -100; asteroid.smallOnes = small; asteroid.checkWorldBounds = true; asteroid.outOfBoundsKill = true; } bigAsteroids.update = function(){ if(game.currTime - this.lastAsteroid > this.asteroidsEvery){ this.addAsteroid(); this.lastAsteroid = game.currTime; } this.forEachExists(function(item){ if(item.turnDirection){ item.angle += 1; } else { item.angle -= 1; } },this) } return bigAsteroids; } |
Tutaj sytuacja wygląda prawie identycznie jak w przypadku małych asteroidów. Ponieważ duże poruszają się tylko w poziomie, nie muszę sprawdzać czy uderzą o ziemie. Do tego otrzymują one również referencje do małych asteroidów. Dzięki temu po kolizji z pociskiem, mogę wywołać metodę addSmall małego asteroida.
I to tyle na dziś. Może opisałem kod dość ogólnikowo, ale wydaje mi się, że większość powinna być znana. Jeżeli jednak przypadkiem ominąłem jakąś ważną nowość, dajcie znać. Postaram się wyklarować wszystkie niejasności 🙂 .
Jeżeli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem :). Do przeczytania.