[Starling] Анимация драга canvas в пределах заданных размеров.

[Astraport]

Не редкая задача - есть карта (уровней, территории) и нужно организовать её плавный драг с анимацией, но в пределах stage. То есть делаем swype влево - карта со всеми объектами поехала влево с инерцией замедления. Но чтобы canvas не вышел за пределы экрана. Вроде просто, но тему пока не изучал подробно - может есть у кого готовая заготовка?

Ниже просто не рабочий набросок для иллюстрации что примерно нужно.

public static var canvas:Sprite = new Sprite();
addChild(canvas);
canvas.width = stage.stageWidth;
canvas.height = stage.stageHeight;
canvas.scaleX = canvas.scaleY = 1.5;
 
addEventListener(TouchEvent.TOUCH, onTouch);
 
private function onTouch(event:TouchEvent):void
{
	var touch:Touch = event.getTouch(stage);
 
	if (touch) {
		if(touch.phase == TouchPhase.MOVED ){
				var position:Point = touch.getLocation(stage);
				Starling.juggler.tween(canvas, 1, {transition: Transitions.EASE_IN_OUT, x: position.x, y:position.y});
		}
	}
}

[KumoKairo]

В качестве примера можно посмотреть реализацию Scroller у Джошуа в Feathers. Там еще задается инерция и эластичность. Там конкретный вью порт скролится. Как раз заточен под "тач-скролл")

Кстати, возможно получится повесить на вашу карту этот готовый скроллер!

http://wiki.starling-framework.org/feathers/scroller
http://feathersui.com/documentation/.../Scroller.html

[Astraport]

KumoKairo, спасибо. Я рассматривал вариант ScrollContainer, но думал, в целях экономии ресурсов, сделать все на своих TouchEvent. В общем сделал сейчас так и получается очень не плохо. Похоже на реализацию как в Plants vs zombies, Clash of clans и в сотнях других игр. Теперь при жесте pan наружу (пальцы расширяются) карта расширяется, скалируется на 1.6 и теперь её можно драгать. Обратная жест - щипок и карта анимированно возвращается в исходное состояние и никакого драга карты нет.

Единственное, нужно задавать размеры scene.viewPort. Если их увеличивать на размер скалирования (1.6), то получается значительно шире чем нужно и непонятно чем это вызвано. Методом научного тыка подобрана величина 1.38, но хотелось бы найти разумное решение задачи.

public static var scene:ScrollContainer = new ScrollContainer();
private var sceneScaled:Boolean = false;
 
 
addChild(scene);
scene.width = stage.stageWidth;
scene.height = stage.stageHeight;
scene.viewPort.width = scene.width;
scene.viewPort.height = scene.height;
 
private function onTouch(event:TouchEvent):void
{
	var touches:Vector.<Touch> = event.getTouches(this, TouchPhase.MOVED);
	if (touches.length == 2)
	{
		var touchA:Touch = touches[0];
		var touchB:Touch = touches[1];
 
		var currentPosA:Point  = touchA.getLocation(parent);
		var previousPosA:Point = touchA.getPreviousLocation(parent);
		var currentPosB:Point  = touchB.getLocation(parent);
		var previousPosB:Point = touchB.getPreviousLocation(parent);
 
		var currentVector:Point  = currentPosA.subtract(currentPosB);
		var previousVector:Point = previousPosA.subtract(previousPosB);
 
		var sizeDiff:Number = currentVector.length / previousVector.length;
		if (!sceneScaled){
			if (sizeDiff > 1){
				Starling.juggler.tween(scene, 0.6, { transition: Transitions.EASE_OUT_ELASTIC, scaleX: 1.6, scaleY: 1.6});
				scene.viewPort.width = scene.width * 1.38;
				scene.viewPort.height = scene.height * 1.38;
				sceneScaled = true;
			}
		} else {
			if (sizeDiff < 1){
 
				Starling.juggler.tween(scene, 0.6, { transition: Transitions.EASE_OUT_ELASTIC, scaleX: 1, scaleY: 1});
                                scene.viewPort.width = scene.width;
				scene.viewPort.height = scene.height;
				sceneScaled = false;
 
					}
				}
			}
}

[Котяра]

Если их увеличивать на размер скалирования (1.6), то получается значительно шире чем нужно и непонятно чем это вызвано. Методом научного тыка подобрана величина 1.38, но хотелось бы найти разумное решение задачи.

А если попробуешь корень из 1.6 будет ещё ближе. )

[Astraport]

Неа, мало.
Так и не знаю отчего вьюпорт становится больше контейнера.