Trabalho AP - Relatório Jogo de Luta 1

Ana Serrano, Matilde Casanova, Inês Gonçalves e Vera Menezes
Aplicações informáticas:
Trabalho de pesquisa e programação de um jogo de luta
APLICAÇÕES
INFORMÁTICAS
TRABALHO DE PESQUISA E
PROGRAMAÇÃO DE UM
JOGO DE LUTA
Liceu Camões
12º A Ana Serrano, Inês Gonçalves, Matilde Casanova e Vera Menezes

30/10/2023 - Liceu camões
Disciplina: Aplicações Informáticas B
Professora Mónica Batista

Table of Contents
Introdução.............................................................................................................................................5
Palavras-Chave......................................................................................................................................... 7
ENQUADRAMENTO TEÓRICO..................................................................................................10
INTRODUÇÃO À PROGRAMAÇÃO.........................................................................................10
ALGORITMO............................................................................................................................................ 10
PSEUDOCÓDIGO E FLUXOGRAMAS............................................................................................10
Simbologia de um fluxograma..........................................................................................................................................11
LINGUAGENS NATURAIS E FORMAIS......................................................................................... 11
LINGUAGEM DE PROGRAMAÇÃO................................................................................................ 13
PARADIGMA............................................................................................................................................ 14
PRINCIPAIS PARADIGMAS DA PROGRAMAÇÃO............................................................................................14
INTRODUÇÃO À MULTIMÉDIA.................................................................................................26
INTERATIVIDADE.................................................................................................................................. 26
CARACTERÍSTICAS OU COMPONENTES DA INTERATIVIDADE..........................................................26
NÍVEIS E TIPOS DE INTERATIVIDADE....................................................................................................................27
CONCEITO DE MULTIMÉDIA............................................................................................................ 30
TIPOS DE MEDIA................................................................................................................................... 31
Agrupamento dos diferentes tipos de media conforme a sua natureza espácio- temporal............31
Agrupamento dos diferentes tipos de media de acordo com a sua origem.............................................31
Tipos de media......................................................................................................................................................................... 32
MODOS DE DIVULGAÇÃO DE CONTEÚDOS MULTIMÉDIA.................................................33
On-line:........................................................................................................................................................................................ 33
Offline........................................................................................................................................................................................... 34
DIFERENÇA ENTRE LINEARIDADE E NÃO LINEARIDADE.................................................34
Linearidade............................................................................................................................................................................... 34
Não linearidade...................................................................................................................................................................... 35
TIPOS DE PRODUTOS MULTIMÉDIA............................................................................................ 36
Produtos multimédia baseados em páginas.............................................................................................................36
Produtos multimédia baseados no tempo..................................................................................................................36
FORMATOS DE FICHEIROS DE IMAGENS................................................................................. 37
Tipos de imagem:....................................................................................................................................................................37
Taxa de compressão:........................................................................................................................................................... 38
Tipos de de formatos de ficheiros de imagem:.......................................................................................................38
FORMATOS DE FICHEIROS DE ÁUDIO........................................................................................41
ENQUADRAMENTO TECNOLÓGICO.....................................................................................45
Pogramas usados para a construção do nosso jogo:...........................................................45
 Sublime Text:...............................................................................................................................................................45
 Pixilart:............................................................................................................................................................................. 46
TRABALHO PRÁTICO...................................................................................................................47
File index.html........................................................................................................................................ 49
1
 Head:................................................................................................................................................................................. 49
 Body:................................................................................................................................................................................. 49
 Canvas:............................................................................................................................................................................51
 Scripts:............................................................................................................................................................................ 51
File Index.js.............................................................................................................................................. 52
 Configuração do Canvas:....................................................................................................................................52
 Sprites:............................................................................................................................................................................ 52
 Controle do Teclado:..............................................................................................................................................54
 Função de Animação:............................................................................................................................................54
 Detecção de Colisão e Atualização de Saúde:......................................................................................55
 Fim do jogo:................................................................................................................................................................. 55
 Event Listeners do teclado:...............................................................................................................................56
File classes.js......................................................................................................................................... 57
Class Sprite:............................................................................................................................................................................ 57
Class Fighter:.......................................................................................................................................................................... 58
File utils.js................................................................................................................................................ 60
 Função `rectangularCollision({ rectangle1, rectangle2 })`:...........................................................60
 Função `determineWinner({ player, enemy, timerId })`:..................................................................60
 Temporizador e Função `decreaseTimer()`:............................................................................................61
Ponto de situação:................................................................................................................................ 62
Personagens e background.............................................................................................................. 63
Desenvolvimento de cada ação das personagens:................................................................64
Ponto de situação:................................................................................................................................ 66
Conclusão..........................................................................................................................................67
Bibliografia.........................................................................................................................................69
Figura 1 - Simbologia fluxograma...........................................................................................11

Figura 2 - Objetos.....................................................................................................................22
Figura 3 - Processos de mensagem..........................................................................................22
Figura 4 - Espetáculo de lasers; Performance de multimédia ao vivo.....................................30
Figura 5 - Multimédia para o anúncio do novo carro da Ford em 1987..................................30
Figura 6 - Imagem em vetor.....................................................................................................37
Figura 7 - Imagem em bitmap..................................................................................................37
Figura 8 - Imagens JPG com diferentes taxas de compressão.................................................38
Figura 9- Interface Sublime Text.............................................................................................45
Figura 10- Sublime Text..........................................................................................................45
Figura 11 - PixelArt.................................................................................................................46
Figura 12 – Funcionamento PixelArt.......................................................................................46
Figura 13- Organização do código...........................................................................................47
Figura 14 - Index html; Head...................................................................................................49
Figura 15 - Index html; Body...................................................................................................49
Figura 16 - Index html; Body; Barra saúde Player..................................................................50
Figura 17 - Index html; Body; Temporizador..........................................................................50
Figura 18 - Index.html; Body; Barra Saúde Inimigo...............................................................50
Figura 19 - Index html; Body; Barra Saúde inimigo................................................................50
2
Figura 20 - Index html; Canvas................................................................................................51
Figura 21 - Index html; Scripts................................................................................................51
Figura 22 - Index.js; Configuração do canvas.........................................................................52
Figura 23 - Constante da gravidade e Sprites do background e da loja...................................52
Figura 24- Index.js; Sprite Enemy...........................................................................................53
Figura 25- Index.js; Sprite Player............................................................................................53
Figura 26 - Index.js; Controle do teclado.................................................................................54
Figura 27 - Index.js; Função Animate......................................................................................54
Figura 28 - Index.js; Deteção de colisão..................................................................................55
Figura 29 - Index.js; Fim do jogo.............................................................................................55
Figura 30 - Index.js; Event Listener Keydown........................................................................56
Figura 31 - Index.js; Event Listener Keyup.............................................................................56
Figura 32 - Classes.js; Classe Sprite........................................................................................57
Figura 33 - Classes.js; Class Fighter........................................................................................58
Figura 34 - Classes.js; Class Fighter........................................................................................59
Figura 35- Classes.js; Class Fighter.........................................................................................59
Figura 36- Utils.js; Função colisão..........................................................................................60
Figura 37 - Utils.js; Função Determinar Vencedor..................................................................60
Figura 38 - Utils.js; Temporizador...........................................................................................61
Figura 39 - Estado atual do jogo..............................................................................................62
Figura 40 - Estado atual do jogo..............................................................................................62
Figura 41 - Primeiro e único fundo feito até este momento.....................................................63
Figura 42 - Processo de criação de diferentes posições...........................................................64
Figura 43- Criação dos Keyframes..........................................................................................64
Figura 44 - Criação de posições intermédias...........................................................................65
Figura 45 - Preview da animação.............................................................................................65
Figura 46- Exportação da animação.........................................................................................65
Figura 47 – O velho..................................................................................................................66
Figura 48 – Criação do novo personagem................................................................................66
Tabela 1 - Paradigmas derivados do paradigma declarativo....................................................14

Tabela 2 - Paradigmas derivados do paradigma imperativo....................................................14
Tabela 3 - Interatividade Limitada e Alargada........................................................................28
Tabela 4 - Tipos de media........................................................................................................31
Tabela 5 – Organização tipos de media...................................................................................33
3
Introdução
No âmbito da disciplina de Aplicações Informáticas B, sob a orientação da
professora Mónica Batista, foi realizado um relatório detalhado sobre o
desenvolvimento de um jogo de luta.
O mundo dos jogos digitais oferece um vasto terreno para a criatividade florescer,
onde conceitos teóricos se unem à aplicação prática para dar vida a experiências
interativas envolventes. Este relatório mergulha no processo de conceção e
desenvolvimento de um jogo de luta em pixel art, utilizando princípios de
programação e multimédia para moldar cada aspecto da experiência do jogo.
A base teórica deste trabalho explora conceitos estenciais de programação e

multimédia, abrangendo desde os paradigmas de programação até o design de
jogos e estética visual. Ao compreendermos estes conceitos fundamentais,
podemos aplicá-los de forma eficaz no desenvolvimento do nosso projeto de jogo de
luta em pixel art.
Objetivos do domínio de introdução à Programação:
● Compreender o conceito de algoritmo, reconhecer a importância do
pseudocódigo, dos fluxogramas e da linguagem natural. Distinguir e

identificar linguagens naturais e linguagens formais.
● Compreender o conceito de programação, paradigma de programação e
linguagem de programação; distinguir e caracterizar diferentes paradigmas

de programação; identificar linguagens de programação dentro de cada
paradigma
Objetivos do domínio de introdução à Multimédia:
● Compreender o conceito de multimédia digital; aprender os fundamentos da
interatividade; distinguir e caracterizar diferentes tipos de media; identificar

sistemas multimédia
A realização deste relatório também tem como objetivo promover estratégias que
envolvam aquisição de conhecimento, informação e outros saberes, promover
4
estratégias que envolvam a criatividade e promover estratégias que desenvolvam o
pensamento crítico e analítico.
O objetivo principal deste projeto é criar um jogo de luta em pixel art que ofereça
uma experiência envolvente e cativante para os jogadores. Para alcançar este
objetivo, estabelecemos as seguintes metas específicas:
1. Desenvolvimento Técnico: Utilizando linguagens de programação como

JavaScript, HTML e CSS, vamos programar a lógica do jogo e criar uma
interface de utilizador interativa e funcional.
2. Criação de Pixel Art: Através da plataforma Pixilart, vamos criar sprites

detalhados e animações para as personagens e elementos do jogo,
garantindo uma estética visualmente atraente e coesa.
3. Integração de Mecanismos de Jogo: Vamos implementar mecanismos de

jogo robustos, incluindo movimento fluido das personagens, deteção de
colisões precisa e sistemas de combate dinâmicos.
4. Experiência do Utilizador Aprimorada: Vamos aprimorar a experiência do

utilizador com elementos como efeitos sonoros, animações de transição e
uma interface de utilizador intuitiva e acessível.
Este relatório está estruturado de forma a fornecer uma visão abrangente do

