Mover Entidades

Como mover, rotacionar e escalar uma entidade gradualmente ao longo do tempo, com mudanças incrementais.

Para mover, rotacionar ou redimensionar uma entidade na sua cena durante um período de tempo, use o Tween componente. O engine realiza a transformação desejada de forma suave, atualizando em cada frame até que a duração especificada termine. Além disso o Transform valores do componente da entidade afetada são atualizados em tempo real caso seja necessário fazer verificações de proximidade no código da cena.

💡 Tip: No Scene Editor in Creator Hub, você pode mover entidades de forma no-code via Actions, veja Tornar qualquer item inteligente.

O componente Tween possui as seguintes funções:

• setMove: Mover entre dois pontos

• setRotate: Rotacionar entre duas direções

• setScale: Escalonar entre dois tamanhos

• setMoveContinuous: Mover constantemente na mesma direção

• setRotateContinuous: Rotacionar constantemente na mesma direção

• setTextureMove: Deslocar a textura de um material entre duas posições

• setTextureMoveContinuous: Deslocar a textura de um material constantemente na mesma direção

Mover entre dois pontos

Para mover uma entidade entre dois pontos, crie um Tween componente com o setMove função.

const myEntity = engine.addEntity()
Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(myEntity)

Tween.setMove(myEntity, 
	Vector3.create(1, 1, 1), 
	Vector3.create(8, 1, 8), 
	2000
)

O tween de movimento recebe as seguintes informações:

• entidade: A entidade a ser movida

• start: Um Vector3 para a posição inicial

• end: Um Vector3 para a posição final

• duration: Quantos milissegundos leva para se mover entre as duas posições

Estes outros parâmetros opcionais também estão disponíveis:

• faceDirection: Se true, a entidade é rotacionada para olhar na direção do movimento.

• easingFunction: Qual função de easing usar. Veja Tweens não lineares

Rotacionar entre duas direções

Para rotacionar uma entidade entre duas posições, crie um Tween componente com o setRotate função.

const myEntity = engine.addEntity()
Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(myEntity)

Tween.setRotate(myEntity, 
	Quaternion.fromEulerDegrees(0, 0, 0), 
	Quaternion.fromEulerDegrees(0, 170, 0), 
	700
)

O tween de rotação recebe as seguintes informações:

• start: Um Quaternion para a rotação inicial

• end: Um Quaternion para a rotação final

• duration: Quantos milissegundos leva para se mover entre as duas posições

Este outro parâmetro opcional também está disponível:

• easingFunction: Qual função de easing usar. Veja Tweens não lineares

Rotacionar com um ponto de pivô

Ao rotacionar uma entidade, a rotação é sempre em referência à coordenada central da entidade. Para rotacionar uma entidade usando outro conjunto de coordenadas como ponto de pivô, crie uma segunda entidade (invisível) com o ponto de pivô como sua posição e torne-a pai da entidade que você quer rotacionar.

Ao rotacionar a entidade pai, seus filhos serão todos rotacionados usando a posição do pai como ponto de pivô. Note que o position da entidade filha está em referência ao da entidade pai.

const pivotEntity = engine.addEntity()
Transform.create(pivotEntity, {
	position: Vector3.create(4, 1, 4),
})

const childEntity = engine.addEntity()
Transform.create(childEntity, {
	position: Vector3.create(1, 0, 0),
	parent: pivotEntity,
})
MeshRenderer.setBox(myEntity)

Tween.setRotate(pivotEntity, 
	Quaternion.fromEulerDegrees(0, 0, 0), 
	Quaternion.fromEulerDegrees(0, 170, 0), 
	700
)

Note que neste exemplo, o sistema está rotacionando o pivotEntity entidade, que é um pai do childEntity entidade engine.CameraEntity

Escalonar entre dois tamanhos

Para alterar a escala de uma entidade entre dois tamanhos, crie um Tween componente com seu modo definido para Tween.Mode.Scale.

const myEntity = engine.addEntity()
Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(myEntity)

Tween.setScale(myEntity, 
	Vector3.create(1, 1, 1), 
	Vector3.create(4, 4, 4), 
	2000
)	

O tween de escala recebe as seguintes informações:

• start: Um Vector3 para o tamanho inicial

• end: Um Vector3 para o tamanho final

• duration: Quantos milissegundos leva para se mover entre as duas posições

Este outro parâmetro opcional também está disponível:

• easingFunction: Qual função de easing usar. Veja Tweens não lineares

Tweens não lineares

Tweens podem seguir diferentes Funções de Easing que afetam a taxa de mudança ao longo do tempo. Uma linear function, significa que a velocidade da mudança é constante do começo ao fim. Existem muitas opções para escolher, que desenham curvas de formatos diferentes dependendo se o começo e/ou fim inicia lento, e o quanto. Um easeinexpo curve começa devagar e termina rápido, aumentando a velocidade exponencialmente, ao contrário de uma easeoutexpo curve que começa rápido e termina devagar.

💡 Tip: Experimente diferentes curvas de movimento. As diferenças são frequentemente sutis, mas subconscientemente interpretamos informações a partir de como as coisas se movem, como peso, fricção ou até personalidade.

Tween.setScale(myEntity, 
	Vector3.create(1, 1, 1), 
	Vector3.create(4, 4, 4), 
	2000,
	EasingFunction.EF_EASEOUTBOUNCE
)

O opcional easingFunction parâmetro toma seu valor do EasingFunction enum, que oferece as seguintes opções:

• EF_EASEBACK

• EF_EASEBOUNCE

• EF_EASECIRC

• EF_EASECUBIC

• EF_EASEELASTIC

• EF_EASEEXPO

• EF_EASEINBACK

• EF_EASEINBOUNCE

• EF_EASEINCIRC

• EF_EASEINCUBIC

• EF_EASEINELASTIC

• EF_EASEINEXPO

• EF_EASEINQUAD

• EF_EASEINQUART

• EF_EASEINQUINT

• EF_EASEINSINE

• EF_EASEOUTBACK

• EF_EASEOUTBOUNCE

• EF_EASEOUTCIRC

• EF_EASEOUTCUBIC

• EF_EASEOUTELASTIC

• EF_EASEOUTEXPO

• EF_EASEOUTQUAD

• EF_EASEOUTQUART

• EF_EASEOUTQUINT

• EF_EASEOUTSINE

• EF_EASEQUAD

• EF_EASEQUART

• EF_EASEQUINT

• EF_EASESINE

• EF_LINEAR

Rotação constante

Para fazer uma entidade rotacionar constantemente, use o Tween componente com o setRotateContinuous função.

Tween.setRotateContinuous(myEntity, 
	Quaternion.fromEulerDegrees(0, -1, 0), 
	700
)

O tween de rotação contínua recebe as seguintes informações:

• entidade: A entidade a ser rotacionada

• campo: Um Quaternion para a rotação

• Altere a velocidade com que uma animação é reproduzida alterando a propriedade: Quantos graus por segundo a entidade irá rotacionar

Este outro parâmetro opcional também está disponível:

• duration: Quantos milissegundos sustentar a rotação. Após esse tempo, a rotação irá parar.

Movimento constante

Para fazer uma entidade mover-se constantemente na mesma direção, use o Tween componente com o setMoveContinuous função.

Tween.setMoveContinuous(myEntity, 
	Vector3.create(0, 0, 1), 
	0.7
)

O tween de movimento contínuo recebe as seguintes informações:

• entidade: A entidade a ser movida

• campo: Um Vector3 para o movimento

• Altere a velocidade com que uma animação é reproduzida alterando a propriedade: Quantos metros por segundo a entidade irá se mover

Este outro parâmetro opcional também está disponível:

• duration: Quantos milissegundos sustentar o movimento. Após esse tempo, o movimento irá parar.

O tween de movimento contínuo recebe as seguintes informações:

Sequências de Tween

Para fazer uma entidade executar uma série de tweens em sequência, use o TweenSequence componente. Este componente requer dois campos:

• sequence: Um array com múltiplas definições de tween, que serão executadas sequencialmente. O array pode estar vazio, caso em que apenas toca o tween atual.

• loop (opcional): Se não fornecido, a sequência é tocada apenas uma vez. Se o campo estiver presente, o valor deve ser um valor do TweenLoop enum. Valores aceitos são:

  • TL_RESTART: Quando a sequência termina, ela reinicia. Se o último estado não corresponder ao primeiro estado, a entidade salta instantaneamente de um para o outro.

  • TL_YOYO: Quando a sequência termina, ela volta para trás, executando todos os tweens em reverso até alcançar o início novamente. Então começa mais uma vez.

Mover de um lado para o outro

Para fazer uma plataforma mover-se constantemente de um lado para o outro entre duas posições, deixe o sequence array vazio, e defina loop para TweenLoop.TL_YOYO

const myEntity = engine.addEntity()
Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(myEntity)

Tween.setMove(myEntity, 
	Vector3.create(1, 1, 1), 
	Vector3.create(8, 1, 8), 
	2000
)

TweenSequence.create(myEntity, { sequence: [], loop: TweenLoop.TL_YOYO })

A entidade irá mover-se de um lado para o outro entre o ponto inicial e o ponto final, com a mesma duração e a mesma função de easing em ambas as direções.

Seguir um caminho

Para fazer uma entidade seguir um caminho mais complexo com múltiplos pontos, forneça uma lista de definições de tween no sequence de um TweenSequence component.

const myEntity = engine.addEntity()
Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(myEntity)

Tween.setMove(myEntity, 
	Vector3.create(6.5, 7, 4), 
	Vector3.create(6.5, 7, 12), 
	4000
)

TweenSequence.create(myEntity, {
	sequence: [
		{
			duration: 2000,
			easingFunction: EasingFunction.EF_LINEAR,
			mode: Tween.Mode.Move({
				start: Vector3.create(6.5, 7, 12),
				end: Vector3.create(6.5, 10.5, 12),
			}),
		},
		{
			duration: 3000,
			easingFunction: EasingFunction.EF_LINEAR,
			mode: Tween.Mode.Move({
				start: Vector3.create(6.5, 10.5, 12),
				end: Vector3.create(6.5, 10.5, 4),
			}),
		},
		{
			duration: 3000,
			easingFunction: EasingFunction.EF_LINEAR,
			mode: Tween.Mode.Move({
				start: Vector3.create(6.5, 10.5, 4),
				end: Vector3.create(6.5, 7, 4),
			}),
		},
	],
	loop: TweenLoop.TL_RESTART,
})

Note que ao definir um tween dentro de um TweenSequence, você precisa usar o formato mais verboso de Tween.Mode.Move, ou Tween.Mode.Rotate, ou Tween.Mode.Scale para definir o tween. Neste formato mais verboso, você precisa especificar:

• duration: Quantos milissegundos leva para se mover entre as duas posições

• easingFunction: Qual função de easing usar. Veja Tweens não lineares. Neste formato o valor é obrigatório.

• mode: O modo do tween, que pode ser Tween.Mode.Move, Tween.Mode.Rotate, ou Tween.Mode.Scale.

E dentro do campo mode você precisa especificar:

• start: O valor inicial do tween

• end: O valor final do tween

Ao terminar um tween

Use tweenSystem.tweenCompleted para detectar quando um tween terminou. Isso pode ser útil para executar ações quando um tween termina, por exemplo para abrir a porta de um elevador.

Raycast.createOrReplace(rayEntity, {
	const tweenCompleted = tweenSystem.tweenCompleted(myEntity)
	if (tweenCompleted) {
		//play sound
	}
})

Tweens simultâneos

Uma entidade só pode ter um Tween componente, e cada componente tween só pode executar uma transformação por vez. Por exemplo, você não pode fazer uma entidade mover-se lateralmente e também rotacionar ao mesmo tempo. Como solução alternativa, você pode usar entidades parentadas. Por exemplo, você pode ter uma entidade pai invisível que se move lateralmente, com um filho visível que rotaciona.

No trecho a seguir, uma entidade pai rotaciona enquanto um filho aumenta de escala.

