27/11/2014

www.sromero.org/ext/articulos/gfx/graf1.html

CURSODEPROGRAMACINGRFICA

Artculo1:INICIACINALOSMODOSGRFICOS
Autor:(c)SantiagoRomero.
Revista:ProgramacinActual(PrensaTcnica)n1,Abril1997
Actualmente,lasaplicacionesgrficascopanelmercadoinformtico,mientrasnuestrosprogramasdetextosedebaten
entrelas80columnasdelapantalla.Conestecursovamosadejaratrslosmodosdetextoparaaprenderadominar
nuestrastarjetasgrficas.

OBJETIVODEESTECURSO
Enelmercadodelsoftwareactual,elmercadodelosentornosgrficos,delosjuegosespectacularesydeunasdemoscon
efectosimposiblesderealizarhastalafecha,ygraciasalagranpotenciadeprocesoquenosofrecenlosnuevos
ordenadores,nosdamoscuentadequelosmodosdetexto(tanusadoshastaahora),nocubrenlasexpectativasdeeste
nuevoycomplejogrupodeusuariosquelomantienen.
Nuestrosprogramasenmodotexto(aunqueconsideremosqueesemodoeselmsapropiadoparanuestraaplicacin)no
sonlosuficientementevaloradossinunabuenaInterfaceGrfica,yesosincomentarlaimposibilidaddelprogramadorpara
realizarunjuegoodemoenestosentornos.Hayquetenerencuentaqueunabuenainterfacegrficaactualmenteescomo
mnimoel70%delprograma,puestoqueeslamayorreferenciaqueelusuariotienedelaaplicacin/demo/juego.
Conestecurso,losprogramadoresquedeseen"darelsalto"alaprogramacinenmodosgrficoslopodrnhacerconel
apoyoquesuponetenerdocumentacin,librerasyejemploscomolosqueseproporcionarnaqu,mientrasquelosya
iniciadosenlaprogramacingrficaaprendernaqutcnicasyalgoritmosdedibujodegranutilidad.
Entrelosdiversostemasquesetratarnhayasuntostanimportantescomo:
Fundamentosdelaprogramacingrfica,
Sprites,Fuentes(monocolor,multicolor),Paleta,
Modosplanaresymodosunchained(X,Y,Q...),
Formatosgrficos,
ProgramacinSVGA,
Sistemasdemapeadosporbloques,
Algoritmosdedibujodeprimitivas,
etc...

Elobjetivoesqueellectorseacapazdedesarrollarsuspropiosprogramas,juegosydemoseinclusoiniciarseentemas
muchomscomplejoscomoprogramacin3Dyotrosaspectosqueantesquedabanmsporencimadesusposibilidades.
Apartedelosconocimientosquesepuedanadquirirdeprogramacingrfica(quecomenzarndesdeunnivelceroocasi
cero),aquseirncomentandoaspectosdeensambladorquenosayudarnaoptimizarnuestrasrutinasgrficaspara
conseguirunmejorrendimientodellenguajequeutilicemos,peroenprincipiodurantetodoelcursoseutilizarellenguaje
ANSIC(Cestndar)comobasedelosprogramas,demaneraquenosernecesariosaberprogramarenassembler,porque
alolargodelcurso,ydependiendodelasnecesidades,seirnintroduciendoyexplicandoinstruccionesASMconloque
losprogramadoresdelenguajesdealtonivel(C/PASCAL)puedenaprovecharparaaprenderydominarellenguaje
ensamblador.
Porsupuesto,siempresermsfcilelaprendizajesiseposeenconocimientosextradelaestructurageneraldeunPC,la
memoria,yalgodeassembler,demaneraqueellectorsebeneficiedetodaslasnuevastcnicasqueconllevala
programacingrficaactual.

ALGODETERMINOLOGIA
Nopodemoscomenzarelcursosinunmnimode"jergagrfica"quenosayudaracomprenderlosprimerosaspectosdela
programacindelosmodosgrficos.Sonconceptosmuyusadosyquevanarepetirsemuchoalolargodelosartculos,
resultandoporellounosconceptosmuyintuitivosydefcilcomprensin:
Modosalfanumricos:Enlosmodosalfanumricos(modosdetexto),lapantallaestdivididaenunaseriedeceldillas
http://www.sromero.org/ext/articulos/gfx/graf1.html

1/7

27/11/2014

www.sromero.org/ext/articulos/gfx/graf1.html

