BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Programowanie gier w HTML5 dla Windows 8: Implementacja silnika gry - Tło

19-12-2013 14:19 | AkademiaTresci
W tym artykule poznasz technikę ruchomego tła i dowiesz się, jak je dodać do naszej gry.

Autor: Michal Markiewicz

Technika ruchomego tła (z ang. parallax scrolling) polega na nałożeniu na siebie kilku warstw obrazów, które przesuwane są z różną prędkością (Rys. 1). Efektem techniki jest odczucie głębi tła, które powoduje, że nasza gra jest bardziej atrakcyjna wizualnie. Więcej informacji na temat parallax scrolling znajdziesz pod tym linkiem.
Pod tym adresem znajdziesz ukończony projekt z tego rozdziału.

Wielowarstwowe ruchome tło
Rys. 1. Wielowarstwowe ruchome tło.

Dodanie logiki ruchomego tła

Do wykonanego wcześniej projektu dodamy trzy grafiki oraz kod odpowiedzialny za przesuwanie tła.

1. Dodanie grafiki

  • W Solution Explorer naciśnij prawym klawiszem myszy na katalog images
  • Wybierz New Folder
  • Nazwij go background
  • Naciśnij prawym klawiszem myszy na nowo dodany folder
  • Z opcji wybierz Add -> Existing Item
  • Przejdź do folderu z grafiką dla gry pobraną w wcześniejszych odcinkach z adresu http://sdrv.ms/1bA0umV.
  • Wybierz obrazki background1.png, background2.png i background3.png
  • Naciśnij Add
  • Sprawdź w panelu Solution Explorer czy pliki zostały prawidłowo dodane

2. Dodanie pliku background.js

  • Naciśnij prawym klawiszem myszy na folder js
  • Z opcji wybierz Add -> New Item
  • Wybierz JavaScript File i nazwij go background.js
  • Naciśnij OK
  • Otwórz plik default.html
  • Z Solution Explorer przeciągnij plik background.js do pozostałych referencji. Pamiętaj, aby dodać go przed referencją do default.js
  • Powinieneś uzyskać rezultat podobny do przedstawionego na Rys. 2.

Referencje w pliku default
Rys. 2. Referencje w pliku default.html

3. Dodanie konstruktora tła

  • Otwórz plik background.js
  • Do pliku wstaw kod:
var backgrounds = new Array();

function Background(src, x, y, width, height, speed) {
    this.x = x;
    this.y = y;
    this.img = new Image();
    this.img.src = src;
    this.width = width;
    this.height = height;
    this.speed = speed;
}

Informacja

backgrounds to tablica przechowująca wszystkie tła.
Funkcja Backgrounds() to konstruktor tworzący obiekty tła.

Aby tło działało poprawnie musimy dodać po dwie sztuki każdego ruchomego tła. Dzięki temu, gdy jedno tło zacznie wychodzić poza ekran, drugie będzie wchodzić na ekran. Kiedy tło wyjdzie całkowicie poza ekran zresetujemy jego pozycje (Rys. 3). Dzięki temu uzyskamy złudzenie nieskończenie długiego tła.

Ustawianie pozycji startowej tła
Rys. 3. Ustawianie pozycji startowej tła.

4. Dodanie funkcji ładującej tło

  • Na końcu pliku background.js wstaw kod:
function loadBackground(screenWidth, screenHeight) {
    backgrounds[0] = new Background("/images/background/background1.png", 0, 0, screenWidth, screenHeight, 0);
    backgrounds[1] = new Background("/images/background/background2.png", 0, 0, screenWidth, screenHeight, 2);
    backgrounds[2] = new Background("/images/background/background2.png", screenWidth, 0, screenWidth, screenHeight, 2);
    backgrounds[3] = new Background("/images/background/background3.png", 0, 0, screenWidth, screenHeight, 4);
    backgrounds[4] = new Background("/images/background/background3.png", screenWidth, 0, screenWidth, screenHeight, 4);
}

Informacja

Funkcję wywołujemy tylko raz na początku uruchomienia gry z funkcji initialize(). Do tablicy dodajemy jedno nieruchome tło i po dwie kopie ruchomego tła.

5. Dodanie funkcji aktualizacji i rysowania

  • Na końcu pliku background.js wstaw kod:
function updateBackground() {
    for (var i = 0; i < backgrounds.length; i++) {
        var bg = backgrounds[i];
        bg.x -= bg.speed;

        if (bg.x

Informacja

Podczas aktualizacji tła przesuwamy je w lewą stronę z określoną prędkością. Sprawdzamy, czy tło nie wyszło poza lewą krawędź ekranu. Jeżeli wyszło, to ustawiamy pozycje tła za prawą krawędzią ekranu, aby mogło się wsunąć ponownie na ekran. W tej funkcji uzyskujemy efekt niekończącego się tła.
Druga funkcja rysuje wszystkie warstwy tła na ekranie.

6. Podłączenie tła do gry

  • Otwórz plik default.js
  • Znajdź funkcję initialize()
  • W środku funkcji pod wywołaniem createPad(100) wstaw kod:
loadBackground(SCREEN_WIDTH, SCREEN_HEIGHT);
  • Znajdź funkcję update()
  • Na końcu funkcji wstaw kod:
updateBackground();
  • Znajdź funkcję draw()
  • W środku funkcji przed wywołaniem drawPlayer() wstaw kod:
drawBackgrounds(ctx);

Informacja

Tło musi być rysowane jako pierwsze, a następnie pozostałe elementy. W innym przypadku tło zakryje nam elementy.

System animacji tła skończony. Uruchom projekt i zobacz efekt twojej pracy. System, który napisałeś jest elastyczny, można go modyfikować dodając kolejne warstwy do tablicy background.

Podsumowanie

W tym artykule dowiedzieliśmy się, czym jest wielowarstwowe tło. Dowiedzieliśmy się jak dodać je do naszej gry i nauczyliśmy się animować wszystkie warstwy tła.
W kolejnym artykule nauczymy się jak napisać i dodać system dźwięków.

Komentarze 0

pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.