Caderno Final

Fevereiro 8
“Descobre
a FCSH” 2011
Jogo Digital
Projecto para o Seminário de Atelier de Artes Digitais da FCSH – UNL
Tema: Jogo Digital e Mapa
Interactivo
Índice
1. Resumo do Projecto:
página 1
2. O Quiz:
páginas 2 a 6
3. O Mapa Interactivo:
página 7
4. O Mapa em Realidade Aumentada (RA):

páginas 8 a 9
5. Esboços iniciais imagens e algumas

imagens do projecto:
páginas 10 a 12
6. Alguns prints de código utilizado:

páginas 13 a 18
7. Software Utilizado:
página 19
8. Bibliografia:
página 20
Projecto para o Seminário de
Atelier de Artes Digitais:
Jogo Digital
Capítulo 1: Resumo do Projecto
Nome: “Descobre a FCSH”
Objectivo: Ajudar os recém chegados alunos à Faculdade a orientarem-se nas

instalações escolares tendo em vista a sua melhor integração escolar.
Descrição: O meu projecto da realização de um Jogo Digital consiste em três

elementos base: Um quiz online, um mapa interactivo disponível em quiosques
espalhados pela Faculdade e um mapa em realidade aumentada disponível para
smartphones Android e iPhone.
Como suporte e exibição de todos este itens, temos um website em que exibimos
todos estes elementos:
http://www.descobreafcsh.weebly.com
e um e-mail de contacto para qualquer dúvida ou esclarecimento:
descobreafcsh@gmail.com
1 Capítulo 1: Resumo do Projecto | “Descobre a FCSH”

Capítulo 2: O Quiz
O Quiz é composto por 20 perguntas. E está disponível no website, através de uma

aplicação em Flash criada por mim para o efeito. Para o jogador iniciar a aplicação,
terá de inseriri o seu número de aluno e password, que será envida no princípio do
ano para o seu e-mail. Essa password será criada apartir do seu número de aluno
aplicando uma forma algorítmica complexa, no Excel., fazendo copy paste de todos os
nomes dos alunos, nº de aluno e e-mail, para uma tabela e aplicando sequencialmente
a tal fórmula secreta.
“Descobre a FCSH” | Capítulo 2: O Quiz 2

As regras do jogo:
O Jogo começará no ano lectivo de 2011/2012. Obedece a regras de funcionamento

complexas pois é um jogo online que estará disponível para todos os alunos da
Faculdade em que haverá prémios para os vencedores e participantes. O vencedor
será aquele que terminar o jogo em menos tempo (a contar do princípio da data de
início do jogo (princípio do ano lectivo) até à data de conclusão do jogo pelo aluno com
maior nº de respostas certas. O aluno ao carregar “finish” após responder a todas as
perguntas, enviará para o nosso mail os seus dados: nome, nº de aluno, tempo e
pontuação. No Flash será também criada uma fórmula que dará origem a um sistema
de pontuação que fará a relação tempo/nº de respostas certas, dando origem a uma
determinada pontuação, que será incluída no subject da mensagem de e-mail para
nós enviada através do nosso site. No final do jogo, bastará ordenarmos as perguntas
pelo subject, e teremos, assim, o nosso ranking.
Esses prémios consistem nos seguintes:
1º Lugar: Caixa em metal Survival Kit + Livro em impressão de qualidade de

explicação e ilustração do projecto + T-shirt + 5 Stickers com imagens do projecto
2º Lugar: Livro em impressão de qualidade de explicação e ilustração do

projecto + T-shirt + 5 Stickers com imagens do projecto
3º Lugar: T-shirt + 5 Stickers com imagens do projecto
4º Lugar: 5 Stickers com imagens do projecto

3 Capítulo 2: O Quiz | “Descobre a FCSH”
Todos os lugares restantantes têm acesso a uma página com password no site a
todos os elementos do trabalho.
Perguntas do Quiz:
1. Qual o maior livro, em termos de dimensões, aberto na FCSH?
A: “Os Lusíadas”
B: “Atlas Geográfico do Mundo”
C: Torre B (certo)
2. Quais são os autores do livro com o nº de registo 55581, utilizando a pesquisa simples
dos computadores da biblioteca?
A: Carlinda Leite, Maria de Lurdes Rodrigues? (certo)

B: Catherine Atherton, Malcolm Schofield
C: Jean Rounault, Gabriel Marcel
3. Quantas máquinas de fotocópias estão junto à Secretaria?
A: 3
B: 4 (certo)
C: 5
4. Quanto custa um café na Cantina da FCSH?
A: 0,50 €(certo)
B: 0,55 €
C: 0,60 €
5. Em que edifício da Faculdade se pode aprender Mandarim?
A: Torre A (certo)
B: Torre B
C: Edifício B1
“Descobre a FCSH” |Capítulo 2: O Quiz 4

6. Em que edifício vai decorrer o Mestrado de Novos Media e Práticas Web no ano lectivo
de 2011/2012?
A: Edifício ID
B: Edifício B1
C: Torre A (certo)
7. Em que piso e sala vai decorrer o Seminário de Atelier de Artes Digitais do ano lectivo
2011/2012?
A: Piso 0 / Sala A / Torre A

B: Piso 1 / Sala 102 (certo) / Torre A
C: Piso 2 / Sala 9 / Torre A
8. Quantas cadeiras tem o Anfiteatro onde se realiza o Seminário de Estratégias para o

Audiovisual: A Migração para o Digital?
A: 40 (certo)
B: 50
C: 60
9. Em que edifício se realizam os Doutoramentos na FCSH?
A: Torre A
B: Torre B
C: Edifício ID (certo)
10. Em que edifício podemos realizar investigação na FCSH?
A: Edifício ID (certo)
B: Edifício B1
C: Edifício B2
11. Quantas unidades de investigação há?
A: 4
B: 10
C: 23 (certo)
12. Onde se pode encontrar o Centro de Documentação?
A: Torre B
B: Torre A
C: Edifício ID (certo)
13. Existe uma Mapoteca na Faculdade?
A: Sim (certo)
B: Não, nunca existiu
C: Já existiu, mas de momento não se encontra em funcionamento
5 Capítulo 2: O Quiz | “Descobre a FCSH”

14. Quantos pisos tem o edifício B1?
A: 1
B: 2 (certo)
C: 3
15. Em que edifício se encontra a sala 40?
A: Torre B
B: Edifício B1 (certo)
C: Edifício B2
16. Qual a forma geométrica da base do edifício B1 da FCSH?
A: Um círculo
B: Um rectângulo
C: Um quadrado (certo)
17. Qual o nome do pássaro que deu origem ao nome da Livraria?
A: Andorinha
B: Melro
C: Colibri (certo)
18. Onde se encontra o Laboratório em que os alunos estudam entre outros assuntos, a
rede hidrográfica de Portugal?
A: Torre A
B: Edifício ID
C: Edifício B2 (certo)
19. Quais são as cores predominantes do edifício B2?
A: Branco, verde, azul

B: Laranja, branco, azul (certo)
C: Verde, branco, amarelo
20. Qual a localização do Laboratório Media Digital?
A: Não existe nesta Faculdade

B: Torre B2 (certo)
C: Torre A
Nota: Algumas destas respostas terão de ser aferidas com a realidade do momento
“Descobre a FCSH” |Capítulo 2: O Quiz 6

Capítulo 3: O Mapa interactivo
O Mapa interactivo está disposto também no website, a título de exemplo, mas a ideia
conceptual seria estar disponível em quiosques interactivos espalhados pela
Faculdade (Penso que 4 ou 5 seria suficiente).
Para isso criei uma aplicação também em Flash utilizando animações 3d que
desenvolvi no software de modelação e animação 3d: Blender.
Utilizei um estilo toon shading, de fácil e rápida visualização para as animações.
O utilizador dispõe de um interface onde poderá escolher :
 Curso: Licenciatura, Mestrado ou Doutoramento

 Cadeira
 Disciplina
O sistema operativo dos quiosques será o Linux, para não encarecer o projecto visto
que aplicação em Flash não é muito pesada e corre bem neste SO. Estaria planeado
criar um sistema em que se carregaria no botão power e o pc reiniciaria e correria
automaticamente a aplicação. Para desligar teria-se de desligar o pc carregando na
tecla power.
7 Capítulo 3: O Mapa interactivo | “Descobre a FCSH”

Capítulo 4: O Mapa em Realidade Aumentada (RA)
Utilizei a plataforma junaio, opensource, que para mim é bastante desenvolvida e

adequada a este projecto, e um dos seus criadores foi um dos pioneiros da RA em
todo o mundo.
Esta plataforma permite a criação de canais que são configurados por developers com
as várias coordenadas dos pontos de referência a representar na aplicação. Para isso
criei num servidor um ficheiro php onde inseri as coordenadas tiradas do website
Google Maps, que ao carregar num botão do website do junaio
(http://www.junaio.com) cria automáticamente os pontos de interesse.
Neste caso escolhi as coordenadas retiradas do Googlemaps, a nível de exemplo, das

salas de aula do meu Mestrado: Novos Media e Práticas Web do 1º Semestre e
também da Cantina, Secretaria e um pequeno vídeo dos créditos dos realizadores do
projecto . A cada ponto de interesse associei uma imagem exemplificativa do local em
questão e nos créditos coloquei um pequeno vídeo. Mas poderá desenvolver-se com
mais tempo as coordenadas de todas as salas de aula e pontos de interesse da
Faculdade.
“Descobre a FCSH” | Capítulo 4: O Mapa em Realidade Aumentada (RA) 8

A aplicação poderá ser acedida através do website do projecto através de um
marcador QR ou então acedida pela busca no próprio smartphone.
Esta aplicação estará disponível para Smartphones: Android e iPhone.
9 Capítulo 4: O Mapa em Realidade Aumentada (RA) | “Descobre a FCSH”

Capítulo 5: Esboços iniciais e algumas imagens do
projecto
“Descobre a FCSH” | Capítulo 5: Esboços iniciais e algumas imagens do projecto 10

11 Capítulo 5: Esboços iniciais e algumas imagens do projecto | “Descobre a FCSH”
“Descobre a FCSH” | Capítulo 5: Esboços iniciais e algumas imagens do projecto 12
Capítulo 6: Alguns prints de código utilizado
Aplicações Flash (ActionScript 3.0):

stop();
nivel4a.stop();
nivel4a.stop();
nivel4a.stop();
nivel4a.stop();
nivel4a.stop();
startsplash2.addEventListener(MouseEvent.CLICK, fl_ClickToHide_2);
function fl_ClickToHide_2(event:MouseEvent):void
{
startsplash2.visible = false;
startsplash3.visible = false;
movieClip_4.visible = false;
resposta1.visible = false;
13 Capítulo 6: Alguns prints de código utilizado | “Descobre a FCSH”

nivel0a.visible = false;
p2.visible = false;
p3.visible = false;
p4.visible = false;
p5.visible = false;
p6.visible = false;
p7.visible = false;
p8.visible = false;
p9.visible = false;
p10.visible = false;
mytext1.visible = false;
n0.visible = false;
n1.visible = false;
n2.visible = false;
n3.visible = false;
n4.visible = false;
n5.visible = false;
n6.visible = false;
n7.visible = false;
n8.visible = false;
n9.visible = false;
n10.visible = false;
A0V.visible = false;
“Descobre a FCSH” | Capítulo 6: Alguns prints de código utilizado 14

A1F.visible = false;
B1V.visible = false;
B1F.visible = false;
C1V.visible = false;
C1F.visible = false;

}
startsplash3.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_62);
function fl_ClickToGoToAndStopAtFrame_62(event:MouseEvent):void
{
SoundMixer.stopAll();
gotoAndStop(3);
}
nivel4a.stop();
nivel4a.stop();
nivel4a.stop();
nivel4a.stop();
nivel4a.stop();
stop();
var a:String;
var b:String;
var c:String;
var d:String;
var e:String;
var f:String;
var g:String;
var h:String;
var i:String;
var j:String;
var l:String;
var m:String;
var n:String;
var o:String;
var p:String;
var q:String;
var r:String;
var s:String;
var t:String;
var u:String;
var soma:Number;
movieClip_1.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_1);
function fl_ClickToGoToAndStopAtFrame_1(event:MouseEvent):void
{
mytext1.text = "25";
mytext2.text= "0";
total.text = mytext1.text;
movieClip_4.visible = true;
n1.visible = true;
p2.visible = true;
A0V.visible = true;
a = mytext1.text;
b = mytext2.text;
soma = parseInt(a) + parseInt(b);
soma.toString();
total.text = String(soma);
if(soma == 0) {nivel0a.visible = true;}
if(soma == 25){nivel1a.visible = true;}
}
nivel0a.addEventListener(MouseEvent.CLICK, fl_ClickToHide_4);
{
n0.visible = false;
}
{
n1.visible = false;
}
{
n2.visible = false;
}
{
n3.visible = false;
}
nivel4a.addEventListener(MouseEvent.MOUSE_UP, fl_ClickToHide_8);

{
nivel4a.stop();
nivel4a.gotoAndPlay(461);
}
{
nivel4a.stop();
nivel4a.gotoAndPlay(1);
n4.visible = false;
}
Mapa em RA (PHP):
<?php
/**
* @copyright Copyright 2009 metaio GmbH. All rights reserved.
* @link http://www.metaio.com
* @author Bernhard Heindl
**/
/**
* Here, events from pois, being send with pois/event will be processed.
* The following variables are available:
*
* $_POST['id']...ID of the poi be interacted with
* $_POST['type']...Type of interaction with the POI (click/text)
* $_POST['l']...(optinal) Position of the user when interacting with the POI
* $_POST['uid']... Unique user identifier
* $_POST['data']... (optional) if interaction type text, data may be sent with the interaction
*
*/
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>

<results>
<poi id=\"sala1\" interactionfeedback=\"none\">

<name><![CDATA[Sala 1]]></name>
<description><![CDATA[Atelier de artes Digitais]]></description>

<l>38.740197,-9.152309,0</l>
<o>0,0,0</o>
<mime-type>image/png</mime-type>
<mainresource>http://www.duplexrestelo.com/junaio/html/resources/sala1.jpg</mainresource>
<thumbnail>http://www.duplexrestelo.com/junaio/html/resources/logo1.png</thumbnail>
<icon>http://www.duplexrestelo.com/junaio/html/resources/icon1.png</icon>
</poi>

<description><![CDATA[Práticas Web I]]></description>

<l>38.739929,-9.152405,0</l>
<o>0,0,0</o>
<mainresource>http://www.duplexrestelo.com/junaio/html/resources/sala2.jpg</mainresource>
</poi>

<description><![CDATA[Políticas e Estratégias do Audiovisual: a Migração para o Digital]]></description>

<l>38.7401,-9.152231,0</l>
<o>0,0,0</o>
<mainresource>http://www.duplexrestelo.com/junaio/html/resources/auditorio.jpg</mainresource>
</poi>
<poi id=\"cantina\" interactionfeedback=\"none\">

<name><![CDATA[Bar / Cantina]]></name>
<description><![CDATA[Bar e Cantina da FCSH]]></description>

<l>38.740538,-9.150719,0</l>
<o>0,0,0</o>
<mainresource>http://www.duplexrestelo.com/junaio/html/resources/cantina.jpg</mainresource>
</poi>
<poi id=\"secretaria\" interactionfeedback=\"none\">

<name><![CDATA[Secretaria]]></name>

<description><![CDATA[Secretaria da FCSH]]></description>
<l>38.740302,-9.150742,0</l>
<o>0,0,0</o>
<mainresource>http://www.duplexrestelo.com/junaio/html/resources/secretaria.jpg</mainresource>
</poi>
<poi id=\"madeby\" interactionfeedback=\"none\">

<name><![CDATA[madeby]]></name>
<description><![CDATA[Projecto realizado para um trabalho de grupo do Seminário de Atelier de artes Digitais para o Mestrado de Novos Media e Práticas
Web da FCSH da UNL]]></description>
<l>38.740011,-9.151324,0</l>
<o>0,0,0</o>
<mime-type>video/mp4</mime-type>
<mainresource>http://www.duplexrestelo.com/junaio/html/resources/video.mp4</mainresource>
<thumbnail>http://www.duplexrestelo.com/junaio/html/resources/madeby.png</thumbnail>
<icon>http://www.duplexrestelo.com/junaio/html/resources/madeby.png</icon>
</poi>
</results>";
?>

Capítulo 7: Software utilizado
Modelação, Animação e Renderização 3d:
- Blender 3d
- Octane GPU Renderer
Programação web:
- Macromedia Dreamweaver MX 2004
Aplicações Flash:
- Adobe Flash CS5 Demo
- Macromedia Flash MX 2004
Design Gráfico:
- Macromedia Fireworks MX 2004
- Gimp
Edição de Vídeo:
- Windows Movie Maker
- Handbrake
Utilização geral:
- Internet Explorer
- Microsoft Word 2007
- Microsoft Excel 2007
19 Capítulo 7: Software utilizado | “Descobre a FCSH”

Capítulo 8: Bibliografia
- “Artes e Jogos Digitais – Estética e Design da Experiência Lúdica”

Autor: Patrícia Gouveia
- “Stickers – From Punk Rock to Contemporary Art”

Autores: DB Burkeman, Monica LoCascio
http://mouseland.blogs.ca.ua.pt/
http://www.brincarcomapoesia.net/
http://picturetheimpossible.com/
http://en.wikipedia.org/wiki/Interactive_kiosk
http://www.youtube.com/watch?v=MRn34pmD5ww
http://www.youtube.com/watch?v=JQ6un9p30Uw
http://www.youtube.com/watch?v=qn3Z5H7xe78
http://www.youtube.com/watch?v=tz5E4KVfqDc
http://www.youtube.com/watch?v=-SETcTrdcU4
http://www.youtube.com/watch?v=Kb9-hTjQXRE
http://www.youtube.com/watch?v=O4wXflsoDrY
http://www.youtube.com/watch?v=gHNBS5NJxHk
http://www.youtube.com/watch?v=LHWww8hUp5s
http://www.youtube.com/watch?v=pecf_2fco9o
http://www.youtube.com/watch?v=RjDIzyQdDA8
http://www.youtube.com/watch?v=wtllNS7RzDE&feature=related
“Descobre a FCSH” | Capítulo 8: Bibliografia 20

Trabalho realizado por:
João Miguel Narciso Alves
Nº: 32072
Seminário de Atelier de Arte Digitais (pertencente ao Mestrado de Ciências da

comunicação)
Mestrado de Novos Media e Práticas Web
Faculdade de Ciênciais Sociais e Humanas
Universidade Nova de Lisboa
2010 / 2011

Caderno Final

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Caderno Final

Enviado por

Direitos autorais:

Formatos disponíveis

Fevereiro 8

4. O Mapa em Realidade Aumentada (RA):

5. Esboços iniciais imagens e algumas

6. Alguns prints de código utilizado:

Capítulo 1: Resumo do Projecto

Nome: “Descobre a FCSH”

Objectivo: Ajudar os recém chegados alunos à Faculdade a orientarem-se nas

Descrição: O meu projecto da realização de um Jogo Digital consiste em três

e um e-mail de contacto para qualquer dúvida ou esclarecimento:

1 Capítulo 1: Resumo do Projecto | “Descobre a FCSH”

O Quiz é composto por 20 perguntas. E está disponível no website, através de uma

“Descobre a FCSH” | Capítulo 2: O Quiz 2

O Jogo começará no ano lectivo de 2011/2012. Obedece a regras de funcionamento

Esses prémios consistem nos seguintes:

1º Lugar: Caixa em metal Survival Kit + Livro em impressão de qualidade de

2º Lugar: Livro em impressão de qualidade de explicação e ilustração do

3º Lugar: T-shirt + 5 Stickers com imagens do projecto

4º Lugar: 5 Stickers com imagens do projecto

1. Qual o maior livro, em termos de dimensões, aberto na FCSH?

A: Carlinda Leite, Maria de Lurdes Rodrigues? (certo)

3. Quantas máquinas de fotocópias estão junto à Secretaria?

4. Quanto custa um café na Cantina da FCSH?

5. Em que edifício da Faculdade se pode aprender Mandarim?

“Descobre a FCSH” |Capítulo 2: O Quiz 4

A: Piso 0 / Sala A / Torre A

8. Quantas cadeiras tem o Anfiteatro onde se realiza o Seminário de Estratégias para o

9. Em que edifício se realizam os Doutoramentos na FCSH?

10. Em que edifício podemos realizar investigação na FCSH?

11. Quantas unidades de investigação há?

12. Onde se pode encontrar o Centro de Documentação?

13. Existe uma Mapoteca na Faculdade?

5 Capítulo 2: O Quiz | “Descobre a FCSH”

15. Em que edifício se encontra a sala 40?

16. Qual a forma geométrica da base do edifício B1 da FCSH?

17. Qual o nome do pássaro que deu origem ao nome da Livraria?

19. Quais são as cores predominantes do edifício B2?

A: Branco, verde, azul

20. Qual a localização do Laboratório Media Digital?

A: Não existe nesta Faculdade

“Descobre a FCSH” |Capítulo 2: O Quiz 6

Utilizei um estilo toon shading, de fácil e rápida visualização para as animações.

O utilizador dispõe de um interface onde poderá escolher :

 Curso: Licenciatura, Mestrado ou Doutoramento

7 Capítulo 3: O Mapa interactivo | “Descobre a FCSH”

Utilizei a plataforma junaio, opensource, que para mim é bastante desenvolvida e

Neste caso escolhi as coordenadas retiradas do Googlemaps, a nível de exemplo, das

“Descobre a FCSH” | Capítulo 4: O Mapa em Realidade Aumentada (RA) 8

Esta aplicação estará disponível para Smartphones: Android e iPhone.

9 Capítulo 4: O Mapa em Realidade Aumentada (RA) | “Descobre a FCSH”

“Descobre a FCSH” | Capítulo 5: Esboços iniciais e algumas imagens do projecto 10

Aplicações Flash (ActionScript 3.0):

13 Capítulo 6: Alguns prints de código utilizado | “Descobre a FCSH”

“Descobre a FCSH” | Capítulo 6: Alguns prints de código utilizado 14

15 Capítulo 6: Alguns prints de código utilizado | “Descobre a FCSH”

“Descobre a FCSH” | Capítulo 6: Alguns prints de código utilizado 16

echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>

<poi id=\"sala1\" interactionfeedback=\"none\">

<description><![CDATA[Atelier de artes Digitais]]></description>

<poi id=\"sala2\" interactionfeedback=\"none\">

<description><![CDATA[Práticas Web I]]></description>

<poi id=\"sala3\" interactionfeedback=\"none\">

<description><![CDATA[Políticas e Estratégias do Audiovisual: a Migração para o Digital]]></description>

<poi id=\"cantina\" interactionfeedback=\"none\">

<description><![CDATA[Bar e Cantina da FCSH]]></description>