Movimento de Sprites

Esse é um código que você poderia escrever para fazer o cat sprite se mover para a direita a uma taxa de 1 pixel por frame.

function setup () {

// Inicie o loop do jogo adicionando a função `gameLoop` ao` ticker` do

// Pixi e fornecendo um argumento `delta`.

app . ticker . add ( delta => gameLoop (delta));

}

function gameLoop ( delta ) {

// Mova o gato 1 pixel

cat . x + = 1 ;

}

Executando esse código, verá o sprite se mover gradualmente para o lado direito do palco.

Isso porque cada vez que gameLoopele é executado, ele adiciona 1 à posição x do gato.

cat.x += 1;

Qualquer função que você adicionar ao Pixi tickerserá chamada 60 vezes por segundo. Você pode ver que a função é fornecida um delta argumento - O que é?

Delta valor representa a quantidade de atraso fracionário entre os quadros. Você pode, opcionalmente, adicioná-lo à posição do gato, para tornar a animação do gato independente da taxa de quadros. Assim:

cat . x + = 1 + delta;

A escolha ou não de adicionar esse delta valor é, em grande parte, uma escolha estética. E o efeito só será realmente notado se a sua animação estiver lutando para manter uma taxa de exibição consistente de 60 quadros por segundo (o que pode acontecer, por exemplo, se estiver sendo executado em um dispositivo lento).

Não precisa usar o ticker do Pixi para criar um loop de jogo.Basta usar requestAnimationFrame, assim:

function gameLoop () {

// Chame essa função `gameLoop` na próxima atualização de tela

// (que acontece 60 vezes por segundo)

requestAnimationFrame (gameLoop);

// Mova o gato

gato . x + = 1 ;

}

// Inicia o loop

gameLoop ();

Depende totalmente de você qual estilo você prefere.

E isso é tudo que existe para Sprite de movimento. Basta alterar qualquer propriedade de sprite por pequenos incrementos dentro do loop e eles serão animados com o tempo. Se você quiser que o sprite se anime na direção oposta (à esquerda), apenas dê um valor negativo, como -1.

Você encontrará este código no movingSprites.html arquivo :

// Aliases

permitem Application = PIXI . Aplicação ,

Recipiente = PIXI . Recipiente ,

loader = PIXI . carregador ,

recursos = PIXI . carregador . recursos ,

TextureCache = PIXI . utils . TextureCache ,

Sprite = PIXI . Sprite ,

Retângulo = PIXI . Retângulo ;

// Criar um aplicativo Pixi,

deixe app = new Application ({

largura : 256 ,

altura : 256 ,

antialias : verdadeiros ,

transparente : falso ,

resolução : 1

}

);

// Adicione a tela que o Pixi criou automaticamente para você no documento de

documento HTML . corpo . appendChild ( app . vista );

carregador

. add ( " images / cat.png " )

. carga (setup);

// Defina quaisquer variáveis ​​usadas em mais de uma função,

deixe cat;

function setup () {

// Cria o

gato sprite cat = new Sprite (recursos [ " images / cat.png " ]. Textura );

cat . y = 96 ;

app . palco . addChild (cat);

// Inicie o

aplicativo do loop de jogo . ticker . add ( delta => gameLoop (delta));

}

function gameLoop ( delta ) {

// Mova o gato 1 pixel

cat . x + = 1 ;

// Opcionalmente, use o valor `delta`

// cat.x + = 1 + delta;

}

(Observe que a catvariável precisa ser definida fora das funções setup e gameLoop para que você possa acessá-la dentro de ambas.)

Lembre-se!

Você pode animar a escala, a rotação ou o tamanho de um sprite!