Как сделать фон в лазарусе

Добавил пользователь Skiper
Обновлено: 04.10.2024

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

Для примера представим ситуацию, при которой пользователь нажимает кнопку и на форме в 10 компонентах Label случайным образом меняется значение свойства Caption. С первого взгляда достаточно не сложная задача. Но если программировать на прямую, то придется прописывать код генерации случайного значения для каждого Label. Это получится из-за того, что цикл задать не получится. В цикле мы не сможем менять компонент, у которого необходимо менять значение.

Второй способ – это все же задать цикл, но в нем организовать отдельный блок, который по шагу цикла выбирает нужный компонент. Например, так:


Создайте папку проекта.

Запустите LAZARUS . Если открылся предыдущий проект, то выполните команду Проект — Создать проект. . В появившемся диалоговом окне выберите из списка слово Приложение и нажмите кнопку Создать. Все дальнейшие изменения будем сохранять командой Проект - Сохранить проект как – дважды нажимаем Сохранить в папке проекта.

Задание 1. Размер шрифта

1. Установите свойства Формы :

Заголовок формы ( свойство Caption ) – Форматирование

Цвет формы (свойство Color ) - по настроению

2. Поместите на форму метку Label 1 : метка выбирается одним щелчком мыши по объекту Label вкладки Standart , вторым щелчком на поле формы метка выставляется в выбранном месте щелчка. перейдите в Инспектор объектов на вкладку Свойства, измените свойство Caption - напишите Ура! Работает! .



3. Установите начальный размер шрифта 12. Раскройте список свойства Font , и в строке Size установите значение 12.

4. Поместите на Форму кнопку Button 1 : кнопка выбирается одним щелчком мыши по объекту Button , вторым щелчком на поле формы кнопка выставляется в выбранном месте щелчка. Напишите на кнопке Выход. Для этого перейдите в Инспектор объектов на вкладку Свойства, измените свойство Caption - напишите Размер шрифта +1 . Подкорректируйте размеры кнопки, чтобы текст отображался полностью. Для этого либо воспользуйтесь маркерами на кнопке, либо измените свойство Width объекта Button 1.

Перейдите в Инспектор объектов на вкладку События объекта Button 1 и дважды щелкните по пустому полю справа от слова OnClick . В редакторе кода появится заготовка процедуры, реагирующей на нажатие кнопки:

procedure TForm1.Button1Click(Sender: TObject);

begin

end;

Чтобы увеличить шрифт в тело процедуры вставим строчку

Label1.Font.Size:=Label1.Font.Size+1;

При каждом нажатии кнопки размеры метки будут увеличиваться на 1.


5. Запустите проект нажатием на кнопку в виде зеленого треугольника. Убедитесь в работоспособности.

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

If Label1.Width+Label1.Left>= Form1.Width then

begin

end

else

begin

end;

7. Добавьте кнопку Размер шрифта-1 по уменьшению шрифта на 1. Учтите тот факт, что если размер шрифта установить отрицательным, то вместо уменьшения начнется увеличение шрифта, программа будет работать некорректно.

Задание 2. Цвет шрифта

1. Добавьте кнопку Случайно по Изменению цвета шрифта.

procedure TForm1.Button3Click(Sender: TObject);

var c:integer;

begin

case c of

0:begin c:=clBlack;Label1.Caption:='Черный!';end;

1:begin c:=clGreen;Label1.Caption:='Зеленый!';end;

2:begin c:=clRed;Label1.Caption:='Красный!';end;

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

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

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

Множество таких готовых изображений можно найти в Сети — например, вот на этом сайте.

Выбираем (и подготавливаем) изображение


Для своего примера я выбрал вот это изображение:

— очень уж выразительно эта птица Феникс машет крыльями.

Как можно заметить, каждая строка содержит по 4 кадра для каждой из 4-х проекций. Меняя только OffsetX, можно заставить птицу махать крыльями, а для смены проекции достаточно только менять OffsetY. Такое разделение кадров по строкам очень упрощает программирование анимации.

Размер этого изображения — 384х384, а размер каждого кадра — 96х96. К сожалению, прямое использование этого изображение огорчило нас артефактами: некоторые кадры изображения размещены так, что их края попадают на соседние кадры, и во время анимации на краях спрайта мелькают желтые штрихи.

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

