Важная информация
RSS лента

Termojad

Как делали игру про мистера Винтика

Рейтинг: 4.33. Голосов: 12.
Как-то Злата пришла со школы, и говорит, что у них началась "проектная деятельность" и им задали в 4-м классе сделать и представить некий проект на свободную тему. Я ей посочувствовал, и сославшись на отсутствие времени, предложил обратиться с этим делом к маме. Мама Света сказала, что её в это дело лучше не впутывать, т.к. она присматривает за нашим младшим Серым. Пока мы перекидывали друг на друга, кто будет с ребенком делать проект, как вдруг, я зашел на сайт www.zx-pk.ru и прочитал новость про конкурс статей. Лень двигатель прогресса, и вот я предложил Злате совместить приятное с полезным, написать материал, который частично пойдет в статью и частично в проект, заодно и всей школе расскажем про наш Спектрум. Злата согласилась! В общем, представьте, что находитесь в школе, в 4-м классе и вам почти 11 лет, и вы читаете этот проект не как взрослый, а как ребенок!



Тема проекта: Создание видеоигры «Мистер Винтик» (Mr.Vintik) на бытовом 8-битном ретро-компьютере.

===

Оглавление:

Введение
1. Этапы разработки и структура игровой программы
2. Разработка заставки игры
3. Стартовое меню игры
4. Разработка игрового поля
5. Разработка главного героя, его врагов и других основных объектов
6. Битва с боссом и финальная заставка
7. Кодинг, тестирование и выгрузка игры
8. Отзывы об игре в сети Интеренет
Заключение

===


Введение

Разработка компьютерной игры – это довольно сложное занятие, так как включает в себя знания из различных областей: программирования, рисования и дизайна. В настоящее время разработка игры для ретро-компьютера считается занятным хобби. Можно интересно провести время, создавая уровни и рисуя по точкам главного героя своей игры. На твоих глазах шаг за шагом из ничего появляется целый мир. Кроме того, разработка ретро-игры - это настоящее и увлекательное путешествие во времени. Мы можем представить себя игроделами восьмидесятых годов прошлого столетия. У них в распоряжении был только этот медленный ретро-компьютер. У нас, в отличии от них, есть огромное преимущество - в своем доме мы имеем настоящий сверхбыстрый персональный компьютер, на котором вести разработку игры не мучение, а удовольствие!

Что такое ретро-компьютер? Это старый дедушка современного компьютера. Если он такой старый, то почему от него не избавляются? А как избавиться от доброго и любимого дедушки, который в детстве приносил тебе столько радости, когда играл с тобой и терпеливо помогал осваивать простое программирование?

Что будет если вести разработку непосредственно на ретро-компьютере того времени? Это займёт гораздо больше времени и сил, прежде чем мы закончим делать игру. Языки программирования того времени были либо очень медленными, либо очень сложными. Кто быстрее придет к финишу черепаха или ракета? Поэтому, программировать на современной ракете гораздо быстрее. Другими словами, это называется кроссплатформенной разработкой. Когда мы создаем игровую программу на одном современном персональном компьютере, чтобы запустить её на другом устаревшем ретро-компьютере. Поэтому, старые компьютеры продолжают жить и приносить радость своим хозяевам, так как во всем мире появляются новые игры для них.

Задача проекта – разобраться, как создаются простейшие игры от начала и до конца. Понять принцип работы кроссплатформенной разработки, при котором созданная игра будет работать как на современном компьютере, так и на ретро-компьютере. Выложить игру в сеть Интернет и получить обратную связь от пользователей ретро-компьютеров Спектрум со всего мира.


1. Этапы разработки и структура игровой программы

Этапы разработки:
1. Идея игры на бумаге;
2. Изучение аналогичных выпущенных игр;
3. Выбор программы (софта), изучение возможностей редактора;
4. Разработка игрового поля;
5. Разработка главного героя;
6. Разработка врагов главного героя: рисование и анимация;
7. Разработка важных игровых объектов;
8. Создание уровней – игровых экранов;
9. Написание кода игры (кодинг);
10. Озвучивание игры;
11. Выгрузка готовой программы.

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



Делать игру мы будем в редакторе AGD (Arcade Game Designer), в переводе на русский - это «дизайнер аркадных игр».


2. Разработка заставки игры

Получение цифрового изображения из рисунка на бумаге:









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