dondeslocabeuncarcter(tantouncarcteralfabticocomounnmerodeaheltrminoalfanumrico),
proporcionndonosresolucionesgeneralmentereducidas,comoporejemplo80x25,quequieredecirquetenemosla
pantallalimitadaa80caracteresporlneahorizontalycon25lneaseneltotalvisualizable.Estetipodelimitacionesesel
quenosqueremossaltarpasandoaprogramarenlosmodosgrficos,encontraposicinalosdetexto.Cualquierforma
grficaenestosmodostienequesercreadaabasedecombinacionesdesmbolosASCII.Paraunmayordetalledeestos
modos,consultarlaseccinProgramacindelaVGAdelarevistaSloProgramadoresnmero9.
Pixel:Cuandoejecutamosunprogramaenmodogrfico,mirandoalapantallapodemosdarnoscuentadequeeldibujoahi
representadoestformadoporunaseriedeunidadesmnimas(unospequeospuntoscuadrados),cadaunadeellasconun
color,yconlaacumulacindelascualesseformanlasfigurasgrficasquevemosrepresentadasenelmonitor.
LapalabrapixelvienedelaabreviacindeltrminoinglsPELpictureelement(elementodeldibujo),yrepresentala
unidadmnimacapazdeserrepresentadaporelmonitorenesaresolucin.
Resolucin:Acabamosdenombrarlapalabraresolucinenladefinicindepixel,yesqueenlapantallacabenunnmero
determinadodepixels(opuntos)aloanchoyaloaltodeella.As,podemosverque,enundeterminadojuego,enla
pantallacaben320pixelsaloanchoy200aloaltomientrasenWindowspuedencabenporejemplo640x480pixelsenla
mismapantalla.
Laresolucindeunmododevdeo,especificadoenelformato(ej:640x480)nosindicalacantidaddepixelsquecabenen
lapantallatantoaloancho(640enestecaso)comoaloalto(480),loquequieredecirqueenlapantallahayuntotalde
640x480pixels=307.200pixels(ennuestroejemplo).Quedaclaropusqueamayorresolucin,comoeltamaodel
monitoressiempreelmismo,lospuntossernmspequeosyconseguiremosunamayorcalidadgrfica,mientrasquea
resolucionesmenores(ej:320x200)esmsfcilnotareltamaodelospuntosylacalidadrepresentadasermenor.
Coordenadasdepantalla:cuandonecesitemoslocalizarenpantallaunaposicinespecfica(porejemplo:unpunto),lo
haremosapartirdesuscoordenadas,queconsistenendosnmerosqueindicanunaposicinrespectoalascoordenadas
<0,0>(partesuperiorizquierdadelapantalla).
Supongamosqueenelmodo320x200queremoslocalizarelcentrodelapantalla.Esteser,obviamente,elpunto
(160,100),puestoqueambosnmerosnosindicanlaposicinhorizontalprimeroyluegoverticalconsiderandolapantalla
comounejeXY.Elltimopuntodelapantallatendraenestecasolascoordenadas(319,199).
Modosgrficos:Cadamodogrficosecaracterizaporsuresolucinysunmerodecolores.As,tenemosdesdeelmodo
grfico320x200x256(256colores)hasta,porejemplo,el1024x768x16M(con16Millonesdecolores).Nuestratarjeta
grficaescapazdeinicializartodosestosdistintosmodos,ypodremoselegirelmsconvenienteanuestrospropsitospara
usarloennuestroprograma.Quedaclaroentoncesque,cuantomsnuevaypotenteseanuestratarjetagrfica(queva
instaladadentrodelordenador),demsmodosgrficosdispone,detalmaneraqueseraimposibleinicializarelmodo
800x600x256coloresenunatarjetagrficaquenoseaSVGA(SuperVGA).Cuandonosdispongamosacrearun
programa,tendremosquedecidirprimeroenquemodogrficovamosarealizarlo,debidoaquecadamodoseprogramade
unamaneray,comoesobvio,amenorresolucinymenornmerodecolores,elprogramaresultantesermsrpido.Con
respectoaltrminomodogrfico,quenoseaunmododetextonoquieredecirquenopodamosrepresentarinformacin
textual,pusconstruiremosloscarcteresabasedepixels,yaquecualquiercarcteresensmismounsmbologrfico.
Paleta:Llamaremospaleta(porahora)alconjuntodecoloresqueposeeunmodogrfico(2,16,256,32.00016millones,
porejemplo)yyaentraremosmsadelanteencmomodificarestejuegodecoloresdequedisponemosparaadaptarlos
coloresexistentesalastonalidadesdeseadas.

BREVEHISTORIAEVOLUTIVA
Hastallegaralnivelgrficoactual(tarjetasSVGAPCIconresolucionescomo1024x768a16millonesdecolores),elPC
hapasadoporperodosgrficoscasinulosdesdequesecre(enotoode1981,IBMincluaensusequiposlatarjeta
MDA,MonochromeDisplayAdapter),consutpicointerfacedetextoyresolucionesqueprontodescubrieronlas
limitacionesinicialesqueimplicabaalahoradepresentarinformacingrfica(40x25,80x25).
Enesemismomomento(1981)aparecilatarjetaCGA,(ColorGraphicsArray,omatrizdegrficoscolor).Estatarjeta,
peseadisponerdepocosmodosgrficosenbajaresolucin(como320x200x4o640x200x2)ycontanslo4colores,
supusoelcambiodelPChaciasuestadoactual.ProntoestatarjetasequedcortaeIBMincluyensusmodelosPS/2la
tarjetaMCGA(MultiColorGraphicsArray),quemejorabalaanteriorincluyendolosmodosdevideodelaCGAy
640x480con2colores.
LatarjetaEGA(EnhacedGraphicsAdapter,adaptadordegrficosmejorado)supusoen1984laadicindemodosdevideo
de16colores(320x200x16,640x200x16y640x350x16)incorporandocomodiferenciaprincipalconlaCGAunsistema
deprogramacinporplanosdebits(queveremosmsadelante).Perolaverdaderarevolucinllegconlaaparicindela
VGA(VideoGraphicsArray),quehasupuestohastaahoraelmayorestndarentarjetasgrficas,yaqueincorporabatodos
http://www.sromero.org/ext/articulos/gfx/graf1.html

2/7

27/11/2014

www.sromero.org/ext/articulos/gfx/graf1.html

losmodosdevideosoportadosporlastarjetasanteriores(CGA,MCGAyEGA),aadiendoelmodo640x480a16colores,
yfuncionandoconcualquiertipodemonitor(analgicos,multifrecuencia,estndar,etc...),cosaquenohacanlas
anteriorestarjetas.
NteseporlotantoelgransoportedecompatibilidaddescendentequellevaincluidalatarjetaVGA,incluyendolosmodos
grficosdelastarjetasEGA,MCGAyCGA.
DelallegadadelasSVGA(SuperVGA)setratarmsadelante,ascomosuprogramacinmedianteelestandarVESAen
sultimaversin,laVBE2.0.

COMENZANDOENMODOGRFICO
EnestaprimeraentregasecomentarlaprogramacinenmodogrficousandoelsoportequeparaellointegraBorlanden
suscompiladores:hablamosdelsistemaBGIBorlandGraphicsInterface(InterfacegrficoqueusantantoCcomo
Pascal),quepermite,medianterdenesconcretasdellenguajequeestemosutilizando,accederalasfuncionesdedibujo
mscorrientesapartirdelascualespodemosempezarnuestroperiploporlosmodosgrficos.Porsupuesto,apartirdel
siguienteartculoyausaremosdirectamentelosrecursosdenuestratarjetasinelusodelosficherosBGI,que,como
veremosenunposteriorapartado,tienenseriasdesventajas.
Paraempezar,hayquetenerclaroquelosficheros.BGIincluidosconloscompiladoresdeBorland(enelsubdirectorio
\BGI)sonficherosdecdigoejecutableconfuncionescomoputpixel(),circle(),line(),etc...queelprogramadorpuede
usarparacrearcualquierformagrfica.
Parapoderusarestasfuncionesennuestrosprogramas,ytomandocomoejemploelcompiladorBorlandC(oTurboC),
paraellotanslohemosdecumplir3requisitos:
1.Incluirelficherodecabeceragraphics.h
2.Incluirlalibreragraphics.libenelmomentodelacompilacin.
EstoesmuysencillodehacerdesdedentrodelentornoC(abriendo
unficheroproyectodesdelasopcionesdelcompilador)odesde
fuera,mediante:

bccfichero.cgraphics.lib

3.Quecuandoejecutemosnuestroprograma,estpresenteeneldirectorio
actual(uotrodefinido)elficheroBGIcorrespondientealmodo
grficoqueestemosinicializando(ej:CGA=CGA.BGI,VGA=EGAVGA.BGI,
etc...).

LamejormaneradeaprenderalgotanintuitivocomolasrdenesBGIdeBorlandCesmedianteunejemplo.Veamosel
listado1yanalicmoslaslneasquedebenresultarnuevas.
/*Listado1.c
Ejemplodeinicializacindelmodogrfico640x200
a16coloresusandoelficheroEGAVGA.BGI.
*/
#include<graphics.h>/*headerdegrficos*/
#include<stdlib.h>
#include<stdio.h>
#include<conio.h>/*otrasfunciones*/
intmain(void)
{
/*variablesnecesariascuandoiniciamosmodogrfico*/
intgdriver=EGA,gmode=EGALO,errorcode;
/*inicializarmodogrficoygestindeerrores*/
initgraph(&gdriver,&gmode,"C:\\BC\\BGI");
errorcode=graphresult();
if(errorcode!=grOk)
{
printf("Errorinicializandogrficos:%s\n",
grapherrormsg(errorcode));
printf("Pulsecualquierteclaparasalir...");
getch();
exit(1);
}
http://www.sromero.org/ext/articulos/gfx/graf1.html

3/7

27/11/2014

www.sromero.org/ext/articulos/gfx/graf1.html

/*dibujarunalneadesde(0,0)hasta(MaxX,MaxY)*/
line(0,0,getmaxx(),getmaxy());
/*esperarunateclayvolveralmododetexto*/
getch();
closegraph();/*"cerrar"losgrficos*/
return(0);/*almodoanterior...*/
}

ANLISISDELLISTADO1
#include<graphics.h>

Esteeselpaso1nombradoanteriormente.Incluyelasdefinicionesdelasfuncionesparalalibreragraphics.lib.
intgdriver=EGA,gmode=EGALO,errorcode;

Estasvariablessonnecesariasparausarconlafuncininitgraph(),gdriverindicaeltipodetarjetaausar(y,porlotanto,el
ficheroBGIquevaautilizarelejecutable),mientrasquegmodeindicaelmodogrficoainicializar.Enesteejemploseusa
laEGA(ficheroEGAVGA.BGI)poniendogdriver=EGA,yseiniciaelmodo640x200a16colores(gmode=EGALO).Los
posiblesvaloresquepodemosponerengdriverygmodeestncontempladosenlatabla1.

SiqueremosqueelordenadoruseelmodogrficodemayorresolucindequedisponganuestroPC,bastarcon
seleccionargdriver=DETECTynodarningnvaloragmode.Sigamosahoraconnuestrolistado:
initgraph(&gdriver,&gmode,"C:\\BC\\BGI");

Lafuncininitgraph(driver,modo,directorio)inicializaelmodogrficousandoeldriverdriver,situadoenelpath
directorio,yentrandoenelmodogrficoespecificadoenmodo.Enestecaso,buscareneldirectorioC:\BC\BGIcuando
seejecutenuestroprograma.Sisabemosqueeldrivervaaestareneldirectorioactualcuandoseejecutenuestroprograma,
bastarconponercomillasvacas("").Porsupuesto,lasbarrasdoblesseintroducenparaqueCnotomelabarrasimple
comocarcteresdeescape(\n,\r,etc...).Trasllamaraestafuncin,ysinohaocurridoningnerror,habremosinicializado
elmodogrficodeseado.Elcontroldeerroresvieneacontinuacin:
errorcode=graphresult();
if(errorcode!=grOk)
{
printf("Errorinicializandogrficos:%s\n",
http://www.sromero.org/ext/articulos/gfx/graf1.html

4/7

27/11/2014

www.sromero.org/ext/articulos/gfx/graf1.html

grapherrormsg(errorcode));
printf("Pulsecualquierteclaparasalir...");
getch();
exit(1);
}

Lafuncingraphresult()nosdevuelveuncdigoindicndonoselresultadodelainicializacingrfica.SidevuelvegrOK,
nohabrhabidoningnerroryyapodremosutilizarlasfuncionesgrficasdelBGIparadibujarenpantalla,comohace
line(x1,y1,x2,y2):
line(0,0,getmaxx(),getmaxy());

Aligualqueline(),getmaxx(),getmaxy()procedendegraphics.lib.Estasltimasdevuelven,respectivamente,elanchoy
alto(xmximaeymxima)delapantalla.Laprimeradeellas,line(x1,y1,x2,y2),dibujaunalineadesde(x1,y1)hasta
(x2,y2)usandoelcoloractual,quepuedesercambiadousandolafuncinsetcolor(color)Tambinpodemosborrarla
pantallausandolafuncinclearviewport().
closegraph();

Lafuncinclosegraph()cierraelmodogrficoinicializadoconinitgraph()yrestauraelmodoquehabaantesdellamara
estaltima.

DIBUJANDOENUNMODOGRFICOYAINICIALIZADO
Unavezinicializadoelmodogrficodeseado,podemosusarcualquieradelasfuncionesCparadibujarenlapantalla,
comopuedeverseenlosejemplosproporcionadosenelCDqueacompaaalarevista.Apartirdelasprimitivasque
suponenelpunto,lalnea,elrellenado,etc...podemoscrearbuenascomposicionesgrficasparairadentrndonosenla
programacingrfica.
Podemosverenlatabla2algunasdelasfuncionesgrficasdeCyquepodemosusartrasentrarenalgunodesusmodos
grficos.Enellaestntodoslosparmetrosquerequieren,yaunquenoestntodaslasfuncionesBGI,encualquiermanual
dereferenciaCoPASCALencontraremoslalistacompleta.

http://www.sromero.org/ext/articulos/gfx/graf1.html

5/7

27/11/2014

www.sromero.org/ext/articulos/gfx/graf1.html

TenemostambinelprogramaTEST.EXE,quetesteaelnmerodefigurasgrficas(pixels,lneas,etc...)porsegundoque
escapazdedibujareldriverBGIendistintasresoluciones,yelficheroBGIFUNC.DOC,comoampliacinaestas
funcionesgrficas.

DESVENTAJASDELOSFICHEROSBGI
Sonmuchasygraveslasdesventajasdeestosficheros.Paraempezar,alincluirlalibreragraphics.lib,eltamaodel
programaejecutableaumentasobrelos18.000bytes(enelcasodeBorlandC/C++v3.1)debidoalainclusindetodaslas
funciones,aunqueslousemosalgunasdeellas.
Adems,elprogramaalserejecutadodebertenerdisponibleeneldirectorioactual(uotroestablecidomedianteinitgraph)
elficheroBGIcorrespondientealmodoqueseinicialice,yaunquesepuedelinkarjuntoalejecutableusandolautilidad
BGIOBJ.EXE,elsistemaBGIsiguepecandoenelsentidoquemspuedequejarseunprograma:suvelocidad.
Siunprogramadordesarrollaunalibrerapara,porejemplo,320x200x256colores,crearlasfuncionesespecficaspara
esemodo,aprovechandolascaractersticasquelatarjetanosbrindeparal,yobteniendouna"libreraespecializada"que
funcionarexclusivamenteendichomodo.Porcontra,losBGItienenquefuncionarparadistintosmodosdevideo,ytodo
esodentrodelamismafuncindetectandoencadamomentolaresolucinqueseestusandoydeunamanera"estndar"
paratodosellos,porloqueelcdigoejecutableresultanteseademasiadolentoparaintentarhacerconlunprogramade
carcterprofesional.
EstonoquieredecirquenosearecomendableelaprendizajedelsistemaBGI,sinoquedebesertomadocomobaseporque
eslamejormaneradeiniciarseenlosmodosgrficos.

ENLAPRXIMAENTREGA
Esteprimerartculohasidotanslointroductorio,yaquesuobjetivoeralaintegracindellectorenlosmodosgrficosde
unamanerasencilla(enestecasordenesdelpropiocompilador),peroapartirdelprximonmeroentraremosrealmente
http://www.sromero.org/ext/articulos/gfx/graf1.html

6/7

27/11/2014

www.sromero.org/ext/articulos/gfx/graf1.html

enlaprogramacinespecficadelosdiversosmodos,usandoparaellotantolaBIOSdelatarjeta(usodelainterrupcin
10h)comoelhardwaredelaVGA(programacindirectadelavideomemoria),dejandoatrselBGIque,porotraparte,
seraaconsejabledominardebidoasufacilidaddeuso,sobretodoenaquellosprogramadoresqueabandonanahoralos
modosdetexto.
Decualquiermanera,proponemosallectorquerealiceprogramasyejemplosconlosBGIparaquepuedavalorarlas
funcionesqueproporcionaylavelocidadquedesarrolla,ypoderasdarsecuentadelaslimitacionesqueencierrayla
diferenciaentreestosejemplosylosquecrearemosapartirdelaprximaentrega.Serapartirdeentoncescuando
entraremosdellenoenlaprogramacindelosdistintosmodosgrficos.
Pulseaquparabajarselosejemplosylistadosdelartculo(65Kb).
Tabla1:"DriversBGIysusrespectivosmodosgrficos."
Tabla2:"AlgunasfuncionesdeGRAPHICS.LIB."
SantiagoRomero
Volveralatabladecontenidos.

http://www.sromero.org/ext/articulos/gfx/graf1.html

7/7