25+ risorse per il successo con HTML5 Canvas
Nel caso in cui hai vissuto sotto una roccia negli ultimi due anni, l'elemento canvas nella specifica HTML5 è abbastanza semplice da capire. Fondamentalmente, è un'area rettangolare nella tua pagina in cui puoi usare JavaScript per disegnare qualsiasi cosa tu scelga.
Si tratta, letteralmente, di una "tela" digitale che è possibile utilizzare per il rendering di grafica di gioco, grafici, animazioni e altre immagini visive al volo. Ciò elimina sostanzialmente la necessità di altri tipi di rendering di animazioni e grafica online (come Flash) ed è molto più compatibile su piattaforme e dispositivi.
Spero che tu lo sappia già. Mentre l'idea alla base di Canvas è semplice, lavorare con esso può essere un po 'più complesso. Quindi ecco alcune grandi risorse per iniziare!
Tela di apprendimento
Se sei completamente nuovo su tela, potresti iniziare con una di queste pratiche guide. Ci sono centinaia di tutorial e guide là fuori, ma questi tre forniscono praticamente tutto ciò che un principiante vorrebbe sapere sulla tela prima di iniziare.
Immergiti in HTML5
Immergiti in HTML5 ha un fantastico capitolo sul lavoro con la tela che include una definizione di base e informazioni sulla costruzione di forme semplici, coordinate su tela, percorsi, testo e altro.
Mozilla Developer Network
Il Mozilla Developer Network ha una guida molto approfondita alla tela che include le basi, disegnare forme, usare le immagini, applicare stili e colori, trasformazioni, compositing e altro.
Esercitazioni su tela HTML5
Esercitazioni su tela HTML5 ha esattamente ciò che suggerisce il titolo: tonnellate di tutorial per l'utilizzo di tele che coprono tutto, da percorsi e curve a immagini, testo e altro ancora.
Strumenti, framework e librerie
La tela può essere utilizzata per tutta una serie di scopi diversi, ma le app e i giochi sono i più comuni. I giochi, in particolare, sono un uso estremamente popolare della tela, con tonnellate di motori di gioco disponibili.
Indipendentemente da cosa vuoi fare con il canvas, gli strumenti e le altre risorse sottostanti ti aiuteranno a iniziare.
Animatron
Animatron è uno strumento avanzato per la creazione di animazioni HTML5 senza necessità di codifica. Ha un'interfaccia utente semplificata, supporta i progetti self-hosted (in modo da poter scaricare i file HTML5, JavaScript e delle risorse per il controllo totale), dispone di strumenti di collaborazione in tempo reale e supporta progetti pubblici e privati.
Il piano gratuito supporta fino a 20 progetti pubblici, mentre i piani a pagamento ti offrono più progetti e altre funzionalità, a partire da soli $ 6 al mese.
Mixeek
Mixeek è uno strumento di animazione basato esclusivamente su CSS3, HTML5 e JavaScript. Ha uno strumento di progettazione online facile da usare e molto intuitivo. E le animazioni che crea sono supportate su IE, Firefox, Chrome, Opera e Safari, così come i browser mobili.
Mixeek è completamente gratuito da usare.
Radi
Radi ti consente di creare video, animazioni e grafica in tempo reale senza l'apprendimento del codice. Funziona con entrambi i tag canvas e video e supporta molti tipi di livelli di contenuto tra cui immagini, filmati, forme, testo e altro. E naturalmente supporta elementi interattivi. Puoi scaricare Radi beta gratuitamente.
PlayCanvas
PlayCanvas è un motore di gioco WebGL facile da usare, gratuito e open source. Include un motore fisico (con supporto per corpi rigidi, grilletti, veicoli e giunti), motore grafico (con supporto per illuminazione per pixel, ombre e effetti post), e altro ancora. PlayCanvas include anche strumenti di sviluppo collaborativo e include anche l'hosting gratuito per i tuoi giochi.
Costruisci 2
Costruisci 2 è un motore di gioco progettato specificamente per i giochi 2d. È perfetto per tutti, dall'hobbista occasionale allo sviluppatore professionista che vuole creare prototipi e prototipi più veloci, o anche risparmiare tempo sulla codifica per la produzione. Include supporto per comportamenti flessibili, anteprime istantanee, un potente sistema di eventi e facile estensibilità. E, naturalmente, i tuoi giochi possono essere esportati su una varietà di piattaforme. Puoi scaricare una versione gratuita con funzionalità limitate (perfetta per provarlo) o acquistare una licenza a partire da meno di $ 130.
EaselJS
EaselJS è una libreria JavaScript che facilita il lavoro con l'elemento canvas. La sua API è familiare agli sviluppatori di Flash, ma con sensibilità JavaScript. Include nidificazione di oggetti, un modello di interazione del mouse e altro. Sono disponibili demo per iniziare da tutto, dal trascinamento della selezione ai fogli sprite ai filtri e alle maschere vettoriali.
Phaser
Phaser è un framework open source veloce e gratuito che supporta JavaScript e TypeScript. Utilizza WebGL e canvas e supporta l'animazione, le particelle, le fotocamere, il ridimensionamento del dispositivo, le tilemaps e altro.
Three.js
Three.js è una libreria JavaScript che semplifica molto il lavoro con WebGL. Semplifica il tuo codice in modo significativo ed è documentato molto accuratamente. Ci sono tantissimi esempi di come è stato usato in pratica, anche su siti come quello per i film di Hobbit e altro.
Turbulenz
Turbulenz è un motore di gioco HTML5 che puoi utilizzare per creare, testare e persino monetizzare giochi. Turbulenz consiste di due parti: il motore e l'SDK. Il motore supporta effetti di rendering e particelle, un motore fisico (incluso il supporto per collisioni e animazioni), gestione di scene e risorse e altro ancora. L'SDK include campioni, documentazione, un visualizzatore, strumenti di elaborazione degli asset e risorse di packaging e distribuzione.
MelonJS
MelonJS integra il formato di mappa Tiled per rendere i livelli di progettazione più veloci e più snelli. È stato progettato come una libreria semplice, gratuita e autonoma per lo sviluppo di giochi 2D compatibili con tutti i principali browser. Utilizza un algoritmo di collisione basato su poligono e un rilevamento di collisione in fase ampia utilizzando il partizionamento spaziale. Include anche effetti di interpolazione e transizione e sistemi di particelle e animazioni di base.
Quinto
Quinto è un motore di gioco multipiattaforma facile da usare che ti consente di creare giochi con molto meno codice. Il gioco di esempio sul loro sito utilizza circa 80 righe di codice per creare un gioco in stile platform che è piuttosto sorprendente. Quintus è completamente documentato e ha una community che ti può aiutare se hai bisogno di supporto.
furbo
furbo ti permette di renderizzare con canvas o DOM. Utilizza un sistema di componenti di entità per lo sviluppo del gioco, evitando lunghe catene di ereditarietà. Include anche tonnellate di componenti nativi per animazioni, effetti, suoni, input e altro. Ha avanzato rilevamento delle collisioni SAT, è compatibile con browser diversi e supporta mappe sprite per disegnare più facilmente le entità di gioco.
LimeJS
LimeJS è un framework di gioco HTML5 per la creazione di giochi di tipo nativo per dispositivi moderni. È ben documentato, con una comunità per ulteriore supporto. Include funzioni per layout, nodi, forme e riempimenti, eventi, animazioni e altro.
KineticJS
KineticJS è un framework ad alte prestazioni per la creazione di animazioni, transizioni, nesting dei nodi, stratificazione, filtraggio, gestione degli eventi e altro con canvas HTML5 e JavaScript per app mobili e desktop. È ben documentato e ci sono un sacco di esempi già disponibili.
bHive
bHive è un framework canvas che facilita la creazione di animazioni, giochi, applicazioni e esperienze utente complesse. Include il supporto per il disegno, l'animazione e l'interazione, con demo ed esempi, oltre alla documentazione.
Paper.js
Paper.js è un framework di scripting di grafica vettoriale che gira sulla tela. Ha potenti funzionalità per lavorare con la grafica vettoriale e le curve di Bezier, il tutto racchiuso in un'interfaccia di programmazione coerente e pulita. È ampiamente compatibile con e basato su Scriptographer (un ambiente di scripting per Adobe Illustrator). È facile imparare se sei un principiante e hai anche molte funzionalità per gli utenti più esperti.
Fabric.js
Fabric.js è una libreria di canvas HTML5 JavaScript semplice ma potente che fornisce un modello di oggetto interattivo sopra l'elemento canvas. Include persino un parser SVG-to-canvas (e viceversa). Puoi creare e popolare oggetti su tela, incluse immagini, forme complesse, testo e altro.
Voxel.js
Voxel.js è un toolkit per la creazione di giochi 3D open source. Rende più facile la creazione di giochi voxel come Minecraft nel browser. È diviso in più componenti, quindi puoi utilizzare solo ciò di cui hai bisogno invece di un enorme framework di gioco gonfio.
Gioco {chiusura} DevKit
Il Gioco {chiusura} DevKit rende più facile e veloce la creazione di giochi, con velocità nativa. È 100% JavaScript, con codice testato in battaglia che è stato distribuito in tutto il mondo. Può essere utilizzato con il tuo editor di testo e browser preferiti, senza la necessità di altri strumenti specializzati o download. E poiché utilizza OpenGL per i giochi mobili, hanno una velocità nativa su Android e iOS.
Motore di gioco isogenico
Il Motore di gioco isogenico è un motore di gioco multiplayer HTML5 avanzato che viene utilizzato da un certo numero di grandi nomi, tra cui la BBC. Include supporto 2D e isometrico, con emettitori di particelle, interpolazione e animazione basata su celle. E a differenza di altri motori di gioco "multiplayer" che gettano in una libreria di rete, Isogenic ha una funzionalità multiplayer più avanzata e in tempo reale rispetto a qualsiasi altro motore di gioco HTML5.
Enchant.js
Enchant.js è un semplice framework per la creazione di giochi e app con HTML5 e JavaScript. È già stato utilizzato su oltre 1.000 giochi e app e ha numerosi documenti di supporto. È orientata agli oggetti, multi-piattaforma e basata su eventi, completa di motore di animazione, supporto WebGL, libreria di contenuti e altro.
Wade Game Engine
Il Wade Game Engine facilita la creazione di giochi per dispositivi desktop e mobili ed è progettato per funzionare bene su entrambi. Wade ha un'architettura modulare in modo da poter creare rapidamente qualsiasi tipo di gioco di cui hai bisogno. Ha un modulo base per la flessibilità, un modulo di fisica per i giochi che ne hanno bisogno, un modello isometrico per giochi di ruolo e di strategia e altro ancora.
LycheeJS
LycheeJS è un motore di gioco OpenGL HTML5 e nativo per giochi incorporati, console, mobili, server e desktop. Supporta i layout reattivi e include un motore di effetti e interpolazioni, il motore fisico di Verlet, un motore di particelle, un motore di animazione sprite, un motore di font bitmap e molto altro. Include anche la tecnologia websocket per i giochi multiplayer.
Heatmap.js
Heatmap.js è una semplice libreria per la creazione di heatmap JavaScript utilizzando canvas HTML5. È la più avanzata libreria di visualizzazione heatmap sul web, con un ingombro molto leggero (meno di 3kB di gzip) e offre un supporto premium.
Chart.js
Chart.js ti consente di creare grafici semplici, puliti e accattivanti utilizzando canvas e JavaScript. Sono disponibili sei tipi di grafici, è privo di dipendenza, reattivo, modulare e interattivo.
Conclusione
Indipendentemente da quali sono i tuoi piani con la tela, le risorse qui dovrebbero metterti sulla tua strada. Costruire giochi, applicazioni e aggiungere l'animazione o l'interattività ai tuoi siti è molto più semplice con le librerie di canvas, i framework e i motori di gioco.