Руководство к программе Construct 2 начального уровня

Favourite 1209 favourites
Tutorial written by AshleyOriginally published on 26th, June 2011 - 50 revisions

Translation Team:

12 total revisions

Construct 2 – отличный выбор! Начнем создание Вашей первой HTML5 игры. Мы создадим демо-игру «Ghost Shooter». Попробуйте поиграть немного тут, чтобы понять нашу цель: игрок смотрит по направлению мыши, двигается с помощью клавиш стрелок и стреляет в монстров нажатием мышки. Вы узнаете все составляющие создания простой игры – от слоев до системы событий!

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

Альтернативные руководства

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

Также существует руководство, созданное Kyatric'ом - Как создать "Астероид" клон меньше чем за 100 событий . Оно также содержит много необходимого, но уже для более продвинутого уровня.

Установка Construct 2

Если вы еще не установили программу, скачайте последнюю версию здесь. Construct 2 работает только под Windows, но игры, которые вы создадите, пойдут на любой системе - Mac, Linux или iPad. Construct 2 также можно установить на (аккаунтах ограниченной учётной записи?). Программа портативна, к примеру, Вы можете установить ее на флешке и взять с собой.

Начинаем создание игры

Теперь, когда вы установили программу Construct 2, запустите ее. Кликните кнопку File и нажмите на New. The File menu 'New' button.
В диалоговом окне New Project ничего изменять не надо. Просто кликните Create project. Construct 2 хранит проект в .capx файле. Сейчас перед Вами пустой layout (план) – окно, где вы создаете и располагаете объекты. Layout воспринимайте как уровень игры или экран меню. В других инструментах он мог называться room, scene или frame.

Расположение объектов

Тайловый фон

Первое, что мы создадим - повторяющиеся тайлы на заднем фоне. Объект Tiled Background может создать такой фон. В первую очередь возьмите текстуру фона – кликните по ней правой кнопкой мыши и сохраните на своем компьютере:

The Tiled Background texture
Теперь два раза кликните по плану, чтобы вставить новый объект. (Позже, если он полон, вы также можете кликнуть правой кнопкой мыши и выбрать Insert new object (Вставить новый объект). Когда появится диалоговое окно Insert new object, кликните два раза на объекте Tiled Background в Insert new object, чтобы вставить его.

The Insert New Object dialog.


Появится перекрестие, указывающие, куда расположить объект. Кликните примерно посередине плана – откроется texture editor (редактор текстуры), который добавит текстуру тайлу. Давайте вставим изображение, которое вы сохрани ранее. Кликните на значок папки, чтобы загрузить текстуру с диска, найдите, куда вы скачали файл и выберите его.

Load texture from file
Закройте редактор текстуры, кликнув Х в верхнем правом углу. Если отобразится вопрос - убедитесь, что Вы сохранили объект! Теперь Вы должны увидеть свой объект фона на плане. Давайте изменим размер, чтобы покрыть весь план. Убедитесь, что объект выбран, потом Properties Bar (Панель свойств) слева должна показать все настройки для объекта, включая его размер и расположение. Установите расположение на 0, 0 (верхняя левая область плана), а размер на 1280, 1024 (размер плана).

Tiled Background properties
Давайте рассмотрим нашу работу. Удерживайте Ctrl и крутите колесо мыши вниз, чтобы уменьшить масштаб либо несколько раз кликните view - zoom out. Вы также можете удерживать пробел или среднюю кнопку мыши, для перемещения по плану. Красиво, да? Ваш фон должен покрывать весь план:

The inserted tiled background.


Нажмите Ctr+O или кликните view - zoom до 100% , чтобы вернуться к виду 1:1.

(Если вы такой же нетерпеливый, как я, кликните по маленькой иконке 'run' в окне строка заголовка, и браузер покажет ваш экран! Отлично!)

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

4
Kurz 9,091 rep

Я надеюсь, это не окончательный вариант перевода. Так как ошибок тут довольно много. Google translate не всё может перевести

Thursday, May 02, 2013 at 8:57:15 AM
7
emeraldmask 2,683 rep

Определенно это переводилось без участия google translate. На счет ошибок, милости прошу в скромный круг переводчиков на русский. Ваша помощь как в переводе, так и в корректировании будет неоценима.

Sunday, May 05, 2013 at 6:32:27 AM
4
Kurz 9,091 rep

Готово! Прошёлся я основательно по переводу.
emeraldmask, хорошая работа!

Sunday, May 05, 2013 at 2:22:21 PM
1
emeraldmask 2,683 rep

Огромное спасибо!
Как же прекрасно что на сайте стали появляться переводы на русский язык, это очень поможет в изучении программы, мне в частности.

Saturday, May 11, 2013 at 10:05:25 AM
4
Siberian 8,347 rep

Это прекрасно! Что появился перевод!

Tuesday, June 04, 2013 at 9:56:30 AM
0
shupa 381 rep

А нет где ссылки "скачать одним файлом"? Жуть как неудобно обращаться к онлайн справкам.

Sunday, March 16, 2014 at 4:09:38 PM
0
LazyGod 728 rep

Перевод оставляет желать лучшего (но все же лучше чем ничего) Очень рад, что появляется все больше уроков на "Великом и Могучем"!

Monday, March 17, 2014 at 11:45:27 AM
3
JustTheJaZZ 403 rep

Мля. Не нравиться, жмите английский. Тут вариаций много. Переводчику респект. Остальные - тролли-недомерки походу. Будьте благодарны, и не вырастут на вас перья петушиные.

Sunday, May 18, 2014 at 8:23:22 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.