Construct 2: Лекция первая

Published
Published from Fa_losophy » Construct 2: Лекция первая

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

План занятия

  1. Знакомство со средой Construct2
  2. Подготовка к работе
  3. Первые шаги. Тайлмаппинг
» Часть 1

Знакомство со средой

Всем доброго времени суток. Выбросите к черту ваши тетради и ручки. Скачивайте отсюда наш основной инструмент - Scirra Construct 2. На момент написания урока актуальная и стабильная версия, используемая при обучении - r178. В течение нашего первого и очень надеюсь - не единственного курса по созданию игр это будет нашим основным многофункциональным инструментом. Для удобства повестования я буду сокращать название движка до С2.
Установка программы не вызовет никаких трудностей у опытных пользователей ПК, поэтому описывать этот процесс я не буду. Как только вы установили программу, организуйте у себя на диске рабочее пространство под проекты - как правило, в процессе разработки появляется куча временных и не очень файлов, которые эргономичнее хранить в одном месте.
Запускайте программу. Перед вами откроется вот такой вид.
Тут ничего не доступно, поэтому давайте начнем уже наконец-то. Создаем проект - для этого можно:
  1. Нажать Ctrl+N
  2. Попсово зайти в FILE - Create New Project
Откроется окно:
Для любознательных здесь можно сделать перерыв, так как в этом окне - кладезь всякой интересной демонстрационной всячины и различных заготовок, показывающих возможности движка. Но продолжим. Нас интересует самый первый пункт - он выделен синим - New empty project. Нажав на кнопку Open мы создадим совершенно пустой проект, что собственно и написано было в дескрипшене. В результате мы увидим вот это:
Вот теперь давайте пробежимся по всему что мы видим, чтобы не боятся этого. Начнем сверху - Панель инструментов
Во вкладке HOME расположены достаточно простые инструменты управления процессом - первые три секции в принципе не юзабельны так как для представленных там операций использются общеизвестные хоткеи. Четвертая секция - Configurations - не используемая нами возможность выбора настроек программы. Пятая вкладка - Online - набор ссылок на различного рода информацию по движку.
Шестая вкладка - Preview - это уже более юзабельный раздел. Тут расположена кнопка превью сцены (Run layout), дебаг сцены (Debug layout) и экспорт проекта. Обратите внимание - в левом верхнем углу есть маленьгкие аналоги представленных функций.
Седьмая вкладка с единственной функцией - открывает стартовую страницу в редакторе сцены.
Кстати о редакторе сцены.
Это белое поле и есть редактор сцены - тут то мы и будем в дальнейшем расставлять игровые объекты и всячески визуализировать нашу игру. Ключевой момент в редакторе сцены - это вкладки вверху. Сейчас там мы видим надпись Layout 1 и Event Sheet 1 - соответсвенно Сцена 1 и Листинг событий 1. В первом мы "рисуем", во второй - создаем игровую механику.
Уровни строятся по принципу "Одна сцена - Один листинг", но при этом в листинг может быть подключено сколько угодно других листингов - об этом мы поговорим позже. С редакотором сцены на этом можно закончить.
Едем дальше - смотрим направо. Здесь у нас два блока, и первый из них - Инспектор проекта (Это не самое удачное название, но суть оно не меняет).
Инспектор проекта - это иерархическая структура вашего проекта, браузер объектов если хотите. Сразу обратим внимание на две закладки - Projects и Layers. В первой закладке отображаются все открытые в данный момент проекты. Во второй - отображаются все слои выбранной в данный момент сцены. Чуть позже я покажу логику работы с этим, там ничего сложного. Сейчас у открыт Новый проект в браузере проектов, и там несколько папок: Layouts (сцены), Event sheets (Листинги событий), Objects types (объекты игры), Families (семьи), Sound (звуки), Music (музыка), Files (подключаемые файлы игры). Пройдемся кратко по списку.
Layouts (сцены)
Здесь хранятся все сцены проекта. Создать новую сцену можно двумя способами - продублировать существующую через нажатие на ней ПКМ, или же создав новую через нажатие на папке со сценами ПКМ. При создании новой сцены С2 спросит вас о необходимости создать под сцену свой листинг - можно создавать, но иногда в этом нет необходимости. Для удобства вы можете создать подпапки - к примеру если игра подразумевает несколько различных групп сцен. Открыть сцену можно через двойное нажатие на ней ЛКМ, при этом открытие каждой новой сцены не закроет предыдущую в редакторе сцен.
Event sheets (Листинги событий)
Здесь отображаются все листинги с событиями игры. Создать новый листинг можно только через нажатие ПКМ на папке листингов, дублировать листинг как сцену нельзя. Для удобства можно опять же создавать подпапки. Открыть листинг можно двойным нажатием ЛКМ на ней, и как в случае со сценами - новый листинг не закроет предыдущий открытый.
Objects types (объекты игры)
В папке хранятся все объекты игры, или если переводить дословно - типы объектов. По опыту скажу что здесь создание подпапок - скорее необходимость, чем просто доступная возможность. Как правило в процессе разработки игры появляется большое количество объектов и лучше хранить их упорядоченно по смыслу, чем просто по алфавиту. Создать новый объект проще через редактор сцены - там это делается двойным кликом на сцене, но и в браузере проектов это тоже можно сделать - через нажатие ПКМ на папке объектов.
Families(семьи)
Здесь хранятся так называемые "семьи" объектов. Добавить новую семью можно через ПКМ - Add new family. Редактировать - тоже через ПКМ - Edit. Семья в С2 - это группа объектов, для которых можно назначить какую либо одну общую характеристику, например поведение или эффект. Это очеь удобно хотя бы потому, что позволяет экономить события в листинге. К примеру нам нужно сделать так, что при попадании ракеты во все объекты на карте происходит взрыв. Вместо того, чтобы прописывать события столкновения ракеты с каждым объектом на карте (а их порой может быть не один десяток), мы просто собираем все эти объекты в Семью и делаем одно событие столкновение ракеты с семьей. Кроме того - один объект может находиться в нескольких семьях одновременно, и при этом к нему можно будет обратиться в действиях как к одному самостоятельному объекту.
Sounds/Music (Звуки/Музыка)
Тут все просто - в этих папках хранятся звуки и музыка игры. Добавляются они через ПКМ - Import Sounds, Import Music. Рекомендуется использовать для звуков формат ogg и mp3 для музыки. При импорте С2 сам производит конвертацию в несколько музыкальных форматов, но лучше удалять все неиспользуемые и оставлять только mp3 и ogg. Это значительно снизит вес игры, что немаловажно для игр, разрабатываемых под браузер и мобильные платформы.
Files (подгружаемые файлы)
Эта папка хранит все подгружаемые файлы проекта, не относящиеся напрямую к игре. Сейчас там можно увидеть папку с иконками – при необходимости их можно все заменить на свои с сохранением размеров.
Теперь переключим закладку с Projects на Layers - и попадем в инспектор слоёв выбранной сцены. Выбранная сцена – это сцена, выделенная двойным нажатием по ней в редакторе сцены, так как нажатие на сцену в инспекторе не делает её активной, а только выделяет её название. Здесь стоит сказать об очевидной для многих вещи – С2 является движком для создания двумерных игр, которые строятся по принципу сэндвича – игровые объекты располагаются на отдельных слоях в зависимости от функционального назначения. К примеру самый нижний слой как правило – это бэкграунд, а самый верхний – интерфейс.
Сейчас у нас есть один слой – Layer 0. Если нажать на жирный плюс – то будет создан новый слой, он будет располагаться в списке НАД существующим. Чтобы поменять их местами используются жирные стрелки. «Глаз» сейчас находится в нажатом состоянии – значит слой виден. Еще одно нажатие на глаз (или на галочку возле названия слоя) – спрячет слой. Карандаш позволяет переименовать слой. Мусорный бак соответственно удалит слой. Ничего сложно и страшного, попробуйте. А теперь нажмите на слое ПКМ.
Еще один важный момент в работе со слоями. У каждого слоя есть порядковый номер, и считаются слои, начиная от 0. Это не опасно и никак не вредит работе, но это стоит иметь ввиду, так как в дальнейшем мы будем создавать объекты на слоях и будет не очень хорошо, если у нас к примеру ракета окажется на слое с параллаксом. 0_0
Теперь ниже – у нас там располагается Инспектор объектов и Карта тайлов.
С инспектором объектов вопросов особых трудностей не возникнет даже у новичков – это просто браузер объектов сцены. Через ПКМ мы можем сделать известные уже нам операции, на некоторых из которых мы подробнее остановимся позже. А вот Карта тайлов это уже кое-что серьезное, и на ней мы подробно остановимся в заключительной части нашего урока.
Едем дальше – переводим глаза в другую сторону и видим блок Properties - Настроек. Мыслим глобально – это панель настроек вообще всего, что можно настроить в С2. А настроить в С2 можно всё, что можно выбрать при помощи мыши – спрайт, слой, сцену, проект.
Мы не будем сейчас останавливаться на каждом пункте настроек ввиду нецелесообразности. Большинство пунктов понятно всем, кто изучал в первых классах английский, остальные – мы со всеми с ними столкнемся в процессе обучения и разберем. Сейчас незачем забивать голову лишней информацией. Потому что хочется делать уже игры, а не карпеть над скучными основами.
Сделаем простой финт ушами и переключимся с Редактора сцена на Редактор Событий. Это наш "подвал" игры - здесь мы будем по крупицам выстраивать механику всех взаимодействий.
Сейчас у нас тут пусто и дескрипшн рекомендует нажать ПКМ для начала работы с листингом. Важный но очевидный нюанс - действия в С2 выполняются каждый тик последовательно, начиная сверху и дальше вниз по листингу, поэтому сначала уничтожать объект, а потом на его месте ставить другой не получится. Еще один важный момент - тик - минимальная единица времени в С2, примерно равная 0,016 секунде. С такой скоростью в идеале будет выполняться листинг событий игры. Это важный момент, касающийся вопросов оптимизации игры, которые мы будем постепенно рассматривать в дальнейшем, и возможно - посвятим какой-то урок.
Итак мы в редакторе событий. Руководствуясь советами текста на экране, жмем ПКМ и видим меню, как на скрине. Идем по пунктам:
Add event
Создает новое событие, за которым последует действие.
Add comment
Создает над выделенным событием комментарий - идеально в качестве разграничителя действий и напоминаний.
Add group
Создает группу, в которую потом можно занести события. Аналог папки для файлов. При этом группы можно включать и отключать в процессе игры, что позволяет оптимизировать нагрузку на процессор (актуально для мобильных платформ)
Add global variable
Создает глобальную переменную. Такая переменная хранит информацию "через всю игру" - т.е. обратиться к ней можно из любого листинга любой сцены.
Include event sheet
Подключает уже созданный листинг событий. Незаменимая вещь, позволяющая в разы ускорить работу приложения ввиду отстутвия необходимости дублировать действия для каджого уровня. К примеру можно создать листинг отвечающий за генерацию уровня, листинг с движениями персонажа, и листинг с НПС, и потом подключать их на каждом уровне. А в листингах уровня выстраивать локальные механики.
Важно понимать, что действия в листинге имеют иерархическую структуру, и от того, как события будут расположены на листинге, так они в результате и будут считаны в игре, поэтому нужно с самого начала привыкать внимательно следить за построением иерархии листинга.
» Часть 2.

Подготовка к работе


Всё. Вводная часть закончилась. Давайте уже делать игры и развивать отечественный геймдев. Для начала подготовим рабочее пространство. А готовить мы его будем под top-down shooter на тему танчиков. За наш курс мы реализуем механику игры, сделаем врагов, обозначим игровую цель и сделаем пару пикапов. Это будет программа минимум.
Первым делом вернемся с Редактора Событий в Редактор Сцен и незатейливо провернем колесико мышки удерживая CTRL, чтобы увидеть наше белое полотно полностью. Чтобы перемещаться по полотну - зажимайте колесико мыши и двигайте.
Давайте увеличим наше полотно. Для этого идем на понель Свойств (помним, она слева, Properties) и, если у нас выбрана наша Сцена (для удобства её можно выбирать кликнув на белом полотне), то видим такое
Нас интересует значение Layout size. Это непосредственно размер сцены в пикселях.
Давайте сделаем наше поле 2000х2000. Для удобство ввода, можно нажать на плюсик рядом со значением и ввести отдельно размеры по ширине и высоте. После ввода жмем ENTER - и получаем результат. Теперь на для фантазии доступно больше места. Здорово. Теперь, я уверен, многим в глаза бросился пунктирный прямоугольник в левом верхнем углу нашего полотна. Это не что иное, как периметр нашего окна, в котором будет отображаться игра. Давайте его тоже поменяем.
Для этого идем в Браузер Проектов (помним, справа, Верхний блок, вкладка Projects) и жмем на самое верхнее название - **New project*** - таким образом мы выберем наш проект весь и получим доступ к его настройкам в целом как программы. Возвращаемся на панель свойств.
Я намеренно опускаю скриншоты своих перемещений по интерфейсу, чтобы вы смогли сами поискать и соориентироваться в нём.
Перед нами - свойства нашего проекта.
Совладав с разбежавшимися глазами и страстным желанием сразу заполнить всю авторскую информацию о вашей игре, находим пункт Window Size и ставим там значения 640 и 480. Жмем Enter и видим что наш пунктир сдвинулся. Отлично. Давайте пока мы здесь, выберем способ проверки проекта. Опустим глаза чуть ниже и найдем пункт Preview Browser. Жмем на выпадающий список и выбираем:
default - браузер системы по дефолту.
Chrome - Safari - известные браузеры на вкус и цвет
Node-Webkit - самостоятельное ехе-приложение в виде оболчки браузера на основе хрома.
Custom - какой-то сторонний браузер, указанный в настройках С2 (Меню File - Preferences).
Большой разницы в выборе нет - так как компиляция происходит в любом случае на HTML5 и запускается под любой браузерной основой. Разве что дебажить мне лично удобнее через браузер. В общем - делаем свой выбор.
Давайте сделаем одну оптимизирующую вещь - "округление пикселей". Это позволит снизить нагрузку на движок при линейной отрисовке графики. Ищем пункт Pixel rounding и ставим там On.
Ликбез

Если вы вдруг надумаете делать пиксельную игру, в которой графика должна быть пиксельной, то такое округление делать не обязательно. Вместо этого нужно найти пункт Sampling и выставить его на Point. Тогда графика будет отрисовываться не линейно, а попиксельно, что даст необходимый визуальный эффект.
Чтобы закончить уже с площадкой - уберем белый фон. Чтобы не мешал. Потому что фоны мы можем всегда себе сделать сами благодаря слоям. Идем в панель со слоями (помним, она справа, во вкладке Layers, верхний блок). Выбираем наш единственный слой нажатием ЛКМ на нем. И снова метаем взгляд влево - к свойствам. У нас открылись свойства слоя - ищем Transparent и ставим ему значение Yes. Оп, и белое пропало. Чуть позже будет понятно зачем оно пропало.
» Часть 3.

Первые шаги. Тайлмаппинг

Теперь Важная вещь. Добавим первые объектыв игру. Заодно и разберемся наконец-то, что это такое в С2.
Идем в редактор Сцены. Дважды кликаем на том месте, где был белый фон. Открывается окно с объектами:
Я не совсем коректно называю это объектами, так как технически это Типы объектов, но это не критично. В данном случае верно и понятно будет и так и так. Добавим двойным кликом типы Mouse, Keyboard. Последним добавляем Tilemap. Это не принципиально, просто там будут всплывающие окна, до которых мы доберемся через пару абзацев. Пока что ответьте в первом появившемся окне "Use recommended settings" а второе окно просто закройте как обычно.
Добавлять можно по одному типу за раз, потому не пугайтесь, что менеджер объектов каждый раз закрывается после двойного клика. Чтобы избежать путаницы в дальнейшем, старайтесь давать имена объектам сразу! В нашем случае мы дадим имя только Объекту TileMap:
Почему только ему? Потому что
а) Два других объекта отвечающие за клавиатуру и мышь больше не смогут быть добавлены
б) Бессмыслено
Впрочем именовать тайлмап в нашем случае тоже в какой-то степени бессмысленно, но я это сделал для демонстрации, где можно подписать объект. Ничего страшного, если это не было сделано в менеджере объектов. Если вы выберете объект на сцене или в Инспекторе проекта, то в его свойствах тоже можно будет указать имя. Или можно это сделать прямо в Инспекторе проектов.
Кстати заглянем туда и убедимся, что у нас там появилось три объекта: Mouse, Keyboard и Gamemap (он же TileMap).
Немного про типы объектов

Объекты в С2 - это функциональные элементы, каждый из которых содержит свой набор действий и событий. Некоторые из них являются "техническими", и потому нельзя например, добавить больше одного типа клавиатуры или мыши, так как мы уже имеем доступ ко всем необходимым нам событиям инструментов ввода. Однако карта тайлов например, может быть продублирована, так как на разных сценах мы можем использовать разные тайлы.
Жмем два раза быстро на наш TileMap. Нам открывается встроеный графический редактор С2 - мы его уже успели заметить, когда только добавили тайлмап в проект. Я не буду расписывать все прелести этого редактора, потому что все знают что такое Пэйнт и что в нем можно делать. Скажу, что редактор вполне пригоден для работы и используется личной мной к примеру для отрисовки какой-никакой пиксельной графики.
Не будем отвлекаться - перед нами карта тайлов.
Эти милейшие стандартные тайлы нам ни к чему, мы воспользуемся скачанными с просторов сети качественными и заранее подготовленными спрайтами (архив прилагается.) В оригинале используемые мной тайлы были гораздо больших размеров, и я их намеренно уменьшил. Качество при этом пострадало незначительно, а вот простора для творчества стало больше. И так, открываем нашу с вами крутую заготовку тайлов в редакторе С2. Жмем открыть
И выбираем нашу карту тайлов из приложенного архива Tilemap1.png, а затем открываем. Должно получиться вот так.
Закрываем редактор. Только что мы загрузили карту тайлов. Зоркий глаз мог обратить внимание, что размер её составляет каноничные 512х512 пикселей. Это Важно. Старайтесь всегда делать значения размеров спрайтов и любых других графических объектов каноничными: 8х8, 16х16, 32х32, 64х64, 128х128, 256х256, 512х512. Это заметно облегчит отрисовку большого кол-ва графики движку, так как спрайт 9х9 уже будет считаться за спрайт размером 16х16, оставшиеся пустыми пиксели будут требовать лишних расчетов при прорисовке. Один такой косяк конечно погоды не сделает, но на мобильных устройствах средней мощности 60+ спрайтов с неправильными размерами заметно снизят FPS.
И теперь момент творчества. Чистого творчества.
Идем в Менеджер Карт Тайлов (лютое наименование, я для ясности даже скрин приложил, чтобы вы не потерялись.)
Обращаем внимание, что
  1. В Менеджере проектов выбран сам TileMap
  2. Так как он выбран на панели свойств мы видим его свойства
  3. Так как он выбран, мы видем его в менджере Карт тайлов (еще раз - это нижнияя правая панель, вкладка Tilemaps)
  4. В редакторе сцен этот объект занимает всю площадь.
Если у Вас не так, то все очень хорошо. Значит у Вас есть возможность уже поискать, что вы сделали неправильно и исправить это. Если же все так, то продолжим.
Сейчас наша карта тайлов все еще немного большевата - у квадрата тайла сторона 64 пикселя, а инструмент рисования тайлов выделяет только чевтерть этого квадрата. Это я вот о чем.
Нам нужно, чтобы черная рамка выделяла тайл нужного размера. Поэтому идем в свойства Тайлмап (все та же панель слева) и ищем пункты Tile width и Tile height. Ставим и там и там 64. Смотрим что у нас получилось в менеджере Карты Тайлов рамка должна выделять один квадрат тайла.
Если так - то значит мы говорим с вами на одном языке. Теперь давайте сложим нашу карту! Сложим - потому что мы нарисуем её "потайлово" - аля паззл. Выделяем нужный тайл и в редакторе сцены ставим его. И собираем целиком что-нибудь, напоминающее остров. Вот что вышло у меня.
Если у вас результат напоминает что то вроде этого - ура. Если нет - повезло, еще раз перечитаете написанное, поищите ошибку, наткнетесь на что-нибудь новое, изучите сами движок.
Сохранимся. Идем в меню FILE - Save project as single File.
На сегодня урок окончен, и как положено - в конце урока Д/З.
  1. Переименуйте Layer 0 в Ground
  2. Создайте новый слой и назовите его Player Tank
  3. Добавьте в проект 2 объекта типа Sprite - Спрайт. Назовите их TankDown и TankUp.
  4. Переименуйте Сцену в Game Scene вместо Layout.
  5. Изучите настройки программы и установите себе автосохранение проекта (FILE - Preferences).
Всем спасибо, пара окончена, все свободны. Незабываем сохраняться.
Скачать АРХИВ


Views: 18 202

» Лучшие комментарии


alexprey #1 - 7 years ago 5
Голосов: +5 / -0
Машину водить тебе не дано :D
Fakov #3 - 7 years ago 4
Голосов: +4 / -0
alexprey, поправленоу)
совпадение ли, но сегодня я вот как раз узнал когда приходить в гаи на экзамен =D.
alexprey #5 - 7 years ago 1
Голосов: +1 / -0
совпадение ли, но сегодня я вот как раз узнал когда приходить в гаи на экзамен =D.
:D
В целом круто-та)
Mihahail #6 - 7 years ago (изм. ) 4
Голосов: +4 / -0
Блин, какой объем работы - текст, скриншоты.. Моё почтение, яб поленился.
А тутор найс, думаю даже месная аудитория всё поймёт.
DARGO #8 - 7 years ago 1
Голосов: +1 / -0
Fakov, все отлично, только архив не скачивается)
404 Not Found
Fakov #9 - 7 years ago 1
Голосов: +1 / -0
DARGO, ойой, ща поправлю
Fakov, поправил. хз почему не скачивало =\
DARGO #10 - 7 years ago (изм. ) 2
Голосов: +2 / -0
вот что-то получается (танчик ездит за счет стрелок) но как увеличить область на экране?
Прикрепленные файлы
alexprey #11 - 7 years ago 0
Голосов: +0 / -0
DARGO, тайлы немного криво приложены, ребят при движении)
DARGO #12 - 7 years ago 1
Голосов: +1 / -0
alexprey:
DARGO, тайлы немного криво приложены, ребят при движении)
ну если камеру приблизить то перестает)
alexprey #13 - 7 years ago -1
Голосов: +0 / -1
DARGO, не проблема со стыками тайлов, присмотрись
Fakov #14 - 7 years ago 1
Голосов: +1 / -0
DARGO, в действиях нужно изменить масштабирование сцены.
alexprey:
тайлы немного криво приложены, ребят при движении)
я не смог понять фразу(
DARGO #15 - 7 years ago (изм. ) 1
Голосов: +1 / -0
Fakov, мне не размер сцены сменить, а размер окна игры на экране компа, окно очень маленькое, а Window Size я так понял меняет в окне игры площадь захватываемой в окно карты, ну можно сказать отдаление камеры, а мне нужно размер окна увеличить)
а хотелось бы чтобы без черного окна было, или это будет садить фпс?
Прикрепленные файлы
Fakov #16 - 7 years ago 1
Голосов: +1 / -0
DARGO, в параметрах всего проекта (где выставляли Window Size) ищи строчку Fullscreen in browser и ставь там Scale inner
DARGO #17 - 7 years ago 1
Голосов: +1 / -0
Fakov, спс строчку нашел все варианты проверил, Crop даже лучше)