Урок №1: Введение в создание игры «SameGame» на C++/MFC

  Дмитрий Бушуев  | 

  |

  Обновл. 28 Дек 2020  | 

 81980

 ǀ   15 

В этой серии обучающих уроков мы, используя библиотеку MFC (сокр. от «Microsoft Foundation Classes»), с нуля создадим свой вариант всем известной игры-пазла SameGame. Мы добавим несколько дополнительных фич к этой игре, помимо простого удаления блоков, а также реализуем подсистему отмены/повтора действия и диалоговые окна конфигурации. Рассмотрим примеры не только «голого» исходного кода, но и поэтапную разработку вместе со скриншотами.

Правила игры SameGame

Правила SameGame предельно простые. Ваша задача — удалить все цветные блоки с игрового поля. Для того чтобы удалить блок, игрок должен кликнуть по любому блоку, который стоит рядом (вертикально или горизонтально) с другим блоком того же цвета. Таким образом уничтожится целая цепочка блоков одного цвета. Блоки, которые при этом находились сверху, упадут вниз, заполняя освободившееся пространство. При удалении всего столбца, стоящие справа столбцы сдвигаются влево, занимая пустое место. Игра заканчивается тогда, когда у игрока не остается больше возможных ходов. Цель игры состоит в том, чтобы как можно быстрее очистить доску от цветных блоков.

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

Перед началом работы


Вам потребуются базовые знания в таких разделах языка C++ как функции, рекурсия, классы и наследование классов. В качестве среды разработки была выбрана бесплатная версия Microsoft Visual Studio 2017 Community Edition в операционной системе Windows 7 (детально об установке IDE). Если версии вашей операционной системы или среды разработки не совпадают с вышеуказанными версиями, то некоторые детали или внешний вид отдельных компонентов могут отличаться от тех, которые вы будете видеть на скриншотах данного туториала. Также не советую использовать Express-версии пакета Visual Studiо, т.к. в них не входит компонент MFC.

Чему вы научитесь?

В первую очередь, вы научитесь основным принципам создания своей собственной игры, узнаете о библиотеке MFC и о некоторых базовых методах её использования, а также познакомитесь с построением своего приложения с использованием архитектуры «Document/View».

Почему именно MFC?


MFC — это легкая в использовании библиотека, особенно для такой простой игры как наша. С её помощью не составит труда создать приложение с, так называемым «Windows look-and-feel», внешним видом. Стиль «Windows look-and-feel» имитирует особенности конкретной системы, на которой он используется: «Look» определяет внешний вид компонентов, а «Feel» — их поведение.

Создание проекта

Создавать нашу игру мы будем в Microsoft Visual Studio 2017. Все инструкции и описания, приведенные ниже, могут быть с легкостью адаптированы и для других версий Visual Studio. Итак, для начала запустите Visual Studio и создайте новый проект. Тип проекта "Visual C++" > "MFC/ATL" > "Приложение MFC":

Имя задайте SameGame. Если вы задали другое имя, отличное от SameGame, то имена ваших классов будут немного отличаться от тех, которые будут на этом уроке.

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

Выбирая опцию "Один документ" мы указываем нашему будущему приложению на необходимость использования архитектуры «Document/View». Следующий интересующий нас параметр — "Использование MFC", который содержит две опции. Выбор опции "Использовать MFC в общей библиотеке" подразумевает, что на компьютере конечного пользователя, который будет запускать наше приложение, уже имеются все необходимые для этого MFC-библиотеки. Если же мы выберем "Использовать MFC в статической библиотеке", то нужные MFC-библиотеки войдут в нашу программу на этапе компиляции, что в результате приведет к увеличению итогового размера нашей программы, но эта программа будет работать на любой машине с Windows.

Затем в следующих окнах оставляйте всё как есть, пока не доберетесь до окна:

Опция "Утолщенная граница фрейма" позволяет пользователю изменить размер окна нашей программы. Но поскольку наша игра имеет фиксированный размер, то флажок с этой опции нужно будет снять. "Развернуть окно" нам также не понадобится, как и "Начальная строка состояния".

Далее мы переходим на страницу "Дополнительные функции":

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

Далее рассмотрим последнюю страницу мастера настройки MFC-приложений, на которой можно увидеть список созданных классов:

В результате будут автоматически сгенерированы 4 класса, которые станут основными классами в нашей игре.

К классу CSameGameView мы вернемся немного позже. А пока рассмотрим класс CSameGameApp, который является классом-обёрткой для всего нашего приложения и функции main() в том числе. Базовым для него всегда будет класс CWinApp.

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

И, наконец, класс CMainFrame, базовым для которого будет CFrameWnd. Он также является классом-обёрткой для окна нашей программы. Класс основного фрейма содержит меню и представление клиентской области. Клиентская область — это место, где отрисовывается наша игра.

Теперь возвратимся к пропущенному ранее классу CSameGameView — базовый класс, который представляет собой раскрывающийся список с набором общедоступных представлений, каждое из которых имеет свои особенности в использовании и применении. Тип представления по умолчанию — CView, который является общим представлением, где все отображения и взаимодействия с пользователем должны выполняться вручную. Это как раз то, что нам нужно.

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

   CEditView — это общее представление, которое состоит из простого текстового поля.

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

   CHtmlEditView — имеет HTML-редактор, встроенный в представление.

   CHtmlView — вставляет элемент управления — браузер Internet Explorer.

   CListView — имеет область, похожую на окно Проводника со списками и значками.

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

   CScrollView — это общее представление, похожее на CView, но допускающее прокрутку.

   CTreeView — вставляет элемент управления древовидной структурой.

Завершение работы мастера приложений MFC приведет к созданию и запуску приложения MFC. Поскольку мы еще не написали никакого кода, то увидим окно, в котором ничего нет, но все равно это полностью функционирующее приложение. Ниже приведен скриншот того, как должно выглядеть ваше базовое приложение (чтобы скомпилировать программу, нужно перейти в меню Visual Studio "Отладка" > "Запуск без отладки"):

Обратите внимание, здесь есть стандартное меню ("Файл", "Правка" и "Справка") и пустая клиентская область. Прежде, чем мы перейдем к непосредственному написанию кода, мы немного поговорим об архитектуре «Document/View», которая используется в приложениях MFC, и о том, как мы собираемся применять её в нашей игре.


Оценить статью:

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (82 оценок, среднее: 4,68 из 5)
Загрузка...

Комментариев: 15

  1. Павел:

    Если у вас при создании проекта в Visual Studio нет «Проект MFC»:
    1 Жмем внизу списка «Установка других средств и компонентов»
    2 Открывается Visual Studio Installer — загружается окно Изменение. В нем во вкладке «Отдельные компоненты» вбиваем в поиск MFC, и в самом вверху должны быть пакеты для актуальной версии. Ставим галочку на «MFC C++ для средств сборки версии … (x86 и x64)» — для Windows. Справа показывает что будет установлено еще и ATL.

    Еще нужно установить «MFC-библиотека C++ для новейшей версии Build Tools v… (x86 и x64)» — у меня он был в конце того же списка.

    Все, жмем кнопку «Изменить», «Продолжить» (если просит), и начинается процесс загрузки и установки.
    3 Как установится можно жать кнопку Запустить и создавать проект «Приложение MFC»

    Если все хорошо, то при нажатии «Отладка» — «Запуск без отладки» (Ctrl + F5) у меня сборка прошла успешно и отобразилось красивое белое окошко!

    //Без Build Tools в каждом файле было куча красных ошибок.

  2. Сергей Федоров:

    Для тех кто только начал осваивать С++ и дошел до этого уровня рекомендую всё же устанавливать VS Community 2017.
    я установил сначала самую свежую версию VC2022 там всё не так с самого начала. Пришлось сносить и искать старую версию.
    Если есть опыт, то, наверное, всё просто, но без опыта всё же стоит видеть соответсвие картинки на сайте и картинки в компьютере.
    На официальном сайте Microsoft этот релиз (2017) далеко запрятан и скачать его иногда достаточно трудно. Попробуйте найти просто установщик VS2017 на любом стороннем сайте, дальше установщик уже скачает и подтянет все необходимые файлы.

  3. Анастасия:

    У меня последняя на сегодняшний день версия VS (Visual Studio Community 2019 16.6.2), но там не было ничего с MFC или Vusual C++, позволяющего создать такое приложение. Так как такой, как у автора компоненты в списке установщика я не нашла, я установила следующие две:
    MFC-библиотека C++ версии 14.23 для средств сборки версии 142 (x86 и x64)
    MFC-библиотека C++ версии 14.24 для Build Tools v142 (x86 и x64)
    После чего появилась возможность создавать MFC приложение, и делать всё, что описывается в этом уроке. Однако, запустить приложение не удалось. Вот скрин ошибки:
    https://drive.google.com/file/d/1UDWeIkXWyFnTYVh_SqcZpyAYdvAnuA43/view?usp=sharing

    Что делать? Я рассмотрела три опции:
    1) попробовать установить ещё одну компоненту MFC, без "библиотека" в названии, например. Я установила ещё MFC C++ версии 14.21 для средств сборки версии 142 (x86 и x64), но это не помогло
    2) При создании проекта выбрать «Использовать MFC в статической библиотеке», чтобы нужные библиотеки сами подключились. Я пересоздала проект с этой опцией. Тоже не помогло, ошибка компиляции осталась.
    3) Подключить MFC библиотеку к проекту, как просит компилятор. Но для этого нужно знать, что конкретно и где прописать. Этого я не знаю.

    Уважаемый автор Дмитрий Бушуев! По комментариям видно, что проблемы, как у меня, возникли и у других желающих написать эту игру. Пропишите прямо в тексте статьи, какую именно компоненту нужно доустановить для последних версий VS? В установщике огромный выбор компонент с MFC в названии, как выбрать нужную? И как потом избежать ошибки при запуске, о которой пишу я и комментатор чуть ниже?

    1. Фото аватара Дмитрий Бушуев:

      Только попробовал создать проект так, как это описывается в статье.
      Использовал последнюю на данный момент версию Visual Studio Community 2019 16.6.2. У меня установлены следующие компоненты:
      https://yadi.sk/i/IJvEKze1EZdeGw

      Проект собирается отлично, никаких проблем нет.

      1. Анастасия:

        Благодарю за ответ! Я установила те же компоненты, как в Вашем видео, теперь всё получилось, запустилось без ошибок.

  4. Tim:

    скажите, на х64 версии какие требуется еще установить компоненты к тем, которые вы ранее отправляли скриншотом? Ошибка с кодом MSB8041 — требуются библиотеки MFC.
    Сведения об установке моей:

    Основной редактор Visual Studio
    ASP.NET и разработка веб-приложений
    Разработка классических приложений .NET
    Разработка классических приложений на C++
    Отдельные компоненты
    Пакет SDK для TypeScript 3.8
    Поддержка языков JavaScript и TypeScript
    Пакет SDK для Windows 10 (10.0.18362.0)
    ATL C++ версии 14.20 для средств сборки версии 142 (x86 и x64)
    MFC C++ версии 14.20 для средств сборки версии

    1. Анастасия:

      У меня та же проблема. Я прошла все шаги создания по уроку, но запуск не произошёл, возникла ошибка. Вот скрин ошибки:
      https://drive.google.com/file/d/1UDWeIkXWyFnTYVh_SqcZpyAYdvAnuA43/view?usp=sharing

  5. Виталий:

    Странно, но почему-то у меня в VS 2017 отсутствует шаблон MFC… а имеющиеся позволяют включать эти классы только для консольных приложений

    1. Фото аватара Дмитрий Бушуев:

      Проверьте, чтобы в вашей Visual Studio был установлен необходимый компонент (ниже я вставил ссылку со скриншотом):
      https://imgur.com/a/KtTta9G

      1. Анастасия:

        У меня в установщике в списке отдельных компонент есть штук 60 с "MFC" в названии и ни одной — с Vusual C++ в названии или как на скриншоте.
        Я установила эти:
        MFC-библиотека C++ версии 14.23 для средств сборки версии 142 (x86 и x64)
        MFC-библиотека C++ версии 14.24 для Build Tools v142 (x86 и x64)

        1. Анастасия:

          вот мой скрин списка компонент:
          https://drive.google.com/file/d/1LO6-jkJdjy4z5RlWOjY2Jq14SYhTe12P/view?usp=sharing

  6. Елена:

    Спасибо! ❤️

    1. Фото аватара Юрий:

      Пожалуйста 🙂

  7. Sergey:

    Отлично. Спасибо.

    1. Фото аватара Юрий:

      Пожалуйста 🙂

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

Ваш E-mail не будет опубликован. Обязательные поля помечены *