Сначала заставка рисуется карандашом или ручкой на бумаге. Далее, бумажный рисунок сканируется и переводится в цифровое изображение. В графическом редакторе происходит очистка фона и раскрашивание базовыми цветами. Третий рисунок – это итоговая заставка с учётом технических возможностей ретро-компьютера, её размер составляет всего 256 на 192 точки. Она получена в результате экспорта из редактора ZX-Brush в ленточный (кассетный) формат (tap). Позднее, мы подгрузим её в редактор AGD перед окончательной выгрузкой готовой игры. В то далекое время игры в память компьютера загружались с помощью звукового сигнала, записанного на магнитной ленте – кассете. Загрузка одной игры шла несколько минут. Чтобы игроку не скучать эти несколько минут, придумали заполнять видеопамять какой-нибудь картинкой, рассматривая которую будет легче дождаться окончания загрузки игры.

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

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

Игры в которых игрок управляет героем, прыгающим с одной платформы на другую, называются платформерами. Наша игра – это тоже платформер.


3. Стартовое меню игры

Стартовый экран игры содержит следующие данные:
1. название игры «Mr.Vintik»;
2. меню с выбором управления и начала игры
Чтобы игра стартовала с управлением на клавиатуре, нужно нажать кнопку с цифрой «1». По сложившейся практике, обычно это пять клавиш «O» (влево), «P» (вправо), «Q» (вверх), «A» (вниз) и пробел (огонь/прыжок). Если имеется джойстик, то тут для старта нужно нажать «2» или «3» в зависимости от того, какого он типа.
3. информацию, для какого типа компьютера сделана игра (ZX-Spectrum);
4. кем создана (Александр Титов и Злата Титова);
5. город, страна и год создания игры (Екатеринбург, Россия, 2016);
6. название программы, на основе которой создавалась игра (Arcade Game Designer).




4. Разработка игрового поля

Игровое поле состоит из неподвижных блоков. Блок – это кирпичик, из которого составляется игровое поле. У каждого блока можно выбрать своё свойство. Например, блок «Сплошная стена» не даёт сквозь себя проходить, этот блок используется для создания границы и непроходимых стен, раскрашивается в видимые цвета. Есть так называемые «Смертельные блоки», которые нельзя задевать, так как игрок может потерять «жизнь». Мы также использовали «Пользовательские блоки», которые можно сделать невидимыми глазу, если закрасить их цветом фона.

Создание блока происходит путём перемещения курсора в площади чёрного квадрата размером 8х8 точек и раскрашиванием в нужный цвет.



Как сказано выше, все блоки делятся на типы с определённым набором свойств, которые этот блок будет выполнять в игре. В любой момент времени в редакторе блоков можно переназначить ему свойство. По желанию дизайнера любой блок можно превратить в непроходимый кирпич или в сквозную платформу. В игре присутствуют следующие типы блоков: «Сплошная стена», «Лестница», «Платформа», «Земля», «Смертельный блок», «Пустое пространство» и «Пользовательский». На рисунке выше показано создание блока с типом «Сплошная стена». Когда он размещается на игровом поле, он не даёт главному герою провалиться сквозь него. Это важный блок, так как, если его не поставить, то герой улетит с экрана. Тип блока «Лестница» необходим для подъёма и спуска главного героя в труднодоступные места. Тип блока «Платформа» даёт возможность запрыгивать сквозь этот блок и стоять на нём, не падая, очень пригодится при убегании от врагов. Сквозь блок типа «Земля» главный герой прокапывает себе путь, как крот. «Смертельный блок» красного цвета нельзя задевать. Если главный герой его заденет, то он умирает. Мы решили сделать, чтобы смертельные блоки также уничтожали врагов, при соприкосновении с ними. На практике, ловкий игрок сможет использовать их как дополнительные ловушки.

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

Размещение блока на экране:


Далее, предстоит повторная работа по разработке уровней.


Большая часть оперативной памяти будет израсходована здесь. По причине нехватки памяти из игры пришлось вырезать некоторые уровни. В мистере Винтике хватило памяти на 20 игровых уровней и 2 заставочных экрана. Дизайн уровней в некоторых играх это тоже предмет искусства, поэтому авторы давали имена каждой игровой комнате.

Карта игры Мистер Винтик:



5. Разработка главного героя, его врагов и других основных объектов

Разработка главного героя: рисование и анимация.

