Ci imbattiamo costantemente in animazioni flash – su Internet e nelle trasmissioni televisive. Creare una semplice animazione Flash utilizzando la tecnologia Flash è un compito abbastanza semplice poiché Flash offre molti strumenti utili che semplificano l'intero processo. Se vuoi creare un'animazione flash o un cartone animato, puoi disegnarlo in appena un paio d'ore.
Parte 1
Animazione flash fotogramma per fotogrammaNozioni di base sull'animazione stop-motion. Questo metodo è considerato il metodo principale per creare un'animazione "tradizionale", in cui ogni fotogramma successivo include la stessa immagine, ma leggermente modificata. Quando tutti i fotogrammi vengono riprodotti, l'immagine “prende vita”. Questo è lo stesso metodo utilizzato dagli animatori di cartoni animati disegnati a mano e richiede più tempo rispetto al gemellaggio (vedere la sezione successiva).
Installa Flash Professional. Esistono molti programmi per creare animazioni Flash, ma il più potente è Adobe Flash Professional CC. Puoi provare questo programma gratuitamente o utilizzare un altro prodotto (se non desideri iscriverti ad Adobe Creative Cloud). La parte restante di questo articolo descrive come utilizzare Flash Professional.
Poiché l'animazione fotogramma per fotogramma richiede più immagini (leggermente diverse tra loro), è necessario creare queste immagini manualmente. Per fare ciò, utilizza Adobe Flash Professional o disegna immagini in qualsiasi editor grafico.
Crea il primo fotogramma. La prima volta che avvii Adobe Flash Professional, vedrai una tela (livello) vuota e una sequenza temporale vuota. Man mano che vengono aggiunti fotogrammi, la timeline si riempirà automaticamente. Puoi lavorare con i livelli proprio come fai in Photoshop.
Converti l'immagine in un simbolo. In questo caso, puoi aggiungere l'immagine alla cornice più volte. Ciò è particolarmente utile se è necessario aggiungere rapidamente diverse immagini simili in un fotogramma (ad esempio, pesci in un acquario).
Aggiungi cornici vuote. Una volta pronto il primo fotogramma chiave, inserisci i fotogrammi vuoti e inizia a creare il secondo fotogramma chiave. Premi F5 (quattro o cinque volte) per aggiungere fotogrammi vuoti dopo il primo fotogramma chiave.
Crea un secondo fotogramma chiave (dopo aver aggiunto alcuni fotogrammi vuoti). Ci sono due diversi modi per fare ciò: puoi copiare un fotogramma chiave esistente e apportarvi piccole modifiche, oppure puoi creare un fotogramma chiave vuoto e aggiungervi una nuova immagine. Se stai utilizzando un disegno creato in un altro programma, utilizza il secondo metodo. Se stai inserendo un'immagine creata utilizzando gli strumenti di disegno di Adobe Flash Professional, utilizza il primo metodo.
Ripeti il processo. Dopo aver creato due fotogrammi chiave, ripeti il processo: aggiungi alcuni fotogrammi vuoti tra ciascun fotogramma chiave e assicurati che l'animazione venga riprodotta senza intoppi.
Trasforma il disegno. Se hai creato fotogrammi chiave e un tracciato, puoi trasformare l'immagine in modo che cambi gradualmente mentre ti sposti lungo il tracciato dell'interpolazione. Puoi modificare la forma, il colore, l'inclinazione, la dimensione e qualsiasi altro aspetto dell'immagine.
Aggiungi il tocco finale. Prova l'animazione creata premendo Ctrl + Invio. Assicurati che il disegno (personaggio) cambi correttamente e che l'animazione venga riprodotta alla velocità corretta. Se l'animazione viene riprodotta troppo velocemente, riduci il valore FPS o aumenta la durata dell'interpolazione.
Ciao di nuovo! A causa di molte domande e opinioni sui libri flash e e-book In generale, vediamo come creare un flash book senza utilizzare programmi di terze parti.
Circa una settimana fa mi sono imbattuto in un problema interessante: come inserire un flash book realizzato con il metodo qui descritto in un blog realizzato su una piattaforma gratuita? Non lo so!
Sembrerebbe che tutto sia elementare, carichi i file PDF ricevuti nel programma Flip sul tuo hosting e li visualizzi sulla pagina del blog desiderata. Ma... tutto questo è possibile se il tuo blog si trova su un hosting a pagamento e hai accesso ai file del sito tramite il file manager dell'hosting o Filezilla.
Cosa succede se non c'è accesso? Cosa fare in questo caso?
Quindi mi hanno posto questa domanda: come mettere un libro flash su un blog creato sulla piattaforma gratuita Weebly (una piattaforma interessante, tra l'altro, puoi creare un modello di blog senza preoccuparti di codici, layout e simili).
Quindi, tutto andrebbe bene se ci fosse accesso all'hosting, ma risulta che gli account gratuiti non hanno accesso. Cosa fare?
C'è una soluzione. Come si suol dire, ci sono sempre due vie d'uscita da ogni situazione senza speranza, anche se venissi mangiato, avrai comunque due vie d'uscita.
La soluzione è abbastanza elementare, ma allo stesso tempo comoda fino alla disgrazia, otteniamo qualcosa come YouTube, ma solo per i libri.
COSÌ. Il servizio viene chiamato problema .
Ripeto, questo servizio funziona secondo il principio di YouTube, carichi i tuoi libri su di esso in formato PDF (puoi anche non solo in PDF, ma ne parleremo più avanti), quindi inserisci un collegamento o un codice nelle pagine del tuo blog.
Vediamo come appare. Vai al link sopra
E ci registriamo. Puoi usare Facebook o semplicemente usare la posta elettronica.
Per me è più facile sui social network, perché per me è così
Allora, hai preparato un opuscolo in formato PDF? NO?! Quindi crea un file PDF e vai avanti.
Potrebbe non essere PDF, questo servizio supporta diversi formati, ma ci sono alcune limitazioni (vedi requisiti tecnici alla fine dell'articolo).
Se all'improvviso non hai un libro a portata di mano, prendi qualsiasi testo, ad esempio, ho preso il mio. L'ho digitato in Word e l'ho salvato in formato PDF.
Mi sono distratto, quindi ho caricato il libro. Dopo la registrazione, fare clic sul pulsante Caricamento
e vediamo questa finestra in cui ci viene chiesto di selezionare il file desiderato o semplicemente trascinarlo nell'area designata.
A proposito, puoi consentire il download del libro e quindi, una volta inserito nel blog, verrà visualizzato un collegamento per il download. Clic Pubblica ora E…
mostra ai tuoi amici cosa hai fatto, ma non lo consiglio. Certo, nessuno ti vieta di vedere come sarà il tuo libro, ma non potrai inserirlo in un blog.
Quindi, premi il pulsante La mia pubblicazione e attendi che il tuo libro venga caricato sul server Issuu.
In qualche modo hanno avuto dei problemi lì, e ho dovuto aspettare due giorni e dare un'occhiata a questo.
“Aspetta, stiamo caricando le tue pubblicazioni...” e così via per due giorni, alla fine ha dato errore e ho dovuto rifare la procedura di download del file. Ma ora tutto è normale e i file vengono scaricati una o due volte. A quanto pare c'erano problemi tecnici...
Tutto è bene quel che finisce bene, e ora inseriamo il libro nel blog così potrete sfogliarlo direttamente nell'articolo, e in diversi orientamenti.
Andiamo a La mia pubblicazione e vediamo un elenco di libri scaricati o il numero di libri che hai scaricato.
Fare clic con il tasto sinistro del mouse sul libro desiderato e selezionarlo
Vediamo la finestra delle impostazioni per il futuro flash book
Personalizzalo come preferisci:
Dopo tutte le modifiche, fare clic sul pulsante Salva stile. Questo è necessario, altrimenti la finestra con il codice non si aprirà.
A proposito, puoi selezionare la casella Utilizzare su Tumblr, WordPress o simili, oppure potresti non scommettere. Non ho notato alcuna differenza nella visualizzazione del libro, cambia solo il codice stesso, ma ho riscontrato che dopo aver inserito il codice “con un segno di spunta”, il libro stesso non veniva visualizzato sulla pagina. Decidi tu stesso.
Ora vediamo come si presenta il libro nei diversi orientamenti.
Orientamento orizzontale (due pagine aperte)
Orientamento verticale
La differenza è, ovviamente, significativa. In termini di lettura, l'orientamento verticale è più conveniente, ma per visualizzare le immagini, l'orientamento orizzontale è più conveniente.
Sebbene ci siano degli svantaggi in tutto questo fascino. Ad esempio, mi è stato detto che l'abbagliamento che simula la diffusione di un libro distorce le fotografie, ma non si può fare nulla al riguardo.
Questi sono tutti i semplici passaggi necessari per ottenere un libro flash.
È veloce, semplice, conveniente e non occupa spazio sul tuo hosting. Ci sono solo alcuni requisiti per i dati di origine. Fornisco estratti dalle istruzioni per il servizio, nella mia interpretazione
Qualcosa del genere.
È chiaro che i libri flash sono contenuti piuttosto specifici, il cui scopo sono principalmente riviste, cataloghi, fumetti e simili. Ma ancora, ancora...
Ti piace il servizio e l'articolo? Aspetto nei commenti! Buona fortuna a tutti! Ciao!
Fortunatamente, gli utenti Internet più attivi possono creare un gioco in flash. I principianti possono trarne vantaggio anche se hanno competenze di programmazione di base (acquisirle, tra l'altro, non è così difficile, se solo ne avessi il desiderio). È vero, avrai bisogno di un po' di tempo per padroneggiare uno dei tanti designer di giochi flash speciali (ad esempio, Macromedia Flash).
Molti siti con Software contenere, tra le altre cose, proprio tali costruttori. L'installazione su un computer, di norma, non crea problemi particolari per l'utente. Ricorda che il programma selezionato deve essere registrato e tutte le modifiche necessarie installate, quindi ti servirà fedelmente, cioè senza interruzioni. La maggior parte dei progettisti di giochi viene realizzata utilizzando lingua inglese, ma puoi cercare un crack o una versione russa. Spesso nelle impostazioni stesse c'è una finestra in cui puoi impostare la tua lingua madre.
Come creare un gioco in flash: preparazione preliminare
Anche prima di sederti per padroneggiare il designer, dovresti già avere uno scenario di gioco approssimativo e una trama delineati. È una buona idea pensare in anticipo all'animazione e al design: questo ti farà risparmiare molto tempo. Prima di creare il tuo gioco flash, decidi il tipo desiderato. Per trarre ispirazione, visita i siti con librerie di giochi flash.
I professionisti consigliano ai principianti di iniziare creando applicazioni semplici, come i giochi arcade. E solo allora potrai passare ad altro tipi complessi giochi e persino creare le tue strategie. Puoi selezionare il tipo di giocattolo futuro nello stesso designer, dove tutti i generi sono opportunamente ordinati. Attiviamo, ad esempio, la sala giochi (facendo doppio clic).
Come creare un gioco in flash: lavorare nel game designer
Apri il modello e trascina su di esso gli oggetti necessari, situati nelle sezioni "Oggetti di animazione" e "Oggetti statici". Crea uno sfondo scegliendo una texture e un colore. Seleziona i colori per gli oggetti utilizzando una tavolozza di colori. Utilizza il lettore di animazione per verificare quali altre funzioni non vengono utilizzate. Nelle impostazioni, imposta i livelli di movimento dei personaggi del gioco (nei giochi arcade) o degli oggetti (nei giochi di logica).
Dopo aver fatto tutto il necessario, avvia il debugger. In questa modalità puoi giocare al tuo gioco, partendo da qualsiasi livello: questo è importante per testarne la funzionalità. Elimina eventuali errori rilevati e controlla nuovamente il gioco flash. Se è tutto ok salva le modifiche.
Come creare un gioco in flash: ricordare il gioco
Ora puoi trovare un nome originale per la tua creazione flash e scrivere un breve riassunto. Utilizza il designer salvaschermo per creare uno screensaver impressionante per il tuo gioco. Salva anche tutte le modifiche apportate.
Rivedi il tuo gioco flash dall'inizio alla fine per trovare (o non trovare) errori e malfunzionamenti in esso, e in generale non fa male dare uno sguardo critico al tuo lavoro. È molto importante che il gioco abbia parti logiche e chiaramente definite, come buon libro o un film: inizio, sviluppo degli eventi, fine.
Invia la versione pulita del tuo gioco ai tuoi amici: lascia che i critici più onesti valutino i risultati che hai ottenuto. Bene, dopo puoi già caricare il gioco flash su Internet.
Come creare un gioco in flash se hai il desiderio, ma nessuna conoscenza?
A quei tanti utenti così preoccupati per questa domanda, vogliamo sicuramente dare una risposta. Ricorda che qualsiasi conoscenza non può provenire dal nulla. Qualsiasi nuova attività deve iniziare da qualche parte. Col tempo, inizierai a capire esattamente quali conoscenze ti mancano per creare giochi. Inizierai a chiedere consigli, a cercare consigli, a leggere letteratura pertinente, grazie alla quale inizierai ad avanzare sempre di più nelle tue capacità. Non aver paura delle cose nuove, altrimenti non otterrai mai ciò che desideri. Buona fortuna!
A molti di noi piace passare il tempo giocando a brevi giochi flash, ma poche persone pensano a come vengono create queste opere d'arte virtuale. Nel frattempo, questa tecnologia esiste dalla fine degli anni '90. Il suo creatore è Compagnia americana Macromedia (ora Adobe Systems). Questo sistema viene utilizzato attivamente non solo per lo sviluppo di giochi, ma anche nel web mastering. La maggior parte dei siti web su Internet utilizzano Flash (anche se alcuni stanno già passando a HTML 5). Anche il frutto dell'ingegno di Adobe Systems è un programma per la creazione di applicazioni Macromedia Flash. Chiunque può padroneggiarlo, anche chi è lontano dalla tecnologia informatica. Tuttavia, prima di iniziare a parlare di come realizzare giochi, diamo un'occhiata ai principali pro e contro di questa piattaforma.
Nonostante questi svantaggi, Flash è indispensabile per creare piccoli minigiochi amatoriali.
La creazione di animazioni sul motore ricorda un hobby infantile, quando un'immagine veniva disegnata agli angoli delle pagine fotogramma per fotogramma e, quando girata rapidamente, iniziava a muoversi. L'essenza delle animazioni flash è la stessa: posizioni gli oggetti grafici fotogramma per fotogramma sulla timeline e quando vengono riprodotti iniziano a muoversi. Con i giochi è più difficile. Per crearli è necessario padroneggiare il linguaggio di programmazione ActionScript 3.0. Puoi studiarlo con l'aiuto di libri e libri di testo speciali (ad esempio, il libro di Colin Mook "ActionScript 3.0 for Flash"). Ci sono anche alcuni video didattici su YouTube. Ci vuole solo un piccolo sforzo per padroneggiare questo programma. Fatto ciò, difficilmente avrai domande su come scrivere un gioco Flash.
Per prima c'è la "Finestra del titolo". Questa è una schermata iniziale che dovrebbe dare una prima impressione al giocatore. Qui è importante mostrare tutto il tuo talento artistico e la tua immaginazione.
Il passaggio successivo è creare la pagina Regole. Nonostante alcuni sviluppatori ignorino questa fase, è comunque meglio formulare le regole del gioco, rendendolo più comprensibile e amichevole. A volte sono scritti su una pagina esterna o in una finestra separata.
Lo “Sfondo” è l'ambiente in cui verranno posizionati gli oggetti grafici. In alcuni casi, gli oggetti occupano l'intero schermo. Lo sfondo del gioco può essere creato utilizzando gli strumenti di Adobe Macromedia o utilizzando programmi di terze parti (ad esempio, Ogmo Editor è eccellente per creare scene bidimensionali). È importante che sia tematico e integri il concetto generale del gioco.
La fine del gioco segna la "finestra di game over". Il gioco può terminare in diversi casi: quando il giocatore vince, quando perde o semplicemente quando il tempo/le munizioni finiscono. Per ogni caso viene creata una finestra separata con il corrispondente contenuto animato. A volte in questa finestra viene inserito un elenco di vincitori.
Quindi, dopo aver studiato Adobe Flash, chiunque saprà come creare un gioco. Basta comprendere i meccanismi di funzionamento di base e in breve tempo sarai in grado di creare giochi semplici. Come in ogni attività, la cosa principale qui è mostrare sufficiente perseveranza e interesse, e il risultato non tarderà ad arrivare.
Un programma per creare giochi flash senza conoscere i linguaggi di programmazione. Ti consente di creare giochi da blocchi logici e immagini pre-preparate.
C'era una volta, probabilmente già un paio di anni fa, sul nostro sito web apparve il programma Game Maker, che ti permetteva di realizzare giochi praticamente senza conoscere alcun linguaggio di programmazione!
Fino ad ora, questa pagina è una delle più discusse tra noi e spesso nei commenti ci sono lamentele sul fatto che non può essere utilizzata per creare giochi che possano essere giocati online. Oggi torneremo sull'argomento dello sviluppo di giochi e esamineremo un programma simile in grado di creare giochi flash: Stencyl!
Utilizzando Stencyl, puoi creare giochi 2D di qualsiasi genere, ma soprattutto il motore del programma è "su misura" per vari giochi d'azione sparatutto. Strutturalmente, il programma è un insieme di strumenti in cui puoi, se lo desideri, creare un gioco da zero senza utilizzare applicazioni di terze parti.
Chiudi la finestra pop-up con le informazioni su nuova versione programma con il pulsante “Chiudi” o “Non mostrare più” (se non vogliamo vedere questa finestra ogni volta che avviamo il programma) e otteniamo invece la seguente finestra:
Qui ci viene chiesto di creare il nostro account nella comunità degli sviluppatori Stencyl. In linea di principio, non è necessario creare un account (per fare ciò, fare clic sul pulsante "Ricordami più tardi" in basso), ma la registrazione ti dà la possibilità di scaricare modelli e azioni aggiuntivi da un archivio online chiamato StencylForge, quindi non farà male :). Per lo stabilimento account Fare clic sul pulsante “Crea un account” e andare al modulo di registrazione:
Qui compiliamo i campi standard con login, password (due volte) e indirizzo E-mail, quindi premere il pulsante "Iscriviti". Se tutto va bene, l'interfaccia della finestra di avvio del programma si aprirà finalmente davanti a te.
Esternamente l'area di lavoro della finestra iniziale di Stencyl è divisa in diverse zone:
In alto c'è tradizionalmente una barra dei menu e una barra degli strumenti. Tutte le principali impostazioni e pulsanti di controllo sono raccolti qui. Sotto la barra degli strumenti abbiamo una piccola striscia grigia stretta. Contiene schede (sì, l'interfaccia di Stencyl è multi-scheda, il che è molto comodo) e pulsanti per passare rapidamente dall'una all'altra (a destra).
L'area di lavoro principale è divisa in due parti: a sinistra c'è il pannello di navigazione per le sezioni del programma, e a destra c'è il contenuto principale (nella schermata principale c'è l'elenco dei giochi), che cambia a seconda la modalità operativa attualmente attiva. Ci sono alcuni altri pulsanti aggiuntivi in basso che ti consentono di:
Per autodidatta capacità di Stencyl Puoi seguire un corso di formazione (e sarebbe consigliabile seguirlo), nonché aprirne uno giochi già pronti, che corrisponde maggiormente alla tua idea e guarda come funziona tutto lì. E propongo di studiare il lavoro del programma usando l'esempio della creazione di un gioco sulle avventure del simbolo del nostro sito e della sua residente virtuale: Frida Best!
Se tu, prima di decidere di creare il tuo gioco, hai guardato esempi standard di giochi su Stencyl, potresti aver notato che fondamentalmente sono tutti abbastanza semplici, a schermo singolo e hanno una vista laterale. Realizzeremo uno sparatutto dinamico con vista dall'alto e riprese con il mouse! Tutto è come nei giochi “grandi” :).
Per il tuo progetto, puoi modificare la logica di uno dei modelli già pronti, ma non stiamo cercando modi semplici e quindi - solo "da zero", solo "hardcore" :). Per fare ciò, clicca sul pulsante “Crea una nuova partita” sulla barra degli strumenti dell'area di lavoro (o nel menu “File” - “Crea nuova”) e accedi alla seguente finestra:
Qui possiamo scegliere un modello di gioco per genere con una serie preselezionata di funzioni e azioni per il tuo progetto. Tuttavia, creeremo un gioco da zero, quindi seleziona "Gioco vuoto" e fai clic sul pulsante "Avanti".
Nel passaggio successivo dovremo effettuare alcune impostazioni di base:
Nel campo “Nome” dobbiamo indicare il nome del nostro gioco e nella sezione “Dimensione schermo” impostare le dimensioni campo da gioco, specificandone la larghezza (Width) e l'altezza (Height) in pixel. Successivamente, fai clic sul pulsante “Crea” e vai direttamente all’interfaccia dell’editor del gioco:
Per impostazione predefinita, davanti a noi si apre la scheda "Dashboard", sulla quale a sinistra è raccolto l'intero albero delle risorse del gioco e a destra l'area di lavoro. Qui, credo, sarebbe opportuno fare alcune spiegazioni sulla struttura dell'“albero”.
Si compone di quattro rami, i primi due dei quali contengono set standard di risorse (RESOURCES) e logica (LOGIC), e gli ultimi due possono facoltativamente memorizzare pacchetti di risorse scaricati manualmente (RESOURCE PACKS) ed estensioni (EXTENSIONS).
Il ramo principale qui è il ramo RESOURCES. Contiene le seguenti sezioni:
Non esiste un'opinione chiara sull'ordine in cui implementare questo o quel gioco. Dipende da cosa è conveniente per te, ma consiglierei il seguente algoritmo:
Creiamo la prima scena - creiamo un personaggio - creiamo nemici - creiamo bonus - creiamo le fasi rimanenti
Per creare una scena in Stencyl è necessario disegnarne l'aspetto nel ramo Scene. Tuttavia, per poter disegnare, dobbiamo prima avere dei blocchi con cui “disegnare”. Questi blocchi nel programma sono chiamati riquadri e sono memorizzati nella sezione Tileset:
Un set di tessere è una matrice semplice composta da immagini caricate al suo interno. Puoi caricare una matrice già pronta (un'immagine composta da più immagini di uguali dimensioni in una o più righe) o integrare i set esistenti con immagini separate.
Innanzitutto, dobbiamo creare un nuovo set di tessere (il pulsante "Crea nuovo" nella sezione Tileset), dopodiché vedremo una finestra come nello screenshot qui sopra. Per caricare un'immagine, dobbiamo fare clic sul pulsante "Scegli immagine" e selezionare un file pre-preparato con le immagini desiderate nella finestra Explorer che si apre.
Una volta caricata l'immagine, imposteremo i suoi parametri di layout e le dimensioni in larghezza e altezza, dopodiché (se tutto viene visualizzato correttamente) potrai aggiungere l'immagine al set cliccando il pulsante “Aggiungi”.
Per ogni immagine (tessera) nella matrice, puoi configurare i parametri di interazione con personaggi e oggetti del gioco. Per fare ciò è necessario selezionare la tessera desiderata e accedere alla seguente finestra:
La sezione Limiti di collisione si aprirà nella parte superiore del riquadro destro. Qui possiamo scegliere una forma arbitraria per indicare i confini dell'interazione tra il nostro oggetto e i personaggi del gioco. Per impostazione predefinita, tutte le tessere hanno il parametro "Quadrato", che rende la tessera completamente impraticabile e solida. Se è necessario rendere il riquadro "trasparente" per i personaggi (ad esempio, il sesso), è sufficiente impostare il parametro "Nessuna collisione".
Oltre ai bordi, puoi impostare l'animazione per ogni riquadro aggiungendo fotogrammi utilizzando il pulsante "Inserisci fotogrammi" nel pannello inferiore. Per impostazione predefinita, la velocità dell'animazione è 100 millisecondi, ma questo numero può essere modificato arbitrariamente per ciascun fotogramma.
Per fare ciò, basta fare doppio clic sul fotogramma desiderato con il tasto sinistro del mouse e nella finestra che si apre, modificare gli indicatori di ritardo come richiesto. È anche possibile correggere la cornice selezionata utilizzando l'editor grafico integrato, che si apre con il pulsante “Modifica cornice”.
Una volta formato l'insieme delle tessere, è logico passare alla fase successiva: formare uno spazio di gioco finito con le immagini aggiunte. Questo può essere fatto facendo clic sul pulsante "Crea nuovo" nella sezione Scene. Dopo aver fatto clic sul pulsante verremo indirizzati alla finestra delle impostazioni della scena:
Qui dobbiamo assolutamente impostare un nome univoco per la nostra scena nel campo "Nome", specificare le dimensioni (larghezza e altezza in piastrelle (per impostazione predefinita) o pixel) e anche facoltativamente (cioè secondo il nostro desiderio) impostare il colore di sfondo per la nuova scena. Fai clic su "Ok" e accedi all'editor di livelli:
In apparenza ricorda un editor grafico. Al centro c'è un'area di lavoro dove disegniamo il nostro livello. A sinistra e in alto ci sono piccole barre degli strumenti. Sulla destra ci sono i pannelli della tavolozza, la selezione dei set di tessere e la gestione dei livelli. Ora, come funziona tutto...
Innanzitutto disegniamo lo sfondo della nostra area di lavoro. Per fare ciò, nel pannello di destra, attivare la scheda “Tavolozza” e su di essa la scheda “Riquadri” e selezionare la tessera desiderata dall'elenco presentato. Quindi, nel pannello di sinistra, seleziona lo strumento Matita e disegna le aree desiderate con la tessera selezionata.
A causa del supporto dei livelli, le tessere possono sovrapporsi, quindi è più logico organizzare il livello tenendo conto del fatto che, ad esempio, sul livello “Livello 0” avremo un livello di sfondo, sopra questo ci sarà essere uno strato con ostacoli e personaggi e, ancora più in alto, uno strato con vari contatori e indicatori di gioco.
Puoi gestire i livelli utilizzando i pulsanti nel pannello "Livelli". Sono disponibili pulsanti per creare, eliminare, spostare e rinominare i livelli. Inoltre, qualsiasi livello può essere nascosto o mostrato facendo clic sul pulsante con l'occhio a destra del nome del livello.
Dopo aver creato la prima scena, è il momento di “popolarla” con i vari personaggi del gioco. In Stencyl vengono chiamati “attori” e vengono memorizzati, di conseguenza, nella sezione “Tipi di attori”. Gli attori vengono creati secondo lo stesso principio, quindi esamineremo questo processo usando l'esempio della creazione del personaggio principale del nostro gioco, Frida.
Per aggiungere un nuovo attore, vai alla sezione Tipi di attori sopra menzionata e fai clic sul pulsante "Crea nuovo". Come al solito, ci verrà chiesto nuovamente come vogliamo nominare il nuovo oggetto di gioco, dopodiché apparirà davanti a noi la finestra di modifica dell'animazione del personaggio:
Qui, sul lato sinistro, viene visualizzato un elenco delle animazioni degli attori aggiunte (per impostazione predefinita, un fotogramma vuoto "Animazione 0"), e sul lato destro ci sono gli strumenti per aggiungere e personalizzare queste stesse animazioni.
Seleziona un'animazione vuota (o aggiungine una nuova facendo clic sul pulsante più in basso) e fai clic sul campo "Fai clic qui per aggiungere un fotogramma" sul lato destro. Successivamente si aprirà una finestra per aggiungere immagini, simile a una finestra simile per aggiungere nuove tessere a un set. Fai clic sul pulsante "Scegli immagine", seleziona l'immagine desiderata e regolane il layout e le dimensioni (se necessario).
Una volta configurato tutto, fai clic sul pulsante "Aggiungi" nella parte in basso a destra della finestra di aggiunta: l'animazione dovrebbe apparire come anteprima nella sezione di sinistra:
Ora tutto ciò che dobbiamo fare è impostare il frame rate (doppio clic su qualsiasi fotogramma) e alcuni parametri aggiuntivi, tipo, nome dell'animazione (molto utile per progetti complessi), loop di riproduzione (attivo per impostazione predefinita), sincronizzazione e punto di origine di base del l'origine dello sprite (al centro per impostazione predefinita).
Sulla barra degli strumenti in basso nella sezione destra troveremo una fila di pulsanti. Loro permettono:
Sopra, abbiamo realizzato un'animazione di Frida che corre, utilizzando solo due fotogrammi, che sono, in effetti, lo stesso disegno riflesso orizzontalmente. Ora dobbiamo assicurarci di poter controllare i movimenti della nostra eroina utilizzando il mouse e la tastiera, e anche che reagisca adeguatamente alle collisioni con gli ostacoli che abbiamo disegnato sul palco.
Prima di tutto, impostiamo le collisioni. Per fare ciò, guarda la riga sotto l'elenco delle schede aperte e trova lì il pulsante "Collisione".
Per impostazione predefinita, l'area di collisione è un quadrato delineato attorno all'intero sprite dell'animazione. Cioè, l'evento di collisione si verificherà su tutta l'area dell'oggetto. Tuttavia, in pratica, la nostra immagine contiene molto spesso elementi aggiuntivi (quello di Frida, ad esempio, un blaster), che, in teoria, non dovrebbero interagire con nulla. È con l'aiuto di questa sezione che possiamo configurare tutte le aree di collisione.
Innanzitutto, riduciamo l'area intorno a Frida alle dimensioni del solo corpo. Qui dobbiamo tenere presente che non possiamo spostare l'area con il mouse e per le impostazioni utilizziamo quattro parametri numerici nella sezione “Forma corrente”. Per prima cosa impostiamo l'offset orizzontale (dal bordo sinistro) e l'offset verticale (dall'alto) dell'area, quindi specifichiamo la nuova larghezza e altezza dell'area di collisione.
Di seguito sono presenti molti altri parametri, combinati nella sezione "Proprietà fisiche". Qui incontriamo la casella di controllo "È un sensore?". e il concetto di gruppo.
Se si attiva la bandierina “sensore”, l'area selezionata cesserà di essere un oggetto fisico: il personaggio o parte di esso diventerà, per così dire, “trasparente” ai vari ostacoli, ma allo stesso tempo manterrà la capacità di attivare qualsiasi azione in determinate condizioni.
Un esempio tratto dalla vita reale potrebbero essere i moderni sistemi di allarme che utilizzano laser: non vediamo il laser stesso, ma se lo tocchiamo, inizia il processo di notifica che siamo saliti nel posto sbagliato :).
Ora, a cosa servono i gruppi? Supponiamo che il nostro personaggio non abbia in mano un blaster, ma una spada, con la quale lui (o meglio lei :)) taglia i nemici in cavoli (a proposito, nel codice sorgente Frida ha una lama laser) ;)).
Il compito è che quando tocchiamo un nemico con una spada, il nemico muore, ma se manchiamo e l'avversario colpisce Frida, parte della sua energia viene portata via. E il problema principale qui è che la nostra animazione del colpo è, in effetti, un'immagine in cui sono presenti contemporaneamente sia Frida che la spada...
Se alleghiamo l'azione di una spada all'immagine, chiunque tocchi la nostra eroina durante la riproduzione dell'animazione morirà a causa del colpo. Ed è proprio per dividere l'immagine in più oggetti con capacità e parametri diversi che è stato inventato il meccanismo del gruppo.
Per impostazione predefinita, abbiamo solo un'area che corrisponde al personaggio stesso ("Uguale al tipo di attore"). Tuttavia, utilizzando gli strumenti di disegno sopra l'area di lavoro principale, possiamo creare nuovi oggetti virtuali e impostare un gruppo per loro utilizzando il pulsante "Modifica gruppi".
Probabilmente è tutto con le collisioni, ma ora propongo di occuparmi della cosa più basilare: impostare il comportamento dell'attore sul palco. Per fare ciò, dobbiamo andare alla sezione “Comportamenti”:
Per impostazione predefinita, all'inizio non ci sono azioni, ma possiamo aggiungerle facendo clic sul pulsante "Aggiungi comportamento" nell'angolo in basso a sinistra. Vedrai un elenco di funzioni pronte all'uso per controllare il tuo personaggio o interagire con altri attori sul palco.
Ad esempio, ho scelto il comportamento “8 Way Movement”, che prevede che l’attore si muova in cerchio in qualsiasi direzione. Ora selezioniamo l'azione aggiunta nell'elenco a sinistra e sul lato destro possiamo configurarne i parametri.
Se hai seguito le istruzioni, dovresti già avere le risorse minime richieste per il gioco. Non resta che imparare come inserire gli attori in scena e testare la funzionalità dello spazio di gioco.
Torniamo all'editor della scena creata in precedenza e attiviamo nuovamente la tavolozza, ma ora al posto delle tessere attiveremo la scheda "Attori". Vedremo un elenco di personaggi creati in precedenza che possiamo aggiungere alla scena utilizzando lo strumento Matita:
Abbiamo un solo personaggio principale, quindi basta un clic con la matita per aggiungerlo alla scena. E ora è arrivato il momento della verità: i primi test! Per avviare la compilazione preliminare del progetto, basta fare clic sul pulsante “Test Scene” nell'angolo in alto a destra della scheda con la nostra scena. Dopo un po' di tempo (la prima compilazione richiede sempre più tempo), potremo ammirare il nostro lavoro in flash player:
Oltre al giocatore stesso con il gioco, a lato mostriamo una finestra con i registri delle operazioni di gioco. Con il loro aiuto possiamo individuare rapidamente i problemi operativi e provare a risolverli.
Come possiamo vedere, possiamo già muovere Frida in diverse direzioni, ma la scena stessa rimane immobile e non appena la nostra eroina oltrepassa il bordo della parte visibile del palco, scompare... Disordine :). Puoi risolvere il problema aggiungendo il comportamento “Camera Follow” a Frida o impostando i parametri necessari utilizzando gli eventi.
Inoltre, sarebbe una buona idea sostituire il cursore standard con qualcosa di più adatto, ad esempio un mirino. Possiamo implementarlo aggiungendo un nuovo attore sotto forma di vista, rimuovendo la sua area di collisione e collegandolo alla scena utilizzando il comportamento standard "Cursore del mouse personalizzato":
I giochi semplici in Stencyl possono essere creati utilizzando solo comportamenti standard (Comportamenti), tuttavia, se abbiamo bisogno di qualcosa di non standard, dovremo pensare a utilizzare eventi configurati per attori e scene nella sezione "Eventi":
Anche i Behavior, infatti, sono costruiti sulla base degli eventi, ma hanno anche un'interfaccia visiva, che ne semplifica l'editing. Qui abbiamo a che fare direttamente con i blocchi funzionali che eseguono determinate azioni.
La finestra dell'evento è divisa in tre sezioni:
In realtà, abbiamo già descritto l'algoritmo per la creazione di eventi, ma, ahimè, non posso dare alcun consiglio universale: per ogni gioco gli eventi saranno diversi e potrebbero essercene parecchi... Ad esempio, puoi guardare al codice sorgente del gioco su Frida, che troverai nell'archivio con il programma, ma questa è solo una guida, poiché lavorare sugli eventi è la tua creatività personale :).
Abbiamo già trattato molti argomenti, ma non abbiamo toccato alcuni argomenti aggiuntivi che possono essere molto importanti durante la creazione di giochi: sto parlando dell'impostazione di tutti i tipi di proprietà dei nostri attori e delle scene. Memorizziamo questi parametri nelle ultime due schede. E il primo di questi è "Fisica":
La scheda delle impostazioni fisiche ha un aspetto diverso per scene e attori. Nella scheda delle impostazioni fisiche della scena ci sono solo due parametri: l'impostazione della gravità orizzontale e verticale. L'aspetto della sezione per l'impostazione dei parametri fisici degli attori è presentato nello screenshot qui sopra ed è composto da cinque schede con varie opzioni:
Abbiamo sistemato la fisica e ora diamo un'occhiata alle proprietà che vengono richiamate premendo il pulsante "Proprietà":
Come nel caso precedente, le proprietà saranno diverse per scene e attori. Nelle proprietà della scena possiamo specificarne il nome (“Nome”), le dimensioni (sezione “Dimensione”) e il colore di sfondo (“Colore sfondo”).
Nelle proprietà dell'attore, oltre al nome, puoi impostare una descrizione (il campo “Descrizione”) dell'oggetto, il gruppo a cui appartiene l'attore (la sezione “Scegli Gruppo”) e il layer di animazione per dispositivi mobili(Non devi cambiare nulla qui, poiché la versione gratuita del programma non ti consente di esportare giochi in formati per telefoni cellulari.
Ma queste non sono tutte le impostazioni a nostra disposizione in Stencyl. Le impostazioni generali del gioco sono disponibili facendo clic sul pulsante "Impostazioni" sulla barra degli strumenti principale:
Nella finestra delle impostazioni, a sinistra c'è un elenco di gruppi di parametri e a destra c'è l'area principale (a volte divisa in più schede) contenente tutti i tipi di opzioni. Qui siamo interessati alle seguenti sezioni:
In realtà, queste sono tutte le impostazioni di cui avremo bisogno per creare giochi flash nella versione gratuita di Stencyl. Ma poiché questa sezione riguarda le impostazioni, sarebbe un peccato non menzionare i parametri del programma stesso. Puoi accedervi attivando la voce “Preferenze” nel menu “File”:
Il programma fornisce supporto per un'interfaccia multilingue, tuttavia al momento è disponibile solo la localizzazione in inglese, quindi siamo andati direttamente alla seconda scheda: "Area di lavoro". Il fatto è che la terza versione di Stencyl ha introdotto una funzione per generare automaticamente immagini adattive dagli sprite scaricati.
E per impostazione predefinita, lo sprite è raddoppiato, il che comporta un deterioramento della qualità della grafica. Per evitare che ciò accada, ti consiglio di disattivare il ridimensionamento delle immagini selezionando “Standard (1x)” nel campo “Scala”.
Ti consiglio anche di guardare la terza scheda: "Editori". Qui puoi associare azioni di elaborazione grafica, audio e testo con editor esterni, più avanzati (rispetto a Stencyl integrato).
Abbiamo esaminato quasi tutte le sfumature del lavoro in Stencyl, ma non abbiamo toccato una delle funzionalità più potenti: lavorare con le variabili.
Le variabili in qualsiasi linguaggio di programmazione ti consentono di operare vari eventi, esprimendoli attraverso determinati numeri (variabili numeriche), condizioni (variabili booleane), testi (variabili stringa), ecc. La caratteristica principale delle variabili è la capacità di sostituire qualsiasi valore all'interno di un quadro predeterminato. Un semplice esempio di variabile: il monitor della classe. Oggi potrebbe essere Ivanov, domani Petrov e dopodomani Sidorov :).
Nel nostro caso la variabile “duty officer” può assumere uno di tre valori, che verranno automaticamente sostituiti a seconda di una determinata condizione (ad esempio, l'ordine dei nomi nella lista).
In Stencyl, le variabili possono essere locali o globali. Possiamo dichiarare variabili locali come parte di alcuni eventi o comportamenti e funzioneranno solo per le azioni specificate. Puoi creare una variabile locale nell'editor degli eventi richiamando la sezione "Attributi":
Qui abbiamo diverse schede:
L'algoritmo per creare una variabile locale è semplice: innanzitutto creiamo un nuovo blocco nella scheda "Getters", quindi troviamo la variabile appena creata nella scheda "Setter" e con essa aggiungiamo un blocco nell'area di lavoro, equiparandola a alcuni parametri di gioco. Questo è tutto: la variabile è stata dichiarata e ha ricevuto un insieme di valori validi.
Le variabili globali (attributi del gioco) in Stencyl sono impostate per l'intero gioco e possono essere richiamate in qualsiasi evento o comportamento. Come accennato in precedenza, puoi crearli nella sezione “Attributi” nella scheda “Attributi di gioco”:
Tuttavia, è molto più comodo visualizzare e gestire tutte le variabili create utilizzando la sezione "Attributi" nelle impostazioni (il pulsante "Impostazioni" sulla barra degli strumenti o "Mostra attributi di gioco" nella scheda "Attributi di gioco" nell'editor degli eventi) :
Qui abbiamo l'intero elenco delle variabili globali e la possibilità di crearne di nuove facendo clic sul pulsante "Crea nuovo". Per una nuova variabile possiamo impostare immediatamente il tipo (numerico, testo, booleano o array) e il valore iniziale senza uscire dalla finestra, cosa molto comoda secondo me.
Utilizzando le variabili globali, è molto comodo implementare vari contatori, poiché i dati in essi contenuti vengono salvati quando il giocatore passa a nuovi livelli e vengono archiviati in memoria finché il gioco stesso è acceso. Consiglio inoltre di utilizzare variabili globali per tenere traccia dell'animazione riprodotta.
Dopo aver assegnato all'attore uno sprite specifico negli eventi, possiamo assegnare un valore specifico a questo sprite in una variabile sottostante (ad esempio, un numero di sequenza o un nome di animazione). Pertanto, associando un'azione ad una variabile, possiamo richiamarla in qualsiasi momento impostando il valore desiderato su questa variabile.
Infine, abbiamo conosciuto, anche se brevemente, i principi di base del lavoro con Stencyl. Diciamo che abbiamo creato un gioco, testato e tutto ha funzionato. Ora non resta che trasformare il gioco da progetto in un vero e proprio file SWF da pubblicare su Internet. Per fare ciò, dobbiamo solo aprire il menu "Pubblica" e fare clic su "Flash" nell'elenco "Web".
Inizierà la compilazione del file di gioco, al termine della quale ti verrà chiesto dove e con quale nome salvare il file flash risultante. Salva e il gioco è fatto: il gioco è pronto :).
Il processo inverso consisterà nell'importare il gioco. Grazie alla funzione di importazione puoi aprire progetti di gioco di altri utenti, ad esempio, per vedere come hanno implementato questa o quella funzione;). Puoi anche importare il gioco dal menu "File". Se l'importazione ha esito positivo, il gioco apparirà nella schermata principale nell'elenco dei progetti. Qui però vale la pena fare una piccola avvertenza.
Il problema è che il nuovo Stencyl 3.0 ha solo una compatibilità parziale con i progetti creati nelle versioni precedenti, quindi la funzionalità del progetto di gioco importato potrebbe essere incompleta o, nel peggiore dei casi, il gioco non si avvierà affatto, generando un errore. Avrai poche opzioni: cercare e correggere gli errori oppure accettarlo e lasciare tutto così com'è :).
Di tutti i programmi per la creazione di giochi flash esistenti oggi, Stencyl è il compromesso più ragionevole tra facilità d'uso e ampiezza delle funzionalità. La buona notizia è che la funzionalità del designer nell'edizione gratuita è praticamente illimitata, il che ti consente di realizzare quasi completamente qualsiasi idea.
Tuttavia, non dimenticare il "quasi"... Il fatto è che Stencyl stesso funziona su una macchina JAVA, che, come sai, richiede molte risorse. Se a questo carico aggiungiamo il carico creato dal gioco, risulta che per il normale funzionamento abbiamo bisogno di un computer moderno e potente.
Questo è il primo “quasi”. E il secondo è la limitazione implicita del numero di oggetti in scena, di cui ho già parlato di sfuggita. Anche se questi oggetti sono solo tessere, ma ce ne sono molti, il gioco potrebbe generare un errore durante il test e non avviarsi finché non ne riduci il numero.
Per riassumere, possiamo dire che Stencyl sarà un motore ideale per creare tutti i tipi di giochi flash casuali e giochi sparatutto con vista laterale. Inoltre, dopo esserti esercitato nella creazione di giochi flash, puoi acquistare uno dei tipi di licenze e, modificando leggermente la meccanica, trasferire il tuo gioco nei formati supportati da Android e iOS. E questo è un vero modo per guadagnare pubblicando un gioco su Play Market o App Store!
Infine, non resta che augurare buona fortuna a tutti coloro che decideranno di impegnarsi seriamente nello sviluppo del gioco. Lascia che i tuoi algoritmi funzionino la prima volta e lascia che il compilatore si sieda e rimanga in silenzio quando avvii i tuoi giochi :).
PS È concesso il permesso di copiare e citare liberamente questo articolo, a condizione che sia indicato un collegamento attivo aperto alla fonte e sia preservata la paternità di Ruslan Tertyshny.