Część 3 - Budowa świata

By Richard Davey on 20th February 2018   @photonstorm

Pod maską this.add.image tworzy nowy obiekt z grafiką oraz dodaje go do listy obiektów wyświetlanych na aktualnej scenie. Ta lista stanowi miejsce gdzie „żyją” wszystkie Twoje obiekty. Obrazek możesz wypozycjnować zasadniczo w dowolnym miejscu. Oczywiście jeżeli umieścisz go poza zaadeklarowanym obszarem od punktu 0x0 do 800x600 to nie będzie on widoczny. Taka grafika poza ekranem będzie jednak istniała na liście obiektów.

Sama w sobie scena nie posiada ograniczonych wymiarów i rozszerza się w nieskończoność w dowolnym kierunku. Camera System (system kamery) kontroluje wyświetlany obszar, możesz za jego pomocą przemieszczać i powiększać aktualny widok. Możesz również tworzyć dodakowe kamery dla innych widoków sceny. Temat ten wykracza poza poziom poradnika, który właśnie czytasz. Wystarczy podkreślić tu, że system kamer w trzeciej wersji Phasera jest o wiele bardziej zaawansowany niż w poprzednich wersjach. Pozwala on na tworzenie rzeczy niemożliwych chociażby w wersji drugiej.

Zbuduj teraz scenę poprzez dodanie tła oraz kilku platform. Oto nowa wersja funkcji create:

var platforms;

function create ()
{
    this.add.image(400, 300, 'sky');

    platforms = this.physics.add.staticGroup();

    platforms.create(400, 568, 'ground').setScale(2).refreshBody();

    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
}

Przeglądając powyższy fragment kodu zwróć uwagę na wywołanie this.physics. Oznacza ono, że w tym przykładzie wykorzystujemy Arcade Physics system (system fizyki zręcznościowej). Zanim jednak go wykorzystamy musimy dodać odpowiednią opcję do konfiguracji. Zaaktualizuj obiekt config w następujący sposób:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

Nowościa w powyższym kodzie jest użycie właściwości physics. Po wprowadzeniu kodu z tej części poradnika (znajduje się on w całości w pliku part4.html) powinieneś zobaczyć coś co przypomina scenę z gry:

image

Mamy już podłoże i kilka platform ale jak to właściwie działa?

Previous

Next