const parentEntity = engine.addEntity()
Transform.create(parentEntity, {
	position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(parentEntity)
Tween.setRotate(parentEntity, 
	Quaternion.fromEulerDegrees(0, 0, 0), 
	Quaternion.fromEulerDegrees(0, 170, 0), 
	5000
)

const childEntity = engine.addEntity()
Transform.create(childEntity, {
	position: Vector3.create(0, 0, 0),
	parent: parentEntity,
})
MeshRenderer.setBox(childEntity)
Tween.setScale(childEntity, 
	Vector3.create(1, 1, 1), 
	Vector3.create(4, 4, 4), 
	5000
)

Pausar um tween

Para pausar um tween, altere a propriedade playing para false. Para retomá-lo, altere-a de volta para true.

pointerEventsSystem.onPointerDown(
	{
		entity: button,
		opts: { button: InputAction.IA_POINTER, hoverText: 'pause' },
	},
	() => {
		let tweenData = Tween.getMutable(myEntity)
		tweenData.playing = !tweenData.playing
	}
)

Para encerrar um tween que não precisa ser continuado, exclua o Tween componente da entidade. Se a entidade também estava usando um TweenSequence componente, exclua esse também.

pointerEventsSystem.onPointerDown(
	{
		entity: button,
		opts: { button: InputAction.IA_POINTER, hoverText: 'pause' },
	},
	() => {
		if( Tween.has(myEntity)){
			Tween.deleteFrom(myEntity)
		}
		if( TweenSequence.has(myEntity)){
			TweenSequence.deleteFrom(myEntity)
		}
	}
)

Tweens baseados em um sistema

Ao invés de usar o componente Tween e deixar o engine lidar com a transformação, você pode preferir fazer essa transição de forma incremental, frame a frame, via um sistema na sua cena. Movendo a entidade uma pequena quantidade cada vez que a função é executada.

Por um lado, isso lhe dá mais controle para recalcular movimentos a cada frame. Por outro lado, o código é mais complicado, e jogadores com máquinas menos potentes podem experimentar o tween como com lag, percebendo cada incremento.

Mover via system

A maneira mais fácil de mover uma entidade é modificar gradualmente o position valor armazenado no Transform component.

function SimpleMove() {
	let transform = Transform.getMutable(myEntity)
	transform.position = Vector3.add(
		transform.position,
		Vector3.scale(Vector3.Forward(), 0.05)
	)
}

engine.addSystem(SimpleMove)

const myEntity = engine.addEntity()
Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(myEntity)

Neste exemplo estamos movendo uma entidade em 0.1 metros por tick do loop do jogo.

que descreva um vetor relativo à entidade e sua rotação (por exemplo, retorna um vetor que aponta para frente e mede 1 metro de comprimento. Neste exemplo estamos então reduzindo esse vetor para 1/10 de seu comprimento com Vector3.scale(). Se nossa cena tem 30 frames por segundo, a entidade está se movendo a 3 metros por segundo de velocidade.

Rotacionar via system

A maneira mais fácil de rotacionar uma entidade é alterar gradualmente os valores no componente Transform incrementalmente, e executar isso como parte da função de um sistema.

function SimpleRotate() {
	let transform = Transform.getMutable(myEntity)
	transform.rotation = Quaternion.multiply(
		transform.rotation,
		Quaternion.fromAngleAxis(1, Vector3.Up())
	)
}

engine.addSystem(SimpleRotate)

const myEntity = engine.addEntity()
Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(myEntity)

Note que para combinar a rotação atual com cada incremento, estamos usando Quaternion.multiply. Em matemática de quaternions, você combina duas rotações multiplicando-as, NÃO adicionando-as. A rotação resultante de multiplicar um quaternion por outro será a rotação final equivalente após primeiro realizar uma rotação e depois a outra.

Neste exemplo, estamos rotacionando a entidade em 1 grau na direção para cima a cada tick do loop do jogo.

💡 Tip: Para fazer uma entidade sempre rotacionar para olhar para o jogador, você pode adicionar um Billboard componente.

Rotacionar via system sobre um ponto de pivô

Ao rotacionar uma entidade, a rotação é sempre em referência à coordenada central da entidade. Para rotacionar uma entidade usando outro conjunto de coordenadas como ponto de pivô, crie uma segunda entidade (invisível) com o ponto de pivô como sua posição e torne-a pai da entidade que você quer rotacionar.

Ao rotacionar a entidade pai, seus filhos serão todos rotacionados usando a posição do pai como ponto de pivô. Note que o position da entidade filha está em referência ao da entidade pai.

function SimpleRotate() {
	let transform = Transform.getMutable(pivotEntity)
	transform.rotation = Quaternion.multiply(
		transform.rotation,
		Quaternion.fromAngleAxis(1, Vector3.Up())
	)
}

engine.addSystem(SimpleRotate)

const pivotEntity = engine.addEntity()
Transform.create(pivotEntity, {
	position: Vector3.create(4, 1, 4),
})

const childEntity = engine.addEntity()
Transform.create(childEntity, {
	position: Vector3.create(1, 0, 0),
	parent: pivotEntity,
})
MeshRenderer.setBox(myEntity)

Note que neste exemplo, o sistema está rotacionando o pivotEntity entidade, que é um pai do childEntity entidade engine.CameraEntity

Ajustar movimento para tempo de atraso

Suponha que o jogador que visita sua cena esteja tendo dificuldades em acompanhar o ritmo da taxa de frames. Isso poderia resultar no movimento parecendo irregular, pois nem todos os frames são igualmente espaçados, mas cada um move a entidade na mesma quantidade.

Você pode compensar esse tempo desigual usando o O exemplo acima executa um raycast recorrente a cada 0,1 segundos. Ele usa um componente timer e a parâmetro para ajustar a escala do movimento.

function SimpleMove(dt: number) {
	let transform = Transform.getMutable(myEntity)
	transform.position = Vector3.add(
		transform.position,
		Vector3.scale(Vector3.Forward(), dt)
	)
}

engine.addSystem(SimpleMove)

const myEntity = engine.addEntity()
Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(myEntity)

O exemplo acima mantém o movimento aproximadamente na mesma velocidade que o exemplo de movimento acima, mesmo se a taxa de frames cair. Quando executado a 30 frames por segundo, o valor de O exemplo acima executa um raycast recorrente a cada 0,1 segundos. Ele usa um componente timer e a é 1/30.

Você também pode suavizar rotações da mesma forma multiplicando a quantidade de rotação por O exemplo acima executa um raycast recorrente a cada 0,1 segundos. Ele usa um componente timer e a.

Mover entre dois pontos via system

Se você quiser que uma entidade se mova suavemente entre dois pontos, use o lerp (interpolação linear) algoritmo. Este algoritmo é muito conhecido no desenvolvimento de jogos, pois é realmente útil.

O lerp() função recebe três parâmetros:

• O vetor para a posição de origem

• O vetor para a posição alvo

• A quantidade, um valor de 0 a 1 que representa qual fração da translação executar.

const originVector = Vector3.Zero()
const targetVector = Vector3.Forward()

let newPos = Vector3.lerp(originVector, targetVector, 0.6)

O algoritmo de interpolação linear encontra um ponto intermediário no caminho entre ambos os vetores que corresponde à quantidade fornecida.

Por exemplo, se o vetor de origem é (0, 0, 0) e o vetor alvo é (10, 0, 10):

• Usar uma quantidade de 0 retornaria (0, 0, 0)

• Usar uma quantidade de 0.3 retornaria (3, 0, 3)

• Usar uma quantidade de 1 retornaria (10, 0, 10)

Para implementar isso lerp() na sua cena, recomendamos criar um componente personalizado para armazenar as informações necessárias. Você também precisa definir um sistema que implemente o movimento gradual a cada frame.

// definir componente personalizado
const MoveTransportData = {
	start: Schemas.Vector3,
	end: Schemas.Vector3,
	fraction: Schemas.Float,
	speed: Schemas.Float,
}

export const LerpTransformComponent = engine.defineComponent(
	'LerpTransformComponent',
	MoveTransportData
)

// definir sistema
function LerpMove(dt: number) {
	let transform = Transform.getMutable(myEntity)
	let lerp = LerpTransformComponent.getMutable(myEntity)
	if (lerp.fraction < 1) {
		lerp.fraction += dt * lerp.speed
		transform.position = Vector3.lerp(lerp.start, lerp.end, lerp.fraction)
	}
}

engine.addSystem(LerpMove)

// create entity
const myEntity = engine.addEntity()

Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
})

MeshRenderer.setBox(myEntity)

LerpTransformComponent.create(myEntity, {
	start: Vector3.create(4, 1, 4),
	end: Vector3.create(8, 1, 8),
	fraction: 0,
	speed: 1,
})

Rotacionar entre dois ângulos via system

Para rotacionar suavemente entre dois ângulos, use o slerp (esférica interpolação linear) algoritmo. Este algoritmo é muito similar a um lerp, mas ele lida com rotações em quaternion.

O slerp() função recebe três parâmetros:

• O quaternion ângulo para a rotação de origem

• O quaternion ângulo para a rotação alvo

• A quantidade, um valor de 0 a 1 que representa qual fração da translação executar.

💡 Tip: Você pode passar valores de rotação em euler graus (de 0 a 360) usando Quaternion.fromEulerDegrees().

const originRotation = Quaternion.fromEulerDegrees(0, 90, 0)
const targetRotation = Quaternion.fromEulerDegrees(0, 0, 0)

let newRotation = Quaternion.slerp(originRotation, targetRotation, 0.6)

Para implementar isso na sua cena, recomendamos armazenar os dados que entram na Slerp() função em um componente personalizado. Você também precisa definir um sistema que implemente a rotação gradual a cada frame.

// definir componente personalizado
const RotateSlerpData = {
	start: Schemas.Quaternion,
	end: Schemas.Quaternion,
	fraction: Schemas.Float,
	speed: Schemas.Float,
}

export const SlerpData = engine.defineComponent('SlerpData', RotateSlerpData)

// definir sistema
function SlerpRotate(dt: number) {
	let transform = Transform.getMutable(myEntity)
	let slerpData = SlerpData.getMutable(myEntity)
	if (slerpData.fraction < 1) {
		slerpData.fraction += dt * slerpData.speed
		transform.rotation = Quaternion.slerp(
			slerpData.start,
			slerpData.end,
			slerpData.fraction
		)
	}
}

engine.addSystem(SlerpRotate)

// create entity
const myEntity = engine.addEntity()

Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
})

