Idle Click — шаг 2

То, что я хотел сделать за сутки — сделал за неделю. С одной стороны, неадекватная оценка, с другой — неадекватные трудовые вложения. Надо будет подтягивать по обеим фронтам.

Идея игры в первой итерации похожа на шахту Эльспера. Только вместо шахты — хижина алхимика / ведьмы, которая варит зелья. В первом приближении дизайн выглядит примерно так:

design

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

prototype

Этот прототип сделан, посмотреть его работающую копию можно тут.

Код экрана (Phaser, JavaScript)

Это обычный State из Phaser, в котором в фазе create я вызываю билдер — отдельный объект, который создает мне все элементы на экране. Я просто передаю ему координаты для этих элементов и функции, которые должны срабатывать при нажатии кнопок.

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

Кликерство на главном объекте я решаю очень просто — добавляю глобальный слушатель на клик по экрану (последняя строчка). И если Y-координата клика попадает в диапазон хижины (клик-объекта, как я называю ее) — вызывается соответствующая функция.

Всплывающие пузыри реализует объект floatingLoot, отображение добытых зелий — uiLoot.

Рабочее демо экрана

Погонять рабочее демо с графикой можно тут. Выглядит оно так же, как и первый скрин — с него и снимал.

Пиление на мелкие классы — это в чем-то геморрой. Но зато они очень легко меняются, так как длина их составляет максимум 100 строк (с комментариями).  Я думаю, что абстрактный первый экран потом использую в других кликерах — ведь, по сути, в нем для изменения впечатлений надо поменять только графику. И координаты в State.

Для справки — как выглядит известный кликер Clicker Heroes

 clicker heroes

Очень аскетично, но апробировано. Моему дизайну не хватает «полиша», то есть шлифовки. Но самое главное — мне теперь надо наконец сесть и придумать логику апгрейдов и нарисовать схематично хотя бы другие экраны.

Idle Click — шаг 2: 6 комментариев

  1. Скрывай объекты которых нет, и соответственно перестраивай верхнюю часть экрана. Чтобы не вываливать на игрока с самого начала бесполезную для него информацию.

    Но когда будешь делать скриншоты один из них сделай с открытыми объектами, чтобы игрок видел потенциал развития.

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

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

    я еще не увидел финального дизайна, так сказать, не придумал

    твой подход — с разработкой всех экранов и идей заранее мне нравится больше
    поэтому в ближайшие дни буду как раз этим заниматься.

  3. Zaxx, я пропустил этот пост или ты его задним числом добавил? Мне очень понрвился твой подход, есть пару вопросов о твоей технике. От себя поделюсь несколькими полезными функциями:

    для определения является ли координата внутри секции:
    bounds = new Phaser.Rectangle(0, 94, game.world.width, 320);
    if (bounds.contains(active_pointer.position.x, active_pointer.position.y)) …

    для значения в диапазоне есть такая функция:
    game.rnd.integerInRange(-100, 100);

    А мой технический вопрос, где можно посмотреть твой ui класс? Мне интерестно как ты цепляешь callback на нужный фрагмент. Очень понравилось передавать из главного класса только координаты стороннему (мусоросборнику)

  4. Спасибо, функции запомню. Не всегда можно так просто делить по игреку.

    UiBuilder — это просто хранитель методов, которые создают нужные объекты.
    В случае с картинками — там в методе лежит обычный фазеровский game.add.image
    Прототип с квадратиками был построен почти весь на картинках. Потом я придумал объекты со своей логикой, и где надо, заменил в билдере методы.

    callback цепляется к созданному объекту за счет того, что все методы uiBuilder возвращают ссылку на созданный объект.

    Если я пишу класс интерфейса, который надо настраивать (коллбэк тот же) — я определяю в нем нужные сеттеры, каждый из которых возвращает this. Это позволяет записывать их цепочкой.

    Исходники можно посмотреть тут
    http://zaxx.ru/upload/mygames/001_simple_clicker/02_alchemy_prototype/js/windows/hutclick/HutClickerUiBuilder.js
    http://zaxx.ru/upload/mygames/001_simple_clicker/02_alchemy_prototype/js/widgets/UiButton.js

  5. Спасибо, я цепочку полюбил после jQuery, но совсем про нее забыл. Мне понравилось как она вписалась в код генерации интерфейса. Я вот думаю следующуу версию не делать на JS6, вот только переводить много готового кода придется. А решил отказаться из за не желания ждать по 8 сек на компиляцию. С JS5 все сразу можно смотреть в браузере

  6. я кстати думал о переходе на TypeScript 6, потому что потеря контекста (this) и пляски с наследованием в JavaScript это все-таки не выглядит удобными фичами. Но пока сижу на нативном JS, поскольку на нем можно писать с минимальным установочным пакетом, на разных машинах.

    И да, боюсь, что задержки в компилировании будут негативно влиять на концентрацию — я тут фактически в поток вхожу, когда сразу можно увидеть результат.

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">