« Bloom и HDR пост-эффекты. | Главная страница | О вопросе энтропии в реализации интерфейсов »

Оценить эту запись

Работа с математикой Number при твининге DisplayObject

Запись от BuKT размещена 06.03.2012 в 08:57
Обновил(-а) BuKT 07.03.2012 в 00:03

Казалось бы, какие тут могут быть сложности? В конструктор собственного твинера передаём ссылку на объект, параметр, который надо бы менять, конечное значение и время/кадры, за которое этот параметр должен плавно принять конечный вид. Для простоты возьмём случай покадрового изменения значения:

Код AS3:

public class SomeTweener {
	private var _obj:Object;
	private var _paramName:String;
	private var _endValue:Number;
	private var _frames:Number;
 
	public function SomeTweener(obj:Object, paramName:String, endValue:Number, frames:Number) {
		_obj = obj;
		_paramName = paramName;
		_endValue = endValue;
		_frames = frames;
	}
}

Да, самым простым способом определить, когда настало время обновить значение, будет подписка на событие Event.ENTER_FRAME у передаваемого в конструктор DisplayObject. Однако мы не ищем лёгких путей и делаем твинер универсальным. То есть таким, который меняет параметры не только DisplayObject'а. Поэтому придётся использовать ещё одну ~~недокументированную~~ малоизвестную особенность as3:

Цитата:

Любой DisplayObject, даже не добавленный в DisplayList исправно получает событие входа на кадр.

Меняем конструктор:

Код AS3:

import flash.display.Shape;
import flash.events.Event;
import flash.events.IEventDispatcher;
 
public class SomeTweener {
	private var _obj:Object;
	private var _paramName:String;
	private var _endValue:Number;
	private var _frames:Number;
	private var eventDispatcher:IEventDispatcher;
 
	public function SomeTweener(obj:Object, paramName:String, endValue:Number, frames:Number) {
		_obj = obj;
		_paramName = paramName;
		_endValue = endValue;
		_frames = frames;
		eventDispatcher = new Shape();
		eventDispatcher.addEventListener(Event.ENTER_FRAME, tween);
	}
 
	private function tween(e:Event):void {
	}
}

Можете проверить сами. Метод tween будет исправно вызываться с частотой fps.

Идём дальше. Опять же по наипростейшему пути - каждый вызов tween мы меняем переданное значение на одну и ту же величину (твининг типа easeNone - то есть равномерный). Для этого лучше ещё в конструкторе рассчитать покадровый инкремент, исходя из разницы между конечным и стартовым значениями и продолжительностью твина, и записать инкремент в поле класса. В самом методе tween мы будем проверять, сколько кадров твининг уже длится и по достижении заданного значения - прерывать твининг:

Код AS3:

import flash.display.Shape;
import flash.events.Event;
import flash.events.IEventDispatcher;
 
public class SomeTweener {
	private var _obj:Object;
	private var _paramName:String;
	private var _endValue:Number;
	private var _frames:Number;
	private var eventDispatcher:IEventDispatcher;
	private var increment:Number;
 
	public function SomeTweener(obj:Object, paramName:String, endValue:Number, frames:Number) {
		_obj = obj;
		_paramName = paramName;
		_endValue = endValue;
		_frames = frames;
		increment = (endValue - Number(obj[paramName])/frames;
		eventDispatcher = new Shape();
		eventDispatcher.addEventListener(Event.ENTER_FRAME, tween);
	}
 
	private function tween(e:Event):void {
		if (_frames == 0) {
			e.currentTarget.removeEventListener(e.type, tween);
			return;
		}
		obj[paramName] += increment;
		_frames--;
	}
 
}

Нет ничего страшного в том, чтобы использовать frames как счётчик оставшихся "тиков" твининга: мы договорились не использовать секунды в качестве времени твина. Более того, кроме как в конструкторе параметр frames нигде не используется и никто (даже мы) не станет нас обвинять в том, что мы меняем переданную по значению переменную в своих целях.

Казалось бы - всё, твинер готов. И он даже будет работать, а в большинстве случаев - ещё и правильно. Но есть один случай, когда он ни в коем случае не выдаст нормального результата. Приведу небольшой пример:

Код AS3:

import flash.display.Sprite;
import flash.events.Event;
 
public class SomeClass extends Sprite {
	private var sprite:Sprite;
	public function SomeClass() {
		sprite = new Sprite();
		sprite.x = 1;
		sprite.addEventListener(Event.ENTER_FRAME, traceSome);
		var tween:SomeTweener = new SomeTweener(sprite, 'x', -1, 40);
	}
	private function traceSome(e:Event):void {
		trace(sprite.x);
	}
}

Что нам даст трейс в результате вызова этого кода? По логике вещей - столбец из сорока чисел уменьшающихся с шагом в 0.05. На практике же у любого DisplayObject есть ещё как минимум одна недокументированная особенность: его координаты (а возможно и некоторые другие свойства) всегда кратны 0.05. Попытка присвоить им некратное значение провалится: при следующей отрисовке оно будет округлено до ближайшего к нулю кратного. В данном конкретном примере этот эффект не должен нам угрожать (на самом деле - он проявляется во всей красе), но, к примеру, увеличив значение кадров, в течение которых должен проявиться твининг, до 80, мы получим инкремент равный 0.025 и трейс "зависнет" на нуле, так никогда и не достигнув -1.

Есть и другая особенность. В среде исполнения FlashPlayer тип Number является "64х битным числом с плавающей запятой" © i.o. Из-за этого достаточно часто случаются накладки. Проще всего объяснить на примере:

Код AS3:

trace(String(-.35 - .05)) // 0.39(9)97

Так ведёт себя флеш со всеми значениями типа Number (к коим относятся и поля координат DisplayObject), тут уж ничего не поделаешь. Вполне естественно, что пример работы метода traceSome нашего класса SomeClass будет сбоить даже при твининге на 40 кадров. Практика показала, что sprite.x не сможет сдвинуться именно со значения -0.35 будучи каждый кадр до него округлённым. Цикл таков:

Цитата:

1) Берём значение поля объекта (-0.35)
2) Наращиваем его на значение инкремента (-0.35 + (-0.05) = -0.39(9)97)
3) Записываем его в поле объекта (-0.39(9)97)
4) (Скрытый обязательный пункт) Значение поля координаты экземпляра DisplayObject округляется (-0.35)
5) Входим на следующий кадр и берём значение поля объекта (-0.35)
6) GOTO 2)

Избавиться от скрытого четвёртого пункта невозможно. Однако ошибка, вызванная симбиозом математики Number и ограничениями значений координат DisplayObject обходится нами ровно тремя лишними строками. Для этого необходимо изменить первый и пятый пункт цикла и вместо перманентно "портящегося" хранилища значения, завести своё:

Код AS3:

import flash.display.Shape;
import flash.events.Event;
import flash.events.IEventDispatcher;
 
public class SomeTweener {
	private var _obj:Object;
	private var _paramName:String;
	private var _endValue:Number;
	private var _frames:Number;
	private var eventDispatcher:IEventDispatcher;
	private var increment:Number;
	private var currentValue:Number;
 
	public function SomeTweener(obj:Object, paramName:String, endValue:Number, frames:Number) {
		_obj = obj;
		_paramName = paramName;
		_endValue = endValue;
		_frames = frames;
		currentValue = Number(obj[paramName]);
		increment = (endValue - Number(obj[paramName])/frames;
		eventDispatcher = new Shape();
		eventDispatcher.addEventListener(Event.ENTER_FRAME, tween);
	}
 
	private function tween(e:Event):void {
		if (_frames == 0) {
			e.currentTarget.removeEventListener(e.type, tween);
			return;
		}
		currentValue += increment;
		obj[paramName] = currentValue;
		_frames--;
	}
 
}

Казалось бы, при чём тут MVC? :-)

P.S.: Да, существующий код твинера можно и нужно улучшать. Добавить отложенный запуск, рассылку сообщений. Можно добавить easing и прочий мультифилд-твин. И да, весьма полезным, хоть и расходующим память, будет подход с предварительным предрассчётом массива всех позиций параметра, подвергаемого твинингу. Но к данной задаче это не относится, а потому оставим в качестве домашнего задания.

Комментарии 24

Всего комментариев 24

Меняем поле increment на свойство и в геттере рассчитываем по текущей формуле. Разумеется, нужен будет ещё один каунтер прошедшего времени для передачи аргументом в формулы изинга, но это уже мелочи :-)

06.03.2012 12:42 ChuwY вне форума

ChuwY

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

Код:

C:\Program Files (x86)\Adobe\Adobe Flash CS5.5\Common\First Run\Classes\mx\transitions\easing
C:\Program Files (x86)\Adobe\Adobe Flash CS5.5\Common\Configuration\ActionScript 3.0\projects\Flash\src\fl\transitions\easing
C:\Program Files (x86)\Adobe\Adobe Flash CS5.5\Common\Configuration\ActionScript 3.0\projects\Flash\src\fl\motion\easing

Обновил(-а) ChuwY 06.03.2012 в 12:46

06.03.2012 12:42 iNils вне форума

iNils

Цитата:

Поэтому придётся случайно узнать ещё об одной недокументированной особенности as3:

Надумано.

Цитата:

Это многоадресное событие, которое отправляется всеми экранными объектами, для которых зарегистрированы прослушиватели данного события.

06.03.2012 12:57
-De-	А как при этом гарантируется, что по окончанию твина значение будет конечным? Твин в 3 кадра длиной там такое насчитает тогда.

06.03.2012 13:11
MikroAcse	ChuwY, спасибо.

06.03.2012 13:58 BuKT вне форума

BuKT

Цитата:

Надумано.

Это в доках по событию так?

Цитата:

А как при этом гарантируется, что по окончанию твина значение будет конечным? Твин в 3 кадра длиной там такое насчитает тогда.

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

