Как сделать игру в лазарусе

Lazarus — пишем компонент для анимации спрайтов

Вместо предисловия

В одесской школе ученики 8-го класса на уроках информатики используют бесплатную кроссплатформенную среду разработки Lazarus (официальный сайт), внешне и внутренне очень напоминающую любимый многими Delphi, использующую версию Object Pascal под названием Free Pascal и в действительности сильно упрощающую процесс вхождения в программирование.

Но детям неинтересно писать программу для вычисления силы тяжести по непонятной им пока формуле F=mg. Практически все дети, которых я пытался учить программированию, с первого занятия хотят написать игру. К счастью, Lazarus прекрасно подходит и для написания несложных игр.

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

Для отображения веселого графического контента вместо сухого делового набора стандартных компонентов в Lazarus (как и в Delphi) есть 3 компонента на вкладке Additional:
— TImage (отображение картинки из произвольного файла);
— TShape (отображение одного из нескольких заранее заданных графических примитивов);
— TPaintBox (отображение холста, на котором можно рисовать программно).

Самое эффектное для школьника — загрузить небольшой спрайт в TImage и написать программу для перемещения его по экрану — по событиям мыши/клавиатуры, автоматически в цикле или автоматически по событию от таймера.

Как только это начинает работать, у школьника возникает следующий законный вопрос: а нельзя ли сделать так, чтобы персонаж двигался? И можно ли сделать сделать так, чтобы он смотрел не постоянно на нас, а поворачивался в сторону, совпадающую с направлением движения?

В Сети можно найти большое количество готовых изображений для использования при разработке игр. И многие персонажи заранее разработаны в несколько проекций и несколько кадров анимации (как, например, вот на этом сайте).

Вот пример изображения, где спрайты расположены в виде таблицы, у которой каждая строка соответствует определенной проекции, а каждый столбец — определенной фазе анимации:

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

К сожалению, компонент TImage, входящий в стандартную поставку Lazarus (и Delphi), не позволяет показывать произвольный фрагмент изображения: изменяя его свойства, мы можем заставить его показывать только изображение целиком, левый верхний угол или центральную его часть. Для отображения произвольного фрагмента изображения, заданного смещением и размерами по обеим осям, нужен какой-то другой компонент. Но, как выяснилось, сделать его самостоятельно в Lazarus — совсем несложно!

Создаем новый компонент

В качестве инструкции по созданию компонентов я воспользовался официальным руководством.

Там все написано достаточно подробно, дублировать не имеет смысла. Я только остановлюсь на некоторых моментах.

1. Стандартный Project Wizard не предлагает нам создать package, и чтобы как-то получить доступ к редактору, выбираем «New Project» (в русской версии — «Новый проект»)

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

и затем «Application» (в русской версии — «Приложение»):

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

2. Действуя далее по инструкции, в меню «Package» (в русской версии — «Пакет») выбираем верхний пункт «New package. » (в русской версии — «Новый пакет. »), выбираем имя файла и путь для сохранения. Я назвал свой новый пакет «Game» и разместил его в отдельной папке с тем же названием:

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

Я создал отдельную папку Lazarus/Cmp в расчете на то, что у меня может появиться несколько разных пакетов с компонентами, и уже в этой папке создал папку «Game».

Если все сделано правильно, на экране должно появиться окно нового (пока пустого) пакета.

3. Действуя дальше опять же по инструкции, для создания нового компонента в окне пакета нажимаем кнопку «Add» (в русской версии — «Добавить») и в выпадающем списке выбираем «New Component» (в русской версии — «Новый компонент»):

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

В качестве класса-предка указываем TCustomImage — этот класс фактически используется для реализации компонента TImage, но отличается от него тем, что не содержит published properties и позволяет нам самим определить набор свойств, который будет доступен в дизайнере для нашего компонента.

Заполнив все поля, нажимаем кнопку «Create New Component» (в русской версии — «Создать новый компонент»).

Добавляем код в новый компонент

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

Как и следовало ожидать, объявление класса абсолютно пусто, а имплементация вообще отсутствует. Все, что есть — функция регистрации компонента на вкладке «Game».

Нам нужно добавить несколько унаследованных published properties, создать два своих и переопределить одну виртуальную функцию. Приступим!

0. В секции импорта нам понадобятся два дополнительных модуля: ExtCtrls и LCLProc — добавляем их в раздел uses:

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

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

2. Добавляем в объявление класса два новых properties для задания смещения изображения по горизонтали и по вертикали:

и не забываем добавить в имплементацию класса две объявленных процедуры:

3. Переопределяем виртуальную функцию DestRect:

и добавляем ее реализацию в имплементацию класса:

Компилируем пакет и пересобираем Lazarus

1. В окне пакета нажимаем кнопку «Compile» (в русской версии — «Компилировать»). Если все сделано правильно, в окне сообщений появится зеленая надпись об успешной компиляции, если нет — надпись будет желтой или красной.

2. В том же окне нажимаем на кнопку «Use» (в русской версии — «Использовать») и в выпадающем меню выбираем второй пункт «Install» (в русской версии — «Установить»). Программа предложит пересобрать и перезапустить IDE — соглашаемся:

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

3. После перезапуска на панели инструментов появится новая вкладка «Game», а на ней — иконка для нашего нового компонента.

Вместо послесловия

В следующей статье Lazarus — простая анимация при помощи компонента TImageFragment я рассказал, как можно использовать такой компонент — за 5 минут создать окно, в котором анимированный персонаж будет двигаться в разные стороны и поворачиваться в сторону направления движения.

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

А если хватит времени и желания — попробую написать разные алгоритмы управления персонажами (например, футболистами) и устроить между ними соревнования!

Источник

О разработке небольшой игры с помощью Lazarus

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусеПосле относительно недавнего релиза Lazarus 1.0, захотелось опробовать эту IDE на практике. Так появилась идея написать игру. Из основных требований — она должна быть несложной, с небольшими затратами времени на ее реализацию. Ну и конечно же, ее написание и сам геймплей должны быть достаточно увлекательными процессами, даже для меня как ее создателя.
Что ж, пожалуй лучшим способом добиться поставленных целей, являться высокий уровень случайности, что бы параметры и поведение игры было трудно точно спланировать. Ну и конечно спонтанность в разработке, когда наперед ничего конкретного не планируется.

Итак, начало вполне стандартное. А именно пустая форма в среде Lazarus:
Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

Все довольно скучно и серо. Не помешало бы добавить каких то красок. После 20 минут создания классов и вспомогательных классов, получилось нарисовать несколько деревьев и водоёмов (вид сверху):

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

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

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

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

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

Визуально это напоминало размножение какого-то вируса в чашке Петри. Дальше дело так продолжаться не могло, так что были придуманы некоторые дополнительные параметры для существ. Теперь существа имели ограниченный строк жизни (LifeTime:integer). Также как и необходимость «отдохнуть» после размножения (ReprodDelay:integer), кроме того, был добавлен параметр скорости передвижения (Speed:single). Все эти переменные были запихнуты в структуру RGenes, которая заполнялась случайными параметрами для каждого отдельного существа при старте программы. Ну а при появлении нового существа, его параметры заполнялись среднеарифметическими значениями, взятыми у его родителей. При таком подходе, появился весьма занимательный эффект — после нескольких поколений, средние параметры популяции возрастали на несколько процентов. Получалось, что существа с большим LifeTime и меньшим ReprodDelay, лучше выживали и давали лучших потомков. Закон естественного отбора просматривается даже при таких примитивных условиях. Здесь также подумалось, что при случайном (или не очень) появлении примитивных живых клеток (первых признаков жизни), самым сложным являться процесс воссоздания копии этих же клеток, тогда как наделением их питательными веществами и созданием движения вполне может заниматься подходящая неживая окружающая среда.
После проделанных манипуляций получился довольно занятный мирок, в котором ползали кружочки и занимались своими делами. Впрочем, захотелось большего. Так в исходный код попал класс TPlayer и еще несколько сотен строчек кода, которые отвечали за создание, прорисовку и движение серого кружочка которым игрок должен управлять. При пересечении игроком каких либо существ, у него отнимается здоровье. Когда здоровье становиться равным 0, считается что игра закончена. В водоёмах здоровье восстанавливаться. Все это конечно интересно, но стоит также дать игроку возможность как-то защищаться. Для этого хорошо подойдут… башни, которые можно строить недалеко от серого кружочка (радиус строительства прорисовывается на карте) и которые будут уничтожать нахальных существ, проползающих мимо. Все, теперь с помощью левой кнопки мышки (либо стрелками на клавиатуре), можно передвигаться по карте, а правой кнопкой ставить башни для уменьшения популяции вредных существ. Строительство башни требует некоторых расходов очков, которые зарабатываются уничтожением существ. Чтобы не блуждать просто так, было добавлено некоторую финальную цель — собрать 40 энергетических ячеек разбросанных по карте. Каждая ячейка улучшат характеристики игрока (желтая — скорость, фиолетовая — жизнь, голубая — радиус для постройки башень). Но следует быть осторожным — кроме улучшения характеристик, увеличивается цена на строительство башни.
Получилась довольно занятная игра в стиле… можно сказать tower attack, так как башни строятся не столько для защиты, сколько для нападения.

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

