Professional Documents
Culture Documents
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 manera. El
programa que més vaig utilitzar va ser el Power Point, amb el qual vaig
aconseguir bons resultats, però aquest programa comptava amb moltes
limitacions a l’hora de crear jocs, ja que cal recordar que no es 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 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.
2-Requeriment
L’objectiu d’aquest treball es crear un videojoc des de zero de tipus
plataformes que sigui de qualitat. Una vegada tenim l’idea del que es vol
realitzar s’ha de decidir com es farà:
Per a la creació d’un videojoc d’aquest tipus s’ha 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 orde. Començaré parlant de la programació:
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 a algunes
textures i efectes he utilitzat el “Macromedia Fireworks” i l’“Adove
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 un munt de
funcions, efectes i possibilitats per crear la teva pròpia música.
DIBUIX I GRÀFICS
Totes les eines de dibuix del Flash 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 augmentem la grandària.
Mapa de bits
Dibuix
vectorial
Com a exemple de gràfic podem agafar qualsevol imatge del joc, ja que
totes han sigut fetes amb el Macromedia Flash:
ANIMACIÓ
Quadrixel
1 2 3 4 5 6
Dallyen i Melyan
Orella
Cabell
Orella
Pigues
Braç
Ull
Cara
Serrel
Boca
Cames
Ull
Cap
Braç Cos
iCa
esquerre
esquerra
dret
esquerre
dreta
dret
de
coll
i nas
darrere
sencer
p
BraçBra
Ull
Cella
Mà Ul
Pupil·la
çl
COS
CAP
BRAÇ
MÀ
Software utilitzat
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
Macromedia Fireworks 8 Edició de gràfics
MÚSICA
A més de cuidar l’apartat visual, la música que sonarà durant les diferents
situacions del joc també s’ha de tenir en compte. Totes les cançons que hi
ha han sigut creades amb el FL Studio, 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 programa):
Balanç enFranja
Actiu/
Partitura
Instrument
Volum petit d’instrument
No actiu
Una vegada comentats els elements més bàsics del programa puc posar
diferents exemples de partitures. La que veurem a continuació es la de la
cançó “Cim Nevat” (Zona neu):
CIM NEVAT
LA DEMO
A l’octubre del 2009 vaig penjar una demostració del joc, en la qual 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. Les preguntes que apareixien en
l’enquesta eren les següents:
Les vides. És bastant molest que només que et toquin ja en perdis una. És
millor que puguis xocar amb l'enemic unes quantes vegades abans de
perdre una vida, com als jocs clàsics. He decidit que quan et colpegin el
protagonista, Red, es mogui com si rebés el cop. Per a realitzar això he
hagut d'estudiar el motion tween. Quan un enemic et toca y perds un "cop",
se suposa que 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 facilment indicant les coordenades a les quals vols que es
desplaci, que seria la posició x i y de Red +5 pixels, per exemple. Però el
problema està en que si s'escriu aquest senzill codi, el personatge no es
desplaçarà a la posició esmentada, sinó que es teletransportara. El que
volem es que el personatge es mogui des de (0, 0) [respecte Red] fins a [5,
0] [una mica desplaçat]. Gràcies al motion tween es podrá realitzar aquest
efecte de desplaçament.
Després d'investigar i fer diverses proves:
¡¡BENEIT MOTION TWEEN!! ¡Ho he aconseguit! Ara hauré de crear el
comptador de "cops" i programar la resta d'enemics que tenen el codi antic
que et treia una vida de cop, a veure que tal.
http://www.cristalab.com/tips/animaciones-dinamicas-con-clase-tween-de-
actionscript-2-c48969l/
Problema de les 3D
Solució de les 3D
Aquesta es la captura
original. Com pots
veure, el terreny per on
camina el protagonista
es irregular (forats,
desnivells, etc).
Per tal de fer que la pedra s’aturi en tocar terra he creat uns petits
quadrats que fan que la pedra s’aturi en tocar-los:
Quan el
No sé per quin motiu, a l’hora de provar la fase del desert amb unes
modificacions al diari del esquelet blanc, Flash em dona error. Provaré
a tornar a crear-lo en un nou movieclip.
Per l’efecte del sol del desert que es redueix quan algun objecte
passa per davant seu volia utilitzar un motion tween, per a que la
reducció de tamany quedés més bonica sent progressivament. Però
no sé per quin motiu, quan provo el resultat es el mateix que sense
tween. Misteris del flash...
ERROR!!
Com es pot veure al vídeo, 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
rapida. 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.
Quan vaig acabar de programar aquest enemic per a que pugés sol i
fos capaç d’aturar-se en tocar terra o sostre, de vegades tenia
problemes: no detectava el sòl en el moment que queia, i el que
passava era que continuava caient. El mateix passava a l’hora
d’ascendir.
http://www.freesound.org/
CODI RED FONS 3D PER FOTOGRAMES
onClipEvent (load) {
var grav:Number = 0;
// gravity
var speed:Number = 4;
// how fast you walk
var jumpHeight:Number = 10;
// how high you jump
var slow:Number = .7;
// sets water falling speed
var slowspd:Number = speed/2;
// sets water walking speed
var setspeed:Number = speed;
var scale:Number = _xscale;
var ex:Number = 1;
// makes hitTests better, change for a closer hitTest (warning, more buggy if smalle, less real if
further)
}
onClipEvent (enterFrame) {
if (_root.controlador_tuberia.usando_tub.text == "no") {
grav++;
_y += grav;
while (_root.ground2.hitTest(_x, _y, true)) {
_y--;
grav = 0;
}
if (_root.water.hitTest(_x, _y, true)) {
onClipEvent (load) {
var grav:Number = 0;
onClipEvent (load)// {gravity
var
var grav:Number
speed:Number==0;4;
//
// gravity
how fast you walk
var
var speed:Number
jumpHeight:Number = 4; = 10;
//
// how
how fast
high you
you walk
jump
var
var jumpHeight:Number
slow:Number = .7; = 10;
// sets
// how water
high you jump
falling speed
var
var slow:Number
slowspd:Number = .7;= speed/2;
//
// sets
sets water
water falling
walkingspeed
speed
var setspeed:Number
var slowspd:Number ==speed/2;
speed;
// sets
var water walking
scale:Number speed
= _xscale;
var
var ex:Number = 1; = speed;
setspeed:Number
var
// scale:Number
makes = _xscale;
hitTests better, change for a closer hitTest (warning, more buggy if smalle, less real if
further) var ex:Number = 1;
} // makes hitTests better, change for a closer hitTest (warning, more buggy if smalle, less real if
further)
onClipEvent (enterFrame) {
} if (_root.controlador_tuberia.usando_tub.text == "no") {
onClipEvent (enterFrame) { grav++;
if (_root.controlador_tuberia.usando_tub.text
_y += grav; == "no") {
grav++;
while (_root.ground2.hitTest(_x, _y, true)) {
_y += grav; _y--;
while (_root.ground2.hitTest(_x,
grav = 0; _y, true)) {
} _y--;
grav = 0;
if (_root.water.hitTest(_x, _y, true)) {
}
if (_root.water.hitTest(_x, _y, true)) {