{{htmlmetatags>metatag-robots=()
metatag-title=(Approfondiamo i comandi grafici | Retro Game Makers with ugBASIC!)
metatag-keywords=(ugBASIC,Commodore 64,Commodore PLUS/4,ZX Spectrum)
metatag-description=(An useful guide to the secrets of videogame programming using ugBASIC)
metatag-media-og:image=(:ugbasic:logo-ugbasic-fb.png)
metatag-og:title=(Approfondiamo i comandi grafici | Retro Game Makers with ugBASIC!)
metatag-og:description=(An useful guide to the secrets of videogame programming using ugBASIC)
}}
====== Creatori di retrogiochi con ugBASIC! ======
===== Approfondiamo i comandi grafici =====
==== Premessa ====
Come abbiamo affermato nel precedente capitolo, ugBASIC è talmente pieno di comandi che può, per certi versi, intimidire. Abbiamo iniziato quindi con disegnare e colorare qualcosa. Adesso ci concentriamo sull’andare oltre i singoli punti: parliamo di linee, figure, cerchi e così via. Come al solito, nel caso che tu rimanga bloccato leggendo questa guida, fai riferimento al [[:it:ugbasic:user|manuale utente di ugBASIC]] e alle sue guide pratiche: potrebbero tornarti utili.
==== Linee, linee, linee... ====
Ora siamo pronti per esaminare alcuni dei comandi grafici di uso generale. Questi forniscono semplici elementi costitutivi per la creazione delle varie grafiche del programma. Abbiamo già scoperto come utilizzare l'istruzione ''PLOT'' per tracciare punti semplici sullo schermo. Ma è anche possibile disegnare linee, riquadri e barre, con la stessa facilità.
DRAW tx,ty TO bx,by
Il comando ''DRAW'' disegna una linea retta dalle coordinate ''tx,ty'' a ''bx,by''. È più o meno equivalente alle istruzioni ''LINE'' che si trovano nella maggior parte delle altre versioni di BASIC (e, infatti, ugBASIC supporta entrambe le parole chiave).
Esempi:
DRAW 0,0 TO 16,10
DRAW 16,0 TO 16,10
DRAW 0,10 TO 16,10
Queste istruzioni disegnano linee bianche sullo schermo. Il colore del disegno può essere impostato come ultimo parametro (che è opzionale) oppure con l'aiuto del comando ''INK''. Questo ha il formato:
INK indice
dove ''indice'' può essere uno qualsiasi dei numeri di colore ''(SCREEN) COLORS'' disponibili. Questo ci consente di creare schermate personalizzate con un massimo di ''(SCREEN) COLORS'' colori possibili alla volta.
Quindi, volendo ridisegnare le righe in colore rosso, si potrà procedere in due modi:
DRAW 0,0 TO 16,10, RED
DRAW 16,0 TO 16,10, RED
DRAW 0,10 TO 16, 10, RED
INK RED
DRAW 0,0 TO 16,10
DRAW 16,0 TO 16,10
DRAW 0,10 TO 16, 10
{{ :ugbasic:user:guide:introduction:esempio_graphics_lines_02.png?nolink |}}
Questo è un programma completo che disegna righe casuali sullo schermo.
BITMAP ENABLE(16)
DO
INK RND(SCREEN COLORS-1)
DRAW RND(SCREEN WIDTH-1), RND( SCREEN HEIGHT-1) TO _
RND(SCREEN WIDTH-1), RND( SCREEN HEIGHT-1)
LOOP
==== Rettangoli vuoti per pieni ====
''DRAW'' può sembrare un comando semplice, ma è estremamente utile nella pratica. Può essere sfruttato per generare qualsiasi cosa, dai mirini di una pistola ai raggi laser agli elementi di un gioco 3D avanzato. Il linguaggio ugBASIC permette anche di disegnare interi rettangoli sullo schermo in un'unica operazione. Vi sono due comandi proprio per questo scopo:
BOX tx,ty TO bx,by[,color]
disegna un rettangolo vuoto da ''tx,ty'' a ''bx,by''. La coppia ''tx,ty'' imposta le coordinate dell'angolo in alto a sinistra del riquadro e ''bx,by'' quelle del punto diagonalmente opposto. I lati del rettangolo sono disegnati usando il colore indicato oppure, se omesso, con l’ultimo impostato con un precedente comando ''INK''. Il valore predefinito è l'indice ''1'', che normalmente è bianco (ma dipende dall’hardware).
BOX 0,0 TO SCREEN WIDTH / 10, SCREEN HEIGHT / 10
INK YELLOW
BOX 0,0 TO (SCREEN WIDTH-1), (SCREEN HEIGHT-1)
INK RED
BOX 2 * (SCREEN WIDTH/10), 2*(SCREEN HEIGHT/10) TO _
(SCREEN WIDTH-1), (SCREEN HEIGHT-1)
{{ :ugbasic:user:guide:introduction:esempio_graphics_box_00.png?nolink |}}
Allo stesso modo, possiamo disegnare barre piene usando l'istruzione ''BAR'':
BAR tx,ty TO bx,by[,color]
Il formato di questo comando è identico alla versione non riempita. Non dimenticare di selezionare il colore della barra con ''INK'' prima dell'uso, oppure di indicare il colore direttamente sul comando. Altrimenti, tutte le tue barre saranno bianche!!
Esempi:
BAR 0,0 TO SCREEN WIDTH / 10, SCREEN HEIGHT / 10
INK YELLOW
BAR 0,0 TO (SCREEN WIDTH-1), (SCREEN HEIGHT-1)
INK RED
BAR 2 * (SCREEN WIDTH/10), 2*(SCREEN HEIGHT/10) TO _
(SCREEN WIDTH-1), (SCREEN HEIGHT-1)
==== Sperimentiamo, sperimentiamo! ====
Fino ad ora ho solo scalfito la superficie delle capacità grafiche di ugBASIC. Ma se ti è piaciuto questo assaggio, potresti voler cercare i seguenti comandi nel manuale: non dovrebbe essere TROPPO difficile!
| ''CIRCLE x,y,r'' | Disegna un cerchio |
| ''ELLIPSE x,y,r1,r2'' | Disegna una ellisse |
| ''POLYLINE x1,y1 TO x2,y2'' | Disegna un insieme di linee collegate |
| ''CLIP x1,y1 TO x2,y2'' | Limita la zona disegnabile |
| ''SET LINE x'' | Cambia il pattern delle linee |
Sperimenta e divertiti!
==== Pulire lo schermo ====
Ora passiamo a fare per un po' di pulizia veloce. So che le faccende domestiche sono noiose, ma anche ugBasic deve dare una ripulita al casino che facciamo, almeno di tanto in tanto. Quindi avremo chiaramente bisogno di un modo rapido e veloce per cancellare il contenuto dello schermo, ed essere pronti per il nostro prossimo capolavoro.
Potremmo usare un comando ''BAR'' come:
INK BLACK
BAR 0, 0 TO SCREEN WIDTH – 1, SCREEN HEIGHT -1
Tuttavia, ugBASIC include anche un comando di cancellazione dello schermo integrato, chiamato ''CLS''. Questo ha diverse forme, ma la più semplice è:
CLS color
Esempio per riempire lo schermo con il colore zero (di solito, il nero):
CLS 0
Esempio per riempire lo schermo con il colore rosso:
CLS RED
Quindi, alla fine, ''CLS'' è veloce, efficiente e spazza fuori tutta l’immondizia sullo schermo. Fantastico!
==== Scriviamo qualcosa... ====
Passiamo ad alcuni dei potenti comandi che riguardano il testo. Digita il più semplice dei comandi:
PRINT "CIAO"
Vedrai comparire la scritta CIAO. Ora scrivi
PRINT "CIAO"
PRINT "A TUTTI"
Vedrai comparire la scritta “CIAO A TUTTI” su due righe.
Se però digiti:
PRINT "CIAO ";
PRINT "A TUTTI"
La stessa scritta sarà visualizzata sulla medesima riga.
Questo accade perché il punto e virgola ('';'') impone a ugBASIC di lasciare dov’è il cursore subito dopo l'ultimo carattere nell'istruzione ''PRINT''. Quindi il cursore del testo sarà posizionato ordinatamente dopo lo spazio del comando ''PRINT "CIAO "''. Il cursore può essere spostato direttamente in qualsiasi posizione nella schermata corrente con un comando ''LOCATE''.
LOCATE cx, cy
Le coordinate ''cx'' e ''cy'' non sono le normali coordinate dello schermo... sarebbe fin troppo ovvio! A differenza delle coordinate dello schermo, che son misurate in pixel (unità di un singolo punto dello schermo), queste coordinate di testo utilizzano le unità di un singolo carattere o, come viene chiamato nel contesto di ugBASIC, di un “tile”.
Lo schermo può essere pensato come se fosse diviso in una griglia rettangolare, dove ogni casella è abbastanza grande da contenere un singolo carattere (oppure “tile”).
{{ :hires.png?nolink&600 |}}
Qui mostriamo come le prime lettere della parola ''HELLO'' potrebbero essere posizionate alle coordinate del testo ''0,0'', nel caso che il file misurasse 8x8 pixel. Ma quanto misura veramente? Non lo sappiamo perché dipende dall’hardware dove andrà a girare il programma. A prescindere da questo, potremmo visualizzare questo testo sullo schermo usando una riga del tipo:
LOCATE 0,0: ? “HELL”
A proposito, la lettera ''?'' è solo una forma abbreviata del comando ''PRINT''. Viene automaticamente estesa a ''PRINT'', risparmiandoci un sacco di digitazioni.
Ora prova a utilizzare il comando LOCATE . Quando cambi la posizione del cursore, anche il cursore si sposta, quindi è facile vedere con precisione dove verrà visualizzato il carattere successivo sullo schermo.
==== Impostiamo i colori del testo ====
Fino ad ora, tutto il nostro testo è stato disegnato con inchiostro bianco (1) su uno sfondo nero (0). Questi colori possono essere modificati liberamente dal nostro programma ugBASIC. Digita la riga:
CLS BLACK: PRINT "Hi"
Nota come il testo viene visualizzato su uno sfondo di colore ''1'', indipendentemente dai colori correnti dello schermo. Il colore di sfondo può essere impostato utilizzando un semplice comando ''PAPER''.
PAPER indice
Ovviamente non ci limitiamo a cambiare il colore di sfondo. Possiamo anche scegliere un nuovo colore anche per le nostre lettere. Il comando pertinente è:
PEN indice
Ora per un esempio più ampio che mostra i comandi ''PEN'' e ''LOCATE'' in azione.
DO
PEN RND(SCREEN COLORS-1)
LOCATE RND(SCREEN COLUMNS-1), RND(SCREEN ROWS-1)
PRINT "ugBASIC!";
LOOP
{{ :ugbasic:user:guide:introduction:esempio_graphics_text_04.png?nolink |}}
==== Da coordinate testo a coordinate schermo ===
Con il comando ''LOCATE'' possiamo posizionare senza sforzo il nostro testo ovunque sul display. Beh, in realtà non proprio ovunque. A causa del modo in cui funzionano le coordinate del testo, siamo in grado di posizionare i nostri messaggi solo in unità legate alla dimensione di un singolo carattere. Se vogliamo combinare testo e grafica nello stesso programma, questo può portare a problemi. Supponiamo, ad esempio, di voler racchiudere il nostro messaggio in un rettangolo vuoto. Questo ci permetterebbe di creare un semplice effetto "pulsante" sullo schermo.
Il linguaggio ugBASIC fornisce un utile set di funzioni di conversione, che ci consentono di passare da un sistema di riferimento all’altro e viceversa, ovvero dalle coordinate testo alle coordinate grafiche e indietro.
x = X GRAPHIC(cx)
y = Y GRAPHIC(cy)
Queste funzioni prendono le coordinate del testo ''cx'' o ''cy'' e restituiscono la coordinata grafica appropriata. Tuttavia, poiché le coordinate del testo sono misurate in unità di diversi pixel dello schermo, non c'è garanzia di una corrispondenza esatta.
PRINT X GRAPHIC(1), Y GRAPHIC(2)
LOCATE 10,10: PRINT “BOX”
BOX X GRAPHIC(10), Y GRAPHIC(10) TO X GRAPHIC(13), Y GRAPHIC(11)
Naturalmente, c'è anche un insieme separato di funzioni che riconvertono una coordinata di testo in una coordinata grafica.
cx = X TEXT(x)
cy = Y TEXT(y)
Questi convertono una coordinata grafica nella coordinata di testo equivalente più vicina. Prendi i seguenti esempi:
PRINT X TEXT(8),Y TEXT(16)
PRINT X TEXT(10), Y TEXT(20)
BAR 10, 10 TO 50, 50
LOCATE X TEXT(10),Y TEXT(10): PRINT "TESTING!"
Nota come tutte le coordinate sono state automaticamente arrotondate per difetto alla coordinata di testo più vicina. Ogni carattere è largo esattamente FONT WIDTH pixel. Quindi le coordinate dello schermo da FONT WIDTH a 2*FONT WIDTH restituiscono tutte una coordinata X TEXT pari a 1.
==== Altri comandi testuali ====
Il linguaggio ugBASIC fornisce anche decine di comandi di testo aggiuntivi. Che tu ci creda o no, potresti persino scrivere un word processor in ugBasic! Ahimé, non ho spazio per dettagliare tutte queste istruzioni, ma ecco una breve selezione.
''CENTRE''/''CENTER'' Visualizza una stringa di caratteri centrata ordinatamente sullo schermo, come ad esempio::
CENTRE "CIAO MONDO!"
''CMOVE'' sposta il cursore in modo relativo, cioè di un certo numero di caratteri a destra e in basso, a partire dalla posizione attuale.
LOCATE 10,10 : CMOVE 2,2 : ' CORRISPONDE A "LOCATE 12, 12"!
''MEMORIZE'' e ''REMEMBER'' sono istruzioni complementari: permettono di memorizzare (''MEMORIZE'') la posizione del cursore in un dato momento, e ripristinarla (''REMEMBER'') quando è il momento.
''CLINE'' cancella la riga corrente dalla posizione indicata fino alla fine della riga.
''X CURS'' e ''Y CURS'' consentono di conoscere dove si trova il cursore.
''CUP''/''CDOWN''/''CLEFT''/''CRIGHT'' spostano il cursore nella direzione specificata.
''AT$(x, y)'' generano una stringa che, magicamente!, sposta il cursore del testo alla posizione ''x,y'' quando viene stampata sullo schermo. Forte!
===== POWERED BY =====
[[ugbasic:user:guide|{{ :ugbasic:user:logo-ugbasic.png?nolink&600 |}}]]