Как сделать игру пазлы
Разработка игры Пазлы на С++ для Android
Кончается лето, а в месте с тем — и прекрасная возможность для самообразования. Тысячи студентов мечтают научиться программировать под Android, при этом, многие из них знакомы с языком С++ и библиотекой Qt. Значит — вы возможно уже все умеете, но не «делаете это».
Библиотека Qt с давних пор позволяет разрабатывать приложения для Android на С++. Однако, при этом у вас обязательно возникнут проблемы — стандартные элементы интерфейса на телефонах будут выглядеть ужасно, вам придётся разрабатывать свои собственные или найти готовые.
Бесплатная, совсем без рекламы, доступна для загрузки из Google Play: https://play.google.com/store/apps/details?id=org.qtproject.
Компоненты, использование которых должно помочь вам выпустить своё приложение для Android быстрее выделены в отдельную статью: https://pro-prof.com/archives/4636#Qt_gamedev
При проектировании Пазлов, мне показалось возможным применение шаблона проектирования Декоратор. В статье описано почему это не получилось и о чем нужно задуматься если Вам тоже кажется подходящим этот паттерн.
Непосредственно о пазлах, в статье написано: «как нарисовать фигурные контуры?» (пазлы резные) и «как вырезать фигурный фрагмент изображения?». Я описал лишь эти аспекты, т. к. они могут пригодиться и в других ваших приложениях.
Дубликаты не найдены
Лига программистов C/C++
37 постов 4K подписчика
Правила сообщества
Соблюдайте правила Pikabu:
Помимо этого ЗАПРЕЩЕНО:
— Размещать в сообществе посты стиля «Подскажите как стать программистом», «Подскажите как удалить вирус», «Подскажите как установить программу», «Подскажите как починить монитор/телевизор/мышь/тостер/клавиатуру» или «Напишите за меня лабу в универ». Пожалуйста размещайте такие посты вне этого сообщества или в соответствующих для этого сообществах.
Редактировать публикацию я уже не могу (час прошел).
это скриншот приложения с моего телефона, я так понимаю, что лучше он не станет. Можно кинуть скриншот с десктопа, но это будет не совсем честно.
там много книг, можно кое что выбрать
Пишем игру «Жизнь» под Android используя C++ и Qt за час.
Всем привет! Недавно видел на пабликах типа ТП посты мол «делаем игру жизнь на java за час», «делаем игру жизнь на python за час», вот решил сделать пост, делаем игру жизнь под андроид используя C++ и библиотеки Qt за час.
Важно отметить что игра занимает
100 строчек кода(исключая h файлы, символы переноса и т.п.), а также то, что созданная игра будет работать и под винду, и под андроид, и под линукс, и под ios и под mac os x.
И так начнем. Правила игры жизнь я думаю вы знаете. Есть поле с клетками. Клетка может быть живая или мертвая. По прошествии хода, если вокруг мертвой клетки есть 3 живых, она становится живой. Если вокруг живой клетки будет 1 или 0 живых, то она становится мертвой, также она становится мертвой если вокруг нее более 3 живых клеток. Впринципе все, подробнее вы можете прочесть на википедии.
И так что у нас должно быть:
Поле с N*M клеток, кнопка «Новая игра», кнопка «Начать эволюцию». Поле забито прямогуольниками, изначально все пустые. При нажатии на клетку она окрашивается в черный или белый цвет, в зависимости от того какой цвет был там раньше.
Должны быть реализованы функции подсчета соседей для каждой из клеток, зная положение клетки по X и Y. После каждого хода, мы рассчитываем количество соседей для каждой из клеток, и в зависимости от состояния клетки и количества её соседей добавляем клетку в массив(вектор), для изменения её состояния. Если за 1 ход не было добавлено ни 1 клетки, то игра заканчивается, выводим пользователю количество ходов
И так, как выглядит GUI:
Скачиваем Qt Creator с официального сайта Qt(qt.io), выбираем бесплатный вариант для GPL приложений. Запускаемся, создаем новый проект, используя QWidget, с графической формой
Переходим к созданию. Переходим в режим дизайн и добавляем на форму «Graphics View» и 2 Push Button. Примерно вот так как на следующей картинке, и кликая правой кнопкой мыши по форме выбираем (Скомпоновать по сетке)
GUI готово! Теперь нам нужно перейти к непосредственно программированию.
Однако, для этой задачи нам не подойдет «чистый» QGraphicsRectItem. Нужно будет создать класс наследник, и в нем реализовать свою обработку нажатия на клетку. Ведь в самом начале игры нам нужно будет выставить первичные мертвые и живые клетки на поле.
Т.е. по нажатию на наш прямоугольник, он должен окрашиваться в требуемый цвет. А у чистого QGraphicsRectItem обработка данного события пустая.
Создадим класс LifeRect основанный на QGraphicsRectItrem., и переопределим в нем mousePressEvent
Теперь займемся реализацией. Конструктор будет использовать конструктор с такими же параметрами как у QGraphicsRectItem(позиция по x, позиция по y, широта, высота, родитель). В событии mousePressEvent будет вызываться функция changeColor.
Что нам необходимо?
1. Таймер. Каждые 0.1 секунды будет происходить 1 ход.
2. Слоты нажатия на кнопку «Старт» и «Новая игра» соответственно.
4. Переменная для хранения количества итераций(для вывода при завершении игры)
5. Двумерный вектор(используется QVector, а не std::vector) который хранит указатели на созданные нами LifeRect’ы. К его элементам мы будем обращаться, и будем представлять живое и мертвое состояние по его цвету, как я уже и писал ранее. Если среди читателей будут новички C++ в комментах могу помочь. Просто представляйте что это массив.
6. Функция для новой игры(обнуление поля, обнуления количества итераций).
7. Функция подсчета живых соседей рядом.
И так, начнем. Собственно вот заголовочный файл:
В конструкторе присвоим начальные данные(x,y из входных, 0 итераций, укажем то что сцена пока-что пустая, родительский элемент отсутствует. Проинициализируем таймер, но запускать его не будем
Создать слот on_pushButton нужно нажав правой кнопкой по кнопке на форме, выбрать перейти к слоту, и выбрать сигнал clicked()
Постарался максимально прокомментировать код.
К слову говоря, позиции осей X и Y в графической сцене таковы:
И так, мы прорисовали свои элементы, и уже можем потыкать и поменять их цвета, но пока-что не можем ничего запустить. Нужно реализовать функцию обработки каждого хода. И написать что по 2 кнопке мы запускаем таймер.
Осталось лишь только реализовать функцию подсчета соседей. Думаю, в ней проблем не будет. Мы просто смотрим на цвета наших 8 соседей(если вылезли за границы то перемещаемся в начало или конец соответственно) и выдаем на выход их количество
Все готово! Запускаем и играем на Linux, Windows или вашем Mac.
Что потребуется(если вкратце) для запуска на Android?
1. Пакеты Android SDK и Android NDK(для C++).
2. Устройство андроид или AVD.
Вы должны сконфигурировать ваш Qt Creator, в таком виде(ваши пути), и добавить в проектах сборку Android. Потребуется скачать в AVD драйвера USB, и API требуемых версий Android. Затем уже попробовать установить приложение на телефон/эмулятор. Я могу помочь, или привести ссылки где это подробно разбирается в комментах
Разработка игры Пазлы на С++ для Android
В статье описывается разработка очередной игрушки на С++, Qt для Android. В игре вы можете собирать пазлы из своих собственных картинок (любых изображений, имеющихся на телефоне).
Приложение с открытым исходным кодом, без рекламы, весит 8-10 Мб. Можно загрузить с google play, а можно — посмотреть исходники.
Трудно закончить первое приложение. Дальше процесс идет проще, так как у вас накапливаются наработки. Так, в этот раз я активно пользовался заготовками, краткие аннотации к которым приведены в статье «Разработка казуальных игр с помощью Qt Framework«. В частности, с их помощью выводится справка о программе, реализовано иерархическая система окон, отображается часть игровой сцены и выполняется ее масштабирование жестами пальцев.
Код, выполняющий открытие изображений на телефоне я заимствовал отсюда и оттуда. Просмотреть другим способом содержимое SD-карты/внутренней памяти не получилось (у каждого производителя телефонов в этом плане есть свои заморочки). Код по первой ссылке прекрасно работал на моем телефоне (Asus), но отказался работать на аппаратах товарищей (Huawei и Samsung).
Что есть в этой статье:
1 Применимость шаблона проектирования Декоратор
Если вы не слышали о таком шаблоне проектирования — загляните туда.
Фрагмент пазла должен:
Всю эту функциональность можно реализовать в одном единственном классе, но это плохое решение, нарушающее, как минимум, Single Responsibility Principle. Нужно попытаться распределить эти обязанности между несколькими классами. Паттерн «Декоратор» может показаться подходящим решением, ведь он:
Выглядит здорово, но в нашем случае работать не будет. Очень важная особенность, которую я не нашел у GoF [5] и поэтому пишу этот раздел — декораторы должны быть независимы друг от друга. Очевидно, если между декораторами есть зависимости, то «смешивать их как угодно» не получится. В нашем случае сразу несколько декораторов должны бы были обрабатывать события мыши, но:
В момент проектирования эти зависимости не были так очевидны. В итоге, я отказался от «гибкой альтернативой порождению подклассов» и реализовал такую иерархию (с удовольствием приму предложения по рефакторингу):
Вывод: если вы хотите применить Декоратор — посмотрите внимательно, не появятся ли у конкретных декораторов взаимные зависимости.
Если вам понравился этот раздел — вы будете в восторге от «Дополнительных штрихов» Влиссидеса [6].
2 Как нарисовать фигурные контуры фрагментов?
Итак, исходное изображение разрезается на фигурные фрагменты: 
Программа генерирует матрицу из кривых, как показано на приведенной картинке, а кривые генерируются случайным образом для каждого открываемого изображения. Для этого, программа хранит набор «опорных точек», описывающих один «крючек» фрагмента пазла, для каждой из них генерируется случайное смещение в небольшой окрестности (радиуса d ), как показано на рисунке:
В коде это реализовано так:
Задача немного осложняется тем, что:
В связи с этим, формируются две матрицы из горизонтальных и вертикальных крючков, которые необходимо соединить в контуры. Если до сих пор эти данные было удобно хранить в виде векторов опорных точек, то теперь нужно по ним построить плавную кривую ( QPainterPath ), для этого применяется стандартная функция кубической интерполяции cubicTo :
Полученные кривые соединяются в контур, для этого предварительно выполняется их смещение:
Итак, мы построили множество контуров, по которым теперь нужно разрезать изображение.
3 Как вырезать фигурный фрагмент изображения?
Теперь, чтобы маска наложилась в правильное место, нужно вырезать соответствующий прямоугольник из исходного изображения. Затем, мы сможем сформировать QGraphicsPixmapItem, который и будем перемещать по графической сцене:
Тут описаны не все технические детали, однако, при необходимости, вы можете задать вопрос на нашем форуме.
Значительная часть работы была выполнена Брюхановой Ульяной, в рамках диплома.
Литература
Как делать пазлы дома своими руками: я всегда радую детей новыми складными картинками
Выберите изображение для пазла
Вы можете распечатать фотографию, чтобы использовать в качестве изображения для пазла. Также картинку для пазла можно нарисовать или использовать открытку, плакат, постер или любое другое напечатанное изображение.
Если вы решили остановиться на фотографии, то выберите изображение с высоким разрешением. Размер фото будет зависеть от того, насколько большой пазл вы хотите сделать. Подобрав нужное изображение и его размер, распечатайте его на принтере или обратитесь в фотостудию.
Если вы хотите нарисовать картинку для пазла, то используйте высококачественную бумагу желаемого размера. Затем делаем свой рисунок с помощью любимого материала для рисования прямо на бумаге. Также вы можете нарисовать изображение для пазла на компьютере, а затем распечатать его, как фотографию.
Выберите основу для пазла
Идеальная толщина для основы головоломки, будь то картон или фанера, составляет 0,3 см.
Ищите основу, которая как можно ближе по размеру к вашему изображению для головоломки. Не страшно, если основа будет немного больше изображения. Вы можете использовать картон от старой коробки, но убедитесь, что он чистый, целый и плоский. Тонкий картон, например, от коробки хлопьев, подойдет для простой головоломки, но лучше постараться найти более плотный.
Соберите необходимые инструменты
Жидкий клей или клей-спрей подойдут для пазла лучше всего, потому что они многоцелевые и не повредят фотографию.
Если вы используете фотографию в качестве изображения для головоломки, не забудьте найти лак, который будет для нее безопасен.
Прикрепите изображение к основе
Поместите основу для пазла на лист вощеной или пергаментной бумаги, чтобы защитить поверхность под ней. Покройте поверхность основы клеем и равномерно распределите его. Поместите свою картинку на основу. Затем с помощью пальцев подвиньте свое изображение так, чтобы оно оказалось в центре. Пройдитесь валиком или старой пластиковой карточкой по изображению, чтобы удалить лишний воздух под ним.
Дайте клею высохнуть. Разные виды клея имеют разное время высыхания, но, по возможности, дайте вашему пазлу полежать несколько часов.
Покройте картинку лаком
Отнесите свою головоломку на улицу или в хорошо проветриваемое помещение. Поместите ее обратно на пергамент или вощеную бумагу, затем нанесите ровный слой лака на изображение и дайте ему высохнуть.
Обрежьте лишнее
Обрезать деревянную основу пазла можно с помощью пилы так, чтобы размер основы совпадал с размером изображения. Для этого возьмите ручную пилу и поместите большую часть пазла на твердую, плоскую поверхность (например, на стол). Та сторона, которую вы хотите отрезать должна нависать над краем. Одной рукой хорошо придерживайте ту часть пазла, которая лежит на поверхности, а другой рукой держите пилу и обрезайте лишнюю часть.
Создайте сетку
Переверните свой пазл изображением вниз. Используйте линейку, чтобы нарисовать сетку, состоящую из квадратов по 2 см (для пазла с большим количеством кусочков) или 2,6 см (для пазла с меньшим количеством частей).
Вместо того, чтобы рисовать свой собственный шаблон головоломки, вы можете распечатать готовый с сайтов в Интернете.
Нарисуйте шаблон пазла
Создавая кусочки головоломки, начните добавлять вогнутые и выпуклые полукруги по краям квадратов сетки так, чтобы части вставлялись друг в друга, когда головоломка будет разрезана. Вы также можете использовать перевернутые и выступающие треугольники, квадраты или другие формы.
Если вы решили просто найти и распечатать готовый шаблон пазла, то просто приклейте его к задней части головоломки и дайте клею высохнуть.
Разрежьте головоломку на кусочки
Когда вы закончите, используйте ластик, чтобы удалить все оставшиеся следы карандаша.
Чтобы сделать задачу проще, не вырезайте куски по отдельности. Вырезайте целые полосы за один раз, а затем уже нарезайте их на отдельные части.
Лак поможет защитить изображение от повреждений, когда вы вырезаете кусочки, и это особенно важно, если вы используете пилу.
Советы и рекомендации
Вот несколько дополнительных советов по изготовлению пазла своими руками: