Работа с несколькими спрайтами


Содержание

Практическая работа №5

на «3» — набрать команды из практической. Опубликовать проект и добавить ссылку на ОПУБЛИКОВАННЫЙ проект.

на «4» и «5» — сделать Дополнительное задание 1 или 2. Проекты НЕ ЗАБУДЬТЕ ОПУБЛИКОВАТЬ. и потом вставить в таблицу

Практическая работа № 5

«Создание сложной анимации с несколькими спрайтами»

Цель: научиться создавать проекты с несколькими спрайтами.

Задание. Создание проекта «Дискотека».

Технология выполнения задания.

1. Запустите программу Scratch.

2. Удалите из проекта Спрайт 1, он нам не понадобится для работы.

3. Добавьте в проект спрайт из папки people под названием breakdancer-1.

4. Для нового спрайта добавьте еще три костюма breakdancer- b , breakdancer- c . У Вас должно получиться примерно так, как показано на рисунке.

5. Для Спрайта 1 составьте следующий скрипт.

7. Добавьте второго танцора и самостоятельно придумайте ему повторяющиеся движения.

8. Проверьте работу вашего проекта: перейдите в режим презентации и нажмите на зеленый флаг.

Дополнительное задание 1. Создайте проект из 3-х танцоров (начало движения ) добавьте музыку, смену цветов и костюмов. Для каждого спрайта пишется свой скрипт.

Дополнительное задание 2. Сделайте анимацию для морских обитателей 3 спрайта. Рыбы плавают, меняют цвета и размеры. Для каждого спрайта пишется свой скрипт. Можно добавить музыку.

Работа со спрайтами в css

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

При помощи css спрайтов мы можем объединить все иконки и кнопки в одном файле. Тем самым будет грузиться только одна картинка, а из нее уже при помощи css будут браться отдельные элементы.

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

Пример работы со спрайтами в css

Работу со спрайтами рассмотрим на реальном примере. Например, для нашего сайта, нам нужно сделать кнопку (пример кнопки справа -> ) при нажатии на которую будет происходить переход из блога на основной сайт компании. Кнопка будет состоять из состояний:

  1. Кнопка не активна
  2. При наведении на кнопку она будет подсвечена
  3. При нажатии на кнопку она будет вдавлена

Для удобства работы со спрайтами есть много сервисов, один из самых удобных это spritecow.com, его мы и будем использовать в нашем примере.

Для начала в фотошопе нарисуем 3 состояния кнопки, должно получиться что-то вроде этого:

Скачать картинку можно от сюда. Как видно из картинки, в одном файле размещено сразу 3 картинки.

Теперь откройте сервис spritecow.com, нажмите Open, и выберите созданную картинку. На экране вы увидите:

Теперь нажмите на первую картинку в спрайте (состояние 1, кнопка не активна), и в низу вы увидите координаты картинки:

Тоже самое делаем с остальными состояниями кнопки, кликаем, и сохраняем позиции.

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

Вот пример кода:

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

Работа со спрайтами

Для начала нужно разобраться, что же такое спрайт. Вот такое описание я нашел в книге Андрэ Ла Мота:

» Знаете, есть такой газированный напиток. Снова шучу. На самом деле спрайты — это маленькие объектики, которые находятся на игровом поле и могут двигаться. Этот термин прижился с легкой руки программистов фирмы Atari и Apple в середине 70-х годов. Спрайты — это персонажи в играх для ПК, которые могут без труда перемещаться по экрану, изменять цвет и размер «

И так, спрайт это персонаж игры. Не углубляясь в дебри программирования, могу сказать что спрайт это массив из цветов — для простоты представим его как BMP файл или TBitmap, тем более что, этот формат поддерживаемый windows и не содержащий компрессии.

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

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

Не правда ли есть разница, и довольно заметная. При выводе на экран использовался один и тот же рисунок, но все зависит от способа выведения спрайта.1-й способ ( маг в белом квадрате ) основан на простом копировании одной области памяти в другую. 2-й способ ( маг на фоне ) то же копирование, но интеллектуальное. Копирование происходит по следующему алгоритму: Если цвет копируемого элементы матрицы ( область памяти ) соответствует значению цвета Transparent Color, то копирования не происходит, переходим к следующему элементу. 3-й способ так же основан на копирование области памяти, но с применением логических операций — маски.
Спрайты c готовой маской

Способов вывести спрайт на поверхность экрана много. Рассмотрим один из них. Это способ, когда отдельно рисуется спрайт и отдельно маска. Для этого нам понадобится сам спрайт, его маска и буфер. Спрайт
Маска спрайта

И спрайт и маска должны иметь одинаковый размер, в данном примере 50×50. Для чего нужна маска? Она нужна для того, чтобы при выводе спрайта не затиралось изображение, которое находится под ним. Маску можно заготовить отдельно в BMP файле — более быстрый способ, а можно рассчитать программно.Спрайт и маску помещаем в TBitmap. Wizard:=Tbitmap.Create;
Wizard.Loadfromfile(‘spr1.bmp’); // Bitmap для спрайта
WizardMask:=Tbitmap.Create;
WizardMask.Loadfromfile(‘spr2.bmp’); // Bitmap для маски

Ну вот, у нас есть спрайт, маска и нам это вывести его на экран. Для этого существует функция Win32Api: BitBlt (param_1, X1, Y1, dX1, dY1, param_2, X2, Y2, param_3);

Param_1 — Handle на поверхность куда выводить.
X1, Y1 — Смещение от начала координат.
dX1, dY1 — Размер выводимого изображения.
Param_2 — Handle откуда брать.
X2, Y2 — Размер выводимого изображения.
Param_3 — Параметры копирования.

Для нашего случая: BitBlt(Buffer.Canvas.Handle, X, Y, 50, 50, WizardMask.Canvas.Handle, 0, 0, SrcPaint); BitBlt(Buffer.Canvas.Handle, X, Y, 50, 50, Wizard.Canvas.Handle, 0, 0, SrcAnd);

SrcPaint — Копировать только белое.
SrcAnd — Копировать все кроме белого.

Сначала выводим маску с параметром SrcPaint, а затем в тоже место ( координаты X, Y) сам спрайт с параметром SrcAnd. Осталось рассмотреть зачем же нужен буфер. При выводе одного спрайта вы не почувствуете мелькания изображения, но когда их будет 100-200 это будет заметно. По этому все спрайты копируются в буфер — это Tbitmap размером с экран или окно, короче изменяемой области. Вот как окончательно будет выглядеть фрагмент программы : .
var
Wizard, WizardMask, Buffer:Tbitmap;
X, Y:integer;
.
Wizard:=Tbitmap.Create;
Wizard.Loadfromfile(‘spr1.bmp’);
WizardMask:=Tbitmap.Create;
WizardMask.Loadfromfile(‘spr2.bmp’);
Buffer:=Tbitmap.Create; // Копируем маску в буфер
BitBlt(Buffer.Canvas.Handle, X, Y, 50, 50, WizardMask.Canvas.Handle, 0, 0, SrcPaint);
// Копируем спрайт в буфер
BitBlt(Buffer.Canvas.Handle, X, Y, 50, 50, Wizard.Canvas.Handle, 0, 0, SrcAnd);
.
// Перемещаем буфер на форму BitBlt(Form1.Canvas.Handle, 0, 0, 320, 240, Buffer.Canvas.Handle, 0, 0, SrcCopy);

Флаг SrcCopy означает копирование без изменения, аналогичен простому перемещению одного участка памяти в другой.Не нужно думать, что готовая маска это прошлое компьютерных игр. В любом случае, маска создается, только иногда это делается программно, а иногда заготавливается в виде отдельного файла. Какой вариант лучше, нужно смотреть по конкретному примеру.Я не буду расписывать все параметры BitBlt, если интересно смотрите сами в Delphi Help. Ну вот и все.

Напоследок исходники и картина творчества


.Cпрайты c программной маской — Transparent

Другой метод вывода спрайтов — методом программной маски. Этот способ, немного медленнее, но не требует возни с изготовлением масок. Это не значит, что маски вообще нет. Маска присутствует и создается в памяти. Для счастливых обладателей Windows NT подойдет способ, который используется в самой ОС. Это функция MaskBlt. Судя по ее названию, она позволяет выводить растры используя битовые маски.Привиду пример на спрайтах из игры Эпоха Империй I. Наша задача, как и во всех предыдущих примерах, вывести спрайт с Transparent Color (по русски плохо звучит). В игре он черный.
Начальный вариант спрайта Это уже полученная маска Вызвали MaskBLT MaskBlt + BitBlt
Рис 1 Рис 2 Рис 3 Рис 4

var
Sprite, Mask:TBitmap;
begin
Sprite:=TBitmap.Create;
Sprite.LoadFromFile(‘G0100219.bmp’);
Mask:=TBitmap.Create;
Mask.LoadFromFile(‘G0100219.bmp’);
Mask.Mask(clBlack); // Создание маски
// Преобразование в маску, после этого получится Bitmap, представленный на Рис 2
MaskBlt(Form1.Canvas.Handle, 10, 10, Sprite.Width, Sprite.Height, Sprite.Canvas.Handle, 0, 0, Mask.MaskHandle, 0, 0, SRCPAINT);
// После вызова этой функции, экран выглядит как на рисунке 3.
BitBlt(Form1.Canvas.Handle, 10, 10, Sprite.Width, Sprite.Height, Sprite.Canvas.Handle, 0, 0, SRCPAINT);
end;

С Windows NT все понятно, но как быть в других ОС? ( Хотя возможно, эта функция появится(-лась) в Windows 2000 и Windows Me). Использовать библиотеки сторонних разработчиков. Если они поставляются с исходным кодом, то вы можете перенести необходимые вам процедуры в собственный модуль. Я нашел самую быструю библиотеку для работы с графикой — Media Library Component Version 1.93. В примере используется только часть ее. Нам понадобится только одна процедура: DrawBitmapTransparent(param_1, X, Y, param_2, param_3);

param_1 — Canvas, куда копировать
X, Y — Смещение
param_2 — TBitmap, что копировать.
param_3 — TColor, цвет Transparent — этот цвет не будет копироваться

Применение только данной библиотеки не принципиально. Практически в любом наборе VCL компонентов от сторониих производителей есть процедуры или функции для вывода Bitmap с использованием цвета прозрачности. Такие процедуры есть в библиотеке RXLib, LMD Tools, Cool Control и многих других.Для нашего примера: DrawBitmapTransparent(Buffer.Canvas, WizardX, WizardY, Wizard, clRed); Спрайт должен выглядеть так:

Небольшое замечание по поводу Transparent. Цвет надо выбирать такой, которого нет на самом спрайте, иначе неизбежны «дырки» в изображении. Лучше всего такой : #00FF00 — ярко зеленый, но можно использовать черный или белый.В предыдущей главе «Работа спрайта c готовой маской» я подвесил передвижение спрайта на таймер: procedure TForm1.Timer1Timer(Sender: TObject);
begin
. // тело цикла
end.

Да cпособ хорош, но не так быстродейственен. Есть еще пара вариантов :

1. Создать поток TThread — в примере разобран именно он.
2. «Подвесить» на IDLРассмотрим сначала второй способ т.к. он наименее прогрессивен:) Пишем такую процедуру: procedure TForm1.Tic(Sender: TObject; var Done: Boolean);
begin
.
// Сюда заносим, что надо исполнять.
.
Done := false;
end;

. и еще немного: procedure TForm1.FormCreate(Sender: TObject);
begin
.
Application.On >end;

Способ быстрее в 1-2 раз чем таймер, но не лишен недостатков. Не буду объяснять почему. Первый способ самый оптимальный для игры, как самой сложной так и простой. Реализуется он с помощью потоков. В игре их можно создать несколько — один для обработки графики, другой для AI, третий для музыки и т.д. У каждого потока свой приоритет, но высший только у одного. При работе с несколькими потоками не забывайте их «прибивать» при выходе из программы.Сначала заводим новый класс: TGameRead=class(TThread) // класс для таймера игры
protected
procedure Execute;override; // Запуск
procedure Tic; // Один тик программы
end;

Потом переменную : var
.
T1:TGameRead;
.

Описываем процедуры класса : procedure TGameRead.execute;
begin
repeat
synchronize(Tic);
until Terminated
end;procedure TGameRead.Tic;
begin
.
// Тут пишем все как в TTimer — OnTime
.
end;

В событии Form1.Create инициализируем поток, и задаем приоритет. Расписывать все приоритеты не буду, читайте Delphi Help . и не забываем убрать за собой: .
T1:=TGameRead.Create(false); // Создаем поток
T1.Priority:=TpHighest; // Ставим приоритет

.
procedure TForm1.FormDestroy(Sender: TObject);
begin
T1.Suspend;// Приостановим и прибьем
T1.Free;
end;

Ну вот и все. Ах да, вас наверное заинтересовала строчка FPS. Так это тоже самое, что выдает Quake на запрос «showframerate» или что-то такого плана — количество кадров в секунду. Делается это так : заводится переменная: var
G:integer;
.

При каждом вызове потока Tic, она увеличивается на единицу: procedure TGameRead.Tic;
begin
.
Inc(G); // Увеличиваем значение G
end;

Создаем таймер с интервалом 1000 — это 1 секунда, и в событии OnTime выводим значение G в метку. В значении G будет количество вызовов процедуры DoSome за 1 секунду: procedure TForm1.Timer1Timer(Sender: TObject);
begin
label1.caption:=’FPS :’+IntToStr(G);
G:=0; // Обнуляем G
end;

Библиотека Pygame / Часть 2. Работа со спрайтами

Вторая часть серии руководств «Разработка игр с помощью Pygame». Она предназначена для программистов начального и среднего уровней, которые заинтересованы в создании игр и улучшении собственных навыков кодирования на Python. Начать стоит с урока: «Библиотека Pygame / Часть 1. Введение».

Что такое спрайт?

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

Для загрузки и отрисовки спрайтов в случай этой игры их нужно добавить в разделы “Обновление” и “Визуализация” игрового цикла. Несложно представить, что если в игре много спрайтов, то цикл довольно быстро станет большим и запутанным. В Pygame для этого есть решение: группировка спрайтов.

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

Илон Маск рекомендует:  Общие вопросы faq по php

Теперь этой возможностью можно воспользоваться, добавив группу целиком в цикл:

Теперь при создании каждого спрайта, главное убедиться, что он добавлен в группу all_sprites . Такой спрайт будет автоматически отрисован на экране и обновляться в цикле.

Создание спрайта

Можно переходить к созданию первого спрайта. В Pygame все спрайты выступают объектами. Если вы не работали с этим типом данных в Python, то для начала достаточно знать, что это удобный способ группировки данных и кода в единую сущность. Поначалу это может путать, но спрайты Pygame — отличная возможность попрактиковаться в работе с объектами и понять, как они работают.

Начнем с определения нового спрайта:

class сообщает Python, что определяется новый объект, который будет спрайтом игрока. Его тип pygame.sprite.Sprite . Это значит, что он будет основан на заранее определенном в Pygame классе Sprite .

Первое, что нужно в определении class — специальная функция __init__() , включающая код, который будет запущен при создании нового объекта этого типа. Также у каждого спрайта в Pygame должно быть два свойства: image и rect .

Тест на знание python

Первая строка, Pygame.sprite.Sprite.__init__(self) требуется в Pygame — она запускает инициализатор встроенных классов Sprite . Далее необходимо определить свойство image . Сейчас просто создадим квадрат размером 50х50 и заполним его зеленым ( GREEN ) цветом. Чуть позже вы узнаете, как сделать image спрайта красивее, используя, например, персонажа или космический корабль, но сейчас достаточно сплошного квадрата.

Дальше необходимо определить rect спрайта. Это сокращенное от rectangle (прямоугольник). Прямоугольники повсеместно используются в Pygame для отслеживания координат объектов. Команда get_rect() оценивает изображение image и высчитывает прямоугольник, способный окружить его.

rect можно использовать для размещения спрайта в любом месте. Начнем с создания спрайта по центру:

Теперь, после определения спрайта игрока Player, нужно отрисовать (создать) его, инициализировав экземпляр (instance) класса Player. Также нужно обязательно добавить спрайт в группу all_sprites .

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

Движение спрайта

В игровом цикле есть функция all_sprites.update() . Это значит, что для каждого спрайта в группе Pygame ищет функцию update() и запускает ее. Чтобы спрайт двигался, нужно определить его правила обновления:

Это значит, что при каждом игровом цикле x-координата спрайта будет увеличиваться на 5 пикселей. Запустите программу, чтобы посмотреть, как он скрывается за пределами экрана, достигая правой стороны.

Исправить это можно, заставив спрайт двигаться по кругу — когда он добирается до правой стороны экрана, просто переносить его влево. Это легко сделать, используя элемент управления rect спрайта:

Так, если левая сторона rect пропадает с экрана, просто задаем значение правого края равное 0:

Теперь можно видеть, как спрайт будто бы двигается по кругу.

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

Код урока:

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

Работа со спрайтами в Unity Sprite Editor

Бывают такие ситуации когда текстура спрайта содержит не только один элемент, гораздо удобней объединить несколько изображений связанных друг с другом в одно изображение. Например, изображение может содержать составные части персонажа, бег, прыжок , стрельба , состояние покоя. Для этих целей Unity предоставляет Sprite Editor, который позволяет с извлекать элементы составного изображения.

Убедитесь, что графический объект, который вы хотите отредактировать, имеет тип текстуры, заданный для Sprite (2D и UI).

Для текстур Sprite с несколькими элементами необходимо, чтобы режим Sprite был установлен на Multiple in Inector.


Откройте редактор спрайтов

1. Выберите 2D-изображение, которое вы хотите отредактировать, из Project View

Вы не можете редактировать спрайт, который находится в режиме просмотра из сцены.

2. Нажмите кнопку «Редактор спрайтов» в Инспекторе импорта и отобразится редактор спрайтов.

Установите режим Sprite в Multiple в Inspector Import Text, если ваше изображение имеет несколько элементов.

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

Кроме составного изображения, вы увидите другие элементы управления в редакторе. Слайдер в правом верхнем углу управляет приближением, в то время как кнопка с цветными полосками слева от него изменяет отображение альфа-канала и обычного вида изображения. Самый важный элемент управления это меню Slice в левом верхнем углу, который предоставляет опции для автоматической нарезки элементов изображения. Кнопки Apply and Revert позволяют вам сохранить или отменить сделанные изменения.

Использование редактора

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

Элементы управления на панели позволяют выбрать имя для спрайта и задать положение и размер прямоугольника по его координатам. Ширина границы, для левой, верхней, правой и нижней, может быть указана в пикселях. Существуют также настройки для оси спрайта, которые Unity использует как начало координат и основную «опорную точку» графического объекта. Вы можете выбрать из нескольких позиций по умолчанию для прямоугольника.

Кнопка Trim рядом с пунктом меню Slice изменит размер прямоугольника так, чтобы он плотно касался края изображения на основе прозрачности. Границы поддерживаются только для системы пользовательского интерфейса, а не для 2D SpriteRenderer.

Автоматическая нарезка

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

Если тип разреза установлен на «Автоматически», редактор попытается угадать границы элементов спрайтов по прозрачности. Вы можете установить пивот по умолчанию для каждого идентифицированного спрайта. В меню «Метод» вы можете выбрать, как работать с существующими выборами в окне. Опция «Удалить существующий» просто заменит все, что уже выбрано, Smart попытается создать новые прямоугольники, сохранив или отредактировав существующие, и Safe добавит новые прямоугольники, не изменив ничего уже на месте.

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

Значения размера пикселя определяют высоту и ширину плиток в пикселях. Если вы выбрали сетку по количеству ячеек, Column & Row определяет количество столбцов и строк, используемых для нарезки. Вы также можете использовать значения смещения, чтобы сдвинуть положение сетки в левом верхнем углу изображения и значения заполнения, чтобы немного вставить прямоугольники спрайтов из сетки. Pivot может быть настроен с одним из девяти предустановленных мест или может быть установлено местоположение пользовательского поворота.

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

Ведение работы со спрайтами в CSS

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

Сss спрайты способствуют объединению всех иконок и кнопок в один файл. Это позволит грузить только одну картинку, а из нее с помощью css будут подбираться отдельные элементы.

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

Разбор примера работы со спрайтами в css

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

  1. Кнопка не активна
  2. Если навести на кнопку, то она будет подсвечена
  3. Если нажать на кнопку она будет вдавлена

Чтобы удобней было работать со спрайтами созданы различные сервисы. Одним из наиболее простых является spritecow.com, им мы и воспользуемся для нашего примера.

Для начала в фотошопе нарисуем 3 состояния кнопки, должно получиться примерно это:

Как видно из картинки, в одном файле размещено сразу 3 картинки.

Теперь откройте сервис spritecow.com , нажмите Open, и выберите созданную картинку. На экране появится:

Теперь следует нажать на первое изображение в спрайте (состояние 1, кнопка не активна), и внизу вам будут представлены координаты картинки:

Такие же действия производим и с остальными состояниями кнопки, кликаем, и сохраняем позиции.

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

Обеспечим вас примером кода:

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

Работа со спрайтами

Delphi , Графика и Игры , Создание игр

  • Введение
  • Спрайты c готовой маской
  • Cпрайты c программной маской Transparent
  • Использование TImageList
  • Использование Direct X
  • Список ссылок

Для начала нужно разобраться, что же такое спрайт. Вот такое описание я нашел в книге Андрэ Ла Мота:

» Знаете, есть такой газированный напиток. Снова шучу. На самом деле спрайты — это маленькие объектики, которые находятся на игровом поле и могут двигаться. Этот термин прижился с легкой руки программистов фирмы Atari и Apple в середине 70-х годов. Спрайты — это персонажи в играх для ПК, которые могут без труда перемещаться по экрану, изменять цвет и размер «

И так, спрайт это персонаж игры. Не углубляясь в дебри программирования, могу сказать что спрайт это массив из цветов — для простаты представим его как BMP файл или TBitmap, тем более что, этот формат поддерживаемый windows и не содержащий компрессии.

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

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

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

Не правда ли есть разница, и довольно заметная. При выводе на экран использовался один и тот же рисунок, но все зависит от способа выведения спрайта.

1-й способ ( маг в белом квадрате ) основан на простом копировании одной области памяти в другую.

2-й способ ( маг на фоне ) то же копирование, но интеллектуальное. Копирование происходит по следующему алгоритму: Если цвет копируемого элементы матрицы ( область памяти ) соответствует значению цвета Transparent Color, то копирования не происходит, переходим к следующему элементу.

3-й способ так же основан на копирование области памяти, но с применением логических операций — маски.

Спрайты c готовой маской

Способов вывести спрайт на поверхность экрана много. Рассмотрим один из них. Это способ, когда отдельно рисуется спрайт и отдельно маска. Для этого нам понадобится сам спрайт, его маска и буфер.


Спрайт Маска спрайта

И спрайт и маска должны иметь одинаковый размер, в данном примере 50×50. Для чего нужна маска? Она нужна для того, чтобы при выводе спрайта не затиралось изображение, которое находится под ним. Маску можно заготовить отдельно в BMP файле — более быстрый способ, а можно рассчитать программно.Спрайт и маску помещаем в TBitmap.

Ну вот, у нас есть спрайт, маска и нам это вывести его на экран. Для этого существует функция Win32Api:

  • Param_1 — Handle на поверхность куда выводить.
  • X1,Y1 — Смещение от начала координат.
  • dX1,dY1 — Размер выводимого изображения.
  • Param_2 — Handle откуда брать.
  • X2,Y2 — Размер выводимого изображения.
  • Param_3 — Параметры копирования.

Для нашего случая:

  • SrcPaint — Копировать только белое.
  • SrcAnd — Копировать все кроме белого.

Сначала выводим маску с параметром SrcPaint, а затем в тоже место ( координаты X,Y) сам спрайт с параметром SrcAnd.

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

Флаг SrcCopy означает копирование без изменения, аналогичен простому перемещению одного участка памяти в другой.

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

Я не буду расписывать все параметры BitBlt, если интересно смотрите сами в Delphi Help. Ну вот и все. Напоследок картина творчества.

Cпрайты c программной маской — Transparent

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

Для счастливых обладателей Windows NT подойдет способ, который используется в самой ОС. Это функция MaskBlt. Судя по ее названию, она позволяет выводить растры используя битовые маски.

Привиду пример на спрайтах из игры Эпоха Империй I. Наша задача, как и во всех предыдущих примерах, вывести спрайт с Transparent Color (по русски плохо звучит). В игре он черный.

Начальный вариант спрайта Это уже полученная маска Вызвали MaskBLT MaskBlt + BitBlt

С Windows NT все понятно, но как быть в других ОС? ( Хотя возможно, эта функция появится(-лась) в Windows 2000 и Windows Me). Использовать библиотеки сторонних разработчиков. Если они поставляются с исходным кодом, то вы можете перенести необходимые вам процедуры в собственный модуль.

Илон Маск рекомендует:  Что такое код cal_to_jd

Я нашел самую быструю библиотеку для работы с графикой — Media Library Component Version 1.93. В примере используется только часть ее. Нам понадобится только одна процедура:

  • param_1 — Canvas, куда копировать
  • X,Y — Смещение
  • param_2 — TBitmap, что копировать.
  • param_3 — TColor, цвет Transparent — этот цвет не будет копироваться

Применение только данной библиотеки не принципиально. Практически в любом наборе VCL компонентов от сторониих производителей есть процедуры или функции для вывода Bitmap с использованием цвета прозрачности. Такие процедуры есть в библиотеке RXLib, LMD Tools, Cool Control и многих других.

Для нашего примера: DrawBitmapTransparent(Buffer.Canvas,WizardX,WizardY,Wizard,clRed); Спрайт должен выглядеть так:

Небольшое замечание по поводу Transparent. Цвет надо выбирать такой, которого нет на самом спрайте, иначе неизбежны «дырки» в изображении. Лучше всего такой : #00FF00 — ярко зеленый, но можно использовать черный или белый.

В предыдущей главе «Работа спрайта c готовой маской» я подвесил передвижение спрайта на таймер:

Да cпособ хорош, но не так быстродейственен. Есть еще пара вариантов :

1. Создать поток TThread — в примере разобран именно он.
2. «Подвесить» на IDL

Рассмотрим сначала второй способ т.к. он наименее прогрессивен:) Пишем такую процедуру:

Способ быстрее в 1-2 раз чем таймер, но не лишен недостатков. Не буду объяснять почему. Первый способ самый оптимальный для игры, как самой сложной так и простой. Реализуется он с помощью потоков. В игре их можно создать несколько — один для обработки графики, другой для AI, третий для музыки и т.д. У каждого потока свой приоритет, но высший только у одного. При работе с несколькими потоками не забывайте их «прибивать» при выходе из программы.

Сначала заводим новый класс:

На моем средненьком Pentium AMD 233 c Intel 740 8M — выдает 90-100 кадров в секунду, при окне 360X360. Для начала неплохо!

P.S. У вас может возникнуть вопрос — почему передвижение спрайта за мышкой. Ответ: наименьшие затраты на писанину тест программы, при неплохом разнообразии движения.

Использование внешних процедур для Transparent вывода спрайтов, хорошо но есть несколько минусов данного способа:

во первых эти процедуры не слишком оптимизированы — их основное предназначение вывод простеньких элементов приложения, таких как иконок, картинок кнопок и т.д. Хотя это не относится к некоторым библиотекам, код которых на 90% состоит из ассемблера.

во вторых хранить выводимое изображение нужно в bmp файле, хотя подойдет и любой другой, не применяющий компрессию с потерей ( Jpeg) . Если картинок более 1-й, а при нормальной анимации их набирается порядка 150-200 на один юнит, то сложно получать именно нужный участок файла.

В bmp файле содержатся 8 картинок — 64×64 пикселя. Нужно получить доступ к 6-й картинке ( на рисунке помечена розовым квадратом)- ее координаты будут 128,64

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

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

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

Первый параметр — это Bitmap, второй Transparent Color — цвет прозрачности. Если Вам не нужно использовать цвет прозрачности, то нужно использовать процедуру Add. После загрузки всех картинок, можно приступать к их выводу на экран. Для этого существует процедура:

Первый параметр Canvas на который будет произведена отрисовка, второй и третий координаты для вывода X и Y а четвертый индекс или порядковый номер выводимого изображения.

Тот же самое, но с использованием BitBlt:

Тот же самое, но с использованием BitBlt:

Думаю пояснять нет нужды, что использовать TImageList лучше, и проще. Пример работы с TImageList описан в файле. Там показана анимация персонажа из игры WarCraft и Warlord III. Я так и не разобрался как работает механизм отрисовки в TImageList. Мои раскопки привели к такой функции :

HImageList — Handle на TImageList.

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

Я заинтересовался данным вопросом и продолжал копать стандартные библиотеки Windows и компоненты. Возможно информация по данным вопросам содержится во многочисленных SDK, выпускаемых Microsoft. В компоненте TFastDIB я наткнулся на процедуру Draw:

Естественно меня заинтересовала процедура TransBlt и вот что я нашел:

Мне захотелось посмотреть, а что еще может библиотека ‘msimg32.dll’ и вот полный список:


Все, хватит, а то некоторые читатели и так ничего не поняли. Но для интересующихся скажу — не все процедуры и функции описаны в Delphi, многое не документировано.

Чем плохи рассмотренные выше методы вывода спрайтов — они медленные. Хочу подчеркнуть, что для каждой программы нужно выбирать свои методы написания. Конкретное задание требует своих средств исполнения. То что Microsoft написал библиотеку Direct X не значит что тут же нужно писать всю графику используя ее.

Приведу пример. Самая популярная игра для Windows — Quake II, Warcraft, Diablo — нет САПЕР и ПАСЬЯНС. Можете не верить, но это факт. В первую категорию играют ограниченный контингент людей в последнюю играли ВСЕ. Я это говорю к тому, что если вы пишите графическое приложение, то нужно ориентироваться на его потребности и выбирать соответствующие технологию зависимости от них. Какие это потребности:

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

Используя Direct X можно получит все вышеперечисленное. Набор этих библиотек, изначально разрабатывался как средство для работы с графикой. Что было, когда писали под DOS: строили в участке памяти ( back buffer ) какое то изображение или копировали туда спрайты, а потом перемещали этот back buffer в область «экранной» памяти. Сразу отрисовывался весь экран. С приходом Windows, переместить участок памяти в экранную область не возможно. Приходится использовать Canvas, Handle.

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

С появлением DirectX появились и аппаратные поддержки таких необходимых вещей как: Trancparent Color и Bit blitting.

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

Итак процесс работы таков, загружаете спрайты на поверхность (ISurface) затем нужно вызвать процедуру BLT или BLTFAST, потом поменять буферную и видимую поверхность командой FLIP и все.

В начале раздела я написал Direct X, но я несколько обманул Вас. Я расскажу как выводить спрайты с помощью Direct X, но с использованием набора VCL компонентов DelphiX . Я это делаю по той простой причине, что если я напишу пример используя стандартные модули DirectX то их некоторые не поймут, отчаяться и бросят программировать вообще :) Согласитесь не все сразу поймут, что делает данная процедура, хотя она всего лишь меняет поверхности.

По этому я и решил использовать DelphiX. Писать с помошью него очень просто. Нам потребуется всего два компонента. Первый TDXDraw — если объяснить коротко, то это аналог TCanvas. Еще один компонент это TDXImageList — прямой аналог TImageList, единственно все элементы являются TDIB и не содержат ни каких масок.

Что нужно сделать чтобы успешно создать и анимировать спрайт. Как и с TImageList нужно загрузить BMP файл в элемент TDXImageList. Элемент TImageList предварительно нужно создать в программе или создать из Object Inspector.

Вот и все. Прямая аналогия с TImageList . очень удобно переносить код.

Пример работы со спрайтами : перемещение, создание, уничтожение ( смерть юнита ), перемещение в заданную точку, атака противника. Спрайты взяты из игры Diablo. Для компиляции потребуется DelphiX.

Статья Работа со спрайтами раздела Графика и Игры Создание игр может быть полезна для разработчиков на Delphi и FreePascal.

Комментарии и вопросы

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

Unity: Как отобразить несколько спрайтов в одном объекте?

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

  1. Шина
  2. Диск
  3. Колпак

Есть несколько разных спрайтов дисков колеса, и колпак может быть установлен или не установлен.
Я пытался это организовать так:
Создал GameObject (назвал его Wheel) к нему добавил Sprite Renderer к которому подвязал спрайт покрышки, т.к. он не будет меняться. В Wheel создал четыре дочерних GameObject (Disk1, Disk2, Disk3, Cup), у каждого Sprite Renderer со своим спрайтом.

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

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