06.03.2012 16:13
iNils	Цитата: Это в доках по событию так? Конечно.

06.03.2012 17:48 Zebestov вне форума

Zebestov

Попытка реализовать интерполяцию циклом с инкрементами всегда сопряжена с накоплением погрешности. В данном случае все усугубляется еще и округлением до 1/20. Не надо так делать твины.

Цитата:

Ps: дайте ссылку на формулы easing.

MikroAcse, я же тебе уже давал хорошую ссылку

06.03.2012 23:25 MikroAcse вне форума

MikroAcse

Цитата:

MikroAcse, я же тебе уже давал хорошую ссылку

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

06.03.2012 23:38
dimarik	Хоть кто-то справку читает!

07.03.2012 00:04
BuKT	Спасибо за критику, исправил.

07.03.2012 00:14
dimarik	Теперь ждем твининга невизуальных объектов.

07.03.2012 00:15
BuKT	Цитата: Теперь ждем твининга невизуальных объектов. А разве не будет работать? (: Код AS3: public function SomeTweener(obj:Object, paramName:String, endValue:Number, frames:Number)

07.03.2012 01:07
MikroAcse	Будет.

07.03.2012 20:49
MikroAcse	Вообще я советую increment узнавать каждый раз. По-моему, так точности больше, хотя точно я не знаю.

07.03.2012 21:19
BuKT	Топик не про твининг =)

07.03.2012 21:56
dimarik	Я вам один умный вещь скажу, но только вы не обижайтесь. Привяжите к текущему времени. Каждый следующи ENTER_FRAME лишь повод подсчитать реальное передвижение объекта с момента предыдущего вызова ENTER_FRAME. Нужен getTimer().

07.03.2012 21:57
MikroAcse	Цитата: Топик не про твининг =) По названию не скажешь

08.03.2012 11:51
BuKT	Цитата: Нужен getTimer() Зачем? В моём случае нужна анимация привязанная именно к кадрам.

08.03.2012 16:39 Zebestov вне форума

Zebestov

BuKT, вот чем это сложнее твоего кода:

Код AS3:

import flash.display.Shape;
import flash.events.Event;
 
public class SomeTweener
{
	private var _obj:Object;
	private var _paramName:String;
	private var _startValue:Number;
	private var _endValue:Number;
	private var _duration:int;
	private var _frames:int;
	private var _eventDispatcher:Shape;
 
	public function SomeTweener(obj:Object, paramName:String, endValue:Number, duration:int)
	{
		_obj = obj;
		_paramName = paramName;
		_startValue = obj[paramName];
		_endValue = endValue;
		_duration = duration;
		_frames = 0;
		_eventDispatcher = new Shape();
		_eventDispatcher.addEventListener(Event.ENTER_FRAME, tween);
	}
 
	private function tween(e:Event):void
	{
		if (_frames == _duration)
		{
			_eventDispatcher.removeEventListener(Event.ENTER_FRAME, tween);
			return;
		}
		_frames++;
		_obj[_paramName] = _startValue + (_endValue - _startValue) * (_frames / _duration);
	}
}

И никакой головомороки с погрешностями.

P.S.
Для чистоты сравнения нарочно опустил в конструкторе проверки на наличие свойства paramName в obj (это необязательно, но хорошо бы) и на значение duration > 0 (можно конечно тупо втулить uint, но с некоторых пор я к нему с недоверием)

P.P.S.
Ну и неплохо бы наследоваться от EventDispatcher, чтобы по окончании твина кроме всего прочего еще и послать событие COMPLETE, хотя бы.

08.03.2012 19:53 MikroAcse вне форума

MikroAcse

Zebestov, огромное вам спасибо!!!!
Теперь я понял в чем разница между инкрементами и изингами!
Мой твин не понимал стандартные изинги потому, что работал с инкрементами.
+ мой твин работает на секундах (раньше работал на количестве движений) и из-за инкрементов я не мог понять, почему таймер работает неправильно (написал 1 секунда,а твин длился секунд 10).
Теперь и ваша ссылка пригодилась!

08.03.2012 21:59
BuKT	Ничем не сложнее. Только я специально отметил, что опускаю множество маленьких и изящных улучшений, ибо написать твинер - не цель этого топика

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

О вопросе энтропии в реализации интерфейсов (02.07.2012)
Работа с математикой Number при твининге DisplayObject (06.03.2012)
Bloom и HDR пост-эффекты. (09.01.2012)
Продажа игр (18.10.2011)
forEach. Вскрытие (14.04.2011)

06.03.2012 11:55
MikroAcse	Отлично! Молодец! Очень полезно. Ps: дайте ссылку на формулы easing.

06.03.2012 12:13
-De-	Инкремент не нужен. Easing как делать будете? значение = Начальное * (1 - alpha) + конечное * alpha

Архив
< > Сентябрь 2023
Вс	Пн	Вт	Ср	Чт	Пт	Сб
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30