red´s trident
DESCRIPTION
Treball de RecercaTRANSCRIPT
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: Creació d’un videojoc de plataformes
Red’s Trident Samuel Esteban Iglesias
1
IES CAN MAS – 2009 - 2010
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. 15
3.4 . Programació. 21
a) Desencadenadors
b) Accions comunes 23
c) Rutes dels símbols. 24
d) Propietats dels símbols. 26
e) Les condicions. 27
f) Textos dinàmics. 28
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
Red’s Trident Samuel Esteban Iglesias
2
IES CAN MAS – 2009 - 2010
1.- 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.
Red’s Trident Samuel Esteban Iglesias
3
IES CAN MAS – 2009 - 2010
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.
2.- 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
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.
Red’s Trident Samuel Esteban Iglesias
4
IES CAN MAS – 2009 - 2010
3.- 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 superposar-
los.
Red’s Trident Samuel Esteban Iglesias
5
IES CAN MAS – 2009 - 2010
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.
Red’s Trident Samuel Esteban Iglesias
6
IES CAN MAS – 2009 - 2010
A continuació tenim una comparació entre el dibuix vectorial i el mapa de bits:
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.
Mapa de bits
Dibuix vectorial
Red’s Trident Samuel Esteban Iglesias
7
IES CAN MAS – 2009 - 2010
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 ficar-
nos-hi dins. El que haurem de fer
és utilitzar el foc per cremar-la i
així poder accedir a una àrea
secreta.
Red’s Trident Samuel Esteban Iglesias
8
IES CAN MAS – 2009 - 2010
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.
Red’s Trident Samuel Esteban Iglesias
9
IES CAN MAS – 2009 - 2010
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:
Red’s Trident Samuel Esteban Iglesias
10
IES CAN MAS – 2009 - 2010
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.
Red’s Trident Samuel Esteban Iglesias
11
IES CAN MAS – 2009 - 2010
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.
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...
DALLYEN
É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.
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”.
Red’s Trident Samuel Esteban Iglesias
12
IES CAN MAS – 2009 - 2010
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 torturar-
los. I tot perquè una vegada la van deixar plantada...
SAMURAI
És el guardià de la torre de vigilància de Shun-
Ganko. 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.
Red’s Trident Samuel Esteban Iglesias
13
IES CAN MAS – 2009 - 2010
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
Indica que hi ha un arxiu
.swf interactiu al CD
Red’s Trident Samuel Esteban Iglesias
14
IES CAN MAS – 2009 - 2010
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.
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
Exemples animació
Red’s Trident Samuel Esteban Iglesias
15
IES CAN MAS – 2009 - 2010
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
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
El mateix passa amb la noia que hi ha a la primera fase. Només té tres animacions.
1 2 3 4 5 6
1 2 3
Red’s Trident Samuel Esteban Iglesias
16
IES CAN MAS – 2009 - 2010
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 -
Braç esquerre
Cames
Cap
Cabell de darrere
Braç dret
Cos sencer Cap
Cara i coll
Serrell Ull esquerre
Ull dret
Pigues i nas
Boca
Orella
dreta
Orella
esquerra
Braç
Braç
Mà
Ull
Cella
Ull
Pupil·la
Red’s Trident Samuel Esteban Iglesias
17
IES CAN MAS – 2009 - 2010
- ANIMACIONS DE DALLYEN PER SEPARAT -
Dret Encongit Levitant
COS
CAP
Endavant Cap a la dreta Cap a l’esquerra
BRAÇ
Relaxat Flexionat Estirat Cap amunt
MÀ
Relaxada Oberta 1 Oberta 2 Puny Indicant “Pau”
ULL Normal
Cap a la
dreta
Cap a
l’esquerra
Enfadat Sorprès Tancat
BOCA
Normal Parlant Somrient Trista Rabiosa
Red’s Trident Samuel Esteban Iglesias
18
IES CAN MAS – 2009 - 2010
- MELYAN PER TROSSOS -
Cos sencer
Cap
Braç dret/esquerre
Cuixa dreta/esquerra
Cama dreta/esquerra
Cabell darrere
Espatlles
Collaret
Faldilla darrere
Orelles conill dreta/esquerra Sabatilla dreta/esquerra
Faldilla davant
Tors
Cap
Barret
Serrell
Cara i coll
Ull esquerre
Ull dret
Galtes
Orella dreta
Orella esquerra
Boca
Nas
Braç
Braç
Avantbraç i mà
Ull
Cella
Ull i pestanyes
Pupil·la i iris
Red’s Trident Samuel Esteban Iglesias
19
IES CAN MAS – 2009 - 2010
- ANIMACIONS DE MELYAN PER SEPARAT –
Dreta Asseguda
COS
CAP
BRAÇ
MÀ
ULL
BOCA
Endavant Cap a la dreta
Cap a l’esquerra
Relaxat
Cap a dins
A la boca
Cap a fora
Mig alçat
Relaxat
Oberta 1
Oberta 2
Puny
Indicant
“Pau”
Oberta 3
Normal Cap a la
dreta
Cap a
l’esquerra Sorpresa Alegre
Somrient Parlant Normal De gat Rient Sorpresa
Red’s Trident Samuel Esteban Iglesias
20
IES CAN MAS – 2009 - 2010
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:
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):
En aquest cas concret, Melyan té:
L’ull dret i esquerre
mirant cap a la dreta.
_root.melyan.cara.ojo_der.gotoAndStop(87);
_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
“a la boca”.
_root.melyan.brazo_der.gotoAndStop(126);
_root.melyan.brazo_izq.gotoAndStop(126);
Les mans obertes com
en “oberta 1”.
_root.melyan.brazo_der.mano.gotoAndStop(2);
_root.melyan.brazo_izq.mano.gotoAndStop(2);
La resta de parts estan en la forma predeterminada.
Red’s Trident Samuel Esteban Iglesias
21
IES CAN MAS – 2009 - 2010
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).
Red’s Trident Samuel Esteban Iglesias
22
IES CAN MAS – 2009 - 2010
A continuació hi ha un exemple de codi per a un
botó:
Quan el botó sigui pressionat es mostrarà al panell
de sortida el text: “El botó ha sigut pressionat”
I un altre per a un movieclip:
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ó:
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.
on (press) {
trace(“El botó ha sigut pressionat”);
}
onClipEvent(enterFrame) {
trace(“Hola, món”);
}
on (press) {
trace(“El botó ha sigut pressionat”);
}
Red’s Trident Samuel Esteban Iglesias
23
IES CAN MAS – 2009 - 2010
b.- Accions comunes
ACCIÓ SIGNIFICAT EXEMPLE
trace(“x”)
Mostra al panell de sortida
el que s’indica entre
parèntesis. Pot ser un text
definit, una variable, un
càlcul, una propietat d’un
clip de pel·lícula...
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.
play();
Reprodueix el clip de
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.
stop(); Atura el clip de pel·lícula.
Succeeix el mateix que amb el play(), així que l’únic
exemple possible és:
stop () – Únicament s’atura.
gotoAndPlay(x)
Va al fotograma indicat
entre parèntesis i es
reprodueix. Pot ser un
número, una variable, un
càlcul, etc.
gotoAndPlay(12) – Va al fotograma 12 i reprodueix.
gotoAndPlay(_currentframe-5) – Comprova en quin
fotograma es troba actualment,
retrocedeix 5 i es reprodueix.
gotoAndStop(x)
És exactament igual que el
gotoAndPlay, excepte que
aquest en comptes d’anar al
fotograma i reproduir-se,
s’atura.
gotoAndStop(6) – Va al fotograma 12 i s’atura.
gotoAndStop(_currentframe+2) – Comprova en quin
fotograma es troba actualment,
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.
Red’s Trident Samuel Esteban Iglesias
24
IES CAN MAS – 2009 - 2010
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
Red’s Trident Samuel Esteban Iglesias
25
IES CAN MAS – 2009 - 2010
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)
Red’s Trident Samuel Esteban Iglesias
26
IES CAN MAS – 2009 - 2010
on (keyPress "<Left>") {
_x = _x-4;
}
on (keyPress "<Right>") {
_x = _x+4;
}
on (keyPress "<Up>") {
_y = _y-4;
}
on (keyPress "<Down>") {
_y = _y+4;
}
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:
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
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ó.
o La tecla mou el símbol +4 posicions en
l’eix de les y respecte de la seva posició.
Red’s Trident Samuel Esteban Iglesias
27
IES CAN MAS – 2009 - 2010
on (keyPress "<Left>") {
if (_x == 0){
_x = _x-4;
} else {
trace (“no es mou”)
}
}
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
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){
Compara una propietat amb una altra,
un valor o una variable.
Sempre s’indica amb dos iguals.
if (this._x == _root.cercle._x){
Si les _x d’aquest són les mateixes que les del
_root.cercle...
If (this.text == “hola”){
Si aquest text conté el missatge “hola”...
Si posem else, les accions que escrivim
després només es realitzaran si no
s’acompleix la condició. L’else serveix
per tots els tipus de condicions.
if (this._x == _root.cercle._x){
trace(“s’acompleix la condició”)
} else {
trace(“no s’acompleix la condició”)
}
Detecció de col·lisions if (_root.nom.hitTest(_root.nom2)){
Detecta si hi ha contacte entre dos
símbols. La detecció es limita al
quadrat invisible que els envolta.
if (_root.prota.hitTest(_root.pedra)){
Si el protagonista xoca amb la pedra...
If (this.text == “hola”){
Si aquest text conté el missatge “hola”...
Red’s Trident Samuel Esteban Iglesias
28
IES CAN MAS – 2009 - 2010
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)) {
Comprova si la tecla que indiquem
està polsada en aquell mateix
moment.
if (Key.isDown(65)){
Si la tecla que té com a codi 65, que es
correspon a la A està pressionada...
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:
Red’s Trident Samuel Esteban Iglesias
29
IES CAN MAS – 2009 - 2010
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.
Red’s Trident Samuel Esteban Iglesias
30
IES CAN MAS – 2009 - 2010
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] }
Red’s Trident Samuel Esteban Iglesias
31
IES CAN MAS – 2009 - 2010
} } 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;
Red’s Trident Samuel Esteban Iglesias
32
IES CAN MAS – 2009 - 2010
_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
Red’s Trident Samuel Esteban Iglesias
33
IES CAN MAS – 2009 - 2010
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.
}
Red’s Trident Samuel Esteban Iglesias
34
IES CAN MAS – 2009 - 2010
} }
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") {
Red’s Trident Samuel Esteban Iglesias
35
IES CAN MAS – 2009 - 2010
//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") {
Red’s Trident Samuel Esteban Iglesias
36
IES CAN MAS – 2009 - 2010
_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
Red’s Trident Samuel Esteban Iglesias
37
IES CAN MAS – 2009 - 2010
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. }
}
Red’s Trident Samuel Esteban Iglesias
38
IES CAN MAS – 2009 - 2010
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.
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
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).
Red’s Trident Samuel Esteban Iglesias
39
IES CAN MAS – 2009 - 2010
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.
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
d’efecte per tal que el rendiment millori. Problema rendiment
Problema col·lisions
Red’s Trident Samuel Esteban Iglesias
40
IES CAN MAS – 2009 - 2010
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:
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
Quadrat-detector
onClipEvent (enterFrame) {
if (_root.red.hitTest(this)) {
//Codi que fa perdre una vida
}
}
onClipEvent (enterFrame) {
if (_root.red.limite.hitTest(this)) {
//Codi que fa perdre una vida
}
}
- CODI ANTIC - - CODI NOU -
Red’s Trident Samuel Esteban Iglesias
41
IES CAN MAS – 2009 - 2010
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:
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.
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;
}
}
Red’s Trident Samuel Esteban Iglesias
42
IES CAN MAS – 2009 - 2010
3.5 À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
Tempo
En aquest comptador regulem
la velocitat de la cançó.
Controls
Ens permeten aturar,
reproduir la cançó, etc.
Actiu/ No actiu
Balanç Volum
Instrument Pista
Red’s Trident Samuel Esteban Iglesias
43
IES CAN MAS – 2009 - 2010
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ó...).
Red’s Trident Samuel Esteban Iglesias
44
IES CAN MAS – 2009 - 2010
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.
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.
Captura del VST Edirol HQ Orchestral VSTi
Captura del VST Magnus Choir
Captura del VST DSK AsianZ DreamZ
Red’s Trident Samuel Esteban Iglesias
45
IES CAN MAS – 2009 - 2010
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
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.
So campana
Campana tubular
Bateria Sons d’orquestral
Piano Trombó
Conjunt corda spiccato So campana agut
Conjunt corda tremollo Baix elèctric
Composant
Red’s Trident Samuel Esteban Iglesias
46
IES CAN MAS – 2009 - 2010
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.
Red’s Trident Samuel Esteban Iglesias
47
IES CAN MAS – 2009 - 2010
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.
Red’s Trident Samuel Esteban Iglesias
48
IES CAN MAS – 2009 - 2010
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 G M Q C Opinió lliure R
27/10/2009
15:40:52 5 5 Alta Si
mola un huevo! tu amigo del messenger el impaciente XDDDD
3
27/10/2009
15:44:29 4 1 Mitja Si
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 .,.
3
27/10/2009
18:58:40 4 5 Alta Si
Bueno, ahora si Leumas, yo soy Geo, y te pondré todo lo que sé y que opino al respecto... 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
Red’s Trident Samuel Esteban Iglesias
49
IES CAN MAS – 2009 - 2010
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 Esta genial pero hay un error en el segundo checkpoint del segundo mundo, el de las flores, y cuando mueres no vueles a aparecer :(
3
31/10/2009
16:39:29 5 5 Mitja Si
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
2
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 5 5 Alta Si
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. Te has ganado mi respeto ;) Atte.: Tu amigo y seguidor, Arbër.
2
7/11/2009
23:03:01 3 4 Mitja Si Bastante buena por ser una demo. 2
19/11/2009
9:07:33 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
Red’s Trident Samuel Esteban Iglesias
50
IES CAN MAS – 2009 - 2010
20/11/2009
16:45:47 5 4 Mitja Si que bien dibujado! felicidades 3
26/11/2009
17:25:32 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. buenasuerete chabal.
3
3/12/2009
16:50:58 4 1 Mitja No es dificil saltar los precipicios, no e llegado ni al segundo nivell firmado:Silvia
2
3/12/2009
16:55:09 4 4 Mitja No que es bo 2
5/12/2009
16:58:04 5 5 Baixa 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
Red’s Trident Samuel Esteban Iglesias
51
IES CAN MAS – 2009 - 2010
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 º______º
10/12/2009
9:03:22 4 2 Alta No 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.
2
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
10/12/2009
9:12:27 2 1 Mitja No
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
2
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
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
2
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 Si
El juego esta muy bien y la idea es prometedora, sigue asi y conseguiras un juego mucho mejor. Felicidades.
3
Red’s Trident Samuel Esteban Iglesias
52
IES CAN MAS – 2009 - 2010
11/12/2009
23:10:14 5 5 Mitja Si La demo es lo mejor de Red's Trident ke he jugado 3
12/12/2009
23:32:11 4 5 Alta No mola xD 3
27/12/2009
4:52:28 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
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.
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
Adobe Photoshop Edició de gràfics
S
Sony Vegas Muntatge dels vídeos (Tràiler de la demo...)
Tràiler demo
Red’s Trident Samuel Esteban Iglesias
53
IES CAN MAS – 2009 - 2010
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.
Red’s Trident Samuel Esteban Iglesias
54
IES CAN MAS – 2009 - 2010
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.
Red’s Trident Samuel Esteban Iglesias
55
IES CAN MAS – 2009 - 2010
7.- Annexos
Totes les cançons
Dissenyant Ashley
Zona japonesa antiga
Primera fase antiga
Primera fase
Dissenyant 2
Dissenyant 1
Problema rendiment
Tràiler demo
Composant
Personatges
Secció del joc
Navegació pel prat
Comparació FPS
Exemples animació
Animacions Red