но не знаю как обратиться к SpriteRenderer дочернего объекта.

  • Вопрос задан 20 июн.
  • 94 просмотра

но не знаю как обратиться к SpriteRenderer дочернего объекта.

Самое правильное — через [SerializeField] — и перетянуть в инспекторе.

Неправильное, но рабочее — через всякие FindObject с использованием имен/тегов/слоев/скриптов-меток.

Распишу подробнее решение, которое предложил GavriKos.

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

В поле Cup, появившееся у компонента скрипта в Inspector, перетаскиваем из иерархии спрайт колпака.

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

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

мой ответ скорее про организацию этого дела.
вам нет смысла делать иерархихию типа
Wheel
-Disk1
-Disk2
-Disk3

можно просто выставить
Wheel
-Disk
—Cup

и сделать скрипт. где в одном поле указать ссылку на Disk.
В другом поле указать ссылку на Cup.
И завести два массива текстур. под диски и колпаки. и просто заменять картинку в компоненте Sprite. вместо включения выключения кучи объектов) если позиции у них всегда остаются одни и те же.

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

Учебное пособие «Среда программирования Scratch»

«Среда программирования Scratch»

г. Нижневартовск, 2011

Описание программы. 4

Как написать программу? 5

Блок движение 5

Блок – внешность. 6

Блок контроля. 7

Блок переменные 10

Практическая работа № 1 «Знакомство с интерфейсом. Создание анимации для спрайта Кот» 12


Практическая работа № 2 «Смена костюмов спрайта. Создание анимации по смене костюмов» 14

Практическая работа № 3 «Добавление сцен в проект. Смена сцены» 16

Практическая работа № 4 «Добавление нового спрайта в проект. Создание анимации для него» 19

Практическая работа № 5 «Добавление звуковых эффектов в проект» 20

Практическая работа № 6 «Создание сложной анимации в Scratch с участием одного спрайта» 22

Практическая работа № 7 «Создание сложной анимации с несколькими спрайтами» 25

Список источников 27

Изучение команд среды программирования Scratch

Описание программы

Среда программирования Scratch позволяет детям создавать собственные анимированные и интерактивные проекты: игры, мультики и другие произведения. Ими можно обмениваться внутри международной среды, которая постепенно формируется в сети Интернет.

В основе Scratch традиции языка Лого. Если упоминание Лого, а также его агента-исполнителя Черепашки не дает вам представления об этой программе, вспомните конструктор Лего, по принципам которого и работает Лого. В среде Скретч пользователь из отдельных кирпичиков (блоков программы) собирает свой мультимедийный проект точно так же, как конструкцию из кубиков Лего. Простая форма позволяет даже самым маленьким приобщаться к программированию, превращая обучение в увлекательную игру.

Scratch — это новая среда программирования, которая позволяет детям создавать собственные анимированные и интерактивные истории, презентации, модели, игры и другие произведения. Этими произведениями можно обмениваться внутри международной среды, которая постепенно формируется в сети Интернет.

Scratch базируется на традициях языка Лого и Лего-Лого. Может быть, не всем в России знаком язык Лого и его агент-исполнитель Черепашка, но уж конструкторы Лего знают все. В среде Scratch используется метафора кирпичиков Лего, из которых даже самые маленькие дети могут собрать простейшие конструкции. Но, начав с малого, можно дальше развивать и расширять свое умение строить и программировать. Scratch создавался специально для того, чтобы подростки 8 – 16 лет использовали его самостоятельно. Эта новая технологическая среда позволяет им выразить себя в компьютерном творчестве.

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

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

Как написать программу?

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

Блок движение

Пройти указанное число шагов. Если число положительное, двигается вперёд, если отрицательное — назад.

Повернуться — стрелочка указывает по часовой или против часов стрелки выполняется поворот.

Повернуться в указанном направлении. Можно выбрать: вверх, вниз, налево или направо.

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

Изменить положение по оси x или по оси y на указанное число шагов.

Установить положение объекта по оси x или y. Используется декартова система координат:

Если x=0 и y=0 — объект находится в центре экрана.

Размеры экрана: x от -240 до 240, y от -180 до 180.

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

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

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

Если попадаешь в край экрана, то отразись от него. Это очень полезно, если Вы не хотите потерять своего героя.

Возвращает значение по оси x или y. Применяется вместе с другими командами.

Блок – звук

Воспроизвести звук (можно выбрать звук). При этом звук можно выбрать в библиотеке – там этих звуков достаточно много. Так же как и библиотека картинок, библиотека звуков расширяется и к ней можно добавлять свои местные звуки в формате .wav, mp3.

Выбрать инструмент, который будет играть. Инструментов в Скретче множество, в несколько прокруток экрана.

Ударные играют указанное число тактов.

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

Илон Маск рекомендует:  Что такое код equalrect

Убрать все звуки

Увеличивает (если число положительное) или уменьшает (если число отрицательное) текущую громкость.

Устанавливает громкость в процентах.

Возвращает значение громкости.

Увеличивает (если число положительное) или уменьшает (если число отрицательное) текущий темп.

Возвращает значение темпа.

Блок – внешность

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

Изменить значение костюма на одну единицу. Имеет смысл только тогда, когда у нас несколько «импортных» костюмов.

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

Сказать фразу, которую мы можем записать в окошечке команды.

Исполнитель останавливает работу, при этом реплика находится рядом с ним.

Говорить фразу ( ) секунд. Реплика висит рядом с объектом.

Скрипт приостанавливается на указанное число секунд


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

цвет — объект меняет свой цвет

рыбий глаз – объект становится выпуклым, если число со знаком «минус» — объект становится более тощим

завихрение — объект искажается

мозаика — объект размножается

яркость — объект становится светлее или темнее (если выбрать отрицательное значение)

призрак — становится более прозрачным.

Устанавливает эффекты в значение, которое мы выбираем.

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

