Gestire luci e ombre in una scena 2D non è un compito facile anche se farlo bene porta a risultati davvero notevoli, creando immediatamente atmosfera e realismo. Illuminated.js è un rendering engine che consente di creare oggetti e sorgenti luminose nelle nostre applicazioni e giochi HTML5, rendendo davvero semplice la gestione di scene complesse dove si intrecciano svariati fasci di luci e zone di ombra.

Il framework utilizza canvas e dunque può essere utilizzato e integrato in qualsiasi applicazione che già usa questo strumento per disegnare elementi e scene. Per di più, anche se non si usa canvas ma si è creata la propria applicazione tutta in DOM si può usare lo stesso questa libreria posizionandola "dietro" il nostro DOM, con z-index.

Creare e gestire elementi è molto semplice. Questo, ad esempio, è il codice per creare una sorgente luminosa:

new Lamp({<br />      position: new Vec2(12, 34),<br />      distance: 100,<br />      diffuse: 0.8,<br />      color: 'rgba(250,220,150,0.8)',<br />      radius: 0,<br />      samples: 1,<br />      angle: 0,<br />      roughness: 0<br />    })

La pagina di tutorial e approfondimento, con esempi e codice, è qui: http://blog.greweb.fr/2012/05/illuminated-js-2d-lights-and-shadows-rendering-engine-for-html5-applications/. Fatevi illuminare!

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis