Curso de Informática - Redes e Multimédia

Relatório de estágio de curso

Gil da Ponte Faria, 20132798

Maio, 2017
Curso de Informática - Redes e Multimédia

Relatório de estágio de curso

Gil da Ponte Faria, 20132798

Tutor: Lázaro Raposo
Supervisor: Matthias Funk

Ponta Delgada
Maio, 2017
Agradecimentos

Quero agradecer a todos os professores do curso de Informática-Redes e

Multimédia pela forma como estiveram presentes durante a minha formação,
ajudando-me a evoluir e a crescer nos meus conhecimentos.

Não poderia deixar de agradecer aos membros da empresa onde fiz

estágio pelo seu envolvimento, ajudando-me a refletir sobre aspetos importantes
para a minha formação e por terem conseguido que me sentisse à vontade,
quase como se estivesse no meio do meu grupo de amigos, o que facilitou muito
o trabalho e fez com que tivesse gosto de ir trabalhar. De igual forma aos meus
colegas de estágio. Agradecer individualmente aos membros da empresa: ao
João Barroso, por ter falado comigo antes de escolher a empresa que queria
realizar o estágio para ver de que se tratava o projeto onde acabei por ficar após
ter ido à reunião, ao Dário Bernardo, por muitas vezes ter tido paciência para me
explicar alguns aspetos técnicos e muitas vezes até básicos que me fizeram
avançar e continuar a ter interesse no trabalho que estava a realizar e por fim ao
Sr. Lázaro Raposo, supervisor de estágio, por ter aceitado que a sua empresa
fosse o meu local de estágio e por me ter ensinado a ver que a autocritica muitas
vezes é bem mais importante que a critica das outras pessoas porque só assim
é que nos vamos tornando cada vez mais perfecionista.

Ao meu orientador, Professor Doutor Matthias Funk, que acompanhou

todo o processo para a concretização deste relatório. Agradeço também, desta
forma, aos meus familiares por todo o apoio e contributo para que fosse possível
a frequência no estágio e o encorajamento para conseguir ultrapassar todos os
desafios. Só poderei dizer a todos, um muito obrigada, pois foram uma ajuda
preciosa para a finalização do meu estágio de curso.
Índice
Índice de figuras ................................................................................................. 3
Introdução .......................................................................................................... 4
Descrição da estrutura do relatório .................................................................... 6
Enquadramento do estágio ................................................................................ 7
Local do estágio.............................................................................................. 7
Empresa ......................................................................................................... 7
Objetivo e contexto ............................................................................................. 9
Projeto Global ................................................................................................. 9
Ferramentas usadas ........................................................................................ 11
Aseprite......................................................................................................... 11
Photoshop..................................................................................................... 12
Podio ............................................................................................................ 14
Metodologia e calendarização .......................................................................... 15
Scrum ........................................................................................................... 15
Tempo de trabalho: ....................................................................................... 17
Trabalho desenvolvido (tarefas) ....................................................................... 18
Ferramenta principal: .................................................................................... 18
Ilustração de Banner: .................................................................................... 19
Ilustração de personagens:........................................................................... 21
Desenvolvimento de animações: .................................................................. 27
Ilustração de logotipos: ................................................................................. 30
Realização de Poster: ................................................................................... 32
Trabalho global desenvolvido: ...................................................................... 35
Conclusão ........................................................................................................ 36
Referências Bibliotecárias ................................................................................ 38
Anexos ............................................................................................................. 39
Personagens................................................................................................. 39
Animações: ................................................................................................... 46
Logótipos: ..................................................................................................... 52
 NONAGON QUEST

Índice de figuras
Figura 1 - Logótipo do Edifício Nonagon (ilustrado em Pixel Art) ....................... 7
Figura 2 - Logótipo da Cereal Games (ilustrado em Pixel Art); .......................... 7
Figura 3 - Logótipo do Aseprite ........................................................................ 11
Figura 4 - Logótipo do Photoshop .................................................................... 12
Figura 5 – Logótipo do Podio ........................................................................... 14
Figura 6 – Desenho do Pikachu em Pixel Art ................................................... 18
Figura 7 – Desenho do Super Mario em Pixel Art ............................................ 18
Figura 8 - Exemplos de paletes de cor utilizadas no estágio ........................... 19
Figura 9 – escadas frontais do edifício Nonagon ilustradas em Pixel Ar .......... 19
Figura 10 – Árvore ilustrada em Pixel Art ......................................................... 20
Figura 11 – Banner desenvolvido pelos estagiários da Cereal Games ............ 20
Figura 12 – Exemplos de imagens de inspiração para o avatar do jogo .......... 21
Figura 13 – Primeira versão do avatar do Nonagon Quest .............................. 22
Figura 14 – Segunda versão do avatar do Nonagon Quest ............................. 22
Figura 15 – 3ª, 4ª e 5ª versão do avatar do jogo .............................................. 23
Figura 16 – 6ª versão do avatar do Nonagon Quest (3ª versão mais logótipo) 24
Figura 17 – Robô de costas e de lado .............................................................. 24
Figura 18 – Exemplo de fotos fornecidas para a ilustração da equipa do Nonagon
......................................................................................................................... 25
Figura 19 - Versões do Sr. Lázaro Raposo da Cereal Games ......................... 25
Figura 20 – 1ª e 2ª versão da Dra. Teresa ....................................................... 26
Figura 21 – As primeiras animações feitas ...................................................... 28
Figura 22 – Animação da equipa de segurança de todos os lados. ................. 28
Figura 23 – Animações de elementos da equipa Nonagon .............................. 29
Figura 24 – Exemplos de animações desenvolvidas para quests .................... 29
Figura 25 – Logótipo a SparkyWay .................................................................. 30
Figura 26 - Logótipos da Sata .......................................................................... 31
Figura 27 – 1º Poster desenvolvido versão 1 ................................................... 32
Figura 28 – Poster das Tartarugas Ninja .......................................................... 32
Figura 29 – 2º Poster desenvolvido .................................................................. 33
Figura 30 – Poster do filme Kong ..................................................................... 33
Figura 31 – 1º Poster versão final .................................................................... 34

