Как сделать кликер html
PIXI.js создание кликера
Большинство тех, кто начинает изучать программирование, начали это из-за желания сделать свою игру. Нууу… я не исключение, но судьба меня занесла в веб разработку.
Ладно, давай ближе к делу. Создать кликер при помощи pixi.js.
Задача тривиальная, но т.к. в разработке игр я мало разбираюсь, то пришлось изучить чуть лучше эту тему.
Почему Js? Почему pixi.js? Почему вообще кликер?!
— Я решил показать лишь свою реализацию задачи. Не хочу учить кого-то какими технологиями пользоваться, как писать код. Просто мое решение задачи.
Перед началом написания кода:
Во-вторых весь код я вставлю картинкой, но в конце статьи будет ссылка на github с исходниками проекта, чтобы вы могли сами потыкать.
В коде я оставил поясняющие комментарии для вас, надеюсь понятно будет.
Для начала мы объявляем алиасы и инициализируем само приложение.
Создаем нужные переменные под все элементы игры и загружаем картинки.
Для картинок я выбрал формат атласа.
Если не знаком с атласом, то это json формат для загрузки большого количества картинок за один раз.
Вот так это выглядит в коде
Я создавал это с помощью TexturePacker. Делать такое вручную, на мой взгляд, не целесообразно.
С помощью функции setup я разбираю атлас, задаю расположение элементов, стили для текста, добавляю начальное значение очков.
Это стандартные действия для всего(расположение). Самое интересное это три свойства у target. interactive, buttonMode и on(«pointerdown», handlerClick). Первые два нужны для взаимодействия клика и элемента target. on — это обычный обработчик событий.
Теперь нам нужно написать все необходимые функции для работы игры.
Игровой цикл — gameLoop
Состояние игры — play
Обработка клика — handlerClick
gameLoop просто вызывает функцию state.
В play я проверяю значение timer(он равен 10) и разрешаю клик по кнопке, так же обновляю размеры target.
handlerClick идет проверка на возможность клика и производится клик.
Из недостатка, который я вижу, это изменение размеров у target элемента. Он изменяется с 0.9 до 1. Сразу. Без анимации. Но когда ты играешь это не заметить, оставил как есть.
Как и обещал, ниже ссылка на github проект.
Если вы не сталкивались с pixi, но хотите развернуть игру у себя, то вам потребуется сервер. Я использовал openserver. Это нужно для ajax запросов.
Как и обещал ссылка на код.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Говнокодим кликербота на JS на примере Пикабу. 1: click() и querySelector()
Давно думаю попробовать написать несколько материалов, как легко в браузере писать ботов и не только. Не кармы ради, а плюсиков для. Шутка с долей шутки.
Данный материал не является пособием по программированию. И данный код ни в коем случае не считать эталонным! Использовать его надо с умом в любых интересах в познавательных целях, не во зло.
Если материал окажется интересным, то продолжу.
В материале могут встречаться разного рода ошибки и опечатки, ибо это пишется с ходу, а исправить их Пикабу не позволит. Не сердитесь сильно.
Пока писал пост, гадал: «забанит, не забанит, забанит, не забанит ли меня администрация за такой пост?»
А к гуру JS просьба править меня, но не мешать. Знаю, сейчас набежит куча умных и напишут готовые куски года с готовые кликерами, тем самым испортив дальнейший накал страстей в постах. В общем набегут профи из отряда спойлеристов. Но, уважаемые гуру, прежде чем писать, вспомните про одного такого на премьере Звездных войн 😀
Глава 0. Немного обо всём этом
Немного вводной, так скажем основы основ. Особенности описанного далее материала в том, что ботов (он же UserScript, гуглится легко что это такое) можно писать прямо в любимом браузере для любимого браузера. Преимуществ в этом много, начиная с удобства разработки и заканчивая наименьшей заметностью бота при меньших усилиях. В своё время я для одной игры написал бота. Разработчики хвалились, что они отслеживают ботов и банят. Но забанить меня в течение пары месяцев у них не получилось. Только когда я потерял интерес (как раз где-то через месяц) я оставил специально «дыру» и только тогда они начали подозревать неладное, но аргументов на забанивание всё равно не нашли. Но боты выступают не только в виде читерства, но и например для разгадки простых капч. В другой игре постоянно, по поводу и без надо было вводить капчу, простую. Тогда я написал разгадывателя капчи с 99.5% (примерно) попаданием. Но зря, через некоторое время капча была убрана разработчиками.
Также, для удобства работы рекомендую пока что ознакомиться, а в будущем обязательно поставить Greasemonkey или Tampermonkey. Есть ещё Scriptish, но он мне не понравился. А также можно использовать UserScripts «как есть» в Хроме, но это чуть менее удобно.
Тут и далее материал будет писаться на основе браузера Firefox, ибо там есть очень хороший плагин для разработчиков FireBug и я к нему привык. Но в других браузерах есть всё тоже самое, свои инструменты для разработчика, просто чуть по другому выглядит и называется. Чтобы продолжить их надо открыть, для этого надо нажать F12. Если у вас не открываются они, например в Сафари, то ищем в гугле «название_вашего_браузеран открыть инструменты разработчика».
Далее под Хромом будут подразумеваться все браузеры основанные на хромоподобном движке webkit/blink, это Опера, Яндекс и другие.
Все названия элементов меню и прочего я буду писать примерные, обобщенные, а вы уже ищите что-то похожее.
Скрины, если и будут, то могут быть из разных браузеров, там где это нагляднее показывается.
Данный материал не рассказывает о кроссбраузерности. В материале используются только современные достижения для современных браузеров.
Глава 1. Функция click() и querySelector
В данной главе мы научимся пользоваться консолью, научимся искать и изменять элементы, ну и кликать.
Начнем с авторизации на Пикабу. Все свои эксперименты с авторизацией я провожу в Инкогнито режиме на тестовом аккаунте, но это не принципиально.
И так мы открыли Инструменты разработчика и там находим Консоль. В ней мы будем тестировать наш JS код.
Авторизация происходит следующим образом: вводится «логин» и «пароль» и нажимается кнопка «войти». Первым делом нам надо ввести данные. Но надо знать куда ввести, в какой элемент на странице, то есть найти элементы под названием input. Конечно же не любые, а именно для логина и пароля. Кто пользуется Firebug или Хром необходимо будет поставить курсор на этот input, нажать правую мышь и выбрать пункт «инспектировать элемент». В консоли откроется наш элемент. Если у вас нет подобного пункта, то в консоли должна быть кнопочка придется искать его по всему документу самим.
(на картинке ниже слева Хром, правее Firebug)
После того как выбрали его, необходимо найти пункт типа «скопировать селектор» или CSS. Вроде любой браузер должен копировать самый короткий селектор. Кроме Firebug, он копирует самый длинный, полный селектор.
Для input’а логина у меня получился вот такой «#username«, то есть выбор по ID. Для пароля получилось аналогично «#password«. Ну и чтобы потом не возвращаться, скопируем кнопку «button.b-button:nth-child(2)«, тут уже нет ID, поэтому селектор получается сложнее.
Более подробно с этим можно ознакомиться по ссылке выше или в учебнике по CSS, это основы CSS.
Получается вот такие строки:
Выполняя каждую строку отдельно, в консоли мы увидим наши элементы.
Чтобы вбить данные в форму нам надо заполнить атрибут value ( http://htmlbook.ru/html/input/value ). Достучаться до него очень просто: document.querySelector(‘#username’).value;
Так просто не с каждым атрибутом, но сейчас не об этом.
Если мы попробуем выполнить данную строку в консоли, то мы получим то, что там вбито. По умолчанию у нас сейчас пустая строка. Чтобы заполнить, нам надо просто присвоить этому атрибуту значение: document.querySelector(‘#username’).value = «Гость»;
Обязательно брать строки в кавычки всегда!
Тоже самое нам надо повторить с паролем: document.querySelector(‘#password’).value = «Пароль»;
Выполняем эти строки в консоли и увидим, что форма заполнилась. Теперь нам надо её просто отправить, нажав соответствующую кнопку. В этом нам поможет функция click().
Выполняем эту строчку и у нас произойдёт отправка. Если выполнить все три строчки разом, то произойдёт сразу, в порядке переданных строк, заполнение и вход.
На этом авторизация (вход) готов, всего три строчки кода. В следующей статье на примере кликера будет цикл, чтобы заинтересовать и уже видеть результат.
«Бонусом»: тоже самое можно сделать с выставлением плюса или минуса комментарию. Выбираем наш элемент и кликаем:
document.querySelector(‘#comment_ТУТЦИФРЫТЕКУЩЕГОКОММЕНТА > div:nth-child(1) > div:nth-child(1) > ul:nth-child(2) > li:nth-child(1) > i:nth-child(1)’).click();
В планах примерно такой порядок материал:
2. Цикл (какой-то один или два, а не все).
3. Условия (if/else) и Интервалы (setTimeout/setInterval)
4. Массив, хранилища (наверное только localStorage) и прочее что понадобится. например JSON.
Планы неточные, могут меняться, в частности по пожеланиям в комментариях.
Создание Idle/Clicker с нуля
Расскажу немного о себе
Немного разбираюсь в программировании, дизайне и IT в широком смысле этого слова.
Ранее я уже делал несколько подходов к созданию собственной игры.
Парочка даже была запущена на kongregate без особого успеха.
При этом, я бы не сказал что замахивался на разработку Великой MMORPG с грабежом корованов и лунапарком.
В середине июля случилась просадка в проектах и я решил: надо делать. Делать быстро, что-нибудь супер маленькое.
Гипер-кажуал мне не под силу, но я очень хорош в гугл-таблицах. Поэтому было принято судьбоносное решение и я сформировал такие ограничения:
— Трудозатраты до 50 часов на всё
Собрав волю в кулак я приступил.
Начал как это водится с проработки математики. Собрал информацию по жанру, очень понравилась статья https://gdcuffs.com/incremental-101-2/
В итоге на пяти листах в Гугл Докс получилось то, что в целом меня устраивало.
Изначально хотел обойтись минимумом по контенту. Отсюда «плоский» дизайн, использование по-максимуму стандартных контролов (кнопки, списки и т.п.).
Раньше я не использовал адаптивный UI, поэтому пришлось довольно плотно покопаться в системе Anchors/Pivot/Positions.
Но оно того стоило! Протестировал на нескольких «живых» устройствах. Весь UI приятно тянется по ширине/высоте и не наезжает друг на друга.
Базово игроку доступно безлимитное улучшение силы клика и 11 построек.
Дополнительно добавил лёгкий мета-гейм: каждая постройка имеет пять вариантов дизайна, который доступен при определённом уровне прокачки здания.
Закостылил, по-другому назвать это не могу, простую систему ачивок. Замеряю количество тапов, количество прокачанных уровней и другие вещи.
Как оказалось вполне гибкий инструмент вышел.
За полученную ачивку пользователю даётся премиум-валюта.
При убийстве врага игрок получает бонус в деньгах и уникальный шанс заиметь себе в коллекцию артефакт.
Периодически появляется элитный враг, с уникальным спрайтом. При его убийству игроку доступен выбор либо большой суммы денег, либо премиум-валюта после просмотра рекламы (ага, вот и монетизация!).
Всё просто, заранее заготовленный список артефактов. Заимев артефакт включается бонус к приросту средств. Бонус может быть как на отдельное здание, так и на всё глобально.
Именно здесь я и нахожусь.
Я принял решение не делать In-App покупки, поэтому в магазине будут доступны различные бонусы за премиум-валюту.
Оцениваю этот функционал часов в пять работы.
На этой неделе планирую завершить работу по коду, подтянуть дизайн, где это потребуется.
Давече раскидал прототип паблишерам, посмотрим чем это кончится.
Не думаю что мой пет-проект принесёт огромный профит в виде финансов, но как минимум опыт по выпуску игры «от и до» мне пригодится точно.
Правила сообщества
-Уважайте чужой труд и используйте конструктивную критику
-Не употребляйте мат без необходимости
-Не занимайтесь саморекламой, пишите качественные и интересные посты
-Обучающие посты, туториалы
-Интервью с именитыми разработчиками
-Анонсы бесплатных мероприятий для разработчиков и истории их посещения;
-Ваши работы, если Вы художник/композитор и хотите поделиться ими на безвозмездной основе
НЕ НУЖНО ПУБЛИКОВАТЬ:
-Только гифки/арты/скриншоты из игры. Такие материалы могут сопровождать рассказ об игре или обучающий туториал, но не должны являться основой поста
-Посты, не относящиеся к тематике сообщества
Подобные посты по решению администрации могут быть перемещены из сообщества в общую ленту.
-Публиковать бессодержательный пост с рекламой Вашего проекта (см. следующий пункт), а также все прочие посты, содержащие рекламу/рекламные интеграции
-Выдавать чужой труд за свой
Подобные посты будут удалены, а авторы таких постов будут внесены в игнор-лист сообщества.
Ссылка на сторонний ресурс, связанный с игрой, допускается только при следующих условиях:
-Пост должен быть содержательным и интересным для пользователей
-Ссылка должна размещаться непосредственно в начале или конце поста и только один раз.
-Cсылка размещается в формате: «Страница игры в Steam: URL»
Нормального канала и по делу
ГК сейчас в переизбытке, паблишерам интересны только ретеншены и лтв всякие, а что за игра им пох. В целом вы правы, что финансово не на что рассчитывать. Но опыт это всегда интересно.
Нет. Одна и та же игра с минимальными различиями может дико отличаться по стате.
Попытка совместить 2D и 3D. И нет, получилось не совсем традиционное 2.5D
Начал работать в этом направлении. Решено было остановиться на изометрии. Для физики использовал объемные примитивные коллайдеры, rigidBody, физические материалы. Для графики, соответственно, спрайты. Причём можно было бы использовать плоскость (quad) и на нее натягивать картинку, но это был бы полноценный 3D объект. Я же применял именно sprite 2D, потому что спрайты быстрее обрабатываются.
Что понравилось и что не понравилось. Хочу заметить, что это сугубо личные мнения и предположения.
Самый существенный недостаток, на мой взгляд, это переменная глубина спрайтов. То есть, спрайт, который ближе к камере загораживает дальний. Что логично и в 2D мире полностью оправдано. Но в данном случае не всегда приводит к желаемым результатам. Потому что эта самая глубина в 3D мире переменчивая. Пусть, например, персонаж идет вдоль стены. В определенный момент времени получается так, что спрайт стены ближе к камере, чем спрайт персонажа. И тогда стена загораживает персонажа. Это, наверное, одна из самых сложных и капризных вещей во всей этой концепции. Как бороться? Универсальных методов я не обнаружил. Но парочку более-менее действенных есть. Первое: сделать спрайт стены полноценным 3D объектом. То есть не sprite, а quad. Такие объекты уже не участвуют в тесте глубины. Но это немного увеличивает производительность. В случае со стенами ничего страшного, так как на сцене их мало. Следующее – увеличить размеры коллайдеров. Опять же, увеличивать можно в пределах разумного. Видео ниже.
Так как это 2D, то освещение становится бессмысленным. Хотя вроде бы есть ассеты, которые делают освещение спрайтов. Тени приходится имитировать, или вовсе отказываться. Так, например, у бетонного забора отсутствуют тени. Из-за сложной формы они будут ложиться неправильно и мне не удалось подобрать удачный вариант.
Ограничения камеры. Возможна только изометрия, никакой перспективы. Так получается из-за искаженных спрайтов. Они кажутся нормальными лишь под определенным углом камеры. Если этот угол чуть изменить, то сразу же спрайты будут выглядеть неестественно. По этой же причине нельзя вращать камерой, она должна смотреть только в одном направлении. Видео ниже иллюстрирует.
Одной из особенностей стало то, что изображения должны быть уже искаженными, что бы правильно выглядеть в перспективе. Это дополнительные действия. Например, на видео ниже показан ящик как он выглядит в игре, затем как это сделано в редакторе unity, и в конце как он нарисован в графическом редакторе.
Ещё пример. Куст помидоров и земляная куча. Так как куст расположен вертикально, то он не подвергается перспективным искажениям. Выглядит так же, как и нарисован. Земляная куча почти «лежит» на земле. То есть очень горизонтальна (если можно так выразиться). Поэтому, что бы в игре выглядеть нормально, она нарисована с существенными перспективными искажениями.
И ещё один пример. Книга.
Скорость и простота разработки выше по сравнению с полноценной 3D игрой. И хотя я не занимался 3D, мне кажется это так. Нарисовать спрайт легче, чем развертку. Не надо работать с полигональными моделями. Производительность выше, чем 3D. Отрисовка 2D спрайтов происходит быстрее, чем 3D моделей. Особенно актуально для мобилок и браузерок.
Если вначале создания игры сомневался в таком подходе, то сейчас нет. Решающим моментом было вот что. Человекоподобный персонаж состоит из множества спрайтов. Рассмотрим плечо. Это кожа, татуировки, футболка, куртка, броня. То есть 5 слоёв. И так на каждой из частей тела по нескольку слоёв. Из-за теста глубины они постоянно располагались не так как хотелось бы. Поэтому пришлось использовать quad. Но это уже серьезно влияло на производительность. Да и вообще нарушалась сама концепция – все сделать спрайтами. Например, на сцене 50 зомби, у каждого по 60 слоев, хотя и активны около 20. Проседания фпс были существенные. Пока вдруг не додумался развернуть всех персонажей перпендикулярно к камере. Тогда у всех слоев тест глубины был такой какой я и планировал. Значит можно отказаться от quad’ов в пользу спрайтов. И действительно, фпс повысился, а спрайты отображались как задумано. Казалось бы, очень простое решение, но я до него долго не мог дойти.
Итог. Получился довольно-таки разнообразный 3D мир, выполненный 2D средствами. Еще раз повторюсь, всё вышеперечисленное можно легко сделать стандартными 3D средствами. Однако, я хотел именно 2D. Такой метод проектирования подойдет далеко не для всех игр. Лично мне понравилось, хотя есть ограничения и косяки. Опять же, если вдруг возникнет нужда, то ничто не помешает вносить в игру полноценные 3D объекты. Можно источник света поместить на сцену, просто он не будет освещать спрайты.
Теперь, собственно, сама игра. Аркада в стиле crimsonland с элементами рпг. Трое друзей приехали на дачу отдохнуть. Внезапно приключается зомби-апокалипсис. Вам надо бегать-прыгать, собирать патроны-оружие-броню и уничтожать зомби. Зомби, в свою очередь, тоже могут быть хорошо вооружены и опасны.
Игру делал один в течение 3 лет по вечерам и выходным, с небольшими перерывами. Среда разработки: unity. Дополнительные ассеты не использовал, графику рисовал сам. Музыку и звуки брал из свободных источников. Язык: русский, английский.
Немного о нашей безымянной студии и о том, что мы делаем
Привет всем! Пока мы, на самом деле, безымянная студия и проект, который делаем имеет техническое название «CGDrone». Сегодня мне захотелось написать эту короткую статью. Понимаете, замучился от всей этой работы со скетчами, цветами, алгоритмами и исправлением багов во вращениях, которые реализованы с помощью кватернионов. Последние, к слову, меня порядочно побили.
Часто натыкался в сети на разные истории о том как люди создавали свои игры, какие трудности перед ними стояли и что они в результате получили. У нашей команды тоже есть своя история, о ней я и хотел бы немного рассказать.
Работу мы разделили примерно пополам ну или делали кто что может. С одной стороны, если в команде 2 человека, то делить работу можно пополам! Удобно же 🙂 И на контроль за результатами работы всех разработчиков не так много времени уходит как, скажем, ушло бы если бы в нашей команде было 30 человек.
В самом начале мы придумали идею, игровые законы, механики, протестировали все в голове, на бумаге, и в Unity, запланировали сетевой режим.
Не поверите, но у меня набралось 2 толстенные папки со скетчами по проекту и иногда мне все еще приходится набрасывать картинки/перебирать идеи/сопоставлять объекты:
Скетчи, которые я набрасывал выглядят примерно так:
На данный момент мы опубликовали большую часть скетчей в твиттере / инстаграме.
Кстати, игра на тот момент выглядела так:
Еще несколько скетчей:
Коротко о не коротком, о сети
Изначально мы планировали сетевой режим. Вот то, что не стоило делать, так это сеть. Я пытался вытягивать сеть до последнего. Просто как кот вцепляется в рыбу, так и я вцепился намертво в сеть. В итоге мы реализовали комнаты, уровни, сетевое взаимодействие основных объектов. Но все это двигалось очень долго, тесты и отладка занимали тьму времени.
Интерфейс игры тогда выглядел так:
Мы много чего сделали по сетевой части, в том числе и организовали сетевой чат (иконка конверта) и систему общения голосом (иконка микрофона).
Позже я смекнул и понял одну важную вещь: сеть это круто, но если у вас в команде 2 человека и нет опыта в сетевой части (хотя лабы по сетям в институте мы сдавали только так), то лучше повременить с сетью, сделать основное:
Лучше синица в руках, чем журавль в небе
Попытки расширить команду
Позже мною предпринимались попытки привлечь в проект крутых художников. Но не пошло.
Очевидные вещи, которые я выяснил:
— профессиональные художники хотят получать денежки, а у нас есть только энтузиазм
— непрофессиональные художники (из моего личного опыта), в основном, любят покреативить и вместо того чтобы сделать все максимально по ТЗ, их заносит и они по-полной берут на себя роль главного ГД и начинают работать уже в этом направлении
Для себя мы поняли еще одну вещь: у нас нет времени на выдачу ТЗ ребятам, которые работают на энтузиазме потому, что высока вероятность их ухода. Так что мы решили делать все сами и никого не искать, не расширять команду. У этого решения есть плюс, который я описал бы так:
На данный момент мы все так же усердно работаем над проектом. Сделали кучу основной работы, работаем над оптимизацией, полировкой графона, анимациями и историей.
Так же в последнее время к нам присоединился переводчик, который взялся прорабатывать сценарий 🙂 Уже вот год работает с нами, как и мы на энтузиазме.
А вот и ссылки на нас:
От наброска в паинте до демоверсии
Вводный материал.(Вода)
Желания создавать игры пришло ко мне довольно в раннем возрасте. Вдохновившись одной браузерной игрой я начал активно искать информацию связанной с разработкой игр и приложений. На тот момент времени, о процессе разработки игр я знал на неком абстрактном уровне – есть программы именуемые движками в которых происходит соединительный процесс моделей, звуков, анимации и кода и есть программы, так сказать второго эшелона, программы в которых непосредственно создаётся ранее описанный контент.
Небольшое, отступление: на дворе 15 год, сельская глушь, за столом устаревший, даже на то время компьютер, на окне подвисший модем с одна-гиговым объёмам помесячного трафика. Именно в таких условиях начался мой путь.
Само собой, не о каких специализированных программах я не знал, но, на моё удивление, их поиск не занял много времени. К моему приходу, сеть уже была полна материалов на тему геймдева и игровой индустрии в целом.
Названия первого движка я вряд ли могу вспомнить, но вот его вес 37мб, хорошо отпечатался в моей памяти. Собственно, общий вес данной программы и стал ключевым фактором выбора, также словосочетание “решение с открытым кодом” внесло свой вклад, моё наивное желание творить навеяло мысль что в случае необходимости я смогу настроить под себя данную программу или даже больше, смогу на её фундаменте выстроить собственный движок. Как же я ошибался…
Параллельно с изучением трёхмерной графики я уже пришёл к движку который использую по сей день – Unity. Какой же восторг я испытал, добавив только – что смоделированный кубический ящик в игровую среду. Добавление физических свойств моему ранее замоделенному объекту и вовсе вызвало некий экстаз. Время вновь шло непозволительно быстро, обломавшись с концепцией сетевого шутера, да-да, как и многие начинающие я не хотел создавать что то простое, мне хотелось делать глобальные проекты которые могли позволить лишь студии гиганты. Изрядно обломавшись, осознав что в реалиях одного человека невозможно создать задуманное я поумерил свой пыл и постепенно пришёл к жанру пост-апокалипсиса. Пару небольших подделок, пару графических экспериментов, огромные амбиции плавно перетекли в пару закрытых дэмок которые не принесли должного результата. Настал момент уныния, раннее задуманная концепция не сработала, техническая часть не доведена до должного уровня а визуальная составляющая на которую делался главный акцент оказалась провальной…
Думаю мне повезло, на фоне маячил релиз одной важной для меня игры, судьбоносно что жанры совпадают. Так, не найдя чем заняться ближайший месяц до релиза ожидаемой игры я вспомнил одну старую концепцию. Что если выстроить визуал игры из палитры ограниченной тремя цветами – чёрный, серый и оранжевый. Так открыв стандартный графический редактор я соединил парочку приглянувшихся изображений. Итог:
Внимание, дабы последующий материал не выглядел набором скриншотов дальнейший текст будет построен примерно так: дата отсчёта (примерная) через какой временной промежуток от начала разработки сделан скриншот, небольшое описание проделанной работы или максимально ёмкий комментарий.
Также, отмечу, я расскажу только своё виденье разработки отдельно от команды.
P.S : Многие скриншотов изначально небыли предназначены для показа широкой публике, поэтому, мне пришлось размыть некоторые элементы изображений.
Начало работы.Построение общей визуальной концепции с помощью спрайтов и простой геометрии.Первые строчки кода. Настройка рендера.
+ изначально, задний фон обладал реалистичным расстоянием — объекты располагались в промежутке от 1 метра до 1км игровых координат. Это привело к тому что при перемещении задний фон менялся очень медленно а иногда и вообще выглядел статично. В дальнейшем и по сей день, максимальной дистанцией отдаления считается значение
300 игровых метров а пропорции подбирались в ручную или с помощью соответствующего инструментария.
Пожалуй, один из самых продуктивных временных промежутков.
Контент постоянно пополнялся, непозволительно быстро генерировались и реализовывались идеи, улучшалось освещение и общий рендер. Спустя месяц вышел первый играбельный билд. А с ним и первый фидбэк, в том числе и отрицательный.
Момент уныния – в очередной раз пришло осознание что некоторые ранее задуманные способы реализаций неактуальны или попросту не работают.Нарастало ощущение личной некомпетентности. Подходил к концу учебный, выпускной год, требовалась подготовка хотя-бы к базовым экзаменам. Разработка продолжалась, но далеко не стой скоростью что ранее.
Сгруппировал весь прогресс которого достигла игра в рамках этого периода.
[1.5 год с начало разработки]
Второе дыхание. Экзамены позади, отсутствие желания получать высшего или средне-специальное образование и наличие большого количества свободного времени побудило вернуться к разработке. В следующие полгода я был занят переработкой многих механик, исправлением ранее допущенный ошибок, улучшением технической части и созданием нужного инструментария для дальнейшей работы. В дополнение, в качестве проверки своих сил и некого эксперимента пришла идея подтянуть графику и общую детализацию. На моё удивление, с последним я справился (субъективно конечно, но прогресс сложно не заметить). Показ широкой публике. Создание сообщества. Начало работы над демо версией игры. Первые строчки в сценарии. Всё это уместилось в данный промежуток.
Мы закончили работу над прологом и выпустили первую публичную демо версию. Сценарий игры преодолел отметку в 10 тысяч слов а общий вес проекта перевесил отметку в 5гб. Мы полны идей и продолжаем работу.
Несмотря на общую продолжительность разработки, полученные эмоции и приобретенные навыки в процессе работы компенсируют потраченное время и силы, по крайней мере, хочется так верить.
Что касается меня, то моё психическое и физическое здоровье вызывает все больше вопросов у родных,средний «рабочий» день всё ближе приближается к отметки в 12 часов, а количество социальных взаимодействий деградировало до общения в сети и редкими встречами с лучшими друзьями. Но! я действительно верю что релиз игры всего лишь вопрос времени, расширение и переквалификация малой группы энтузиастов в студию лишь следствие успеха релиза и игры в целом, а достижение желаемого лишь вопрос выполнения этих двух пунктов.
Спасибо за прочтений столь большого объема материала. Заинтересовавшихся игрой, буду рад видеть в наших сообществах:
Как таксист вошёл в IT))
Доброго времени суток читатели пикапу!
Решил поделиться своей историей. Последние 3 года работал в Москве в такси, от эконом до премиум тарифов.
Год назад захотел создать своё приложение для изучения ЧБК(Численно-буквенный код), так как нормального приложения или сайта для обучения не смог найти. Сначала смотрел в сторону Android Studio, так как там можно писать на Java, а я его раньше учил.
Следующий месяц в свободное от работы время я изучал движок и C# в контексте движка. За это время я создал раннер по видео урокам и сделал часть задуманного мной приложения.
Но в самый разгар моего изучения Unity, я случайно наткнулся в ютубе на видео, в котором показывали процесс создания кинематографичного ролика в Unreal engine 4 и меня это зацепило. Я загорелся идеей создания таких видео в самом движке и решил незамедлительно приступить к изучению этого чудо движка.
Конечно перейти с Unity на UE4 для меня было не легко, в основном из за интерфейса самого UE4, слишком уж он по-моему мнению перегружен(хотя на данный момент так не считаю).
В первых видео уроках открыл для себя чудо-чудное, это система визуального программирования «Blueprints». Сначала ничего не понимал в этих блупринтах, но постепенно разбираясь, я понял насколько они удобны по сравнению с кодом. Мне настолько они понравились, что я захотел сделать какую какую-нибудь простую игру. Выбор пал на клон игры «Flappy bird», но с самолётом вместо птицы и который должен пролетать через кольца. За день сделал основную механику и ещё неделю изучал illustrator и рисовал визуал(самолёты, интерфейс и задний фон). Получилось вот так:
Немного поиграл в то что получилось, я подумал что задумка не плохая и стоит доделать игру до презентабельного вида и выложить в google play. Не с целью заработать, а просто для получения опыта разработки игры с нуля до релиза. Но в тот момент у меня по личным причинам свободного времени стало очень мало и я забил на разработку и на UE4. Лишь спустя 3 месяца я решил возобновить то что начал и доделать эту игру. Попутно с разработкой этой игры, я делал то приложение с которого всё и начиналось, но уже в ue4 и на блупринтах. Вот что получилось:
Благодаря этому приложению, я за 2 дня выучил 300 чисел числа Pi после запятой и могу не только последовательно их пересказать, но и найти определённое число находящееся на определённой позиции после запятой. Если кому будет интересно почитать про это приложение, то пишите, я более подробно объясню зачем оно нужно и какая польза от этого ЧБК.
Изначально планировал делать только в 2d, но самолёты в 2d без анимации пропеллера смотрелись как-то не естественно и я решил делать самолёты в 3д, а также кольца.
Опыт в 3d моделировании у меня тоже был, так что мне это было только на руку. Вот мои прошлые работы в 3d:
В общем, я делал игру около трёх месяцев и постоянно что-то переделывал. То задний фон не устраивал, то моделька самолёта не так выглядит, то добавлял новый функционал, как внутриигровой магазин(на который я потратил 2 недели). В общем, было много проблем на решение которых тратил много времени и это долго описывать(может в отдельной публикации)
И вот к чему я пришёл на данный момент:
Сегодня я выпустил эту игру в Google play и хочу чтобы вы заценили.
Ну и оценку хорошую поставили для продвижения))
Спасибо что прочитали столько букаФ)
Всех благодарю за критику и поддержку)
Благодоря вашим отзывам, я понял, что игра очень сложная и сделал легче(но это не точно)
Увеличил скорость падения самолёта;
Увеличил дистанцию между кольцами;
Кстати, вот промокод на 10000 монет: BHCTDLV
Локализация игры (приложения) на Unity
После выпуска Color Chips я начал работу над другим проектом (параллельно работая над обновлениями для первой игры). И там решил исправить недочёт Color Chips и добавить в игру русский и английский языки. Так передо мной встала задача локализации проекта. И в этом посте расскажу о том способе, который использую сейчас и который вполне устраивает.
Решение я нашёл на просторах Интернета, уже даже не вспомню где (для поста пришлось залезать в основной скрипт, чтобы узнать имя автора и выйти на его Github). Оно представляет из себя всего два C# скрипта, которые разработал Daniel Erdmann:
Внутри же второй папки будут находится файлы переводов в формате txt (то бишь, обычные текстовые файлы). В моём случае это файлы en.txt и ru.txt
Внутри этих файлов и создаются словари для перевода. Вы задаете каждому переводу метку, которую потом нужно будет использовать в Unity. Например текстовое поле с меткой shop будет переведено на русский, как «магазин». Метки одинаковы для обоих файлов, ну а содержимое перевода вставляется через приравнивание. Аналогичным образом можно создать переводы на любой язык:
word=WORD_TO_TRANSLATE (en.txt)
word=СЛОВО_ДЛЯ_ПЕРЕВОДА (ru.txt)
На этом предварительная подготовка переводов завершена и можно переходить в Unity. На текстовое поле мы вешаем скрипт под названием I18nTextTranslator.cs и указываем метку для перевода.
Насколько я понял, основной скрипт под названием I18n.cs запрашивает язык системы и подтягивает соответствующий текстовый файл с переводом. Если, например, ваш язык немецкий, но файла de.txt нет, то скрипт подтянет английский язык по-умолчанию. При запуске проекта язык автоматически меняется на системный и в соответствии с тем переводом, который указали ранее.
На данный момент я работаю над обновлением Color Chips и решил добавить в игру русский язык, потому данный способ мне вполне подходит. Но он не лишён недостатков:
— нельзя сделать переключатель языка, тут всё зависит от настроек системы
— подобный метод наверняка будет сложно использовать для больших проектов, особенно с большим количеством текста
— как утверждает автор скриптов, наблюдаются проблемы с TextMeshPro-элементами, в частности не всегда верно отображается шрифт текста (я использую стандартные текстовые элементы, потому насчёт этого недостатка ничего сказать не могу)
Для небольшого проекта, такого как мой данный способ вполне подойдёт. Расскажите, как вы занимаетесь локализацией приложения (игры) в комментариях, интересно прочитать и, возможно, перенять опыт. Ну и по традиции внизу ссылки на всё нужное.
Дикие животные
Всем привет, добавили некоторых диких животных в нашу игру Villagedom
Зайчики и дикие кабаны
Охотясь на них жители деревни могут добывать мясо и шкуру
А вот убив медведя жители получат более значительную награду, но кому это удавалось?
С медведем что-то не заладилось и он решил утащить жителя 🙂
Такой вот коротенький пост получился)
Сделал переход камеры через пазл в локацию
Настройка Google Play In-App Review для Unity
Мой пост будет для тех, у кого возникли трудности с вышедшим не так давно Google Play In-App Review в Unity3D.
Сам процесс интеграции SDK в проект не вызывает вопросов, однако на этапе тестирования приложения уже на смартфоне, диалог с приглашением оценить игру не появлялся.
Решение, которое помогло мне, было в использовании заказного файла Proguard.
1. Заходим в настройки Player своего проекта в Unity, на вкладку Publishing Settings и ставим галку Custom Proguard File. Сразу под галкой появится путь, по которому можно найти наш файл proguard-user.txt
2. Далее в файловом менеджере заходим в наш проект и находим там папку PackageCache. Выглядеть будет примерно так:
3. Теперь в каждой папке ищем подпапку Proguard, в которой будет один TXT файл, содержимое которого надо скопировать в наш новый файл proguard-user.txt. Повторить такое копирование для всех найденных файлов в папках Proguard, у меня было таких 4 штуки.
4. После того как закончили, добавить в конец файла proguard-user.txt, строку:
-keep class com.google.android.play.core.**
Всё! Собираем aab или apk, загружаем в гуглплей и тестируем. Важно, чтобы тестирующий еще не оценил игру, иначе окно не появится.
Спасибо за внимание!
Как я решил сделать игру, вдохновившись HoMM, и потерял деньги (часть 1)
Данная история будет состоять из 3х частей, т.к. я выпустил три игры:
В статьях будут цифры по каждой игре, сколько я вложил (потратил) и сколько заработал.
Сразу скажу, я – фанат серии Heroes of Might and Magic и King’s Bounty. Играл почти во все части и аддоны, за исключением HoMM7, т.к. время идет, жизнь меняется и на игры времени не осталось.
С данной серией я познакомился в начале 2000-х с игры HoMM3 еще в школе. Потом начались студенческие годы, прогулы пар, чтобы поиграть с друзьями в героев за одним компом, где ход другого игрока длился вечность, и мы никогда не доигрывали партию)
С 2005 года я начал разрабатывать флеш игры, годы шли. И вот наступил 2013 год, я решил переиграть в HoMM 2. Меня так увлекло, хоть я раньше и проходил игру, в этот раз возникла мысль, а почему бы не сделать свою игру с пошаговыми битвами?!
В данной статье пойдет речь о первой игре Beasts Battle. Я расскажу по порядку, как она появилась на разных платформах: Web, GooglePlay, AppStore, Steam.
Разработка flash версии
Над игрой работал исключительно в свободное от работы время в течение года. При этом игру бросал 2 раза на длительный срок. Примерно по интенсивности работы было так:
1 неделя — разработка механики боя и потом бросил на несколько месяцев
1 неделя — разработка покупки войск, окошек победы и т.п. и потом опять бросил на несколько месяцев
2,5 месяца интенсивной работы без перерыва и игра готова)
Идея была простой, сделать просто битвы как в героях и на этом всё. Без карты и захватов замков и т.п. Просто арены с заклинаниями и разными юнитами. Хотелось сделать всё по минимуму и потом уже, если игра пойдет, то развивать идею и улучшать игру в последующих частях. А-то игру можно делать до бесконечности и так никогда и не закончить, как многие начинающие любят делать. =)
Когда сделал механику битв, то решил показать художнику и своему другу NeexGames, с которым много работал над другими играми, у него есть свои хиты (Heaven vs Hell).
Когда ему показал свои наработки, он поделился своими спрайтами юнитов из игры, чтобы я мог прикрутить анимацию в битвы и игра становилась более гладкой и интересной (вместо статичных гексов). К моему счастью, он согласился на сотрудничество, при условии, что я полностью напишу движок игры со всеми экранами и окнами, чтобы оставалось только нарисовать арт и вставить в игру.
Благодаря ему игра очень преобразилась, стала яркой и сочной. Он много привнес в концепцию, было решено отказаться от стереотипных рас и придумать что-то оригинальное, поэтому тематика была «животные». Но в конце всё равно появились демоны.
Очень рад, что «магазин» в игре он полностью перерисовал, не так как я это планировал. Мне пришлось заново переписывать механику всего магазина, но это только к лучшему.
Отправил игру на растерзание в комьюнити флеш игр (тогда оно было активным и флеш был жив!). Было уйма замечаний и советов. И я около месяца улучшал игру. И вот что было добавлено в игру, чего вообще никак не планировал, т.к. не хотел, чтобы разработка еще больше затянулась:
— локализация на русский
— сюжет в игре (тут мне просто стало скучно, пока ждал арта, решил себя занять и подглядел в игру Kingdom Rush)
— 2 кампании вместо одной (художнику тоже было делать нечего, и он решил нарисовать по герою за расу и экран выбора)
— туториал (ну тут конечно без него никуда, спасибо что напомнили).
Фидбеки очень помогли, и игра стала в разы лучше по порогу входа.
На баланс я потратил около 4-5 месяцев. И всё равно игра получилась не сбалансированная, если читать комменты. Изначально игра была сложная (ведь это Герои — хардкор), но потом делал все легче и легче, т.к. ныли. Но все равно, какие-то существа получились дешевые и сильные, а какие-то дорогие и ненужные. Сложно балансировать. Игру сотню раз проходил.
Продажа flash версии
Раньше было принято флеш игры продавать через площадку FGL, там игру оценивали модераторы и потом смотрели спонсоры, происходили торги между ними за игру, если игра конечно понравилась. Бывало, что и вообще на игру никто не обращал внимания.
На сайте спонсора игра получила рейтинг в 50 баллов при запуске, я очень расстроился, если честно) Но постепенно дошла до 64 (уже нормально), 694к просмотров на сайте спонсора за месяц и 600 фаворитов (может немного, но мне очень приятно). В общем я доволен как пошла игра и спонсор тоже) Она оправдала свои надежды. Ведь игра вышла довольно простой, несмотря на все наши старания и труды. И признаюсь, что проект был мне не по зубам, еле как с ним справился.
После этого я продал еще свою игру определенной лицензии нескольким спонсорам за небольшую сумму.
Итог Flash версии игры
Разработка мобильной версии
Полностью изменил баланс покупки войск. Во флеш версии войска были конечные в магазине. А в мобильную версию я добавил новый параметр «лидерство» и теперь в магазине юниты бесконечные, но можно нанять ограниченное количество. Также я добавил третью кампанию за Босса, мне показалась это интересной идеей и чисто для фана, но эта кампания открывается после прохождения любой другой основной. Еще добавил режим ХотСит, когда можно выбрать любую расу и сразиться с другом на одном устройстве.
Также добавил в каждую кампанию хардкорную миссию, она даже отмечена как череп). И весь арт обновил до 720p, а было 640p.
Т.к. это мобильная игра, то после релиза последовали обновления. Были добавлены:
● по новому юниту на каждую расу
● артефакты для героев
Релиз мобильной версии
НО! Я был наивен, т.к. без маркетинга о игре никто не узнал и всем было пофиг. Иногда ее находят до сих пор и оставляют положительные отзывы. Пишут, чтобы игру развивал, добавлял контента и так далее. Это приятно и неожиданно, т.к. для меня игра довольно простая по сравнению с тем, что вышло дальше)
Разработка Steam версии
Наступает 2016 год, и я решаюсь выпустить игру в Steam, тогда еще был Greenight и нужно было попотеть, чтобы пройти, искать варианты, кто же лайкнет игру и так далее. Когда игру одобрили, я создал страницу в Steam. После чего я стал прикручивать API, чтобы работали лидреборды, достижения и так далее. В игре были карточки. Сейчас чтобы они были у новой игры, нужно чтобы игра взлетела по продажам.
● Глобальная карта перерисована
Да, я добавил кроссплатформенный мультиплеер, мне помог в этом товарищ. Можно играть со стима с тем, кто на телефоне.
Релиз Steam версии
Игра вышла 15 июня 2016 года. За 4 года с того момента игра продалась в 3341 копий ($2642).
Из них за первый год было продано 2474 копий ($1597), а за первый месяц.
826 копий ($698). Это общий доход в Steam, я не вычитаю комиссию и возвраты, налоги. То есть данные цифры можно делить на 2. Вот такая воронка.
В этот раз я в плюсе, если не учитывать потраченное время.
Выпущена в Web, GooglePlay, Appstore, Steam
Эта игра помогла пощупать рынок и узнать, как всё устроено от начала до конца. Она дала огромный опыт. После чего началась разработка игры Necromancer Returns…
Как я сделал свою первую игру
Всем привет. В этом посте я расскажу вам, как я сделал свою первую игру, постараюсь поделиться полученным за время разработки опытом, ну и расскажу об игре.
Полтора года назад я понял, что просто играть в видеоигры для меня недостаточно, что мне нужно самому их делать. В свободное от работы время, я начал изучать основы программирования на C# и Unity 3D. В первую очередь за знаниями я полез в You Tube, через пару недель понял, что это полный шлак, за тридцатиминутный ролик пишешь три строчки кода, а заэкранный гуру толком объяснить не может, что только что написал. Потом были уроки в docs.microsoft.com и еще что-то подобное, здесь уже получше, но для новичка сложновато. Лучшее что я нашел для человека без опыта программирования, при этом применительно к Unity, была книга Джереми Гибсона Бонда “Unity и C Шарп. Геймдев от идеи до реализации”. Товарищ Бонд на пальцах объясняет, что такое C#, что такое Unity, как писать код, что писать, все это с примерами и пояснениями, полно практических заданий, в том числе создание прототипов игр, так же много написано об игровой индустрии и геймдеве. Сразу скажу, даже с такой разжёванной информацией, за месяц, два, три, возможно полгода, программистом вы не станете. Более того, я стал понимать, что там вообще в этом коде написано, только через год (возможно, если бы я уделял учебе больше времени, и не делал длительные перерывы, это случилось бы быстрее). За этот год я дважды прочитал эту книгу, дважды выполнил большую часть заданий оттуда, прочитал и выполнил задания еще из одной книги.
В феврале этого года, разбитая тачка и надвигающийся коронокарантин, мягко намекнули мне, что хватит заниматься всякой ерундой (работать) и пора взяться за геймдев основательно.
Так как опыта у меня, по сути, было ноль, я решил сделать максимально простую игру для смартфонов. Задачи, которые я поставил перед собой: игра не должна быть похожа на какую-либо уже существующую и известную мне игру, то есть нужно было самому придумать геймплейные механики; геймплей должен быть простой, чтобы я сам мог полностью написать код; так как мне больше интересен дизайн, а не программирование, сделать упор на визуальную составляющую; и самое главное, сделать нормальную игру, не халтуру, и тем более не откровенное д****о, а просто нормальную, казуальную игру. Кое-какие наработки тогда у меня уже были, я выбрал игру, которая как раз была мне по силам. Суть игры: в игре есть пять лунок, напротив каждой пролетает шарик, нужно вовремя нажимать на экран, когда шарик пролетает мимо лунки. Быстренько придумал пять режимов движения шаров, для каждого режима задумал отдельное визуальное оформление, и приступил к рисованию спрайтов. Вообще, изначально я задумывал игру с минималистичной графикой (минимализм нынче в почете. ), но поэкспериментировав с цветами, градиентами и тенями, подумал: “тварь ли я дрожащая или рисовальщик”. В общем, было решено рисовать в более реалистичном стиле, это решение продлило разработку месяца на полтора, потому как я рисовал и одновременно учился рисовать. В итоге получилось слишком реалистично. Сейчас могу сказать, что реалистичный стиль для таких игр не очень удачное решение, лучше использовать более привычную для мобильных игр графику, например как в Angry Birds, хотя то, что нарисовал я, на мой скромный взгляд выглядит симпатично. Еще я понял, насколько важны концепт-арты. Раньше я садился рисовать примерно представляя, что мне нужно, но рисовал уже как окончательный вариант, в плане качества, в какой-то момент понимал, что это не то, стирал все, или перерисовывал какие-то части. Все это занимало уйму времени, лучше изначально нарисовать хоть какой-нибудь рукож**ый концепт-арт, главное, чтобы была видна общая картина происходящего в игре, и как элементы сочетаются друг с другом. Потом сел писать код, тут ничего интересного сказать не могу. Попутно с написанием кода собирал саму игру. Выделил пять глав. Проходишь все уровни в главе, открывается следующая глава, а также бесконечный уровень для пройденной главы, каждая глава отличается визуально и схемой движения шаров. Еще есть шестая глава, в ней пять бесконечных уровней, каждый уровень посвящен одной из пройденных глав, то есть вы можете выбрать визуальное оформление, какое вам больше по вкусу, но геймплей в них одинаковый, сочетает схемы движения шаров всех пяти глав, то как будет двигаться шар определяется рандомно. Если честно, в шестую главу мне больше всего нравилось играть. Звуки для игры использовал из бесплатных ассетов, с музыкой у меня вообще не очень. Собрал игру, воткнул в нее Unity ADS, придумал название “HitEra”, игра готова, пора и в мир отправлять. На все про все ушло около 4 месяцев, очень много страдал фигней, и мало времени уделял разработке, плюс недостаток опыта сыграл свою роль, в следующий раз надеюсь пошустрее справлюсь.
На гифке шестая глава, на сколько я знаю, до нее так никто и не добрался.