Escola Básica e Secundária de Salvaterra de Magos

RELATÓRIO CRÍTICO

Prova de Aptidão Profissional

João Mendonça

Ivo Camacho

Ruben Silva

Curso Profissional Técnico de Multimédia

12ºI Nº11

12ºI Nº14

12ºI Nº23

Salvaterra de Magos

Junlo de 2019

Sumário

Relatório das atividades do

Projeto OUTSIDEBOX, de um site, dois jogos,

logótipos e vídeos para os mesmos,

desenvolvido como requisito parcial dos módulos

curriculares, supervisionado pelos Professores,

Alice Pereira e Teresa Fazenda, do curso

Profissional Técnico de Multimédia.

Agradecimentos

Achámos de bom carácter e de suma importância agradecer a todos os elementos que

nos apoiaram na realização desta prova, em particular a todos os professores que nos

acompanharam e nos direcionaram faseadamente e cada um com uma contribuição

indispensável e passo a citar, Alice Pereira, a nossa coordenadora de PAP, Teresa

Fazenda uma professora sem fôlego, Jacinta Machacaz, uma professora de Português

incansável e dedicada, e a Sandra Casaca, Professora de Inglês pela sua incomparável

prestabilidade. Por último gostávamos de salientar que nada disto era possível sem a

formação e contexto de trabalho do 12º Ano e gostávamos de agradecer a Nuno Ramos,

gerente a Agência Criativa IMA pela excelente experiência ganha na formação e

contexto de trabalho de um dos elementos do grupo e deixar um agradecimento especial

a Paulo Carrasco, que sem o apoio incansável e excelente formação do mesmo nada

disto seria possível.

Índice

INTRODUÇÃO .................................................................................................................................... 6

DESENVOLVIMENTO ....................................................................................................................... 7

METADOLOGIA PROJETUAL ...................................................................................................................... 7 ESTADO DA ARTE ..................................................................................................................................... 8 LOGÓTIPO .............................................................................................................................................. 10

OUTSIDEBOX .................................................................................................................................. 10 Construção do Logótipo .................................................................................................................... 14 Animação do Logótipo ...................................................................................................................... 16

WEBSITE ................................................................................................................................................ 18 Wordpress ......................................................................................................................................... 18 Alojamento ........................................................................................................................................ 18 Maqueta do website .......................................................................................................................... 20 Diferença entre tema e template ....................................................................................................... 23 Plugins .............................................................................................................................................. 23 Otimização do conteúdo .................................................................................................................... 27 Adaptação Responsive ...................................................................................................................... 29 Conteúdo Multimédia ........................................................................................................................ 33

OS NOSSOS JOGOS .................................................................................................................................. 34 RedOrder ........................................................................................................................................... 34 Slider.................................................................................................................................................. 34

UNITY .................................................................................................................................................... 35 SCRIPTS .................................................................................................................................................. 36

O que é um script? ............................................................................................................................ 36 RedOrder ........................................................................................................................................... 37

GameManager ............................................................................................................................................... 37 SaveData() ..................................................................................................................................................... 38 Items .............................................................................................................................................................. 40 Diálogo .......................................................................................................................................................... 41 Quests ............................................................................................................................................................ 42 Áudio ............................................................................................................................................................. 43 Movimentos do Player ................................................................................................................................... 44 Menu ............................................................................................................................................................. 45 Sistema de Batalha ........................................................................................................................................ 46 Final da Batalha ............................................................................................................................................. 52 Prefbab (Código Agrupado) .......................................................................................................................... 54

SLIDER ................................................................................................................................................... 55 Terreno .......................................................................................................................................................... 55 Player ............................................................................................................................................................ 56 Obstáculos (Prefbas)...................................................................................................................................... 57 Menus ............................................................................................................................................................ 59

Slider ................................................................................................................................................. 66 BANNER ................................................................................................................................................. 68

RedOrder ........................................................................................................................................... 68 Slider ................................................................................................................................................. 69

STORYLINE ............................................................................................................................................ 70 RedOrder ........................................................................................................................................... 70

CONCLUSÃO .................................................................................................................................... 71

ANEXOS ............................................................................................................................................ 72

GANTT ................................................................................................................................................... 72 GUIÃO PARA OS VÍDEOS ......................................................................................................................... 73

RedOrder ........................................................................................................................................... 73 Slider ................................................................................................................................................. 74

6

Introdução

Este projeto de aptidão profissional trata-se de uma startup desenvolvedora de jogos e a

tudo o que implica à construção da mesma, imagem da empresa, site, jogos publicados e

vídeos promotores dos jogos.

A prova visa criar um negócio capaz de entrar no mercado.

Irá existir um site institucional onde será divulgada a imagem da equipa e produtos da

mesma.

No relatório vai ser feita uma descrição de técnicas utilizadas e um relato detalhado

tanto do planeamento como da implementação do projeto.

O projeto acima referido insere-se na apresentação da Prova de Aptidão profissional, do

Curso Profissional de Técnico de Multimédia.

O projeto tem como destino a comunidade de jogadores de várias plataformas desde o

formato em computador convencional para os produtos para mobile que por muitos são

vistos como o futuro e tem também como objetivo lançar os elementos envolvidos no

projeto pelo mercado de jogos indie e ganhar experiência no ramo.

7

Desenvolvimento

Metadologia projetual

Na metadologia projetual, começamos por fazer um brainstorming de ideias para chegar

a uma conclusão em relação ao que vai ser o nosso projeto final.

Chegamos à conclusão que queriamos criar uma empresa de jogos, por isso decidimos o

gênero dos jogos, a realização do site, logotipos para os jogos como também para a

empresa. Não esquecer da realização de vídeos para promover os jogos.

Depois desta conclusão fomos pesquisar softwares para criar os jogos, site, logotipos e

vídeos, e também fomos pesquisar bons e maus exemplos na web.

Mais tarde, depois de todos as pesquisas feitas e das ideias estarem mais claras,

começamos a realizar o nosso projeto.

Softwares utilizados para a elaboração do projeto:

Wordpress – Utilizámos wordpress para implementar o site.

Gantt – Onde foram estabelecidas toda a calendarização, metas, tarefas e funções de

cada uma de nós e fizemos pequenos sumários relativos a tudo o que foi feito ao longo

do projeto.

Microsoft Word – Guiões/Relátorio.

Adode Premiere – Edição e montagem dos vídeos.

Adode Audition – Edição do som.

Adobe Photoshop – Edição e Animação de imagem bitmap.

Adobe illustrator – Edição de imagens vetoriais.

Unity– Programa para criar os jogos.

Visual Studio– Programa para escrever o código para os jogos e para código em Web.

8

Estado da Arte

Antes de começarmos a desenhar layouts e fazer scripts do nosso projeto fizemos uma

pesquisa generalista de alguns produtos da atualidade relacionados com o tema

queríamos realizar.

Começamos por pesquisar por bons exemplos de jogos que gostavamos, Jogos para

computador e jogos mobile simples em que o objetivo do jogo seja entretenimento, em

qualquer pausa do dia ou curto espaço, onde o jogador em qualquer pausa do dia ou

curto espaço de tempo vazio. Abaixo mostramos bons exemplos de produtos que foram,

e ainda são populares (a questão da intemporalidade que referimos anteriormente), os

mesmos são jogos que se tornaram franchises (jogos com muitas sequelas):

Figura 3 - Geometry Dash

E de seguida fizemos exatamente o mesmo para logótipos de jogos da mesma

magnitude e encontrámos alguns exemplos que gostaríamos de registar:

Figura 1- Pokémon Fire&Red Figura 2- Final Fantasy 6

Figura 4- Spirit Roots / BroForce

9

Quando chegámos ao tópico do Website encontrámos exemplos bastante bons e

bastante maus, porém retirámos algumas ideias em termos de estrutura que registámos

para aplicação futura no nosso website:

Figura 7 - Website da Gameleon e PixieHuge.

E procurámos também exemplos de jogos de logótipos de empresas especialista no

desenvolvimento de software

de jogos já que nós iriamos precisar de uma imagem também para representar a

OUTSIDEBOX:

Figura 8 - Logótipos da Konami e da Bethesda

Figura 5- FatGuy on a Ring Figura 6- Icon do jogo Temple Run

10

Logótipo

OUTSIDEBOX

Começámos por criar, um nome e um logótipo para a empresa, e queríamos algo

simples, único e agradável.

Para o nome decidimos que a empresa se identificaria como OUTSIDEBOX, a nossa

interpretação desse nome provém de pensar fora da caixa como o próprio nome indica.

Pretendemos que seja associado a produtos de qualidade, algo diferentes e únicos, fora

do comum, uma fuga à regra

O passo seguinte foi definir pontos a ser cumpridos na construção do logótipo: de ser

cumpridos na construção do logótipo:

• Precisávamos de um elemento gráfico ligado à empresa (algo estilizado que

representasse a imagem da empresa)

• Predominância de linhas retas para manter coerência com o nome que remete

para caixas numa tradução direta

• Cores simples e agradáveis

Então começamos a fazer um brainstorming de ideias e chegamos a este esboço:

Figura 9 - Design preliminar do logótipo da OUTSIDEBOX

Após as ideias assentes do que iríamos criar, começámos então a fazer um estudo desta

caixa com controlos de arcade estilizados em várias iterações, e após várias tentativas

chegámos a um resultado que acreditámos ser agradável:

11

Figura 10 - Primeiras iterações do elemento estilizado do logótipo da OUTSIDEBOX

Figura 11 - Primeira iteração da nossa caixa com controles de arcade para o logótipo da OUTSIDEBOX

Porém havia um erro que estávamos a cometer nesta iteração do logótipo,

OUTSIDEBOX remetia para (no caso de tradução direta) fora da caixa, que em nada ia

ao encontro do nosso logótipo já que os controlos de arcade pareciam estar dentro da

caixa, então depois de pensarmos em soluções chegámos à conclusão que iríamos fazer

molas por baixo dos controles e passar uma imagem de movimento onde os controles

estariam a saltar para fora da caixa e o resultado foi o seguinte:

Figura 12 - Solução da caixa com os controles de arcade a saltarem para fora da caixa

Apesar de estarmos contentes com o resultado final anterior decidimos, em prol de uma

análise impessoal e direta, fazer uma “pool” a vários indivíduos de profissões e faixas

etárias diferentes e tentar perceber qual era a interpretação feita pela maioria.

Foi hilariante ver algumas das respostas das pessoas que foram questionadas sobre o

que interpretavam desta ilustração sem mais pista nenhuma, registámos duas

particularmente hilárias:

Figura 13 - Exemplos transcritos de interpretações feitas à iteração com molas do logótipo

12

Decidimos então revisitar o nosso conceito das molas e decidimos aplicar um gradiente

falso” e aproveitar isso para dar a impressão que os botões estão a sair da caixa.

Também alterámos o tamanho da cabeça do joystick, já que o mesmo remetia para um

microfone exagerámos mais no tamanho da sua “cabeça” para realmente retratar um

joystick de árcade.

Figura 14 - Evolução da iteração com molas para o "degradê"

Com a versão finalizada finalmente podemos passar para a tipografia, onde queríamos

uma letra capitalizada, não muito forte, mas com um aspeto agressivo e agradável ao

mesmo tempo com linhas retilíneas sem serifa, escolhemos a “Agency FB BOLD”, que

cumpria todas as nossas necessidades.

Figura 15 - Logótipo monocromático da OUTSIDEBOX

Após o término da versão monocromática do logótipo passámos então ao estudo de

cores onde de entre muitas combinações com cores de arcade nos controles e cores

neutras tanto para a tipografia como para a caixa, assentámos em cinza (#586472), e

amarelo e vermelho para os botões (#FBCC13 e #E02729 respetivamente) porque

13

mantendo um aspeto agradável e pouco agressivo, conseguimos ao mesmo um conceito

“gaming” através das cores de arcade.

Figura 16 - Cores do logótipo final da OUTSIDEBOX

Figura 17 - Versão final do logótipo da OUTSIDEBOX

Após darmos por concluído o logótipo da OUTSIDEBOX reconstruímos o logótipo em

várias versões para potencial uso em futuras aplicações:

• Light

• Dark

14

• Horizontal

• Vertical

E um favicon 512px por 512px para uso no website da empresa.

Figura 18- Projeto do logótipo em Illustrator onde foram criadas e guardadas as diferentes versões do logótipo.

Como podemos ver na Figura 18, as únicas mudanças da versão escura para a clara do

logótipo foi inverter o cinzento para branco (#FFFFFF).

Construção do Logótipo

Para contruirmos o logótipo foi utilizado Adobe Illustrator, um programa de edição de

imagem vetorial.

Começamos por definir pontos de fuga para fazer a caixa, o objetivo não era criar algo

simétrico, queríamos linhas agressivas para a caixa ficar num plano agradável.

Utilizámos a ferramenta de retângulos para fazer 2 retângulos lado a lado que iriam

definir dois dos planos da caixa e depois ajustámos com a ferramenta de seleção direta

os pontos para chegar ao resultado querido como mostra no exemplo a seguir:

15

Figura 19 - Exemplo da criação dos pontos de fuga.

Para fazer o efeito de espaçamento que vemos entre todos os elementos do logótipo,

sempre que tínhamos 2 elementos a tocarem-se duplicávamos um deles fazíamos um

bleed com o espaçamento que queríamos e depois utilizávamos a ferramenta do

pathfinder. Selecionávamos os 2 elementos e utilizávamos o preset “Minus Front” do

pathfinder como mostra no exemplo a seguir:

Figura 20 - Exemplificação de como foi usado o pathfinder para fazer os espaçamentos que vemos por todo o logótipo.

Para criar o Joystick e botões foram utilizadas a ferramenta de elipses e retângulos e

feitos ajustes com a pen tool e ferramenta de seleção direta e no final utilizado o

processo explicado anteriormente para criar os espaçamentos que vemos no logótipo

final.

16

Figura 21 - Ferramentas utilizadas na construção dos controles estilizados de arcade no logótipo.

Animação do Logótipo

Após todo este processo de criação do logótipo, e darmos as diversas versões do mesmo

por concluídas achámos oportuno animar o nosso logótipo para um possível uso futuro

caso necessário, e passámos logo para a implementação da ideia.

O plano era animar os botões e o Joystick e para isso utilizámos o Photoshop, que é de

fato extremamente versátil para animações simples e muito potente no que toca ao

produto final, já que é possível fazer gif’s com alta compressão de grande qualidade no

Photoshop e perfeitos para Web.

O Photoshop tem uma timeline onde podemos animar várias instâncias de um aglomerar

de layers, podemos chamar frames a cada instância, e temos a oportunidade de ligar e

desligar a vista das layers and cada instância.

Figura 22 - Timeline do photoshop.

17

Então o que fizemos foi criar as várias frames de como queríamos o nosso logótipo com

os botões com opacidades diferentes e o joystick em posições diferentes e organizá-las

na timeline do Photoshop como está feito no exemplo seguinte:

Figura 23 - Timeline da animação do logótipo.

Figura 3- Evolução do logótipo

18

Website

Wordpress

O nosso site foi construido em wordpress. Escolhemos WordPress por ser relativamente

fácil de operar, amigo do SEO da Google (sistema de pontuação nas pesquisas da

Google), o poder para ser migrado com facilidade graças ao acesso a plugins, existe

uma comunidade gigante o que torna fácil o acesso a informação de apoio na internet e

pela sua versatilidade já que com WordPress o céu é o limite pois é possível fazer

qualquer coisa com o mesmo.

Alojamento

A primeira coisa a fazer seria de fato, arranjar um bom alojamento, um domínio e

efetuar o registo.

Para isso contámos com a “PTisp”, uma empresa de Web Hosting portuguesa com um

apoio ao cliente extraordinário, preços muito baixos e um recorde gigante de prémios e

acreditações bem como milhares de cliente.

Já que íamos implementar o site em WordPress haviam algumas especificações

indispensáveis no nosso plano de alojamento:

• CPanel

• PHP 7.3 e MySQL 5.7

• Suporte de WordPress

• Funcionalidades de Emails ilimitados

Após encontrarmos um plano com essas especificações comprámo-lo e fomos atrás de

um domínio.

Inicialmente tentamos utilizar outsidebox.com porém já era um domínio a ser utilizado

e tivemos que mudar a terminologia para outsideboxgames.com (“.com” foi o que fazia

mais sentido já que era um site institucional internacional).

19

Depois de termos domínio, e o mesmo registado no alojamento que comprámos à PTisp

Começamos logo a configurar o nosso CPanel:

Figura 24 - Página Inicial do CPanel, o painel de administração do alojamento na PTisp que nos dá acesso à administração tanto do site e dos seus diretórios como a servidores FTP/emails/base de dados e muito mais.

Foram criados emails de suporte, “noreply” para uso em formulários no site, uma conta

FTP para guardar qualquer material do website caso necessário no futuro, e claro, a base

de dados onde estaria toda a informação de logins e não só, indispensável ao

funcionamento do site.

Figura 25 - Base de dados em phpMyAdmin do nosso Alojamento.

A base de dados é criada automaticamente pelo wordpress, as únicas alterações que

fizemos foi aos prefixos de tabelas padrão.

Alterámos os prefixos das tabelas para proteger o site de “SQLInjections” um termo

comum na comunidade Web, onde os hackers se aproveitam do MySQL e assaltam a

20

informação das bases de dados de websites ilicitamente, por isso quanto mais

pudéssemos dificultar esse processo melhor.

Depois de ter a questão do alojamento/domínio tratada, começamos a construir a

maqueta do que queríamos fazer com o nosso website.

Figura 26 - Mockup da maqueta para o website da OUTSIDEBOX.

Para pouparmos tempo decidimos fazer a maqueta sem utilizar imagens, apenas

queríamos chegar a um consenso na estrutura e ter algumas ideias do que fazer no site.

Maqueta do website

Desenhamos a maqueta com Adobe Illustrator e idealizamos a homepage, página de

informações de um jogo, página da equipa, e formulário de contactos.

21

22

Assim ficaram decididas as fontes que seriam usadas no site (OpenSans) e algumas

questões de design como esconder os contactos e a página do sobre nós no menu

hambúrguer para dar importância aos nossos produtos e os highlighs nas palavras chave

dos títulos, o site também está todo em inglês porque o nosso publico alvo é a nível

internacional.

23

Diferença entre tema e template

Wordpress funciona com uma série de plugins e addons, podemos também utilizar

templates grátis ou para substituir o seu conteúdo e criar o website porém nós fizemos o

nosso website do 0 sem template nenhuma, o que usámos foi um tema.

Um tema nada mais é que um pacote de plugins e templates pagos.

Escolhemos o tema “Bridge” por usar qode e WPBakery (plugins de contrução de

páginas em wordpress) porque um dos elementos do grupo já tinha experiência com os

mesmos após a Formação em Contexto de Trabalho.

Plugins

Como referimos anteriormente utilizámos o WPBakery Page Builder para construirmos

o nosso website por ser muito intuitivo e manter a versatilidade necessária para

construção dá página como quisermos.

Figura 27 - UserInterface do WPBakery Page Builder.

Utilizámos Slider Revolution para criar o nosso banner no topo da página principal

porque é bastante potente, funciona quase como um programa de edição de vídeo, tem

uma timeline e layers e bastantes configurações úteis precisas como a acesso a parallax

e controlo do nível de profundidade dos elementos que estão em parallax

individualmente.

24

Figura 28 - UserInterface do Slider Revolution.

Porém não foi fácil trabalhar com o mesmo porque é difícil posicionar os elementos e a

perceção do funcionamento do sistema de grelha de disposição dos elementos no

espaço.

Utilizámos Contact Form 7 para construir os formulários de contacto no Website, e

MailChimp para criarmos o sistema de registo para newsletters.

Enable Media Replace é um plugin que é bastante conhecido pois adiciona a

funcionalidade de substituir um ficheiro multimédia já existente no site por outro e

recriar todos os links e repor a mesma imagem em todo o lado automaticamente.

Figura 29 - Função de Carregar novo ficheiro com o Enable Media Replace.

25

“Page Animations and Transitions” é um plugin que adiciona Ajax para criar uma

animação para quando o website é aberto, carrega-o em segundo plano e deixa a

animação em overlay. Esta foi uma decisão que tomámos que sacrificou praticidade

porque o utilizador do website tem de esperar pela animação entre o “clique” e obter o

produto de onde clicou porém como ainda existe uma grande maioria de conexões

pobres no mundo e o nosso website chegou a uma etapa onde apesar de todas as

otimizações no conteúdo demorava mais de 5 – 7 segundos a carregar em conexões

como 4G convencional, decidimos por uma animação para carregar a página em

segundo plano antes de ser aberta, assim não havia constrangimentos na forma como o

conteúdo é visto pelo utilizador, quando lhe é mostrado é mostrado já por completo.

Figura 30 - Velocidade de carregamento do Website OUTSIDEBOX após otimizações.

26

A animação que utilizámos foi o logótipo animado anteriormente em loop infinito.

Figura 31 - Screenshot da animação do logo enquanto a página está a ser carregada em segundo plano.

WP Super Cache é um dos plugins de otimização de cache mais conhecidos na

comunidade senão o mais conhecido, com mais de 2 Milhões de instalações ativas, é o

plugin mais usado para esse fim.

O que é o cache?

O cache de um navegador nada mais é do que o dispositivo ou instrumento através do

qual o mesmo salva dados, como imagens e HTML, a intenção desta gravação de dados

é ajudar com a largura de banda, assim se uma página for carregada mais do que uma

vez, irá demorar menos tempo para ser carregada, porque já foi guardada uma versão

em cache da mesma.

Utilizámos o plugin Disable Site porque enquanto o website não estava numa versão

estável pronta a ser usada o mesmo foi fechado para o público fazendo assim com que a

OUTSIDEBOX não sofresse um desconto na pontuação da página Web pelo SEO da

Google.

SEO da Google?

SEO significa Search Engine Optimization. É um conjunto de técnicas de otimização

para sites, blogs e páginas na web. Essas otimizações visam alcançar bons rankings nas

pesquisas gerando tráfego e autoridade para o Website em questão.

27

Figura 32 - Opções do Disable site e da splash page.

All-in-one WP Migration foi usado para termos a habilidade de exportar o nosso website

em diversos formatos para criar backups regulares manualmente.

Tuxedo Big File Uploads foi utilizado com o intuito de aumentar a capacidade máxima

de upload de ficheiros já que a mesma é de apenas 2MB por padrão em Wordpress.

Loginizer e Anti-spam by CleanTalk são dois plugins de segurança para não permitir

registos de spam em newsletter ou em logins, e proteger o website de bruteforces e

ataques de hackers.

Otimização do conteúdo

Quando falamos em imagens para Web muitos amadores não ligam a este aspeto de

extrema importância porém temos de ter cuidados especiais no que toca ao export final

do conteúdo para ser usado online:

28

• O mínimo de resolução possível – Muitos WebDesigners utilizam

programas externos com réguas para medir o espaço em resolução que

precisam para uma imagem que está a ocupar uma x divisão. Há que

manter o número de resolução o mais baixa possível porque no final do

website concluido toda a memória poupada no peso da multimédia faz

diferença na velocidade de carregamento do site, que por sinal é o aspeto

levado mais a sério pela SEO (referida anteriormente) e também nenhum

utilizador vai navegar num site que demora gerações a carregar,

principalmente nos dias que correm que a tecnologia e velocidade cada

vez mais é tomada por garantida.

• Formatos que todos os navegadores suportem – Os formatos de

imagem suportados em todos os navegadores são JPEG, PNG e GIF,

porém há relativamente pouco tempo começou a aparecer um novo

formato de imagem propositado para web chamado WEBP (webpicture)

onde a compressão é muito mais elevada do que o convencinal JPEG

porém a qualidade não é sacrificada, infelizmente nem todos os

navegadores suportam este formato por ainda vivermos numa fase de

transição, ou seja, a menos que quiséssemos o nosso site desfuncional em

alguns navegadores tivémos que optar por exportar tudo em JPEG, PNG

e GIF.

• Usar SEMPRE a opção de salvar para Web – nos programas de

edição de imagem tanto bitmap como vetorial temos sempre a opção de

exportar diretamente para um formato ou de abrir um painel de

configurações do export para guardarmos a imagem, no caso de imagens

JPEG temos sempre de salvar com o mínimo de qualidade possível até

não haver detiorização da imagem e como referimos anteriormente a

resolução também deve ser a miníma possível só o necessário.

29

• Passar as imagens por um compressor de imagens após o export – Toda a

optimização é pouca, e no que toca a comprimir o conteúdo é de suma

importância o fazer após o export final, existem programas para isso em

windows e mac porém as soluções na internet como o ShortPixel são mais

potentes (solução que utilizámos).

Figura 33 - Compressor de imagens online gratuito ShortPixel.

Adaptação Responsive

O nosso Website está todo responsive, ou seja, a estrutura do site adapta-se a qualquer

dispositivo onde esteja a ser visitado sem perder a coerência ou ficar com conteúdo

constrangido.

No caso do Slider Revolution e da adaptação do banner para tablets e telemóveis, o

mesmo tem uma opção de desabilitar a adaptação automática por grids, que é a mesma

que o wordpress faz nas páginas por defeito (o conteúdo exposto em grids adapta-se

automaticamente ao resto dos dispositivos) e após a desativar podemos editar a posição

dos elementos do banner na timeline em cada dispositivo alternando nestes botões:

30

Figura 34 - Como alterar a edição para vista em mobile.

E para mudanças como as secções em que os backgrounds desaparecem como a

seguinte:

A solução é primeiro clonar a secção com o Bakery:

31

Depois escondemos a secção que clonámos em PC e mostramos em mobile e fazemos o

mesmo porém ao contrário na secção anterior, tudo neste painel:

O resultado final fica da seguinte forma:

32

Figura 35 - Versão mobile da Secção RedOrder

Para secções em xadrez, a versão mobile fica com a ordem das imagens trocada porque

existem imagens que estão em grid à direita e quando passam para a versão mobile ficam por

cima do texto, para resolver isto é simples, repetimos os passos para o problema anterior e

mudamos a posição das imagens na secção mostrada em mobile como podemos ver no

seguinte exemplo:

33

Conteúdo Multimédia

Não foi usada nenhuma imagem de banco de dados e todo o conteúdo que temos no

website foi criado por nós, aqui está um aglomerar de exemplos dos nossos projetos.

Foi utilizado Adobe Photoshop para a criação de todas as imagens bitmap e animações,

e tudo o que está em vector, foi produto do Adobe Illustrator.

34

Os Nossos Jogos

RedOrder

“RedOrder” é um jogo 2D RPG (Role-playing game) feito no Unity á base de sprites

que utilizámos da internet.

O jogo trata-se de um personagem chamado Red que vai explorar o mundo em busca de

vingar a sua aldeia, dos monstros que a invadiram quando ainda era uma criança.

Slider

Slider é um jogo “infinity run” para mobile (android) feito no Unity 3D.

A origem deste jogo veio da ideia de recriar um jogo que se torna viral muito facilmente

devido à simplicidade do mesmo.

O infinityrun é um género de jogo em que o jogador tem um mapa infinito cheio de

obstáculos e de score infinito, tudo depende da habilidade de cada pessoa.

35

Unity

A plataforma de desenvolvimento Unity oferece aos utilizadores a capacidade de criar

jogos em 2D e 3D, suporta as seguintes aplicações: Direct3D no Windows, Xbox

360,MacOS, Linux, Android e iOS.

Nos jogos 2D, a Unity permite a importação de sprites e um avançado sistema de render

para o mundo 2D.

36

Scripts

O que é um script?

Todos os scripts foram feitos em C#, a língua de código utilizada no Unity.

O programa que nos permite escrever o código no Unity é o “Visual Studio”, porque é

um programa que só se foca em duas línguas C++ e C# e já vem incluído no Unity.

Para começar cada script é essencial criar as funções para depois indicarmos ao Unity a

função que deve desempenhar. A maior parte começa com “public”, para depois

podermos mexer dentro do Unity para pequenos ajustes, depois dependendo da função

que queremos criar podemos dizer que queremos a função, por exemplo, “public items[]

quantidade de items”, esta função vai fazer um array “[]” (Um array consiste em uma

matriz ou coleção de dados ou matriz de um mesmo tipo.) para colocarmos qualquer

quantidade de, neste caso, itens do jogo.

37

RedOrder

GameManager

Um dos scripts mais usados é o “GameManager”, está sempre presente no jogo para

fazer o chat aparecer, salvar/carregar o jogo, inventário e chamar outras funções.

Nesta imagem podemos encontrar a função para indicar os valores (ataque, defesa, vida,

etc… “public CharStats[] playerStats;” ) com esta função inserida podemos colocar

qualquer valor desejado no Unity e aplicar logo de seguida no jogo e ter esses valores

atualizados a qualquer momento.

Mas o mais importante é neste script é a parte seguinte, a parte de organizar os itens e o

sistema de salvar e carregar o jogo.

38

SaveData()

Esta função “SaveData()” (função que vai salvar os dados presentes no jogo) mas essa

função não estava presente nas funções que chamamos na imagem anterior. Isto

acontece porque no Unity, quando chamamos a um script “GameManager” ele

automaticamente prepara código e funções para serem aplicadas no nosso jogo, por isso,

podemos tirar proveito e indicar toda a informação que queremos que o Unity salve para

ser carregada quando for chamado.

Neste caso tivemos que ir buscar funções criadas em outro script, neste caso

“CharStats”, onde criamos as variáveis para os tais valores de cada personagem.

Para indicar ao Unity o que era preciso salvar foi só indicar o nome do “Prefab” ou da

variável. Neste exemplo temos o valor do “EXP” e da quantidade de vida que o player

possui atualmente.

“ PlayerPrefs.SetInt("Player_" + playerStats[i].charName + "_CurrentExp",

playerStats[i].currentEXP);

PlayerPrefs.SetInt("Player_" + playerStats[i].charName + "_CurrentHP",

playerStats[i].currentHP); “

39

O conceito de salvar e carregar o jogo é basicamente este, foi só repetir este código e

alterar o nome da variável que queríamos. Depois foi só associar este código de

SavaData() e de LoadData() aos botões do menu do jogo para funcionarem.

40

Items

A forma de atualizar os items que o player tem no inventário, foi preciso fazer um loop

entre o item e o espaço em branco no inventário, caso o loop não existisse, sempre que

adquiríamos um item novo esse item não iria aparecer no início do inventário, mas sim

no lugar aleatório ou mesmo no fundo do mesmo. Por isso criamos e um loop para estar

sempre a atualizar o lugar de cada item de forma a adquirir um inventário organizado.

O loop é representado como “for (int i = 0; i < itemsHeld.Length - 1; i++)”, ou seja, o

Unity vai verificar cada espaço que temos no inventário, “for (int i = 0; i <

itemsHeld.Length” caso não tenha nada por exemplo na posição 3 mas tem um item na

posição 4 ele vai subtrair 1 valor e mover o item que estava na posição 4 para a 3 e

sempre adiante ate chegar ao lado de outro item ou mesmo ser o primeiro item do

inventário “ itemsHeld.Length - 1; i++)”. Esta parte do código também funciona da

mesma forma no sistema da loja, pois funciona da mesma forma que o inventário, o

único extra é que tem a quantidade de “gold” que o player possui para comprar e vender

o item.(Tanto para o inventário como para a loja)

41

Diálogo

Já que falámos da loja, precisamos de uma forma para abrir uma caixa de diálogo para

falar com os “npcs”. Para isso criamos dois scripts “DialogActivator” e

“DialogManager”. Estes dois scripts trabalham sempre juntos, o “DialogManager” é

aquele que vai fazer abrir caixa de texto com as falas.

A maneira como o código sabe o que é texto e o que

é nome do personagem, colocamos “n-“antes do

nome e vai atualizar o respetivo nome em vez de

aparecer como texto.

Depois ainda podemos indicar se o texto é de um

npc (Is Person), para poder fazer essa alteração,

mas caso não seja pessoa vai só

aparecer como texto.

Com “IsPerson” Sem “IsPerson”

42

Quests

Como bónus fizemos um pequeno sistema de missões, criamos as funções para as

quests no “DialogManager” e também no “GameManager”, mas também criamos

outros dois scripts, “QuestMarker” e “QuestManager”.

O “QuestManager” serve para criar as missões,

enquanto o “QuestMarker” serve só para

verificar quais as missões disponíveis e quais

estão ativas de momento.

E a maneira como essas missões são ativadas,

são pelos “npcs” que tem como opção

“IsPerson” ativado. Este sistema não é muito

desenvolvido, mas o que torna um extra é o que

podemos fazer se adicionarmos uma quest a um

objeto.

Depois criamos o script

“QuestObjectActivator”, um script que nos

deixa adicionar a quest num objeto. Por

exemplo, tínhamos um objeto que bloqueava

o caminho para o nosso player, mas caso a

missão esteja concluída esse objeto para de ser

um obstáculo e desaparece do mundo para abrir

caminho ao nosso player.

É preciso fazer dois objetos iguais, mas um deles oculto ate que a missão esteja

concluída, e o objeto anterior visível desaparece.

43

Áudio

O áudio é essencial para criar uma boa atmosfera ao jogo, por isso criamos um script

para tal, o “AudioManager”, este script vai ser chamado no “GameManager” para

tocar a música selecionada por nos por cada cena, entrar em batalha ou simplesmente

usar ou clicar em botões no menu ou items.

Mas para o Unity saber o que tocar, temos que

colocar as músicas dentro do jogo, então criamos um

objeto e adicionamos o script “AudioManager” e

colocamos as músicas dentro. Para decidir o que tocar

em cada cenário, precisavamos de um objeto que

estivesse sempre ativo, e esse objeto é a câmara, temos

que ver qual o som ou música que queremos que toque,

verificar o número do elemento e depois colocar na tab

“Music To Play” encontrado na

câmara.

44

Movimentos do Player

Para fazer o movimento do player foi preciso só um script, o “PlayerController”, nesse

script dissemos quais os movimentos que queríamos que o player fizesse com uma certa

velocidade.

Com isto o movimento do player está pronto, mas não temos nenhuma animação de

movimento, então usamos o “Animator” do Unity e fizemos a animação. Colocamos

cada sprite para cada tipo de movimento, por exemplo, o sprite do player olha para a

esquerda na animação de olhar para a esquerda, e assim por adiante. Depois de fazermos

isto para todos agrupamos essas animações e juntamos tudo, como está representado na

seguinte imagem (O player_Idle é o movimento do player parado, caso ele pare quando

está à andar para a direita, ele vai ficar a olha para a direita).

45

Menu

Em relação ao modo de como o status e os items aparecem no menu é bastante simples,

para começar tivemos que criar o script “GameMenu” e logo de seguida as funções e as

variáveis para mais tarde ligarmos a cada correspondente.

Na seguinte imagem temos tudo o que precisamos para adicionar no “UICanvas”

(painel que corresponde ao menu, que possui o inventário, e a informação geral dos

players mas também presente os botões para salvar e sair do jogo).

Como exemplo, podemos falar dos status de um player.

Nestas imagens temos tudo o que foi criado no script

anterior, para associar cada variável foi só acrescentar o

script ao “UICanvas” e ligar cada correspondente. Com

estes valores ligados entre si, só tivemos que chamar o

script “CharStats” no script do “GameMenu” para

colocar estas ligações a funcionar.

46

Sistema de Batalha

O maior desafio foi o sistema de combate, o sistema mais complexo do projeto em

relação ao número de scripts ligados entre si e dos pequenos detalhes para deixar o

combate, mas interessante.

O script principal é o “BattleManager”, o script

onde todas as variáveis do combate estão colocadas,

desde da posição dos inimigos/players até às

rewards e habilidades especiais. Na imagem

seguinte encontramos tudo o que é preciso para

fazer o combate funcionar.

Podemos começar por falar como a batalha começa

e o que é preciso trazer de outros scripts para

funcionar.

“public void BattleStart(string[] enemiesToSpawn, bool setCannotFlee)”

Tudo começa por aqui, nesta função vamos indicar o que vai acontecer se a batalha for

ativada, neste caso, se a batalhar estiver com o valor “true”, a câmara vai mudar de

posição e o “UICanvas” da batalha vai se sobrepor.

47

Logo depois indicamos a posição que queremos que os players tenham dentro do

canvas da batalha e aproveitamos que estamos a lidar com os players, referimos os

valores de cada player para a batalha. Em relação aos inimigos, é a mesma coisa, mas

com os valores dos inimigos.

Para fazer os players atacar fizemos outro loop para

verificar todos os players que ainda podiam atacar

naquele turno, e fizemos um “array” das habilidades

de cada player pode usar em combate (“movePower =

movesList[i].movePower;”).

48

Aproveitando a deixa dos ataques disponíveis, foram feitas animações para cada

respetivo ataque usando o sistema de animação do Unity. As animações foram feitas

arrastando todas as frames do sprite para o “animator” do Unity. Depois para interligar

a animação com o respetivo ataque foi só arrastar a animação para o slot que já

tinhamos criado no script “BattleManager”.

O mesmo processo foi efetuado para todos os outros ataques, tanto para os player como

também para os inimigos.

Agora só falta abrir os menus para escolher o

ataque e o inimigo, e isso vai funcionar da

mesma forma se olharmos para o sistema do

inventário, mas só que desta vez temos de ajustar

aos nomes das habilidades e dos inimigos.

Criamos na mesma um loop para verificar que e quantos inimigos tempos disponíveis

para atacar e já chamamos as variáveis para os botões.

49

Para interligar as funções para os botões foi só

arrastar para o slot que criamos no script.

E com isto já temos os botões a funcionar.

O único botão que falta falar é o de escapar da batalha. O “fleebutton” é muito simples,

nesta variável colocamos a opção de escolher qual deve ser a possibilidade que o player

tem para escapar em cada batalha, e esse valor pode ser variado dependendo da batalha.

Podemos escolher o valor no código ou então criamos uma função para escolhermos no

Unity para termos mais opções. Caso precise de fazer uma batalha em que o player não

possa fugir, é só ativar esta função.

Esta função esta de seguida à escolha da percentagem que o jogador tem para escapar.

50

Caso o player não consiga fugir o jogo vai mandar uma mensagem para indicar o

resultado da escolha. Mas para isso precisamos de um novo script, o

“BattleNotification”, um código so para indicar o que fazer caso consiga fugir e para

poder associar o resultado com o objeto.txt no Unity dentro do canvas do

“BattleManager”

Caso tenhamos a opção de não haver a mínima chance do player fugir da batalha,

aparece outra mensagem.

Para quase finalizar o combate temos o sistema dos turnos.

O sistema dos turnos funciona de modo a contar cada vez que um “Battler” (player ou

inimigo) movimento, a função acrescenta +1 na função de modo a verificar 1 a 1 cada

“Battler”. Sempre que faz esse update, vai fazer também update à batalha e ao status de

cada player e inimigo. E esse update entra também na primeira função da batalha de

modo a que o update esteja sempre à acontecer.

51

Caso seja a vez de o inimigo atacar, esta parte do código vai esconder o layout dos

botões para indicar ao player que não é a vez dele, mas sim dos inimigos atacar.

Outra funcionalidade é os sprites para quando o inimigo ou o player morre em batalha.

O código utilizado é um loop, vai verificar a vida de cada “Battler”, caso esse fique

com 0 de “HP” (vida) vai ativar o sprite, que neste caso é chamado de “deadSprite”

para os players.

No caso dos inimigos ocorre um fade in de modo a faze-los desaparecer do cenário com

uma cor selecionada por nós, neste caso vermelho. Quando chegar a “0” o inimigo é

desativado da cena.

52

Final da Batalha

Para finalizar o combate só falta o sistema de recompensas caso a batalha tenha sido um

sucesso ou o “GameOver” caso o player morreu.

Quando a batalha acaba com a vitória do player, entra a função “EndBattleCo”, e nessa

função abrimos o canvas do “BattleReward” com o xp e items adquiridos.

O número de xp adquirido e os items ganhos por cada batalha são escolhidos no

“BattleManager”.

Neste exemplo temos a “Wood

Sword” e a “Leather Armour” como

items ganhos.

Outra das funções criadas anteriormente é a

diversidade das batalhar que pode ocorrer, criamos

o “cenário” de quantos e quais os inimigos vão

aparecer graças a um pequeno script chamado de

“BattleStarter”, onde indicamos a area que pode

ocorrer as batalhas e o tempo entre batalhas.

53

Neste caso tempos 10 segundos como tempo entre batalhas, e podemos escolher se a batalha

começa mal o player entre nessa área ou simplesmente quando passa 10 segundos dentro da

mesma

No caso de ser “GameOver” temos o script “GameOver”, que vai destruir todos os

objetos presentes no jogo e carregar so a scene do game over com duas opções, carregar

o último save que o player tem, ou voltar ao menu inicial.

É basicamente com este código que fizemos as batalhas de forma eficaz e funcional.

54

Prefbab (Código Agrupado)

Com tantos scripts tivemos que arranjar forma de agrupar tudo para ser mais fácil mexer

no jogo e mesmo no desempenho do jogo. Então criamos o “EssentialsLoader” um

script e um “Prefab” (Prefab é um objeto que fazemos no unity e torna-se prefab

quando fazemos desse objeto um template, para ser mais fácil editar e acrescentar em

todas os cenários de forma rápida), e nesse script criamos variáveis para colocar os

objetos que vão estar sempre presentes no jogo, neste caso, o “UIscreen” (menu), o

Player, o “GameManager”, o “AudioManager” e por fim o “BattleManager”.

Desta forma é só preciso arrasta o “Prefab-Essentials Loader” para colocar o jogo todo

numa nova scene e poder testar, em vez de arrastar cada um deles e poder sem querer

mudar alguma coisa no “Prefab” na scene atual e não no resto do jogo.

UIScreen = Todo o Menu/Inventário/Diálogo

Player = Player,Player Controller

Game Man = GameManager (Status, items, habilidades, gold, verificação do que está

ativo, saves/loads e quests)

Audio Man = O efeitos sonoros/músicas

55

Battle Man = Tudo sobre as batalhas

Slider

Terreno

Na construção do jogo começamos por elaborar o nível infinito para isso usamos as

ferramentas do Unity.

Para elaborar o terreno utilizamos 3 cubos sobrepostos ,1 para a água e 2 para a areia,

para tornar o nível infinito apenas tivemos de duplicar este terreno e utilizar uma script.

É este script que torna isso possível, quando o player chega ao final de um dos terrenos

cria um terreno novo a 200px de distância que corresponde ao comprimento de um

terreno.

56

Player

Para criar o player utilizamos uma esfera do unity.

Para definir os controlos do player utilizei este script que cria um movimento infinito no

eixo X e define as setas no teclado para o poder movimentar no eixo Z. Podemos

observar que existem 2 versões do código da movimentação dentro de um “if” se

executarmos o jogo num computador ou no browser os controlos vão ser definidos para

as setas se utilizarmos num dispositivo mobile vai utilizar o reconhecimento do ecrã

tátil.

Nesta parte do código definimos também a distância que a câmara vai estar do player

para o valor de 10. Como podemos observar na imagem.

57

Obstáculos (Prefbas)

Depois procedemos à construção dos obstáculos do jogo para isso temos de criar aquilo

que chamamos de “prefabs”, prefabs são construções agrupadas que criamos e

podemos fazer aparecer no jogo recorrendo a um script. Para este jogo tivemos de criar

3 prefabs, uma para cada posição.

Para cada prefab construímos 2 triângulos iguais e um objeto invisível que servirá como

“hitbox” da pontuação que iremos abordar mais tarde.

Para tornar o nível aleatório utilizamos um script

Este script determina os parâmetros em que os “Prefabs” nascem no jogo e torna isso

totalmente aleatório.

58

Score

Depois de ter o player, a construção do nível e os obstáculos procedemos à programação

do score do jogo para isso tivemos de criar uma caixa de texto 3d no unity e um script.

Este script define o objeto invisível onde podemos passar com a esfera como um

“scoreup”, ou seja, quando atravessamos aquele objeto aumenta a nossa pontuação em

1.

Define também o conceito de “hightscore”, ou seja, pontuação máxima.

Depois de ter todos os elementos do jogo criados a última coisa que falta é a criação dos

menus para a inicialização do jogo. Este jogo é composto por 3 menus, O menu

principal, o menu que temos durante o jogo e o menu “game-over” todos estes menus

são controlados por um script.

59

Menus

O menu inicial é composto pelo botão do play e por uma imagem inicial.

Os menus que visualizamos enquanto estamos a jogar são composto pela caixa de texto

da pontuação e o botão de pausa.

O menu de game-over é composto pelo background do game-over, a caixa de texto da

pontuação máxima do dispositivo em questão, pelo botão da vida extra (que eremos

abordar mais tarde) e pelo botão do recomeçar.

60

Para controlar qual menu deve aparecer em cada situação utilizámos uma script que

controla os menus.

Dividindo por partes este código:

61

Os menus são controlados por “ifs” e botões, no caso do menu inicial este código define

que o jogo deve começar sempre com o menu inicial ativado e que ao pressionar o

botão play ativamos o menu de jogo e ativa o movimento do jogo.

Este código é executado quando clicamos no botão do play e faz correr o jogo.

Este é o código do botão de pausa, este faz-nos voltar ao menu inicial.

Este é o código que corresponde ao botão de recomeçar, para quando perdemos, este faz

com que o jogo recomece de novo, senão era apenas outro botão de pausa.

62

Este código é o que controla o menu de “game-over” para quando perdemos termos

acesso ao botão de recomeçar ou ao botão da vida extra, este botão da vida extra

permite que possamos continuar a jogar do sítio onde perdemos, para ter acesso a esta

“regalia” utilizamos um método bastante utilizado nos vídeos jogos mobilie.

Este código controla o botão da vida extra mostrando uma publicidade, as publicidades

são funções disponibilizadas pela unity, desta forma podemos trocar uma publicidade

por uma “regalia” no jogo, para isso apenas precisamos de criar uma conta na unity e

ativar a definição no jogo depois é só usar o código correspondente á execução da

publicidade.

Este “if” está no código do menu de “game-over”, para que possamos utilizar o botão da

vida extra apenas uma vez.

63

Depois de acabado todas as scripts e todo o código que controla o jogo tivemos apenas

de acertar pequenos detalhes, como por exemplo a animação de alguns botões do menu.

64

RedOrder

A realização do logo para o “RedOrder” foi bastante simples. Tirando partido que é um

jogo 2d rpg, não há muito para desenvolver, basta seguir o género de logos que os jogos

bem-sucedidos fizeram.

A ideia que tínhamos era de um logótipo de lettering, com estilo de rpg, então fomos

procurar por fonts que nos remetesse para um rpg. Escolhemos a font “04b”

Depois de termos escolhermos a font, começas por dar cor ao logótipo.

Usamos três cores:

Red #dd0a0a

Order #fefefe (Branco)

Sombra #1c1413

Depois de seleciorna-mos as cores, tivemos que fazer algo para fazer o branco sobre-

sair, mas também o logotipo em geral, então fizemos uma sombra à volta de tudo de

modo a fazer uma “caixa” à volta.

Figura 3- Evolução do logótipo

65

Ainda testamos colocar algum tipo de objeto para dar mais vida ao logotipo, mas

decidimos optar pela opção anterior porque fizemos um pequeno pool para saber a

opinião das pessoas.

Estas amostra e mesmo a ideia final para o logo foram feitas no photoshop, mas logo de

seguida passamos e vetorizamos o logotipo no AI para o formato certo.

66

Slider

Pretendemos criar um logótipo que pudéssemos usar como título do jogo no menu

inicial do mesmo.

Para isso recorremos a uma pequena pesquisa, depois dessa pesquisa passámos a fase de

testar ideias.

Depois de várias propostas decidimos desenvolver esta:

Para o desenvolvimento desta proposta utilizámos a font “splatch”, Semi-Bold, com

outline de 2px.

Depois de testar algumas cores já utilizadas nas outras propostas decidimos usar a cor

da esfera do jogo.

#E82323

67

Depois de todos os testes chegamos a este resultado. Para adicionar dimensão para

utilizar no menu do jogo utilizamos uma técnica simples, duplicamos o texto e colamos

em cima e álteramos o de baixo para preto.

Depois alinhamos os dois e aplicamos o efeito de Gaussian blur no de baixo para criar a

sombra.

Chegando assim à versão final.

Figura 4- Icon Playstore

68

Banner

RedOrder

O banner para o vídeo e para o website, foi feito no

Photoshop com uma resolução de 1920 x 664, utilizando os

sprites usados no jogo.

Tivemos que fazer a sombra para todos os objetos presentes

no banner, para isso usamos a pentool e colocamos uma

coloroverlay verde, e de seguida mudamos o modo da layer

para “Pass Through”.

Para finalizar aplicamos um gradiente com o branco para

depois “jogarmos” com isso no site e no vídeo (trailer).

Outro banner criado foi para acrescentar no banner no website.

Este banner foi feito no Photoshop da mesma maneira que o banner anterior, usamos os

sprites do jogo e fizemos a montagem dos mesmos.

69

Slider

Para a elaboração de um Banner para o background do menu principal do jogo

decidimos depois de uma breve pesquisa, fazer um pequeno cartoon de uma praia e com

o logo do jogo.

Para isso recorremos a elementos que pesquisamos para a construção do ambiente como

por exemplo:

Depois da recolha dos elementos procedemos a duplicar e editar alguns deles para

contruir a nosso gosto.

Para criar o background do céu, criamos vários triangulos de tons de azuis diferentes

com opacidades diferentes para o efeito de ceu.

Concluída a parte do fundo inserimos o logo do jogo e criamos um cartoon da esfera e

um círculo amarelo para criar um sol.

Para dar dimensões à bola adicionamos uma sombra utilizando a técnica do gaussian

blur e organizamos os elementos a rigor.

Figura 5- Banner para o website

70

StoryLine

RedOrder

Red Order é um jogo onde o protagonista (Red) explora cada canto do mundo à

procura de uma equipa para vingar a sua aldeia que foi invadida por monstros. Red é

encontrado por um viajante, que o adotou e o ensinou a batalhar.

Parte em que o jogo está situado

Red e o seu grupo acabam por explorar o Reino Gilanor, e nesse reino vão acabar por

encontrar muitas coisas sinistras e suspeitas.

Fim da parte que está o jogo

71

Conclusão

Com um projeto desta dimensão encontramos muitos obstáculos, o primeiro obstáculo

foi a bartop. O problema principal foi arranjar maneira de passar os nossos jogos para a

máquina de modo a que funcione a 100%, mas com o tempo que tínhamos para fazer

todo este projeto decidimos abandonar a ideia.

Outro problema que encontramos foram os bugs ao fazer ambos os jogos, bugs que

tentamos resolver e às vezes só piorávamos a situação. No caso do jogo “RedOrder”,

muitas vezes tivemos que ir em busca de soluções online para tentar resolver bugs

pequenos como por exemplo o sistema da loja onde não conseguíamos abrir a loja caso

o jogador vendesse o inventário todo. No jogo “Slider” o principal bug que encontramos

foi a otimização para mobile, perdemos muito tempo à procura de uma solução lógica

para resolver o problema, mas felizmente conseguimos tornar o jogo mais leve em

termos de tamanho e de grafismo.

Todo este projeto é o nosso primeiro passo para entrar no mercado dos jogos, mas

também da criação de websites. Aprendemos o básico e algumas técnicas avançadas em

C#, e a trabalhar no Unity em geral, e temos como objetivo usar este conhecimento e

projeto para avançar na nossa vida profissional.

Anexos Gantt

Guião para os vídeos RedOrder

Cena Texto/legendas Música Descrição

1 OutsideBox Presents

Dramatic Movie

Trailer

Apresentação da

empresa e do jogo, com

um ligeiro fade no

lettering e na música.

2

------------------------

Dramatic Movie

Trailer

Cena da placa com o

nome do reino principal

da história.

------------------------

Dramatic Movie

Trailer

Conversa com um dos

NPCS que dá uma quest.

------------------------

Dramatic Movie

Trailer

Player a interagir com

objetos no mundo.

------------------------

Dramatic Movie

Trailer

Player a interagir com

objetos no mundo

3 ------------------------

Dramatic Movie

Trailer

Amostra do sistema da

loja.

4

------------------------

Dramatic Movie

Trailer

Amostra do sistema do

inventário e status.

------------------------

Dramatic Movie

Trailer

Player a interagir com

objetos no mundo.

5 ------------------------

Dramatic Movie

Trailer

Amostra do sistema de

combate. Acaba com um

corte repentino a

acompanhar a música.

6 Red Order ----------------------- Aparece o logo do jogo

com um fade simples.

Slider

7 Available On

Outsideboxgames.com -----------------------

Cena curta com a

informação de onde

podemos encontrar o

jogo.

Cena Texto Música Descrição

1 OutsideBox Presents ThemeSong

Apresentação da empresa e do

jogo, com um ligeiro fade no

lettering e na música.

2 Slider ThemeSong

Nome do jogo sempre presente

no vídeo

3 ------------------------ ThemeSong Telemóvel com o jogo aberto a

correr.

4 Level/Speed/Fun ThemeSong Tópicos importantes para

realçar no jogo

5 Availabe on

outsideboxgames.com For android

ThemeSong Cena para indicar onde

podemos encontrar o jogo