Последние записи

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

30th
Май

Как работать с графикой на канве в среде Дельфи

Posted by bullvinkle under Журнал, Статьи

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

Продолжение. Начало цикла смотрите в первом и втором выпусках журнала…

Владимир Дегтярь

DeKot degvv@mail.ru

Создание проекта с несколькими движущимися объектами. Урок 5

Создадим новый проект <Lesson 3> аналогично предыдущим. Введем в него новые движущиеся графические объекты (в папке <data> добавлено еще четыре звездолета. Размер каждого спрайта 100х80 pix. Новые звездолеты будут появляться по случайному закону (используем функцию Randomize) и двигаться будут сверху вниз. Вывод фона и основного звездолета ’ship1′ осуществляется также как и в предыдущем проекте <Lesson 2>. Для новых объектов вводим дополнительно BufShipR и BufPicR. Также объявим новые переменные – координаты вывода новых звездолетов и приращения этих координат.
Одновременно у нас будут отображаться основной звездолет ’ship 1′ и два из ’ship 2′ – ’ship 5′, выбираемые по случайному закону (см. листинг 1):

ЛИСТИНГ 1

Var

Form1: TForm1;

BufFon,BufFonDop,Buffer: TBitMap;

BufShip1,BufShipR: TBitMap; // буферы  спрайтов

BufPicS1,BufPicR: TBitMap;   //  буферы  изображений  одного спрайта

xf,yf: integer;                         //  координаты  вывода  общего буфера  на форму

dyf: integer;                           // приращение  изменения  координаты  yf  по вертикали

xS1,yS1: integer;                    //  координаты  звездолета  'ship1'

dxS1,dyS1: integer;                // приращение  координат 'ship1' по гориз. и вертик.

xR1,yR1,xR2,yR2: integer;      //  координаты  звездолетов  'ship2 - ship5'

dyR1,dxR2,dyR2: integer;       // приращение  координат 'ship2 - 5'

ns,nr1: byte;                           //  номер спрайта и выбор ship2 - ship5

nr2: byte = 3;

implementation

В процедуре OnCreate формы проведем инициализацию буферов и введем начальные данные для переменных. Процедура DrawShipR(i,j: byte) для вывода новых объектов (’ship2′ – ’ship5′) имеет два

параметра: i (изменение номера рисунка в файле спрайтов) и j (переменная для номера файла спрайтов). Т.к. выбор файла спрайта происходит по передаваемому параметру j, то инициализация буфера BufShipR и загрузка в него файла спрайтов находится в процедуре DrawShipR(i,j: byte) (см. листинг 2):

ЛИСТИНГ 2

procedure DrawShip1(i: byte);

begin

// загрузка одного спрайта в буфер рисунка

BufPicS1.Canvas.CopyRect(bounds(0,0,BufPicS1.Width,

BufPicS1.Height),

BufShip1.Canvas,

bounds(i * 66,0,

BufPicS1.Width,

BufPicS1.Height));

BufPicS1.Transparent:= true;  //  зададим прозрачность фона рисунка спрайта

BufPicS1.TransparentColor:= BufPicS1.Canvas.Pixels[1,1];

end;

Все движения организованы в обработчике таймера. Звездолеты ’ship2′ — ’ship5′ выводятся в Buffer в координаты xR1, yR1 и xR2, yR2 вне видимого окна формы выше. В каждом такте таймера происходит приращение координат для одного dyR1 по вертикали, для другого dxR2 и dyR2 – по горизонтали и вертикали. После того, как объекты выходят за пределы видимого окна формы внизу, вызываются методы random( ) для задания новых координат xR1, xR2 и номера файла спрайта (nr1, nr2). Координаты yR1, yR2 привязаны к координате yS1 , так как ’ship1′ неподвижен в координатах окна формы. Функция
random ( 4 ) возвращает числа в дипазоне 0 .. 3, а файлы спрайтов встречных звездолетов имеют номера 2 .. 5. Поэтому в процедуре загрузки спрайтов BufShipR.LoadFromFile(’data/ship’ + IntToStr(j+2) + ‘.bmp’) номер загружаемого файла определяется как IntToStr(j + 2)… В остальном процедуры обработчиков таймера и нажатия клавиш не отличаются от проекта <Lesson 2>.

Использование универсального модуля для работы с графикой. Урок 6

Если рассмотреть внимательно код программы в проекте <Lesson 3>, можно заметить, что многие методы часто повторяются для разных графических объектов (создание буферов, загрузка изображений из файлов, копирование и т.п.). При этом для упрощения, я сознательно применил файлы спрайтов одинакового размера и с равным количеством рисунков в файлах. А если файлов спрайтов будет не пять, а больше и если количество рисунков в каждом файле будет разным? Придется значительно увеличивать код для

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

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

Модуль находится в папке <Lesson 4> (см. ресурсы к статье). Принцип организации модуля следующий:

вся работа с графическими объектами проводится через битовые образы TBitMap и области

копирования битовых образов TRect

для работы с фоном используются процедуры InitFon (инициализация) и LoadFon (загрузка фона из

файлов)

функция InitSprite предназначена для инициализации и загрузки рисунков спрайтов
для вывода фона и изображений спрайтов использован общий буфер типа TBitMap
в процедуре InitBuff происходит инициализация общего буфера, а в процедуре FreeBuff ”переустановка”,

т.е. уничтожение общего буфера и создание снова, но уже без изображений спрайтов

в процедуре LoadBuff происходит наложение изображений спрайтов на фон

Подробно работа модуля показана ниже…

Применение модуля LoadObjectToBufferMod

1. procedure InitFon(nw, nh: byte; FileName: string)

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

BufFonD:= TBitmap.Create;

BufFon  := TBitmap.Create;

Далее загружаем рисунок одного из фонов в дополнительный буфер:

BufFonD.LoadFromFile(FileName) или

LoadFromResourceName(hinstance.filename);

По загруженному рисунку получаем размер одного рисунка фона (см. рисунок 1):

Рис. 1. Определение размера рисунка

Причем, размер буфера фона определяем как:

WF:= nw * WFD;

HF:= nh * HFD;

2. procedure LoadFon(xf, yf: integer; FileName: string)

Загружаем все рисунки фонов в буфер фона через дополнительный буфер (см. рисунок 2):

BufFonD.LoadFromFile(FileName) или

LoadFromResourceName(hinstance.filename);

Рис. 2. Загрузка всех рисунков фона

3. procedure initBuffer

Создаем основной буфер (Buffer) через который выводим спрайты на форму:

Buffer:= TBitmap.Create;

Размер основного буфера устанавливаем равным размеру буфера фона WF и HF. Загружаем в основной буфер весь фон (cм. рисунок 3):

Buffer.Canvas.Draw(0, 0, BufFon);

Рис. 3. Загрузка в буфер фона

4. procedure FreeBuffer

Процедура уничтожаем основной буфер Buffer. Применяется когда необходимо убрать какой-либо спрайт с формы:

Buffer.Free;

Восстанавливаем-же основной буфер с фоном так:

InitBuffer;

Спрайты, которые должны оставаться на форме, следует перерисовать по новому (см. процедуру InitStprite)…

5. procedure InitStprite(SpriteName: string; N_goriz, N_vertic, N_stroka, N_kadr: byte): byte

Cоздаем буфер массива спрайтов и загружаем туда файл спрайтов (см. рисунок 4):

BufSprite:= TBitmap.Create;

BufSprite.LoadFromFile(SpriteName) или

LoadFromResourceName(hinstance.spritename);

Рис. 4. Загрузка файла спрайтов в буфер спрайтов

Создаем буфер рисунка (одного спрайта):

BufPic:= TBitmap.Create;

Далее определяем размеры буферов массива спрайтов и буфера рисунка, а также области (типа TRoot) загрузки рисунка. Загружаем спрайт в буфер рисунка (см. рисунок 5):

BufPic.Canvas.CopyRect(RectPic.BufSprite.Canvas, rectSprite);

Рис. 5. Загрузка спрайта в буфер рисунка

Задаем прозрачность рисунку:

BufPic.Transparent:= true;

Для вывода следующего спрайта функция возвращает (правильнее сказать – функция принимает значение = Result) значение следующего номера спрайта N_kadr:

Result:= N_kadr;

Уничтожаем буфер массива спрайтов

BufSprite.Free;

6. procedure LoadBuffer(xf, yf, xs, ys, bs: integer)

В этой процедуре на Buffer выводится участок фона с координатами ранее выведенного спрайта, а затем очередное положение спрайта. Определяем область фона и область дополнительного буфера (см. рисунок 6):

Рис. 6. Определение области фона и буфера

Выводим участок фона в буфер, т.е. затираем спрайт фоном (см. рисунок 7):

Рис. 7. Затираем спрайт фоном

Выводим очередной спрайт в дополнительный буфер Buffer (см. рисунок 8):

Buffer.Canvas.StretchDraw(Bounds(xs, ys, WP + bs, HP + bs), BufPic);

Рис. 8. Вывод следующего спрайта

Уничтожаем буфер рисунка:

BufPic.Free;

Далее в программе выводим дополнительный буфер Buffer на форму методом Draw:

Form1.Canvas.Draw(x, y, Buffer);

Битовые образы фона (BufFon и BufFonD инициализируются (создаются – Create) в программе проекта всего один раз при инициализации программы (обычно вызовом процедуры InitFon в событиях OnCreate или OnActivate). Методы InitBuff, FreeBuff, InitSprite, LoadBuf в программе вызываются неоднократно*. Соответственно и объекты Buffer, BufSprite, BufPic создаются многократно. Поэтому после окончания действия каждого из методов происходит уничтожение битовых образов Buffer, BufSprite, BufPic методом Free.

Комментарий автора.

Загрузку фона можно производить из n – количества файлов, c одинаковым размером не более 1024 х

1024. Для этого вызывать процедуру LoadFon n -раз для разных файлов FonName и изменяя

координаты xf и yf.

Модуль можно применять и для простых объектов (один рисунок в файле SpriteName). Присвойте

переменным N_goriz и N_vertic значения = 1. Если размер спрайта не изменяется, присвойте

переменной bs значение = 0.

Можно загружать рисунки из файлов .jpg. Для этого вместо TBitMap применять класс TJpegImage и в

разделах uses LoadObjectToBufferMod и uses Unit1 добавить модуль Jpeg.

Как работать с модулем?

Для этого необходимо выполнить следующие действия:

1. В процедуре FormActivate (можно в FormCreate) инициализируем буфер фона. Вызываем procedure InitFon(nw,nh: byte; FonName: string) с одним из файлов фонов:

. n раз вызываем procedure LoadFon(xf,yf: integer; FonName: string), последовательно прикрепляя рисунки фонов как бы друг к другу

. инициализируем дополнительный буфер Buffer, вызвав procedure InitBuff. Он получит размер равный сумме размеров всех файлов фонов.

2. Для вывода необходимых спрайтов в нужном месте программы вызываем function InitSprite(SpriteName: string; N_goriz,N_vertic,N_stroka, N_kadr: byte). Функция возвращает очередной номер спрайта для последующего вывода очередного спрайта. Этот номер (N_kadr) необходимо передавать в функцию при каждом ее вызове. Причем, функцию можно использовать для вывода нескольких спрайтов, не забывая передавать ей значение N_kadr для каждых спрайтов.

Далее, вызвав процедуру LoadBuff(xf,yf,xs,ys,bs: integer), выводим спрайт на канву дополнительного буфера поверх фона. Окончательный вывод дополнительного буфера на канву формы производим методом Draw().

Заключение

Рассматриваемые в данной статье проекты полностью приведены в виде ресурсов в теме «Журнал клуба программистов. Третий выпуск» или непосредственно в архиве с журналом (папка Lesson3). Продолжение наших уроков смотрите в следующем выпуске журнала «ПРОграммист»…

Комментарий автора.

Перед запуском в среде Дельфи скопируйте в папку с проектом папку data с графическими файлами.

Это статья из третьего номера журнала “ПРОграммист”.
Скачать его можно по ссылке.
Ознакомиться со всеми номерами журнала.

Обсудить на форуме — Как работать с графикой на канве в среде Дельфи