Несколько слов о внутренней структуре игры

Карта игры составляет поле размером 4500*4500 пикселей. Начальная популяция существ, насчитывает около 5000 особей. Со временем, они конечно размножаются хотя максимальное их количество установлено в 30 000, что довольно много. Для упрощения расчетов, карта разбивается на ячейки размером 32*32 пикселя. В ячейке храниться информация о том, какие игровые объекты в текущий момент времени находятся в ней. Такой подход позволяет сделать достаточно эффективные прорисовки (для прорисовки перебираются только те объекты, которые находятся в видимых ячейках карты), а также относительно быстро просчитывать пересечение игровых элементов даже при их огромном количестве (все пересечения просчитываются в пределах ячейки к которой они принадлежат).

Несколько слов о Lazarus
Эпилог

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

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

Источник

Урок 2. Ваша первая программа

Урок из серии «Программирование для школьников в среде Lazarus»

В предыдущем уроке рассказывалось об основных инструментах разработки программ в среде Lazarus, этапах создания приложения.

В этом уроке мы создадим свою первую программу, познакомимся с редактором исходного кода, узнаем как компилировать и выполнять программу.

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

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

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

В нашей первой программе при создании интерфейса пользователя будем использовать три компонента: TForm (Форма), Label (Надпись) и TButton (Командная кнопка).

Так как мы будем использовать их впервые, давайте познакомимся с ними подробнее. Нам нужно знать основные свойства этих компонентов и их назначение, чтобы можно было их настраивать. Описание свойств этих компонентов можно посмотреть перейдя по ссылкам: Forma (Форма), Label (Надпись), Button (Кнопка). С остальными компонентами графического интерфейса будем знакомиться по мере их использования.

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

Проект «Первая программа»

Задание. Создать проект, который после щелчка на кнопке выводит в поле надписи текст: «Я программирую. »

Создать интерфейс программы по образцу:

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

Ход выполнения проекта

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

2) Не выходя из этого диалогового окна Создать новую папку Primer_1 для файлов вашего проекта (проект будет содержать несколько файлов), открыть ее и щелкнуть по кнопке Сохранить.

Тем самым мы сохраним файл Project1, содержащий сведения о проекте.

Сразу же откроется окно Сохранить Unit1 для сохранения программного кода проекта (файл Unit1.pas), в котором также необходимо щелкнуть по кнопке Сохранить.

Кроме этих двух файлов в папке проекта создается автоматически еще несколько файлов, в том числе – unit.lfm, который представляет собой файл с полными данными о проектировщике формы. Позиция, размер, расположенные компоненты и пр.

Папка проекта должна содержать следующие файлы:

Компонент

Свойство

Значение

ФормаCaptionМоя первая программаНадписьCaptionПустая строкаFont
NameSizeArial20Style
fsBoldTrueКнопкаCaptionВывести сообщение

Форма примет такой вид, как на рисунке:

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

Сейчас процедура обработчика события пустая, при нажатии кнопки она ничего не делает.

2) Чтобы процедура выполнила необходимые действия, напишите соответствующий код между операторными скобками begin и end. В нашем случае это оператор присваивания, который изменяет свойство Сaption (текст надписи) объекта Label1 на новое значение:

Вводя код, обратите внимание на подсказку, появившуюся после ввода точки, следующей за label1. Подсказка представляет собой всплывающее меню, в котором перечислены допустимые свойства и методы компонента label1

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

С помощью мыши вы можете выбрать из списка нужное свойство или метод.

Как сделать игру в лазарусе. Смотреть фото Как сделать игру в лазарусе. Смотреть картинку Как сделать игру в лазарусе. Картинка про Как сделать игру в лазарусе. Фото Как сделать игру в лазарусе

Далее этот файл, в случае успешного создания, запускается на выполнение.

В предыдущем задании новые значения свойств для компонентов, размещенных на форме, были перечислены в таблице.

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

Задания для самостоятельного выполнения

Задание 3.Создайте приложение, разместите на форме компоненты: Buton1, Edit1 так как показано на образце.

Источник

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

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