PR Narrativa Interactiva

12
PR. NARRATIVA INTERACTIVA GUION DE UN INTERACTIVO MULTIMEDIA Autor: Jorge Juan Ocaña Tallón Tutora: Caterina Ramón Bordoi Fecha: Diciembre 2013

description

PR de la asignatura Narrativa Interactiva del Grado en Multimedia de la UOC

Transcript of PR Narrativa Interactiva

PR. NARRATIVA INTERACTIVA

GUION DE UN INTERACTIVO MULTIMEDIA

Autor: Jorge Juan Ocaña Tallón

Tutora: Caterina Ramón Bordoi

Fecha: Diciembre 2013

Indice 2

En la PAC2 tuvimos que desarrollar una extensión transmedia que cumpliera unos requisitos para ser desarrollada en esta PR. Debía de ser un juego o un producto multimedia, en mi caso, decidí que fuera un juego.

Este juego es la continuación de la trama principal del guion que hicimos en la PAC2. El juego será una mezcla de aventura gráfica y juego de objetos ocultos. Alternará secuencias animadas interacti-vas con fases de objetos ocultos.

Será lanzado en dispositivos móviles y tablets, en estas plataformas: Android, IOS, Windows Phone y Firefox OS. Al ser un producto promocional no tendrá ningún coste para el usuario. El juego con-tiene escenas del film original por lo que habrá escenas de sangre y violencia; la recomendación será de PEGI18. El objetivo de este producto es claramente promocional y va dirigido a un target en concreto, adulto y que haya visto el film.

Aunque, por otra parte, el juego comienza con una cinemática en la que hace un pequeño resumen de los últimos momentos de la vida de Steve y Susan, por lo que cualquier usuario que no haya visto el film podrá jugar sin problemas. Además el juego pertenece al géne-ro policíaco o de investigación; cualquier usuario que le guste este tipo de géneros también podría adquirir el juego.

El juego se compone de 4 niveles, cada nivel se compone de dos fa-ses: una de juego oculto y una secuencia animada interactiva.

Story-line

La historia continúa en la habitación donde se ha cometido el cri-men. Steve sabe que todo apunta a que él ha sido el asesino, pero está dispuesto a descubrir quien fue realmente, antes de que lo arresten y lo acusen, ya que la policía está golpeando la puerta. La trama principal del juego se centra en la búsqueda de pistas por los distintos escenarios hasta dar con el verdadero asesino.

Steve tendrá que ir explorando distintos escenarios por donde el asesino ha pasado y buscar pruebas para poder culparlo. ¿Seremos capaces de encontrar al verdadero asesino antes de que la Policía nos atrape?

1.- Descripción del producto 3

El juego tiene una estructura narrativa propia de un guion de fic-ción, con el esquema típico de introducción, nudo y desenlace, jun-to con el desarrollo del personaje, el objetivo y el conflicto.

El usuario puede interactuar con cada opción que aparece dentro del juego con un simple toque. Los comandos que han sido progra-mados para tablets y móviles son estos: Tap (seleccionar objeto), Spread (Zoom in), Pinch (Zoom out), Drag (mover objeto). El juego solo puede ser jugado en modo horizontal.

El juego tiene tres interfaces claramente diferenciadas: la interfaz de menú/submenú, la interfaz de juego oculto y la interfaz de aventura gráfica.

La interfaz de menú/submenú.

La interfaz de menú aparecerá después de la cinemática de inicio del juego. Este menú nos permite elegir entre 4 opciones: Comen-zar, Opciones, Extras y Salir. En la esquina derecha aparecerá un botón en el que podemos iniciar sesión en Facebook, para seguir nuestra partida desde otro dispositivo o compartir nuestro avance.

Comenzar: Este botón permite comenzar nuestra aventura.

Opciones: Permite acceder a la configuración del juego. Podremos modificar variables como el nivel de brillo, el volumen de sonido, habilitar/deshabilitar sonido, habilitar/deshabilitar notificaciones de redes sociales y el idioma general del juego.

Extras: Aquí podremos ver la puntuación que hemos tenido en las distintas fases del juego, así como acceder a contenido relacionado con el film (enlace al film, reparto de actores, página web, IMdb).

Salir: Terminará la aplicación y nos devolverá al menú principal. Este es el único objeto que requiere confirmación por parte del usuario.

Facebook: Aquí podremos introducir nuestra cuenta de Facebook para guardar nuestros progresos por si queremos jugar desde otro dispositivo o publicar en Facebook nuestros logros en este juego.Dentro de cada submenú aparecerá un nuevo botón en el margen inferior izquierdo con la opción de Atrás, para volver al menú prin-cipal.

La interfaz de juego oculto presenta la estructura típica de estos juegos. La pantalla aparecerá dividida en tres secciones:

1ª sección: Ocupará 1/5 de pantalla, margen izquierdo. Muestra información relacionada con el número de objetos restantes, una cuenta atrás, botón de pausa, botón de pista y botón de menú prin-cipal.

2ª sección: Ocupará 3/5 de pantalla, zona central. Escena inanimada en la que deberemos encontrar los objetos.

3ª sección: Ocupará 1/5 de pantalla, margen derecho. Mostrará una imagen previa de los objetos que debemos encontrar en la escena inanimada.

Al pulsar sobre una zona en la que no se encuentre el objeto que se pide se mostrará una puntuación negativa junto con un sonido de error. Al contrario si el usuario ha acertado (este apartado se am-pliará en el diseño lógico)

2.- Diseño de la interactividad 4

La interfaz de aventura gráfica se compone de una secuencia ani-mada en la que el usuario debe interactuar con la pantalla. Apa-recerá en el margen inferior derecho un botón de acción y cuatro botones que son las flechas de direción. Una señal luminosa irá apa-reciendo en cualquiera de estas cinco opciones y el usuario tendrá que ir apretando en consecuencia para avanzar correctamente en la fase. La secuencia animada es donde se va desarrollando la trama.

Al contener una estructura narrativa la mejor forma para presentar los contenidos es hacerlo de manera secuencial. El usuario no pue-de elegir en qué fase comenzar. El juego dispone de 4 niveles. Cada una de estos niveles tiene dos fases: una de juego oculto y otra de aventura gráfica, siempre en este orden. El juego comienza siempre por la última fase de juego oculto del último nivel que se haya com-pleta. Es decir, si hemos avanzado hasta el segundo nivel y estamos en la secuencia animada interactiva y queremos cerrar el juego para seguir jugando más tarde, cuando volvamos a jugar de nuevo, co-menzaremos en el nivel 2 pero en la fase de juego oculto.

Si conseguimos llegar hasta la última secuencia animada interactiva se mostrará la última cinemática y habremos completado el juego.

Dentro del menú principal la comunicación entre el usuario y la máquina es una comunicación muy estructurada. De esta mane-ra facilitamos la tarea al usuario de configurar el juego a su gusto. Dentro de la fase de juego oculto y animación interactiva la comu-nicación es poco estructurada, para el que usuario investigue y des-cubre el juego.

En las fases de juego oculto, que es donde más dificultad puede en-contrar el usuario, hemos incluido temporalidad, de esta manera, ofreceremos una pista al usuario si ha pasado más de X segundos desde que encontró el último objeto y así facilitar su avance.El juego trata de contar una historia y la mejor manera de hacerlo es facilitando al usuario el avance sobre la misma.

El grado de interactividad de este juego es muy simple. El usuario aprieta el botón correcto y pasa a la siguiente fase. Podríamos decir que tiene una interactividad de primer grado, aunque en las fases de juego oculto por la temporalidad podríamos tener interactividad de segundo grado. El nivel de interacción que ofrece el juego es de Nivel 2, el juego determina lo que el usuario puede o no hacer.

En las fases de carga se mostrará una barra que se irá rellenando hasta completarse. Cuando se complete la barra aparecerá un men-saje para que el usuario pulse sobre la barra y comience el nivel co-rrespondiente. Esta pantalla de carga ofrecerá información relevan-te sobre el juego, es decir, una especie de tutorial para el usuario.

2.- Diseño de la interactividad 5

El modelo de organización de la información presenta una estruc-tura mixta, ya que se combinan elementos de una estructura jerár-quica (menú/submenú y demás elementos que hay dentro de estos) con elementos de una estructura concéntrica (para avanzar a la si-guiente fase debemos de completar primero la actual).

En nuestro juego conviven dos sistemas de navegación. Una nave-gación interna y una navegación externa.

La navegación dentro de nuestro propio juego se considera navega-ción interna, pero a su vez esta está organizada de manera jerárqui-ca, por lo que también es una navegación cerrada, ya que el usuario solo puede ascender y descender por estos niveles que hemos creado. La posibilidad de acceder a contenido complementario mediante el apartado de Extras, ofrece al juego una navegación externa, visua-lizando esta información mediante otra aplicación o accediendo a webs externas en un explorador web.

He distinguido algunas formas como “proceso” y “decisión” con dos colores distintos. El color amarillo representa procesos o de-cisiones internos de programación, en los que el usuario no toma partido directamente. El color azul representa procesos o decisiones en los que el usuario tiene que interactuar.

De por sí, el diagrama es bastante amplio. Así que he optado por no desarrollar los distintos niveles y fases, ya que no son más que simples interacciones que el usuario tiene que hacer en la pantalla. Además en la fase de animación interactiva la secuencia de coman-dos que el usuario tiene que seguir es totalmente aleatoria.

3.- Diseño de la navegación 6

3.- Diseño de la navegación

Este diagrama corresponde a la navegación jerárquica del menú principal y submenús.

7

3.- Diseño de la navegación

Este diagrama corresponde a la navegación con-céntrica del juego.

8

4.- Diseño lógico

Esta aplicación consta de bastantes escenas, aunque muchas de ellas se repiten en cada nivel (fase 1 y fase 2), por lo que a la hora de es-cribirlas he decidido redactar dos escenas generalizadas, una para la fase de juego oculto y otra para la fase de animación interactiva.

A la hora de escribir el menú principal y submenús he tenido pro-blemas ya que en los ejemplos que he podido ver en el libro El guión multimedia de Guillem Bou no hay mucha información sobre esto.

Guillem Bou utiliza comandos como CLIC, ROL, etc. y comporta-mientos como RAT. Mi aplicación está pensada para tablets y mó-viles por lo que he usado comandos específicos para estos (TAP, DRAG, PINCH, SPREAD)

ESCENA 1

Título: Menú_Principal

Descripción textual: La aplicación comienza con una cinemática del asesinato de Susan. Solo se aprecian formas, no se ven detalles ni rostros. La animación acaba alejándose sobre lo que es el objetivo de una cámara de fotos. Al terminar este video aparece el menú principal. Suena música durante todo el tiempo que estemos en el menú. Este menú se asemeja a una escena de crime. En cada evidencia hay un apartado del menu.

AVI: Asesinato_Susan.avi(T)

BMP: Fondo_menu_principal.png

ENTRADA(!)

WAV: Musica_menu_principal.wav

TXT: “Comenzar” (No desaparece)TXT: “Opciones” (No desaparece)TXT: “Extras” (No desaparece)TXT: “Salir” (No desaparece)TXT: “Facebook” (No desaparece)

Zonas sensibles:

1. TAP: Botón “Comenzar” EXE: Comenzar_Juego

2. TAP: Botón “Opciones” EXE: Menu_Opciones

3. TAP: Botón “Extras” EXE: Menu_Extras

4. TAP: Botón “Salir” EXE: Cierra_Aplicación TAP: Botón “Si” EXE: Cerrar TAP: Botón “No” EXE: Menu_Principal

5. TAP: Botón “Facebook” EXE: Inicia_Sesión

ESCENA 2

Título: Menú_Opciones

Descripción textual: El menú opciones del juego. En el podemos modificar el brillo, volumén, idioma, etc... Tiene el mismo formato que el menú principal.Observaciones: el desarrollo de las ejecuciones se halla en el documento anexo “ejecuciones.doc”

BMP: Fondo_menu_opciones.png

ENTRADA(!)

WAV: Musica_menu_opciones.wav

TXT: “Nivel de brillo” (No desaparece)TXT: “Nivel de volumen” (No desaparece)TXT: “Audio On/Off” (No desaparece)TXT: “Idioma” (No desaparece)TXT: “Notifi. Push On/Off” (No desaparece)TXT: “Atrás” (No desaparece)

9

4.- Diseño lógico

Zonas sensibles:

1. DRAG: Botón “Nivel de brillo” EXE: Bajar/Subir_brillo

2. DRAG: Botón “Nivel de volumen” EXE: Bajar/Subir_brillo

3. TAP: Botón “Audio On/Off” EXE: Silenciar

4. TAP: Botón “Idioma” EXE: Elegir_idioma

5. TAP: Botón “Notifi. Push On/Off” EXE: Desactivar_Notifi.

6. TAP: Botón “Atrás”

EXE: Menu_Principal

ESCENA 3

Título: Menú_Extras

Descripción textual: El menú extras muestra una serie de enlaces complementarios para inda-gar mas en la historia del juego y del film. Se asemeja al menú principal.Observaciones: el desarrollo de las ejecuciones se halla en el documento anexo “ejecuciones.doc”

BMP: Fondo_menu_extras.png

ENTRADA(!)

WAV: Musica_menu_extras.wav

TXT: “Puntuación” (No desaparece)TXT: “Película” (No desaparece)TXT: “Actores” (No desaparece)TXT: “Página web” (No desaparece)TXT: “Atrás” (No desaparece)

Zonas sensibles:

1. TAP: Botón “Puntuación” SCO Jugador_Facebook SCO Jugador_No_Facebook TAP: Botón “Atrás” EXE: Menu_Extras

2. TAP: Botón “Película” EXE: “C:\Program Files\Mozilla Firefox\firefox.exe””XXX”

3. TAP: Botón “Actores” EXE: “C:\Program Files\Mozilla Firefox\firefox.exe””XXX”

4. TAP: Botón “Página web oficial” EXE: “C:\Program Files\Mozilla Firefox\firefox.exe””XXX”

5. TAP: Botón “Atrás” EXE: Menu_Principal

ESCENA 4

Titulo: NivelX_FaseX (Corresponde a una fase cualquiera del juego oculto).Observaciones: el desarrollo de las ejecuciones se halla en el documento anexo “ejecuciones.doc”. En el caso de que sea la Fase 1 del Nivel 1 habría que añadir un AVI al principio.

Descripción textual: Fase de juego oculto. El usuario tiene que encontrar los 5 objetos que se muestran en el lateral derecho antes de que se acabe el tiempo. Estos objetos estan escondidos en la escena que aparece en mitad de la pantalla. Hay distintos sonidos para el acierto y el error. También aparecen unos pequeños iconos al lado del objeto que hemos encontrado mos-trando la puntuación.

BMP: Fondo_NivelX_FaseX.png

ENTRADA (!)

WAV: Musica_NivelX_FaseX.wavIDLE: Comprueba$5IDLE: Comprueba_Tiempo

TXT: “Objetos restantes” (No desaparece)EXE: “Contador objetos restantes”

EXE: “Cuenta atrás de 5 min”TXT: “Pausa” (No desaparece)TXT: “Pista” (No desaparece)

10

4.- Diseño lógico

TXT: “Volver al menú” (No desaparece)BMP: Imagen_inanimada_juego_ocultoX.png (P) ICN: Objeto_sobre_imagen1ICN: Objeto_sobre_imagen2ICN: Objeto_sobre_imagen3ICN: Objeto_sobre_imagen4ICN: Objeto_sobre_imagen5ICN: Objeto1ICN: Objeto2ICN: Objeto3ICN: Objeto4ICN: Objeto5

Zonas sensibles:Distinguimos dos tipos de objetos ICN. Unos que están en el margen derecho que no son sen-sibles y otros que aparecen en la imagen inanimada.

1. TAP: Botón “Pausa” EXE: Pausar_juego EXE: Detener_tiempo TEXT: “Continuar” (No desaparece) TAP: Botón “Continuar” EXE: Continuar_juego EXE: Continuar_tiempo

2. TAP: Imagen_inanimada_juego_ocultoX.png (d) ICN: “error.icn” WAV: error.wav (Eso no me servirá) EXE: Resta_tiempo SCO -1 IDLE: Si (SCO=-5) OR (Tiempo=0) -> AVI: “Cinematica_Policia_NivelX.avi”

3. SPREAD: Imagen_inanimada_juego_ocultoX.png EXE: Aumentar_Zoom

3. PINCH: Imagen_inanimada_juego_ocultoX.png EXE: Disminuir_Zoom

5. TAP: Botón “ObjetoX”(!-) ICN: “acierto.icn” BOC: acierto.wav (Puede que me sirva) SCO +1 IDLE: (SI SCO=5) ->EXE: (Siguiente Nivel)

6. TAP: Botón “Volver al menú” EXE: Menu_Principal

ESCENA 5

Titulo: NivelX_FaseX (Corresponde a una fase cualquiera de la animación interactiva).Observaciones: el desarrollo de las ejecuciones se halla en el documento anexo “ejecuciones.doc”. En el caso de que sea la Fase 2 del Nivel 4 habría que añadir un AVI al final.

Descripción textual: Fase de animación interactiva. Aparece una secuencia animada que conti-nua con la trama. En los 5 botones que tenemos disponibles, tendremos que pulsar el correcto para avanzar en la aventura (el botón correcto se verá iluminado).

AVI: Animainterac_FaseX_NivelX.avi

ENTRADA (!)

ICN: FlechaArribaICN: FlechaAbajoICN: FlechaDerechaICN: FlechaIzquierdaICN: BotonAcciónIDLE: CompruebaScore

Zonas sensibles:

1. EXE: Ilumina_Boton

2. TAP: ICN FlechaArriba EXE: Correcto? SCO+1 IDLE: (SI SCO=5) ->EXE: (Siguiente Nivel) IDLE: (SI SCO>=2) -> EXE: AVI: “Cinematica_Policia_NivelX.avi”

2. TAP: ICN FlechaAbajo EXE: Correcto? SCO+1 IDLE: (SI SCO=5) ->EXE: (Siguiente Nivel) IDLE: (SI SCO>=2) -> EXE: AVI: “Cinematica_Policia_NivelX.avi”

2. TAP: ICN FlechaDerecha EXE: Correcto? SCO+1 IDLE: (SI SCO=5) ->EXE: (Siguiente Nivel) IDLE: (SI SCO>=2) -> EXE: AVI: “Cinematica_Policia_NivelX.avi”

11

4.- Diseño lógico

5.- Conclusiones y bibliografía

2. TAP: ICN FlechaIzquierda EXE: Correcto? SCO+1 IDLE: (SI SCO=5) ->EXE: (Siguiente Nivel) IDLE: (SI SCO>=2) -> EXE: AVI: “Cinematica_Policia_NivelX.avi”

2. TAP: ICN BotónAcción EXE: Correcto? SCO+1 IDLE: (SI SCO=5) ->EXE: (Siguiente Nivel) IDLE: (SI SCO>=2) -> EXE: AVI: “Cinematica_Policia_NivelX.avi”

Ha sido una práctica realmente muy interesante, ya que siempre me ha inte-resado el desarrollo de videojuegos. Con esta PR he avanzado un poco mas en ese camino.

Desde un primer momento he creado un juego muy complejo y conforme avanzaba en los distintos apartados he ido confirmándolo. Sobre todo en el diagrama y en el guion técnico.

El guión técnico ha sido realmente un desafío. He encontrado poca informa-ción y sinceramente algunos de los parámetros aquí escritos son propios. La función del guion técnico es ayudar al programador y al guionista a entender-se, y desde esa perspectiva los he creado.

He creado el guion técnico con la herramienta Celtx y he incluido el archivo creado. El diagrama de flujo lo he creado con SmartDraw, también he incluido el archivo para poder verlo con mas detalle.

12Bou, Guillem (1997). El guion multimedia. Barcelona. Ediciones Anaya

Hidalgo Medrano, Oscar (2011). “Guion para un producto multimedia“ [Publica-ción en línea] Revista Digital Mosaic [Fecha de consulta: diciembre de 2013]<http://mosaic.uoc.edu/2011/12/30/guion-para-un-producto-interactivo-multi-media/ >

Gómez Alberti, Jordi (2012). “La aventura de Pedro“ [Publicación en línea] Revis-ta Digital Mosaic [Fecha de consulta: diciembre de 2013]<http://mosaic.uoc.edu/2011/12/30/guion-para-un-producto-interactivo-multi-media/ > SmartDraw. Flowchart Symbols [Fecha de consulta: diciembre de 2013]< http://www.smartdraw.com/specials/flowchart-symbols.htm>

Hernández, Toni (2012). “Adóptame“ [Publicación en línea] Revista Digital Mo-saic [Fecha de consulta: diciembre de 2013]<http://multimedia.uoc.edu/blogs/narrativa/ca/experiencies/adoptame/ >

Cosio, Javier (2012). “Elaboración de un Guion interactivo multimedia“ [Publica-ción en línea] Blog Javier Cosio [Fecha de consulta: diciembre de 2013]<http://javiercosio.blogspot.com.es/2012/06/elaboracion-de-un-guion-interac-tivo.html>

Touchscreen Gestures.< http://www.thinkmoto.de/gestures/>