Как скачать с для программирования

Ии.. мы получили вот такую картину:

Четыре точки на поле. А чем она отличается от той, что была в первом посте, спросите вы? Не торопитесь. Давайте теперь включим отображение линий:

Что-то начинает проясняться.. Мы находимся в центре куба, и смотрим прямо. Потому и видим четыре точки одной из его граней. Так и должно быть. При таком способе проекции наш экран соответствует координате z = 0. Таким образом, остальные 4 точки остались за нашей спиной, и к ним уходят соответствующие рёбра. Так же, чтобы избежать вылета приложения при делении на z = 0, нужно перед операцией деления явно указать: if (z=0) z=(0.01f). На этом задача по рендерингу окончена.

Задача 3. Расширяем функции поворота для 3D пространства
Вот здесь мы снова сталкиваемся с матрицами. Только для двумерного прямоугольника они были второго порядка, а сейчас нас ожидают матрицы 3 порядка (иллюстрация с сайта Wikipedia):

Не стоит пугаться этих матриц. Разрешаются они стандартно, умножением на вектор-столбец с координатами:

(цифры выше для примера). В нашем столбце будут координаты трёх вершин 1-й точки. Для линии, соответственно, делается два умножения. Более подробно для людей, мало знакомых с матрицами:
1. Сначала составляется матрица Mx, My, Mz в зависимости от того, вращение вокруг какой оси вам потребовалось: x,y,z.
2. Затем полученная матрица векторно перемножается на данные координаты
3. Полученные координаты записываются в новый объект, который будет являться уже повёрнутой копией старого объекта (в ООП), либо просто в поля (область памяти) старого объекта, как делалось на старинных компьютерах.

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

Также, процедура умножения матрицы на вектор-столбец (это не самый красивый вариант, как её реализовать, но рабочий):

newValue[i] — новое значение x[0], y[1], z[2] для первой точки линии. Для второй точки — аналогично.
oldData[i] — старое значение x[0], y[1], z[2] для первой точки линии. Аналогично newValue
center[i] — аналогично заданные координаты центра объекта.

Именно здесь нам и пригодился центр объекта. При повороте относительно произвольной оси, если объект уже был сдвинут, при неверно заданном центре объект начнёт вращаться либо с большим радиусом, либо вообще непредсказуемо. Поэтому при операции сдвига, например, +100 по z, в center так же записывается z: 0,0,100.

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

Давайте теперь испытаем полученные функции, и попробуем повернуть куб (как я и говорил, поворот осуществляется по прерыванию, т.к. игровой таймер всё ещё отсутствует):

Также, демонстрация изменения константы FOV из задачи 2 на развёрнутом кубе:

Т.е. изменение FOV как бы искажает отклонение осью z оси x. Проявляется это увеличением количества видимых на экране объектов.

Задача 4. Элементы «гейм-дизайна»
Давайте теперь попробуем реализовать элемент игры, а именно, космический корабль, которым мы управляем. Нам понадобится модель корабля. Так как пишем мы примитивную игру, так сказать, «следуя по стопам» за гигантами прошлого века, модель тоже должна быть несложной в исполнении. Я смоделировал её в 3D редакторе:

Теперь нужно получить её рёбра. Сделать это явно мы не сможем, поэтому получим хотя бы вершины. Экспортируем модель в формате .obj. На примере куба:

Как мы можем видеть, содержимое файла, если открыть его в редакторе, похоже на упомянутое в первой задаче. Но есть небольшие отличия:
v — непосредственно вершины, в виде нормализованного к единице вектора
vn — нормали (нам не нужны)
f — грани (faces). Они нам не помогут. На первый взгляд сложно. Рассмотрим ещё более простую модель: грань.

4 вершины, 1 «face»: задан как 1//1 2//1 4//1 3//1. Но наша программа устроена по другому принципу. Возьмём отсюда только лишь вершины. Так как писать автоматизированное ПО для одной модели нецелесообразно, порядок соединения выставим вручную. Воссоздаём модель корабля:

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

Но, тем не менее, каркасная модель выполнена и состоит из 36 рёбер:

Давайте запустим программу:

В движении смотрится более эффектно:

К полёту готов! Также сразу же можно выполнить некоторую «постановку» сцены: корабль сдвигается вместо центра примерно на 0,7 экрана по y. Однако, конечно, пока это ещё не игра, а всего лишь просмотрщик 3D модели. Но, всё это, как и прежде, поправимо. Вопрос только, когда..

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

Ответ на пост «Бесплатно помогаю пикабушникам учить программирование, часть 30: "О уместности и правилах хорошего тона."»⁠ ⁠

Начну с того, что в 2020 году я закончил медицинский университет на специальность врача-стоматолога без особого желания работать стоматологом и с огромным желанием работать в IT.

Мои познания программирования начались с того, что на 3 курсе мне предложили обучать детей HTML/CSS, Scratch и Python, хотя на тот момент я вообще не имел никакого понятия о том, что это и как с этим работать. Все знания приходилось получать от того же материала, который я приподносил детям. То есть за день, а иногда даже за пару часов до урока я открывал материал, учил его и объяснял уже на уроке.

Всё пришло к тому, что в 2020 я знал базовый HTML/CSS, Python. Ну и на этом всё. В том же году наткнулся на пост про обучение Ruby, загорелся и начал изучать план обучения в телеграм канале. Тогда же у меня родилась дочь, и всё свелось к тому, что мне предстоял выбор между неизвестной мне профессией и работой, которой я посвятил 6 лет обучения в университете. Учитывая давление родственников и родителей выбрал я второе и на программирование на некоторое время полностью забил.

Как начинающему специалисту денег мне не хватало, работы было много, работать приходилось через немогу. Через полгода мне предложили преподавать программирование онлайн, и точно так же я учил материал за пару часов до урока и объяснял его. Время от времени просматривал вакансии на hh и отправлял свои резюме.

К июню 2022, 2 месяца назад я для себя окончательно решил, что хочу работать в IT. Обратно вернулся к плану обучения.

Весь июнь и июль я работал в стоматологии с 9:00 до 18:00, с 19:00 до 00:00 преподавал программирование, а с 00:00 до 3:00 учил Ruby и Ruby on Rails.

Для кого интересно, я постараюсь расписать что я учил до того как получить оффер.

1. Были базовые знания HTML/CSS, JavaScript.

2. Прошёл первые 10 уроков на https://rubyrush.ru/

3. Прочёл Руби для Романтиков и выполнил все задания с этой книги

4. Прочёл где то до 11 главы Майкл Хартл, Ruby on Rails. Дальше всё пошло плохо, так как в книге использовалась старая версия Ruby и Ruby on Rails, до этого как то получалось справляться с ошибками, а потом всё начало полностью ломаться и я забил.

5. Куча видео с youtube, где создавались приложения, делал я их с учётом того, что половину я понимал, а половину не понимал.

В начале августа я активно начал искать работу, составил резюме и отправлял во все появляющиеся вакансии.

Учитывая, что я знал HTML/CSS, JavaScript, Ruby on Rails на базовом уровне, на youtube просмотрел несколько видео по React, я отправлял вакансии и на Frontend, и на Backend. Так же увидев кучу вакансий по PHP решил подучить и его, просмотрел несколько видео и добавил соответствующую графу в резюме. В какой то момент, после первой сотни отправленных резюме мне стало всё равно, в какой стек, на какую должность я попаду, хотелось только сделать первые шаги в IT, а дальше набраться опыта и подыскать работу на Ruby on Rails.

За 2 года я отправил 424 резюме, получил кучу отказов, сделал кучу тестовых заданий, и на днях получил оффер на позицию Ruby on Rails/React разработчик с зп 50 000 рублей удалённо.

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

Спасибо @prodigal.son, если бы не ваш пост и ваша группа, я так и не сделал бы первые шаги в IT.

Пишем примитивную 3D игру. Как программировать, чтобы работало. Зачем программисту математика. ч.1⁠ ⁠

Всем привет! В предыдущих постах я программировал посудомоечную машину. Теперь решил сделать мини-серию постов о программировании, а точнее, о том, как надо мыслить для того, чтобы программа получилась. Я не буду вдаваться в нюансы написания самого кода. Здесь, скорее, будут размышления на тему, так что быть программистом для чтения не обязательно (и не желательно). Поехали.

Для начала, небольшой ракурс в историю. Первая игровая приставка (в привычном нам понимании) появилась в 1972 году. Разработала её группа военных инженеров во главе с Ральфом Бером -"Отцом видеоигр". Эта самая приставка была впоследствии названа Magnavox Odyssey. Выполнена она была полностью на транзисторах. Можете себе представить? (фото взято с сайта Wikimedia).

Такая приставка умела немного. Однако, важнее всего была суть — возможность генерировать свой управляемый телевизионный канал. До этого подобное не приходило никому в голову. Так вот, примерно спустя 10 лет после этих событий, появились в продажу компактные ЭВМ для массового потребления — ZX Spectrum, IBM PC и другие. Каждый получил возможность изучить компьютеры и обрёл пространство для своих творческих экспериментов. А пятьдесят лет спустя, мы привыкли видеть компьютерные игры уже так:

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

Кстати говоря, скоро наступает 1 сентября. Вспоминаются мои институтские годы — как мы пришли, и первой парой стояла высшая математика. До сих пор во многих провинциальных вузах программа первого семестра начинается с матриц. Я помню ребят, которые невесть как попали в институт, смотрели с задних парт круглыми глазами и только повторяли "- И чё мы тут вообще забыли?". Кстати говоря, ребята эти в итоге семестр не пережили и были отчислены. Но это уже их проблемы. Однако, даже у тех, кто остался, часто возникали вопросы: зачем? что это мы такое учим?

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

Но давайте приступать. Для начала, чтобы программа получилась, необходимо мышление программиста. Я его понимаю, как две составляющие: некая абстрактная модель и её реализация. Короче говоря, теория и практика. Чтобы было более понятно, о чём я говорю, давайте представим, что мы программируем обычную столовую ложку, как в фильме "Матрица"

Так вот, если думать, как программист, то эту ложку можно разделить на две составляющие.

1. Теория ложек
Какие параметры существуют у ложки? Такие, какие вы ей сами зададите. Вы можете взять тарелку, зачерпывать ей суп, и тем самым объявить тарелку ложкой. Но немногие с вами согласятся, ведь, во-первых, это неудобно. Во-вторых, все привыкли видеть ложку привычной ложкой. Поэтому рассмотрим более детальные требования:
— Ложка имеет хлебало и держало черенок и чашечку. Чашечка, в свою очередь, имеет форму полусферы. Мы можем задать чашечку, например как функцию z^2 = x^2 + y^2

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

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

И то и это — нормально. Всё дело в представлении ложки. В том, как мы её видим и в том, как мы её задали. Последнее компьютер выполняет, в отличие от людей, весьма чётко. Мы задали какую-то задачу, и получили конкретный результат.

Именно поэтому важна проработка обоих частей программы. Понятное дело, новички, когда только врубаются в основы программирования, изучают язык подобно маленьким детям. Т.е., пытаются повторять и копировать какие-то фрагменты кода, составляя из них программу. Однако, каждый чужой кусочек кода является именно практикой, следствием где-то существующей модели. Именно поэтому программа новичка, порою, выглядит, как на известных мемах:

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

Давайте рассмотрим одну из таких задачек. Вспомним ракурс в историю, который был в начале поста. Первые 3D игры для первых ЭВМ были примерно такие: Battle Tank

Star Wars: Empire strikes back.

Всё это было до Джона Кармака, появления Direct3D, OpenGL и т.д. Примерно в таком ракурсе мы и будем с вами сегодня сегодня работать. Писать будем пока на плюсах, хотя для новичков проще это будет сделать, наверное, на питоне. В качестве подспорья возьмём графическую библиотеку SFML. С 2018 года она уже не поддерживается, но, для иллюстрации сути поста её будет достаточно. Мы хотим получить что-то вроде этого:

Для того, чтобы обдумать реализацию, и, в дальнейшем, это получить, мы должны разобрать "по косточкам" происходящее на экране. Мы видим:
1. GUI (интерфейс с очками и временем). Пока отбросим его.
2. Пространство с астероидами
3. Космический корабль
Также мы знаем, что происходит при нажатии клавиши:
1. Космический корабль наклоняется в сторону
2. Пространство поворачивается вокруг корабля, создавая иллюзию того, что корабль куда-то летит (да, когда вы играете в компьютерную игру, это не игрок поворачивается в пространстве, а пространство вокруг игрока).

Теперь рассмотрим более подробно первую задачу: по нажатии клавиши космический корабль поворачивается. Давайте разберём корабль, по аналогии с ложкой. Он представляет собой проекцию трёхмерного объекта на двумерное, группу точек, соединённых рёбрами (в случае Wireframe моделей — линиями, в остальных — треугольниками, полигонами). Значит, теория корабля следующая:
1. Где-то есть группа точек. Её мы просто задаём, как набор переменных. Произвольно. Но хотя бы один экземпляр её должен существовать.
2. Есть способ изменения этой группы точек по внешним параметрам. Для этого есть матрицы сдвига, масштабирования и поворота в трёхмерном пространстве (материал взят с сайта Wikipedia):

3. Есть способ отображения их на мониторе (хотя это уже больше относится к реализации)
Прежде, чем приступать к реализации 3D варианта (он будет во второй части поста), давайте упростим наш корабль до прямоугольника, и одно измерение уберём. Таким образом, будет проще разобрать задачи на начальном этапе. Да и матрица поворота сильно упрощается и теряет один порядок:

С теорией понятно, давайте перейдём к практике.

1. Развернём IDE, подключим библиотеки, подготовим точку входа.

2. Создадим класс Box2D. Зададим группу точек нашего прямоугольника как двумерный массив — массив пар координат. Пока что с конечным размером.:
float vertices[4][2] = < <-50.f, 50.f>, <-50.f, -50.f>, <50.f, -50.f>, <50.f, 50.f>>;

Также добавим переменную center, характеризующую сдвиг центра объекта. Это необходимо для возможности дальнейшего поворота относительно произвольной оси, но пока не нужно.

3. Добавим методы, осуществляющие поворот объекта по заданному углу. Код здесь получился несколько кривой в результате быстрого его портирования с питона, но, в дальнейшем, поправим:

Обратите внимание.
В generateMatrix переменная newMatrix — та самая матрица поворота. Вспоминаем нашу математику. Функция подготовит матрицу поворота на конкретно заданный градус. Именно на неё мы будем перемножать имеющиеся ранее заданные значения точек, чтобы получить новые координаты.
calculatePerVertex — перемножает координаты на матрицу.
recalculateRotation — проходит по всем координатам объекта и выполняет их обработку.

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

Ну и осталось спроецировать эти точки на экран. Тут есть множество вариантов — можно также создать копию массива точек, соответствующих полученным значениям, если в дальнейшем нам нужно применять к точкам ещё какие-либо операции. В нашем случае это не нужно, поэтому все точки можно просто забить поочерёдно в дисплейную область оперативной памяти посредством средств библиотеки SFML — объекта "Circle" со смещением на координаты, задаваемые вершинами.

Готовый результат при таком способе проекции будет выглядеть так:

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

Обобщим вышесказанное:
Мы имеем некоторую воображаемую модель множества точек. Над которой осуществляем операции, и затем практически отображаем результат этих операций. Именно за это и отвечает математика. Хотя, конечно, это чуть ли не школьный уровень.

Давайте изменим практическую реализацию и соединим наши точки линиями. Для этого мы сообщаем в модель ещё один внешний параметр — порядок соединения этих линий. Он может быть произвольным. Но, как мы знаем, у прямоугольника каждая вершина соединяется лишь с двумя другими под углом 90 градусов. Поэтому порядок соединения будет 1-2-3-4-1.

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

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

А для тех, кто дочитал и кто любит компьютерные игры, забежим ещё очень сильно вперёд. В 2009 году Маркус Перссон, изобретатель игры "Minecraft" написал маленький апплет, под названием Minecraft 4k. Вот, как он выглядел:

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

С вами был Kekovsky, на сегодня всё, приятных выходных. Если какие-то из моих постов понравились или были для вас информативными, можете поддержать меня, благодаря стараниям администрации Пикабу у меня теперь так же есть донатная кнопка.
Всем успехов в освоении новых наук!

Интересный Python #14: визуализируем данные⁠ ⁠

Сегодня напишем вот такое приложение всего в 53 строки кода. Да, всего 53, без шуток. И всё благодаря Streamlit.

Что такое Streamlit?

Streamlit — это библиотека, которая позволяет создавать веб-интерфейс для приложений, работающих с данными. Так что если вы работаете с Pandas, используете Matplotlib, Bokeh, Altair и подобные инструменты, то с помощью Streamlit сможете оборачивать свои скрипты в интерактивные веб-интерфейсы и делиться ими с другими пользователями.

Для кого этот пост?

Для тех, кто уже неплохо знаком с Python и часто работает с данными. Для начинающих многие вещи будут сложноватыми.

Как установить Streamlit

1. Откройте терминал (командную строку);

2. Если умеете пользоваться виртуальным окружением, то создайте и активируйте его. Если нет, то пропустите этот шаг;

3. Выполните команду pip install streamlit.

Документация

Документация просто великолепная, очень удобная и красивая. Ознакомиться с ней можно здесь.

Для начала соберём интерфейс приложения. Он будет состоять из:

— формы (контейнера для других элементов);

— пары полей для ввода чисел;

Для каждого из этих элементов в Streamlit есть отдельный класс.

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

Задаём настройки страницы, добавляем заголовок «Симулятор ставок» и создаём форму с элементами.

Запускаем сервер

Чтобы запустить сервер Streamlit, выполните в терминале следующую команду:

Вместо main.py , конечно же, укажите имя вашего основного модуля.

Если всё сделано правильно, то спустя несколько секунд откроется окно браузера, в котором отрисуется интерфейс.

Важно: запускать программу с помощью интерпретатора Python не нужно, сервер Streamlit сам это сделает. Если вы внесёте изменения в исходный код, то достаточно будет просто обновить страницу, чтобы изменения вступили в силу.

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

Начнём с импорта нужных модулей.

Так как нужно будет генерировать N наборов данных, построенных по одинаковому принципу, то упакуем начальные «настройки» в класс, и будем использовать их при вызове методов.

Соединяем интерфейс и логику

Осталось сделать так, чтобы при клике по кнопке приложение забирало данные из элементов интерфейса и отдавало их в Simulator.

Приложение готово. Обновите страницу в браузере, и Streamlit автоматически подтянет все изменения.

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

Интересный Python #13: играем "Имперский марш"⁠ ⁠

В прошлых постах было слишком много слов «работаем». Поэтому сегодняшний пост будет про то, как играть. Причём играть не что-то там, а музыку. Причём музыку не какую-то там, а «Имперский марш» из «Звёздных войн». Так что, товарищи Дарты Вейдеры, отвлекитесь на пару минут от удушения очередного офицера и насладитесь чудесными звуками.