3
 NONAGON QUEST

Introdução

Parte do 2º semestre do terceiro ano do curso de Informática – Redes e

Multimédia passa pela realização de um estágio de curso obrigatório, este
estágio pode ser realizado numa serie de empresas. Em que, estas empresas
são contactadas pelo diretor de curso, ou podem ser sugeridas pelos estagiários.

Antes de decidir qual a empresa que ia estagiar, através de um contacto

de um dos integrantes da empresa Cereal Games, foi realizada uma reunião em
que me foi apresentado qual o projeto que iria estar inserido caso realiza-se o
estágio nesta mesma empresa.

O projeto designava-se Nonagon Quest (este surgiu após um concurso

ganho pela Cereal Games, em que a empresa apresentou ao Nonagon uma
maneira original de poder dar a conhecer todo o edifício Nonagon,
nomeadamente o Parque de Ciências e Tecnologias de São Miguel, situado na
Lagoa, São Miguel-Açores, inclusive as empresas nele instaladas bem como
informações sobre estas empresas) e consistia no desenvolvimento de um jogo
num estilo gráfico que seria o Pixel Art, em que as tarefas faladas na altura
poderiam ser ilustração de personagens para o jogo, ilustração de logótipos de
empresas, realização de animações para alguns destes mesmos personagens,
tratar da parte da comunicação do jogo (desde ilustração de banners, a posts
destes mesmos banners nas redes sociais com o fim de propagada do jogo), a
ilustração de tiles para o mapa do jogo, entre muitas outras tarefas que iriam
surgindo com o desenvolvimento deste projeto. Esta reunião despertou interesse
em realizar o estágio de curso na Cereal Games, porque para além do pretendido
estar inserido na parte do curso que me suscita maior interesse, que são a
multimédia e o design gráfico, também era interessante na medida em que iria
aprender a trabalhar com uma nova arte o Pixel Art e iria explorar uma nova
ferramenta para este tipo de desenho gráfico, o Aseprite.

O estágio abrangeu diversas fases começando por uma breve

apresentação da empresa através da leitura de documentos fornecidos pelo
orientador da empresa, assim como do Game Design Document, de maneira a
ficar ainda mais estável com os objetivos desse jogo e poder ter um guião para
4
 NONAGON QUEST

orientar o trabalho a realizar neste projeto, outra fase foi a apresentação da

ferramenta que iria ter mais destaque ao longo do desenvolvimento do projeto
em termos gráficos (o Aseprite), da ferramenta que iria ser utilizada para facilitar
o planeamento das tarefas individuais (o Podio), outra foi a elaboração de alguns
desenhos com o Aseprite de modo a explorar esta ferramenta, para que depois
se pudesse iniciar a distribuição de tarefas mais específicas a cada um dos
estagiários que integraram a Cereal Games, para a elaboração do projeto
Nonagon Quest.

5
 NONAGON QUEST

Descrição da estrutura do relatório

O presente está organizado por uma introdução, desenvolvimento ou

corpo do relatório, conclusão, referências bibliográficas e anexos.
Na introdução, inclui-se a caracterização do local de estágio, descrição
do projeto deste relatório de estágio e uma breve reflexão da importância da
sua elaboração, visto que encontra-se mais especificado na conclusão.
No desenvolvimento encontram-se especificada a empresa onde foi
realizado o estágio bem como o local onde esta empresa está inserida, o
objetivo do projeto, bem como uma explicação do mesmo, as ferramentas
utilizadas durante a elaboração deste projeto, a metodologia adotada pela
empresa bem como a calendarização das atividades desenvolvidas, as tarefas
(trabalho desenvolvido no estágio), a quantidade de elementos desenhados e
animados, e por fim o tempo de trabalho, ou seja, o tempo necessário para a
ilustração de cada uma das componentes desenvolvidas.

6
 NONAGON QUEST

Enquadramento do estágio

Local do estágio

Figura 1 - Logótipo do Edifício Nonagon (ilustrado em Pixel Art)

O facto da empresa Cereal Games estar situada no edifício Nonagon

apresentou-se como uma mais-valia para a realização do estágio de curso, visto
ser um parque moderno que abrange diversas empresas todas de certa forma
correlacionadas com a tecnologia no geral. Dai ser o parque de ciências e
tecnologias de São Miguel.

Estar inserido neste edifício, acarreta um conjunto de vantagens, pois a

todo o momento estamos em contacto com diversas pessoas, tanto na “nossa”
empresa como no restante parque, que nos podem transmitir novos
conhecimentos dentro ou fora da nossa área e sem darmos por isso estamos
sempre a aprender e a discutir ideias.

Empresa

Figura 2 - Logótipo da Cereal Games (ilustrado em Pixel Art);

7
 NONAGON QUEST

A Cereal Games é uma start up cujo foco é a Investigação e o

desenvolvimento dos chamados "Serious Games", isto é, jogos que têm um
propósito que vão para além do puro entretenimento, basicamente, o objetivo
desta empresa passa pelo desenvolvimento de jogos cujo fim não seja limitado
ao entretenimento mas sim à aprendizagem e à vivência de novas experiências
através da jogabilidade dos seus jogos, tentando marcar a diferença nestes
pontos.

Esta start up apresenta jogos para dispositivos móveis e desktop, assim

como projetos em Realidade aumentada, Realidade Virtual e Internet of Things.

8
 NONAGON QUEST

Objetivo e contexto

Projeto Global

Desenvolvimento de um jogo:

 Resumo técnico do Jogo

1. Nome do Jogo: “Nonagon Quest”

1.1. Subtítulo: “Diretório de empresas ”
2. Gênero: Serious RPG
3. Categorias: Jogo Informativo, Advergame, Organizacional
4. Target (alvos do jogo): Visitantes do Parque de Ciência e Tecnologia
de S. Miguel
5. Sistema: Windows 10
6. Idiomas: Português
7. Game Designer: Lázaro Raposo

 Conceito do jogo

O objetivo deste jogo, é expor de uma forma diferente, inovadora e

divertida, o funcionamento do Parque de Ciências e Tecnologias de São
Miguel, bem como das empresas que se encontram neste edifício.
Fornecendo aos visitantes, assim como, a todos os colaboradores do
parque entretenimento.

 Género

É um “serious” RPG, onde os visitantes do parque podem assumir o papel

de um avatar e com ele explorar, ganhar informação e conhecer as
instalações, de todo o parque. Sendo que, para tal têm dois modos à
escolha: ou simplesmente explorar o edifício com o avatar ou então

9
 NONAGON QUEST

realizar uma série de quests (missões), que os permitirá não só fazer o

que está disposto no modo anterior como também conhecer as empresas
e os seus representantes como grande parte das pessoas que trabalham
neste local falando com eles (Non Playable Character).

 Look and Feel (estéticas do jogo)

O jogo graficamente baseia-se nas consolas dos anos 80, inícios dos anos
90, ou seja é um jogo que graficamente está desenhado em Pixel Art.
(Pixel Art, é uma forma de arte digital na qual as imagens são criadas ou
editadas tendo como elemento base o pixel)
Há duas representações possíveis para o jogo: 8 bits e 16 bits, sendo que
a base do jogo será de 8 bits de resolução com alguns elementos a 16bits.
O recurso a 16 bits prende-se particularmente com a palete de cores, que
poderá ser limitada se trabalharmos, unicamente com 8 bits.

10
 NONAGON QUEST

Ferramentas usadas

Aseprite

Figura 3 - Logótipo do Aseprite

Esta ferramenta apresentou-se como a mais utilizada ao longo do

desenvolvimento deste projeto, pois foi com este programa que foram
desenhados os requisitos gráficos do jogo, desde personagem, a tiles, passando
também pela parte da comunicação, isto é, a ilustração de banners publicitários
e para comming soon do jogo. Outra parte de extrema importância também
desenvolvida com esta mesma ferramenta foram as animações para o jogo, uma
vez que o programa permite a realização de animações bem como a sua
exportação em Sprite Sheets (Os sprites inicialmente serviam como um método
rápido de animação de várias imagens agrupadas numa tela, em jogos de
computador bidimensionais, usando hardware especifico. À medida que a
desempenho dos computadores melhorou, esta otimização tornou-se
desnecessária e o termo evoluiu para referir-se unicamente às imagens
bidimensionais que eram integradas numa determinada cena, isto é, figuras

11
 NONAGON QUEST

geradas por hardware ou software eram todas referidas como sprites), como o
programa era capaz de realizar essas duas tarefas referidas anteriormente, o
orientador de estágio da Cereal Games, decidiu em conformidade com os
restantes membros da empresa adotar o Aseprite para estas tarefas, após
alguma deliberação visto ser um investimento na licença de uma ferramenta que
serve única e exclusivamente para trabalhos gráficos em Pixel Art.

Photoshop

Figura 4 - Logótipo do Photoshop

O Photoshop é um software denotado como editor de imagens

bidimensionais raster, ou seja, imagens que contêm a descrição de cada pixel.
Esta ferramenta foi desenvolvida pela Adobe Systems. É considerado o melhor
editor de imagem no mercado. E é destacado para edição de imagens digitais e
trabalhos de pré-impressão.

Este programa em comparação com o Aseprite, no que toca às tarefas

realizadas neste estágio em específico, não foi tão relevante uma vez que o facto
do material gráfico ter sido realizado todo em Aseprite, não deixou muito espaço
para outros programas. Mas, apesar disso, o Photoshop não deixou de ser
importante no desenvolvimento do jogo, uma vez que era utilizado para edições
finais e às dar pequenos retoques que eram necessários efetuar após a

12
 NONAGON QUEST

exportação dos componentes em png a partir do Aseprite. Também se mostrou

significativo, em termos de resoluções de imagens, pois muitas vezes os
ficheiros eram exportados do Aseprite em png numa determinada resolução e
era com o Photoshop que eram postos para a resolução pretendida para depois
realizar a sua entrega, por questões de qualidade de perceção de pixel, porque
muitas vezes ao exportar em determinadas resoluções do Aseprite ou ao fazer
resize no Aseprite perdia-se a perceção pretendida que era a de Pixel Art.

13
 NONAGON QUEST

Podio

Figura 5 – Logótipo do Podio

O Podio foi a plataforma adotada pela Cereal Games para o planeamento

