Как сделать игру visual studio
Урок №1: Введение в создание игры «SameGame» на C++/MFC
Обновл. 28 Дек 2020 |
В этой серии обучающих уроков мы, используя библиотеку 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» :
На следующем шаге вы увидите окно с большим набором различных опций, влияющих на итоговый исходный код, который будет автоматически сгенерирован по завершению работы мастера настройки. На следующем скриншоте показано, какие параметры необходимо выбрать, чтобы получить то, что нам нужно:
Затем в следующих окнах оставляйте всё как есть, пока не доберетесь до окна:
Далее мы переходим на страницу «Дополнительные функции» :
Далее рассмотрим последнюю страницу мастера настройки MFC-приложений, на которой можно увидеть список созданных классов:
В результате будут автоматически сгенерированы 4 класса, которые станут основными классами в нашей игре.
Сейчас быстренько пройдемся по списку и поговорим, для чего используется каждый тип представления:
CEditView — это общее представление, которое состоит из простого текстового поля.
CFormView — позволяет разработчику вставлять в него другие основные элементы управления, т.е. поля редактирования, поля со списком, кнопки и т.д.
CHtmlEditView — имеет HTML-редактор, встроенный в представление.
CHtmlView — вставляет элемент управления — браузер Internet Explorer.
CListView — имеет область, похожую на окно Проводника со списками и значками.
CRichEditView — похож на редактор WordPad; позволяет не только вводить текст, но и форматировать его, изменять цвет и тому подобное.
CTreeView — вставляет элемент управления древовидной структурой.
Завершение работы мастера приложений MFC приведет к созданию и запуску приложения MFC. Поскольку мы еще не написали никакого кода, то увидим окно, в котором ничего нет, но все равно это полностью функционирующее приложение. Ниже приведен скриншот того, как должно выглядеть ваше базовое приложение (чтобы скомпилировать программу, нужно перейти в меню Visual Studio «Отладка» > «Запуск без отладки» ):
Пишем собственный игровой движок с помощью C++
С нуля создадим собственный игровой движок с помощью библиотеки SFML и C++, чтобы разобраться, как происходит создание ядра.
В этом проекте мы создадим собственный игровой движок на C++. Движок будет очень простым, но готовым к расширению возможностей. Конечная игра с использованием этого кода тоже крайне проста: наш персонаж сможет перемещаться влево и право, а из графики – только бэкграунд и фигурка персонажа.
Подготовка Visual Studio
Создадим новый проект в Visual Studio. Обратите внимание, что проект требует библиотеку SFML, поэтому если вы не настраивали окружение для нее, прочтите сначала небольшое руководство по настройке.
Теперь можно приступить к коду. Исходный код и дополнительные ресурсы будут доступны на этой странице.
Проектируем собственный игровой движок
Самое важное – запуск движка, который будет происходить в файле Main.cpp, но им мы займемся немного позже.
Класс персонажа
Bob – простой класс для представления фигурки персонажа, управляемой игроком. Код класса будет легко расширяться, а что самое главное – его несложно переписать под любой другой игровой объект, который вы захотите добавить. Для этого потребуется заменить текстуру и описать поведение нового объекта в методе update().
Займемся заголовками класса. Выберите правой кнопкой Header Files в Solution Explorer и нажмите Add | New Item. В окне Add New Item выберите Header File (.h), затем в поле Name введите Bob. Нажмите Add и добавьте код заголовка класса:
Здесь мы объявили объекты типа Texture и Sprite. Дальше мы свяжем эти объекты и любое действие на экране с объектом Sprite будет сопровождаться изображением Боба:
Кликните правой кнопкой, чтобы сохранить
Bob.cpp
Теперь приступим к описанию методов.
Выберите правой кнопкой мыши Source Files в Solution Explorer и откройте Add | New Item. В окне Add New Item кликните по C++ File (.cpp), а в поле Name укажите Bob.cpp. Теперь добавьте в файл код:
В конструкторе мы установили значение переменной m_Speed на 400. Это значит, что Боб пересечет экран шириной в 1920 пикселей за 5 секунд. Также мы загрузили файл Bob.png в Texture и связали его с объектом Sprite. В переменных m_Position.x и m_Position.y установлено начальное положение Боба.
Функция update обрабатывает два If. Первое If проверяет, нажата ли правая кнопка (m_RightPressed), а второе следит за левой (m_LeftPressed). В каждом If скорость (m_Speed) умножается на elapsedTime. Переменная elapsedTime рассчитывается в функции Start движка (класс Engine). Им мы и займемся далее.
Пишем класс Engine
Класс Engine будет контролировать все остальное.
Engine.h
Добавим заголовок. Откройте окно Add New Item (так же, как для класса Bob), выберите Header File (.h) и в поле Name введите Engine.h. Добавьте в файл следующий код:
Класс библиотеки SFML, RenderWIndow, используется для рендера всего, что есть на экране. Переменные Sprite и Texture нужны для создания фона. Также в заголовке мы создали экземпляр класса Bob.
Engine.cpp
В Engine.cpp мы опишем конструктор и функцию start. Создайте файл класса так же, как для Bob.cpp, и добавьте в него код:
Функция конструктора получает разрешение экрана и разворачивает игру на весь экран с помощью m_Window.create. В конструкторе же загружается Texture и связывается с объектом Sprite.
Пример фонового изображения
Скачайте пример изображения или используйте любое другое на свое усмотрение. Переименуйте файл в background.jpg и поместите в каталог Simple Game Engine/Simple Game Engine.
Игровой цикл
Следующие три функции будут описаны каждая в своем файле, но при этом они должны быть частью Engine.h. Поэтому в начале каждого файла укажем директиву #include «Engine.h», так что Visual Studio будет знать, что мы делаем.
Обрабатываем пользовательский ввод
Создайте файл Input.cpp и добавьте в него код:
Функция input обрабатывает нажатия клавиш через константу Keyboard::isKeyPressed, предоставляемую SFML. При нажатии Escape m_Window будет закрыто. Для клавиш A и D вызывается соответствующая функция движения.
Обновляем игровые объекты
Теперь опишем простую функцию update. Каждый игровой объект будет иметь собственную функцию update.
Создайте файл Update.cpp и добавьте в него код:
Поскольку у нас пока только один объект «Боб», мы вызываем только функцию m_Bob.update.
Отрисовка сцены
Это последняя функция класса Engine. Создайте файл Draw.cpp и добавьте в него код:
Экран очищается методом clear, затем отрисовывается фон. Первым делом должен быть отрисован фон, чтобы потом поверх него можно было отрисовать Боба.
Запускаем движок в main()
Теперь вернемся к нашему Main.cpp. Время добавить в него немного кода:
Несколько слов в конце
Наш собственный игровой движок получился очень простым: он умеет только двигать главный объект и закрывать программу. Он не умеет обрабатывать столкновения, работать с интерфейсом и еще много чего. Однако он отлично описывает то, как строится ядро игрового проекта с нуля. К тому же, как мы уже выяснили, класс Bob расширяется и адаптируется под другие объекты, так что дайте волю фантазии и попробуйте поэкспериментировать с окружением.
Пошаговое руководство. создание традиционного классического приложения Windows (C++) Walkthrough: Create a traditional Windows Desktop application (C++)
В этом пошаговом руководстве показано, как создать традиционное классическое приложение Windows в Visual Studio. This walkthrough shows how to create a traditional Windows desktop application in Visual Studio. В примере приложения, которое вы создадите, будет использоваться API Windows для вывода «Hello, Windows Desktop!» The example application you’ll create uses the Windows API to display «Hello, Windows desktop!» «Hello, World!». in a window. Код, созданный в этом пошаговом руководстве, можно использовать в качестве шаблона для создания других классических приложений Windows. You can use the code that you develop in this walkthrough as a pattern to create other Windows desktop applications.
Для краткости в тексте пропущены некоторые операторы кода. For the sake of brevity, some code statements are omitted in the text. В разделе Построение кода в конце документа показан полный код. The Build the code section at the end of this document shows the complete code.
Предварительные требования Prerequisites
Компьютер под управлением Microsoft Windows 7 или более поздних версий. A computer that runs Microsoft Windows 7 or later versions. Для обеспечения оптимальной среды разработки рекомендуется использовать Windows 10. We recommend Windows 10 for the best development experience.
 
Базовые значения об использовании интегрированной среды разработки Visual Studio. An understanding of the basics of using the Visual Studio IDE. Если вы уже использовали классические приложения для Windows, вы, вероятно, справитесь. If you’ve used Windows desktop apps before, you can probably keep up. Общие сведения см. в обзоре возможностей интегрированной среды разработки Visual Studio. For an introduction, see Visual Studio IDE feature tour.
Основные навыки владения языком C++. An understanding of enough of the fundamentals of the C++ language to follow along. Не волнуйтесь, мы не будем делать ничего сложного. Don’t worry, we don’t do anything too complicated.
Создание проекта для настольных систем Windows Create a Windows desktop project
Создание проекта для классических приложений Windows в Visual Studio 2019 To create a Windows desktop project in Visual Studio 2019
Теперь проект создан и исходный файл открыт в редакторе. Your project is now created and your source file is opened in the editor. Чтобы продолжить, перейдите к созданию кода. To continue, skip ahead to Create the code.
Создание проекта для классических приложений Windows в Visual Studio 2017 To create a Windows desktop project in Visual Studio 2017
Visual C плюсом > Windows Desktop, выбранный параметр «Мастер настольных систем Windows» и Десктопапп, введенное в текстовое поле «имя».» title=»Назовите проект Десктопапп.» data-linktype=»relative-path»> Visual C plus plus > Windows Desktop selected, the Windows Desktop Wizard option highlighted, and DesktopApp typed in the Name text box.» title=»Name the DesktopApp project» data-linktype=»relative-path»>
Теперь проект создан и исходный файл открыт в редакторе. Your project is now created and your source file is opened in the editor. Чтобы продолжить, перейдите к созданию кода. To continue, skip ahead to Create the code.
Создание проекта для классических приложений Windows в Visual Studio 2015 To create a Windows desktop project in Visual Studio 2015
> Visual C плюсом > Win32, выделенным параметром проекта Win32 и Десктопапп, введенным в текстовом поле «имя».» title=»Назовите проект Десктопапп.» data-linktype=»relative-path»> Templates > Visual C plus plus > Win32 selected, the Win32 Project option highlighted, and DesktopApp typed in the Name text box.» title=»Name the DesktopApp project» data-linktype=»relative-path»>
Теперь проект создан и исходный файл открыт в редакторе. Your project is now created and your source file is opened in the editor.
Создание кода Create the code
Далее вы узнаете, как создать код для классического приложения Windows в Visual Studio. Next, you’ll learn how to create the code for a Windows desktop application in Visual Studio.
Запуск классического приложения Windows To start a Windows desktop application
Точно так же, как каждое приложение C и приложение C++ должно иметь main функцию в качестве отправной точки, каждое классическое приложение Windows должно иметь WinMain функцию. Just as every C application and C++ application must have a main function as its starting point, every Windows desktop application must have a WinMain function. WinMain имеет следующий синтаксис: WinMain has the following syntax.
Сведения о параметрах и возвращаемом значении этой функции см. в разделе WinMain Entry Point. For information about the parameters and return value of this function, see WinMain entry point.
Дополнительные сведения см. в разделе Процедуры окна. For more information, see Window Procedures.
Добавление функциональных возможностей в функцию WinMain To add functionality to the WinMain function
Дополнительные сведения о полях приведенной выше структуры см. в разделе вндклассекс. For information about the fields of the structure above, see WNDCLASSEX.
Зарегистрируйте в WNDCLASSEX Windows, чтобы он знал о вашем окне и способах отправки в него сообщений. Register the WNDCLASSEX with Windows so that it knows about your window and how to send messages to it. Воспользуйтесь функцией RegisterClassEx и передайте структуру класса окна в качестве аргумента. Use the RegisterClassEx function and pass the window class structure as an argument. Этот _T макрос используется, так как мы используем TCHAR тип. The _T macro is used because we use the TCHAR type.
На этом этапе окно было создано, но нам по-прежнему нужно сообщить Windows, что он стал видимым. At this point, the window has been created, but we still need to tell Windows to make it visible. Вот что делает этот код: That’s what this code does:
Для обработки сообщений сначала нужно добавить цикл обработки сообщений для прослушивания сообщений, отправляемых Windows. To handle the messages, we first add a message loop to listen for the messages that Windows sends. Когда приложение получает сообщение, этот цикл отправляет его в вашу WndProc функцию для обработки. When the application receives a message, this loop dispatches it to your WndProc function to be handled. Цикл обработки сообщений напоминает приведенный ниже код. The message loop resembles the following code.
Дополнительные сведения о структурах и функциях, используемых в цикле обработки сообщений, см. в разделах, посвященных MSG, GetMessage, TranslateMessageи DispatchMessage. For more information about the structures and functions in the message loop, see MSG, GetMessage, TranslateMessage, and DispatchMessage.
На этом этапе функция WinMain должна напоминать приведенный ниже код. At this point, the WinMain function should resemble the following code.
Добавление функциональных возможностей в функцию WndProc To add functionality to the WndProc function
Одно важное сообщение для обработчика — WM_PAINT сообщение. One important message to handle is the WM_PAINT message. Приложение получает сообщение, WM_PAINT когда часть его отображаемого окна необходимо обновить. The application receives the WM_PAINT message when part of its displayed window must be updated. Это событие может возникать, когда пользователь перемещает окно перед окном, а затем снова перемещает его. The event can occur when a user moves a window in front of your window, then moves it away again. Приложение не знает, когда происходят эти события. Your application doesn’t know when these events occur. Только Windows знает, поэтому она уведомляет ваше приложение с WM_PAINT сообщением. Only Windows knows, so it notifies your app with a WM_PAINT message. При первом отображении окна его все должно быть обновлено. When the window is first displayed, all of it must be updated.
Для обработки сообщения WM_PAINT сначала вызовите метод BeginPaint, далее обработайте логику расположения текста, кнопок и других элементов управления в окне, а затем вызовите метод EndPaint. To handle a WM_PAINT message, first call BeginPaint, then handle all the logic to lay out the text, buttons, and other controls in the window, and then call EndPaint. Для приложения логика между начальным вызовом и завершающим вызовом отображает строку «Hello, Windows Desktop!» For the application, the logic between the beginning call and the ending call displays the string «Hello, Windows desktop!» «Hello, World!». in the window. В следующем коде функция Text используется для вывода строки. In the following code, the TextOut function is used to display the string.
HDC в коде — это обработчик контекста устройства, который используется для рисования в клиентской области окна. HDC in the code is a handle to a device context, which is used to draw in the window’s client area. Используйте BeginPaint функции и EndPaint для подготовки и завершения рисования в клиентской области. Use the BeginPaint and EndPaint functions to prepare for and complete the drawing in the client area. BeginPaint Возвращает маркер контекста устройства отображения, используемый для рисования в клиентской области. EndPaint завершает запрос на рисование и освобождает контекст устройства. BeginPaint returns a handle to the display device context used for drawing in the client area; EndPaint ends the paint request and releases the device context.
Сборка кода Build the code
Как обещано, вот полный код для рабочего приложения. As promised, here’s the complete code for the working application.
Сборка примера To build this example
Удалите код, введенный в хелловиндовсдесктоп. cpp в редакторе. Delete any code you’ve entered in HelloWindowsDesktop.cpp in the editor. Скопируйте этот пример кода и вставьте его в хелловиндовсдесктоп. cpp : Copy this example code and then paste it into HelloWindowsDesktop.cpp :
Поздравляем! Congratulations! Вы выполнили это пошаговое руководство и создали традиционное классическое приложение для Windows. You’ve completed this walkthrough and built a traditional Windows desktop application.