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

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

Гонки на 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, откуда взял всё необходимое.

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

Исходники

Match3Cat - игрушка про котиков на Reactjs

2017-10-17 23:35
cat

На работе у меня стало очень много ReactJS, и мне стало интересно, как будет выглядеть разработка игры на этом фреймворке.

История

Это просто результат любопытства из категории "а что будет, если...". В итоге получилась вот такая штука.

Сперва в игре список котов был сделан одномерным массивом, который было очень удобно обновлять в Redux (где каждый раз нужно создавать новую копию данных, чтобы внести изменения). А разбиение на таблицу добился простой эмуляцией двумерного массива на одномерном списке (операция деления по модулю очень помогает). Не то чтобы это было нужно, просто было интересно писать алгоритм. И было всё довольно неплохо до того момента, пока мне не понадобилась анимация в момент совпадения котиков. Тут мне нужно было знать, где находился котик в момент совпадения по цветам, а значит нужно было хранить позицию. Чтобы не возиться с дополнительным хранилищем, котики были переделаны в словарь, а вместо одномерного списка - двумерный массив. Ну а ещё каждому котику присваивался уникальный номер, чтобы генерировать уникальный же key

const createCat = (() => {
    let nextCatNumber = 0;

    return ((x, y) => {
        return {
            num: nextCatNumber++,
            kind: Math.floor(Math.random() * CATS_NUMBER),
            x: x,
            y: y,
        };
    })
})();

В целом, получилось довольно интересно, но писать игры на ReactJS мне не понравилось, не для этого фреймворк предназначался.

Теперь настал черёд воинственных прямоугольных попрыгунчиков .

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

match3cat game

Ресурсы

Исходный код там - https://github.com/grigoriytretyakov/react-match3-game

Игра там - http://tinycode.ru/games/match3cat/

Lightbox - игрушка про квадратик (Phaser, ECMAScript6)

2017-03-26 17:20
beast

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

Основная цель - попробовать ECMAScript6 в работе, а ещё собрать в итоге игру в один файл.

История

Первоначальная идея была сделать кубик, состоящий из света, а жить он должен был в тёмном мире, где всё хочет его убить. Выживать он должен был подпитываясь энергией от пролетающих мимо "энергетических заправок". Но TN-матрица на моём ноутбуке скорректировала планы, потому что тёмная игра смотрелась ужасно, играть было неудобно. Поэтому фон стал светлым, а кубик тёмным. Тут бы впору переименовать его в "Dark energy box", но я решил оставить всё как есть.

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

lightbox game

Ресурсы

Исходный код там - https://bitbucket.org/grigoriytretyakov/lightbox-game

Звуковые эффекты делал там http://www.bfxr.net/

Музыку для игры взял там http://opengameart.org/content/game-game

Игра там - http://tinycode.ru/games/lightboxgame/