MeshRenderer.setBox(myEntity)

SlerpData.create(myEntity, {
	start: Quaternion.fromEulerDegrees(0, 0, 0),
	end: Quaternion.fromEulerDegrees(0, 180, 0),
	fraction: 0,
	speed: 0.3,
})

📔 Nota: Você poderia em vez disso representar a rotação com ângulos euler como espera um valores e usar uma Lerp() função, mas isso implicaria uma conversão de espera um para normalHit em cada frame. Valores de rotação são internamente armazenados como quaternions no Transform componente, então é mais eficiente para a cena trabalhar com quaternions.

Uma abordagem mais simples, porém menos eficiente, para isso aproveita a Quaternion.rotateTowards função, e evita usar quaisquer componentes personalizados.

function SimpleRotate(dt: number) {
	let transform = Transform.getMutable(myEntity)
	transform.rotation = Quaternion.rotateTowards(
		transform.rotation,
		Quaternion.fromEulerDegrees(90, 0, 0),
		dt * 10
	)
	if (transform.rotation === Quaternion.fromEulerDegrees(90, 0, 0)) {
		console.log('done')
		engine.removeSystem(this)
	}
}

const simpleRotateSystem = engine.addSystem(SimpleRotate)

const myEntity = engine.addEntity()
Transform.create(myEntity, {
	position: Vector3.create(4, 1, 4),
	rotation: Quaternion.fromEulerDegrees(0, 0, 90),
})