Анимация – иллюзия движения у рисунка через последовательное воспроизведение кадров, как в мультфильмах.

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

Создание главного героя:


Создание главной героини в виде принцессы:


Необходимо нарисовать каждый кадр анимации. Чем больше кадров, тем интереснее выглядит игровой персонаж. Обычно используется 3-5 кадров анимации для каждого спрайта. Главный герой один, но у него много движений, которые изображают ходьбу, прыгание, мигание и погибание. Спрайты героев в программе создаются аналогичным образом, как создание блоков.

Место появления главного героя на экране при старте уровня очень важно. Необходимо выбрать такое место, чтобы враги до него не добрались при первом своём появлении. А также должно быть достаточно пространства для комфортного управления главным героем. Он не должен застревать и проваливаться!

Размещение главного героя, врагов и бонусов на экране:


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

В виде спрайтовой анимации разрабатываются все остальные важные игровые объекты, которые могут оказывать влияние на процесс игры. Это всевозможные коллекционные предметы, за сбор которых игрок получает дополнительные очки или бонусы неуязвимости. В нашей игре он изображен в виде мигающего жёлтого квадратика, взяв который главный герой становится временно неуязвимым и может уничтожать врагов. Если он не успеет, то можно попытаться взять другой энергобонус. Дизайнер должен это предусмотреть. Враги сторожат бонусы, их необходимо выманивать или уничтожать. Бонусы мигают для того, чтобы привлечь внимание игрока, что их можно собирать.

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


6. Битва с боссом и финальная заставка

Заключительным уровнем игры является битва с боссом. Опасность босса в том, что его нельзя задевать, а ещё он слишком большой и его невозможно перепрыгнуть. Единственный способ победить – это закрасить все черные кружочки на уровне. Это не так просто! Робот периодически топает ногой, скидывая героя в смертельную лаву.

Карандашный набросок предстоящей битвы:


Так битва с боссом выглядит в игре:


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

Финальная сцена игры для дизайнера выглядит как спрайт главного героя с типом «0» касается спрайта главной героини с типом «10», после чего происходит завершение игры с появлением надписи «Happy End».




7. Кодинг, тестирование и выгрузка игры

Кодинг – написание кода игры. Поведение каждого спрайта и блока на игровом поле определяется с помощью кода, написанного на внутреннем скриптовом языке. Чтобы его освоить, необходимо самостоятельно изучить руководство пользователя AGD. На сайте www.zx-pk.ru есть его русский перевод. Кодинг – это тоже трудоёмкий процесс, так как нужно постоянно находить и исправить ошибки.

Так выглядит код движения игрока вправо:


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

P.S.
Забавный эпизод во время очередного тестирования игры.
Папа:
- В этом уровне надо быстро спрыгнуть в щель, взять бонус, прокопать и выпустить врага, а потом...
- Да, знаю я, папа! Вообще-то я этот уровень придумала!


Выгрузка игры подразумевает под собой её сохранение в виде файла данных в формате нашего ретро-компьютера. Этот файл можно разместить в интернете и поделиться игрой со всем мировым Спектрумовским сообществом.


8. Отзывы об игре в сети Интернет

После окончания разработки, тестирования и выгрузки игра «Мистер Винтик» была выложена в сеть Интернет, чтобы порадовать мировое сообщество любителей игр на ретро-компьютерах.



Вот некоторые из наиболее радостных отзывов:

«Great wee game, intuitive right off the bat, just the right amount of challenge, yeah, I like it!» / «Отличная маленькая игра, сразу интуитивно понятная, нужное количество сложных задач, да, мне это нравится!»

«Nice. Enjoying the retro style, feels like an 84 or 85 game (in a good way)» / «Мило. Наслаждаясь стилем ретро, чувствуется как игра из 84 или 85 годов (в хорошем смысле)»

«Brilliant stuff guys! this is charming, challenging, you can paint, dig, climb, take kamikaze pills and go enraged to the baddies... level design seems to be well thought up with quite a few elements that enrich the gameplay.» / «Блестящая вещь, ребята! Это очаровательно, сложно, вы можете закрашивать, копать, подниматься, принимать таблетки камикадзе и прийти в ярость от злодеев... дизайн уровней, кажется, хорошо придуман и довольно много элементов, которые обогащают игровой процесс.»

«This is excellent! Love the old skool style in both graphics and gameplay.» / «Это отлично! Обожаю стиль старой школы для графики и геймплея».

