Share
Cosa starai creandoIn questo tutorial creeremo una schermata di gioco per un tipo di gioco "match three". Trasformeremo forme geometriche di base per creare graziose icone animali e applicare vari tipi di riempimenti sfumati per rendere gli oggetti vivaci e tridimensionali. Finiremo creando uno sfondo per impostare un modello di schermata di gioco.
I giochi "Match three" sono molto popolari, specialmente per i dispositivi mobili. Il gameplay è abbastanza semplice ma avvincente: metti tre oggetti identici in fila per segnare sempre più punti. In questo tutorial progetteremo un vivido pannello di gioco con fantasiosi animali quadrati. Inoltre, questa lezione ti aiuterà a ispirarti e progettare qualsiasi altro tipo di schermo di gioco match 3, ad esempio un gioco con gemme preziose o frutti piatti. Sentiti libero di sfogliare il mercato di Envato per ulteriori idee sulla progettazione di schermi piatti e cominciamo!
Inizia creando un Nuovo file di 600 x 800 px. Se non ti piace lavorare su uno sfondo bianco, usa il Strumento rettangolo (M) per creare una forma che copre la tela e riempirla di giallo. Serratura nel Livelli pannello facendo clic su un piccolo icona di blocco in cima. Manterremo questa forma nella parte inferiore e saremo in grado di ricolorarla in seguito.
Iniziamo a formare la testa del nostro primo animale: un simpatico orso. Prendi il Strumento rettangolo arrotondato (M) e fare un 200 x 200 px forma lilla. Ricorda che puoi regolare il Raggio dell'angolo della tua forma dalla barra degli strumenti di controllo in alto. Let's keep at 25%.
Prendi il Riempi strumento (G), tenere Cambio e posizionare il Riempire cursore verticale attraverso la forma, applicando un bicolore Lineare riempimento sfumato.
Possiamo regolare il colore del riempimento facendo clic sulle punte del cursore e selezionando il colore appropriato nel Colore pannello. Prendiamo un colore lilla chiaro per la punta superiore e un colore più scuro per la parte inferiore della forma, aggiungendo così la dimensione.
Iniziamo a formare l'occhio. Prendi il Ellipse Tool (M), tenere Cambio e fare un cerchio uniforme di 50 x 50 px. Passare al Riempi strumento (G) e cambia il Tipo di riempimento a Radiale nel pannello di controllo in alto. Applicare un colore bianco al centro della forma e colore grigio al bordo, rendendo l'occhio sferico.
Ora modelliamo l'iride. copia e Incolla (Comando-C> Comando-V) il bulbo oculare, aspetta Comando-Maiuscole e riduci la copia, riducendola a circa 35 x 35 px con l'aiuto di Sposta strumento (V). Riempi con il riempimento radiale di colore turchese al centro e turchese scuro sul bordo.
Duplicare (Comando-C> Comando-V) l'iride e riduci la copia, formando una pupilla. Riempi con il colore solido turchese scuro. Fai una piccola luce bianca sulla parte superiore dell'occhio, usando il Ellipse Tool (M).
Ora che l'occhio è pronto, Gruppo (comando-G) tutti i suoi elementi, in attesa Opzione-Shift e trascina a destra, facendo una copia. Gruppo entrambi gli occhi, selezionali insieme alla forma della testa e usa il Allineare pannello in alto a Allineare le forme Orizzontale al Centro.
Continua a usare il Ellipse Tool (M) fare un naso schiacciato di 50 x 15 px taglia. Applicare un riempimento lineare verticale dal rosa chiaro in alto al rosa più scuro nella parte inferiore. Crea una piccola ellisse rosa scuro in alto e cambiala Modalità di fusione a Schermo nel Livelli pannello, formando così un punto culminante semitrasparente.
Quindi formeremo una bocca. Utilizzare il Strumento penna (P) e tenere premuto Cambio fare una linea squadrata. Impostare il Riempire colore a nessuno in Colore pannello e applicare un colore lilla scuro al Ictus. Vai al Ictus pannello e impostare il Larghezza a 2 pt, lasciando tutte le altre opzioni come predefinite.
Prendi il Strumento d'angolo (C) e rendere gli angoli della forma completamente arrotondati tirando verso l'alto i nodi d'angolo.
Duplicare la forma e usa il Capovolgi orizzontalmente funzione dalla barra degli strumenti di controllo in alto per rispecchiare la forma.
Ora aggiungeremo le orecchie. Utilizzare il Ellipse Tool (M) fare un 70 x 70 px cerchio. Facciamolo mescolare bene con la testa scegliendo il colore giusto. Trovare la Color Picker strumento nel Colore pannello, tieni premuto e trascina sopra la testa dell'orso. Vedrai una lente d'ingrandimento, aiutandoti a individuare il colore che ti serve. Scegli il colore luce-lilla accanto all'orecchio e rilascia il pulsante del mouse. Ora puoi selezionare l'orecchio e applicare il colore dal campione accanto al Color Picker. Ce l'abbiamo!
Ora vediamo come possiamo copiare lo stile di riempimento complesso da altri oggetti. Duplicare (Comando-C> Comando-V) l'orecchio e rendere la copia più piccola. Copia (comando-C) la testa, seleziona l'elemento superiore dell'orecchio e vai a Modifica> Incolla stile. Modifica la posizione del riempimento usando il Riempi strumento (G). Aggiungi un secondo orecchio sul lato opposto della testa.
Come puoi vedere, possiamo copiare non solo gli oggetti stessi, ma anche il loro aspetto.
Finiamo con l'orso aggiungendo un altro elemento: una pancia stilizzata. Utilizzare il Ellipse Tool (M) per fare un ovale e riempirlo con il colore lilla scuro, cambiando il Modalità di fusione a Schermo nel Livelli pannello.
Possiamo posizionare l'ellisse creata dentro la forma della testa, in questo modo nascondendo i pezzi non necessari. Seleziona l'ovale creato nel Livelli pannello e trascinalo sopra la forma della testa fino a vedere una striscia blu stretta come mostrato nell'immagine sottostante. Rilascia l'ellisse, posizionandola all'interno dello strato di testa.
E abbiamo finito! Passiamo alla prossima icona animale.
Usiamo l'icona dell'orso che abbiamo già creato per creare un nuovo elemento. Duplicare e cambiamo i colori del riempimento lineare con il bianco in alto e il grigio in basso. Quindi ricolora le orecchie dal lilla al grigio molto scuro. Cambia il riempimento lineare del naso in grigio scuro e regola il colore della bocca Ictus, passando a rosa.
Infine, regola il colore degli occhi cambiando il riempimento radiale con il marrone chiaro al centro e il marrone più scuro ai bordi, applicando il colore marrone scuro anche alla pupilla.
Successivamente aggiungeremo macchie scure intorno agli occhi per rendere il nostro personaggio più simile a un vero panda. Utilizzare il Strumento ellisse (L) fare un 75 x 95 px forma, riempiendolo con un riempimento lineare di sfumature grigio scuro.
Ruota la forma 45 gradi e posizionarlo sotto l'occhio trascinando la forma verso il basso nel Livelli pannello.
Notare la differenza tra posizionare una forma dentro l'altro e posizionando una forma sotto l'altro. Questa volta vedrai un marcatore blu più lungo, come nell'immagine qui sotto.
Duplica (Comando-C> Comando-V) lo spot e Giralo orizzontalmente dall'altra parte, usando il Trasformazioni funzione nella barra degli strumenti di controllo in alto. Sposta la copia del punto, rendendolo adatto al secondo occhio.
E lì abbiamo il nostro panda! Andiamo avanti.
Diamo duplicare il personaggio del panda e trasformalo in un simpatico procione! Innanzitutto, cambia il colore della forma della testa in un riempimento lineare verticale da blu chiaro in alto a blu più scuro in basso.
Procedi cambiando i colori degli occhi al rosso-rosato, e sostituiamo la bocca. Utilizzare il Strumento penna (P) per creare una bocca a forma di cornetta con grigio scuro Ictus.
Ora modifichiamo le orecchie. Seleziona il cerchio più grande della forma dell'orecchio e Converti in curve, utilizzando il pulsante nella barra degli strumenti di controllo in alto. Prendi il Strumento Nodo (A) e selezionare il nodo superiore della forma. Converti in Sharp dal pannello di controllo in alto, facendo puntare l'orecchio. Fai lo stesso per la parte interna dell'orecchio: Converti in curve e Convertire il nodo superiore a Sharp.
Cambia il colore dell'orecchio, facendolo aderire alla testa e ruotare l'orecchio 45 gradi. Duplicare l'orecchio e Capovolgi orizzontalmente, posizionando la copia sul lato opposto.
Seleziona il punto intorno all'occhio con il Riempi strumento (G) e regolare i colori del riempimento, cambiandoli in tonalità di blu più chiare e più scure. Copia (comando-C) lo spot, selezionare il secondo spot e Modifica> Incolla stile, applicando un nuovo aspetto.
Termina il personaggio aggiungendo un'ellisse grigio chiaro sotto l'area del naso. E questo è tutto per il procione! Passiamo alla nostra ultima icona!
Duplichiamo la nostra prima icona, l'orso viola, e usiamola per creare un pappagallo divertente. Cambia il colore della testa in riempimento lineare da verde chiaro in alto a verde più scuro in basso. Elimina la forma ellittica della pancia e la bocca dell'orso perché non ne abbiamo più bisogno.
Cambia il colore degli occhi in arancione-marrone.
Trasformiamo il naso dell'orso nel becco di un pappagallo! Ruota 90 gradi e Converti in curve. Seleziona il nodo inferiore con il Strumento Nodo (A) e Converti in Sharp dalla barra degli strumenti di controllo in alto.
Cambia i colori del riempimento lineare in giallo in alto e in arancione in basso.
Prendi il Ellipse Tool (M) e fare una forma stretta di 15 x 40 px. Riempilo con il colore verde chiaro e cambia il Modalità di fusione a Moltiplicare, facendo una piuma semi-trasparente scura.
tenere Opzione-Shift e trascina la piuma a destra, facendo una copia. stampa Comando-J un paio di volte per fare altre due copie.
Aggiungiamo un ultimo dettaglio al nostro pappagallo. Utilizzare il Ellipse Tool (M) fare un 40 x 70 px forma al centro sulla fronte, scegliendo il colore giusto dal punto più leggero della fronte e applicando un colore verde chiaro alla forma.
Aggiungi due ellissi più piccole su entrambi i lati della forma centrale. Seleziona tutte e tre le forme e usa il Aggiungi operazione dal pannello di controllo in alto per unire tutte le ellissi in un'unica forma.
Duplica (Comando-C> Comando-V) la forma e spostare la copia in basso un po 'premendo il tasto Freccia in giù chiave alcune volte. Cambia il colore della forma in verde scuro, creando un'ombra piatta.
E lì ce l'abbiamo! La nostra icona del pappagallo è pronta!
Ecco la nostra serie di simpatici animali quadrati che utilizzeremo come elementi di un gioco "match three". Andiamo avanti e facciamo una semplice schermata di gioco per vedere come funziona insieme!
Diamo sbloccare la nostra forma di sfondo e cambia il suo colore in un arancione delicato. Utilizzare il Strumento rettangolo arrotondato (M) fare un 415 x 600 px forma gialla con 10% di raggio d'angolo.
Duplica (Comando-C> Comando-V) la forma e rendere la copia più piccola, cambiando il colore di riempimento in giallo più scuro.
Duplicare la nuova forma e riduci nuovamente la dimensione della copia, cambiando il colore allo stesso giallo chiaro che abbiamo per il rettangolo arrotondato più grande.
Finalmente, duplicare il rettangolo arrotondato più grande e spostare leggermente verso il basso la copia premendo il tasto Freccia in giù chiave alcune volte. Rendere la copia un po 'più grande e cambiare il Modalità di fusione a Moltiplicare nel Livelli pannello, formando un'ombra sottile. Tutto sommato abbiamo quattro rettangoli arrotondati per il pannello di gioco.
Utilizzare il Ellipse Tool (M) e tieni premuto Cambio per creare un grande cerchio verde nella parte inferiore della tela. Posizionalo tra la schermata di gioco e la forma dello sfondo. Aggiungi più cerchi, coprendo la parte inferiore della tela.
Seleziona una tinta verde più chiara e continua a usare il Ellipse Tool (M) per creare cerchi più piccoli e più leggeri, raffiguranti semplici cespugli stilizzati.
Continuare a utilizzare la stessa tecnica e riempire la parte superiore della tela con cerchi arancione chiaro, raffiguranti nuvole stilizzate.
Ora possiamo iniziare a posizionare le icone degli animali sul pannello di gioco. Qui io uso un semplice trucco per rendere tutti gli elementi uguali. Come probabilmente avrai notato, il nostro pappagallo è leggermente più piccolo del resto dei personaggi, perché non ha orecchie. Questo può rendere un po 'complicato l'allineamento delle forme, ed è per questo che copio le orecchie dall'icona del panda e le allego al pappagallo. Rendi le orecchie completamente trasparenti impostando il Riempire e Ictus colori a nessuno, quindi raggruppare gli elementi.
Ora possiamo posizionare le icone in una riga e ridurre le dimensioni, facendole entrare nella schermata di gioco. Mantenendo le icone selezionate, dirigersi verso la barra degli strumenti di controllo in alto e aprire il Organizzare pannello. Da qui, clicca Spazio in orizzontale e deselezionare il Distribuzione automatica checkbox, impostando il valore del gap su 0 px.
Puoi Allineare le forme a Parte inferiore pure, usando lo stesso Organizzare pannello.
Gruppo (comando-G) la fila di icone, tieni premuto Opzione-Shift e trascinalo su, facendo una copia. stampa Comando-J più volte, riempiendo la schermata di gioco con icone. Seleziona tutte le righe, vai al Organizzare pannello e fare clic Spazio verticalmente. Deseleziona Distribuzione automatica e impostare il valore del gap su 2 px, creare spazi stretti tra i bordi delle icone.
È possibile regolare il layout rendendo le icone più piccole o più grandi e regolando la distanza tra le righe, facendo in modo che le icone si adattino al pannello di gioco.
Subito dopo, possiamo mescolare le icone casualmente, rendendo l'intera scena simile a una vera schermata di gioco. Fare doppio clic sulla riga di icone per isolare il gruppo e spostare le icone all'interno del gruppo in orizzontale mentre si tiene premuto Cambio.
Ottimo lavoro! La nostra schermata di gioco match 3 è pronta! Spero ti sia piaciuto seguire questo tutorial e ho scoperto alcuni suggerimenti e trucchi utili mentre lavoravi con forme base, riempimenti sfumati e varie operazioni di trasformazione di Affinity Designer. Sentiti libero di applicare le tue conoscenze mentre crei nuovi design di giochi e personaggi e non dimenticare di condividere i tuoi fantastici risultati!
Se vuoi imparare come creare un po 'di roba di progettazione in Affinity Designer, assicurati di controllare anche le seguenti esercitazioni:
Accentsconagua