Объект растёт (если число положительное или уменьшается (если со знаком «-«).

Установить размер объекта в процентах от текущего.

Возвращает текущий размер.

Показаться — объект становится видимым.
Спрятаться — он становится невидимым.

Объект перемещается в первый слой, его ничто не закрывает

Объект уходит на несколько слоев внутрь изображения.

Блок контроля

Когда нажмут на (зеленый флажок, на форму героя) произойдет запуск проекта

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

Запускает выполнение блока команд в ответ на полученное сообщение.

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

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

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

Условие, при выполнении которого должны выполняться команды, заключенные внутри конструкции если ( ). Если это условие не выполняется, то выполняются действия внутри или ( ).

Повторение. Параметр указывает, сколько раз нужно повторить блоки команд, заключенные внутри блока повторить ( ).

Передать сообщение. Переданное сообщение может запускать активность другого исполнителя. Работает в сочетании с когда я получу ( ).

Проверка условия. Действия, заключённые внутри блока выполняются, пока условие верно.

Ждать, пока не выполнится условие.

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

Остановить выполнение всех программ.

Блок сенсоры

Возвращает значение указателя мыши по оси x.

Возвращает значение указателя мыши по оси y.

Проверяет, нажата ли управляющая клавиша мышки?

Нажата ли какая-нибудь другая клавиша?

Касается ли наш объект мышки или другого существа?
Касается ли наш объект цвета ( )?

Соприкасается ли цвет ( ) с цветом ( )

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

Значение (размер, объем, костюм, положение по оси x или y) у выбранного объекта.

Сбрасывается значение таймера.

Возвращает значение таймера

Громкость. Возвращает громкость.

Возвращает значение сенсора.

Блок числа

Кирпичики вычислений можно использовать только внутри строительных блоков. Сами по себе как строительный материал эти кирпичики использовать нельзя. Они возвращают результат.

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

Сравнение: больше, равно, меньше.

Случайное число в интервале от ( ) и до ( ).

Эти блоки содержат входные окошки, куда вставляются кирпичики сравнений.

Функция (квадратный корень, логарифм, синус, косинус и т. д.)

Блок перо


Очистить экран от всех следов, которые на нем оставили объекты.

Опустить перо. После этой команды за движущимся объектом будет оставаться след.

Поднять перо. При движении объекта след не остаётся.

Выбрать цвет, которым мы собираемся рисовать

Изменить цвет по отношению к текущему. Можно использовать положительные и отрицательные числа.

Выбрать численное значение цвета.

Установить размер тени, который оставляет объект.

Изменить размер тени по отношению к текущему.

Изменить размер пера по отношению к текущему.

Установить толщину пера.

Отпечатать объект на экране.

Блок переменные

Изначально в этом ящике лежат 2 блока:

создать и уничтожить переменную.

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

После того как переменная создана, можно устанавливать её значение, изменять её значение, и передавать это значение другим исполнителям.

Если переменная не нужна, её можно удалить:

Установить значение переменной

Возвращает значение переменной.

Изменить значение переменной на ( ). можно увеличить или уменьшить, используя положительные или отрицательные числа).

Показать или спрятать переменную.

Сборник практических работ

Практическая работа № 1

«Знакомство с интерфейсом.

Создание простейшей анимации для спрайта Кот»

Цель: научиться запускать программу Scratch, изучить основные пункты среды, научиться создавать простейшую анимацию в среде Scratch.

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

Технология выполнения задания.

1. Запустите среду Scratch двойным щелчком по ярлыку на рабочем столе.

2. Перед Вами появится окно среды Scratch. Ознакомьтесь с объектами среды.

3. Переместите Кота в левый нижний угол Вашего проекта. Для этого необходимо нажать на Кота левой кнопкой мыши и протянуть его в нужное место.

4. Теперь приступим к написанию скрипта для Кота. Двойным щелчком левой кнопкой мыши откройте область скриптов для Кота.

5. Для того чтобы Кот при столкновении со стеной не поворачивался вверх ногами необходимо нажать на кнопку «только поворот влево — вправо»

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

7. Переведите проект в режим демонстрации.

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

Дополнительное задание 1. Измените программу так, чтобы Кот после того, как дойдет до правого угла, шел вверх до самого конца.

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

Дополнительное задание 3. Составьте следующую анимацию для спрайта Кот: Кот проходит 4 раза по периметру экрана.

Практическая работа № 2

«Смена костюмов спрайта. Создание анимации по смене костюмов»

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

Задание. Создать анимацию плывущей акулы, отрывающей и закрывающей рот.

Технология выполнения задания.

1. Запустите программу Scratch.

2. Удалите из проекта Спрайт 1.

3. Добавьте в проект новый спрайт. Выберите кнопку Новый объект, в папке Animals выберите Спрайт shark1-a.

4. Сделайте активным Спрайт Акула двойным щелчком мыши и перейдите в закладку Костюмы.

5. Добавьте для Спрайта Акула новый костюм. Для этого нажмите на кнопку Импорт и выберите костюм shark1-b.

6. Аналогичным образом добавьте еще один костюм shark1-c. В окне костюм должно получиться примерно следующее.


7. Для Спрайта Акула в закладке скрипты составьте следующую программу.

8. Проверьте работу вашего проекта: перейдите в режим презентации и нажмите на зеленый флаг.

Дополнительное задание 1. Измените проект так, чтобы акула двигалась, открывала /закрывала рот медленнее.

Дополнительное задание 2. Используя Спрайты из папки People, создайте анимацию танцующего человека.

Практическая работа № 3

«Добавление сцен в проект. Смена сцены»

Цель: научиться добавлять в проект новые сцены, производить смену сцен.

Задание. Необходимо создать проект, иллюстрирующий автоматическую смену комнат в квартире.

Технология выполнения задания.

1. Запустите программу Scratch.

2. Удалите из проекта Спрайт 1, он нам не понадобится для работы по смене фона.

3. Выделите объект Сцена и перейдите в закладку Фоны.

4. Добавьте в проект несколько новых фонов. Для этого активизируем диалоговое окно, нажав на кнопку Импорт.

5. После чего закладка Фоны будет выглядеть следующим образом.

6. Удалите пустой Фон1.

7. Аналогичным способом как в пункте 4 добавьте в проект фоны с именами: kitchen, party-room, room1, room2, room3.

8. Закладка Фоны должна выглядеть примерно так.

9. Перейдите в закладку Скрипты и составьте следующую программу.

10. Переведите проект в режим демонстрации.

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

Дополнительное задание 1. Измените порядок смены фонов.

Дополнительное задание 2. Создайте проект, демонстрирующий смену времен года.

Практическая работа № 4

«Добавление нового спрайта в проект.

Создание анимации для него»

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

Задание. Необходимо создать анимацию летающего привидения (если нажатая клавиша «стрелка вправо» – привидение летит право, если нажатая клавиша «стрелка влево» – привидение летит влево).

Технология выполнения задания.

1. Запустите программу Scratch.

2. Удалите из проекта Спрайт 1, он нам не понадобится для работы.

3. Добавьте в проект новый спрайт, нажав кнопку выбрать новый объект из файла. Спрайт выбрать из папки Fantasy, имя спрайта Ghost1.

4. Для выбранного спрайта составьте следующий скрипт.

5. Переведите проект в режим демонстрации.

6. Для запуска проекта нажимайте либо на «стрелку влево» на клавиатуре, либо на «стрелку вправо». Убедитесь, что проект работает нормально.

