green lantern

Linterna verde

Glannn es una biblioteca destinada a una capa de cuña Flash-HTML5. Disfrute de la vista previa en vivo de http://hozuki.github.io/green-lantern.

Las capturas de pantalla de los casos de prueba se pueden encontrar aquí.

Adquiriendo la fuente

Native git es muy recomendable contra otros clientes:

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

O, como paquete NPM, puede instalarlo a través de npm :

npm install glantern --save

Edificio de la fuente

Asegúrese de tener Node.js y NPM instalados. El resto es bastante simple:

 cd GLantern
npm install
gulp build

Después de la construcción, encontrará:

• un directorio build/node para NW.JS y Electron;
• un archivo build/GLantern-browser.js como el archivo JavaScript concatenado completo para navegadores;
• Un build/GLantern-browser.min.js (y la asignación de fuente correspondiente) para los navegadores, como el archivo minimizado para una mejor velocidad de carga.

Usando la biblioteca

Consulte la página de demostración en test/visual/index.html . Necesitará un entorno con WebGL, como navegadores modernos, NW.JS o Electron.

Importando a su proyecto

Glannn admite dos estilos de importación.

El primero es importar por <script> etiqueta. Use su atributo src y apunte al resultado compilado:

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

En entornos que admiten Node.js, como NW.JS o Electron, también puede usar la sintaxis require :

 const GLantern = require ( "glantern" ) ;

Después de importar con el primer o último estilo, el objeto GLantern está disponible a nivel mundial.

Uso de miembros exportados

La estructura del paquete de Flash se conserva en Glantern, por lo que agregar una GLantern. El prefijo generalmente funciona. Si desea que sea más parecido a ActionScript, Glannn proporciona una función injectToGlobal() para inyectar los "paquetes" al alcance 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 ( ) ;
} 

Preguntas y respuestas

Ver QA.MD.

Licencia

La licencia del MIT

También encontrará una copia en LICENSE.md .

Otros recursos

• Adobe Flash CC puede exportar proyectos Flash como proyectos WebGL. El tutorial y las restricciones se pueden encontrar aquí. Sin embargo, recientemente se ha anunciado que Flash es reemplazado por Animate. Entonces, amigos, es posible que desee dar una cálida bienvenida a esa nueva solución.
• Mozilla ha comenzado un proyecto, Shumway, que está destinado a proporcionar soporte de tipo flash mediante el uso de funciones HTML 5 en Firefox.

Créditos

Parte de Green-Lantern utiliza modificaciones basadas en webgl-utils.js . Su archivo de licencia se puede encontrar aquí.

Parte de Green-Lantern utiliza modificaciones basadas en AwayJS.Core.geom . Su archivo de licencia se puede encontrar aquí.

Parte de la linterna verde utiliza adaptaciones de la geometría anti-grano, originalmente por Maxim shemanarev en C ++. Su archivo de licencia se puede encontrar aquí.