RED’S TRIDENT: Creació d’un videojoc de plataformes
Alumne: Samuel Esteban Iglesias Tutor de seguiment: Jordi Polo Mercader Institut IES Can Mas Data d’entrega: 29 de Febrer del 2010
Red’s Trident
Samuel Esteban Iglesias
Sumari 1. Inquietuds i Motivacions Personals.
2
2. Requeriment.
3
3. Procés de disseny del joc.
4
3.1 . Disseny dels gràfics. a) Conceptes bàsics del Flash. 3.2 . Disseny d’escenaris, objectes, personatges i argument.
6
a) Escenaris. b) Objectes.
10
c) Personatges i argument.
11
d) Progressió en els dibuixos.
13
3.3 . Animacions.
14
a) Conceptes bàsics de l’animació. b) Animacions dels personatges. 3.4 . Programació.
15 21
a) Desencadenadors b) Accions comunes
23
c) Rutes dels símbols.
24
d) Propietats dels símbols.
26
e) Les condicions.
27
f)
28
Textos dinàmics.
g) Explicació dels codis del joc.
30
h) Problemes durant el desenvolupament.
38
3.5 . Àudio i Música.
42
a) Com utilitzar el FL Studio. b) Els VSTi.
43
c) Pistes d’exemple.
45
d) Efectes sonors i veus.
46
4. Avaluació.
47
5. Recursos utilitzats / bibliografia
48
6. Agraïments.
54
7. Annexos.
55
IES CAN MAS – 2009 - 2010
1
Red’s Trident
1.-
Samuel Esteban Iglesias
Inquietuds i Motivacions Personals
El món dels videojocs cada vegada s’està fent més conegut a la societat actual. Hi ha una gran quantitat de categories de jocs. Per exemple, podem trobar-ne de conducció, d’esports, de trets i fins i tot alguns per a fer exercici de forma interactiva. Però encara perduren els jocs clàssics de plataformes, aquells en els quals havies de controlar un personatge per tal d’arribar al final de cada fase saltant i esquivant enemics. Sempre m’han atret els videojocs i he mirat de crear-ne. Des de que vaig tenir el primer ordinador he intentat crear jocs de qualsevol mena. El programa que més vaig utilitzar va ser el Power Point, amb el que vaig aconseguir bons resultats, però aquest programa comptava amb moltes limitacions a l’hora de crear-los, ja que cal recordar que no és per fer jocs, sinó presentacions. També vaig modificar jocs originals de videoconsoles antigues amb editors com per exemple Lunar Magic, que permet fer els teus propis nivells de Super Mario World. Però encara hi havia limitacions a l’hora de fer les fases, ja que estava modificant un joc ja existent i no creant-ne un de nou. A més, per a jugar calia un emulador de la videoconsola SNES (Super Nintendo Entertainment System), cosa que no facilitava la distribució del joc. Per això vaig buscar una nova forma de crear jocs que em donés total llibertat a l’hora de desenvolupar-los i em permetés distribuir-lo fàcil i còmodament. Durant les vacances d’hivern del 2008 vaig aprendre a utilitzar el Macromedia Flash Professional. Aquest programa compleix tots els requeriments que necessitava: permet programar lliurement, sense necessitat d’utilitzar un model inicial i em permet distribuir-ho fàcilment, ja que la majoria de gent té instal·lat al seu ordinador el complement per a navegadors de flash, cosa que permet jugar sense descarregar el joc, o sigui, que es pot jugar online, des de la pròpia web. Amb aquest projecte podré adquirir coneixements sobre programació, disseny gràfic i sobre la resta d’elements que formen un videojoc. Penso que aprendre programació em servirà, ja que voldria ser enginyer informàtic al futur.
IES CAN MAS – 2009 - 2010
2
Red’s Trident
2.-
Samuel Esteban Iglesias
Requeriment
L’objectiu d’aquest treball és crear un videojoc des de zero, de tipus plataformes, que sigui de qualitat. Una vegada tenim la idea del que es vol realitzar s’ha de decidir com es farà. Pel disseny d’un videojoc d’aquest tipus s’han de tenir en compte molts aspectes, com la programació, els gràfics (que inclouen el disseny dels escenaris, personatges i objectes) la música, l’argument... així que aniré per ordre. Començaré parlant de la programació: En la meva recerca de programes per dissenyar jocs de plataformes vaig trobar diverses aplicacions, com “Platform Studio” o “Game Maker”. El problema dels jocs que es creen amb aquests programes és que són difícils de distribuir, perquè estan en format .exe (que és el format dels programes). Que estigui en aquest format ens obliga a descarregar el joc completament per poder jugar, en comptes de fer-ho online, des de la mateixa web. A
El tipus d’arxiu que es crea amb Macromedia Flash és el .swf. Aquest tipus d’arxiu està molt estès per Internet i ofereix molts avantatges en la programació i el disseny. Per exemple, els vídeos de YouTube i molts dels anuncis d’Internet estan en .swf.
més, aquests programes també estan bastant limitats, amb moltes pautes. Per això m’he decantat pel “Macromedia Flash Professional”, perquè ens dóna total llibertat en tots els aspectes i el producte que obtindrem amb aquest serà més fàcil de distribuir i crear que amb els altres dos. Aquest programa, a més d’encarregar-se de la programació també crea les animacions i els dibuixos. D’altra banda, tenim els gràfics (o dibuixos). Per sort, amb el propi “Macromedia Flash Professional” podem crear-los, encara que es poden importar imatges d’altres programes, o fins i tot fotos. Per algunes textures i efectes he utilitzat el “Macromedia Fireworks” i l’“Adobe Photoshop”. En la cerca de programes per fer música em vaig topar amb el “FL Studio”, amb el que es poden obtenir molt bons resultats. Inclou una infinitat de funcions, efectes i possibilitats per crear la teva pròpia música. Un altre element a tenir en compte a l’hora de fer el joc és l’argument. Volia que tingués una història entretinguda, amb humor i tensió, que no avorrís al jugador. Inicialment anava a tenir un argument, però finalment vaig decidir canviar-ho, ja que era una mica complicat i veia que no em donaria temps a fer-ho.
IES CAN MAS – 2009 - 2010
3
Red’s Trident
3.-
Samuel Esteban Iglesias
Procés de disseny del joc
Una vegada tenim els programes que utilitzarem passem a veure les funcions bàsiques d’aquests, a més de com han sigut emprats en el projecte:
3.1.- Disseny dels gràfics Recordem que per fer els gràfics he utilitzat pràcticament sempre el Macromedia Flash. A continuació exposo una mica d’informació per introduir el programa i saber com s’utilitza.
a.- Conceptes bàsics del flash Aquí tenim les eines més utilitzades del Flash: Eines de selecció: serveixen per a seleccionar els diferents elements o part dels que tenim a l’escena. Eines de dibuix: creen cercles, quadrats i pentàgons, a més de rectes. Eines de dibuix lliure: ens permeten crear formes a mà alçada amb el ratolí. El llapis dibuixa línies i el pinzell acoloreix. Eines de pintura: omplen de color les formes i les línies.
A l’hora d’omplir les formes de color, podem utilitzar degradats, colors sòlids, imatges o textures. Les línies també es poden personalitzar canviant el seu gruix, color, tipus (línia sòlida, de punts, etc). Bàsicament, tot això és el que necessitem per fer els dibuixos al programa. Una vegada esmentades les eines, parlarem del lloc de treball: l’escena. A l’escena col·loquem tots els elements que apareixeran al joc (és semblant a les diapositives del Power Point). Aquesta pot tenir la mida que vulguem. A més, les escenes poden contenir diverses capes. Són útils a l’hora de distribuir els elements de la presentació i superposarlos.
IES CAN MAS – 2009 - 2010
4
Red’s Trident
Samuel Esteban Iglesias
L’àrea blanca del centre és l’escena. Tot el que es trobi a dins es veurà a la presentació. A l’esquerra es poden apreciar totes les eines de dibuix i control.
I com a últims conceptes bàsics hi ha tres tipus de símbols amb els quals s’interactua i es creen les pel·lícules flash:
Els botons: permeten realitzar accions quan els hi fem clic o quan passem el cursor per sobre d’ells.
Els gràfics: poden ser animacions o imatges fixes. Són semblants als clips de pel·lícula, però la diferència és que aquests només contenen animació, no poden contenir cap tipus de programació.
Els clips de pel·lícula (movieclip): són animacions que poden contenir línies de codi. També poden interactuar entre ells.
Al joc que crearé empraré els movieclips per fer els diferents enemics i elements interactius que tindrà el joc. Els botons i els movieclips són els únics símbols interactius del flash. Tornant a les eines de dibuix, hem de saber que totes creen imatges vectorials. Les imatges vectorials tenen la peculiaritat que sempre tenen bona qualitat: per molt que augmentis la grandària d’un dibuix sempre es veurà bé. D’altra banda tenim els dibuixos creats amb píxels (mapes de bits), que sí que perden qualitat quan n’augmentem la grandària.
IES CAN MAS – 2009 - 2010
5
Red’s Trident
Samuel Esteban Iglesias
A continuació tenim una comparació entre el dibuix vectorial i el mapa de bits:
Mapa de bits
Dibuix vectorial
Encara que el Macromedia Flash només creï dibuixos vectorials també podem importar mapes de bits (jpeg, gif, png...). De vegades és recomanable utilitzar mapes de bits si els dibuixos vectorials són molt complexos, ja que el rendiment pot veure’s afectat. Ara que ja sabem com es dibuixa en Flash, passarem a dissenyar els diferents elements que apareixeran al joc. Primer començarem amb els escenaris:
3.2.- Disseny d’escenaris, objectes, personatges i argument a.- Escenaris He volgut fer cada escenari del joc únic, amb el seu estil propi. A l’hora de fer-los he tingut en compte la col·locació dels objectes i enemics, la dificultat progressiva i l’apartat visual: 1. De mica en mica, van apareixent més enemics, cadascun més intel·ligent que l’anterior i col·locat de manera més complicada. Així hi haurà un augment de la dificultat progressiu, de tal manera que el jugador anirà trobant cada vegada un repte més difícil. 2. Els objectes de vegades són necessaris per resoldre enigmes o acabar amb els enemics. Per aquest motiu estan col·locats en llocs puntuals i secrets. 3. El disseny visual dels escenaris és a cada lloc diferent. Podem trobar fases desèrtiques, altres nadalenques, industrials...etc. Així hi ha varietat i el joc no es fa monòton.
IES CAN MAS – 2009 - 2010
6
Red’s Trident
Samuel Esteban Iglesias
Als primers escenaris, els enemics són fàcils i és senzill derrotar-los, però de mica en mica la cosa es complica...
Hauràs d’estar alerta i preparat per qualsevol enemic. Ells no dubtaran a l’hora d’acabar amb tu.
Un cas en què els objectes són necessaris (més endavant s’explica l’utilitat de cadascun):
Aquesta flor de foc ens seria útil per acabar amb els enemics que hi ha més endavant, però alhora ens podria servir per a una altra cosa. Si ens fiquem entre les plantes de més endavant, arribarem a la part inferior del terra, on hi ha...
…una canonada tapada amb palla, i aquesta palla no ens deixa ficarnos-hi dins. El que haurem de fer és utilitzar el foc per cremar-la i així poder accedir a una àrea secreta.
IES CAN MAS – 2009 - 2010
7
Red’s Trident
Samuel Esteban Iglesias
En aquesta altra situació tenim una cascada d’aigua que està congelada i ens bloqueja el pas. Per poder continuar haurem d’agafar la flor de foc de més a l’esquerra per tal de desfer el gel i així poder continuar.
De vegades també es necessitarà tornar a congelar l’aigua per a poder-hi caminar per sobre. Ara un exemple de lloc secret:
El jugador, que aproximadament només veu l’àrea del límit groc, el que fa és avançar cap a la plataforma flotant de la dreta, perquè pensa que si cau perdrà una vida, ja que creu que hi ha un barranc. En canvi, si cau, trobarà una àrea secreta, on hi ha una vida extra.
IES CAN MAS – 2009 - 2010
8
Red’s Trident
Samuel Esteban Iglesias
Com he dit anteriorment, cada escenari és particular, amb el seu estil propi, colors, música, personatges… n’hi ha un bon grapat. Aquestes captures en mostren uns quants:
IES CAN MAS – 2009 - 2010
9
Red’s Trident
Samuel Esteban Iglesias
b.- Objectes El joc conté bastants objectes del món de Mario: les flors de foc, de gel o les canonades. Els hi he volgut afegir perquè el protagonista prové d’un món similar a aquest. Encara que siguin objectes d’un altre videojoc, els he dibuixat i animat jo: només he agafat la idea, no els dibuixos. A continuació es mostren uns quants dels objectes que es troben durant el joc:
Flor de Foc Permet emetre foc de la vareta per tal de cremar als enemics o els objectes que es puguin cremar de l’escenari.
Flor de Gel Permet emetre foc blau de la vareta per congelar l’aigua, per exemple, i així poder caminar per damunt.
Llampec Acaba amb tots els enemics que es troben en pantalla.
Estrella És un objecte col·leccionable. A cada fase n’hi ha tres. Si en reuneixes molts podràs accedir a zones especials.
Moneda Amb les monedes podràs comprar objectes a mesura que avancis.
Interruptor ! Quan es salta a sobre d’aquests interruptors alguna cosa succeeix (s’obre una porta, apareixen blocs invisibles temporalment...).
Canonada Serveixen per a accedir a nous llocs. Hi pots entrar polsant ↓o S.
IES CAN MAS – 2009 - 2010
10
Red’s Trident
Samuel Esteban Iglesias
c.- Personatges i argument Tots els personatges excepte en Red i l’Ashley, són meus. Vaig decidir afegir-hi aquests dos, que són d’un altre videojoc, perquè a més que m’agraden, amb ells el joc es faria més conegut a Internet. Però tot i això, els he dibuixat jo. A continuació els presento tots: RED Aquest dimoni, que procedeix de la sèrie de jocs Wario Ware es transforma en vareta, o escombra, segons el que l’Ashley vulgui.
ASHLEY Aquesta bruixa prové del videojoc Wario Ware. No té gaires amics, per no dir cap, excepte el seu company Red, amb qui va sempre. Si s’enfada, el seu cabell es torna blanc.
DALLYEN
MELYAN
És el noi esbirro que treballa juntament amb la Melyan per al Rei Robot. Li agrada fer maquetes per després jugar amb les seves víctimes encongides. De vegades es posa histèric a causa de les ximpleries i coses infantils que fa la Melyan.
Encara que sigui més gran que en Dallyen es comporta de forma més infantil que ell. Li agrada fer enrabiar al seu company tocant les seves maquetes i fent-li ganyotes. Sempre està de bon humor i de vegades és massa “curteta”.
REY ROBOT És qui encapçala l’invasió per acabar amb els humans, però no ho fa sense motius... Els problemes que ha tingut al passat es reflecteixen en aquest desig i en el seu estat actual...
IES CAN MAS – 2009 - 2010
11
Red’s Trident
Samuel Esteban Iglesias
FANTILIENNE La propietària de la mansió que es troba a la zona fosca té com a afició tancar a tots els nois que arriben al calabós per a torturarlos. I tot perquè una vegada la van deixar plantada...
SAMURAI És el guardià de la torre de vigilància de ShunGanko. Es troba descansant a la seva tomba, a prop de la torre. És de caràcter fort i no dubtarà en cap moment a protegir el seu territori.
EL CREADOR Temps enrere, aquest noi va ser qui va crear el Rei Robot. És un personatge important en l’existència del robot, ja que un succés que va tenir amb ell li va canviar la forma de veure les coses...
Respecte l’argument, inicialment n’anava a tenir un de diferent al que he fet finalment. Mentre es va jugant al videojoc, es van veient flashbacks importants per a comprendre l’argument. Tot seguit, explicaré l’argument per l’ordre en que es coneix al joc: En un planeta llunyà a la Terra ( tirant cap endavant una vegada creues el planeta Alfa) es troba el planeta Omega. En aquest planeta és on s’aboquen totes les deixalles generades pels éssers humans. Conviuen les llaunes amb els microones, juntament amb els robots ja inútils per als humans. Llavors, un robot amb aires de conqueridor va sorgir un dia, sobtadament, en aquest planeta. Va proclamar-se el “Rei Robot” i va convèncer a tots els seus companys metàl·lics per conquistar l’univers. Un temps després, una nau gegantina comença a recórrer el planeta on habita en Red. Aquesta porta un iman immens, que per allà on passa s’emporta tot objecte metàl·lic. En aquell moment, en Red, que està tranquil·lament a casa seva amb l’Ashley, veu com el seu trident se’n va volant. El comença a seguir, fins que arriba un moment en que agafa una alçada considerable i s’enlaira cap al cel. En Red no s’atura i decideix perseguir aquella nau per recuperar el seu estimat objecte.
IES CAN MAS – 2009 - 2010
12
Red’s Trident
Samuel Esteban Iglesias
d.- Progressió en els dibuixos Una imatge val més que mil paraules:
A mesura que ha avançat el projecte, he anat millorant unes quantes coses, i una d’elles són aquests dos personatges. Els canvis s’aprecien molt més en la Melyan (més alçada, més cos de dona, incorporació de guants...). En Dallyen no té tants canvis, només en la forma de la cara, en els ulls i als cabells. Les animacions d’en Red també han patit grans canvis. Molt inicialment era ben diferent al resultat actual. Animacions Red
IES CAN MAS – 2009 - 2010
Indica que hi ha un arxiu .swf interactiu al CD
13
Red’s Trident
Samuel Esteban Iglesias
3.3.- Animació a.- Conceptes bàsics de l’animació Com he dit anteriorment, els elements que participaran al projecte es troben a l’escena. Aquests poden anar variant a mesura que avança el temps gràcies a la línia de temps. Podem veure els fotogrames del projecte i les diferents capes de l’escena. Els diferents tipus d’animació es poden classificar en tres grups:
Animació per fotogrames (mètode tradicional): podem animar un objecte a base d’imatges fotograma per fotograma, com es feia antigament a les sèries de dibuixos animats.
Interpolacions de moviment: indiquem la posició inicial i final d’un desplaçament per tal que l’objecte el recorri. A més de desplaçaments es poden fer rotacions i canvis de mida.
Interpolacions de forma: un dibuix esdevé en un altre progressivament. Exemples animació
Les diverses animacions es mostren a la línia de temps. Cada quadrat és un fotograma. Per tant, si una interpolació de moviment ocupa deu quadrats vol dir que té una duració de deu fotogrames. A continuació veurem una interpolació de moviment:
Aquest cercle, que es troba a la “Capa 1” es desplaça d’esquerra a dreta en quinze fotogrames, que a dotze fps (fotogrames per segon) equival a 1.2 segons. Tota aquesta informació la proporciona la línia de temps. Sobre els fps podem dir que mentre més fotogrames per segon hi hagi, l’animació serà més fluïda, mentre que amb pocs l’animació serà lenta i no lluirà tant (els fps es poden comparar amb els hertz de les televisions). Per al joc hem decidit utilitzar 30 fps pels avantatges esmentats anteriorment. Comparació fps
IES CAN MAS – 2009 - 2010
14
Red’s Trident
Samuel Esteban Iglesias
b.- Animacions dels personatges Després de parlar sobre les diferents formes d’animar els elements del joc ens centrem ara en l’animació dels personatges. Podria dividir els personatges del joc en principals i secundaris, com si es tractés d’una obra de teatre:
Principals: els protagonistes, els “esbirros” i el cap dels enemics.
Secundaris: els habitants dels pobles, els enemics dels escenaris i caps de les diverses àrees.
Els principals tenen les animacions fetes d’una altra manera respecte dels secundaris: Els secundaris tenen poques animacions, perquè no tenen un paper important al joc. D’altra banda, els principals, com que apareixen durant més temps, tenen més animacions i són més detallades que les dels altres. En podem veure un exemple tot seguit: Quadrixel
1
2
3
4
5
6
Aquest personatge secundari té aproximadament sis animacions. Són animacions fixes, sense cap possible combinació i/o variació. Per exemple, quan hagi de caminar, ho farà tal com es veu a la tercera imatge, i sempre tindrà aquesta mateixa expressió i posició de braços. El mateix passa quan està assegut (cinquena imatge) o en una de les altres posicions. Com que el personatge no apareixerà moltes vegades, no necessita animacions complexes. Pontista 1
2
3
El mateix passa amb la noia que hi ha a la primera fase. Només té tres animacions.
IES CAN MAS – 2009 - 2010
15
Red’s Trident
Samuel Esteban Iglesias
Dallyen i Melyan Aquests personatges sí que pertanyen als principals. La diferència amb les animacions dels secundaris és que en aquests casos estan construïdes per seccions: són diversos movieclips els uns dins dels altres. Per tal que quedi més clar, a continuació mostro l’estructura dels dos personatges que he creat per separat i les seves animacions:
- DALLYEN PER TROSSOS -
Cos sencer
Cap Cap
Ull dret Serrell
Ull esquerre
Cabell de darrere Orella dreta
Braç esquerre Braç dret
Orella esquerra
Cara i coll
Pigues i nas Cames Boca
Braç
Ull
Cella Braç Ull Mà
IES CAN MAS – 2009 - 2010
Pupil·la
16
Red’s Trident
Samuel Esteban Iglesias - ANIMACIONS DE DALLYEN PER SEPARAT -
COS
Dret
Encongit
Endavant
Cap a la dreta
Levitant
CAP
Cap a l’esquerra
BRAÇ
Relaxat
Flexionat
Estirat
Cap amunt
MÀ
Relaxada
Oberta 1
Oberta 2
Puny
Normal
Cap a la dreta
Cap a l’esquerra
Enfadat
ULL
Indicant
Sorprès
“Pau”
Tancat
BOCA Normal
IES CAN MAS – 2009 - 2010
Parlant
Somrient
Trista
Rabiosa
17
Red’s Trident
Samuel Esteban Iglesias - MELYAN PER TROSSOS -
Cos sencer
Cap
Barret Cap
Ull dret
Cabell darrere
Tors
Ull esquerre
Espatlles
Orella dreta
Serrell Braç dret/esquerre
Orella esquerra Collaret Galtes
Faldilla davant Nas
Faldilla darrere
Cuixa dreta/esquerra
Boca
Cara i coll
Cama dreta/esquerra Sabatilla dreta/esquerra
Braç
Braç
Orelles conill dreta/esquerra
Ull
Cella
Ull i pestanyes Avantbraç i mà
IES CAN MAS – 2009 - 2010
Pupil·la i iris
18
Red’s Trident
Samuel Esteban Iglesias - ANIMACIONS DE MELYAN PER SEPARAT –
COS
Dreta
Asseguda
CAP
Endavant
Cap a la dreta
Cap a l’esquerra
BRAÇ
Relaxat
Cap a dins
Cap a fora
A la boca
Mig alçat
MÀ
Relaxat
Oberta 1
Oberta 2
Puny
Indicant
“Pau”
Oberta 3
ULL Normal
Cap a la dreta
Cap a l’esquerra
Sorpresa
Alegre
BOCA Somrient
IES CAN MAS – 2009 - 2010
Parlant
Normal
De gat
Rient
Sorpresa
19
Red’s Trident
Samuel Esteban Iglesias
Vaig decidir crear els personatges principals d’aquesta manera perquè posteriorment es poden anar combinant les diferents animacions, de manera que puc escollir l’expressió de la cara, la posició dels braços, etc. A continuació es pot veure un exemple de combinacions: En aquest cas concret, Melyan té: L’ull dret i esquerre
_root.melyan.cara.ojo_der.gotoAndStop(87);
mirant cap a la dreta.
_root.melyan.cara.ojo_izq.gotoAndStop(164);
La boca, encara que no es vegi, com “sorpresa”.
_root.melyan.cara.boca.gotoAndStop(47);
El braç dret i esquerre
_root.melyan.brazo_der.gotoAndStop(126);
“a la boca”.
_root.melyan.brazo_izq.gotoAndStop(126);
Les mans obertes com
_root.melyan.brazo_der.mano.gotoAndStop(2);
en “oberta 1”.
_root.melyan.brazo_izq.mano.gotoAndStop(2);
La resta de parts estan en la forma predeterminada. La columna dreta indica el fotograma en que es troba l’animació. El fotograma en el qual l’ull dret mira cap a la dreta és el 87, per aquest motiu he fet un gotoAndStop(87). El mateix passa amb la resta de parts. Les possibilitats són moltíssimes (uns exemples):
IES CAN MAS – 2009 - 2010
20
Red’s Trident
Samuel Esteban Iglesias
3.4.- Programació La part de programació és la més complexa del projecte, ja que cal tenir, prèviament, coneixements del llenguatge que s’utilitza per programar en Flash, que és l’Actionscript: L’ActionScript és un llenguatge que s'utilitza en les pel·lícules d’Adobe Flash. Aquests codis s’empren per treballar amb animacions, àudio, vídeo, text i accions. El codi es pot col·locar en els símbols (clips de pel·lícula i botons) i a la línia de temps (als fotogrames). Però... quan s’executa el codi que posem? Si el posem a la línia de temps s’executarà quan arribi al fotograma on l’haguem col·locat. D’altra banda, si el posem a un clip de pel·lícula o a un botó, la cosa canvia, ja que hem de decidir quina acció desencadenarà l’execució del codi programat.
a.- Desencadenadors o
Per als botons, els desencadenadors més comuns són:
on(press): quan el botó sigui pressionat, les línies de codi següents s’executaran.
on(release): quan el botó sigui pressionat i posteriorment es deixi anar, s’executarà el codi.
on(rollOver): quan es passi el cursor per sobre del botó, les línies de codi següents s’executaran.
on(rollOut): quan es passi el cursor per sobre del botó i posteriorment surti, s’executarà el codi.
o
I per als clips de pel·lícula tenim:
onClipEvent(enterFrame): el codi següent serà executat justament quan el clip de pel·lícula aparegui a l’escena. El codi que hi hagi s’executarà constantment sempre que es trobi a l’escena.
onClipEvent(load): justament quan el clip de pel·lícula es carregui, el codi s’executarà.
onClipEvent(unload): quan el clip no es carregui, el codi s’executarà.
on(keyPress "<X>"): el codi s’executarà en polsar la tecla que escrivim a l’x.(aquest desencadenador també serveix per als botons).
IES CAN MAS – 2009 - 2010
21
Red’s Trident A continuació hi ha un exemple de codi per a un
Samuel Esteban Iglesias
I un altre per a un movieclip:
botó: on (press) { trace(“El botó ha sigut pressionat”); }
Quan el botó sigui pressionat es mostrarà al panell de sortida el text: “El botó ha sigut pressionat”
onClipEvent(enterFrame) { trace(“Hola, món”); }
En el moment en què executem el projecte i el clip es trobi en pantalla, es mostrarà al panell de sortida: “Hola, món”
Tot seguit passo a explicar l’estructura a l’hora de programar, ja que s’han de seguir unes pautes. Agafant l’exemple anterior del codi per al botó explicaré l’estructura bàsica en la programació:
on (press) { trace(“El botó ha sigut pressionat”); }
Sempre que programem en un símbol (botó o movieclip) s’han de seguir aquests passos:
a.
Es comença indicant quin serà el desencadenador. En aquest cas, on(press){ .
b.
Seguidament, escrivim totes les accions que s’executaran. En aquest cas, trace(“El botó ha sigut pressionat.”)
c.
I per a finalitzar el codi, hem de col·locar un claudàtor ( } ), que és l’encarregat de tancar el codi.
Una vegada coneixem l’estructura de la programació, introdueixo les accions més comunes.
IES CAN MAS – 2009 - 2010
22
Red’s Trident
Samuel Esteban Iglesias
b.- Accions comunes
ACCIÓ
SIGNIFICAT
EXEMPLE
Mostra al panell de sortida el que s’indica entre trace(“x”)
parèntesis. Pot ser un text definit, una variable, un càlcul, una propietat d’un
trace(“Hola”) – Mostra al panell el text “Hola” trace(dada) – Mostra al panell el contingut de la variable “dada”, que s’ ha d’haver definit anteriorment.
clip de pel·lícula... Reprodueix el clip de play();
pel·lícula, sense importar en quin fotograma es trobi.
Sempre s’empra de la mateixa manera, així que l’únic exemple possible és: play() – Simplement es reprodueix. Succeeix el mateix que amb el play(), així que l’únic
stop();
Atura el clip de pel·lícula.
exemple possible és: stop () – Únicament s’atura.
Va al fotograma indicat
gotoAndPlay(12) – Va al fotograma 12 i reprodueix.
entre parèntesis i es gotoAndPlay(x)
reprodueix. Pot ser un
gotoAndPlay(_currentframe-5) – Comprova en quin
número, una variable, un
fotograma es troba actualment,
càlcul, etc.
retrocedeix 5 i es reprodueix.
És exactament igual que el
gotoAndStop(6) – Va al fotograma 12 i s’atura.
gotoAndPlay, excepte que gotoAndStop(x) aquest en comptes d’anar al
gotoAndStop(_currentframe+2) – Comprova en quin
fotograma i reproduir-se,
fotograma es troba actualment,
s’atura.
avança 2 i s’atura.
L’acció trace només s’utilitza mentre es programa, ja que quan s’executa el projecte, una vegada exportat i preparat per a ser utilitzat no es mostra el panell de sortida. És útil, per exemple, per tal de saber les coordenades d’un símbol, on l’acció seria: trace(_x). Això ens mostraria al panell de sortida la posició de les x en què es troba aquest símbol. També hem de saber com identificar a quin element van dirigides les accions.
IES CAN MAS – 2009 - 2010
23
Red’s Trident
Samuel Esteban Iglesias
c.- Rutes dels símbols Cada símbol que posem a l’escena pot tenir un nom d’instància, que serveix per a identificar-lo quan programem. Aquests símbols poden trobar-se a l’escena o uns dins d’altres. Per a explicar això posaré un exemple: Imagineu que ens trobem al portal d’un bloc de pisos (la base de l’edifici). Una vegada entrem podem decidir anar a alguna de les cases del baix, o bé pujar les escales fins al 1º, 2º i entrar a una de les cases d’aquestes plantes...etc. Doncs al Flash, la base de l’edifici s’anomena _root . Els símbols que es troben a l’escena, sense estar dins d’uns altres, s’anomenarien per _root.nom , on nom és el nom d’instància. En el cas que un símbol estigui dins d’un altre, l’hauríem d’anomenar per _root.nom.nom2 on nom2 està dins de nom, que es troba a l’escena. Un exemple molt clar per veure com s’identifiquen els símbols es el següent:
Aquesta captura de pantalla ens mostra la Melyan. En aquest moment ens trobem a l’alçada de l’ull dret. Per identificar-lo quan programem haurem d’escriure _root.melyan.cara.ull_dret .
Hi ha una altra manera d’identificar on es troben. El primer mètode (absolut) sempre pren com a referència el _root, que ja sabem que és l’origen de projecte. Aquest segon mètode (relatiu) consisteix en anomenar els elements segons la seva ubicació respecte d’un símbol i no del _root: en l’exemple anterior, si estigués programant al clip de pel·lícula “ull_dret” i volgués referir-me a la boca, hauria d’escriure this._parent.boca. This és el clip de
IES CAN MAS – 2009 - 2010
24
Red’s Trident
Samuel Esteban Iglesias
pel·lícula “ull_dret”. Parent significa un nivell per sota del this. Una vegada ens trobem en l’alçada de la boca escrivim el seu nom d’instància (boca). Si volgués referir-me al braç dret des del mateix ull, hauria d’escriure: this._parent._parent.braç_dret. Només he hagut d’afegir un _parent més perquè el braç no es troba a la cara, sinó al clip de pel·lícula Melyan. A continuació hi ha un esquema per a aclarir dubtes: Les parts indicades amb color marró són les més superiors. Per sota hi ha la cara i més per sota encara, el cos sencer. Amb el mètode absolut, s’indicaria: _root.melyan.cara.ull _root.melyan.cara.boca Però si volguéssim indicar pel mètode relatiu la boca des de l’ull, seria: this._parent.boca this: ull _parent: cara (un nivell per sota de l’ull) I si volguéssim indicar el cos: this._parent_parent. this: boca _parent: cara (un nivell per sota de l’ull) _parent: Melyan (un nivell per sota de la cara)
IES CAN MAS – 2009 - 2010
25
Red’s Trident
Samuel Esteban Iglesias
d.- Propietats dels símbols A més de conèixer les accions, hem de saber que els diferents símbols del projecte tenen diverses propietats. Aquestes són les més comuns:
PROPIETAT
SIGNIFICAT
._x
Indica la coordenada _x del símbol.
._y
Indica la coordenada _y del símbol.
.text
Indica, en cas de que el símbol sigui un text dinàmic, el contingut d’aquest.
._alpha
Indica el percentatge de transparència que té un símbol.
._currentframe
Indica el fotograma actual del clip de pel·lícula.
._xscale
Indica l’amplada (en %) del símbol
._yscale
Indica l’alçada (en %)del símbol.
Les propietats són molt útils a l’hora de programar. A continuació, un petit exemple recull unes quantes coses explicades anteriorment:
on (keyPress "<Left>") { _x = _x-4; } on (keyPress "<Right>") { _x = _x+4; }
Amb aquest codi faríem que un botó o un clip de pel·lícula es desplacés quan polséssim les tecles de fletxes del teclat: o La tecla mou el símbol -4 posicions en l’eix de les x respecte de la seva posició. o La tecla mou el símbol +4 posicions en
on (keyPress "<Up>") { _y = _y-4; }
l’eix de les x respecte de la seva posició. o La tecla mou el símbol -4 posicions en l’eix de les y respecte de la seva posició.
on (keyPress "<Down>") { _y = _y+4; }
IES CAN MAS – 2009 - 2010
o La tecla mou el símbol +4 posicions en l’eix de les y respecte de la seva posició.
26
Red’s Trident
Samuel Esteban Iglesias
e.- Les condicions Per als videojocs les condicions són molt importants, perquè regulen totes les variables i possibilitats. Es requereixen en pràcticament tots els codis. Fem un cop d’ull a un exemple per veure’n l’estructura: Al polsar la tecla , si el símbol es troba en la on (keyPress "<Left>") { if (_x == 0){ _x = _x-4; } else { trace (“no es mou”) } }
posició 0 de l’eix de les x es desplaçarà -4 posicions respecte les x. En cas que el símbol no es trobi en la posició 0, l’acció que inclou la condició (_x = _x-4) no s’executarà i el panell de sortida mostrarà “no es mou”.
Com es pot veure, la condició comença amb IF (si condicional en anglès). Totes s’inicien d’aquesta manera. Seguidament, obrim parèntesi i escrivim la condició que vulguem. Es aquí on entren els diferents tipus de condicions:
Comparació de propietats
if (_root.propietat == valor){ if (this._x == _root.cercle._x){
Compara una propietat amb una altra,
Si les _x d’aquest són les mateixes que les del
un valor o una variable.
_root.cercle... If (this.text == “hola”){
Sempre s’indica amb dos iguals.
Si aquest text conté el missatge “hola”... Si posem else, les accions que escrivim
if (this._x == _root.cercle._x){
després només es realitzaran si no s’acompleix la condició. L’else serveix
trace(“s’acompleix la condició”) } else {
per tots els tipus de condicions.
trace(“no s’acompleix la condició”) }
Detecció de col·lisions
if (_root.nom.hitTest(_root.nom2)){ if (_root.prota.hitTest(_root.pedra)){
Detecta si hi ha contacte entre dos símbols. La detecció es limita al quadrat invisible que els envolta.
IES CAN MAS – 2009 - 2010
Si el protagonista xoca amb la pedra... If (this.text == “hola”){ Si aquest text conté el missatge “hola”...
27
Red’s Trident
Samuel Esteban Iglesias
En la secció “problemes durant el desenvolupament” s’explica l’inconvenient d’aquests límits en alguns casos i la solució.
Tecles polsades
if (Key.isDown(valor)) { if (Key.isDown(65)){
Comprova si la tecla que indiquem està polsada en aquell mateix
Si la tecla que té com a codi 65, que es correspon a la A està pressionada...
moment.
També es pot utilitzar el while en lloc de l’if. El while (mentre en anglès) només realitza les accions que s’indiquen quan la seva condició està tenint lloc.
f.- Textos dinàmics Els textos dinàmics ens permeten canviar el seu contingut quan vulguem. Aquests textos poden ser qualsevol tipus de dada. Els utilitzo sovint per a tots els paràmetres del joc. Per exemple, tots els comptadors (monedes, vides...) són textos dinàmics. O també, quan el jugador obté noves habilitats o objectes importants ho indico en un text dinàmic. Tots els textos dinàmics els tinc amagats a la part superior del projecte, on la càmera mai enfoca:
IES CAN MAS – 2009 - 2010
28
Red’s Trident
Samuel Esteban Iglesias
Tots els requadres de colors contenen els textos dinàmics. Els tinc organitzats per habilitats, estrelles aconseguides, etc.:
Com es pot veure, també hi ha dades com l’idioma seleccionat, o el tipus de monitor.
Aquests textos dinàmics són importants a l’hora de programar. A l’apartat següent (g.Explicació dels codis del joc) es veu com els he utilitzat. A l’hora de guardar la partida també són útils, ja que les dades que s’emmagatzemen en els arxius de guardat són les dels text dinàmics.
IES CAN MAS – 2009 - 2010
29
Red’s Trident
Samuel Esteban Iglesias
g.- Explicació dels codis del joc Lògicament no podré explicar tots els codis que conté el joc, perquè ocuparia centenars de pàgines, així que he fet una selecció dels més importats: EL CODI QUE CONTROLA AL PROTAGONISTA (RED) Les següents pàgines mostren el codi que permet moure al protagonista. onClipEvent (load) { var escala:Number = _xscale; var gravedad:Number = 2; //Defineix les variables “escala” i “gravedad”, que s’utilitzen posteriorment. } onClipEvent (enterFrame) { if (_root.controlador_tuberia.usando_tub.text == "no") { gravedad = gravedad+1; _y = _y+gravedad; //Si en qualsevol moment del joc no s’està utilitzant una canonada, que el personatge caigui amb l’efecte de la gravetat. while (_root.ground.hitTest(_x, _y, true)) { _y = _y-1 gravedad = 2; //Mentre les _x i les _y del protagonista col·lisionin amb el terra, que el personatge pugi 1 posició respecte de les _y per a que es mantingui en la superfície del sòl i que la gravetat torni al seu valor inicial. } if (Key.isDown(68) && _root.red_bloqueado.text == "no") { _x = _x+4; _xscale = escala; //Si la tecla D es troba pressionada (el seu valor es “68”) i el protagonista no està bloquejat, que avanci 4 posicions respecte de les _x i la seva _xscale sigui la normal (o sigui, que el personatge miri cap a la dreta). if (_root.ground.hitTest(_x, _y+3, true)) { if ((!Key.isDown(16))) { this.gotoAndStop(1); //Si el protagonista està a terra sense polsar la tecla shift (el seu valor es “16”) que es mostri l’animació del primer fotograma, que correspon a caminar. [CAMINAR CAP A LA DRETA] } else { this.gotoAndStop(7); //Si pel contrari la tecla shift està pressionada, que es reprodueixi l’animació del fotograma 7, que correspon a córrer. [CÓRRER CAP A LA DRETA] } } else { if ((Key.isDown(16))) { this.gotoAndStop(7); //Si no s’acompleix que el protagonista toqui el terra i la tecla shift està polsada, que es mostri l’animació de córrer. [SALTAR I CÓRRER CAP A LA DRETA] } else { //Si no s’acompleix que toqui el terra i tampoc que la tecla shift estigui pressionada, que es mostri l’animació de salt/caiguda. [SALTAR I CAMINAR CAP A LA DRETA] }
IES CAN MAS – 2009 - 2010
30
Red’s Trident
Samuel Esteban Iglesias
} } else if (Key.isDown(65) && _root.red_bloqueado.text == "no") { _x = _x-4; _xscale = -escala; //Si no està polsada la tecla D, l’A si que ho està (codi “65”) i el protagonista no està bloquejat que es desplaci cap a l’esquerra 4 posicions i que la seva escala s’inverteixi, de manera que el protagonista mira cap a l’esquerra. if (_root.ground.hitTest(_x, _y+3, true)) { if ((Key.isDown(16))) { this.gotoAndStop(7); //Si el protagonista està a terra i la tecla shift està polsada, que es mostri l’animació de córrer. [CÓRRER CAP A L’ESQUERRA] } else { this.gotoAndStop(1); //Si pel contrari, no està pressionada, que es mostri l’animació de caminar. [CAMINAR CAP A L’ESQUERRA] } } else { if ((Key.isDown(16))) { //Si el protagonista no està tocant el terra i la tecla shift està pressionada, que es mostri l’animació de córrer. [CAIGUDA CORRENS] this.gotoAndStop(7); } else { this.gotoAndStop(2); //Si el protagonista no està tocant el terra i la tecla shift no està pressionada, que es mostri l’animació de córrer. [CAIGUDA SENSE CÓRRER] } } } else { if (_root.ground.hitTest(_x, _y+3, true) && !Key.isDown(83) && _root.red_bloqueado.text == "no") { //Si el protagonista està tocant el terra, no està bloquejat i la tecla S no està pressionada... if ((Key.isDown(32)) && !Key.isDown(83) && !Key.isDown(87) && !Key.isDown(65) && !Key.isDown(68) && _root.hab_tridente.text == "si") { this.gotoAndStop(5); //...si la barra espaiadora està pressionada, l’habilitat del trident està adquirida i la S, la W, l’A i la D no estan pressionades que es mostri l’animació de l’atac amb el trident. [ATAC TRIDENT] } if (!Key.isDown(32) && !Key.isDown(83) && !Key.isDown(87) && !Key.isDown(65) && !Key.isDown(68)) { this.gotoAndStop(3); _root.red.red_ataque_tridente.stop(); //Si ni la S, la W, l’A, la D ni la barra espaiadora estan pressionades, que es mostri l’animació de quan està de peu normal, sense realitzar cap acció. [FI DE L’ATAC DEL TRIDENT] } } } if (Key.isDown(83) && !Key.isDown(87) && !Key.isDown(65) && !Key.isDown(68) && _root.red_bloqueado.text == "no") { this.gotoAndStop(4); //Si la S està polsada i ni l’A, la D ni la W ho estan, i a més, no està bloquejat, que es mostri l’animació d’ajupir-se. [AJUPIR-SE] } if (Key.isDown(87) && _root.ground.hitTest(_x, _y+3, true) && _root.red_bloqueado.text == "no") { gravedad = -10;
IES CAN MAS – 2009 - 2010
31
Red’s Trident
Samuel Esteban Iglesias
_y = _y-4; _root.salto.start(0, 0); //Si es polsa la tecla W i el protagonista està tocant el terra i no està bloquejat, que la gravetat es posi en el valor -10 per a que no afecti molt inicialment al salt, que el protagonista pugi 4 posicions i que es reprodueixi el so de quan salta. [SALTAR] if ((Key.isDown(16))) { //Si polsa la tecla shift mentre salta... if ((Key.isDown(68)) or (Key.isDown(65))) { this.gotoAndStop(7); this.red_corriendo.play(); //...i la tecla A o D estan polsades, que es reprodueixi l’animació de córrer. [SALT CORRENS] } else { this.gotoAndStop(2); //... i no estan polsades ni l’A ni la D, que es reprodueixi l’animació de caminar. [SALT CAMINANT] } } else { this.gotoAndStop(2); //Si no està polsat el shift que es mostri l’animació de caminar. [SALT CAMINANT] } } if (_root.ground.hitTest(_x+(_width/2)+1, _y-(_height/2), true) or _root.ground.hitTest(_x+(_width/2)+1, _y-(_height/6), true) or _root.ground.hitTest(_x+(_width/2)+1, _y-_height, true)) { if ((Key.isDown(16))) { _x = _x-6; //Si el protagonista toca una paret pel seu costat dret mentre està polsat el shift, que retrocedeixi 6 posicions en les _x, de manera que no pugui continuar corrent perquè hi ha una paret. } else { _x = _x-4; //Si el protagonista toca una paret pel seu costat dret mentre no està polsat el shift, que retrocedeixi 46 posicions en les _x, de manera que no pugui continuar caminant perquè hi ha una paret. } } if (_root.ground.hitTest(_x-(_width/2)-1, _y-(_height/2), true) or _root.ground.hitTest(_x-(_width/2)-1, _y(_height/6), true) or _root.ground.hitTest(_x-(_width/2)-1, _y-_height, true)) { if ((Key.isDown(16))) { _x = _x+6; //Si el protagonista toca una paret pel seu costat esquerre mentre està polsat el shift, que avanci 6 posicions en les _x, de manera que no pugui continuar corrent perquè hi ha una paret. } else { _x = _x+4; //Si el protagonista toca una paret pel seu costat esquerre mentre està polsat el shift, que avanci 4 posicions en les _x, de manera que no pugui continuar caminant perquè hi ha una paret. } } } } //Aquesta part s’encarrega de que aixafin al protagonista. onClipEvent (enterFrame) { if (_root.camera.panelvidas.caravida._currentframe !== 5) { //Si el protagonista no està mort, o sigui, que la cara de la cantonada superior esquerra no es mostra amb
IES CAN MAS – 2009 - 2010
32
Red’s Trident
Samuel Esteban Iglesias
l’expressió de derrotat... if (_root.ground.hitTest(_x, _y-30, true) && _root.ground18.hitTest(_x, _y+5, true)) { _root.animacion_muerto.text = "aplastado"; _root.camera.panelvidas.caravida.gotoAndPlay(4); //...si el protagonista toca al mateix temps el terra amb els seus peus i el sostre amb el cap que perdi una vida de cop i l’animació que faci sigui la de aixafat. } } }
EL CODI QUE CONTROLA A LA PROTAGONISTA (ASHLEY) En els escenaris que apareix l’Ashley ella va avançant amb l’escombra tota l’estona, intentant evitar els enemics que s’aproximen per la dreta. El jugador pot moure’s cap amunt, cap a baix, accelerar o frenar. Però hi ha d’haver un límit per a què el jugador no pugui pujar o baixar tot el que vulgui. Per això vaig afegir uns rectangles invisibles, indicats amb color groc a dalt i a baix, que quan la protagonista els toca es modifica el contingut del text _root.limite_vuelo_ashley: si toca el superior el text canvia a “arriba” i “abajo” si toca l’inferior. Quan el text conté “arriba”, la part del codi encarregada de fer-la pujar no es realitza i el mateix amb el límit inferior. Tot seguit, el codi:
onClipEvent (enterFrame) { _x = _x+5; //En tot moment avança 5 posicions en l’eix de les x. if (_root.bloqueo_vuelo_ashley.text == "no") { //Si la protagonista no està bloquejada... if (Key.isDown(87) && _root.limite_vuelo_ashley.text !== "arriba") { _y = _y-3; //..., la tecla W està polsada i el text que controla els límits del vol no conté “arriba”, que pugi 3 posicions respecte de les y. } if (Key.isDown(83) && _root.limite_vuelo_ashley.text !== "abajo") { _y = _y+3; //..., la tecla S està polsada i el text que controla els límits del vol no conté “abajo”, que baixi 3 posicions respecte de les y. } if (Key.isDown(65) && !Key.isDown(68)) { this.gotoAndStop(3); _x =_x-2; //..., la tecla A està polsada i la D no, que es mostri l’animació de frenada i que retrocedeixi 2 posicions respecte de les x. } if (Key.isDown(68) && !Key.isDown(65)) { this.gotoAndStop(2); _x = _x+4; //..., la tecla D està polsada i la A no, que es mostri l’animació d’acceleració i que avanci 4 posicions respecte de les x. }
IES CAN MAS – 2009 - 2010
33
Red’s Trident
Samuel Esteban Iglesias
} }
EL CODI QUE FEREIX AL PROTAGONISTA I EL QUE EL CURA Quan un enemic ens fereix el codi que s’executa es el següent: _root.camera.panelvidas.caravida.nextFrame();
La cara que conté tots els nivells de salut (caravida) es troba al comptador de vides (panelvidas), que es situa a la càmera, la qual està a l’origen. El nextFrame() el que fa és avançar un fotograma en l’animació, que es correspon a un nivell de salut pitjor. Una vegada el protagonista rep molts cops és quan perd una vida. El codi que fa perdre una vida es troba a l’últim fotograma de la “caravida”: _root.red.gotoAndStop(6); //S’atura al fotograma del protagonista que conté totes les animacions de quan perd una vida. _root.red_bloqueado.text = "si"; //Fa que el protagonista es bloquegi, de tal manera que el jugador no pot moure’l. if (_root.animacion_muerto.text == "pincho") { _root.red.red_muerto.gotoAndPlay(1); //Cada vegada que en Red rep un cop el text “animacion_muerto” canvia el seu text. En aquesta part de codi veiem la comprovació que es fa per veure quina animació s’ha de reproduir. En aquest cas, si el text es “pincho”, es reprodueix l’animació de quan es punxat. } if (_root.animacion_muerto.text == "golpe") { _root.red.red_muerto.gotoAndPlay(126); //En aquest cas, si el text és “golpe”, en Red cau a terra rendit. } if (_root.animacion_muerto.text == "aplastado") { _root.red.red_muerto.gotoAndPlay(239); //En aquest cas, si el text és “aplastado”, en Red acaba esclafat. }
D’altra banda, quan agafem un tros de pollastre per a curar-nos, el codi és el contrari: _root.camera.panelvidas.caravida.prevFrame();
EL CODI QUE TORNA AL PROTAGONISTA AL CHECKPOINT CORRESPONENT Quan perdem una vida durant la nostra partida el joc ens torna automàticament a l’últim checkpoint pel qual hem passat. Aquest codi requereix del text _root.fase i del _root.checkpoint. El primer indica a quina fase ens trobem, mentre que el segon mostra quin es l’últim checkpoint que hem tocat. Aquest codi es troba al final de les animacions de quan en Red mor: gotoAndStop(1); //Torna al primer fotograma de les animacions de les morts. _root.red_bloqueado.text = "no"; //Desbloqueja al protagonista per tal que el jugador el pugui controlar. _root.camera.panelvidas.caravida.gotoAndStop(1); //Deixa al jugador amb l’estat de salut al màxim //A continuació es troba la part encarregada de tornar als checkpoints: if (_root.fase.text == "a" && _root.checkpoint.text == "0") {
IES CAN MAS – 2009 - 2010
34
Red’s Trident
Samuel Esteban Iglesias
//Si ens trobem a la fase a (la primera de totes) i no hem tocat cap checkpoint... _root.red._x = -2442.9; _root.red._y = 276.4; _root.camera._x = -2442.9; _root.camera._y = 276.4 //Col·loca al protagonista i la càmera a les coordenades del principi de l’escenari.
} if (_root.fase.text == "a" && _root.checkpoint.text == "1") { //Si ens trobem a la fase a (la primera de totes) i no hem passat pel primer... _root.red._x = _root.checkpoint1a._x; _root.red._y = _root.checkpoint1a._y; _root.camera._x = _root.checkpoint1a._x; _root.camera._y = _root.checkpoint1a._y; //Col·loca al protagonista i la càmera a les coordenades del primer checkpoint.
} ... Aquest codi s’allarga moltíssim, ja que tots els checkpoints que hi ha al joc han d’estar indicats. EL CODI QUE SUMA LES MONEDES AL COMPTADOR Durant l’aventura anem aconseguint moltes monedes, que es van sumant al comptador. Cada moneda conté el codi següent: onClipEvent (enterFrame) { if (_root.red.limite.hitTest(this)) { //Si el protagonista toca la moneda... _root.camera.contadormonedas.num_monedas.text = Number(_root.camera.contadormonedas.num_monedas.text)+Number(1); //...que al text del comptador es sumi 1. this._parent.gotoAndPlay(22); //La moneda va al fotograma on desapareix. } }
EL CODI QUE REGULA EL SOROLL QUE FAN LES PETJADES Quan el protagonista camina pels diferents tipus de superfície, el soroll que fa és diferent. Per exemple, a la zona japonesa, quan camina per l’aigua sonen les petjades diferent a quan camina pel terra. El codi es situa a cada fotograma en que el protagonista fa un pas: if (_root.camera.hitTest(this)) { //Si el protagonista apareix en pantalla... if (_root.sonido_pasos.text == "normal") { _root.paso_red1.start(0, 0); //...si el text que regula els diferents tipus de petjada conté “normal”, que es reprodueixi el so” paso_red1”. } if (_root.sonido_pasos.text == "agua") { //...si el text que regula els diferents tipus de petjada conté “agua”... if (this._parent.azar.text == "0") { _root.paso_red_agua1.start(0, 0); //...que es reprodueixi el so” red_agua1”. } if (this._parent.azar.text == "1") {
IES CAN MAS – 2009 - 2010
35
Red’s Trident
Samuel Esteban Iglesias _root.paso_red_agua2.start(0, 0); //...que es reprodueixi el so” red_agua2”.
}}}
En el cas de les petjades a l’aigua el codi inclou el azar.text . Aquest genera un número a l’atzar tota l’estona. Segons els número, es reprodueix un so d’aigua diferent, així queda més realista, no sempre amb el mateix ordre de sorolls. EL CODI QUE CONTROLA LA MÚSICA Les diferents melodies del joc van sonant depenent de l’escenari. Quan accedeixes a un, s’inicia la cançó corresponent amb: _root.nom_de_la_cançó.start(0, 0); //El primer zero indica la posició on comença la cançó i el segon el número de repeticions
Totes les melodies es van repetint tota l’estona, infinitament. Però hi ha un inconvenient: hi ha cançons que tenen introducció, i aquesta no hauria de sonar quan es repeteix. Per aquest motiu vaig inventar-me un mètode per a crear un bucle saltant l’introducció: if (_root.cancion_activa.text == "alrededores_mansion") { //Si el text que controla aquest codi conté “alrededores_mansion”... if (_root.alrededores_mansion.position>=40125) { _root.alrededores_mansion.start(4.45, 0); //...si arriba a reproduir-se el 40125 mil·lisegon que torni a començar des del segon 4.45. } }
D’aquesta manera es reprodueix infinitament saltant l’introducció. Aquest codi es repeteix per a totes les cançons que necessiten del bucle. EL CODI QUE CREA EL FONS AMB PROFUNDITAT Si observes el fons de les fases, moltes vegades veuràs muntanyes o construccions que dóna la sensació que es troben lluny. Aquest codi em va portar de cap, ja que vaig intentar-ho de moltes maneres, fins que vaig a arribar a aquesta: onClipEvent (enterFrame) { this._x = (_root.camera._x-7800)/2; this._y = -(_root.camera._y-1700)/4; }
Aquest codi aniria a un dels clip de pel·lícula del fons. El que fa és calcular la seva posició respecte de la càmera. Per exemple, les _x d’aquest símbols són les de la càmera – 7800 píxels. El /2 divideix entre 2 la xifra que doni, de manera que dóna més profunditat que un què estigui dividit entre 4. L’arxiu “Navegació pel Prat” permet veure amb claredat aquesta sensació de profunditat. Es pot navegar polsant les fletxes del teclat. Navegació pel prat
IES CAN MAS – 2009 - 2010
36
Red’s Trident
Samuel Esteban Iglesias
EL CODI DEL CRONÒMETRE A LES FASES DE L’ASHLEY Quan juguem a les fases de l’Ashley, a la part superior de la pantalla hi apareix un cronòmetre. El codi que he creat per aquest es repeteix cada segon: if (this.segundos.text == "59") { this.minutos.text = Number(this.minutos.text)+Number(1); this.segundos.text = "00"; //Si el text que regula els segons és igual a 59 que es sumi un segon més i es posi a zero. } else { if (this.segundos.text<"09") { this.segundos.text = "0"+(Number(this.segundos.text)+Number(1)); //Si el regulador de segons no és igual a 59 i es inferior a 09, que es sumi el text 0 + la xifra 1. } else { this.segundos.text = (Number(this.segundos.text)+Number(1)); //Si no és inferior a 09, que es sumi 1. }
}
IES CAN MAS – 2009 - 2010
37
Red’s Trident
Samuel Esteban Iglesias
h.- Problemes durant el desenvolupament Durant tot el desenvolupament del joc he tingut molts problemes, la majoria dels quals he pogut acabar solucionant. És impossible posar tots el problemes i errors que he tingut, així que faig un recull dels més característics i comprensibles: Problema amb les vides Al principi del desenvolupament, quan jugaves al joc i un enemic et tocava, perdies una vida de cop, cosa bastant molesta (és millor que puguis xocar amb l'enemic unes quantes vegades abans de perdre una vida, com als jocs clàssics). Així que vaig decidir que quan colpegessin el protagonista, es mogués com si rebés el cop. Per tal de realitzar això vaig haver d'estudiar el motion tween: quan un enemic et toca y perds un "cop", se suposa que en Red s'ha de moure com si rebés el cop, perquè si es manté en la posició que va
Una vida conté el que anomeno 3 cops. Cada vegada que et fereix un enemic, perds un cop, i quan t’han donar tres vegades, perds una vida.
tenir col·lisió amb l'enemic, continuaria perdent "cops". Això es podria fer fàcilment indicant les coordenades a les quals volguessis que es desplacés, que seria la posició x i y de Red +5 píxels, per exemple. Però el problema estava en que si escrigués aquest senzill codi, el personatge no es desplaçaria a la posició esmentada, sinó que es teletransportaria instantàniament. El que volia era que el personatge es mogués des de (0, 0) [respecte Red] fins a [5, 0] [una mica desplaçat]. Gràcies al motion tween vaig poder realitzar aquest efecte de desplaçament. Problema amb la profunditat del fons Vaig donar la sensació de profunditat al fons fent que quan el jugador es desplacés les _x augmentessin o decreixessin (depenent de si anava cap a la dreta o cap a l’esquerra) a les diferents capes de fons, però el problema d’això era que si rebies un cop d’un enemic, quan et desplaçaves per l’impacte el fons no es movia (ja que el fons només es movia quan fèiem anar al protagonista cap a la dreta o l’esquerra). Aquest problema es pot veure a la demo (encara no ho havia solucionat).
IES CAN MAS – 2009 - 2010
38
Red’s Trident
Samuel Esteban Iglesias
Solució de la profunditat del fons Finalment vaig substituir aquest codi per un altre mètode, que consisteix en què les capes del fons es desplacen segons la posició de les _x y les _y de la càmera, a través d’una operació matemàtica. Aquest càlcul es pot veure a “EL CODI QUE CREA EL FONS AMB PROFUNDITAT” de l’apartat <<g.- Explicació dels codis del joc>>. Problema amb les col·lisions Mentre estava programant amb col·lisions vaig adonar-me’n de què aquestes no eren precises: Es dibuixi el que es dibuixi, les col·lisions sempre es detectaran en el punt en que els “requadres invisibles” que envolten a cadascun es toquin. Al primer exemple és ben clar que no hi ha col·lisió, mentre que al segon, encara que els dibuixos no es toquin, hi ha col·lisió perquè els “requadres invisibles” si que es solapen. Problema col·lisions
Solució del problema amb les col·lisions Per a crear les col·lisions precises cal fer una petita variació en la condició: nom.hitTest(this) nom.hitTest(_x, _y, true) el que hi ha entre parèntesis indica les coordenades de dins de l’element que col·lisionarà amb “nom”. Problema amb el rendiment Afegir degradats, transparències, efectes visuals excessius i dibuixos complexes fa que el rendiment es vegi afectat. Això és un problema, ja que el jugador experimentarà una reducció dels fps, que correntment hauria de ser de 30 fps. Això molesta, ja que el jugador s’ha d’adaptar a una velocitat més lenta que la que seria en realitat. L’efecte de la visió làser n’és un exemple clar de consum de rendiment. És un requadre amb transparències amb un efecte que fa variar el color de la pantalla. S’haurà de fer un altre tipus Problema rendiment
IES CAN MAS – 2009 - 2010
d’efecte per tal que el rendiment millori.
39
Red’s Trident
Samuel Esteban Iglesias
Problema amb les col·lisions dels enemics Quan el protagonista no portava el trident i xocava amb un enemic tot funcionava correctament, però quan el portava i el trident xocava amb l’ enemic el que passava era que també li restava una vida. Per què? Doncs perquè l’enemic estava programat per a que quan el conjunt del protagonista (cos, accessoris, armes...) el toqués, li restés una vida. Per aquest motiu vaig haver de canviar el codi i afegir un quadrat-detector (anomenat “limite”) a l’àrea del cos per tal que només ferís el jugador quan fos tocat: Quadrat-detector - CODI ANTIC onClipEvent (enterFrame) {
- CODI NOU onClipEvent (enterFrame) {
if (_root.red.hitTest(this)) {
if (_root.red.limite.hitTest(this)) {
//Codi que fa perdre una vida
//Codi que fa perdre una vida
} }
} }
Millora del salt de la molla Inicialment el salt de la molla era una mica estrany: Saltaves i a la part més alta del salt, el personatge sofria una caiguda ràpida. Canviant el motion tween que provocava aquest salt per un altre codi es pot obtenir un millor efecte de rebot. A més de millorar el rebot, si mantens polsat el botó de salt quan rebotes arribaràs a més alçada que sense polsar-ho. Problema amb les fonts El joc utilitza diversos tipus de lletra que no tothom té instal·lats als seus ordinadors. Els usuaris que no els tenen veurien els textos amb un tipus de lletra predeterminat (tipus Times New Roman). Per solucionar això s’ha d’importar els tipus de lletra poc comuns al joc. Problema amb l’aparició i desaparició d’enemics per no consumir molt rendiment Durant tota l’estona que el jugador està en un escenari, tots els enemics i objectes que hi ha s’estan mostrant. O sigui, que hi ha coses que es troben encara molt lluny del jugador i ja es mostren en pantalla. Això comporta un consum del rendiment innecessari. Per això vaig fer que només es mostressin els enemics quan es trobessin a l’àrea de la càmera. Aquesta idea
IES CAN MAS – 2009 - 2010
40
Red’s Trident
Samuel Esteban Iglesias
donava bons resultats, però el problema apareixia a l’hora de jugar en una pantalla panoràmica: la càmera sempre és quadrada, i els espais que hi ha pels costats dret i esquerre no formen part d’aquesta. Per tant, els enemics no apareixien fins a que es trobaven en l’àrea de la càmera, donant un efecte lleig, ja que apareixien sobtadament. Solució del problema amb l’aparició i desaparició d’enemics per no consumir molt rendiment El codi per a què un enemic o objecte aparegués quan es trobés en pantalla, col·lisionant amb la càmera era aquest: onClipEvent (enterFrame) { if (_root.camera.hitTest(this)) { this._visible = true; } else { this._visible = false; } }
onClipEvent (enterFrame) { if (this._x<_root.camera._x-600 or this._x>_root.camera._x+600) { //Si s’acompleix, no mostrar-ho this._visible = false; } else { //Si no s’acompleix, mostrar-ho this._visible = true; } }
Com es pot veure, el nou codi el que fa és mostrar a l’enemic/objecte quan es troba entre la coordenada x de la càmera – 600 i la coordenada x de la càmera + 600. Durant el desenvolupament del joc moltes vegades el programa s’ha tancat de sobte, fent-me perdre tot el que havia fet fins al moment. Per això he anat guardant bastant sovint, per si tornava a passar-me.
IES CAN MAS – 2009 - 2010
41
Red’s Trident 3.5
Samuel Esteban Iglesias
ÀUDIO I MÚSICA.
A més de cuidar l’apartat visual, també s’ha de tenir en compte la música que sonarà durant les diferents situacions i escenaris del joc. No tinc cap tipus de coneixement musical, perquè no he anat mai a cap escola de música. Tot i això, he volgut crear les melodies. Totes les cançons que sonen en el joc han estat creades i composades per mi amb el “FL Studio”. Es tracta d’un sintetitzador i compositor potent amb moltes capacitats. Vegem una captura de pantalla del programa (a continuació introduiré uns quants conceptes bàsics d’aquest):
Una captura que mostra el Fl Studio.
a.- Com utilitzar el FL Studio Pista
Actiu/ No actiu Balanç
Volum
Instrument
Tempo En aquest comptador regulem la velocitat de la cançó.
IES CAN MAS – 2009 - 2010
Pista
Controls
Ens permeten aturar, reproduir la cançó, etc.
42
Red’s Trident
Samuel Esteban Iglesias
Cadascun dels instruments té la seva pista. A més, a cadascuna d’elles es pot regular el volum i el balanç, independentment de la resta d’instruments. Si fem clic sobre la pista de qualsevol dels instruments se’ns obrirà en gran per tal de poder compondre: Aquest és un exemple de pista
on col·loquem les
notes: cada requadre verd és una nota. Mentre més amunt la posem, més agut sonarà i el contrari passarà amb els tons greus. Si n’estirem una d’elles, el so es perllongarà. La columna que hi ha a dalt de tot amb un triangle taronja ens indica la posició de la reproducció actual. A mesura que el triangle es va desplaçant per les columnes van sonant les diferent notes. D’altra banda, la barra inferior de la partitura (la que té línies verticals verdes) regula altres paràmetres de cada nota en concret, com el volum, el balanç (que regula per quin altaveu sona certa nota) o quant de desafinada està. Podem combinar aquestes funcions al nostre gust.
b.- Els VSTi Els instruments que utilitzen els sintetitzadors de música són els VST (Virtual Studio Technology) o també coneguts com VSTi (Virtual Studio Technology instruments). Aquests VST poden contenir un o diversos instruments. El Fl Studio inclou diversos instruments, la majoria dels quals són d’estil digital, de música màquina. N’hi ha alguns que imiten instruments de música clàssica, però són de bastant mala qualitat. Així que vaig començar a buscar nous instruments de més qualitat. Els que més m’interessaven eren els instruments d’orquestra, com violins, contrabaixos, trompetes, pianos, percussions... en general, tots els instruments que contenen les orquestres. En la meva recerca em vaig topar amb l’Edirol HQ Orchestral VSTi. Es un increïble VST que conté 145 instruments de totes les categories (de corda, de vent, de tecles, de percussió...).
IES CAN MAS – 2009 - 2010
43
Red’s Trident
Samuel Esteban Iglesias
A més, té les diferents formes de tocar els instruments. Són efectes com el spiccato, el pizccato o el vibrato, que donen diferents tocs als instruments. També vaig cercar un VST de veus de coral, ja que el Fl Studio té unes veus bastant sintètiques. Aquest es diu “Magnus Choir”. Permet escollir entre bastants tipus de veu i regular-les (quant es mantenen, l’eco...). I per a l’escenari d’estil Japonès vaig utilitzar un altre VST amb instruments japonesos. Es tracta del “DSK AsianZ DreamZ”, el qual conté set instruments orientals.
Captura del VST Magnus Choir
Captura del VST Edirol HQ Orchestral VSTi
Captura del VST DSK AsianZ DreamZ
La cerca de VST és complicada, perquè els instruments digitals no són fàcils de trobar per Internet. Vaig haver d’invertir molt de temps buscant-los i provant-los per veure si eren de qualitat i si em servirien per a les meves composicions. Com a informació addicional, he de dir que el VST Edirol HQ Orchestral VSTi té un problema, i és que cada vegada que obres una composició en la que l’has utilitzat has de tornar a escollir els instruments que vas seleccionar, ja que no es queden guardats. És un problema bastant molest, perquè si has utilitzat molts instruments d’aquest VST et trobes amb la feinada d’haver de tornar a seleccionar els instruments.
IES CAN MAS – 2009 - 2010
44
Red’s Trident
Samuel Esteban Iglesias
c.- Pistes d’exemple En total he creat aproximadament unes 50 composicions per les diferents fases i situacions. Ha sigut un gran esforç crear-les totes, però crec que ha valgut la pena, perquè m’agrada el resultat. Aquí tenim les pistes de la cançó “Cim Nevat” (Zona neu): CIM NEVAT
So campana
Campana tubular
Bateria
Sons d’orquestral
Piano
Trombó
Conjunt corda spiccato
So campana agut
Conjunt corda tremollo
Baix elèctric
Un dubte que pot sorgir és com es compon amb la bateria. La resta d’instruments van tocant respecte la posició dels quadrats, com he dit abans, més amunt, més agut i el contrari amb els greus. Doncs la bateria sona també respecte la posició dels quadrats, però la posició dels quadrats no indica el to de la nota, sinó el so de la bateria corresponent. Per exemple, podria ser que la nota DO sonés com un plateret, o la RE com un bombo. Composant
IES CAN MAS – 2009 - 2010
45
Red’s Trident
Samuel Esteban Iglesias
d.- Efectes sonors i veus A mesura que es va jugant es poden anar sentint tot tipus d’efectes sonors. Gran part d’aquests són d’altres videojocs comercials ja existents, com “Warcraft III”, “Super Mario World”,”Wario Ware” i “Super Paper Mario”. Però hi ha excepcions, perquè de vegades hi ha personatges que parlen o emeten sorolls que jo mateix he gravat. Per exemple, les veus del Rei Robot són gravacions meves manipulades amb l’Audacity per donar-les-hi un efecte de robot. D’altra banda, les de la Melyan són les d’una amiga que vaig conèixer a través d’Internet que viu a Galícia i té per sobrenom “Lanier”. Els personatges no llegeixen els textos que apareixen als diàlegs, perquè seria una feinada molt gran, però sí que emeten veus segons el seu estat d’ànim (normal, enfadat, alegre, trist...). Vaig decidir afegir aquestes veus per a donar-los-hi més vida.
IES CAN MAS – 2009 - 2010
46
Red’s Trident
Samuel Esteban Iglesias
4.- Avaluació Després de tant treball realitzat durant un any aproximadament, emprant moltíssimes hores, composant tot tipus de cançons, dibuixant una quantitat immensa de gràfics, animant expressions, gestos i moviments, programant codis molt diversos i creant tot un món amb els seus personatges i argument, he de dir que estic satisfet amb el treball que he creat. De mica en mica, el projecte ha anat patint nombrosos canvis. En els seus inicis anava a ser una cosa molt diferent al resultat final, com es pot veure en algunes de les comparacions dels apartats de la programació i dels gràfics. L’he anat millorant progressivament. Considero aquest treball com autodidàctic, ja que a poc a poc he anat aprenent de tots els aspectes que intervenen en el joc, especialment de programació. Vaig passar d’inicialment no saber com fer-m’ho per treure vides o moure objectes a diferents coordenades, a crear variables i codis complexos amb moltes condicions al seu interior. En alguns casos això ha sigut un inconvenient, perquè coses que podria haver programat millor, com que les vaig fer inicialment (quan no tenia tants coneixements) han quedat una mica antiquades. Hagués estat bé tornar a programar-ho, però portaria massa feina. Els resultats de l’enquesta és una de les coses que m’ha animat a millorar i afegir certes funcions al joc. Vaig adonar-me’n que les coses que per a mi no tenien gaire importància a la gent si que els interessava com per exemple, els controls dels moviments amb les fletxes del teclat. Hi ha diversos aspectes del joc que es podrien millorar, com els dibuixos i la música, que potser no agraden a tothom (es bastant difícil que agradi a tots). Potser també es podria millorar la duració del joc, encara que com es tracta d’un videojoc creat per una única persona, és una cosa bastant complicada, perquè la resta de parts s’emporten molt de temps. De la programació també es podrien polir unes quantes coses (els controls, per exemple). Ha sigut una gran satisfacció crear aquest treball, que m’ha permès expressar la meva creativitat en pràcticament tots els camps possibles. Per aquest motiu, animo a tot el que vulgui a crear un projecte d’aquest estil. Si un s’esforça, hi posa ganes i insisteix, segur que arriba als seus objectius.
IES CAN MAS – 2009 - 2010
47
Red’s Trident
Samuel Esteban Iglesias
5.- Recursos utilitzats / bibliografia Durant el desenvolupament del projecte vaig crear una pàgina web per al joc: http://redstrident.do.am. Allà vaig pujar la demo per a que la gent la pogués provar. En aquesta demostració (que vaig penjar a l’octubre del 2009) es podia veure les característiques bàsiques d’aquest. La demo incloïa les tres primeres fases. Juntament amb la demo vaig penjar una enquesta per tal de recaptar informació sobre l’opinió dels jugadors. L’enquesta la vaig crear amb el servei gratuït Google Docs, on hi ha una secció per crear enquestes i publicar-les. Les preguntes que apareixien en l’enquesta eren les següents: 1.- Què et semblen els gràfics? (5 màx. 1 min.) 2.- I la música? (5 màx. 1 min.) 3.- Amb quina qualitat has jugat? (alta, mitja, baixa) 4.- Et semblen còmodes els controls? (Si / no) 5.- Com t’ha anat el rendiment? (3 màx. 1 min.) 6.- Un camp de text per a expressar l’opinió respecte del joc. I aquests són els cinquanta resultats recollits: ( G – Gràfics | M – Música | Q – Qualitat | C – Controls | R – Rendiment ) Data
27/10/2009 15:40:52
G
M
Q
C
Opinió lliure
R
mola un huevo! 5
5
Alta
Si
27/10/2009 15:44:29
4
1
Mitja
Si
27/10/2009 18:58:40
4
5
Alta
Si
IES CAN MAS – 2009 - 2010
3 tu amigo del messenger el impaciente XDDDD Hhhhm, tal vez red anda un poco lento. Deberias ponerlo para que vaya algo mas deprisa y que con un boton fuera a ese ritmo al que va ahora. Y he intentado saltar sobre un bill bala pero me mata .,. Bueno, ahora si Leumas, yo soy Geo, y te pondré todo lo que sé y que opino al respecto...
3
EL juego esta muy bien hecho, las imagenes estan bien dedicadas. sería bueno que Red pudiera correr, para que asi no se tardara tanto en moverse en el nivel. Sería bueno que los controles fueran adaptados para jugarlos con el Wii mediante el opera, aunque no sé como se hace
3
48
Red’s Trident
Samuel Esteban Iglesias eso. al principio el primer nivel estaba muy oscuro, pero eso es problema de mi monitor, no del juego. El juego en si es muy bueno, realmente te felicito. Podrías cambiar la fuente de las letras cuando lees lo que dice la gente, por que se vé poco profesional... digo, bueno no es tanto ese detalle, pero eso.
27/10/2009 19:19:00
5
4
Alta
No
Sencillamente que tengo ganas de poder jugar al juego completo ♥
3
27/10/2009 22:28:54
4
3
Mitja
Si
Por lo que e visto en la demo va a ser un buen juego que puede que en un futuro y creo que llegara a ser algo mas que un juego de internet.
3
28/10/2009 19:12:52
5
5
Mitja
Si
Trobo que es un joc molt entretingut
3
29/10/2009 0:41:45
4
5
Mitja
Si
¿Me gustaría saber si va aparecer Ashley en el juego? ya que tambien es un personaje importante, gracias por leer mi pregunta.
3
30/10/2009 18:50:42
5
4
Mitja
Si
31/10/2009 16:39:29
5
5
Mitja
Si
1/11/2009 20:28:14
4
5
Mitja
Si
Molt bona la demo, a veure que tal el joc definitiu.
3
4/11/2009 0:48:36
3
3
Mitja
Si
Falta sangreeeeeeeeeeee xD
3
4/11/2009 17:58:38
5
5
Baixa
Si
Samu, está genial! Lo único que los controles serían mejor las flechas del teclado. Pero igualmente esta genial! Kevin.
3
7/11/2009 19:45:04
Esta genial pero hay un error en el segundo checkpoint del segundo mundo, el de las flores, y cuando mueres no vueles a aparecer :( en calidad baja me va mas rapido,y la zona de la fabrica robot se complica xDDDD ya llevo un monton de muertes :S suerte que es invencible xD recomendaria poner alguin chekpoint mas en ese nivel ò_ò pero lo demas esta todo genial,sigue asi! :3 un dia tendrias que sacar uno pero de Ashley! xD
3
2
A excepción de unos bugs, que confío que solucionarás en el fúturo, el juego es de lo mejorcito que he provado, un Homebrew digno de ser alagado. 5
5
Alta
Si
2 Te has ganado mi respeto ;) Atte.: Tu amigo y seguidor, Arbër.
7/11/2009 23:03:01 19/11/2009 9:07:33
3
4
Mitja
Si
Bastante buena por ser una demo.
2
3
3
Baixa
No
NO ESTÁ NADA MAL, LE FALTA ALGO DE VELOCIDAD AL JUEGO EN GENERAL, MOVIMIENTOS ALGO RALENTIZADOS PERO ME HA GUSTADO, BUEN TRABAJO...
2
IES CAN MAS – 2009 - 2010
49
Red’s Trident 20/11/2009 16:45:47 26/11/2009 17:25:32
Samuel Esteban Iglesias
5
4
Mitja
Si
que bien dibujado! felicidades
3
5
5
Mitja
Si
Es muy divertido y quiero jugar a la siguiente modelo
3
26/11/2009 17:25:47
2
2
Alta
Si
Esta xulo el juego, lo que tendria que ir un poquito mas rápido..
2
26/11/2009 17:26:45
5
4
Alta
Si
Esta muy bien porque es entretenido.
2
26/11/2009 17:26:47
4
2
Mitja
Si
Esta muy bien el juego y se engancha muy rapido. mola mucho el juego
2
26/11/2009 17:28:04
4
3
Mitja
Si
qe los controles podrian der cn las fechas i la musica mas marchosa i podria ser mas rapido
2
27/11/2009 17:19:21
5
5
Alta
Si
Hey, esta genial, a veure qui te collons de fer un videojoc.. jaja pots estar orgullós ;)
3
3/12/2009 16:40:37
4
5
Mitja
No
esta chulo
2
3/12/2009 16:43:46
3
3
Mitja
Si
ànims i a millorar-la!!! molt bé!!!
2
3/12/2009 16:48:18
4
4
Mitja
No
esta bien pero es muy lento y los graficos estan bien es dibertido
2
3/12/2009 16:49:35
4
5
Mitja
Si
es molt guapo el joc no tinc res de dolent
2
3/12/2009 16:50:20
5
5
Alta
No
estabien es muy way pero creo que tiene que aber un poco mas de accion.
3
buenasuerete chabal. es dificil saltar los precipicios, no e llegado ni al segundo nivell firmado:Silvia
3/12/2009 16:50:58
4
1
Mitja
No
3/12/2009 16:55:09
4
4
Mitja
No
que es bo
2
Si
wow! recuerdo cuando fui ayer al baño y poes... okno___o oye leumas! esta increiible! muero por jugarl la version final... se ve tan sexy red! Los graficos estan increiibles! MOLAN! las canciones son lo mejor! se me paro_____________o WTF? pero lo malo esque lo tengo que jugar en calidaad baja porque... mi compu es vieja jajajajaja... muy buen juego y la verdad me gusto mucho la hiistoria, ya sabes... le roban el tridente a red y tiene q pasar por todo eso! JAJJAAJ xD
3
5/12/2009 16:58:04
5
5
Baixa
IES CAN MAS – 2009 - 2010
2
50
Red’s Trident
Samuel Esteban Iglesias asi y me encantan los fondos... jejeje el del primer nivel la nariz de wario en la montaña OMG! mira la hora! bno me tengo que ir! ciao! jajaja º______º a estado wapo pero lo k no ma gustado asido los controles k son incomodos podrias poner las tipicas flechas de contol la musica no a sido mu tipica.
10/12/2009 9:03:22
4
2
Alta
No
10/12/2009 9:04:03
5
4
Baixa
No
no se me da jugar bien
1
10/12/2009 9:06:52
4
3
Mitja
Si
es una mierda :p
3
10/12/2009 9:08:01
2
5
Mitja
No
ola lokoo weno k para mi los controles no me van bien estarian mejor en las flechas para mi opinin claroo dewww!!!
2
10/12/2009 9:09:56
3
2
Baixa
No
Vaa muy lento!pero esta chulo
1
10/12/2009 9:11:30
4
5
Mitja
No
es mejor que pongas los controles en las flechas
3
2
La demo aveces es facil i otras veces es dificil. Los controles para mi son dificiles ya que estoi aconstumbrado a jugar con las flechas del teclado. Vueno se parece al Mario Bross. En definitiva es entretenido.Esta vastante bien. Felicidades,sigue asi
10/12/2009 9:12:27
2
1
Mitja
No
10/12/2009 9:14:03
3
4
Mitja
Si
Esta muy bien pero va lento y en el nivel 2 si te matan al personaje luego no aparece
2
2
2
10/12/2009 9:15:56
2
2
Alta
No
Bueno es demasiado sencillo y cuando llebas mucho rato aburre..... los controles deverian aver sido con las flexitas ;) Es que es muy sencillo:S
10/12/2009 9:16:04
5
2
Mitja
No
La demo esta bien pero los controles son incomodos.
2
10/12/2009 9:16:35
4
1
Mitja
No
Es un fastidio no haber puesto los controles en las flechas.
3
10/12/2009 9:16:48
3
2
Mitja
No
van mejor las flechas para controlar
2
10/12/2009 9:23:07
4
4
Alta
No
Está bien pero preferiria que el control fuera de las flechas, para mi es mas comodo, pero por lo demas esta muy bien.
2
10/12/2009 9:24:53
4
3
Alta
IES CAN MAS – 2009 - 2010
Si
El juego esta muy bien y la idea es prometedora, sigue asi y conseguiras un juego mucho mejor. Felicidades.
3
51
Red’s Trident 11/12/2009 23:10:14
Samuel Esteban Iglesias
5
5
Mitja
Si
La demo es lo mejor de Red's Trident ke he jugado
3
4
5
Alta
No
mola xD
3
3
3
Mitja
Si
El demo del juego esta bien, parece bueno, espero ver el juego completo.
2
6/01/2010 18:59:55
4
5
Mitja
Si
Det er veldig bra og jeg liker, men jeg kunne ha gjort bedre.
3
15/01/2010 16:20:00
4
3
Alta
Si
Es una maravilla aunque podrías poner mas enemigos para el juego original
3
16/01/2010 8:17:16
4
4
Mitja
Si
En el primer checkpoint del segundo mundo si te mueres no apareces.
2
12/12/2009 23:32:11 27/12/2009 4:52:28
Com es pot veure, hi ha comentaris de tot tipus. Gràcies a l’enquesta he pogut conèixer si el joc té un rendiment bo per ser jugat a la majoria d’ordinadors, si l’ambient, controls i música són atractius i a més de conèixer les opinions de la gent sobre la demo he pogut saber quines coses els hi agradaria millorar o afegir. Per exemple, la funció de córrer inicialment no apareixia al joc, però en veure que un gran nombre de persones opinava que el personatge es desplaçava una mica lent vaig decidir afegir-la. Tràiler demo
A continuació mostro tot el programari utilitzat durant el procés de disseny:
Fl Studio 8
Música
Macromedia Flash Professional 8
Programació i gràfics
Audacity
Edició de música i sons
Macromedia Dreamweaver 8
Creació de la web del joc
S
Macromedia Fireworks 8 Edició de gràfics
Adobe Photoshop S
Sony Vegas IES CAN MAS – 2009 - 2010
Muntatge dels vídeos (Tràiler de la demo...)
52
Red’s Trident
Samuel Esteban Iglesias
Els serveis d’Internet utilitzats han sigut aquests:
Google Docs
Creació i distribució de l’enquesta.
YouTube
Pujada del tràiler de la demo.
uCoz
Pujada de la demo i recaptació de comentaris.
Pel que fa a altres recursos he consultat la web Cristalab (http:// www.cristalab.com), la qual conté tutorials sobre diversos tipus de programació, com l’html, el css o l’actionscript entre d’altres. Aquests tutorials han estat creats pels propis usuaris de la web. D’altra banda, també he emprat els temes d’ajuda del propi Macromedia Flash.
IES CAN MAS – 2009 - 2010
53
Red’s Trident
Samuel Esteban Iglesias
6.- Agraïments Abans d’acabar he de donar les gràcies a: o
En Jordi Polo, qui a més d’haver-me estat guiant durant tot el projecte i durant la creació del dossier em va animar a crear aquest treball de recerca.
o
La resta de professors del departament de tecnologia que han promocionat el joc.
o
La Mireia Guixà, qui va supervisar aquest document.
o
Tots els alumnes de l’ESO que han cooperat en l’enquesta i els comentaris.
o
Els meus pares, que m’ha fet diverses recomanacions durant el desenvolupament i la meva germana, qui també ha supervisat aquest document i m’ha ajudat en aspectes tals com el disseny dels personatges.
o
En Miquel Arrué, qui ha escoltat molts dels temes que conté el joc, m’ha donat la seva opinió i propostes de millora.
o
La “Lanier”, qui s’ha encarregat (des de Galícia) de posar la veu a la Melyan.
o
L’Alonso, qui ha fet el soroll del cigala que sona a la primera fase.
o
Tota la gent d’Internet que ha provat la demo i ha comentat el vídeo del tràiler i a la web oficial.
IES CAN MAS – 2009 - 2010
54
Red’s Trident
Samuel Esteban Iglesias
7.- Annexos Animacions Red
Exemples animació
Comparació FPS
Navegació pel prat
Secció del joc
Personatges
Composant
Tràiler demo
Problema rendiment
Dissenyant 1
Dissenyant 2
Primera fase
Primera fase antiga
Zona japonesa antiga
Dissenyant Ashley
Totes les cançons
IES CAN MAS – 2009 - 2010
55