processo de desenvolvimento do jogo, desde a conceção inicial até a
implementação final. Cada seção aborda aspectos específicos do projeto, incluindo
o design de personagens, desenvolvimento técnico, criação de assets visuais, e
integração de elementos de jogabilidade.
5
Palavras-Chave
● Aplicações Informáticas
● Programação
● Algoritmo
● Pseudocódigos
● Fluxograma
● Linguagens naturais e linguagens formais
● Linguagem programação
● Paradigma
● Multimédia
● Interatividade
● Média
● Conteúdos Multimédia
● Linearidade e Não-Linearidade
● Produtos Multimédia
● Imagem
6
● Som
● Ficheiros de Imagem e de Som
● Projeto de jogo
● Desenvolvimento de jogo
● PixilArt
● Linguagem JavaScript
● Design Gráfico
● Colaboração
● Trabalho em equipa
● Aprendizagem interativa
● Website
● Testes
● Plataformas de jogo
● Criatividade
● Evolução
● Troca de ideias
7
● Ambiente de aprendizagem
● Sprite
● Animação
● Colisões
● Movimento
● Personagens
● Ambiente
● Estrutura
● Lógica
● Funções
● Variáveis
● Controlo de eventos
● Deteção de teclas
● Loop do jogo
● Renderização
● Frames
8
● Gravidade
● Ataque
● Saúde
● Interatividade
● Framework
● Vida
● Combate
● Jogabilidade
● Fundo
9
ENQUADRAMENTO TEÓRICO
INTRODUÇÃO À PROGRAMAÇÃO
ALGORITMO
Um algoritmo é uma sequência ordenada de instruções bem definidas e finita em

forma de lista, utilizado para resolver algum tipo de problema computacional ou
efetuar certos tipos de tarefas com base na compreensão das opções disponíveis.
Os algoritmos são também indicações para efetuar cálculos, procestamento de
dados, raciocínios automáticos ou até mesmo para tomada de decisões. Os
algoritmos são as bases da programação que fazem por exemplo tanto
computadores como telemóveis funcionarem e tomarem decisões. Exemplo: receita
de bolos.
PSEUDOCÓDIGO E FLUXOGRAMAS
Pseudocódigo - É uma forma genérica de escrever um algoritmo, utilizando uma

linguagem simples (nativa a quem o escreve, de forma a ser entendida por qualquer
pessoa) sem necessidade de conhecer a sintaxe de nenhuma linguagem de
programação. É, como o nome indica, um pseudocódigo e, portanto, não pode ser
executado num sistema real (computador) — de outra forma deixaria de ser pseudo.
Isto permite ao programador formular as suas ideias sobre a organização e a
sequência de um algoritmo informático sem a necessidade de seguir a sintaxe de
codificação exata. Embora o pseudocódigo seja frequentemente utilizado, não
existe um conjunto de regras para a sua implementação exata.
Fluxograma - É um diagrama que descreve um processo, sistema ou algoritmo de

computador. São amplamente utilizados em várias áreas para documentar, estudar,
planejar, melhorar e comunicar processos complexos por meio de diagramas claros
e fáceis de entender. Fluxogramas usam retângulos, ovais, diamantes e muitas
outras formas para definir os tipos de passos, assim como setas conectoras para
definir fluxo e sequência. Podem ser gráficos simples e desenhados à mão ou
diagramas abrangentes desenhados por computador descrevendo as várias etapas
e rotas. Se considerarmos todas as diversas formas de fluxogramas, vemos que
10
estão entre os diagramas mais comuns do mundo, utilizados por pessoas técnicas e
não técnicas e em variadas áreas de atuação.
Simbologia de um fluxograma
Figura 1 - Simbologia fluxograma
Figura SEQ Figura \* ARABIC 1- Simbologia
LINGUAGENS NATURAIS E FORMAIS
● As linguagens naturais são os idiomas que as pessoas falam, como inglês,
espanhol e francês. Elas não foram criadas pelas pessoas (embora as

pessoas tentem impor uma certa ordem nelas); desenvolveram-se
naturalmente.
● As linguagens formais são linguagens criadas pelas pessoas para aplicações
específicas. Os computadores utilizam uma linguagem formal para

procestarem informações (linguagens de programação como Java, Python e
Ruby são alguns exemplos).
Ambiguidade:
As linguagens naturais são cheias de ambiguidade e as pessoas lidam com Isto

usando pistas contextuais e outras informações. As linguagens formais são criadas
para ser quase ou completamente inequívocas, ou seja, qualquer afirmação tem
exatamente um significado, independentemente do contexto.
11
Redundância:
Para compensar a ambiguidade e reduzir equívocos, as linguagens naturais usam

muita redundância. As linguagens formais são menos redundantes e mais concisas.
12
Literalidade:
As linguagens naturais são cheias de expressões e metáforas. Se eu digo “Caiu a

ficha”, provavelmente não há ficha nenhuma na história, nem nada que tenha caído
(esta é uma expressão para dizer que alguém entendeu algo depois de certo
período de confusão). As linguagens formais têm significados exatamente iguais ao
que exprestam.
Como crescemos a falar linguagens naturais, às vezes é difícil nos ajustarmos a

linguagens formais. A diferença entre a linguagem natural e a formal é semelhante à
diferença entre poesia e prosa, mas vai além:
1. Poesia: As palavras são usadas tanto pelos sons como pelos significados, e o
poema inteiro cria um efeito ou resposta emocional. A ambiguidade não é
apenas comum, mas muitas vezes proposital.
2. Prosa: O significado literal das palavras é o mais importante e a estrutura

contribui para este significado. A prosa é mais acessível à análise que a
poesia, mas muitas vezes ainda é ambígua.
Programas:
O significado de um programa de computador é inequívoco e literal e pode ser

entendido inteiramente pela análise dos símbolos e da estrutura.
As linguagens formais são mais densas que as naturais, então exigem mais tempo
para a leitura. Além dIsto, a estrutura é importante, então nem sempre é melhor ler
de cima para baixo e da esquerda para a direita. Em vez dIsto, aprende-se a
analisar o programa primeiro, identificando os símbolos e interpretando a estrutura.
E os detalhes fazem diferença. Pequenos erros em ortografia e pontuação, que
podem não importar tanto nas linguagens naturais, podem fazer uma grande
diferença em uma língua forma.
13
LINGUAGEM DE PROGRAMAÇÃO
Uma linguagem de programação é uma forma de se comunicar com um computador

e dar-lhe instruções para executar uma determinada tarefa. É composta por um
conjunto de regras sintáticas e semânticas que permitem aos programadores
escreverem código de computador de uma forma compreensível para a máquina.
Uma das principais metas das linguagens de programação é que programadores

tenham uma maior produtividade, permitindo exprestar suas intenções mais
facilmente do que quando comparado com a linguagem que um computador
entende nativamente (código de máquina). Linguagens de programação são
ferramentas importantes para que programadores e engenheiros de
software possam escrever programas mais organizados e com maior rapidez.
Linguagens de programação também tornam os programas menos dependentes de

computadores ou ambientes computacionais específicos. Isto acontece porque
programas escritos em linguagens de programação são traduzidos para o código de
máquina do computador no qual será executado em vez de ser diretamente
executado.
14
PARADIGMA
Um paradigma pode ser entendido como um tipo de estruturação ao qual a

linguagem deverá respeitar.
Os paradigmas indicam-nos a forma como devemos operar de maneira a

chegarmos ao resultado pretendido.
O que vai definir o paradigma é o modo como tratamos o nosso problema.
Aplicando Isto na matemática:
Quando temos por exemplo a equação x + 2x = 0 e queremos encontrar o valor de

x. Qual método será o melhor a utilizar?
Podemos resolver a partir de dois paradigmas:
● Através da fórmula resolvente, mas este seria um paradigma bastante
trabalhoso
● Colocar o x em evidência resolvendo assim de uma maneira mais eficiente e
fácil
Pondo em prática na programação podemos concluir que para escolher bem é

preciso antes conhecer as alternativas
PRINCIPAIS PARADIGMAS DA PROGRAMAÇÃO
Existem pelo menos 9 paradigmas de programação:
- Imperativo, declarativo, funcional, lógico orientado a objetos, orientado a eventos
Consoante a linguagem usada podemos utilizar um ou mais destes.
Os paradigmas imperativo e declarativo foram os primeiros a serem concebidos e os

outros vieram como derivações
Imperativo Declarativo
Estruturada Procedimentall Orientado Funcional Reativa

a objetos Lógica
Tabela 1 - Paradigmas derivados do paradigma imperativo Tabela 2 - Paradigmas derivados do paradigma declarativo
15
PARADIGMA IMPERATIVO
Os paradigmas de programação imperativa são focados em instruções exatas que

devem ser passadas ao computador na sequência em que serão executadas.
Aqui, basicamente o programador instrui a máquina sobre como devem ser

computados os processos, em uma espécie de passo a passo detalhado dos
procedimentos.
Linguagens que suportam este tipo de paradigma:
● Cobol - Bancos, Seguradoras e cartões de crédito
● Fortran - Aplicações científicas computacionalmente intensivas
(meteorologia)
● Pascal - Programação modular
Utilização:
● Em projetos nos quais não se espera que haja mudanças significativas ao
longo do tempo
● Construção de aplicações que não demandam manutenção no curto prazo ou
mudanças muito frequentes
Vantagens:
● Eficiente, estável e bastante flexível
Desvantagens:
● O código fonte gerado é de difícil legibilidade
16
PARADIGMA DECLARATIVO
- Neste tipo de paradigma focamo-nos mais no que deve ser resolvido e não tanto
em como deve ser feito, ou seja, focamo-nos em definir a lógica de programação e
não em detalhes do fluxo de controle. Instruímos a máquina sobre “o que fazer” e
não “como fazer”! Aqui, falamos sobre declarar propriedades do resultado que
esperamos obter e não em como computar esta lógica.
- Há declarações iniciais de verdades lógicas que são imutáveis, assim depois de

serem realizadas algumas interações entre elas o resultado encontrado será igual
(para declarações anteriormente feitas).
Isto faz contraste com o paradigma imperativo em que um mesmo código pode
retornar diferentes resultados.
Vantagens:
- Não é necessário manipular componentes, uma vez que ao indicar no início o que
deve ser exibido com base no estado atual, a interface do utilizador regenera-se
completamente de forma automática quando ocorre uma mudança de estado,
realizando assim uma recomposição. Isto simplifica muito o processo de atualização
da IU, uma vez que com cada recomposição a interface do utilizador será gerada no
estado correto sem a necessidade de manipular os seus componentes, reduzindo
assim a probabilidade de erros.
Desvantagens:
- Não oferece alocação explícita de memória ou declaração explícita de variáveis,

necessários para a resolução de muitos problemas reais.
● Lisp - Mirai
● Javascript - WordPress e Linkedin
17
● SQL - Sistemas de Gerenciamento de Banco de Dados e aplicações de
business intelligence
● HTML - Páginas Web
18
PARADIGMA REATIVA
É orientado a fluxo de dados e propagações de estados.
Estes fluxos de dados (que também são chamados de streams) são em grande
parte assíncronos, ou seja, as operações são independentes umas das outras e não
precisam ser executadas em uma sequência específica.
Todas as ações quando falamos sobre programação reativa são transmitidas e

detectadas por um fluxo de dados, como eventos, mensagens, chamadas e até
mesmo as falhas. Aplicações reativas, então, são constituídas por reações a
alterações nestes fluxos de dados.
● Java - Google
● JavaScript - WordPress e Linkedin
● Ruby - Hulo, Airbnb e Shopify
● Kotlin - Uber, Netflix, Amazon
Vantagens:
- Simplifica a composição de fluxos de dados
- Evita o retorno de chamadas
- Aumenta o nível de abstração do código
- Maior escalabilidade dos projetos
Desvantagens:
- Curva de aprendizagem. Escrever aplicações baseando-se em fluxos de dados

assíncronos é algo geralmente bem complicado no começo, pois é uma linha de
pensamento com a qual a maioria das pessoas não está habituada
19
PARADIGMA ESTRUTURADO
O paradigma estruturado determina que as instruções passadas ao computador

podem ser formadas por 3 estruturas, sendo:
● Sequência: as instruções são codificadas na sequência a serem executadas.
● Condição: um bloco de código só é executado se uma condição for

verdadeira (IF 's/ELSE' s, SWITCH com CASE 's).
● Repetição: um trecho de código pode ser executado repetidas vezes. (FOR,

WHILE, recursividade).
● C - Jogos telemóvel
● Basic - Microsoft Office
● Pascal - Programação modular
● Cobol - Bancos, Seguradoras e cartões de crédito
Vantagens:
- Os problemas podem ser divididos em vários subproblemas, a boa legibilidade e a

boa compreensão da estrutura deste paradigma motivam os programadores a
iniciarem a programação pelo modelo estruturad
Desvantagens:
- Os dados são separados das funções. Mudanças na estrutura dos dados acarreta
alteração em todas as funções relacionadas. Gera sistemas difíceis de serem
mantidos;
20
PARADIGMA PROCEDIMENTAL
Determina que as instruções a serem passadas ao computador podem ser

agrupadas em procedimentos (equiparável a métodos, funções, rotinas). Os
procedimentos podem ser invocados durante a execução do software e visam a
reutilização do código em pontos diferentes do mesmo, já que eles devem suportar
a especificação de argumentos, variáveis locais, chamadas recursivas, dentre
outros.
● Python - Indústria do campo científico (Astronomia, Medicina) e Google
● PHP - Spotify, Wikipedia, Facebook, Uber, Google
Vantagens:
- Permite o uso de procedimentos, desta forma fica mais fácil aproveitar a lógica e
código.
21
PARADIGMA FUNCIONAL
Este paradigma tem origem na matemática, logo a sua base é o procestamento de

diversas funções matemáticas, o que contrasta com a programação imperativa onde
se enfatiza mudanças no estado do programa.
As suas funções computam um resultado que depende apenas dos valores das
entradas
Este paradigma trata a computação como uma avaliação de funções matemáticas e

que evita futuras modificações no estado do programa. Focando nas expressões em
vez de comandos, as expressões são utilizadas para cálculo de valores imutáveis.
Este paradigma usa memória automática, o que elimina possíveis erros, “efeitos
colaterais”, nos cálculos matemáticos das funções
A fundamentação teórica deste paradigma é o Cálculo Lambda ou Cálculo-λ,

proposto por Alonzo Church na década de 30, que é um sistema formal para
definição, aplicação e recursão de funções.
● Lisp - Mirai
● Scheme - Bigloo, Stalin
● Haskell - Facebook
● Scala - Netflix
● Racket - Linguagem design
Vantagens
22
● O processo de alocação da memória é automático, eliminando erros de
alocação na função, garantindo assim que que a saída da função será

sempre a mesma dado um mesmo conjunto de dados
Desvantagens
● Alguns construtores básicos sobre programação (alocamento explícito de
memória), são dados como inexistentes, estes construtores ainda funcionam

só que de forma menos explícita
PARADIGMA LÓGICO
Este paradigma é baseado em factos, este usa o que sabe para desenvolver um
resultado onde todos os factos sejam verdadeiros e criam um cenário final
Este tipo de paradigma é muito utilizado para a inteligência artificial porque chega
aos resultados desejados através da análise lógico-matemática.
Por exemplo, Todas as escolas dão aulas, o liceu camões é uma escola, logo pela
lógica, o liceu camões dá aulas.
Os principais elementos deste paradigma são proposições regras de inferência e

busca
Vantagens:
- Possui a princípio todas as vantagens do paradigma funcional. E permite

concepção da aplicação em um alto nível de abstração.
Desvantagens:
- Variáveis de programa não possuem tipos, nem são de alta ordem.
● Prolog - Inteligência artificial
● Planner – Microsoft
23
24
PARADIGMA ORIENTADO A OBJETOS
Neste tipo de paradigma, ao invés de construirmos sistemas com um conjunto

estrito de procedimentos, utilizamos uma lógica próxima do mundo real, lidando com
objetos, estruturas que já conhecemos e sobre as quais possuímos grande
conhecimento e compreensão. É baseada na composição e interação de diversas
unidades de softwares denominados objetos. Este tipo de paradigma parte do
princípio de que tudo é objeto, ou seja, o tudo o que existe são os objetos
Figura SEQ Figura \* ARABIC 2- Objetos

Figura 2 - Objetos
O Funcionamento de um software orientado a objetos dá-se através de uma troca

de mensagens entre estes objetos. Mensagens são requisições enviadas de um
objeto para outro, para que o objeto “recetor” forneça algum resultado desejado
através da execução de uma operação.
Este paradigma tem uma grande preocupação em esconder o que não é importante
e em realçar o que é importante. Nele, implementa-se um conjunto de classes que
definem objetos. Cada classe determina o comportamento (definido nos métodos) e
estados possíveis (atributos) de seus objetos, assim como o relacionamento entre
eles.
Figura 3 - Processos de mensagem
25
● Smalltalk - Visualworks
● Python - Industria do campo científico (Astronomia, Medicina) e Google
● Ruby - Airbnb, Hulu e Shopify
● C++ - Google
● Object Pascal;
● Java - Google
VANTAGENS
Este tipo de paradigma possui todas as vantagens do paradigma imperativo; a

modificação de um módulo na implica a modificação de outros, quanto mais um
módulo for independente maior a chance de este ser usado em outras aplicações
26
PARADIGMA ORIENTADO A EVENTOS
Em vez de seguir o fluxo de controle padronizado, como outros paradigmas, os

controlos de fluxo de paradigmas orientados a eventos são guiados por indicações
externas, chamadas eventos, ou seja, é um paradigma onde a execução do código
é determinada pelo disparo de eventos.
Utilização:
● Jogos
● Formulários
● Java - Google
● C++ - Google
● C# - Delivery Hero, Venmo e VTEX
● Python - Industria do campo científico (Astronomia, Medicina) e Google
● Lua - Angry Birds, The sims
● PHP - Spotify, Wikipedia, Facebook, Uber, Google
● Ruby - Hulo, Airbnb e Shopify
● Perl - Booking, TicketMaster
● Objective-C - Uber, Pinterest, Instagram e Snapchat
27
● Dart - Cred, Ninja Van
● Swift - Uber, Glovo
● Scala - Twitter, DeliveryHero
Vantagens:
● Confiável
A geração de código baseado no conceito de objetos e classes fornece uma grande

independência ao programa. Assim, qualquer intervenção que seja necessária não
afetará outros pontos do sistema. Isto confere robustez e confiabilidade
● Oportuno
A criação paralela de código torna todo o processo bastante ágil ganha-se em

tempo e eficiência, tornando um software com paradigma POO oportuno. Várias
equipes podem trabalhar no mesmo projeto de forma independente.
● Ajustável
Esta característica diz respeito ao processo de manutenção do código-fonte. Ao

atualizar uma parte pequena, o conceito de herança garante que, automaticamente,
todas as partes que utilizarem tal método serão beneficiadas.
Esta característica torna especial o paradigma de POO, pois é muito comum que
equipes de desenvolvimento de softwares sejam escaladas para trabalhar com
softwares já existentes. Desta forma, torna-se mais fácil executar o trabalho de
manutenção.
● Extensível
O uso do princípio da reutilização do software adiciona funcionalidades ao sistema

já existente. Não é preciso “reinventar a roda”, reescrevendo o código. Isto confere
maior capacidade de estender um sistema já existente.
28
● Reutilizável
Um mesmo objeto pode ser utilizado em aplicações diferentes, desde que sejam
compatíveis. Se tivéssemos um objeto “aluno”, por exemplo, ele poderia ser
utilizado em sistemas de empresas diferentes, desde que elas contassem com
alunas e alunos na sua estrutura.
Assim, tanto uma escola de música como uma academia poderiam fazer uso do
objeto “aluno” em um possível software para uso próprio, pois ambas as empresas
têm estas pessoas como seu público.
● Natural
O conceito de POO que traz para a programação o mundo concreto, tal qual vemos
no dia-a-dia, faz com que se ganhe naturalidade. O ponto de vista humano se torna
mais próximo do virtual. Assim, pensa-se no problema geral, em vez de concentrar o
foco em pormenores.
29
INTRODUÇÃO À MULTIMÉDIA
INTERATIVIDADE
A interatividade é a possibilidade de o utilizador poder dar instruções ao sistema

através de ações realizadas neste e nos seus objetos. O sistema, em resposta a
estas instruções, irá adaptar-se e transformar-se, criando assim situações.
CARACTERÍSTICAS OU COMPONENTES DA INTERATIVIDADE
● Comunicação: Meios entre o utilizador e a máquina. Estabelece uma ligação
mútua entre o utilizador e o sistema, através de sistemas periféricos ligados

ao sistema
Ex: Monitor, rato
● Feedback: Processos que manipulam os objetos do ambiente virtual, em
questão, a partir de estímulos sensoriais recebidos do sistema pelo utilizador
Ex: Barras de progresso
● Controlo e resposta: Permite o utilizador tomar o comando da relação,
regulando e atuando nos comportamentos dos objetos do ambiente virtual
● Tempo de resposta: Intervalo de tempo que decorre entre a ação do utilizador
sobre algum objeto do ambiente virtual e a correspondente resposta do

sistema
● Adaptabilidade: Capacidade do sistema de se adaptar ou seja consegue
alterar o ambiente virtual em função das ações do utilizador sobre os objetos

deste
● Co-criatividade - O utilizador tem controlo da sequência, do ritmo e do estilo
das ações desenvolvidas sobre o conteúdo do ambiente virtual
30
31
NÍVEIS E TIPOS DE INTERATIVIDADE
Tipos interatividade
● Interatividade Linear
A sequência das ações está já pré-definida pelo sistema, apenas cabendo ao

utilizador o papel de decidir o sentido em que estas decorrem no ambiente
virtual, somente acionar a anterior ou a seguinte, o que faz dela, geralmente,
mais simples de estabelecer, e também, uma interatividade desenvolvida de
forma reativa
Exemplo: Super Mário- O utilizador decide o caminho a percorrer pela

personagem
● Interatividade de suporte
O sistema de apoio ao utilizador desde pequenas e simples

mensagens/comentários de auxílio a complexos manuais, acerca da sua
performance, com vista a orientá-lo e a ajudar no seu desempenho, o que torna
esta interatividade, desenvolvida de forma reativa
Exemplo: Just Dance - O utilizador vai recebendo pontuação e dicas para

melhorar o seu desempenho
● Interatividade Hierárquica
O sistema cria um conjunto predefinido de possibilidades e apresenta-o ao

utilizador, permitindo-lhe criar um itinerário, o que faz desta interatividade,
desenvolvida de forma reativa
Exemplo: Driveclub - O utilizador pode escolher o caminho que vai percorrer
● Interatividade sobre objetos
O utilizador através de certos dispositivos apontadores, com um rato, obtém

respostas por parte do sistema, pela ativação de objetos que alteram o seu
32
funcionamento, de acordo com diversos fatores, e assim torna esta
interatividade, desenvolvida de forma proactiva
Exemplo: Pet Vet- O utilizador aciona objetos que alteram o funcionamento do

sistema
Níveis interatividade
● Níveis segundo a relação Homem-máquina
● Níveis segundo a ação sensorial
Níveis segundo a relação Homem-máquina
● Interatividade reativa
O Utilizador tem um controlo limitado sobre o conteúdo do ambiente virtual
A interação e o feedback são controladas pelo sistema e por Isto seguem uma
trajetória predefinida, ou seja, o sistema controla o desenrolar da ação dos
utilizadores
● Coativa
O utilizador tem um controle parcial sobre o ambiente virtual conseguindo

manipular a sequência, o ritmo e o estilo das ações desenvolvidas sobre o
conteúdo
● Proactiva
O utilizador tem um controlo quase total sobre o ambiente virtual, podendo

manipular a estrutura e o conteúdo das ações desenvolvidas, ou seja, o
utilizador intervém dinamicamente no desenvolvimento do conteúdo deste
Podemos assim considerar dois tipos de controlo por parte do utilizador:
- Controlo sobre a estrutura
33
- Controlo sobre o conteúdo
Para além disto ainda pode ser dividido entre limitado e alargado
Controlo do conteúdo
Limitado Alargado
Controlo da Limitado Reativa Coativa

estrutura
Alargado Coativa Proativa
Tabela 3 - Interatividade Limitada e Alargada
34
Níveis segundo a ação sensorial
● Elevada
Todos ou quase todos os seus sentidos são estimulados, permitindo-lhe uma

sensação de completa imersão no ambiente virtual, para além de ter um maior
controlo sobre o decorre da ação
Ex: Este nível de interatividade pode ser encontrado em simuladores e no cinema

em 4D
● Média
Apenas alguns dos sentidos do utilizador são estimulados, tendo somente um

controlo limitado sobre o desenrolar da ação no ambiente virtual, tornando-se um
pouco menos imersivo
Ex: Este nível de interatividade pode ser encontrado em jogos, onde o utilizador
apenas tem de ativar comandos pré-definidos.
● Baixa
Poucos ou apenas um dos sentidos do utilizador são estimulados, tornando o

ambiente virtual nada imerso, colocando-se com um mero espectador e não
interagindo na ação o que faz com que o utilizador não se sinta integrado no
ambiente virtual
Ex: Este nível de interatividade pode ser encontrado em ações simples como no
visionamento de um filme onde o utilizador se restringe a ver e ouvir, não existindo
uma interação.
35
CONCEITO DE MULTIMÉDIA
Em latim, multi (multus) significa múltiplos ou numerosos, enquanto média (medium)

significa meio; ou seja, a palavra multimédia refere-se à utilização de vários meios
em simultâneo na transmissão de uma informação.
A comunicação através de multimédia facilita bastante a compreensão e

aprendizagem já que é muito parecida com a comunicação humana cara a cara.
Algumas citações importantes para o conceito de multimédia:
“Multimédia Digital, ou simplesmente multimédia, define-se como a integração de até seis tipos de
media num ambiente interactivo e colorido por computador.”
(Grupta, 1993)
“Multimédia é qualquer combinação de texto, arte gráfica, som, animação e vídeo apresentada ao
utilizador por um computador ou por outro meio electrónico”
(Vaughan, 1996)
Figura 5 - Multimédia para o anúncio do novo carro da Figura 4 - Espetáculo de lasers; Performance de
Ford em 1987 multimédia ao vivo
36
TIPOS DE MEDIA
Tipos de media
Animações Áudio Gráficos Imagens Textos Videos
Tabela 4 - Tipos de media
Agrupamento dos diferentes tipos de media conforme a sua natureza

espácio- temporal.
1. Estáticos (Discretos ou espaciais) - Representam o grupo de elementos de

informação que são independentes do tempo, alterando apenas a sua
dimensão no espaço, ou seja, ao longo do tempo são sempre iguais em
termos de estrutura, apresentação, etc.
- Imagem, Gráficos, Texto
2. Dinâmicos (Contínuos ou temporais) - Referem-se aos tipos de informação

multimédia cuja apresentação exige uma reprodução contínua à medida que
o tempo passa, ou seja, ao longo do tempo este tipo de média vai se
adaptando e mudando de acordo com a estrutura da apresentação entre
outros.
- Áudio, Vídeo, Animações
Agrupamento dos diferentes tipos de media de acordo com a sua

origem
1. Capturados- Englobam aqueles grupos de elementos que resultam de uma

recolha do exterior para o computador.
- Vídeos, Áudios, Imagens
2. Sintetizados- São aqueles grupos de elementos que são produzidos pelo

próprio computador através de utilização de hardware e softwares
específicos.
- Texto, Gráficos, Animação
37
Tipos de media
● Imagem- Resultado de um processo de captura do mundo real através da
utilização de um scanner ou de uma câmara digital, ou podem ser geradas

inteiramente por computador através da utilização de programas adequados.
● Gráficos- Constituídos por linhas e curvas definidas matematicamente. Uma
vantagem deste tipo de representação gráfica reside na facilidade de

manipulação das formas ou objetos desenhados sem perda de informação.
● Texto- Uma das formas mais utilizadas para divulgação de informação,
adequado para transmitir informação estencial de um modo preciso
● Áudio- Reprodução eletrónica do som nos formatos analógico ou digital. O
formato analógico corresponde a áudio gravado nas cassetes ou discos de

vinil, enquanto que o áudio digital corresponde a um formato compatível com
o procestamento computacional. Utilização da audição, ao contrário de todos
os outros que tiram partido da visão
● Vídeo- Seja sob a forma analógica ou digital, é uma representação eletrónica
de uma sequência de imagens. Tal como o áudio, pode ser representado no

formato analógico ou digital. O formato analógico corresponde, por exemplo,
ao vídeo criado por uma câmara de vídeo analógica. As imagens que
constituem a sequência de vídeo designam-se por fotogramas (do inglês,
Frames). O intervalo de tempo que decorre entre a apresentação de dois
fotogramas sucessivos é constante. Logo, o número de fotogramas que são
apresentados por segundo, ou frame rate, não varia.
● Animações - Começou por ser um tipo media exclusivamente destinado ao
entretenimento, mas foi crescendo até se tornar numa das formas mais
eficazes e expressivas para comunicar uma ideia. Corresponde ao
movimento sequencial de um conjunto de gráficos, no formato digital, que vão
sofrendo alterações ao longo do tempo. Atualmente a animação é
38
maioritariamente produzida em computador, através de softwares
específicos.
NATUREZA
ESTÁTICOS DINÂMICOS
ORIGEM
Imagem Vídeo
CAPTURADOS
- Áudio
Texto -
SINTETIZADOS
Gráficos Animação
Tabela 5 – Organização tipos de media
MODOS DE DIVULGAÇÃO DE CONTEÚDOS MULTIMÉDIA
On-line:
- No meio de divulgação on-line os conteúdos multimédia estão logo disponíveis

uma vez que esta é divulgada através de rede local, conjuntos de rede, world wide
web, e monitores ligados a computadores, onde os dados estão armazenados em
disco, e não estão ligados em rede.
Vantagens:
● Através da divulgação de conteúdos multimédia online é possível aceder a

várias aplicações de diferentes pessoas, pois existe uma troca de informação
entre vários computadores diferentes. A informação divulgada online é
acessível a uma maior variedade de pessoas
Desvantagens:
● Normalmente são ficheiros pesados o que dificulta ao utilizador ter acesso via
on-line, pois é mais demorado aceder aos mesmos
39
40
Offline
- No meio de divulgação offline são utilizados suportes de armazenamento,

habitualmente do tipo digital sendo utilizados o CD e o DVD, do tipo ótico e
semicondutores como as pens drive
Vantagens:
- É mais fácil ter acesso aos dispositivos que façam a divulgação destes conteúdos
de multimédia, como CD e DVD, visto que têm uma maior capacidade de
armazenamento.
Desvantagens:
- O transporte dos dispositivos o que elimina bastante acessibilidade
DIFERENÇA ENTRE LINEARIDADE E NÃO LINEARIDADE
Apesar da linearidade ser um conceito utilizado em diversas áreas como a

matemática, a física, a linguista, etc., na informática é a forma como os conteúdos
de multimédia são transmitidos e recebidos. na tecnologia ela está relacionada com
a organização sequencial dos dados.
Linearidade
- É a receção da informação por parte do utilizador através do computador, não

podendo alterar o modo como é transmitida e apresentada.
- Esta é a forma de aprendizagem mais utilizada, o professor ensina e o aluno limita-

se a recolher a informação.
Vantagens:
● É objetiva e a informação é recebida com bastante rapidez
Desvantagens:
41
● É difícil de o utilizador se habituar devido ao facto de não conseguir interagir
com a máquina
Exemplo: Um espectador de televisão não pode alterar a sequência da

apresentação, embora possa alterar certas definições como o volume e a luz, está
limitado apenas a assistir ao que é transmitido. Apesar da evolução das tecnologias
de TV ter tornado possível ao espectador visualizar aspectos como o resultado de
um jogo de futebol ou a disposição da equipa em campo de um jogo que esteja a
ser transmitido continua limitado a apenas ver o jogo sem poder decidir o resultado.
Não linearidade
- É a receção de informação através do computador, mas neste caso pode ser

alterada, ou seja, o utilizador não está limitado a receber informações
Vantagens:
- A não-linearidade torna a aprendizagem mais fácil para o utilizador, pois ele

interage com o computador e com o que está a aprender.
Desvantagens:
- Pode ser mais confuso para o utilizador interagir num ambiente não-linear,
podendo “perder-se” no sistema, devido a ser ele que escolhe um de vários
caminhos que tem à sua disposição.
42
TIPOS DE PRODUTOS MULTIMÉDIA
Produtos multimédia baseados em páginas
● Os tipos de produtos multimédia baseados em páginas são desenvolvidos
segundo uma estrutura organizacional do tipo espacial. Esta é uma

organização semelhante à utilizada nos media tradicionais em suporte de
papel como revistas, livros e jornais. Em alguns produtos multimédia, os
utilizadores podem consultar as suas páginas utilizando as hiperligações
existentes entre elas. Neste tipo de produtos, as componentes interativa e
temporal podem estar presentes através da utilização de botões, ícones e
scripts.
Exemplos: Livros, Revistas; Jornais
Ferramentas de trabalho:
● Texto – “Microsoft Word” e “Microsoft Publisher”;
● Gráficos vetoriais – “Macromedia Freehand” e “Adobe Illustrator”;
● Imagens bitmap – “Adobe Photoshop” e “Sherif Photo Plus”
Produtos multimédia baseados no tempo
● Os tipos de produtos baseados no tempo são desenvolvidos segundo uma
estrutura organizacional assente no tempo. Esta é uma organização com

uma lógica semelhante à utilizada na criação de um filme ou animação.
Durante o desenvolvimento deste tipo de produtos multimédia os conteúdos
podem ser sincronizados, permitindo, desta forma, definir o momento em que
dois ou mais deles estão visíveis.
Ferramentas de trabalho:
43
● Áudio digital – “Sonic Foundry SoundForge” e “Goldwave Digital Audio Editor”;
● Animação – “Effect 3D Studio” e "Macromedia Flash";
● Vídeo – “Adobe Première” e “Microsoft Windows Movie Maker”.
44
FORMATOS DE FICHEIROS DE IMAGENS
Tipos de imagem:
● Imagens em bitmap: As imagens em bitmap são as mais utilizadas, sendo
compostas por pixels. Quando aproximamos uma imagem,

observamos pequenos pontos quadrados coloridos – a menor parte da
imagem – que formam o desenho completo quando em conjunto.
● As imagens em vetor, apesar de serem somente reproduzidas através de
pixels, não são construídas por eles. Sendo assim, estas imagens são
definidas como sendo constituídas por linhas, curvas e formas
preenchidas. As imagens em vetor podem ser redimensionadas a qualquer
tamanho sem que percam a sua qualidade, diferentemente das imagens em
Figura 7 - Imagem em bitmap Figura 6 - Imagem em vetor

bitmap.
45
Taxa de compressão:
● A compressão diz respeito a um procedimento computacional que tem o
objetivo de diminuir o tamanho final do ficheiro de imagem. Sendo assim,

após esta técnica, a totalidade dos dados que são requeridos para
representar uma imagem é reduzida.
● A taxa de compressão é a razão entre o tamanho final da imagem
comprimida e o tamanho sem compressão. Sendo assim, quanto menor a
Figura
Figura 8 SEQ Figura
- Imagens JPG\*com
ARABIC 8-taxas
diferentes Imagens JPG com diferentes
de compressão
imagem comprimida, maior a taxa de compressão.
Tipos de de formatos de ficheiros de imagem:

● JPG:
- Formato aceite como standard para imagens e formato digital. Além dIsto, o JPG
possui uma taxa de compressão bastante alta, podendo fazer com que uma imagem
de resolução Full HD ocupe muito pouco espaço no disco rígido. Contudo, Isto só
acontece devido à perda da qualidade. A taxa de compressão do JPG é ajustável,
Isto significa que é possível equilibrar a qualidade com o tamanho da imagem. Ou
seja, em casos em que a taxa de compressão é mínima, o ficheiro ainda não ocupa
tanto espaço no disco.
● GIF:
- O GIF foi o formato de imagem desenvolvido pela CompuServe que possui

limitações de qualidade, bem adequado aos monitores e à conexão discada da
época. É utilizado para web design e animação gráfica e contêm por vezes texto.
Podem incluir píxeis transparentes, o que permite que seja utilizado sobre fundos
46
coloridos. São bastante utilizados nas redes sociais. Não são indicados para
fotografias ou imagens ricas em cor
47
● PNG:
- É uma alternativa ao formato GIF sendo também utilizado para fotografia ou

imagens com fundos transparentes. Possui bastantes vantagens em relação ao GIF,
uma vez que o PNG possui uma variação de cores infinitamente maior. Para além
dIsto, implica uma menor perda de qualidade de imagem comparada com o jpg que
por sua vez ocupam mais espaço. Por todos estes motivos, o PNG é o formato mais
indicado para ser utilizado em estratégias digitais.
● BMP:
- O formato BMP preserva todos os detalhes do ficheiro original. No entanto, esta

extensão possui uma taxa de compressão muito baixa, fazendo com que os
ficheiros fiquem muito pesados se a resolução for mantida.
● PSD:
- O formato de imagem PSD é amplamente utilizado por profissionais do design. Isto

acontece, pois, este é o formato aplicado nas versões do Photoshop, pois consegue
suportar diversas ferramentas avançadas como máscaras, camadas, canais alpha,
etc. Desta forma, os profissionais da área optam pelo formato para manter a
estrutura original da imagem. Posteriormente, estas são convertidas em outros
formatos que possuem mais compatibilidade, como o PNG, JPG ou TIFF, para
resoluções maiores.
● TIFF
- O formato TIFF utiliza a compressão sem perdas. Por Isto, é considerado o melhor
formato de alta qualidade para se trabalhar. Além dIsto, este formato de imagem é
bastante utilizado para ficheiros de impressão.
Devido à sua versatilidade, como a manutenção da resolução, a possibilidade de

trabalhar com páginas e camadas, por exemplo, este formato também é bastante
pesado.
48
● PDF
- Este formato de imagem foi criado pela Adobe em 1993 devido à necessidade de
existir um tipo de ficheiro que fosse universal. Ou seja, era necessário um formato
que fosse compatível independentemente do software utilizado, do sistema
operativo, de sua resolução e tamanho. Além dIsto, PDFs possuem alta
versatilidade uma vez que armazenam bitmaps, vetores, textos, etc.
● SVG
- O SVG é um formato vetorial que é compatível com a maior parte dos

navegadores web modernos. Sendo assim, este formato pode ser utilizado em
website, blog, entre outros. Além dIsto, o SVG pode ser animado através de
programação em HTML 5.0.
● RAW
- É o formato utilizado principalmente por câmeras digitais, que realizam a

compressão sem que existam perdas na resolução ou informação. No entanto, não
há um padrão que normalize todas as imagens no formato RAW, fazendo com que
este não seja compatível com muitos programas.
● WEBP
- Este formato foi desenvolvido pelo Google em 2010, com o objetivo de fazer com
que as imagens fiquem até 40% menores do que o JPEG sem que se perca a
qualidade. Além dIsto, este formato é visto por alguns como sendo o futuro formato
padrão da internet.
● AVIF
- O mais recente formato de todos, o AVIF, consegue garantir 20% a mais de

otimização que o WebP e JPEG. AVIF significa AV1 Image File Format, e é um
formato extremamente leve e sem royalties— considerado até mesmo pela
Netflix como o melhor formato já criado.
49
50
FORMATOS DE FICHEIROS DE ÁUDIO
A maneira mais fácil de pensar em formatos de áudio e como estes diferem uns dos
outros é dividindo-os em três grupos principais:
● Formato de áudio não comprimido - Estes são recipientes que

armazenam dados áudio em bruto sem qualquer tipo de redução de
qualidade ou tamanho. Embora estes ficheiros possam ser muito maiores do
que ficheiros de áudio comprimido, fornecerão o máximo de detalhe e
fidelidade de áudio.
1. AIFF - O Audio Interchange File Format é outro dos padrões desenvolvidos

pela Apple. Trata-se de um ficheiro do tipo Lossless e sem compressão. Isto
significa que ele apresenta alta fidelidade, mas ao custo de espaço de
armazenamento. Este padrão foi desenvolvido como uma resposta ao padrão WAV,
da Microsoft, tendo melhor suporte à inserção de metadados (informações
complementares como dados de autoria, de álbum, arte de capa, entre outros).
2. DSD - O Direct Stream Digital (DSD) é o formato utilizado nos Super Audio
CDs. Este trata o áudio de um modo completamente diferente dos outros, utilizando
um único bit com taxas elevadas de amostragem, resultando em ficheiros de alta
qualidade. Contudo, esta tecnologia de áudio não usa compressão, sendo por Isto
incompatível com o atual modelo de streaming.
3. WAV - O WAV (Waveform Audio File Format) é o padrão de áudio sem

compactação e sem perdas desenvolvido pela Microsoft em 1991, em parceria com
a IBM. Ficheiros WAV são bastante comuns para gravações e operações de edição
de áudio em DAWs, por preservarem todas as informações da gravação original. O
problema deles, assim como dos ficheiros AIFF, é o espaço de armazenamento
necessário para guardá-los. Outro fator que pesa contra o WAV é o suporte limitado
à edição de metadados.
51
● Formato de áudio comprimido com perdas - Estes são métodos de
compressão que eliminam os dados dentro do fluxo de áudio sem causar
grande impacto no som. No entanto, há informação que é atirada para fora.
1. MP3 - Este é o formato de áudio mais comum para a audição casual. Ele
foi utilizado durante muito tempo como o padrão para conversões de
músicas e também para a distribuição digital em serviços P2P mais
antigos. É a abreviação de MPEG Audio Layer III. Grande parte da
popularidade do formato MP3 vem do tamanho reduzido dos ficheiros. Isto
é possível graças à compactação e também porque os ficheiros são
gerados cortando uma série de informações sonoras. Por Isto considera-
se o MP3 com um formato de áudio comprimido com perdas (quase
impercetíveis ao ouvido humano).
2. AAC - A sigla AAC significa Advanced Audio Coding. Este padrão foi
projetado para ser o sucessor do MP3, tendo diferenciais importantes
como o suporte a mais canais de áudio, maiores taxas de bits e mais
transparência de áudio, quando comparados a ficheiros equivalentes
codificados no padrão MP3. Atualmente, o formato de ficheiro AAC tem
amplo suporte, mas foi a sua utilização como o padrão do iTunes que fez
com que ele ganhasse popularidade rapidamente. A Apple utiliza o AAC
também no iPhone e em seu serviço de música, o Apple Music. Outras
empresas que também utilizam o AAC hoje são Sony (PlayStation),
Nintendo (consoles diversos) e Google, com o YouTube.
Resumindo, o AAC é um formato comprimido com perdas, mas mostra-se
superior ao MP3 em termos de qualidade sonora
3. MQA - O termo MQA é uma sigla para Master Quality Authenticated, algo
que já dita o foco deste codec em alta qualidade de áudio. Ficheiros
codificados com MQA são produzidos de forma a serem compactos o
suficiente para utilização em serviços de streaming, mas sem sacrificar a
qualidade de áudio (embora haja perdas na conversão).
52
4. Ogg Vorbis - O Ogg Vorbis é uma combinação de Codec e Container para
ficheiros de áudio. Ele utiliza compressão de dados e resulta em uma
pequena perda na qualidade. Contudo, este formato apresenta
desempenho e qualidade de áudio superiores ao MP3, ao mesmo tempo
em que gera ficheiros menores. Este equilíbrio entre tamanho e qualidade
foi o que levou o serviço de streaming Spotify a adotar o formato Ogg
Vorbis.
5. Opus - O formato foi pensado para a codificação moderna de ficheiros de

áudio, com foco no armazenamento e streaming de dados. Outro
destaque é o suporte a até 255 canais. Segundo especialistas, o Opus
tem recursos que produzem ficheiros com qualidade superior à do padrão
AAC, dependendo das configurações. Os padrões de qualidade mais
baixos são muito úteis para serviços como áudios de voz, dada a baixa
latência das operações de codificação e descodificação. Contudo, um
desafio é a compatibilidade.
6. WMA - O Windows Media Audio foi criado pela Microsoft para tentar
competir com o MP3 e o AAC. Contudo, o seu alcance ficou bastante
restrito ao ambiente Windows, não tendo adoção em outras plataformas e
players.
53
● Formato de áudio comprimido sem perdas- Estes são métodos de
compressão de dados que podem tornar os ficheiros mais pequenos,
preservando simultaneamente a integridade total da informação encontrada
no fluxo de áudio
1. FLAC - Free Lossless Audio Codec, é um formato de ficheiro de áudio

comprimido, mas diferentemente dos anteriores ele é considerado sem
perdas (lossless). Isto significa que ele mantém todas as propriedades do
áudio original, sem fazer cortes de frequências ou qualquer outro sacrifício
na qualidade sonora. Ele tem ganho bastante popularidade recentemente
por proporcionar uma experiência Hi-Res, sem consumir tanto espaço de
armazenamento quando comparado a outros formatos lossless
disponíveis atualmente. Em comparação com ficheiros WAV ou AIFF, o
FLAC tem apenas metade do tamanho, mantendo o mesmo grau de
fidelidade sonora.
2. ALAC - O ALAC (Apple Lossless Audio Codec) foi criado pela Apple no
ano de 2004 como uma resposta ao FLAC. Ele também utiliza técnicas de
compressão de dados para reduzir o tamanho dos ficheiros, mantendo
integralmente a qualidade de áudio. Por Isto ele é considerado como
Lossless.
3. APE - O formato APE, da Monkey Audio, é voltado à codificação de

ficheiros de áudio sem perdas, mas com alto grau de compressão. Isto
resulta numa economia de espaço maior. Contudo, esta compressão
significa que o procestador terá que trabalhar de forma mais intensa na
altura de reproduzir os ficheiros, justamente para decodificá-los em tempo
real. Como consequência, o formato não é amplamente difundido,
havendo poucos audio players compatíveis no mercado.
54
ENQUADRAMENTO TECNOLÓGICO
Pogramas usados para a construção do nosso jogo:
 Sublime Text:
Sublime Text é um editor de código-fonte multi-plataforma e shareware com uma

interface de programação de aplicações. Ele suporta muitas linguagens de
programação e linguagens de marcação.
Figura 9- Sublime Text
Figura 10- Interface Sublime Text
Liguagem de programação:
- JavaScript:
Utilizámos JavaScript para programar a estrutura funcional do jogo, o que

corresponde ao paradigma de programação imperativo. No contexto do
desenvolvimento do jogo, este paradigma permite estabelecer a relação técnica e
tática entre os elementos do jogo, como personagens, ambientes e interações do
jogador. Por exemplo, utilizamos JavaScript para definir as regras de movimento
dos personagens, deteção de colisões, atualização contínua do estado do jogo e
controlo de eventos do teclado. JavaScript também suporta o paradigma orientado a
objetos, o que nos permite organizar o código em classes e objetos para uma
melhor estruturação e reutilização.
55
- HTML:
Utilizámos HTML para a parte visual do jogo, representando o paradigma de

programação declarativo. No contexto do desenvolvimento de jogos, os elementos
visuais apresentados pelo jogo são fundamentais para criar uma experiência
imersiva para o jogador. HTML é utilizado para criar a estrutura básica da página
web que hospeda o jogo, incluindo elementos como o canvas onde o jogo é
desenhado, botões de controlo, caixas de diálogo e outros elementos de interface
do utilizador. Estes elementos visuais facilitam a compreensão das ações do
jogador e do estado do jogo, fornecendo feedback visual e interação direta.
 Pixilart:
Pixilart é uma aplicação baseada na web que permite aos utilizadores criar pixel art,
um estilo de arte que utiliza pixels individuais para formar imagens ou animações.
Esta aplicação segue o paradigma de programação interativa, onde os utilizadores
podem interagir diretamente com a interface para criar e editar obras de arte.
Ao utilizar o Pixilart, os utilizadores são guiados através de tutoriais e ferramentas

que os ajudam a compreender e a utilizar eficazmente as funcionalidades da
aplicação. Este método de aprendizagem reflete o paradigma de programação
educacional, onde o utilizador é capacitado a aprender através da exploração
prática e guiada.
Além dIsto, o Pixilart permite aos utilizadores partilhar as suas criações com uma
comunidade online, promovendo a colaboração e a partilha de conhecimento. Este
aspeto da aplicação reflete o paradigma social da programação, onde os
utilizadores podem interagir e colaborar uns com os outros para criar e partilhar arte
pixelizada e animações GIF.
56
Figura 12 – Funcionamento PixelArt Figura 11 - PixelArt
TRABALHO PRÁTICO
Organizamos o nosso código em várias unidades lógicas e estruturais para facilitar

o desenvolvimento, manutenção e colaboração. Utilizámos uma abordagem que
divide o código em diferentes linguagens e funcionalidades, resultando em quatro
ficheiros diferentes. Estes ficheiros consistem em um ficheiro HTML e três ficheiros
Figura 13- Organização do código

JavaScript.
1. HTML:
- Este ficheiro HTML serve como o ponto de entrada para o nosso jogo. Ele
contém a estrutura básica da página web e inclui referências aos ficheiros
JavaScript e às imagens utilizadas no jogo.
2. JavaScript:
- Temos três ficheiros JavaScript, cada um responsável por diferentes aspetos do

jogo:
- Index.js: Este ficheiro contém a lógica principal do jogo, incluindo a

inicialização do canvas, a definição das regras do jogo, o controlo dos eventos do
teclado e a atualização contínua da lógica do jogo.
- Classes.js: Aqui definimos as classes e métodos relacionados com as

personagens do jogo, como a sua criação, animações, movimentos e interações
com o ambiente e entre si.
57
- Utils.js: Este ficheiro contém funções utilitárias e de suporte que são usadas
em várias partes do jogo. Isto inclui cálculos matemáticos, deteção de colisões,
manipulação de sprites e outras tarefas comuns.
3. Pasta "img":
- Esta pasta contém todas as imagens utilizadas no jogo, incluindo sprites para as
personagens, backgrounds, e quaisquer outros elementos gráficos necessários.
Ao dividir o código desta forma, torna-se mais fácil encontrar e gerir diferentes
partes do nosso projeto. Além disso, esta abordagem promove a reutilização de
código e colaboração entre membros da equipa. Cada ficheiro e pasta tem um
propósito claro e contribui para a criação de um jogo coeso e funcional.
58
File index.html
Este código HTML contém a estrutura básica de uma página web para um jogo de
luta.
 Head:
Esta seção contém a definição do estilo global para todos os elementos da página.
Usa a propriedade `box-sizing: border-box; ` para garantir que o tamanho total de

um elemento inclua o preenchimento e a borda, tornando mais fácil o cálculo das
dimensões.
Figura 14 - Index html; Head
 Body:
Dentro do body, há um div principal que atua como um recipiente para todos os
elementos do jogo.
Dentro deste div principal, há três seções:
Figura 15 - Index html; Body

59
1. Barra de Saúde do Jogador:
Uma barra de saúde para o jogador, representada por uma div com fundo amarelo.
A largura desta div é ajustada dinamicamente conforme a saúde do jogador.
Figura 16 - Index html; Body; Barra saúde Player
2. Temporizador:
Uma div para exibir o temporizador do jogo, inicialmente definida como "10".
Figura 17 - Index html; Body; Temporizador
3. Barra de Saúde do Inimigo:
Igual à barra de saúde do jogador, mas para o inimigo.
Debaixo destas seções, há uma div com o id "displayText", que é usada para exibir
mensagens durante o jogo, como "Empate" ou "Vitória". Inicialmente, ela está oculta
(`display: none; `).
60
Figura 18 - Index.html; Body; Barra Saúde Inimigo
 Canvas:
Depois das divs, há uma tag `<canvas>`, que será usada para renderizar gráficos e
animações do jogo.
Figura 20 - Index html; Canvas
 Scripts:
Os scripts necessários para o jogo são incluídos no final do body. Cada script
desempenha um papel fundamental na construção do jogo, organizando a lógica e
as funcionalidades em diferentes partes para facilitar a manutenção e o
desenvolvimento. Eles trabalham em conjunto para criar a experiência completa do
jogo para os jogadores.
- "character-selection.js": Script responsável pela seleção de personagens antes

do jogo começar. Este ainda se encontra em teste e por esta razão ainda não temos
um file dele
- "js/utils.js": Script que contém funções utilitárias úteis para o jogo.
- "js/classes.js": Script que contém definições de classes JavaScript para os

elementos do jogo.
- "index.js": Script principal que contém a lógica do jogo, como movimento,

animações, detecção de colisão, etc.
Figura 21 - Index html; Scripts
61
File Index.js
Este código JavaScript implementa a lógica básica de um jogo de luta,

incluindo o movimento de personagens, ataque, deteção de colisão e
atualização da saúde.
 Configuração do Canvas:
Começamos por selecionar o elemento <canvas> do HTML e obter o contexto 2D

para desenhar.
Em seguida, definimos as dimensões do canvas como 1024 pixels de largura e 576

pixels de altura.
O canvas é preenchido com uma cor de fundo preta utilizando fillRect()
Figura 22 - Index.js; Configuração do canvas
 Sprites:
Uma constante `gravity` é definida com um valor de 0.7, que será aplicada como a
gravidade no jogo.
São criados sprites para o fundo (background), uma loja (shop), o jogador (player) e
o inimigo (enemy).
Cada sprite tem uma posição inicial, uma imagem associada, uma escala e um
número máximo de frames para animação.
Os sprites do jogador e do inimigo possuem informações adicionais como

velocidade, caixa de ataque e diferentes animações para diferentes estados.
62
Figura 23 - Constante da gravidade e Sprites do background e da loja

Figura 24- Index.js; Sprite Player
Figura 25- Index.js; Sprite Enemy
63
 Controle do Teclado:
É definido um objeto keys para rastrear quais teclas estão a ser pressionadas.
As teclas relevantes para o jogador (a, d, w, setas) são monitorizadas para controlar
o movimento e os ataques
Figura 26 - Index.js; Controle do teclado
 Função de Animação:
Este excerto de código controla a animação e o movimento dos personagens no

jogo. A função animate() é chamada repetidamente para atualizar a tela do jogo.
No início de cada atualização, o canvas é preenchido com uma cor de fundo preta.
Depois, os sprites do fundo, loja, jogador e inimigo são atualizados para refletir as
suas posições e estados atuais.
O movimento do jogador é controlado pelas teclas A e D, que o fazem mover para a

esquerda e para a direita, respetivamente. O inimigo também se move
horizontalmente, usando as teclas de seta esquerda e direita. A velocidade de
movimento é ajustada conforme as teclas são pressionadas.
Para além do movimento horizontal, a animação dos personagens também é

atualizada com base na sua velocidade vertical. Se um personagem estiver a
mover-se para cima, a animação de salto é ativada; se estiver a cair, a animação de
queda é exibida
64
Figura 27 - Index.js; Função Animate
 Detecção de Colisão e Atualização de Saúde:
Uma função chamada rectangularCollision é utilizada para verificar se há colisão

entre os sprites do jogador e do inimigo.
Se uma colisão ocorrer durante um ataque, a saúde (health) do oponente é
Figura 28 - Index.js; Deteção de colisão

reduzida.
 Fim do jogo:
 O jogo termina quando a saúde de um dos personagens (jogador ou inimigo)

chega ao zero.
 A função determineWinner() é chamada para determinar o vencedor com

base na saúde restante.
Figura 29 - Index.js; Fim do jogo
65
 Event Listeners do teclado:
Dois event listeners são definidos para capturar eventos de pressionar e soltar
teclas do teclado.
Eles atualizam o estado das teclas no objeto keys conforme as teclas são
pressionadas ou soltas.
Figura 30 - Index.js; Event Listener Keydown
File classes.js
Figura 31 - Index.js; Event Listener Keyup
66
File classes.js
Este código define uma classe base `Sprite` e uma subclasse `Fighter` que
herda do `Sprite`. A classe `Sprite` lida com funcionalidades básicas de
sprites, como desenho e animação, enquanto a classe `Fighter` adiciona
funcionalidades específicas de um personagem de luta, como saúde, ataque
e troca de sprites.
Class Sprite:
1. Construtor: Inicializa propriedades como posição, origem da imagem,

escala, framesMax e deslocamento.
2. Método `draw()`: Desenha o sprite no canvas usando a imagem
fornecida e informações de posição.
3. Método ànimateFrames()`: Lida com a animação dos frames
incrementando a propriedade `framesCurrent` com base num intervalo
especificado em `framesHold`. Método ùpdate()`: Chama `draw()` e
ànimateFrames()` para atualizar a aparência do sprite e a animação dos
frames.
Figura 32 - Classes.js; Classe Sprite
67
Class Fighter:
1. Construtor: É uma extensão do construtor do `Sprite` e adiciona

propriedades específicas do lutador, como velocidade, cor, saúde,
attackBox, etc.
2. Método ùpdate()`: Substitui o método ùpdate()` da classe `Sprite` para
adicionar funcionalidades de atualização específicas do lutador, como
posição do attackBox, movimento e gravidade.
3. Método àttack()`: Ativa uma ação de ataque para o lutador ao trocar
para o sprite de ataque e definir a flag ìsAttacking`.
4. Método `switchSprite()`: Permite que o lutador troque o seu sprite atual
com base no nome do sprite fornecido.
Figura 33 - Classes.js; Class Fighter 68

Figura 34 - Classes.js; Class Fighter
Figura 35- Classes.js; Class Fighter
69
File utils.js
Este código implementa funcionalidades cruciais para detetar colisões entre

retângulos, determinar o vencedor do jogo e criar um temporizador para limitar a
duração da partida.
 Função `rectangularCollision({ rectangle1, rectangle2 })`:
- Esta função verifica se dois retângulos colidem entre si.
- Recebe dois objetos retângulo como parâmetros, `rectangle1` e `rectangle2`.
- Verifica se as áreas de ataque dos retângulos se sobrepõem, o que indica uma

colisão.
- Retorna a verdadeiro se houver colisão e a falso caso contrário.
Figura 36- Utils.js; Função colisão
 Função `determineWinner({ player, enemy, timerId })`:
- Esta função determina o vencedor do jogo com base na saúde dos jogadores.
- Recebe os objetos `player` e ènemy`, bem como o `timerId` (identificador do

temporizador) como parâmetros.
- Primeiro, interrompe o temporizador utilizando `clearTimeout(timerId)`.
- Em seguida, exibe uma mensagem indicando o vencedor ou um empate,

dependendo da saúde dos jogadores.
- Se a saúde dos jogadores for igual, é declarado um empate.
- Se a saúde do jogador for maior do que a do inimigo, o jogador é declarado

vencedor.
- Se a saúde do jogador for menor do que a do inimigo, o inimigo é declarado

vencedor
70
 Temporizador e Função `decreaseTimer()`:
- A variável `timer` é inicializada com o valor 60, o que representa a duração do

temporizador em segundos.
- A função `decreaseTimer()` é responsável por decrementar o temporizador a cada

segundo.
- Utiliza `setTimeout` para chamar recursivamente a função a cada segundo.
- A cada chamada, diminui o valor da variável `timer` e atualiza o elemento HTML

com o valor do temporizador.
- Quando o temporizador atinge o zero, a função `determineWinner()` é chamada

para determinar o vencedor do jogo com base na saúde dos jogadores.
Figura 38 - Utils.js; Temporizador
71
Ponto de situação:
O progresso da programação do jogo encontra-se numa fase positiva, com várias

etapas importantes já concluídas. A estrutura fundamental do jogo, incluindo o
ambiente de desenvolvimento e o canvas, foi implementada com sucesso. Além
disso, a lógica de movimento das personagens e a interação com o ambiente estão
a funcionar corretamente. As animações das personagens foram integradas no jogo,
conferindo dinamismo às ações dos jogadores. Foram identificados e corrigidos
alguns erros, como problemas de sincronização e falhas na deteção de colisões.
Neste momento, estamos a planear adicionar novas funcionalidades, como sistemas

de pontuação e itens colecionáveis, para enriquecer a experiência de jogo.
Figura 39 - Estado atual do jogo Figura 40 - Estado atual do jogo
72
Personagens e background
Inicialmente, concebemos duas personagens distintas e pouco convencionais para o

nosso jogo de luta: uma bruxa e um dinossauro. Optamos por esta abordagem para
conferir ao nosso jogo uma identidade única e original. Inspiramo-nos em elementos
de outros jogos, não necestariamente apenas de jogos de luta, para criar o cenário
de fundo.
Começamos o desenvolvimento da multimédia pela criação do fundo do jogo,

utilizando a aplicação pixel art. Definimos as dimensões do fundo como 1024x576
pixels, correspondentes ao tamanho da janela de visualização do nosso jogo.
Ao fazê-lo, procuramos criar um ambiente coeso e cativante que complementasse

as características das nossas personagens e proporcionasse uma experiência
visualmente apelativa aos jogadores.
Figura 41 - Primeiro e único fundo feito até este momento
Após completarmos o primeiro plano de fundo, avançámos para a criação das

personagens. Cada uma delas foi concebida para executar sete ações distintas,
sendo necessário criar várias poses para cada uma destas ações, de modo a
conferir-lhes uma sensação de movimento contínuo e fluído.
73
Tomemos como exemplo um dos ataques da personagem chamada Kenji.
Utilizando a aplicação pixel art, conseguimos criar as diversas poses de cada ação
de forma rápida e fácil. Uma das vantagens deste método é que, ao adicionarmos
uma nova moldura para uma pose diferente, a moldura anterior permanece visível
em segundo plano. Isto permite uma transição suave entre as poses, facilitando a
visualização e a criação das variações de movimento ao longo da animação. Este
recurso proporciona uma abordagem intuitiva e eficiente na criação das poses,
contribuindo para um processo de desenvolvimento fluido e eficaz das personagens.
Figura 42 - Processo de criação de diferentes posições
Desenvolvimento de cada ação das personagens:
1. Definição da Resolução e Tamanho dos frames : A resolução e o tamanho

dos frames são decisões importantes que afetam diretamente a qualidade e
a fluidez da animação. Recomenda-se escolher uma resolução adequada ao
estilo de pixel art desejado, como 32x32 pixels ou 64x64 pixels, e determinar
o número de frames necessárias para cada segundo de animação.
2. Criação dos Keyframes: Os keyframes são os frames -chave que definem

os principais momentos da animação. Nesta fase, são desenhadas as poses
fundamentais que representam os momentos extremos ou significativos da
ação
3. .Interpolação e Preenchimento: Após criar os keyframes, os frames

intermediárias são preenchidas para criar uma transição suave entre os
74
Figura 43- Criação dos Keyframes
momentos-chave da animação. Este processo envolve a adição de detalhes
e ajustes graduais nas poses existentes para garantir uma transição fluida e
natural entre os frames .
4. Animação e Revisão: Os frames são organizadas em sequência e a

animação é visualizada para verificar a fluidez dos movimentos e a transição
entre os frames . Durante esta fase, são feitos ajustes para melhorar a
qualidade e o timing da animação.
5. Exportar e Salvar: Quando a animação está completa e satisfatória, cada

frame é exportada individualmente e salva num formato de imagem
adequado para uso futuro, como PNG ou GIF.
Figura 46- Exportação da animação
Figura 45 - Preview da animação
75
Ponto de situação:
Até ao momento, concluímos o desenvolvimento de duas personagens principais do

jogo, cada uma com todas as ações necessárias para a animação. Ambas as
personagens foram meticulosamente desenhadas em pixel art, com múltiplas poses
para cada ação, garantindo uma variedade de movimentos fluidos e realistas
durante o jogo.
Além dIsto, estamos atualmente em processo de desenvolvimento da terceira

personagem do jogo, denominada "O Velho". Já foram criadas as primeiras poses
para a sua primeira ação, marcando o início do processo de animação para este
personagem. Assim como as personagens anteriores, cada ação do Velho será
cuidadosamente planeada e desenhada em pixel art, mantendo a consistência
estilística e a qualidade visual do jogo.
Este progresso é um marco significativo no desenvolvimento do jogo, uma vez que

as personagens são elementos estenciais para a narrativa e a jogabilidade. Com
cada personagem trazendo a sua própria personalidade e conjunto único de
habilidades, estamos a trabalhar arduamente para garantir que o jogo ofereça uma
experiência envolvente e cativante para os jogadores.
Figura 47 – O velho
Figura 48 – Criação do novo personagem
76
Conclusão
A procura de conceitos que esclareçam dúvidas pré-existentes relativas á disciplina

de Aplicações Informáticas e a criação de um projeto baseado nestes foi o que
levou á realização deste relatório. Esta é uma disciplina que nos ensina conceitos
tanto sobre programação como multimédia que nos são extremamente uteis no dia
a dia.
Apesar de estarmos mais ligados ao domínio da multimédia, pois este se encontra

em tudo o que fazemos no dia a dia, a partir deste relatório conseguimos retirar
ensinamentos novos e que nos ajudarão no futuro. Em termos do lado de
programação, não conhecíamos praticamente nenhum dos conceitos, e devido a
isto acabamos também por ter mais dificuldade em obter a informação, mas depois
desta adquirida notamos que podíamos relacionar muitas definições com conceitos
que já sabíamos previamente.
O processo de desenvolvimento do jogo tem vindo a representar um desafio

estimulante e enriquecedor, permitindo aplicar os conhecimentos adquiridos na
disciplina de Aplicações Informáticas B. Ao longo deste percurso, temos vindo a
explorar conceitos de programação e multimédia de forma prática e interativa,
consolidando a nossa compreensão teórica.
A criação das personagens e do ambiente do jogo envolveu a aplicação de técnicas

de design gráfico, proporcionando uma experiência de aprendizagem única e
divertida. Utilizámos a aplicação Pixilart como uma ferramenta valiosa para criar e
animar os elementos visuais do jogo, dando vida às personagens e ao cenário.
Além disso, a implementação das mecânicas de jogo, como movimentação,

interação entre personagens e deteção de colisões, exigiu a aplicação de conceitos
de algoritmos e lógica de programação. Através da linguagem JavaScript,
desenvolvemos a estrutura funcional do jogo, proporcionando uma experiência de
jogo envolvente e desafiadora.
Durante todo o processo, a colaboração e o trabalho de equipa tem sido

fundamentais para enfrentar os desafios e superar as dificuldades encontradas. A
77
troca de ideias, a partilha de conhecimentos e o apoio mútuo permitem-nos alcançar
resultados satisfatórios e promover um ambiente de aprendizagem colaborativo.
A realização deste trabalho também nos ajudou a melhorar as nossas capacidades

de retirar informações fidedignas da internet e conseguir filtra-las.
As nossas capacidades a trabalhar com diferentes programas, como o Word, o

Sublime texto ou o PixelArt, também foram melhoradas.
Acreditamos que a realização deste relatório tenha sido uma mais valia, pois a
informação que retiramos dele será bastante útil tanto para a nossa vida pessoal
como para a nossa vida académia.
Esta experiência tem vindo a proporcionar-nos uma visão mais abrangente sobre o
processo de criação de jogos e contribuiu significativamente para o nosso
crescimento pessoal e académico.
Como próximos passos, planeamos continuar o desenvolvimento do jogo,

implementando atualizações e melhorias com base nos testes que realizaremos.
Além disso, estamos a considerar a possibilidade de expandir o projeto para outras
plataformas, através da criação de um website, o que permitirá que qualquer pessoa
tenha acesso ao jogo. Esta expansão abrirá novas oportunidades de alcance e
interação com os jogadores. Desta forma, esperamos continuar a aprender e a
evoluir no mundo da programação e da multimédia, enquanto continuamos a
desenvolver e aperfeiçoar o nosso jogo.
78
Bibliografia
Paradigma. (01 de 10 de 2023). Obtido de https://pt.wikipedia.org:

https://pt.wikipedia.org/wiki/Paradigma
Catarino, G. M. (07 de 04 de 2021). tipos-de-ficheiros-de-imagem-mais-comuns. Obtido de

https://www.gstudio.pt: https://www.gstudio.pt/dicas/tipos-de-ficheiros-de-imagem-
mais-comuns
2136.html. (20 de 01 de 2011). Obtido de https://multimediaparatotos.blogs.sapo.pt:

https://multimediaparatotos.blogs.sapo.pt/2136.html
multimedia. (2010-2023 ). Obtido de https://conceito.de: https://conceito.de/multimedia
conceito-multimedia. (2014). Obtido de https://conceitos-basicos-de-multimedia.webnode.pt:

https://conceitos-basicos-de-multimedia.webnode.pt/conceito-multimedia/
br/blog/algoritmo. (07 de 02 de 2019). Obtido de https://rockcontent.com:

https://rockcontent.com/br/blog/algoritmo/
Awari Code. (28 de 07 de 2022). paradigmas-de-programacao/?

utm_source=blog&utm_campaign=projeto+blog&utm_medium=Paradigmas%20de
%20Programação:%20guia%20completo%20para%20iniciantes. Obtido de
https://awari.com.br: https://awari.com.br/paradigmas-de-programacao/?
utm_source=blog&utm_campaign=projeto+blog&utm_medium=Paradigmas%20de
%20Programação:%20guia%20completo%20para%20iniciantes
Roveda, U. (10 de 06 de 2021). blog/paradigmas-de-programacao. Obtido de

https://kenzie.com.br: https://kenzie.com.br/blog/paradigmas-de-programacao/
Tedesco, K. (12 de 2017). blog/linguagens-e-paradigmas-de-programacao. Obtido de

https://www.treinaweb.com.br: https://www.treinaweb.com.br/blog/linguagens-e-
paradigmas-de-programacao
blog/cultura-general/los-10-tipos-de-paradigma-ms-importantes.html. (s.d.). Obtido de

https://pt.thpanorama.com: https://pt.thpanorama.com/blog/cultura-general/los-10-
tipos-de-paradigma-ms-importantes.html
Malaquias, J. R. (02 de 2016). romildo/2017-1/bcc222/slides/01-introducao.pdf. Obtido de

http://www.decom.ufop.br:
http://www.decom.ufop.br/romildo/2017-1/bcc222/slides/01-introducao.pdf
79
questoes-de-concursos/questoes/2089ccc7-df. (2019). Obtido de
https://www.qconcursos.com:
https://www.qconcursos.com/questoes-de-concursos/questoes/2089ccc7-df
Manssour, I. H. (s.d.). ~gustavo/disciplinas/pli/material/paradigmas-aula12.pdf. Obtido de

https://www.inf.pucrs.br:
https://www.inf.pucrs.br/~gustavo/disciplinas/pli/material/paradigmas-aula12.pdf
Grupta, F. e. (1993). Conceito de multimédia.
Vaughan. (1996).
Vaughan. (1996).
Scarpim, M. (14 de 02 de 2023). mobile-os-beneficios-do-paradigma-declarativo. Obtido de

https://www.venturus.org.br: https://www.venturus.org.br/blog/mobile-os-beneficios-
do-paradigma-declarativo/
Mendes, T. (20 de 06 de 2022). linguagem-de-programacao. Obtido de

https://napratica.org.br: https://napratica.org.br/linguagem-de-programacao/
Leocádio, R. (2019). formatos-de-imagem. Obtido de https://www.futuraexpress.com.br:

https://www.futuraexpress.com.br/blog/formatos-de-imagem/
https://www.lucidchart.com/pages/pt/o-que-e-um-fluxograma. (s.d.). Obtido de

https://www.lucidchart.com/pages/pt/o-que-e-um-fluxograma:
https://www.lucidchart.com/pages/pt/o-que-e-um-fluxograma
o-que-e-um-fluxograma. (s.d.). Obtido de https://www.lucidchart.com:

https://www.lucidchart.com/pages/pt/o-que-e-um-fluxograma
Marques, R. (21 de 08 de 2023). linguagem-natural-entenda-o-que-e-e-a-importancia-na-

era-de-chatbots/. Obtido de https://www.cedrotech.com:
https://www.cedrotech.com/blog/linguagem-natural-entenda-o-que-e-e-a-importancia-
na-era-de-chatbots/
Nilson. (2007). index.php?option=com_content&view=article&id=25:comprestao-de-

imagens-jpeg&catid=8&Itemid=126. Obtido de http://www.institutopoincare.com.br:
http://www.institutopoincare.com.br/site/index.php?
option=com_content&view=article&id=25:comprestao-de-imagens-
jpeg&catid=8&Itemid=126
80
Mafalda, J. M. (2016). multimedia/conceito. Obtido de https://mafaanna.wixsite.com:
https://mafaanna.wixsite.com
Gamedev. (n.d.). t/blogs/. From https://www.gamedev.net: https://www.gamedev.net/blogs/
Brackeys. (n.d.). @Brackeys/videos. From https://www.youtube.com/@Brackeys/videos:

https://www.youtube.com/@Brackeys/videos
Brackeys. (n.d.). @Brackeys/videos. From https://www.youtube.com:

https://www.youtube.com/@Brackeys/videos
Lague, S. (n.d.). @SebastianLague/videos. From https://www.youtube.com:

https://www.youtube.com/@SebastianLague/videos
Gdquest. (n.d.). @Gdquest/videos. From https://www.youtube.com/@Gdquest/videos:

https://www.youtube.com/@Gdquest/videos
Dan. (n.d.). @DanMoranGameDev/videos. From https://www.youtube.com:

https://www.youtube.com/@DanMoranGameDev/videos
BlackThorn. (n.d.). /@Blackthornprod/videos. From https://www.youtube.com:

https://www.youtube.com/@Blackthornprod/videos
Monkey, C. (n.d.). @CodeMonkeyUnity/videos. From https://www.youtube.com:

https://www.youtube.com/@CodeMonkeyUnity/videos
Milko, P. (n.d.). watch?v=DX3IkR_fjkQ. From https://www.youtube.com/:

https://www.youtube.com/watch?v=DX3IkR_fjkQ
Reece. (n.d.). watch?v=v-ibXM3xBjg. From https://www.youtube.com:

https://www.youtube.com/watch?v=v-ibXM3xBjg
workshop, E. (n.d.). watch?v=z0zd9jFRwbs. From https://www.youtube.com:

https://www.youtube.com/watch?v=z0zd9jFRwbs
James, B. (n.d.). watch?v=WUlgvNe4BLU. From https://www.youtube.com:

https://www.youtube.com/watch?v=WUlgvNe4BLU
(n.d.). From https://gameprogrammingpatterns.com: https://gameprogrammingpatterns.com
81

Trabalho AP - Relatório Jogo de Luta 1

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Trabalho AP - Relatório Jogo de Luta 1

Enviado por

Direitos autorais:

Formatos disponíveis

Ana Serrano, Matilde Casanova, Inês Gonçalves e Vera Menezes

Trabalho de pesquisa e programação de um jogo de luta

12º A Ana Serrano, Inês Gonçalves, Matilde Casanova e Vera Menezes

Professora Mónica Batista

Figura 1 - Simbologia fluxograma...........................................................................................11

Tabela 1 - Paradigmas derivados do paradigma declarativo....................................................14

A base teórica deste trabalho explora conceitos estenciais de programação e

Objetivos do domínio de introdução à Programação:

● Compreender o conceito de algoritmo, reconhecer a importância do

pseudocódigo, dos fluxogramas e da linguagem natural. Distinguir e

● Compreender o conceito de programação, paradigma de programação e

linguagem de programação; distinguir e caracterizar diferentes paradigmas

Objetivos do domínio de introdução à Multimédia:

● Compreender o conceito de multimédia digital; aprender os fundamentos da

interatividade; distinguir e caracterizar diferentes tipos de media; identificar

1. Desenvolvimento Técnico: Utilizando linguagens de programação como

2. Criação de Pixel Art: Através da plataforma Pixilart, vamos criar sprites

3. Integração de Mecanismos de Jogo: Vamos implementar mecanismos de

4. Experiência do Utilizador Aprimorada: Vamos aprimorar a experiência do

Este relatório está estruturado de forma a fornecer uma visão abrangente do

● Linguagens naturais e linguagens formais

● Ficheiros de Imagem e de Som

Um algoritmo é uma sequência ordenada de instruções bem definidas e finita em

Pseudocódigo - É uma forma genérica de escrever um algoritmo, utilizando uma

Fluxograma - É um diagrama que descreve um processo, sistema ou algoritmo de

Figura 1 - Simbologia fluxograma

Figura SEQ Figura \* ARABIC 1- Simbologia

LINGUAGENS NATURAIS E FORMAIS

● As linguagens naturais são os idiomas que as pessoas falam, como inglês,

espanhol e francês. Elas não foram criadas pelas pessoas (embora as

● As linguagens formais são linguagens criadas pelas pessoas para aplicações

específicas. Os computadores utilizam uma linguagem formal para

As linguagens naturais são cheias de ambiguidade e as pessoas lidam com Isto

Para compensar a ambiguidade e reduzir equívocos, as linguagens naturais usam

As linguagens naturais são cheias de expressões e metáforas. Se eu digo “Caiu a

Como crescemos a falar linguagens naturais, às vezes é difícil nos ajustarmos a

2. Prosa: O significado literal das palavras é o mais importante e a estrutura

O significado de um programa de computador é inequívoco e literal e pode ser

Uma linguagem de programação é uma forma de se comunicar com um computador

Uma das principais metas das linguagens de programação é que programadores

Linguagens de programação também tornam os programas menos dependentes de

Um paradigma pode ser entendido como um tipo de estruturação ao qual a

Os paradigmas indicam-nos a forma como devemos operar de maneira a

O que vai definir o paradigma é o modo como tratamos o nosso problema.

Aplicando Isto na matemática:

Quando temos por exemplo a equação x + 2x = 0 e queremos encontrar o valor de

Podemos resolver a partir de dois paradigmas:

● Através da fórmula resolvente, mas este seria um paradigma bastante

● Colocar o x em evidência resolvendo assim de uma maneira mais eficiente e

Pondo em prática na programação podemos concluir que para escolher bem é

PRINCIPAIS PARADIGMAS DA PROGRAMAÇÃO

Existem pelo menos 9 paradigmas de programação:

- Imperativo, declarativo, funcional, lógico orientado a objetos, orientado a eventos

Consoante a linguagem usada podemos utilizar um ou mais destes.

Os paradigmas imperativo e declarativo foram os primeiros a serem concebidos e os

Estruturada Procedimentall Orientado Funcional Reativa

Os paradigmas de programação imperativa são focados em instruções exatas que

Aqui, basicamente o programador instrui a máquina sobre como devem ser

Linguagens que suportam este tipo de paradigma:

● Cobol - Bancos, Seguradoras e cartões de crédito

● Fortran - Aplicações científicas computacionalmente intensivas

● Pascal - Programação modular

● Em projetos nos quais não se espera que haja mudanças significativas ao