green lantern

Lanterna verde

O Glantn é uma biblioteca destinada a uma camada de calço flash-html5. Aproveite a prévia ao vivo de http://hozuki.github.io/green-lantern.

Capturas de tela dos casos de teste podem ser encontradas aqui.

Adquirindo a fonte

git nativo é altamente recomendado contra outros clientes:

git clone https://github.com/hozuki/GLantern.git

Ou, como um pacote NPM, você pode instalá -lo via npm :

npm install glantern --save

Edifício da fonte

Verifique se você tem Node.js e NPM instalados. O resto é bastante simples:

 cd GLantern
npm install
gulp build

Após a construção, você encontrará:

• um diretório build/node para NW.JS e elétron;
• um arquivo build/GLantern-browser.js como o arquivo JavaScript completo e concatenado para navegadores;
• A build/GLantern-browser.min.js (e mapeamento de origem correspondente) para navegadores, como o arquivo minimizado para uma melhor velocidade de carregamento.

Usando a biblioteca

Consulte a página de demonstração em test/visual/index.html . Você precisará de um ambiente com WebGL, como navegadores modernos, NW.Js ou Electron.

Importando para o seu projeto

O Glann suporta dois estilos de importação.

O primeiro é importante importar por <script> . Use seu atributo src e aponte -o para o resultado compilado:

 < script type =" text/javascript " src =" GLantern-browser.min.js " > </ script >

Em ambientes que suportam o Node.js, como NW.Js ou Electron, você também pode usar a sintaxe require :

 const GLantern = require ( "glantern" ) ;

Depois de importar com o estilo anterior ou o último, o objeto GLantern está disponível globalmente.

Usando membros exportados

A estrutura do pacote do flash é preservada no Glann, portanto, adicionando um GLantern. O prefixo geralmente funciona. Se você deseja torná -lo mais parecido com o ActionScript, o Glantern fornece uma função injectToGlobal() para injetar os "pacotes" no escopo global.

 // Check if GLantern is supported
if ( GLantern . isSupported ( ) ) {
    const lantern = new GLantern . EngineBase ( ) ;
    const canvas = document . createElement ( "canvas" ) ;
    lantern . initialize ( canvas , 682 , 438 ) ;
    document . body . appendChild ( lantern . view ) ;
    window . addEventListener ( "unload" , function ( ) {
        lantern . dispose ( ) ;
    } ) ;
    draw ( true , this ) ;
} else {
    const prompt = document . createElement ( "span" ) ;
    prompt . textContent = "Oops, GLantern is not supported on your browser." ;
    document . body . appendChild ( prompt ) ;
}

/**
* Draws a rectangle.
*/
function draw ( ) {
    function createShape ( alpha ) {
        const s = new GLantern . flash . display . Shape ( lantern . stage , lantern . stage ) ;
        lantern . stage . addChild ( s ) ;
        s . alpha = alpha ;
        return s ;
    }
    const shape1 = createShape ( 1 ) ;
    shape1 . graphics . beginFill ( 0xffffff ) ;
    shape1 . graphics . drawRect ( 0 , 0 , 540 , 383 ) ;
    shape1 . graphics . endFill ( ) ;
} 

Q&A

Veja QA.MD.

Licença

A licença do MIT

Você também encontrará uma cópia no LICENSE.md .

Outros recursos

• O Adobe Flash CC é capaz de exportar projetos flash como projetos WebGL. O tutorial e as restrições podem ser encontradas aqui. No entanto, foi anunciado recentemente que o flash é substituído por Animate. Então, pessoal, você pode dar uma recepção calorosa a essa nova solução.
• Mozilla iniciou um projeto, Shumway, que se destina a fornecer suporte em forma de flash usando os recursos HTML 5 no Firefox.

Créditos

Parte do verde-lanterna usa modificações baseadas no webgl-utils.js . Seu arquivo de licença pode ser encontrado aqui.

Parte do verde-lanterna usa modificações baseadas no AwayJS.Core.geom . Seu arquivo de licença pode ser encontrado aqui.

Parte da lanterna verde usa adaptações da geometria anti-grão, originalmente por Maxim Shemanarev em C ++. Seu arquivo de licença pode ser encontrado aqui.