MeshRenderer.setBox(myEntity)

No exemplo acima Quaternion.rotateTowards leva três argumentos: a rotação inicial, a rotação final desejada e o incremento máximo por frame. Neste caso, como o incremento máximo é de dt * 10 graus, a rotação será realizada durante um período de alguns 9 segundos.

Note que o sistema também verifica se a rotação está completa e, se assim for, remove o sistema do engine. Caso contrário, o sistema continuaria fazendo cálculos a cada frame, mesmo depois que a rotação estivesse completa.

Mudar escala entre dois tamanhos via system

Se você quiser que uma entidade mude de tamanho suavemente e sem alterar suas proporções, use o lerp (interpolação linear) algoritmo do Scalar objeto.

Caso contrário, se você quiser alterar o eixo em diferentes proporções, use espera um para representar a escala de origem e a escala alvo, e então use a lerp função do espera um.

O lerp() função do Scalar objeto recebe três parâmetros:

• Um número para a escala de origem

• Um número para a escala alvo

• A quantidade, um valor de 0 a 1 que representa qual fração da escala executar.

const originScale = 1
const targetScale = 10

let newScale = Scalar.Lerp(originScale, targetScale, 0.6)

Para implementar esse lerp na sua cena, recomendamos criar um componente personalizado para armazenar as informações necessárias. Você também precisa definir um sistema que implemente a escala gradual a cada frame.

// definir componente personalizado
const ScaleTransportData = {
	start: Schemas.Number,
	end: Schemas.Number,
	fraction: Schemas.Float,
	speed: Schemas.Float,
}

export const ScaleTransformComponent = engine.defineComponent(
	'ScaleTransformComponent',
	ScaleTransportData
)

// definir sistema
function LerpMove(dt: number) {
	let transform = Transform.getMutable(myEntity)
	let lerp = ScaleTransformComponent.getMutable(myEntity)
	if (lerp.fraction < 1) {
		lerp.fraction += dt * lerp.speed
		const newScale = Scalar.lerp(lerp.start, lerp.end, lerp.fraction)
		transform.scale = Vector3.create(newScale, newScale, newScale)
	}
}

engine.addSystem(LerpMove)

// create entity
const myEntity = engine.addEntity()

Transform.create(myEntity, {
	position: { x: 4, y: 1, z: 4 },
})

MeshRenderer.setBox(myEntity)

ScaleTransformComponent.create(myEntity, {
	start: 1,
	end: 2,
	fraction: 0,
	speed: 1,
})

Vector3.create(1, 1, 1)

Mover em velocidades irregulares entre dois pontos via system

Enquanto usa o método lerp, você pode tornar a velocidade do movimento não linear. No exemplo anterior incrementamos a quantidade do lerp por um determinado valor a cada frame, mas também poderíamos usar uma função matemática para aumentar o número exponencialmente ou em outras medidas que lhe deem um ritmo de movimento diferente.

Você também poderia usar uma função que dê resultados recorrentes, como uma função seno, para descrever um movimento que vai e volta.

Frequentemente essas transições não lineares podem dar muita vida a uma cena. Um movimento que acelera seguindo uma curva ou desacelera gradualmente pode dizer muito sobre a natureza de um objeto ou personagem. Você pode até tirar proveito de funções matemáticas que adicionem efeitos de quique.

// definir componente personalizado
const MoveTransportData = {
	start: Schemas.Vector3,
	end: Schemas.Vector3,
	fraction: Schemas.Float,
	speed: Schemas.Float,
}

export const LerpTransformComponent = engine.defineComponent(
	'LerpTransformComponent',
	MoveTransportData
)

// definir sistema
function LerpMove(dt: number) {
	let transform = Transform.getMutable(myEntity)
	let lerp = LerpTransformComponent.getMutable(myEntity)
	if (lerp.fraction < 1) {
		lerp.fraction += dt * lerp.speed
		const interpolatedValue = interpolate(lerp.fraction)
		transform.position = Vector3.lerp(lerp.start, lerp.end, interpolatedValue)
	}
}

// mapear a fração do lerp para uma curva exponencial
function interpolate(t: number) {
	return t * t
}

engine.addSystem(LerpMove)

// create entity
const myEntity = engine.addEntity()

Transform.create(myEntity, {
	position: { x: 4, y: 1, z: 4 },
})

MeshRenderer.setBox(myEntity)

LerpTransformComponent.create(myEntity, {
	start: Vector3.create(4, 1, 4),
	end: Vector3.create(8, 1, 8),
	fraction: 0,
	speed: 1,
})

O exemplo acima é igual ao exemplo de lerp linear que mostramos antes, mas o fraction campo mapeado para um valor não linear a cada tick. Esse valor não linear é usado para calcular a lerp função, resultando em um movimento que segue uma curva exponencial.

Você também pode mapear uma transição em rotação ou em escala da mesma forma mostrada acima, mapeando uma transição linear para uma curva.

Seguir um caminho via system

Você pode fazer uma entidade percorrer um array de vetores, realizando um movimento por lerp entre cada um para seguir um caminho mais complexo.

// definir componente personalizado
const PathTransportData = {
	path: Schemas.Array(Schemas.Vector3),
	start: Schemas.Vector3,
	end: Schemas.Vector3,
	fraction: Schemas.Float,
	speed: Schemas.Float,
	pathTargetIndex: Schemas.Int,
}

export const LerpTransformComponent = engine.defineComponent(
	'LerpTransformComponent',
	PathTransportData
)

// definir sistema
function PathMove(dt: number) {
	let transform = Transform.getMutable(myEntity)
	let lerp = LerpTransformComponent.getMutable(myEntity)
	if (lerp.fraction < 1) {
		lerp.fraction += dt * lerp.speed
		transform.position = Vector3.lerp(lerp.start, lerp.end, lerp.fraction)
	} else {
		lerp.pathTargetIndex += 1
		if (lerp.pathTargetIndex >= lerp.path.length) {
			lerp.pathTargetIndex = 0
		}
		lerp.start = lerp.end
		lerp.end = lerp.path[lerp.pathTargetIndex]
		lerp.fraction = 0
	}
}

engine.addSystem(PathMove)

// create entity
const myEntity = engine.addEntity()

Transform.create(myEntity, {
	position: Vector3.create(1, 1, 1),
})

MeshRenderer.setBox(myEntity)

const point1 = Vector3.create(1, 1, 1)
const point2 = Vector3.create(8, 1, 3)
const point3 = Vector3.create(8, 4, 7)
const point4 = Vector3.create(1, 1, 7)

const myPath = [point1, point2, point3, point4]

LerpTransformComponent.create(myEntity, {
	path: myPath,
	start: Vector3.create(4, 1, 4),
	end: Vector3.create(8, 1, 8),
	fraction: 0,
	speed: 1,
	pathTargetIndex: 1,
})

O exemplo acima define um caminho 3D composto por quatro vetores 3D. O PathTransportData componente personalizado mantém os mesmos dados usados pelo componente personalizado no lerp exemplo acima, mas adiciona um path array, com todos os pontos do nosso caminho, e um pathTargetIndex campo para acompanhar qual segmento do caminho está sendo usado atualmente.

O sistema é muito semelhante ao sistema no lerp exemplo, mas quando uma ação de lerp é concluída, ele define os position. O e origin campos para novos valores. Se atingirmos o fim do caminho, retornamos ao primeiro valor do caminho.

Tween de textura

Para fazer uma textura deslizar suavemente, use o Tween componente com o setTextureMove função.

Tween.setTextureMove(myEntity, 
	Vector2.create(0, 0), 
	Vector2.create(1, 0), 
	2000
)

O tween de textura recebe as seguintes informações:

• entidade: A entidade cuja textura será movimentada

• start: Um Vector2 para a posição inicial

• end: Um Vector2 para a posição final

• duration: Quantos milissegundos leva para se mover entre as duas posições

Este outro parâmetro opcional também está disponível:

• movementType: (opcional), define se o movimento será no campo offset ou tiling. Por padrão usa offset.

• easingFunction: Qual função de easing usar. Veja Tweens não lineares. Observação: Este parâmetro é usado apenas se uma duração for fornecida.

Movimento constante de textura

Para fazer uma textura deslizar constantemente, use o Tween componente com o setTextureMoveContinuous função.

Tween.setTextureMoveContinuous(myEntity, 
	Vector2.create(0, 1), 
	0.7
)

O tween contínuo de textura recebe as seguintes informações:

• entidade: A entidade cuja textura será movimentada

• campo: Um Vector2 para o movimento

• Altere a velocidade com que uma animação é reproduzida alterando a propriedade: Quantas unidades por segundo a entidade irá mover

Este outro parâmetro opcional também está disponível:

• movementType: define se o movimento será no campo offset ou tiling. Por padrão usa offset.

• duration: Quantos milissegundos sustentar o movimento. Após esse tempo, o movimento irá parar.

Leia mais sobre tweens de textura em Texture Tweens seção.