Разработка на коленке

"тут должна быть красивая цитата о программировании"

Гонки на phaser3 + matterjs

2018-08-22 22:50
phaser3-racing-car-preview

Чем мне нравится разработка игр в качестве хобби, так это возможностью менять геймплей по ходу разработки, не опасаясь, что это кому-нибудь сломает бизнес-модель.

Сперва я думал сделать так, чтобы машинка собирала разбросанные шины в центре поля, а людей и конусы сбивать было нельзя. Но потом оказалось, что гораздо веселее как раз таки сбивать конусы, а о людях вообще не заботиться. Потом сделал так, чтобы люди были кем-то вроде дорожных работников, которые поднимают сваленные конусы. Что самое интересное, обычного рандомного движения для людей оказалось достаточно, а писать ИИ не понадобилось, и без него играть порой сложно.

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

Matter

Аркадный физический движок мне не подошёл, потому что его модель работы AABB создавала проблемы даже в шутере, так как вращается там только картинка, а не тело целиком.

Код

В плане кода в этот раз вместо наследования для объектов стал использовать агрегирование, в связке с phaser это оказалось удобнее, чем расширение классов:

class Cone {
    constructor(scene, x, y) {
        this.UP = 'cone1';
        this.DOWN = 'cone2';

        this.isUp = true;

        this.scene = scene;

        this.body = this.scene.matter.add.image(x, y, this.UP);

        this.body.body.label = 'cone';

        this.body.body.cone = this;

        this.body.setScale(0.5);
    }

    up () {
        this.isUp = true;
        this.body.setTexture('cone1');
    }

    down () {
        this.isUp = false;
        this.body.setTexture('cone2');
    }
};

Агрегация даёт возможность строить свою иерархию, а объекты движка использовать для рисования и физики. Впрочем, здесь наверняка сказывается моё плохое знание третьей версии фазера, которая отличается от второй, плюс новая физика.

Ну и ещё пришлось разбираться, как работает детект столкновений, если их несколько. Для нормальной обработки нужно перебрать все пары столкнувшихся тел:

createCollisions() {
    this.matter.world.on('collisionstart', (event) => {
        event.pairs.forEach(pair => {
            const { bodyA, bodyB  } = pair;

            if (bodyA.label === 'car' && bodyB.label === 'cone') {
                bodyB.cone.down();
            }
            else if (bodyA.label === 'cone' && bodyB.label === 'car') {
                bodyA.cone.down();
            }
            else if (bodyA.label === 'man' && bodyB.label === 'cone') {
                bodyB.cone.up();
            }
            else if (bodyA.label === 'cone' && bodyB.label === 'man') {
                bodyA.cone.up();
            }
        });

        if (this.cones.filter(cone => cone.isUp).length === 0) {
            this.scene.start('GameOver');
        }
    });
}

Ссылка на игру

deathworld game

Ресурсы

В этот раз решил не рисовать графику, а взять на http://opengameart.org/

Исходники

Исходный код там - Исходники

Deathworld на phaser3

2018-08-11 23:30

Какое-то время назад я хотел писать тут о работе, о чём-то важном и полезном, что я там делаю, узнаю, создаю. Но вот незадача, часть вещей там секретные, а те, что можно рассказывать, описаны уже до меня в огромном количестве умных книг по разработке программ, и написаны гораздо лучше, чем я могу сказать. В итоге смысла в таких постах я не видел, поэтому долго ничего не писал.

Тут я просто хотел сделать маленький шутер. Простой и несложный. Просто стрелялка на Phaser третьей версии.

Чтобы получать удовольствие от разработки (возможно и от большинства практических занятий), нужно соблюдение пары условий:

  1. это должно нравиться;
  2. со временем навык должен совершенствоваться, чтобы получалось всё лучше и быстрее.

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

phaser3-deathworld-preview

Пожалуй, самое сложное для меня сейчас в разработке игр на Phaser3 - это архитектура, потому что дочерние объекты хотят явную ссылку на сцену, к которой относятся, поэтому я пока не придумал, как красиво разносить сущности по разным классам. Сильно заморачиваться по этому поводу я не стал, рассудив, что со временем наберу достаточно контекста, чтобы сделать это правильно. Главное делать каждую новую игру лучше предыдущих, этого мне пока достаточно.

Игра

deathworld game

Ресурсы

Исходный код там - Исходники

Punch-builder и новый конфиг для phaser3+webpack

2018-08-05 15:10
punch-builder

По стройке бегает вредный строитель, которого нужно пришлёпнуть кирпичём. В чём состоит его вредность, не знаю, но если он не будет вредным, то бросать в него кирпичи будет сущим хулиганством.

Цель написания этой игрушки состояла в создании конфига, которй позволит писать игры на phaser3, используя в качестве сервера что-то яваскриптовое, что будет быстро собирать и обновлять страницу. До этого я запускал сборку webpack'ом, а файлы хостил питоном - python -m SimpleHTTPServer.

В итоге наткнулся на статью A Modern Web Development Setup For Phaser 3, откуда взял всё необходимое.

В результатет получилась такая игра.

Исходники

  • 1 / 1