Исправленный файл выглядит вот так:


— невооруженным глазом отличия незаметны, но второй вариант работает без артефактов.

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

Вообще при создании новых объектов IDE присваивает им подобные имена, состоящие из названия типа объекта и порядкового номера. Я считаю хорошим стилем переименовывать все такие объекты, присваивая им осмысленные имена, отражающие роль или назначение объекта.

2. Сохраняем наш новый проект.

3. Переименовываем форму и меняем ее заголовок.

5. Компилируем, запускаем проект (клавиша ):


Помещаем спрайт на форму

Используя свойство Picture, загружаем в компонент изображение (исправленный вариант птицы Феникс). Кроме этого, меняем также следующие свойства нового объекта:

В тексте модуля UnitMain при этом произойдут небольшие изменения:
— в раздел uses добавится модуль ImageFragment


— в объявлении класса появится новый объект

Добавляем анимацию — махи крыльями

1. Добавляем на форму новый компонент класса TTimer.

2. Переименовываем добавленный объект.

3. Меняем свойство Interval с 1000 на 100.

Пусть кадры этой анимации сменяют друг друга каждые 100 миллисекунд, то есть 10 раз в секунду. В дальнейшем это свойство можно менять для замедления или ускорения маха крыльев — на усмотрение программиста.

4. Добавляем обработчик события OnTimer.

Проще всего это сделать двойным щелчком мыши на значке нового объекта TimerLive. В результате этого действия IDE сама добавит в объявление класса формы новую процедуру, в свойства объекта — ссылку на эту процедуру, а в раздел implementation будет добавлено тело новой процедуры (и курсор будет помещен внутри этой новой процедуры, между ключевыми словами begin и end).

5. Добавляем в новую процедуру одну строку кода.


В результате этих действий объявление класса должно выглядеть примерно так:


А новая процедура — обработчик события OnTimer должна выглядеть примерно так:


После компиляции и запуска приложения можно наблюдать, как птица Феникс машет крыльями.

Происходит это потому, что обработчик события таймера каждые 100 миллисекунд циклически меняет смещение отображаемого фрагмента, и выбранный кадр смещается по горизонтали, последовательно отображая 4 кадра верхней строки загруженного изображения. Операция mod — получение остатка от деления — предотвращает выход смещения за пределы размера изображения, и в результате за 4-м кадром снова следует 1-й.

Добавляем перемещение спрайта по окну

1. Добавляем в раздел uses модуль Math


2. Добавляем в объявление класса новую переменную и константу.

Для сохранения вектора перемещения спрайта по окну добавим переменную типа TPoint


Там же объявляем константу для задания модуля скорости перемещения


3. Добавляем на форму еще один компонент класса TTimer.

4. Меняем свойство Interval с 1000 на 100.

Пусть этот таймер тоже срабатывает каждые 100 миллисекунд, то есть 10 раз в секунду. В дальнейшем это свойство также можно менять для замедления или ускорения частоты отрисовки факта перемещения спрайта.

5. Добавляем обработчик события OnTimer.

6. Добавляем в новую процедуру две строки кода.


Использование функций Max() и Min() предотвращает выход спрайта за пределы формы (главного окна приложения).
Именно для использования этих функций мы и подключили в раздел uses модуль Math.

7. Добавляем обработчик события OnKeyPress.

8. Добавляем в новую процедуру несколько строк кода.


В результате этих действий объявление класса должно выглядеть примерно так:


А новые процедуры — обработчики событий OnTimer и OnKeyPress должны выглядеть примерно так:

Используем разные проекции спрайта

Добавляем в конец процедуры TFormMain.FormKeyPress следующий код


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

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

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

Для примера представим ситуацию, при которой пользователь нажимает кнопку и на форме в 10 компонентах Label случайным образом меняется значение свойства Caption. С первого взгляда достаточно не сложная задача. Но если программировать на прямую, то придется прописывать код генерации случайного значения для каждого Label. Это получится из-за того, что цикл задать не получится. В цикле мы не сможем менять компонент, у которого необходимо менять значение.

Второй способ – это все же задать цикл, но в нем организовать отдельный блок, который по шагу цикла выбирает нужный компонент. Например, так:

Читайте также: