Введение в Phaser фреймворк

  • Phaser

Данная статья будет полезна разработчикам флэш приложений и игр, а также тем кто, возможно, задумывался над тем как создать свое небольшое приложение (игру).

Ричард Дейви создатель Фреймворка Phaser, вдохновленный работой со Фликселем, разработал свою версию движка - поддерживающего спрайты, анимированные частицы, аудио, физику объектов и различные способы ввода. С Phaser создание HTML5 игр превращается в веселое развлечение. На текущее время документации по Фреймворку совсем мало (анонсирована только 13 сентября 2013 года), но библиотека активно развивается, а пробелы в документации мы постараемся сейчас хоть немного заполнить.

Установка библиотеки

С чего же начать? Для работы и запуска Phaser необходим любой сервер с поддержкой PHP, вы можете попробовать его даже на локальном сервере. Мы использовали обычный выделенный сервер, но подойдет абсолютно любой - как Denwer , так и Amppss или любой аналог.

Качаем Phaser c GitHub: /photonstorm/phaser. Думаю лучше оттуда, так как идет работа над библиотекой, и постоянно вносятся какие либо изменения и улучшения, так же дополняется документация.

Разработка HTML5 игры

Создайте для своего проекта папку phaser-game в корне веб-сервера и переместите туда phaser.js из папки с исходниками Phaser. Необходимо создать там же папку assets, где вы будите хранить все медиа и другие ресурсы, нужные в игре.

создайте файл phaser-game.html (тут и будет код игры).

<script type="text/javascript">
    //создаем объект типа game
    //задавем разрешение приложения, ширину 800 и высоту 600 пикселей.
    //Phaser.AUTO означает, что тип рендера - автоматический.
    //4й параметр задает родительский DOM-объект для игры, задайте свой.
    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'post-content', { preload: preload, create: create, update: update });

    function preload() {
        
        game.load.atlas('breakout', 'assets/games/breakout/breakout.png', 'assets/games/breakout/breakout.json');
        game.load.image('starfield', 'assets/games/breakout/starfield.jpg');

    }
    //объявим объекты : мяч,кирпичи,доску
    //количество жизней, и начальные очки
    var ball;
    var paddle;
    var bricks;

    var ballOnPaddle = true;

    var lives = 3;
    var score = 0;

    var scoreText;
    var livesText;
    var introText;

    var s;

    function create() {
    //инициализацию игры
        game.world.height = 620;
    //добавляем спрайт с фоном
        s = game.add.tileSprite(0, 0, 800, 600, 'starfield');

        var brick;
        bricks = game.add.group();

        for (var y = 0; y < 4; y++)
        {
            for (var x = 0; x < 15; x++)
            {
                brick = bricks.create(120 + (x * 36), 100 + (y * 52), 'breakout', 'brick_' + (y+1) + '_1.png');
                brick.body.bounce.setTo(1, 1);
                brick.body.immovable = true;
            }
        }

        paddle = game.add.sprite(game.world.centerX, 500, 'breakout', 'paddle_big.png');
        paddle.anchor.setTo(0.5, 0.5);
        paddle.body.collideWorldBounds = true;
        paddle.body.bounce.setTo(1, 1);
        paddle.body.immovable = true;

        ball = game.add.sprite(game.world.centerX, paddle.y - 16, 'breakout', 'ball_1.png');
        ball.anchor.setTo(0.5, 0.5);
        ball.body.collideWorldBounds = true;
        ball.body.bounce.setTo(1, 1);
        ball.animations.add('spin', [ 'ball_1.png', 'ball_2.png', 'ball_3.png', 'ball_4.png', 'ball_5.png' ], 50, true, false);

        scoreText = game.add.text(32, 550, 'очки: 0', { font: "20px Arial", fill: "#ffffff", align: "left" });
        livesText = game.add.text(680, 550, 'жизней: 3', { font: "20px Arial", fill: "#ffffff", align: "left" });
        introText = game.add.text(game.world.centerX, 400, '- кликни для старта -', { font: "40px Arial", fill: "#ffffff", align: "center" });
        introText.anchor.setTo(0.5, 0.5);

        game.input.onDown.add(releaseBall, this);

    }

    function update () {
    //исполняется при обновлении приложения
    //основная логика игры
        paddle.x = game.input.x;

        if (paddle.x < 24)
        {
            paddle.x = 24;
        }
        else if (paddle.x > game.width - 24)
        {
            paddle.x = game.width - 24;
        }

        if (ballOnPaddle)
        {
            ball.x = paddle.x;
        }
        else
        {
            game.physics.collide(ball, paddle, ballHitPaddle, null, this);
            game.physics.collide(ball, bricks, ballHitBrick, null, this);
        }

        //  выход?
        if (ball.y > 600 && ballOnPaddle == false)
        {
            ballLost();
        }

    }

    function releaseBall () {

        if (ballOnPaddle)
        {
            ballOnPaddle = false;
            ball.body.velocity.y = -300;
            ball.body.velocity.x = -75;
            ball.animations.play('spin');
            introText.visible = false;
        }

    }

    function ballLost () {

        lives--;

        if (lives == 0)
        {
            gameOver();
        }
        else
        {
            livesText.content = 'жизней: ' + lives;
            ballOnPaddle = true;
            ball.body.velocity.setTo(0, 0);
            ball.x = paddle.x + 16;
            ball.y = paddle.y - 16;
            ball.animations.stop();
        }

    }

    function gameOver () {

        ball.body.velocity.setTo(0, 0);
        
        introText.content = "Гаме Овер мой друг!";
        introText.visible = true;

    }


    function ballHitBrick (_ball, _brick) {

        _brick.kill();

        score += 10;

        scoreText.content = 'очки: ' + score;

        //  не осталось ни одного кирпичика?
        if (bricks.countLiving() == 0)
        {
            //  начало следующего уровня
            score += 1000;
            scoreText.content = 'очки: ' + score;
            introText = '- следующий уровень -';

            ballOnPaddle = true;
            ball.body.velocity.setTo(0, 0);
            ball.x = paddle.x + 16;
            ball.y = paddle.y - 16;
            ball.animations.stop();

            bricks.callAll('revive', this);
        }

    }

    function ballHitPaddle (_ball, _paddle) {

        var diff = 0;

        if (_ball.x < _paddle.x)
        {
            diff = _paddle.x - _ball.x;
            _ball.body.velocity.x = (-10 * diff);
        }
        else if (_ball.x > _paddle.x)
        {
            diff = _ball.x -_paddle.x;
            _ball.body.velocity.x = (10 * diff);
        }
        else
        {
            _ball.body.velocity.x = 2 + Math.random() * 8;
        }

    }
</script>    

Заключение

Конечно, это совсем простое приложение и до конечного продукта его еще пилить и пилить, но для простого введения в Phaser вполне достаточно! Фреймворк умеет еще множество разнообразных функций, и если вам интересно, то вы можете сами их изучить.

Во время написания статьи использовал статью на Хабре - Пишем HTML5-игру за 20 минут. А так же примеры из документации Phaser. Всем спасибо, посмотреть, что за игра получилась и попробовать свои силы в ней, да и просто на минутку развлечься вы можете тут.


Комментарии