Для воспроизведения звуков будем использовать модуль winsound из стандартной библиотеки Python. Устанавливать ничего не нужно, он уже идёт в комплекте с интерпретатором.

В нём есть функция Beep(), с помощью которой можно воспроизвести звук заданной частоты и заданной длительности.

Важно: модуль работает только под Windows. Господа линуксоиды, сегодня вы в пролёте 🙁

Также понадобится модуль time, с помощью которого будем создавать паузы.

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

Составим список необходимых нот:

Ключ — это название ноты, а значение — это частота.

Запишем мелодию в виде набора нот.

1/4, 3/16 и прочее — это длительность каждой ноты.

Нам понадобятся 2 функции: одна для воспроизведения конкретной ноты, а вторая — для воспроизведения всей мелодии.

Воспроизводим ноту

Воспроизводим мелодию

Наслаждаемся результатами

Оригинальный темп мелодии — 103 BPM.

Забрать полный код в текстовом виде можно здесь.

GameMaker Studio 2. Урок 8. Звук⁠ ⁠

Это воскресенье, мои чуваки.
Всем привет. Сегодня поговорим с вами о том, как подключить звук к своей игре. Как обычно: немного теории, немного практики.
Покажу вам сайт, где большинство звуков можно взять бесплатно и как его настраивать.
Ну и небольшие бонусы, само собой.

Ссылки на предыдущие гайды:

Второй гайд — События отрисовки, коллизия, скрипты.

Третий гайд — Камера и разрешение экрана.

Четвертый гайд — Иерархия объектов. Глобальные переменные.

Пятый гайд — Структуры данных. Сетка комнаты и размещение объектов по сетке.

Шестой гайд — Алгоритмы поиска путей.

Седьмой гайд — Сохранения и их загрузка. Бонус в конце!

План:
— Создание звука
— Подключим звук к кнопкам
— Глобальная настройка звука
— Заставим человечков издавать звук
— Музыка
— Тест звука
— Немного бонусов

Тема сегодня небольшая, поэтому сразу перейдём к делу.

Создание звука.

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

Как видно, там несколько форматов: OGG, WAV и MP3. Использовать мы можем все из них.
Сохраните архив, распакуйте в удобное место. Можете сразу скопировать путь до него. Дальше нам нужно создать звук и загрузить его. Для этого найдём папочку Sound и там создадим, собственно, Sound.

Звук назовём sndButton.
Итак. Если сейчас мы нажмём на появившийся звук, то увидим небольшое меню настроек для нашего звука. Пока нам это не интересно. Чтобы загрузить звук, нужно нажать на три точки справа от названия звука.

Там всё просто: указываем путь до нужного нам файла. У меня это «modern2.wav«. Можете выбирать любой формат, пока это не столь важно. Стоит лишь отметить, что форматы отличаются не только весом, но и качеством звука и возможностью на него влиять внутри движка.

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

Обратите внимание: внизу указанного меню у вас есть вкладка Audio Group. Это ничто иное, как группа звуков. Её можно (и нужно) использовать в тех случаях, когда нам нужно уменьшить или увеличить только определённые звуки. Например, сделать три настройки звука: общий, музыка, игра. С-но, здесь будет три аудио группы: стандарт, музыка, игра.
Чтобы добавить свою аудио группу нужно в верхней части экрана найти вкладку Tools, там — Audio Groups.

Подключим звук к кнопкам.

Для удобства используем объект oMMenu, который сделаем родительским объектом для всех наших кнопок в меню, в т.ч. в настройках.
Не забудьте прописать event_inherited(); у дочерних объектов в тех событиях, которые нужно будет унаследовать.

Для начала, в Create объявим одну переменную:

Она позволит нам проигрывать звук при наведении только один раз.

Теперь в Step’e сделаем простую конструкцию: если наведены на текущий объект и раньше его не касались, то проигрываем звук и говорим, что мы его коснулись.

Соответственно, чтобы проиграть звук нам была нужна команда:
audio_play_sound(Звук, Приоритет, Зациклить)

Приоритет — то, в каком порядке звук обрабатывается. Значения либо от 0 до 100, либо от 0 до 1. Чем больше число — тем выше приоритет.

Глобальная настройка звука.

Раз есть звук — значит его можно настроить.
Для этого в комнате настроек создадим ещё одну кнопку: oSSound.
Как ни странно, но с помощью этой кнопки мы будем устанавливать значение громкости для всех звуков, в т.ч. музыки.

Для этого нужно в событии step будет прописать следующий код:

audio_master_gain(x) принимает на вход значение от 0 до 1 (0% — 100%) и устанавливает громкость звуков.

Есть похожая функция, но которая называется audio_set_master_gain(ID слушателя, Громкость). Соответственно, она необходима нам в том случае, если у нас несколько «слушателей«. Полезно при создании мультиплеера, либо для того, чтобы позволить нашему ИИ ориентироваться на звук.
Результат:

Заставим человечков издавать звук.

Прежде, чем приступим, немного теории.
Мы ведь не хотим, чтобы те звуки, которые есть в комнате, были слышны ото всюду, верно? Следовательно, нам нужно использовать немного другой подход к созданию звуков.
Чтобы в дальнейшем иметь возможность на эти звуки влиять, предлагаю воспользоваться эмиттером — или излучателем.
Делать он будет ровно то, о чем говорится в его названии: излучать звук.
А ещё мы сможем его настроить таким образом, чтобы звук был слышен только на определённом расстоянии от излучателя, а также начинал затухать спустя определённое расстояние.

Здесь всё предельно просто.
Перейдём к oCharPlayer и создадим у него событие — alarm 0. Это событие — «будильник», или, если по нормальному, таймер, в котором будет работать код раз в определённое количество кадров. А теперь пошагово:

Как видно, звук перемещается вместе с нашими человечками. Накладывается друг на друга, но играет строго раз в определённый отрезок времени, успевая полностью «проиграться».

По аналогии с oSSound, создадим oSMusic. Разница в том, что в oSMusic мы в Create сразу пропишем переменную music, равную 0.1. Она и будет отвечать у нас за громкость музыки. Соответственно, нужно sound заменить на music в коде и всё.

Создаём файл для музыки: sndMusic
Заходим в Tools -> Audio Groups. Создаём аудио группу под названием audio_music.
Жмакаем «add asset» и выбираем sndMusic.

Теперь перейдём к oGameManager.
В Create допишем:

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

Немного бонусов.

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

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

Там так-то всё просто. Общая логика работы следующая:
Когда нажали (разово) левую кнопку мыши, мы запоминаем координаты клетки, на которую были наведены.
Далее, отдельно проверяем: если кнопка мыши зажата и координаты первой клетки запомнены, на постоянной основе обновляем координаты второй. Заодно создаём прямоугольник с заполнением или без.
Ну и при отпускании ЛКМ — проверяем, что первая координата у нас задана, обновляем картинку и обнуляем все использованные переменные.

Соответственно, как это выглядит при работе:

Сайт, откуда можно брать бесплатные ассеты: звуки, музыку, спрайты и прочее.
Либо из маркета YoYo. На ваше усмотрение.

Серия гайдов подошла к концу. У нас есть заготовка, которую остаётся дорабатывать, рефакторить и всячески дополнять, чтобы создать полноценную игру. Впрочем, это не значит, что я перестану писать всякие статейки, нет.
Буду и дальше разбирать интересные темы, делиться скриптами и заодно рассказывать о ходе работы над проектом.
На повестке: моддинг без кода ( для игроков:D )

Спасибо всем за тёплые слова и поддержку.
До скорых встреч.

