Част 3 - Построяване на света

By Ричард Дейви on 20 февруари 2018   @photonstorm

Това, което this.add.image всъщност прави, е да създаде нов обект на играта (или както се наричат в кода - Game Object) от тип изображение (Image) и да го добави в списъка за показване, принадлежащ на сцената. В този списък присъстват всички обекти на играта. Те могат да бъдат разположени навсякъде по екрана без проблем. Разбира се, ако те са извън района от (0; 0) до (800; 600), няма да ги виждате, защото ще бъдат "извън екрана", но все още ще съществуват в сцената.

Самата сцена няма точен размер и се простира безкрайно във всички посоки. Така наречената камера (в кода - Camera) управлява това, което виждате от сцената. Активната камера може да бъде местена по Ваше желание. Възможно е също да промените и мащаба ѝ, т.е. да я "приближите" до или да я "отдалечите" от сцената. Можете също да създате допълнителни камери, които показват други части от сцената. Тази обширна тема не е в обхвата на този урок, но е достатъчно да споменем, че камерите във Phaser 3 имат в пъти повече възможности от тези във Phaser 2. Неща, които в миналото бяха немислими, са вече възможни.

За сега ще изградим сцената като добавим фоново изображение и няколко платформи. Това е новата функция 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');
}

При бърз оглед на кода ще видите, че той използва this.physics. Това означава, че използваме системата за физична симулация Arcade Physics, но първо трябва да променим конфигурацията на играта си, за да кажем на Phaser, че тази система ни е необходима. Ето и новия конфигурационен обект:

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
    }
};

Новото тук е свойството physics. След като добавите и изпълните този код, който също можете да намерите в part4.html от архива на урока, ще видите сцена, много повече наподобяваща игра:

image

Вече имаме фон и няколко платформи, но как работят тези платформи?

Previous

Next