«Nice. Have been enjoying this - the sprite has good movement and is easy to control. It seems simple but fun. The only problem I've got at the moment is that I can't get past level 2..! But that's down to my inability to combine brain power and reactions....I particularly the way you keep the dots you've collected when you die. I find it makes the game less frustrating/repetitive. [Edit: OK, have got a bit better at it now - level 4] » / «Мило. Понравилось - спрайт имеет хорошее движение и легко управляется. Это кажется простым, но веселым. Единственная проблема у меня на данный момент заключается в том, что я не могу пройти 2 уровень..! Но это моя неспособность объединить силу мозга и реакции....Хорошо, что в игре остаются закрашенные кружочки после гибели игрока Я считаю, это делает игру менее неприятной от повтора. [Отредактировано: ОК, уже лучше - я на уровне 4] »

«Thats a great little game. Has a Rockman feel to it. Good effort.» / «Это замечательная маленькая игра. Чувствую себя как в игре Рокмен. Хорошая попытка».

«Brilliant!!! Waiting for the sequel.» / «Гениально!!! Жду продолжения.»

Множество веселых отзывов получено и на этом нашем любимом сайте!

Вот так выглядит прохождение игры:


Заключение.

Разработка игры длилась практически один месяц: с 21.03.2016 года по 17.04.2016 года. Так быстро создать игру получилось благодаря кроссплатформенной разработке и использованию редактора AGD, иначе разработка могла затянуться на годы.



Главная задача у Златы состояла в тестировании игры на всех этапах. Злата искала ошибки при прохождении уровней. Проверяла где слишком сложное место игры, а где простое и вносила замечания для поправки баланса игрового процесса.

В процессе разработки игры принимала прямое участие в следующем:

- карандашный набросок заставки игры;
- создание нескольких уровней игры;
- тестирование игры на всех этапах.

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

===

Вот такая статья у нас получилась. Защита проекта в школе будет в декабре. Конечно, для нас это не наука, а хобби, мы делаем игры для души!
Хочется сказать, что 2016 год - это год Спектрума в нашей семье, мы выпустили 2 игры на него и 3-ю постараемся доделать и выложить до нового года.

Спасибо за прочтение!

Обновлено 29.11.2016 в 02:01 Termojad

Метки: Нет Добавить / редактировать метки
Категории
Без категории

Комментарии

  1. Аватар для * Felix *
    Забавная игрушка авторам удачи в ретро игроделе!
  2. Аватар для CityAceE
    Отлично! Хочется также узнать как пройдёт защита проекта в школе в декабре!
  3. Аватар для DenisGrachev
    Вы большие молодцы! Так держать, уже ждём новую игру
  4. Аватар для piroxilin
    Ну медальку на защите по любому получите
    Отличная работа!
  5. Аватар для Бука
    Круто, спасибо!
  6. Аватар для seventh
    потрясно. и игруха зачетная получилась
  7. Аватар для hobot
    Вы молодцы ! И статья и сама идея и проект и его описание и результат !!!
    Нет слов. Только эмоции - причём строго положительные.

    Очень порадовал комментарий об авторстве уровня от девочки )))

    Цитата Сообщение от Termojad
    Конечно, для нас это не наука, а хобби, мы делаем игры для души!
    Ну как же не наука! Ещё какая наука. Особенно для Златы я полагаю.
    Ещё очень понравилась дизайнерская идея необходимость и зачёт в форме "счёта"
    посещения ГГ определённых участков на уровне (!).

    Ну и это просто красиво, особенно заставка.
    А улетающий робот? А замок? Вот это да! )

    Ещё раз : огромная благодарность автору статьи, разработчику и Злате,
    вы перед защитой потренируйте её на что нужно делать акцент в докладе
    и демонстрации. Пусть не стесняется использовать правильные термины
    (ТЗ и проч.)и конечно очень интересно как пройдёт защита.
  8. Аватар для amfirifma
    Злата и Александр, Спасибо огромное! Вы - Большие Молодцы! После просмотра прохождения игры - на душе осталась какая-то непередаваемая радость! А впереди ведь еще и сама Игра! Специально оставил на потом (как в детстве - котлету, чтоб съесть после каши Очень понравились светлые лица создателей, а также светлые головы тестеров Удачу на сдачу! Так дерзать!

Трекбэков