O que é?
O Pixi é um mecanismo de renderização de sprite 2D extremamente rápido.Ele ajuda você a exibir, animar e gerenciar gráficos interativos para facilitar a criação de jogos e aplicativos usando JavaScript e outras tecnologias HTML5.
Criando o Aplicativo Pixi e Stage
Crie uma área de exibição retangular na qual você possa começar a exibir imagens. Pixi tem um Applicationobjeto que cria isso para você. Gera automaticamente um <\canvas> elemento HTML e descobre como exibir suas imagens na tela.Então precisando criar um Containerobjeto Pixi especial chamado stage.Esse stageobjeto será usado como o container raiz que contém todas as coisas que você deseja que o Pixi exiba.
Aqui está o código que você precisa escrever para criar um appaplicativo Pixi e stage. Adicione este código ao seu documento HTML entre as <\script>tags:
// Criar um Aplicativo Pixi, deixe o aplicativo = new PIXI.Application ({width : 256 , height : 256 });// Adicione a tela que o Pixi criou automaticamente para você no documento de documento HTML . corpo . appendChild ( app . vista );
Sprites Pixi
Com um renderizador, pode começar a adicionar imagens a ele. Tudo o que você quer tornar visível no renderizador deve ser adicionado a um objeto Pixi especial chamado stage. Você pode acessar este stage objeto especial como este: app . etapa
Sprites de Posicionamento
Sabendo criar e exibir seus sprites, você pode posicioná-los e redimensioná-los. Alterando os valores de seus x e y propriedades. Centralizando ou alocando-os onde quiser.
Usando Atlas de Textura
Se você está trabalhando em um jogo grande e complexo, você vai querer uma maneira rápida e eficiente de criar sprites de tilesets. Isto é onde um atlas de texturatorna-se realmente útil. Um atlas de textura é um arquivo de dados JSON que contém as posições e tamanhos de sub-imagens em uma imagem PNG de conjunto de quadros correspondente. Se você usar um atlas de textura, tudo o que você precisa saber sobre a sub-imagem que você deseja exibir é o seu nome. Você pode organizar as imagens do seu tileset em qualquer ordem e o arquivo JSON irá acompanhar seus tamanhos e posições para você. Isso é muito conveniente porque significa que os tamanhos e as posições das imagens do tileset não estão codificados no seu programa de jogo. Se você fizer alterações no tileset, como adicionar imagens, redimensioná-las ou removê-las, publique novamente o arquivo JSON e o jogo usará esses dados para exibir as imagens corretas. Você não precisará fazer nenhuma alteração no código do seu jogo.
Sprites de movimento
Como você move Sprites? Crie uma função de loop usando o Pixi. ticker Isso é chamado de loop de jogo . Qualquer código que você colocar dentro do loop do jogo será atualizado 60 vezes por segundo.