gamesalad(–juego(de(plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...gamesalad(–juego(de(plataformas((3...

28
GameSalad – Juego de Plataformas Las aplicaciones móviles (Apps) como negocio: los juegos Andrés Carrillo Casanova cincubator.com

Upload: others

Post on 04-Mar-2020

32 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    Las  aplicaciones  móviles  (Apps)  como  negocio:  los  juegos    

 Andrés  Carrillo  Casanova  

cincubator.com      

Page 2: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

Índice  

Taller  Ideas  de  Negocio   2

Índi

ce

1.   GameSalad  –  Juego  de  Plataformas      1.1  Descripción  del  juego.  

 1.2  Creación  de  los  actores.  

 1.3  Posicionar  los  actores  en  la  escena.  

 1.4  Controlando  a  nuestro  personaje.  

 1.5  Condiciones  de  victoria  y  de  pérdida.  

 1.6  Mejorando  nuestro  juego.  

 1.7  Inclusión  de  coleccionables.  

 1.8  Creación  del  menú  principal  y  de  más  niveles.  

Page 3: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

3

Descripción  del  juego.  El  juego  consis:rá  en  controlar  a  nuestro  protagonista  y  hacerlo  llegar  a  la  puerta  de  salida,  deslizándolo  por  dis:ntas  plataformas.    

−   Vamos  a  crear  un  juego  de  plataformas  realmente  simple  uVlizando  GameSalad.  −  Con  GameSalad  crear  juegos  para  disposiVvos  móviles  es  muy  sencillo.  Comprobémoslo.  

!

Page 4: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

4

Creación  de  los  actores  Crear  un  nuevo  proyecto,  especificando  que  será  un  juego  para  iPhone  Landscape  que  llamaremos  PLATAFORMAS  

Sobre   la   pestaña   Scenes   hacemos   doble   clic   sobre   la   escena   Ini(al   Scene   para   entrar  dentro  del  editor  de  escena.  Una  vez  dentro,  seguimos  los  siguientes  pasos:    1.  En  el  Inspector,  hacemos  clic  sobre  el  botón  +  para  crear  un  nuevo  actor.  2.  Hacemos  clic  sobre  el  nombre  del  actor  y  lo  renombramos  a  ‘Jugador’.  3.  Hacemos  doble  clic  sobre  el  actor  para  entrar  en  el  modo  de  edición  de  actor,  y  en  sus  

atributos  buscamos  el  atributo  Size  (tamaño)  para  desplegarlo  y  establecer  los  valores  X  e  Y  a  32.    

4.  Pinchamos  sobre  el  botón  Back  para  volver  al  editor  de  escena,  y  en  la  sección  Library  seleccionamos   la   pestaña   Images   para   luego   hacer   clic   en   el   botón  +   situado   en   la  esquina   inferior   izquierda,   y   seleccionamos   el   fichero   Green-­‐Block.png   que   se  encuentra  entre  en  el  material  proporcionado.  

5.  Pinchamos  sobre  la  imagen  recién  creada  y  la  arrastramos  hasta  el  recuadro  del  actor  que  acabamos  de  crear.  Veremos  cómo  la  imagen  queda  asociada  a  dicho  actor.  

Page 5: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

5

Creación  de  los  actores  TIP:  Arrastrar  imágenes  directamente  desde  la  carpeta  con  gráficos  a  la  zona  Inspector/Actors  o  a  la  Library/Images  

Importamos   dos   imágenes  (actores)   más:     Brick-­‐Wall.png  y    Door.png.    1.  Atributo   Size     (tamaño)  

de   Brick-­‐Wall.png   320  de   ancho   y   32   de   alto  R e n o m b r a r l o   a  ‘Plataforma’.  

2.  Atributo   Size     (tamaño)    de   Door.png   35   de  ancho   por   48   de   alto.  Renombrar  a  ‘Puerta’.  

Page 6: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

6

Posicionar  los  actores  en  la  escena  Una  vez  creado  los  primeros  actores  empezamos  a  posicionarlos  en  la  escena  

1.  Hacemos  clic  en  el  actor   ‘Jugador’   y   lo  arrastramos  dentro  de   la  pantalla.  Hacemos   lo  mismo  con  los  actores  ‘Plataforma’  y  ‘Puerta’,  posicionando  todos  los  elementos  dentro  de  la  escena  como  se  muestra  en  la  siguiente  imagen:    

!

2.  Ahora  mismo  si  pulsamos  el  botón  Play  veremos  que  no  ocurre  nada,  De  momento,   todos   los  elementos  están   estáVcos   porque   no   hemos  incluido  gravedad  en  la  escena.    

3.  Para   ello,   en   Inspector   pinchamos  sobre   la   pestaña   Scene ,   y  desplegamos   el   atributo   Gravity  (gravedad)   para   establecer   el  atributo  Y  a  300    

Page 7: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

7

Posicionar  los  actores  en  la  escena  4.  Si  pulsamos  sobre  el  botón  Play  ahora,  veremos  que  todos   los  elementos  caen  hacia  abajo  hasta  

desaparecer  de  la  escena.  Esto  ocurre  porque  por  defecto  todos  los  actores  están  marcados  como  actores  “móviles”.    

5.  Para   ello   hacemos   doble   clic   en   el   actor   ‘Plataforma’   y   en   sus   atributos   desplegamos   Physics  (lsicas)  y  desmarcamos  el  atributo  Movable  (móvil).  Pinchamos  en  Back  y  repeVmos  el  proceso  con  el  actor  ‘Puerta’.  

6.  Pulsando  ahora  sobre  Play,  veremos  como  nuestro  actor  ‘Jugador’  es  el  único  que  cae  hacia  abajo  hasta  desaparecer,  atravesando  a  la  plataforma.  Esto  sucede  porque  no  le  hemos  dicho  que  debe  colisionar  con  la  plataforma.  Para  conseguir  esto  hacemos  doble  clic  sobre  el  actor  ‘Jugador’  dentro  del  inspector  (no  el  situado  en  la  escena)  para  entrar  en  el  modo  de  edición  de  Actor  ProtoVpo.  

7.  En  la  sección  Library  habiendo  pulsado  la  pestaña  Behaviors,  buscamos  Collide  y  lo  arrastramos  a  la  parte   derecha   del   editor   donde   pone   Drag   your   behaviours   here   para   asociar   dicho  comportamiento  a  nuestro  actor.  En  dicho  comportamiento,  cambiamos  ‘Jugador’  por  ‘Plataforma’  en  el  úlVmo  desplegable:  

!

Page 8: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

8

Posicionar  los  actores  en  la  escena  8.  Pulsamos  Play  para  ver  el  resultado  y  efecVvamente  vemos  cómo  el  actor  ‘Jugador’  ya  

no  traspasa  al  actor  ‘Plataforma’  y  efecVvamente  colisiona  contra  él.    

9.  Pero  para  nuestra  sorpresa,  nuestro  actor   ‘Jugador’  no  solo  colisiona  sino  que  además  rebota  constantemente.  Esto  es  debido  a  que  ambos  actores  Venen  un  factor  de  rebote  establecido  a  1,  es  decir,  al  colisionar  rebota  con  la  misma  fuerza  en  senVdo  contrario,  lo  que  provoca  el  efecto  rebote.  Para  solucionarlo,  hacemos  doble  clic  en  el  actor  ‘Jugador’  del  inspector,  y  cambiamos  le  valor  del  atributo  Physics-­‐-­‐-­‐>Bounciness  a  0.  Hacemos  clic  sobre  Back   y   repeVmos   el  mismo   proceso   sobre   el   actor   ‘Plataforma’.   Pulsamos  Play  para   comprobar   que   ahora   sí   que   el   actor   ‘Jugador’   se   deVene   al   colisionar   contra   la  plataforma.  

Alterna:va:  como  hemos  visto,  nuestra  estrategia  ha  sido  aplicar  gravedad  a  toda  la  escena,  e   indicar   qué   elementos   no   queremos   que   se   muevan   (‘Plataforma’   y   ‘Puerta’).   Otra  solución   alternaVva   podría   haber   sido   no   aplicar   ningún   Vpo   de   gravedad,   y   asignarle   al  actor  ‘Jugador’  un  comportamiento  de  Vpo  Change  Velocity,  con  Direc(on  270,  y  Speed  300.  

Page 9: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

9

Controlando  a  nuestro  personaje  Ahora  que  tenemos  a  nuestro  personaje  descansando  sobre  la  plataforma,  vamos  a  establecer  algunas  reglas  más  para  que  el  jugador  pueda  moverse  a  izquierda  o  a  derecha,  así  como  saltar:    1.  Hacemos  doble  clic   sobre  el  actor   ‘Jugador’  en  el   inspector  y  hacemos  clic   sobre  el  botón  Create  

Group  (crear  grupo)  situado  en  la  parte  superior  derecha.  Hacemos  doble  clic  sobre  el  ptulo  ‘Group’  y  lo  nombramos  como  ‘Controles’.    

2.  Deseleccionamos  el  grupo  recién  creado  y  pulsamos  el  botón  Create  Rule   (crear  regla)  para  crear  una  regla  justo  debajo  del  grupo  anterior.  La  seleccionamos  y  la  arrastramos  dentro  del  grupo  que  habíamos  creado.      

!

3.  Doble  clic  en  el  ptulo  Rule  y  lo  cambiamos  a   Mover   Izquierda.   También   cambiamos  mouse  posiVon  por  key  en  el  desplegable  central   de   la   regla.   Aparecerá   un   botón  llamado  Keyboard    que    pulsaremos    para    que    se    nos  muestre  un  teclado  virtual.  En  él   seleccionaremos   la  flecha   izquierda.  De  esta   forma,   la   regla   se   quedaría   de   esta  forma:    

Page 10: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

10

Controlando  a  nuestro  personaje  En   este   punto   tenemos   una   regla   que   se   acVvará   cada   vez   que   el   usuario   presione   la   tecla   “flecha  izquierda”.  Ahora  únicamente  nos  falta  definir  qué  debe  hacer  el  actor  cuando  esto  suceda.    

1.  Como  lo  que  queremos  hacer  es  que  éste  se  desplace  hacia  la  izquierda,  incorporaremos  a  la  regla  un   behavior   (comportamiento)   del   Vpo   Change   APribute   (cambiar   atributo).   Localizamos   dicho  comportamiento  en  la  librería  de  Behaviors  y  lo  arrastramos  a  la  zona  inferior  de  la  regla,  donde  se  muestra  la  eVqueta  Drag  your  behaviours  here.  Asegúrate  de  que  lo  arrastras  dentro  de  la  regla,  ya  que  de  otra  forma  haríamos  que  el  actor  se  estuviera  moviendo  constantemente,  ya  que  la  regla  es  la  que  controla  cuando  debe  ejecutarse  el  comportamiento.    

2.  En   el   campo   Change   APribute,   pinchamos   en   el   botón   “…”   asociado   al   campo   y   seleccionamos  Jugador.MoVon.Linear.X,  y  en  el  campo  To  lo  establecemos  a  -­‐100    

!

Page 11: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

11

Controlando  a  nuestro  personaje  3.  Esto   hará   que   nuestro   personaje   adquiera   una  

velocidad   de   -­‐100,   es   decir,   el   personaje   se  moverá   hacia   la     izquierda   del   eje   X.   También    queremos     que     cuando   deje   de   pulsarse   la  tecla,   su   velocidad   vuelva   a   ser   0.   Para  conseguir   esto   debemos   desplegar   la   sección  Otherwise   (en   otro   caso)   de   la   regla,   y  arrastramos   el   comportamiento   Change  APribute  a  dicha   sección  manteniendo  pulsada  la   tecla  Alt,  con   lo  que  haremos  que   se   realice  una  copia  del  mismo.  Establecemos  el  valor  To  a  0.       !

4.  Ya   tenemos   la   regla  que  nos  permiVrá  mover  a  nuestro  personaje  a   la   izquierda,  así  que  debemos  repeVr   los   mismos   pasos   para   crear   una   regla   que   asocie   la   tecla   “flecha   derecha”.   Para   ello  seleccionamos   la   regla  Mover   Izquierda,   seleccionamos   Edición-­‐-­‐-­‐>copiar   en   el   menú   superior,   y  posteriormente   en   Edición-­‐-­‐-­‐>pegar.   De   esta   forma   habremos   creado   un   duplicado   de   la   regla  seleccionada.   Ahora   simplemente   debemos   cambiar   el   ptulo   a  Mover   Derecha,   al   pulsar   el   botón  Keyboard  seleccionar  la  tecla  “flecha  derecha”  y  por  úlVmo  cambiar  el  valor  del  campo  To  a  100.    

Page 12: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

12

Controlando  a  nuestro  personaje  8.  Ahora  podremos  hacer  clic  sobre  el  botón  Play  y  ver  el  resultado.  Si  todo  ha  salido  bien,  deberemos  

ser   capaces   de  mover   a   nuestro   actor   ‘Jugador’   de   izquierda   a   derecha.   Pero   si   nos   fijamos,   nos  encontramos   con  otro  problema,  al  desplazar  a  nuestro  personaje   vemos   cómo  este   va  perdiendo  velocidad  progresivamente  hasta  quedar  parado.  Esto  es  debido  a  la  fricción  entre  los  actores,  que  es  otra   de   las   propiedades   lsicas   de   los   actores.   Para   evitar   esto   debemos   editar   tanto   el   actor  ‘Plataforma’  como  ‘Jugador’  y  establecer  el  atributo  Physics  -­‐-­‐-­‐>  Fric(on  a  0.  

9.  Por  úlVmo,  vamos  a  hacer  que  nuestro  personaje  sea  capaz  de  saltar.  Para  ello  creamos  una  nueva  regla  dentro  del  grupo  Controles  que  renombraremos  a  Saltar.  Esta  regla  será  del  Vpo  Actor  receives  |  key  |  space  |    is    down,    y    dentro    de    ella    arrastraremos    un    comportamiento    de    Vpo    Change  APribute  de  la  variable  self.Mo(on.Linear  Velocity.Y  a  200.    

Page 13: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

13

Condiciones  de  victoria  y  de  pérdida  Cuando  se  creó  el  actor  ‘Puerta’,  el  objeVvo  que  Vene  que  realizar  el  usuario  será  alcanzarla  para  completar  el  nivel.  Además,  deberá  evitar  caer  al  vacío  pues  en  ese  caso  se  reiniciará  la  parVda.    Vamos  a  hacer  que  cuando  el   jugador  alcance  la  puerta,  se  muestre  un  texto  indicando  que  ha  vencido,  y  posteriormente  se  reiniciará  la  escena:    1.  En   el   inspector   de   actores,   hacemos  doble   clic   en   el   actor   ‘Jugador’   para   incluir   ciertas  

reglas  lógicas.  

2.  Creamos   una   nueva   regla   que   la   llamaremos   “Victoria”,   a   la   cual   cambiaremos   el   valor  mouse  posi(on  a  overlaps  or  collides,  cambiando  además  el  valor  del  úlVmo  desplegable  y  seleccionaremos  ‘Puerta’.  Así  indicamos  que  la  regla  se  acVvará  cada  vez  que  un  actor  de  Vpo  ‘Jugador’  colisione  con  un  actor  de  Vpo  ‘Puerta’.    

3.  Localizamos  el  comportamiento  Display  Text  de  la  librería  de  Behaviors,  y  lo  arrastramos  a  la   zona   de   comportamientos   de   la   regla.   Cambiamos   el   texto   que   se   muestra   por  ‘¡Victoria!’.  

Page 14: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

14

Condiciones  de  victoria  y  de  pérdida  4.  Ahora   vamos   a   hacer   que   la   escena   se  

reinicie,  para  lo  cual  debemos  hacer  uso  del  comportamiento   Reset   Scene,   pero   para  que  no  lo  haga  instantáneamente  al  tocar  la  puerta,  vamos  a  incluir  un  comportamiento  Timer   (temporizador)   donde   indicaremos  los  segundos  que  se  debe  esperar  antes  de  reiniciar   la   escena.   Localizamos   el  comportamiento   Timer   y   lo   arrastramos  justo   debajo   del   comportamiento   Display  Text   que   acabamos   de   incluir,   pero  asegúrate   de   que   se   incluye   dentro   de   la  regla   ‘Victoria’.   Cambiamos   el   valor   del  temporizador   de  5   a   1   segundo,   Every  por  A_er   y   marcamos   la   opción   Run   to  Comple(on.   Por   úlVmo,   arrastramos   un  comportamiento   de   Vpo   Reset   Scene   a   la  zona  de  comportamientos  del  Timer.    

!Asegúrate  de  que  la  regla  queda  como  en  la  imagen  de  arriba  

5.  Ejecuta  la  escena  pulsando  Play  y  comprueba  que  todo  funciona  correctamente    

Page 15: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

15

Condiciones  de  victoria  y  de  pérdida  Ahora   crearemos   la   segunda  parte,   la   que  nos  hará  que  el   jugador  pierda   si   cae   al   vacío.   En  ese   caso  también  haremos  que  la  escena  se  reinicie.  Sigue  estos  pasos:    1.  Crea  un  nuevo  actor  pinchando  en  el  botón  +  del  inspector  (pestaña  Actors).  Hacemos  clic  sobre  su  

nombre  y  la  renombramos  como  ‘Abismo’.  

2.  Hacemos   doble   clic   sobre   el   cuadrado   del   actor   para   editarlo,   y   establecemos   el   atributo  Width  (dentro  de  Size)  a  480.  También  desacVvamos  el  atributo  movable  para  que  no  le  afecte  la  gravedad.  

!

3.  Volvemos   haciendo   clic   en   Back   y   arrastramos   el  actor   a   una   zona   por   debajo   de   la   instancia   del  actor   ‘Plataforma’,   centrado   en   el   ancho   de   la  escena.  

4.  Ahora   hacemos   doble   clic   sobre   el   actor   Jugador  dentro  del  inspector,  y  lo  editamos  incluyendo  una  nueva  regla.  Esta  la  renombraremos  a  ‘Game  Over’,  y   cambiaremos   mouse   posi(on   por   overlaps   or  collides  seleccionando    posteriormente    el    Vpo    de    actor    ‘Abismo’.    

Page 16: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

16

Condiciones  de  victoria  y  de  pérdida  5.  Ya  solo  nos  queda  reiniciar  la  escena,  para  lo  cual  deberemos  arrastrar  un  comportamiento  de  Vpo  

Reset   Scene  desde   la   librería   de  Behaviors  a   la   zona   de   comportamientos   de   la   regla.   Esta   vez   no  uVlizaremos  ningún  Vpo  de  (mer  ya  que  queremos  que  el  reinicio  se  haga  de  forma  instantánea:  

6.  Si   pulsamos   Play   podremos   ver   si   todo   funciona   correctamente.   Por   úlVmo,   ‘Abismo’   no   debería  mostrarse  ya  que  es  una  mera  zona  de  control  para  ver  cuando  el  Jugador  se  ha  precipitado  al  vacío,  deberíamos  ocultarlo.  Para  hacer  eso  simplemente  debemos  hacer  doble  clic  sobre  el  actor  ‘Abismo’  dentro   del   inspector   para   acceder   a   la   edición   de   sus   atributos,   y   desmarcar   Visible   dentro   de  Graphics.    

Page 17: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

17

Mejorando  nuestro  juego  Completamos  un  poco  más  nuestro  juego  incluyendo  varios  elementos  adicionales.  Por  una  parte,  vamos  a  hacer  el  nivel  algo  más  grande,  y  lograr  que  la  cámara  se  mueva  siguiendo  a  nuestro  personaje.      Además,   incluiremos   unas   antorchas   como   decoración   que   nos   permiVrán   descubrir   los   sistemas   de  parpculas.      Por  úlVmo,  incluiremos  algo  de  sonido  y  música  para  amenizar  las  parVdas  de  nuestro  juego.  Empecemos  haciendo  el  nivel  más  grande  y  que  la  cámara  siga  al  personaje:    1.  En   el   editor   de   escena,   hacemos   clic   en   la   pestaña   Scene   del   inspector,   y   cambiamos   el   atributo  

Width  (dentro  de  Size)  a  1500.  

2.  Colocamos  varias  plataformas  como  mejor  nos  parezcan,  colocando  una  puerta  al  final.  Un  ejemplo  de  distribución  podría  ser  el  siguiente:  

!

Page 18: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

18

Mejorando  nuestro  juego  3.  También  haremos  clic  en  la  instancia  de  actor  ‘Abismo’  y  la  esVraremos  para  que  ocupe  toda  la  zona  

inferior  de  nuestra  escena   (si  no  aciertas  a   seleccionarla,  edita  el  actor  y  vuelve  a  acVvar   la  casilla  Graphics-­‐-­‐-­‐>Visible).    

4.  Si  pulsamos  Play,  veremos  que   la  cámara  permanece  estáVca  y  no  sigue  a  nuestro  personaje.  Para  ello   lo  primero  que  debemos  hacer  es  añadir  a  nuestro  actor   ‘Jugador’  el  comportamiento  Control  Camera,   así   que   hacemos   doble   clic   en   el   actor   situado   en   el   inspector,   y   arrastramos   este  comportamiento  desde  la  librería  de  Behaviors  situándolo  al  final  de  las  reglas  del  personaje.  

!

5.  Si   ejecutamos   ahora,   veremos   efecVvamente   la  cámara  sigue  a  nuestro  personaje,  aunque  vemos  que  no  lo  hace  hasta  que  llega  prácVcamente  al  final  de  la  zona   visible,   cuando   lo   mejor   sería   hacer   que   la  cámara  empiece  a  seguirlo  tan  pronto  alcancemos   la  zona   central.   Para   conseguir   esto  hacemos   clic   en  el  botón  Camera  mode,  y  veremos  cómo  se  nos  muestra  un  marco   amarillo   con   unos   pivotes   en   cada   lateral.  Esta   zona   amarilla   es   la   que   determina   cuando   se  acVva   el   control   de   cámara.   Vamos   a   arrastrar   los  pivotes   hasta   el   centro   para   conseguir   lo   que  buscamos.    

Botón  Camera  mode    

Page 19: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

19

Mejorando  nuestro  juego  Ya   que   nuestro   juego   puede   pecar   de   simplista,   vamos   a   crear   un   elemento   decoraVvo:   antorchas  encendidas.  Este  elemento  nos  servirá  para  descubrir  el  funcionamiento  de  los  sistemas  de  parpculas:    1.  Importa  a  la  librería  de  imágenes  los  ficheros  torch.png  y  par(cle.png  y  arrastramos  la  imagen  torch  

al  inspector  de  actores,  para  crear  un  actor  que  renombraremos  a  ‘Antorcha’.  

2.  Hacemos   doble   clic   sobre   él   y   desmarcamos   el   atributo   Physics-­‐-­‐-­‐>Moveable.   Le   incluimos   un  comportamiento   del   Vpo   Par(cles,   que   renombraremos   a   ‘Llama’.   Los   sistemas   de   parpculas   son  elementos   que   nos   permiVrán   simular   efectos   como   fuego   o   humo,   simplemente   ajustando   los  numerosos  parámetros  con  los  que  cuenta.  Para  conseguir  nuestro  efecto  de  fuego  estableceremos  los  siguientes  parámetros:    

•  Sección  Spawn  Rate  •  Number  of  par(cles:  100  •  Par(cle  Startup  Time:  2  •  Par(cle  Life(me:  4  

•  Sección  Velocity/Posi(on  •  Emiter  Offset:  0  y  8  •  Direc(on:  90  •  Speed:  20  

•  Sección  Size:  •  Size:  15  •  Seleccionamos  Size  changes  to  •  Target  Size:  5  •  Dura(on:  2  

•  Sección  Color:  •  Seleccionamos  un  color  naranja  •  Seleccionamos  Color  changes  to  •  Blending:  Screen  •  Target  Color:  negro  •  Dura(on:  2  

•  Sección  Image:  •  Set  Image  To:  parVcle  

3.  Ahora   solo  debemos   colocar   varios   actores   ‘Antorcha’   en  nuestra  escena  y  podremos   ver   cómo  al  pulsar  Play  se  ‘encenderán’.    

!

Page 20: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

20

Mejorando  nuestro  juego  Para   terminar   de   completar   nuestro   nivel,   vamos   a   incorporar   música   de   fondo,   así   como   un   efecto  sonoro  que  se  oirá  cuando  caigamos  al  abismo:    1.  Lo  primero  que  haremos   será   cargar   los  ficheros  de   sonido.   Seleccionamos  Sounds  en   la   librería   y  

hacemos  clic   sobre  el  botón  +.  Seleccionamos   los  ficheros  music.mp3   y  gameover.wav.  GameSalad  nos   preguntará   el   Vpo   de   fichero   que   se   trata,   si   es   música   o   si   es   un   sonido   (efecto   sonoro).  Indicaremos  que  music.mp3  es  música  (Import  as  Music)  y  que  gameover.wav  es  un  sonido  (Import  as  Sound).  

2.  Para   que   suene   la   música   de   fondo,   haremos   uso   del   comportamiento   Play   Music.   Este  comportamiento  debemos  asociárselo  a  algún  actor  que  sepamos  que  siempre  va  a  estar  presente  en  el  nivel  y  que  no  va  a  ser  destruido  a  la  mitad  del  mismo.  El  candidato  ideal  es  el  actor  ‘Jugador’,  así   que   hacemos   doble   clic   sobre   él   y   le   añadimos   al   final   el   comportamiento   Play   Music,  arrastrándolo  desde  la  librería.  Dentro  del  comportamiento  seleccionaremos  el  fichero  a  reproducir  (music)  y  dejaremos  la  casilla  Loop  marcada  para  la  música  no  pare.    

3.  De  forma  similar,  vamos  a  uVlizar  el  comportamiento  de  Vpo  Play  Sound  para  reproducir  el  efecto  de  sonido  cada  vez  que  caigamos  al  abismo.  En  esta  ocasión,  debemos  asociar  dicho  comportamiento  a  la   regla   “Game   Over”   que   ya   habíamos   creamos   previamente.   Arrastramos   desde   la   librería   y   lo  situamos   bajo   el   comportamiento   “Reset   Scene”   que   ya   poseía   dicha   regla.   El   comportamiento  recién   incorporado   nos   permiVrá   seleccionar   el   fichero   a   reproducir   (gameover),   así   como   ajustar  algunos  parámetros  como  el  volumen  o  el  tono.  

Page 21: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

21

Inclusión  de  coleccionables  Para  completar  las  funcionalidades  de  nuestro  juego,  vamos  a  incluir  monedas  que  el  usuario  tenga   que   recoger.   Además,   incluiremos   un   marcador   con   el   número   de   monedas   que  llevamos  recogidas  hasta  el  momento:    1.  Lo  primero  que   tendremos  que  hacer   será   crear   un  nuevo   atributo  de   juego  en  el   que  

guardaremos  el  valor  del  número  de  monedas  recolectadas  hasta  el  momento.  Para  ello,  dentro   del   inspector   y   teniendo   la   pestaña  Game   seleccionada,   hacemos   clic   sobre   el  botón   APributes,   y   luego   en   el   botón   +   para   crear   un   nuevo   atributo   de   Vpo   integer  (entero)  que  renombraremos  a  “Monedas”  y  dejaremos  inicializado  a  0.    

2.  Importamos   a   la   librería   de   imágenes   la   imagen   graphics/Coin.png,   y   la   arrastramos   al  inspector  para  crear  un  actor  que  renombraremos  a  “Moneda”.    

3.  Editamos  el   actor   “Moneda”   y  desmarcamos  Physics-­‐-­‐-­‐>Moveable.   Además,   incluiremos  una   regla   del   Vpo   Actor   receives   event   |   overlaps   or   collides   |   with   actor   of   type   |  Jugador  .  

Page 22: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

22

Inclusión  de  coleccionables  4.  Arrastramos   dentro   de   la   regla   un  

comportamiento   del   Vpo   Change  APribute,   seleccionando   el   atributo  game.Monedas   y   estableciendo   el  campo   To   a   game.Monedas+1.  Además,   justo   debajo   de     este  comportamiento   incorporaremos  otro  de  Vpo  Destroy  justo  debajo.  

!

5.  Creamos   varias   instancias   del   actor   ‘Moneda’   y  las  colocamos  dispersas  por  la  escena.  Habrá  que  ir  colocándolas  una  a  una.  Si  quieres  ser  preciso  a  la  hora  de  colocarlas,  puedes  haciendo  doble  clic  sobre   cada   una   de   ellas   y   editando   las  propiedades  Posi(on-­‐-­‐-­‐>X  y  Posi(on-­‐-­‐-­‐>Y.    

!

Page 23: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

23

Inclusión  de  coleccionables  6.  Ahora  vamos  a  crear  el  marcador  que  nos  muestre  el  contador  de  monedas.  En  el  inspector  creamos  

un   nuevo   actor   que   renombraremos   a   ‘Marcador’.   Lo     editamos     y     desmarcamos     Physics-­‐-­‐-­‐>Moveable.    Además,    cambiaremos  Color-­‐-­‐-­‐>Alpha  a  0,  para  que  no  se  muestre  el  recuadro  blanco.    

7.  Arrastramos   un   comportamiento   de   Vpo   Display   Text   al   actor   y   establecemos   el   valor   a  game.Monedas.  Tras  esto,  arrastramos  el   actor  a   la  esquina   superior  derecha  dentro  del   recuadro  que  delimita  la  cámara.  

8.  Si   ejecutamos   ahora   nuestra   escena   podremos   comprobar   cómo   nuestro   personaje   puede   ir  recogiendo   las  monedas   y   se   irá   actualizando  el   contador.   El   problema  es   que   según   se  mueve   la  cámara,   el   marcador   también   se   mueve.   Para   solucionar   creamos   otra   capa   (layer)   dentro   de   la  escena,   de   forma   que   podamos   incluir   en   ella   aquellos   elementos   que   conformen   la   interfaz   de  usuario,  como  en  este  caso  sería  el  marcador:  

 

En   el   inspector,   seleccionamos   Scene   y   luego   hacemos   clic   sobre   Layers   (capas).   Únicamente  exisVrá  una  capa  llamada  Background,  así  que  crearemos  otra  haciendo  clic  sobre  el  botón  +  y  renombrándola   a   Interfaz.   Una   vez   creada   desmarcamos   la   casilla   Scrollable  para   indicar   que  dicha   capa   será   estáVca.   Por   úlVmo,   desplegamos   la   capa   Background,   buscamos   el   actor  Marcador  y  lo  arrastramos  a  la  capa  Interfaz.  

9.  Si   ejecutamos   ahora,   veremos   que   hemos   conseguido   que   nuestro  marcador   no   se  mueva   y   nos  muestre  en  todo  momento  el  número  de  monedas  recolectadas    

Page 24: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

24

Creación  del  menú  principal  y  de  más  niveles  Para  terminar  con  esta  prácVca,  vamos  a  crear  un  menú  principal  y  un  segundo  nivel  al  que  accederemos  tras  superar  el  primero:    1.  Hacemos  clic  sobre  Home,  y  en  la  pestaña  Scenes  pulsamos  sobre  el  botón  +  para  incluir  

una  escena  adicional.  Arrastramos  esta  escena  al  principio  para  que  se  sitúe  por  delante  de  nuestro  escena  Ini(al  Scene.  Renombramos  la  escena  recién  creada  a  ‘Menu’.    

2.  Doble  clic  sobre   la  escena  ‘Menu’  y  creamos  un  nuevo  actor  que   llamaremos  ‘Boton’,  el  cual   pondremos   su   atributo   Color-­‐-­‐-­‐>alpha   a   0,   y   le   añadiremos   un   comportamiento  Display  Text  con  el  texto  ‘Empezar  Juego’.  

!

3.  Creamos   una   nueva   regla,   estableciendo  mouse   buPon   en   el   desplegable   central.  Incluimos   a   esta   regla   un   comportamiento  de  Vpo  Change  Scene,  dejándola  establecida  a  Next  Scene.  

4.  Arrastramos  el  actor  ‘Boton’  al  centro  de  la  escena,  y  probamos  que  efecVvamente  al  pulsar  sobre  el  actor,  el  juego  comienza.    

Page 25: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

25

Creación  del  menú  principal  y  de  más  niveles  Ahora  vamos  a  crear  el  segundo  nivel  de  nuestro  juego:    1.  Dentro  de  Home,  creamos  una  nueva  escena  que  llamaremos  ‘Level  2’,  y  hacemos  doble  

clic  sobre  él  para  editarlo  y  hacer  algunos  preparaVvos  previos.    

2.  Volvemos  a   incluir  gravedad  en  la  escena,  estableciendo  Gravity-­‐-­‐-­‐>Y  a  300  dentro  de  la  sección   Scene   del   inspector.   También   pinchamos   sobre   Layers   para   incorporar   la   capa  Interfaz  que  necesitaremos  para  incluir  el  marcador  de  monedas,  desmarcando  Scrollable.  También   volveremos   a   crear   una   instancia   del   marcador   posicionada   en   la   esquina  superior   derecha   (edita   sus   atributos   Posi(on   para   establecer   los   valores   X   e   Y   a   los  mismos  valores  que  la  escena  anterior,  para  que  no  parezca  que  el  marcador  se  “mueve”  entre  escenas.  También  moveremos  este  actor  de  la  capa  Background  a  la  capa  Interfaz.  Por   úlVmo,   acVva   el  modo   cámara   y   ajusta   los   pivotes   al   centro   de   la   escena   como   ya  hiciéramos  en  la  escena  anterior.  

3.  Una   vez   que   hemos   hecho   algunos   ajustes   que   tendremos   que   repeVr   en   todas   las  escenas  según  avance  nuestro  juego,  sería  una  buena  idea  copiar  esta  escena  a  una  que  renombraríamos  como  ‘PlanVlla’,  y  que  podamos  uVlizar  como  base  para  cada  uno  de  los  futuros  niveles  que  necesitáramos  crear.  

Page 26: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

26

Creación  del  menú  principal  y  de  más  niveles  4.  Ahora  solo  tendremos  que  dimensionar  nuestra  escena  al   tamaño  que  queramos  (recuerda  que  se  

realiza  en  el  editor  de  escena:  hacemos  clic  en  la  pestaña  Scene  del  inspector,  y  cambiamos  dentro  de  Size  el  atributo  Width  y  Height  (por  ejemplo  750  de  Width  y  1500  de  Height)  

!

5.  Colocamos   los   elementos   (jugador,  plataforma,  puerta…)  sobre  ella  en  las  posiciones  que  creamos  convenientes.  Por   ejemplo,   puedes   disponer   los  elementos  como   la  pantalla  que  de   la  izquierda.  

6.  Creamos   un   nuevo   actor   desde   el  inspector   que   renombraremos   a  ‘TextoVictoria’,   el   cual   editaremos  para   cambiar   su   atributo   Color-­‐-­‐-­‐>Alpha   a   0,   e   incorporarle   un  comportamiento   de   Vpo   Display   Text  donde   pondremos   el   texto   “’¡Has  vencido!’.   Arrastramos   dicho   actor   al  centro  de  la  escena.    

Page 27: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

GameSalad  –  Juego  de  Plataformas    

27

Creación  del  menú  principal  y  de  más  niveles  7.  Por  úlVmo,  solo  nos  queda   indicar  que,  cada  vez  que  alcancemos  una  puerta,  pasaremos  de  nivel.  

Para   ello   editamos   el   actor   ‘Jugador’   y   localizamos   la   regla   “Victoria”   que   habíamos   creado  previamente.  Eliminamos  el  comportamiento  Reset  Scene  y  le  incluimos  uno  nuevo  del  Vpo  Change  Scene,  dejándolo  establecido  a  Next  Scene.    

Y   hasta   aquí   nuestro   primer   juego   de   plataformas  con   el   que   podremos   pasar   unos   raVtos   muy  diverVdos   cogiendo   las   monedas…   lo   único   que  haría   falta   sería   publicarlo.   Para   elle   en   el   icono  ‘Publish’   accedemos   y   con   la   cuenta  de  GameSalad  podremos   publicarlo   para   Android,   iOS,   HTML5…  pero,   claro  no  nos   lo  permite   si  no   somos  usuarios  registrados  de  pago,  comprender  que  este  magnífico  creador   de   juegos   en   2D   es   gratuito   pero   para  publicarlo  es  cuando  solicitan  el  pago.    Espero  que  haya   sido  producVvo   y  os   animo  a  que  realicéis   vuestros   propios   juegos   y   aprender   otros  nuevos  con  los  tutoriales  existentes.  

Page 28: GameSalad(–Juego(de(Plataformas(comenius.cincubator.com/wp-content/uploads/2013/07/02...GameSalad(–Juego(de(Plataformas((3 Descripcióndeljuego. (Eljuegoconsisráencontrolaranuestroprotagonistayhacerlollegarala

Andrés  Carrillo  Universidad  Politécnica  de  Cartagena  Campus  Muralla  del  Mar,  s/n  30202  Cartagena  

Tel.          +34  968  33  89  40  Fax.          +34  968  32  53  45  E-­‐mail      [email protected]  Twi}er      @CincubatorHUB      @andr3sico  Lista  de  correo    cloud-­‐[email protected]  Www      www.cincubator.com