Путь дурака. Игра на Unity с нуля до выпуска. Часть 2 — Как сделать главное меню игры (пост #1)⁠ ⁠

В прошлой части мы скачали Unity, подготовились к работе, создали проект, первую сцену и на ней объекты Canvas и Background. В этот раз мы создадим главное меню нашей игры.

Для начало запомните важную вещь — в 2D игре интерфейс построен на слоях. Одно поверх другого. А также связь Parent — Child (Children) — когда один объект находится в другом и свойства родительского объекта влияют на свойства потомка. Именно по этим принципам мы и будем строить наше меню. Давайте попробуем визуально представить как его можно расположить на экране.

Левый блок — это будет объект mainMenu. Он будет родителем для объектов «название игры», «пункты меню» и «ваше лого». Они тоже будут содержать в себе объекты. Начнем.

Создайте пустой объект (Empty Object) и сделайте его дочерним объекта Canvas (в иерархии перетяните один объект на другой). Другой вариант — клик ПКМ по объекту Canvas и затем выбор создания пустого объекта. Так он автоматически станет дочерним. Переименуйте его в mainMenu.

Чтобы mainMenu стало видно на экране, ему нужно добавить компонент Image через меню Add Component в инспекторе (как добавлять компонент я рассказывал в прошлом посте). Так, ну и где же он?

Чтобы придать нашему меню нужное положение, воспользуемся его компонентом Rect Transform. В разделе Anchors устанавливаем:

Затем Left, Right, Top, Bottom ставим по нулям.

Теперь установим нашему меню вместо белого пятна приятный глазу цвет. В компоненте Image нажмите на поле Color и установите:

— R — 0.012 (красный)

— G — 0.012 (зеленый)

— A — 0.7 (альфа-канал или прозрачность)

Для закрепления материала по размещению объекта на экране создадим два декоративных элемента — две полоски по бокам от плашки меню.

1. Создаём два пустых объекта как Child объекта mainMenu — line1 и line2

2. Назначаем Anchors для line1

3. Назначаем Anchors для line2

4. Устанавливаем обоим объектам цвет как у mainMenu

Теперь можно похвалить себя и подышать свежим воздухом. Далее нам нужно создать объекты для названия игры, пунктов меню и логотипа. Делаем мы это по тому же принципу — создаем дочерние объекты в mainMenu — top, middle и bottom. Для наглядности сразу добавляем им компонент Image с белым цветом (потом изменим).

Аккуратно распределяем объекты на объекте mainMenu, расставляя значения Anchors.

Top —> X: (0, 1) Y: (0.8, 0.96)

Middle —> X: (0, 1) Y: (0.15, 0.8)

Bottom —> X: (0, 1) Y: (0.04, 0.15)

Для создания небольших отступов или точного корректирования положения объекта можно задавать значения Left, Right, Top, Bottom в компоненте Rect Transform. Попробуйте поставить всем трем объектам эти значения по 2 пикселя. Главное не злоупотреблять этим, а то может верстка перестать быть стабильной.

Итак, мы нашли хорошее расположение для блоков и теперь можем удалить у них компоненты Image и Canvas Renderer, так как больше они нам не понадобятся.

Давайте сделаем для игры графическое название. Можно, конечно, и текстом, но графикой будет симпатичнее. Мы же делаем игру для людей, а не черновик для себя — так ведь?

Откроем Фотошоп и создадим в нём новый файл размером 1000х1000 пикселей.

Затем добавим название игры.

Нарисуем декоративную линию.

Добавьте слоган внизу, затем подрежьте инструментом «Рамка» лист по самые края логотипа.

Далее удаляем слой фона, чтобы сделать логотип прозрачным. Затем устанавливаем размер изображения с шириной в 1000 пикселей. После этого нам очень важно сделать так, чтобы каждая сторона изображения была кратна 4 — это необходимо для применения алгоритмов сжатия, чтобы уменьшить вес игры. Так как обрезать уже нечего, то через «Размер холста» делаем высоту 212 пикселей. Итоговый размер 1000х212.

Когда всё готово, вы должны поменять цвет всех объетов на белый. Зачем? На белое изображение в Unity мы легко сможем наложить любой цвет, если нам приспичит. На чёрный — не получится.

Сохраните полученое изображение в формате PNG и положите его в папку проекта Assets/Resources/Images (создайте её). Сам исходный файл PSD сохраните в отдельной папке вне проекта, где вы будете хранить исходники графики.

Самое время добавить созданное название в игру! Создаем для top дочерний объект gameName, добавляем ему компонент Image и выравниваем на экране. Для того, чтобы изображение не искажалось, в компоненте Image активируем Preserve Aspect — эта функция позволит сохранить пропорции.

Отлично! Гейб Ньюэлл вами был бы доволен.

Теперь займёмся объектом middle и сделаем в нем несколько кнопок, которые будут вести в нужное место — «Новая игра», «Загрузить игру», «Настройки», «Об игре», «Выход».

Нам пригодится полезный компонент под названием Vertical Layout Group. Он выравнивает дочерние объекты по вертикали, регулирует их высоту, ширину и отступы. Это означает, что нам не придётся вручную устанавливать размеры и положение кнопок. Его можно сразу добавить к объекту middle.

Таким же образом добавьте еще 4 кнопки и настройте Vertical Layout Group у объекта middle.

Padding — это отступы всего списка кнопок относительно объекта.

Spacing — это отступы между кнопок.

Потыкайте настройки, чтобы понять, как это работает, а потом сделайте как на скриншоте. Как видите, теперь у нас есть аккуратный список кнопок.

Обратите внимание на иерархию — у каждой кнопки есть дочерний объект Text. Это такой же объект, как и все, только с прикрепленным компонентом Text. В нем можно вписать текст объекта, указать шрифт, размер, начертание, цвет, выравнивание. Этих настроек вполне достаточно для нашей игры. Установите размер шрифта 24 пикселя.

Теперь можно нажать кнопку Play вверху рабочего стола и потыкать по кнопкам.

У каждой кнопки есть компонент Button, у которого есть целый ворох настроек как кнопка будет меняться при нажатии, наведении курсора итд. Однако, для мобильных платформ, где не мышка, а тачскрин, это не нужно. Поэтому отключите эту функцию, поставив Trasition —> none.

Далее можно удалить у кнопок компонент Image — для такого минималистичного дизайна он не нужен. Цвет текста сделайте белым.

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

Пришло время для правой части меню — не забыли про неё? Для начала определимся, что будет делать каждая кнопка.

Новая игра — выдает список слотов сохранений, при нажатии на который запустится новая игра и автоматически сохранится в этот слот.

Загрузка игры — аналогично, только загружает сохранение.

Настройки — выбор языка игры, громкости звука и музыки.

Дополнительно — авторы, ссылки, благодарности и прочая второстепенная информация.

Выход — закрывает приложение.

Сделаем на каждую кнопку кроме «Выход» своё поле с информацией, которое будет активироваться при нажатии. Создайте в Canvas дочерний объект newGameList, скопируйте для него компонент Image из объекта mainMenu и установите Anchors —> X: (0.31, 0.9) Y: (0, 1).

В нем создайте 6 кнопок для слотов сохранений и назовите их game_0, game_1, game_2, game_3, game_4, game_5. В этот раз мы не будем распределять их с помощью Vertical Layout Group, но сделаем их с небольшой графикой.

Для начала распределите их равномерно по объекту newGameList, используя Anchors.

Теперь создайте в Фотошопе новое изображение размером 400х400 пикселей. Нарисуйте в нем прямоугольник с границей, но без заливки, как показано на скриншоте.

А затем нарисуйте прямоугольник поменьше, но с заливкой.

Удалите слой фона, сделайте прямоугольники белого цвета и сохраните как PNG в папку Assets/Resources/Images под именем frame_1.

В Unity нам потребуется отредактировать границы спрайта изображения, для того чтобы мы могли его без искажений растягивать в разные стороны. В дереве проекта выберите наше новое изображение frame_1, нажмите в инспекторе Sprite Editor и в открывшемся окне установите Border (границы) на 12 пикселей. Именно в этих местах спрайти будет растягиваться, подгоняясь под размеры кнопки. Закройте это окно и нажмите Save.

Примените новый спрайт ко всем кнопкам и в компоненте Image установите Image Type на Sliced. Надо поправить цвет кнопок.

— R — 0.012 (красный)

— G — 0.012 (зеленый)

— A — 0.7 (альфа-канал или прозрачность)

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

Цвет текста кнопок так же меняем на белый.

Так как нам нужно точно такое же поле для раздела «Загрузка игры», мы можем просто скопировать это. Деактивируйте объект newGameList, нажав на галочку возле его имени в инспекторе, затем в иерархии щёлкните по нему ПКМ и нажмите Duplicate. Теперь нужно только его переименовать в loadGameList, чтобы не путаться. Деактивируйте его, чтобы не мешался.

Раздел «Настройки». Создайте такое же поле, но только без кнопок. Этот раздел посложнее предыдущего, поэтому сделаем для начала небольшие намётки.

Первым сделаем блок выбора языка с выпадающим списком. Нужно создать объект language внутри optionsList и установить ему Anchors X: (0.03, 0.97) Y (0.85, 0.95). Внутри language создаем объект header, устанавливаем Anchors X: (0, 0.48) Y (0, 1), добавляем ему компонент Text с размером шрифта 24 и выравниванием по правому краю и по центру.

Теперь нам нужно сделать выпадающий список. В Unity уже есть готовое решение — нам нужно только правильно его настроить. Добавьте в language объект UI -> Dropdown и устанвите ему Anchors X: (0.5, 1) Y (0, 1). Сразу же можно установить ему почти чёрный цвет с прозрачностью 0.78.

В нём достаточно много дочерних объектов. Разверните его полностью и внимательно поменяйте настройки. По шаблону «Объект: Компонент —> настройки».

— Dropdown: Dropdown —> Transition «none», список Options — поменять Option A итд на названия языков игры.

— Label: Text —> Русский, размер шрифта 24, цвет белый.

— Arrow: Rect Transform —> PosX -20, Wigth 40, Height 40.

— Template: Rect Transform —> Height 450; цвет сделать как у объекта Dropdown

— Content: Rect Transform —> Height 80.

— Item: Rect Transform —> Height 80; Toggle —> Transition «none»

— Item Background: цвет сделать как у объекта Dropdown

— Item Checkmark: Rect Transform —> PosY -5

— Item Label: Rect Transform —> Left 25, Top 15; Text —> размер шрифта 24, цвет белый.

Если ничего не пропустить, то результат будет как на видео ниже.

По аналогии с языковой панелью делаем объект music, размещаем в нём объект header с компонентом Text (пишем «Громкость музыки»). Нам понадобится слайдер — добавляем его UI/Slider с Anchors X: (0.5, 1) Y (0.3, 0.7).

В компоненте Slider отключаем Transition.

В дочернем объекте Background делаем черный цвет.

Таким же образом создаём слайдер для «Громкости звуков».

Готово! Вы — великолепны!

Лимит картинок опять исчерпан, поэтому продолжим в следующий раз.

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

GameMaker Studio 2. Урок 2. События отрисовки. Коллизия. Как работают скрипты. Как подключить русский шрифт. Переходы между комнатами⁠ ⁠

Сегодня у нас много матчасти и не очень много кода.

Конкретизация разработки.