do projeto. Através do Podio era possível definir as atividades que eram
necessárias realizar a cada semana por cada um dos estagiários assim como
pelos membros integrantes da empresa, por parte destas pessoas era possível
indicar o andamento das tarefas bem como indicar se estas já tinham sido
realizadas ou não, também era no Podio que eram entregues os produtos finais
dos trabalhos desenvolvidos. E ao mesmo tempo fazia-se o upload para a drive
do Google de maneira a que os elementos do projeto estivessem sempre
assegurados caso acontece algum percalço. Nesta plataforma, mais
especificamente na conta da Cereal Games no projeto Nonagon Quest, também
estavam disponíveis diversos componentes de carácter inspirativo, isto é,
estavam à disposição muitos elementos de consulta para ganhar inspiração
antes de realizarmos qualquer trabalho, desde imagens, a documentos (inclusive
o Game Design Document do jogo), links para jogos em Pixel Art , entre outros
recursos. De certa forma, o Podio também permitia aos estagiários ter uma
orientação em termos de tempo, pois lá estavam agendadas todas as tarefas
realizadas até determinado momento e a partir daquele momento as que
estavam por realizar.

14
 NONAGON QUEST

Metodologia e calendarização

Para estabelecer as tarefas a realizar durante a semana, no início das

mesmas era realizada uma reunião entre o supervisor de estágio e os
estagiários. Através de diagramas de Gantt elaborados pelo supervisor num
quadro visível por todos inclusivo os próprios membros integrantes da Cereal
Games era definido quem iria realizar cada tarefa e os prazos para as realizar,
ou seja, as tarefas eram entregues aos estagiários semanalmente. De modo a
facilitar este planeamento era utilizada uma plataforma, mais uma vez por todos
os elementos que faziam parte da equipa da empresa, designada por Podio.

Nesta plataforma é possível indicar o final de cada tarefa bem como

durante o seu desenvolvimento, o progresso a que se encontra e ainda ganhar
inspiração devia a um separador que tinha por nome “Inspiration Board” e ainda
realizar as entregas correspondentes a cada tarefa no devido separador. Sendo
que a metodologia utilizada no fundo da questão acabava por ser o Scrum.

Scrum
É uma metodologia de trabalho que utiliza uma variedade de ferramentas
no desenvolvimento de um projeto. Apresenta-se como uma forma de planear
projetos onde a autoridade de tomada de decisão é levada a níveis de
propriedade de operação e certeza. Esta metodologia apresenta as seguintes
características:

 Os clientes tornam-se parte da equipe de desenvolvimento;

 São realizadas entregas frequentes e intermediárias com funcionalidades
desenvolvidas na íntegra;
 São desenvolvidos planos pela equipa para diminuição de riscos;
 Diariamente são realizadas reuniões entre a equipa de desenvolvimento
do projeto com a finalidade de perceber a posição em que se encontram.
 Transparência no planeamento e desenvolvimento;
 Realizar reuniões frequentes com as partes interessadas no projeto
(stakeholders) para supervisionar o progresso;

15
 NONAGON QUEST

 Os problemas que forem surgindo não são ignorados e ninguém é

penalizado por reconhecer ou descrever qualquer problema que não
tenha sido visto.

16
 NONAGON QUEST

Tempo de trabalho:

Na grande maioria do desenvolvimento do projeto no que toca às tarefas

a cima descritas, todas elas foram entregues dentro dos prazos previstos, ou
seja, os prazos que estavam presentes na Plataforma Podio correspondentes a
cada tarefa. Salvo alguma exceção, pois às vezes, após a tarefa estar feita surgia
a necessidade de alterar pormenores, como foi o caso das personagens que
após metade delas já estarem realizadas e com a sua tarefa dada por terminada
houve a necessidade de passar os seus strokes faciais de 2px de brush para
1px. Para essas alterações foi despendido tempo mas nunca houve grandes
discrepâncias, uma vez que, ao perder tempo por exemplo no caso referido
acima do stroke das personagens era reposto no desenvolvimento de outras,
pois com o passar do tempo a velocidade de ilustração tanto das personagens,
como dos logótipos e das animações ia aumentando.

Tarefas Tempo de Ferramentas Fator

desenvolvimento utilizadas condicionante de
tempo
Desenho de Inicialmente uma por Aseprite Desenho de certas
personagens (frente ½ dia, com o tempo 3 roupas
e costas) ou 4 personagens por nomeadamente
dia, dependendo do casacos
tipo de roupa
Animações de Inicialmente 2 dias, Aseprite
personagens a andar com o decorrer do
(frente e costas) tempo 1 dia por
animação
Desenho e animação Inicialmente 1 dia, Aseprite Desenho dos
de personagens de sendo que depois personagens de lado
lado passou a ser
necessário só ½ dia.
Ilustração de 1 dia por logótipo Aseprite e Photoshop Perceção do Pixel Art
logótipos inicialmente, com o devido ao tamanho
decorrer do tempo ½ final que o logótipo
dia por logótipo. deveria ter ao ser
posto no jogo
Ilustração de Poster Foram realizados Aseprite e Photoshop
dois Poster para dar
a escolher, sendo
desenvolvidos 1 por 1
dia e ½
*1 dia de estágio: aproximadamente 3/4 horas, devido a ser só de manhã ou só
de tarde.

17
 NONAGON QUEST

Trabalho desenvolvido (tarefas)

Ferramenta principal:
Como primeira tarefa, foi proposto pelo tutor de estágio aos estagiários
que ilustrassem alguns desenhos em Pixel Art, na ferramenta Aseprite, de modo
a explorarem este software com uma maior precisão. O objetivo desta tarefa era
basicamente fazer com que se familiarizassem com a ferramenta para que
depois houvesse uma distribuição mais específica de tarefas entre eles.

Deste modo os desenhos que foram desenvolvidos foram os seguintes:

Figura 6 – Desenho do Pikachu em Pixel Art Figura 7 – Desenho do Super Mario em Pixel Art

Estes desenhos foram elaborados tento como base estas mesmas

imagens da internet. Com isto, foi possível perceber como trabalhar com brush
(pincel e tamanho de pincel), resize (tamanhos de imagem, e o que poderia
acontecer caso se altera-se o tamanho das imagens com o resize), como
trabalhar com a grid (estrutura geométrica formada por eixos (horizontais e
verticais) desenvolvida para auxiliar o alinhamento de elementos numa
composição visual) e qual o tamanho mais adequado para a grid nos desenhos
em questão para que não se perdesse o efeito pretendido que era o de Pixel Art,
e por fim aprender a usar o canvas (o tamanho da tela onde se irá realizar os
desenhos), assim como ter o primeiro contacto com paletes de cor. Para este
ultimo, o designer gráfico da Cereal Games, apresentou um site (Adobe Color
CC), neste site pode-se especificar as cores ou a cor pretendida e são
apresentadas diversas paletes de cor à escolha.

18
 NONAGON QUEST

Por exemplo:

Figura 8 - Exemplos de paletes de cor utilizadas no estágio

Ilustração de Banner:
Depois da ferramenta mais importante para o desenvolvimento gráfico do
jogo ter sido explorada, foi atribuída uma tarefa aos estagiários, nomeadamente,
a elaboração de um banner publicitário para “comming soon” do Nonagon Qest.

O objetivo era realizar um banner que não especificasse com muita

precisão o que seria o jogo na realidade, daria para perceber que seria um jogo
desenvolvido em Pixel Art e que seria relacionado com o edifício Nonagon, uma
vez que, no banner iria aparecer a fachada do edifício Nonagon com um por do
sol por trás, com um lettering em Pixel Art em primeiro plano.

Os três estagiários começaram por tirar umas fotografias à fachada do

edifício em diferentes perspetivas para servir de referencia à ilustração do
edifício em Pixel Art e após selecionar a fotografia que mais se adequada ao
pretendido começaram a ilustrar o edifício. Após a seleção, de entre as três
ilustrações realizadas (visto serem três estagiários, ou seja, existiam três
ilustrações à escolha), ser escolhida pelo supervisor de estágio, foram
distribuídas novas tarefas dentro da tarefa principal, que era o desenvolvimento
do banner. Sendo que, ficou uma pessoa responsável pela continuação do
desenho do edifício nomeadamente em relação a gradientes para efeitos de
sombra, outra pela ilustração do por do sol por trás do edifício, e outra (que ´foi
o caso deste estágio de curso) pelo desenvolvimento das escadas e das árvores
na parte da frente do edifício.

Figura 9 – escadas frontais do edifício Nonagon ilustradas em Pixel Ar

19
 NONAGON QUEST

Figura 10 – Árvore ilustrada em Pixel Art

O produto final ficou da seguinte maneira:

Figura 11 – Banner desenvolvido pelos estagiários da Cereal Games

Após a realização do banner, surgiu a necessidade da distribuição de

tarefas mais específicas por parte do supervisor, porque uma vez que o banner
estava terminado havia a necessidade de atribuir a tarefa da parte da
comunicação do jogo a alguém. Então surgiram três tarefas, a ilustração de tiles
(para os mapas do jogo, no cas deste jogo em especifico, para o interior do

20
 NONAGON QUEST

parque Nonagon), assim como a ilustração de todas as personagens que iriam

fazer parte deste jogo, e por último como já referido alguém para trabalhar na
parte da comunicação do jogo (nas redes sociais).

Ilustração de personagens:

Nesta parte vai ser especificado todo o processo por trás do

desenvolvimento das personagens para este jogo visto ter sido uma tarefa de
grande importância na realização do estágio em questão.

A primeira personagem a ser desenvolvida foi o avatar do jogo, por outras

palavras, a personagem que qualquer visitante do parque iria encarnar caso
joga-se o Nonagon Quest. Para tal e visto ser uma fase primário no desenho de
personagem neste tipo de arte, foi necessário ganhar inspiração em trabalhos já
desenvolvidos presentes na internet bem como alguns presentes no Podio,
nomeadamente, imagens de robôs, porque o avatar iria ser um robô.

Figura 12 – Exemplos de imagens de inspiração para o avatar do jogo

21
 NONAGON QUEST

Ao fim de algumas pesquisas, foi necessário esclarecer com os

programadores qual o canvas a ser utilizado para a ilustração desta personagem
e das que se seguiriam (50x50) por questões de escala em relação aos restantes
elementos gráficos do jogo, assim como o tamanho do brush que iria ser utilizado
para que fosse adotado a todas as personagens que se iriam seguir ao avatar,
para que o estilo de umas personagens para outras não tivessem discrepâncias
significativas, então ficou registado que o brush a utilizar seria de 2px (na maioria
das vezes para stroke, isto é, o contorno das personagens) e de 1 pixel para
pormenores mais específicos (para stroke facial e para ornamentos da
indumentária). O robô começou a ser ilustrado sendo que o primeiro ressultado
(primeira versão) foi a seguinte:

Figura 13 – Primeira versão do avatar do Nonagon Quest

Esta versão não foi aprovada, visto ainda não ser o pretendido e surgiu
uma nova versão:

Figura 14 – Segunda versão do avatar do Nonagon Quest

A segunda versão foi aprovada pelo supervisor, sendo que foi exigido a
adição de uma antena ao robô. Para tal teve-se de alterar o canvas desta

22
 NONAGON QUEST

personagem em particular, passou de 50x50px para 80x80px e surgiram três

novas versões em simultâneo.

Figura 15 – 3ª, 4ª e 5ª versão do avatar do jogo

O escolhido foi o primeiro, e foi pedido a inclusão do logótipo do Nonagon

no “tronco” do robô, com isto surgiu o primeiro contacto com a ilustração de um
logótipo em Pixel Art. Visto, ser a primeira vez em contacto com o desenho de
um logótipo nesta arte, foi crucial a assistência do designer da Cereal Games.
Para este trabalho o Photoshop foi essencial para alterar tamanhos de imagens
de maneiras a não perder a perceção de Pixel Art, pois o logótipo iria estar muito
pequeno no tronco do robô. Por outras palavras, o logótipo foi ilustrado em Pixel
Art no Aseprite tendo como base o png do logótipo original e com um tamanho
de grid e de canvas adequado para que depois quando se realiza-se a
exportação para alterar o seu tamanho no Photoshop, de modo a coloca-lo no
robô depois em Aseprite novamente, ele não perder a perceção pretendida, a de
Pixel Art. Pois não era possível ilustrar o logótipo diretamente no robô, porque
este tinha um canvas de 80x80px (relativamente pequeno), por isso foi
necessário recorrer ao Photoshop para fazer um resize mais preciso do logótipo
sem perder o efeito de Pixel Art.

23
 NONAGON QUEST

Figura 16 – 6ª versão do avatar do Nonagon Quest (3ª versão mais logótipo)

Em seguida, foi pedido o desenvolvimento do desenho do robô de costas

e de lado.

Figura 17 – Robô de costas e de lado

Na figura 27 estão ilustradas: a primeira e única versão do robô de costas,

no meio a primeira versão do robô de lado (não aprovada) e por fim segunda
versão do robô de lado aprovada (após testes já no mapa de jogo)

Terminada a tarefa de ilustrar o avatar do jogo, o supervisor começou a

fornecer fotografias no Podio, todos os dias, das personagens que seria
necessário realizar ilustrações (frente e costas, sendo que algumas teriam quie
ser realizadas de lado) bem como especificações da indumentaria de algumas
personagens, pois algumas personagens, tinham roupas características que ao
fim ao cabe ajudariam a identificá-las. As restantes personagens que não era
fornecida informação sobre a roupa, estas eram produto da imaginação.

24
 NONAGON QUEST

Figura 18 – Exemplo de fotos fornecidas para a ilustração da equipa do Nonagon

O canvas para todas as personagens realizadas a seguir ao robô foi de

50x50px:

 Cereal Games (equipa e estagiários):

Figura 19 - Versões do Sr. Lázaro Raposo da Cereal Games

Para o Sr. Lázaro Raposo, ilustrado na figura 19, foram necessários

quatro desenhos, ou seja, ele teve quatro versões, a aprovada foi a quarta
versão, por isso é a única que tem a personagem ilustrada de costas, como é
visível na figura.

25
 NONAGON QUEST

 Equipa Nonagon:

Figura 20 – 1ª e 2ª versão da Dra. Teresa

A versão selecionada pelo orientador de estágio para a administradora do

Parque Nonagon acima ilustrada foi a segunda versão, devido ao tamanho do
pixel utilizado (1px) tanto no stroke do cabelo como no facial.

Nota: As restantes personagens das equipas da Cereal Games e da Nonagon

encontram-se em anexo no final do relatório, assim como das restantes
empresas que não as em baixo destacadas.

 Atelier:

 Connexall:

26
 NONAGON QUEST

Desenvolvimento de animações:

Chegado o fim da ilustração de personagens surgiu uma nova tarefa: a

realização de animações de alguns personagens a andar de frente, de costas e
de lado, e é este ultimo que se mostrou mais problemático visto que os desenhos
de frente e de costas já estavam feitos para facilitar as animações mas desenhos
de personagens de lado ainda não tinham sido feitos, logo foi uma nova
dificuldade que apareceu mas com a ajuda da equipa da Cerel Games e com a
inspiração adquirida recorrendo à Internet, esta barreira foi ultrapassada.

Para além disso, e numa fase mais adiantada do estágio, também voltou
a surgir uma tarefa relacionada novamente com animações, particularmente
animações de personagens para serem introduzidas nas quests do jogo. Visto
este ser o tópico do desenvolvimento de animações, faz todo o sentido
parecerem aqui as animações realizadas, apesar de, numa fase mais terminal
do estágio, para as quests. Pois até o momento, as tarefas estavam sendo
descritas por ordem de surgimento.

A seguir vão ser apresentadas as animações em sprite sheets:

27
 NONAGON QUEST

Figura 21 – As primeiras animações feitas

As primeiras animação feitas para o jogo do Nonagon quest e que foram

aprovadas após o seu fim foram as do robô, o avatar do jogo, a andar em todos
os lados, a selecionada do robô a andar de lado foi a última da Figura 21.

Figura 22 – Animação da equipa de segurança de todos os lados.

28
 NONAGON QUEST

Figura 23 – Animações de elementos da equipa Nonagon

Os elementos da equipa Nonagon que foram ilustrados em animações

alguns foram animados só de lado, outros só frente e verso e alguns em todos
lados. As restantes animações da equipa Nonagon encontram-se em Anexo, no
final do relatório.

Figura 24 – Exemplos de animações desenvolvidas para quests

No que toca às animações para as quests do jogo, foram desenvolvidas

algumas de personagens de diversas empresas a escorregar de frente, de lado
e de costas e por fim um membro da equipa de limpeza a esfregar o chão e um
elemento da equipa Nonagon admirado.
Nota: As restantes animações para quests encontram-se em Anexo, no
final do relatório.

29
 NONAGON QUEST

Ilustração de logotipos:

Outra tarefa de grande escala que surgiu, foi a ilustração de logótipos das
diferentes empresas do edifício Nonagon, e o do próprio edifício Nonagon em
Pixel Art, embora o do Nonagon já estivesse ilustrado só era preciso alterar a
escala e fazer o lettering. Estes logótipos iriam aparecer no espaço de cada
empresa no mapa do jogo. Inicialmente surgiram alguns problemas em encontrar
o canvas adequado, bem como a grid, pois o canvas dependia muitas vezes do
png fornecido do logótipo original de cada empresa, até que se chegou à
conclusão que a grid a utilizar, para que o estilo Pixel Art continua-se percetível
após realizar resize com o Photoshop, seria de 48x48px. Em relação ao canvas,
variava de acordo com os logótipos.

De modo a facilitar o trabalho, após a ilustração num canvas relativamente

grande pois os números que variava estavam sempre na casa dos milhares,
depois era realizado o resize no Photoshop para uma escala de 800x(um valor
que dependia do canvas do Aseprite, normalmente 167, 267 ou 367)px.

Houve a necessidade de após certos logótipos estarem desenvolvidos,

passar o lettering para cor branca, uma vez que, ao colocar-se o logótipo no
mapa de jogo devido às cores dos tiles não se percebia o lettering, por este
motivo irão aparecer a seguir alguns logótipos com o fundo preto:

Figura 25 – Logótipo a SparkyWay

A SparkyWay inicialmente forneceu o logótipo da esquerda (na figura 25)

mas depois alteraram o seu logótipo para o da esquerda daí a estarem ilustrados
dois logótipos da mesma empresa. Inicialmente fez-se um depois alterou-se.

30
 NONAGON QUEST

Figura 26 - Logótipos da Sata

Os dois Logótipos da Sata a cima estão aqui a ser apresentados para

mostrar o problema que surgiu com a grid no início das ilustrações, o da
esquerda está desenhado com uma grid mais pequena logo a esta escala dá
menos a perceção do pixel do que o da direita.

Nota: Encontram-se todos os logos desenvolvidos, salvo os acima, em

Anexo no final do relatório.

31
 NONAGON QUEST

Realização de Poster:

Surgiu a ideia de realizar um ArtBook do jogo, basicamente um livro com

todo o desenvolvimento gráfico do jogo, desde paletes de cor a desenhos no
papel, passando para os desenhos em Aseprite incluindo as diversas versões de
tudo o que foi desenvolvido. Como inspiração estava à disposição no Podio
inúmeros ArtBooks de outros jogos para ganhar inspiração e transformar os
conceitos adquiridos nestes ArtBooks num ArtBook do Nonagon Quest onde o
elemento predominante seria o Pixel Art.

Mais uma vez foram distribuídas tarefas pelo orientador dentro da tarefa
principal, e para este estágio em específico, ficou definido a ilustração de um
Poster para introduzir tanto no ArtBook do Nonagon Quest como, mesmo como
o nome indica, servir como Poster para o jogo. Foram desenvolvidos dois poster
para dar à escolha, que se encontram nas imagens abaixo.

Figura 27 – 1º Poster desenvolvido versão 1 Figura 28 – Poster das Tartarugas Ninja

Para o Poster da Figura 27, a inspiração veio de alguns posters na

Internet, mas a ideia final veio do poster que está sendo apresentado na Figura

32
 NONAGON QUEST

28. Basicamente foi aproveitado o planeta por trás do robô que tinha sido
desenvolvido pelo designer da empresa, bem como o robô e as restantes
personagens que já tinham sido desenvolvidos anteriormente. Só foi preciso daR
uns ajustes de cor no Photoshop, alterar tamanhos e, por fim montar tudo.

Figura 29 – 2º Poster desenvolvido

Para o Poster da figura 28, toda a inspiração veio do Poster do filme Kong,
retirado da Internet a seguir a algumas pesquisas de outros Poster de outros
filmes, que está representado na figura 29.

Figura 30 – Poster do filme Kong

Para este Poster o Photoshop foi essencial para trabalhar com as cores,
mais especificamente com os gradientes das personagens. Muito material foi
aproveitado do banner para “comming soon” do jogo que foi desenvolvido no

33
 NONAGON QUEST

inicio do estágio, porque já tinha um pôr do sol ilustrado em Pixel Art assim como
o edifício Nonagon com os contrastes de cores do pôr de sol. Mais uma vez
foram aproveitadas as personagens que já tinham sido desenvolvidas só foi
necessário alterar algumas pormenores como por exemplos as expressões
faciais dos seguranças e do Sr. David da equipa de limpeza, alterar a posição da
esfregona na mão dele, por uns óculos de sol no Sr. Lázaro (supervisor de
estágio) e por fim alterar os tamanhos das personagens.

Figura 31 – 1º Poster versão final

Na Figura 28 está representado o primeiro Poster desenvolvido na sua

versão final (2ª versão), embora esteja de acordo com o que foi pedido, pelo
supervisor, para alterar em relação à primeira versão, não foi aceite. Pois após
passar do Aseprite para Phtoshop para alterar o modo de cor de RGB para
CMYK, uma vez que, futuramente o Poster iria ser impresso, as cores do Poster,
mais especificamente a cor de fundo e a cor da boca e dos olhos do robô. Apesar
de serem pormenores relativamente fáceis de alterar o supervisor decidiu dar
prioridade a outras tarefas que não ao Poster.

34
 NONAGON QUEST

Trabalho global desenvolvido:

Num total foram desenvolvidas (os):

 43 ilustrações de personagens de frente (não incluindo as diferentes

versões de determinadas personagens);
 41 ilustrações de personagens de costas (não incluindo as diferentes
versões de determinadas personagens);
 13 ilustrações de personagens de lado costas (não incluindo as diferentes
versões de determinadas personagens);
 42 animações;
 20 Logótipos (incluindo o logótipo que foi necessário fazer do Nonagon
inicialmente para incluir no tronco do robô).

35
 NONAGON QUEST

Conclusão

Terminado o estágio e por consequente quase terminada a licenciatura

acho que, quase inconscientemente, vem-nos à cabeça todo o progresso até
este momento, lembro-me de no início quando entrei para o curso de Informática
- Redes e Multimédia ainda não tinha muito bem a noção que este seria o curso
que queria para o resto da minha vida. Com o passar dos anos apercebi-me que
esta era uma área que me cativava cada vez mais, apesar de sempre me ter
considerado um aluno das matemáticas e das ciências. Com o tempo também
ganhei a noção que esta é uma área extremamente ligada à minha área preferida
que é a matemática e foi isto que impulsionou de certa forma a minha
permanência no curso.
O estágio ajudou-me a entender outro dilema que tinha, nomeadamente
de entre as vertentes que o curso abrange saber a que mais me situava. Embora
no verão anterior já tivesse realizado o Estágio U, na área do design gráfico, foi
depois de realizar o estágio de curso na cereal games que ficou vincado na
minha cabeça que esta será a área que pretendo trabalhar num futuro, que
espero próximo e quem sabe talvez adquirir mais formação nesta área do que
aquela que tenho neste momento. Apesar de todas as componentes teóricas
aprendidas ao longo do curso foi no estágio que tomei consciência da realidade
da prática, e da importância desta teoria. Foi na prática que apercebi-me que ele
é indispensável para consciencializar-me da realidade, adquirir conhecimentos
e desenvolver competências, ou seja, com isto pretendo dizer que o estágio foi
o método mais eficaz sem dúvida alguma que o curso “arranjou” para nos ajudar
a construir ou a começar a construir a nossa identidade profissional.
Apesar de no projeto em que estava inserido ter trabalhado
maioritariamente com a ferramenta Aseprite, aprendi muitos pormenores que
tenho a certeza que futuramente irão ser uma mais-valia. Tais como, aprender a
trabalhar com grid e canvas, com resoluções, com paletes de cor, a importância
da pesquisa antes de meter “as mãos na massa”, a autocritica, o trabalho em
grupo num contexto profissional, ter um patrão (neste caso o supervisor de
estágio), ter tarefas a cumprir diariamente, isto é, ter prazos a cumprir, que não
somos só nós a depender deles e ter um horário de trabalho como qualquer outro
trabalhador e saber organizar o tempo de modo a conseguir aproveitá-lo ao
máximo já que ele passa tão depressa que nem nos apercebemos dele a passar
por nós e a levar-nos com ele.
Em relação ao projeto em si, no que toca aos elementos gráficos do jogo,
que foi a parte em que estive inserido e trabalhei estes três meses, estão
basicamente prontos. Entretanto surgiu um problema com o software que os
programadores estavam a programar o Nonagon Quest e por isso o projeto está
um pouco atrasado. Até porque íamos apresentar uma demo do jogo num evento
na Universidade dos Açores (o Playnesti) e não foi possível devido a este
problema. Mas em relação ao estágio ficou tudo pronto uma vez que os trabalhos
gráficos do jogo encontram-se todos prontos.
36
 NONAGON QUEST

Neste momento os estagiários da parte do design gráfico encontram-se a

desenvolver um Artbook do jogo, sendo que esta atividade já é um aparte do
estágio, pois este Artbook servirá como uma lembrança deste estágio na Cereal
Games e poderá fazer parte do nosso currículo uma vez que estarão lá
apresentados todos os trabalhos que desenvolvemos para este projeto.

37
 NONAGON QUEST

Referências Bibliotecárias

http://lpc.opengameart.org/static/lpc-style-guide/styleguide.html

http://lpc.opengameart.org/static/lpc-style-guide/assets.html

http://gas13.ru/v3/tutorials/handmade_antialiasing.php

https://www.youtube.com/watch?v=cL_usZAFB4A

http://game-oldies.com/

Livro: Pixel Art For Game Developers, by Daniel Silber

Livro: CHILD OF LIGHT ARTBOOK

Livro: DECO DEVOLUTION THE ART OF BIOSHOCK 2

38
 NONAGON QUEST

Anexos

Personagens

 Cereal Games:

39
 NONAGON QUEST

 Nonagon:

40
 NONAGON QUEST

 Custom Project:

 Cybermap:

 Equipa de limpeza:

41
 NONAGON QUEST

 Fibrenamics:

 GlobalEda:

42
 NONAGON QUEST

 Sata | Azores Airlines:

 Equipa de segurança:

 Sparkyway:

43
 NONAGON QUEST

 Tetrapi:

 TTS:

 UrActive:

44
 NONAGON QUEST

 GUIA:

 Multic:

 NormaAçores:

 Sandrina:

45
 NONAGON QUEST

Animações:

 Animações para quests:

46
NONAGON QUEST

47
NONAGON QUEST

48
 NONAGON QUEST

 Animações da equipa Nonagon a andar:

49
 NONAGON QUEST

 Animações da equipa de Segurança a andar:

50
NONAGON QUEST

51
 NONAGON QUEST

Logótipos:

52