Дополнительное задание 1. Добавьте возможность осуществлять движение привидения при нажатии на кнопки «стрелка вверх» и «стрелка вниз».

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

Практическая работа № 5

«Добавление звуковых эффектов в проект»

Цель: научиться добавлять в проект звуковые эффекты, настраивать их.

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

Технология выполнения задания.

1. Запустите программу Scratch.

2. Удалите из проекта Спрайт 1, он нам не понадобится для работы.

3. Добавьте в проект спрайт из папки people под названием breakdancer-1.

4. Для нового спрайта добавьте еще три костюма breakdancer-2, breakdancer-3, breakdancer-4. У Вас должно получиться примерно так, как показано на рисунке.

5. Сделайте активной Сцену, перейдите в закладку звуки. Используя кнопку Импорт, добавьте в проект новый звук DrumSet1 из папки Music Loops.

6. Аналогичным способом добавьте в проект звук DrumSet2.

7. Сделайте активным Спрайт 1 и составьте для него следующий скрипт.

8. Сделайте активной сцену и составьте для нее следующий скрипт.

9. Переведите проект в режим демонстрации.


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

Дополнительное задание 1. Добавьте в проект любой фон по Вашему желанию.

Дополнительное задание 2. Создайте проект, в котором девочка под музыку делает зарядку.

Практическая работа № 6

«Создание сложной анимации в Scratch с участием одного спрайта»

Цель: закрепить навыки по работе с одним спрайтом (смена костюмов, настройка сложного движения).

Задание. Необходимо выбрать фон. Кот идет слева направо до конца, говорит привет, поворачивается на 90 градусов, ждет 3 секунды, возвращается назад, превращается в летучую мышь (меняет костюм) и летит по диагонали, спрашивает в конце «Все понятно?».

Технология выполнения задания.

1. Запустите программу Scratch.

2. В объектах выберите Сцену.

3. Перейдите на закладку Фоны, нажмите на кнопку Импорт и в предложенном списке выберите: Outdoors – all sports…

4. Удалите из списка фонов Фон 1, нажав на крестик.

5. Переместите кота в левый нижний угол.

6. Перейдите в закладку Костюмы, удалите Костюм 2. Из папки Animals импортируйте костюмы bat2-a, bat2-b.

7. Перейдите в закладку Звуки, из папки Effect импортируйте звук Rattle.

8. Кликните два раза по Спрайту 1, и в области Скрипты составьте программу, в которой кот идет слева направо до конца, говорит привет, поворачивается на 90 градусов, ждет 3 секунды, возвращается назад, превращается в летучую мышь (меняет костюм) и летит по диагонали, спрашивает в конце «Все понятно?».

9. При создании работы использовать:

Костюмы для объекта Спрайт 1

Звуки для объекта Спрайт 1

10. Проверьте работу вашего проекта: перейдите в режим презентации и нажмите на зеленый флаг.

Дополнительное задание 1. Измените проект так, чтобы Кот превращался не в летучую мышь, а в бабочку, в конце говорит «Вам нравится бабочка?»

Дополнительное задание 2. Составьте проект, в котором рыбка плавает по экрану на фоне морского дна. Траекторию движения выберите самостоятельно.

Практическая работа № 7

«Создание сложной анимации с несколькими спрайтами»

Цель: научиться создавать проекты с несколькими спрайтам.

Задание. Создание проекта «Дискотека».

Технология выполнения задания.

1. Запустите программу Scratch.

2. Удалите из проекта Спрайт 1, он нам не понадобится для работы.

3. Добавьте в проект спрайт из папки people под названием названием breakdancer-1.

4. Для нового спрайта добавьте еще три костюма breakdancer-2, breakdancer-3, breakdancer-4. У Вас должно получиться примерно так, как показано на рисунке.

5. Аналогичным образом добавить Спрайт 2 (breakdancer1) и Спрайт 3 (breakdancer3).

6. Для Спрайта 1 составьте следующий скрипт.

7. Для спрайтов 2 и 3 составьте скрипты самостоятельно.

Работа с несколькими спрайтами

Группа: Главные администраторы
Сообщений: 14349
Регистрация: 12.10.2007
Из: Twilight Zone
Пользователь №: 1

В первой части статьи мы рассмотрели импорт спрайтов в Unity3d и некоторые особенности импорта.

В этой же статье я хочу поговорить о Листах Спрайтов (SpriteSheets).

SpriteSheets как они есть

SpriteSheets значительно облегчают работу со спрайтами и анимацией. Эта функция позволяет разбивать спрайты в одном файле на отдельные кадры анимации. Слишком заумно и много букв. Внизу иллюстрация.

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

Давайте теперь перетащим такой спрайт на сцену и посмотрим, что произойдет.

После добавления его на сцену, он стал одним большим спрайтом, а это неправильно и это нам не подходит.

Для того чтобы сказать Unity, что в файле у нас не один файл, а несколько необходимо обратиться к полю Sprite Mode в Inspector’e, изменив там значение с Single на Multiple, тем самым сказав Unity, что это не один спрайт, а некоторое количество. Иллюстрация.

Сделав это, мы увидим, что появилась новая кнопка Sprite Editor, которой мы и воспользуемся. Нажав на неё перед вами откроется окно позволяющее «нарезать спрайты». Здесь необходимо открыть контекстное меню с помощью кнопки Slice, в котором вам будут доступны все настройки «нарезки спрайтов». Для облегчения мыслительного процесса иллюстрация.

Рассмотрим подробнее возможности этого меню.

Первое, что мы здесь видим, это тип «нарезки» спрайтов. Если мы так и оставим значение Automatic и нажмем Slice, то Unity обрежет все спрайты, просто взяв минимально возможное количество пикселей. Это нас не всегда устраивает, поскольку, если применить такой метод в нашем конкретном случае, то размеры всех спрайтов будут разными, а это приведет к неприемлемой «дерганой» анимации. Здесь пример неудачной автоматической «нарезки».

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

Теперь рассмотрим ручную «нарезку» спрайтов.

Во всё том же меню изменяем значение Automatic на Grid, после чего указываем высоту/ширину в пикселях и также нажимаем Slice.

Если при «нарезке» спрайтов вручную, у вас образуются пустые спрайты (они образуются!), не обращайте на них внимания. Они никоим образом не повлияют на ваш проект.

Повторюсь, что автоматическая нарезка спрайтов является полезной функцией, в действительности экономящей много времени и нервов. Поэтому, старайтесь по возможности использовать автоматическую «нарезку». Еще раз повторюсь как определить какой вид функции использовать. Если спрайты одинаковы или отличаются несущественно, то используйте функцию Automatic, иначе Grid.

Как выглядит та же анимация полета нарезанная вручную:

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL