Pixice

PixiJS — O mecanismo de criação HTML5

Este projeto tem como objetivo fornecer uma biblioteca 2D rápida e leve que funcione em todos os dispositivos. O renderizador PixiJS permite que todos aproveitem o poder da aceleração de hardware sem conhecimento prévio de WebGL. Além disso, é rápido. Muito rápido.

Se você quiser se manter atualizado com as últimas notícias do PixiJS, sinta-se à vontade para nos seguir no Twitter @PixiJS e nós o manteremos informado! Você também pode conferir em nosso site, pois quaisquer novidades serão publicadas lá também!

Agora fazemos parte do Open Collective e com o seu apoio você pode nos ajudar a tornar o PixiJS ainda melhor. Para fazer uma doação, basta clicar no botão abaixo e amaremos você para sempre!

Para que usar o PixiJS e quando usá-lo

PixiJS é uma biblioteca de renderização que permitirá criar gráficos ricos e interativos e aplicativos e jogos multiplataforma sem ter que mergulhar na API WebGL ou lidar com a compatibilidade de navegadores e dispositivos.

PixiJS oferece suporte a WebGPU com suporte substituto para WebGL. Como biblioteca, PixiJS é uma ferramenta fantástica para criação de conteúdo interativo. Use-o para seus sites, aplicativos e jogos HTML5 interativos e ricos em gráficos. A compatibilidade entre plataformas pronta para uso e a degradação elegante significam que você tem menos trabalho para fazer e mais diversão fazendo isso! Se você deseja criar experiências refinadas e refinadas de forma relativamente rápida, sem se aprofundar em códigos densos e de baixo nível, evitando ao mesmo tempo as dores de cabeça das inconsistências do navegador, polvilhe seu próximo projeto com um pouco da magia do PixiJS!

Impulsione seu desenvolvimento e fique à vontade para usar sua imaginação!

Recursos atuais

• Renderizador WebGL (com lote inteligente automático, permitindo desempenho MUITO rápido)

• Renderizador WebGPU (novo nos navegadores mais recentes!)

• Renderizador de tela (o mais rápido da cidade!)

• Gráfico de cena completo

• API super fácil de usar (semelhante à API da lista de exibição em flash)

• Suporte para atlas de textura

• Carregador de ativos/carregador de planilhas sprite

• Detectar automaticamente qual renderizador deve ser usado

• Mouse completo e interação multitoque

• Texto

• Texto BitmapFont

• Texto multilinha

• Textura de renderização

• Desenho Primitivo

• Mascaramento

• Filtros

• Plug-ins suportados pela comunidade

• Reagir

• Coluna

• Filtros

• Animar

• Luzes

• IU

• Disposição

• GIFs

• E mais!

Configurar

É fácil começar a usar o PixiJS! Basta baixar uma versão pré-construída!

Alternativamente, o PixiJS pode ser instalado com npm ou simplesmente usando um URL de rede de distribuição de conteúdo (CDN) para incorporar o PixiJS diretamente em sua página HTML.

Instalação NPM

 npm instalar pixi.js

Não há exportação padrão. A maneira correta de importar PixiJS é:

 importar * como PIXI de 'pixi.js';

Instalação CDN

Através do jsDelivr:

Ou via descompactação:

Exemplo de uso básico

 import { Application, Sprite, Assets } from 'pixi.js';// O aplicativo criará um renderizador usando WebGL, se possível, // com um substituto para uma renderização de tela. Ele também configurará o ticker // e o estágio raiz PIXI.Containerconst app = new Application();// Aguarde até que o Renderer esteja disponívelawait app.init();// O aplicativo criará um elemento canvas para você que você // podemos então inserir no DOMdocument.body.appendChild(app.canvas);// carregar a textura que precisamosconst texture = await Assets.load('bunny.png');// Isso cria uma textura a partir de um 'bunny. png' imageconst bunny = new Sprite(texture);// Configure a posição do bunnybunny.x = app.renderer.width / 2;bunny.y = app.renderer.height / 2;// Gira em torno do centerbunny.anchor .x = 0.5;bunny.anchor.y = 0.5;// Adicione o coelho à cena que estamos construindoapp.stage.addChild(bunny);// Ouça as atualizações do frameapp.ticker.add(() => { // em cada quadro giramos o coelho um pouco bunny.rotation += 0.01;});

Aprender

• Site: Saiba mais sobre o PixiJS no site oficial.

• Começando:

• Confira o guia de primeiros passos.

• Confira também os tutoriais PixiJS de @miltoncandelero voltados para videogames com receitas e melhores práticas aqui

• Exemplos: comece a brincar com o código e os recursos do PixiJS aqui mesmo!

• Documentação da API: Conheça a API PixiJS conferindo a documentação.

• Guia: Guias de uso complementares à documentação da API aqui.

Demonstrações

• Demonstração de filtros

• Demonstração de coelho

• Demonstração de mascaramento

• Demonstração de interação

• Mais exemplos

Comunidade

• Fóruns: Confira as discussões e o Stackoverflow – ambos lugares amigáveis ​​para fazer suas perguntas sobre PixiJS.

• Bate-papo: você pode se juntar a nós no Discord para conversar sobre PixiJS.

Como construir

Observe que para a maioria dos usuários você não precisa construir este projeto. Se tudo que você deseja é usar PixiJS, basta baixar uma de nossas versões pré-construídas. O único momento em que você precisará construir o PixiJS é se estiver desenvolvendo-o.

Se você ainda não possui o Node.js e o NPM, instale-os. Em seguida, na pasta onde você clonou o repositório, instale as dependências de build usando npm:

 instalação npm

Então, para construir a fonte, execute:

 npm executar compilação

Como gerar a documentação

Os documentos podem ser gerados usando npm:

 documentos de execução npm

Contribuir

Quer fazer parte do projeto PixiJS? Ótimo! Todos são bem-vindos! Juntos chegaremos lá mais rápido :) Se você encontrar um bug, tiver uma ótima solicitação de recurso ou desejar possuir uma tarefa do roteiro acima, sinta-se à vontade para entrar em contato.

Certifique-se de ler o Guia de Contribuição antes de enviar alterações.

Licença

Este conteúdo é lançado sob a licença MIT.