Abordagem híbrida para o ensino do desenvolvimento de jogos digitais e programação

(1)

F

ACULDADE DE

E

NGENHARIA DA

U

NIVERSIDADE DO

P

ORTO

Abordagem híbrida para o ensino do

desenvolvimento de jogos digitais e

programação

Luis Eduardo Reis

Mestrado Integrado em Engenharia Informática e Computação Orientador: António Coelho

(2)

(3)

Abordagem híbrida para o ensino do desenvolvimento de

jogos digitais e programação

Luis Eduardo Reis

Mestrado Integrado em Engenharia Informática e Computação

(4)

(5)

Resumo

Aprender a desenvolver Jogos Digitais é um tema de interesse bastante comum para aqueles que pretendem dar os primeiros passos na programação. Muitas unidades curriculares de intro-dução à Programação usam já o desenvolvimento de pequenos jogos para cativar o interesse dos alunos. Porém, na maior parte dos programas de introdução à Programação, o desenvolvimento de Jogos Digitais não é um assunto muito aprofundado. Da mesma forma, na maior parte dos programas de introdução ao desenvolvimento de jogos, a Programação é já considerada como dado adquirido e nem é abordada ou são utilizados motores de jogo que não requerem experiência prévia de Programação e onde se faz uma abordagem a alto nível com metáforas visuais.

Com este projeto pretende-se a criação de um plano de atividades e conjunto de conteúdos pe-dagógicos que simultaneamente fomentem a aprendizagem da Programação e do desenvolvimento de Jogos Digitais. Pretende-se que os conteúdos que resultarem deste trabalho sejam utilizáveis em processos de autoaprendizagem (e-learning) ou aprendizagem supervisionada (b-learning).

O primeiro passo neste projeto foi identificar uma linha programática que contivesse os temas necessários para uma introdução aos dois temas abordados resultando numa lista de tópicos que se pretendia abordar. Esta escolha foi baseada em recomendações curriculares institucionais tanto no campo da engenharia informática [The13] como no de desenvolvimento de jogos [Int08].

De seguida foi desenvolvido um método de aprendizagem, baseado numa metodologia PBL, dividido em problemas que consistiam no desenvolvimento de pequenos jogos. Cada um destes jogos foi classificado e categorizado numa matriz de competências que permitiu organizar o plano de estudos.

Foram implementados os jogos a desenvolver e alguns dos tutoriais de suporte ao desenvolvi-mento dos mesmos. Finalmente foi feita a validação do trabalho desenvolvido através de entrevis-tas presenciais e inquéritos a especialisentrevis-tas na área do ensino da programação.

(6)

(7)

Abstract

Learning to develop digital games is a common theme of interest for those who intend to take their first steps in learning how to program. A lot of curricular units that introduce Programming already use the development of small games to captivate their students’ interest. However, in most Programming introductory courses, game development is not covered in much length. In a similar way, in most game development introductory courses, Programming is taken as a given and is not covered or game engines are used that don’t require previous experience with Programming and where a high level approach is used with graphical metaphors.

The purpose of this project consists in creating a activity plan and a set of pedagogical con-tents that simultaneously drive the learning of Programming and Game Development skills. It is intended that the set of contents that result from this work are usable in self learning processes (e-learning) or supervised learning (b-learning).

The first step on this project was to identify a program line that would cover all concepts needed for an introduction to both subjects being approached resulting in a list of planned topics. This choice was based on curricular recommendations both in the field of computer engineering [The13] and in Game Development [Int08].

Next a learning method was developed, based on a PBL methodology, divided into problems that consisted on developing small games. Each one of these games was classified and categorized on a competence matrix that allowed to organize the study plan.

The games were implemented as well as some of the tutorials that supported their development. Finally the work was validated through live interviews and surveys to specialists in the area of teaching Programming.

(8)

(9)

Agradecimentos

Quero agradecer sobretudo aos meus pais, Luis e Teresa, por todas as oportunidades e apoio que me deram até hoje;

Ao meu orientador, Professor Doutor António Coelho, por estar sempre disponível e pelo apoio incansável durante todo o processo de realização desta dissertação;

Aos meus amigos, em especial à Ana, ao Maia, à Raquel, à Susana, ao Sandim e ao Amorim, sem os quais não teria conseguido fazer o resto do curso, quanto mais a tese.

(10)

(11)

Conteúdo

1 Introdução 1 1.1 Contexto . . . 1 1.2 Motivação geral . . . 1 1.3 Objetivos . . . 2 1.4 Estrutura do Documento . . . 2

2 Metodologias de Ensino de Programação e de Jogos Digitais 5 2.1 Ensino da Programação . . . 5

2.1.1 Linguagens . . . 5

2.1.2 Exemplos de Programas . . . 7

2.2 Ensino dos Jogos . . . 8

2.2.1 Componentes do Ensino dos Jogos . . . 8

2.3 Uso de Jogos no Ensino . . . 9

2.3.1 Jogos Didáticos . . . 9

2.3.2 Ludificação . . . 9

2.4 Tecnologias Existentes para o Desenvolvimento de Jogos . . . 10

3 Método de Aprendizagem e Organização dos Conteúdos 13 3.1 Método de aprendizagem . . . 13

3.1.1 Contextualização PBL . . . 13

3.1.2 Ludificação da aprendizagem . . . 14

3.1.3 Compatibilidade com B-Learning . . . 14

3.2 Planeamento dos Conteúdos . . . 15

3.2.1 Tópicos de Aprendizagem Escolhidos . . . 15

3.2.2 Escolha dos Problemas/Jogos . . . 17

3.2.3 Linguagem e Tecnologia escolhidas . . . 17

3.2.4 Framework Desenvolvida . . . 18

3.3 Plano de atividades . . . 19

4 Plano de atividades baseado em Jogos 21 4.1 Rock Paper Scissors . . . 21

4.1.1 Descrição . . . 21

4.1.2 Pré-requisitos . . . 22

4.1.3 Detalhes de Implementação . . . 22

4.1.4 Desafios . . . 23

4.2 Guess the Number . . . 23

4.2.1 Descrição . . . 23

(12)

CONTEÚDO 4.2.3 Detalhes de Implementação . . . 24 4.2.4 Desafios . . . 24 4.3 Text Adventure . . . 24 4.3.1 Descrição . . . 25 4.3.2 Pré-requisitos . . . 25 4.3.3 Detalhes de Implementação . . . 25 4.3.4 Desafios . . . 26 4.4 Hangman . . . 26 4.4.1 Descrição . . . 26 4.4.2 Pré-requisitos . . . 27 4.4.3 Detalhes de Implementação . . . 27 4.4.4 Desafios . . . 27 4.5 Snake . . . 27 4.5.1 Descrição . . . 28 4.5.2 Pré-requisitos . . . 28 4.5.3 Detalhes de Implementação . . . 29 4.5.4 Desafios . . . 29 4.6 Pong . . . 29 4.6.1 Descrição . . . 30 4.6.2 Pré-requisitos . . . 30 4.6.3 Detalhes de Implementação . . . 30 4.6.4 Desafios . . . 30 4.7 Space Invaders . . . 30 4.7.1 Descrição . . . 31 4.7.2 Pré-requisitos . . . 31 4.7.3 Detalhes de Implementação . . . 32 4.7.4 Desafios . . . 32 4.8 Platform . . . 32 4.8.1 Descrição . . . 33 4.8.2 Pré-requisitos . . . 33 4.8.3 Detalhes de Implementação . . . 33 4.8.4 Desafios . . . 34 4.9 Tic-Tac-Toe (AI) . . . 34 4.9.1 Descrição . . . 35 4.9.2 Pré-requisitos . . . 35 4.9.3 Detalhes de Implementação . . . 35 4.9.4 Desafios . . . 36 4.10 FPS (Wolfenstein) . . . 36 4.10.1 Descrição . . . 36 4.10.2 Pré-requisitos . . . 37 4.10.3 Detalhes de Implementação . . . 37 4.10.4 Desafios . . . 37 5 Validação 39 5.1 Metodologia . . . 39 5.2 Métricas de Avaliação . . . 39 5.3 Resultados . . . 40

5.3.1 Caracterização e dados demográficos . . . 41

(13)

CONTEÚDO

5.3.3 Opinião sobre o trabalho . . . 45

6 Conclusões 51

6.1 Trabalho Futuro . . . 51

Referências 53

A Resultados Inquérito 55

(14)

(15)

Lista de Figuras

3.1 Plano de atividades . . . 19

4.1 Jogo "Rock Paper Scissors" . . . 21

4.2 Jogo "Guess the Number" . . . 23

4.3 Jogo "Text Adventure" . . . 25

4.4 Jogo "Hangman" . . . 26

4.5 Jogo "Snake" . . . 28

4.6 Jogo "Pong" . . . 29

4.7 Jogo "Space Invaders" . . . 31

4.8 Jogo "Platform" . . . 33

4.9 Jogo "Tic-Tac-Toe" . . . 34

4.10 Jogo "FPS" . . . 36

5.1 Respostas sobre a afirmação "Os estudantes sentem-se motivados na UC" . . . . 42

5.2 Respostas sobre a afirmação "A documentação de apoio à UC é suficiente" . . . . 42

5.3 Respostas sobre a afirmação "Os estudantes estudam de forma regular semanal-mente" . . . 43

5.4 Respostas sobre a afirmação "As aulas teóricas têm um nível de participação elevado" 43 5.5 Respostas sobre a afirmação "As aulas teórico-práticas têm um nível de participa-ção elevado" . . . 44

5.6 Respostas sobre a afirmação "Os estudantes podem realizar percursos de aprendi-zagem/avaliação diferenciada consoante as suas competências" . . . 45

5.7 Respostas sobre a afirmação "(1) O ensino paralelo de tópicos relacionados com desenvolvimento de jogos é uma mais valia para um programa de ensino de intro-dução à programação" . . . 46

5.8 Respostas sobre a afirmação "(2) Uma abordagem de Problem Based Learning (PBL), neste caso em que cada problema apresentado ao aluno é o desenvolvi-mento de um jogo, é apropriada para o ensino da programação" . . . 46

5.9 Respostas sobre a afirmação "Um ciclo de aulas com iterações compostas por Introdução -> Desenvolvimento de um Jogo -> Desafios (Onboarding -> Scaffhol-ding -> EndGame) é adequado para um processo de introdução à programação" . 47 5.10 Respostas sobre a afirmação "Ter um percurso não linear de progressão com re-cursos diferenciados para cada estudante seria uma mais valia para os estudantes" 47 5.11 Respostas sobre a afirmação "A lista de tópicos apresentada está completa e in-clui todos os conceitos que são importantes para um programa de introdução à programação" . . . 48

(16)

LISTA DE FIGURAS

5.12 Respostas sobre a afirmação "A matriz de competências apresentada é um método eficaz de planear os problemas a abordar classificando-os ao nível dos tópicos

escolhidos" . . . 49

5.13 Respostas sobre a afirmação "O tutorial apresentado faz uma boa primeira intro-dução à linguagem Javascript e a um ambiente de trabalho sobre o qual futuros tutoriais possam construir?" . . . 50

A.1 Resultados do inquérito (1/2) . . . 55

A.2 Resultados do inquérito (2/2) . . . 56

B.1 Matriz de competências - Jogos (1/2) . . . 58

B.2 Matriz de competências - Jogos (2/2) . . . 59

(17)

Abreviaturas e Símbolos

API Application Programming Interface

HUD Heads-up Display

IDE Integrated Development Environment

MIEIC Mestrado Integrado em Engenharia Informática e Computação

MM Mestrado em Multimédia

OO Object Oriented

PBL Problem Based Learning VPL Visual Programming Language

(18)

(19)

Capítulo 1

Introdução

1.1 Contexto

A programação é hoje uma competência fundamental aplicada em áreas muito diversas. Trata-se de um poderoso meio de comunicação que permite ao homem interagir com a máquina e de-senvolver e implementar inúmeros processos de forma automática e integrada.

Ao contrário da programação, verifica-se que a utilização de jogos digitais é uma prática cor-rente e popular em todas as idades. Os jogos digitais são um poderoso e apelativo meio de comuni-cação, onde a interação com o utilizador é estimulada. São também fortes elementos de motivação, podendo ser usados para diversos fins para além do entretenimento (e.g. Serious Games [MC05]). Um conceito já usado na educação é o de introduzir jogos no processo de ensino, seja usando jogos para ensinar, e.g. Minecraft Education 1 e Teach with Portals 2 ou usando métodos de ludificação.

Em particular em programas de Introdução à Programação é possível, se não comum, usar jogos para motivar os alunos [LE07].

1.2 Motivação geral

A perspetiva atual é de que não há um investimento significativo no ensino da programação desde os cursos do Ensino Secundário e que se entende desejável promover e incentivar a aquisição de tais competências mesmo antes do Ensino Universitário. Verifica-se, por exemplo, que uma percentagem significativa dos alunos admitidos no primeiro ano do MIEIC nunca tiveram contacto com atividades de programação.

A programação também não é apenas utilizada no campo da Engenharia. Existem outras áreas que beneficiam e dependem de material de introdução à programação, por exemplo, os casos de

1_{https://education.minecraft.net/} 2_{http://www.teachwithportals.com/}

(20)

Introdução

cursos de Design e Multimédia. Estas áreas, em particular, beneficiam bastante de uma aproxima-ção assente na utilizaaproxima-ção de jogos digitais, até porque em vários cursos surge posteriormente uma unidade curricular associada ao desenvolvimento de jogos digitais.

Um dos desafios, mais notório e difícil de colmatar, é a falta de programadores competentes e qualificados para abranger os diversos projetos que vão surgindo no universo das tecnologias de informação. Este facto está intimamente relacionado com a metodologia adotada no ensino da programação dos dias de hoje, mas sobretudo devido à falta de motivação intrínseca que os estudantes têm demonstrado para aprender a programar [PCA17].

1.3 Objetivos

Aliando a necessidade de desenvolver competências na área da Programação e o fator ape-lativo e motivador dos jogos digitais, surge a ideia de juntar num programa de estudos único, a aprendizagem de programação através da produção de jogos digitais.

Neste projeto pretende-se ir um passo além da simples utilização de jogos para ensinar a programar, promovendo paralelamente o ensino do seu desenvolvimento. Pretende-se assim intro-duzir os dois temas em simultâneo.

Em suma, o presente projeto trata do desenvolvimento de um programa de estudos híbrido de ensino de desenvolvimento de jogos e programação.

Os objetivos deste projeto são:

• Definir uma linha programática híbrida de introdução aos jogos e programação.

• Desenvolver um conjunto de atividades de PBL para dar corpo a essa linha programática. • Implementar os conteúdos necessários para algumas das atividades definidas.

• Avaliar com um conjunto de especialistas o trabalho desenvolvido.

O plano de estudos desenvolvido deverá ser utilizável em processos de auto-aprendizagem (e-learning) mas, como será descrito em seguida, sejam também adaptáveis a processos de apren-dizagem supervisionada (b-learning).

1.4 Estrutura do Documento

Para além desta introdução, este documento é constituído por mais seis capítulos.

• No capítulo2é descrito o estado da arte para o contexto deste projeto. Descreve-se o estado atual do ensino da programação e dos jogos com exemplos concretos assim como casos de uso de jogos no ensino e uma lista breve de tecnologias existentes para o desenvolvimento de jogos.

(21)

Introdução

• No capítulo3 é abordado em mais detalhe o trabalho desenvolvido. São descritos o mé-todo de aprendizagem utilizado, o planeamento dos conteúdos desenvolvidos e o plano de atividades realizado.

• No capítulo4é descrito o conjunto de conteúdos do trabalho, tanto os planeados quanto os efetivamente implementados.

• No capítulo5é abordado o tópico da validação por especialistas e os resultados obtidos. • No capítulo6encontram-se as conclusões finais deste trabalho.

(22)

(23)

Capítulo 2

Metodologias de Ensino de

Programação e de Jogos Digitais

Este capítulo apresenta o estado da arte relativo aos temas do contexto deste trabalho. Serão apresentados o ensino da programação e de jogos digitais em separado, a forma como os jogos são usados atualmente no ensino e são apresentadas metodologias usadas para o desenvolvimento de jogos.

Ao longo deste capítulo serão apresentadas brevemente diversas tecnologias, por exemplo, linguagens usadas no ensino da programação ou frameworks usadas para o desenvolvimento de jogos.

2.1 Ensino da Programação

O ensino da programação insere-se no campo da Engenharia Informática / Ciências da Com-putação, um campo da Engenharia relativamente recente e em constante mudança. Dadas estas características a forma de melhor introduzir a programação difere bastante de curso para curso. Aqui serão também apresentados alguns exemplos de programas de introdução à programação que se acharam representativos da realidade atual.

2.1.1 Linguagens

Em universidades europeias, há três linguagens que predominam no ensino da programação: C (30.6%), C++ (21.9%) e Java (20.7%) [AvIm16]. Pode ver-se que mais de metade dos pro-gramas são baseados em C/C++, linguagens mais focadas no baixo nível cuja adaptação a todos os casos para iniciantes é debatível. Estes dados resultam porém da análise em cursos inclinados para a engenharia informática podendo não ser representativos do panorama geral do ensino da programação.

(24)

Metodologias de Ensino de Programação e de Jogos Digitais

Notavelmente existem as linguagens de programação que fazem uso de abstrações visuais, as chamadas Visual Programming Languages (VPL)(e.g. Scratch1), e as linguagens de programação que trabalham sobre um ambiente visual ou simulação (e.g. Processing2), ferramentas muito úteis para o ensino da programação, especialmente nos mais jovens ou em áreas fora das engenharias.

Em cursos na área do Design e Multimédia é comum o uso de linguagens de programação com sintaxe simples, tal como o Python (usado por exemplo no Mestrado em Multimédia na FEUP3) ou o uso de linguagens que trabalham sobre ambientes visuais ou simulação referidas anteriormente (como por exemplo o Processing).

De seguida apresenta-se um pequeno resumo de diversas linguagens, comentadas no contexto do ensino da programação:

• C - Imperativa, general-purpose, compilada. Linguagem de relativo baixo nível que requer que o utilizador entenda a arquitetura do computador que está por detrás dos programas que escreve, e.g. como funciona a memória.

• C++ - Multi-paradigma, general-purpose, compilada. Mantém acesso a funcionalidades de baixo nível mas introduz uma base multi-paradigma. Permite introduzir diversos conceitos importantes de programação orientada a objetos como abstração, encapsulação, herança, e polimorfismo.

• Java - Multi-paradigma, general-purpose, semi-compilada, multi-plataforma. Permite criar programas que corram em diferentes máquinas e sistemas operativos com facilidade. Lin-guagem popular na industria usada em todo o tipo de projetos.

• Python - Linguagem de alto nível e general-purpose, interpretada. Focada na simplicidade, em ser mais fácil de ler e em conseguir mais expressividade com menos linhas de código. • Javascript - Linguagem de alto nível, não tipada e interpretada. Tecnologia central da

World Wide Web e suportada por todos os browsers modernos. A única coisa necessária para começar a programar em Javascript é um browser, que interpreta a linguagem, e um editor de texto.

• Processing - Linguagem orientada a objetos, baseada em Java, incorporada num IDE pró-prio. Orientada às artes e design cujo principal objetivo é introduzir pessoas com pouca ou nenhuma experiência com programação a programar através de feedback visual.

• Scratch - Linguagem visual (VPL) incorporada numa plataforma própria. Apresenta um esquema de programação baseada em eventos que controlam objetos num cenário. Usada na educação como passo intermédio para a introdução à programação. A faixa etária alvo da linguagem são jovens dos 9 aos 16 anos.

1_{https://scratch.mit.edu/} 2_{https://processing.org/}

(25)

2.1.2 Exemplos de Programas

No sentido de se perceber a multiplicidade de recursos e opções de ensino, apresentam-se em seguida alguns exemplos de linhas programáticas em várias instituições de ensino.

• Fundamentos de Programação - FEUP4 _{- No Mestrado Integrado em Engenharia}

Infor-mática e Computação na FEUP a introdução à programação é feita com uso da linguagem Scheme, uma variante de Lisp. A principal característica que distingue a linguagem é a sua simplicidade em termos de sintaxe, sendo a única construção sintática a notação prefixa rodeada por parênteses. O programa dado abrange o funcionamento da linguagem Scheme, procedimentos, iteração, recursividade, listas e finalmente dados mutáveis e ficheiros. No geral este programa foca-se mais no conceito das abstrações ligadas à programação evitando implementações e paradigmas específicos.

• Fundamentos da Programação - Técnico Lisboa5_{- Na Licenciatura Bolonha em}

Enge-nharia Informática e de Computadores no Técnico de Lisboa a introdução à programação é feita com o uso de Python. O programa dado abrange uma introdução geral ao o que é um computador, o que é um programa e uma linguagem de programação, sintaxe e semântica em Python, expressões, funções, ciclos, iteração e recursividade, listas, algoritmos simples, ficheiros, estruturas de dados e uma introdução a programação orientada a objetos. No geral este programa é mais amplo dando a conhecer mais um pouco de tudo em vez de se focar tanto no aspeto teórico.

• Introduction to Computer Science and Programming - MIT6 _{- No MIT a introdução à}

programação é feita também com o uso de Python. O programa dado abrange uma introdu-ção geral à computaintrodu-ção, tipos de dados, operadores, condicionais, iteraintrodu-ção e recursividade, listas, complexidade, uma análise extensa de diversos algoritmos e problemas incluindo pesquisa, ordenação e programação dinâmica, uma introdução a conceitos de programação orientada a objetos e por fim uma análise a simulações e modelos estatísticos. Este programa é também amplo e baseia-se muito na análise de problemas específicos.

• Functional Programming - University of Oxford7_{- Na Universidade de Oxford a}

intro-dução à programação é feita à base do paradigma funcional usando a linguagem Haskell. O programa dado abrange a notação funcional, expressões, tipos, listas e operações sobre elas, recursividade e indução, estruturas de dados não lineares, complexidade, operações aritmé-ticas e monads. Este programa foca-se fortemente no paradigma funcional recorrendo mais tarde a outros programas para introduzir outros conceitos na área da introdução à programa-ção. 4_{https://sigarra.up.pt/feup/pt/UCURR_GERAL.FICHA_UC_VIEW?pv_ocorrencia_id=384923} 5_{https://fenix.tecnico.ulisboa.pt/cursos/leic-t/disciplina-curricular/1529008373577} 6 https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-00-introduction-to-computer-science-and-programming-fall-2008/calendar/ 7_{http://www.cs.ox.ac.uk/teaching/courses/2016-2017/fp/index.html}

(26)

2.2 Ensino dos Jogos

Os jogos digitais são atualmente o maior negócio na área do entretenimento. Naturalmente existe procura para formação na área do seu desenvolvimento. Existem diversos cursos relativos às diferentes competências necessárias para desenvolver jogos.

2.2.1 Componentes do Ensino dos Jogos

De seguida apresenta-se uma introdução às componentes essenciais que deverão estar pre-sentes em programas de introdução ao desenvolvimento de jogos segundo o IGDA Curriculum Framework [Int08].

• Estudo dos jogos - Uma vista geral ao conceito dos jogos (digitais ou não). Uma análise ao conceito do que é um jogo e o seu papel, à historia dos jogos, aos géneros de jogos existentes e aos princípios de Game Design.

• Jogos na sociedade - Uma análise ao impacto dos jogos na sociedade, à demografia de quem joga, à "cultura"dos jogos e à experiência que os jogos proporcionam.

• Design de jogos - Os princípios e metodologias por detrás das regras e mecânicas nos jogos. Análise aos aspetos conceptuais do desenvolvimento de jogos: mecânicas, ideias, conceito de "diversão", considerações psicológicas e interfaces. Análise aos aspetos do desenvolvi-mento de jogos sérios. Conceitos práticos para o design de jogos: design espacial, métodos de controlo, treino, afinação, análise do jogador, testes, prototipagem, documentação e level design.

• Programação de jogos - Análise a tópicos ligados à engenharia de software inclinados para os aspetos técnicos de um jogo: Matemática e ciências, padrões de desenho, estruturação, design de motores de jogo, prototipagem, ferramentas, trabalho em equipas de programa-ção, arquitetura de sistemas, computação gráfica, som, inteligência artificial, redes, lógica e análise métrica.

• Design Visual - Aspetos ligados ao design e criação dos componentes visuais dos jogos: conceitos base do design visual, narrativa visual, animação, geração de conteúdos 2D e 3D e trabalho com ferramentas próprias.

• Design Áudio - Aspetos ligados ao design e criação dos componentes sonoros dos jogos: história e teoria do áudio, técnicas de gravação e edição, ferramentas, efeitos sonoros, mu-sica, composição e áudio 3D.

• Narrativa - Aspetos tradicionais da criação de uma narrativa nos jogos e em particular o papel da narrativa em meios interativos e não interativos.

• Produção de jogos - Aspetos práticos e logísticos da gestão do desenvolvimento de jogos: gestão de equipas, ciclo de vida do desenvolvimento de jogos, fluxo de trabalho, dinâmica de

(27)

grupo, documentação, testes, calendarização, gestão da qualidade, rastreamento de defeitos e marketing.

• Negócio dos jogos - Aspetos económicos e legais relativos aos jogos: a industria dos jogos, relações com editoras, propriedade intelectual, patentes, contratos e regulação de conteúdos.

2.3 Uso de Jogos no Ensino

2.3.1 Jogos Didáticos

Jogos didáticos, educational games ou edu-games são jogos feitos com o explícito propósito de ensinar. Em particular interessam para este projeto os jogos educativos digitais. São uma forma de jogos sérios [MC05] e podem ser aplicados numa vasta gama de áreas. Tradicionalmente num contexto escolar para motivar os estudantes a praticar ou aprender sobre um determinado assunto, particularmente na área da matemática. São também ferramentas importantes para treino de profissionais, por exemplo, fazendo uso de simuladores.

2.3.2 Ludificação

O conceito de ludificação (gamification) é a aplicação de elementos de design de jogos e princípios de jogos em contextos que não o dos jogos [Det11]. A ideia é que uma vez que os vide-ojogos são desenvolvidos para entreter o utilizador eles devem produzir efeitos de uma experiência desejável, isto é, cativar os utilizadores e motivá-los a manterem-se numa atividade intensamente durante longos períodos de tempo [PCA17]. Com a adição de elementos dos jogos, é possível criar aplicações, serviços e produtos de grande valor, uma vez que as mesmas se tornam mais apelativas, agradáveis e motivadoras. É interessante utilizar elementos de jogos em diversos contextos uma vez que estes aumentam as sensações de imersão, foco e satisfação enquanto se desenrola uma atividade. As aplicações de gamification são várias: marketing, saúde, trabalho e, claro, na educa-ção. Um dos maiores exemplos na educação é a Khan Academy8que usa métodos de ludificação em aulas online.

As técnicas de ludificação baseiam-se em desejos naturais por competição, obtenção de resul-tados, aprendizagem, recompensa, reconhecimento, auto-expressão ou simplesmente na reação à caracterização de uma atividade como jogo ou divertimento.

Para enumerar alguns exemplos base, este tipo de técnicas inclui: • Uso de um sistema de pontos.

• Crachás ou níveis representativos da conclusão de certos objetivos. • Enchimento de barras de progresso.

• Uso de uma moeda virtual.

(28)

• Cadernetas de cromos ou outros colecionáveis.

Tornar as tarefas atingidas visíveis a outros jogadores ou o uso de um leader board são também formas de fomentar e apelar à competitividade.

Uma outra forma de implementar ludificação é tornar tarefas já existentes mais parecidas com jogos incluindo, por exemplo, disponibilização de escolhas ao utilizador, desafios com dificuldade incremental e o uso de uma narrativa.

Porém, é importante notar que a simples aplicação de elementos de jogos em contextos que não o de jogo não leva necessariamente na transferência do contexto motivacional dos mesmos. Isto devido à natureza por definição diferente das atividades de "jogo"e "trabalho"[Det11].

O processo de ludificação em si pode ser baseado numa framework com os seguintes passos [MKH14]:

• Processo de design - Adoção de um processo iterativo com um propósito, focado na experi-ência final e equilibrado entre pensamento critico e analítico.

• Definição de Objetivos e Comportamentos - Descrição especifica, justificada e efetiva do que queremos que os jogadores façam e o tipo de objetivos que queremos que cumpram. • Descrição/Análise dos Jogadores - Análise da demografia, segmentação psicográfica e

back-ground dos jogadores.

• Engenho de Atividades Iterativas/Ciclicas - Padrão de desenho com diversas vantagens (di-visão em sessões de trabalho, estabelecimento de um ritmo, sensação de progressão, etc). • Assegurar a Diversão! - Não esquecer que o objetivo principal é a introdução da diversão e

de uma experiência divertida.

Finalmente Yu-Kai Chou apresenta uma outra framework para descrever o processo de ludifi-cação (Gamefication). Esta acenta em 8 pontos: Significado, Realização, Propriedade, Escassez, Evasão, Imprevisibilidade, Influencia Social e Empoderamento [Cho].

2.4 Tecnologias Existentes para o Desenvolvimento de Jogos

Neste capítulo pretende-se apresentar um sumário breve de algumas das tecnologias mais im-portantes que são usadas atualmente para o desenvolvimento de jogos. Esta análise será útil para a segunda parte deste trabalho em que se instanciará o plano de estudos desenvolvido.

• Unity9_{- Motor de jogo multi-plataforma, maioritariamente 3D mas também 2D. Uma das}

suas principais vantagens é a grande comunidade que o envolve, visível na grande quanti-dade de conteúdos independentes desenvolvidos, fóruns de ajuda e assets disponíveis.

(29)

• Unreal Engine10_{- Motor de jogo multi-plataforma, maioritariamente para jogos 3D.}

Ori-ginalmente parte de um jogo first-person shooter evoluiu para se tornar num motor utilizado por diversos jogos de alto perfil.

• Game Maker: Studio11 _{- Plataforma para o desenvolvimento de jogos, maioritariamente}

2D que recentemente passou a permitir o desenvolvimento multi-plataforma. Permite uma implementação sem requerer programação, fazendo uso de uma linguagem drag-and-drop, mas contém também uma linguagem de programação própria.

• Stencyl12_{- Plataforma para o desenvolvimento de jogos 2D baseada numa linguagem visual}

de drag and drop.

• Construct 213 _{- Plataforma para o desenvolvimento de jogos HTML5 2D com ênfase em}

permitir o seu desenvolvimento sem programação necessária.

• libGDX 14 _{- Framework para o desenvolvimento de jogos multi-plataforma baseado em}

Java.

• Pygame15_{- Conjunto de módulos para Python desenhados para permitir o desenvolvimento}

de jogos.

• HTML516_{- Conjunto de tecnologias para o desenvolvimento de conteúdos web. Apesar do}

seu foco principal não ser o desenvolvimento de jogos expõe todos os recursos adequados ao seu desenvolvimento. Tem também a vantagem de permitir a difusão fácil dos conteúdos produzidos, através da web.

• SFML17_{- Biblioteca multi-linguagem que expõe recursos multimédia e permite o}

desen-volvimento de aplicações multi-plataforma.

• SDL18 _{- Biblioteca cross-platform baseada em C++ desenhada para dar acesso a recursos}

de multimédia de baixo nível.

• LWJGL19_{- Biblioteca cross-platform baseada em Java que dá acesso a diversas APIs úteis}

para o desenvolvimento de aplicações gráficas, áudio e de computação paralela.

10_{https://www.unrealengine.com/} 11_{http://www.yoyogames.com/} 12_{http://stencyl.com/} 13_{https://www.scirra.com/construct2} 14_{https://libgdx.badlogicgames.com/} 15_{http://www.pygame.org/lofi.html} 16_{https://html5gamedevelopment.com/.com} 17_{https://www.sfml-dev.org/index.php} 18_{https://www.libsdl.org/index.php} 19_{https://www.lwjgl.org/}

(30)

• Processing20_{- Linguagem baseada em Java criada com o intuito de promover o}

vimento de aplicações visuais por pessoas na área das artes e design. Apesar de o desenvol-vimento de jogos não ser a sua principal função, providencia uma base adequada para o seu desenvolvimento.

• p5.js21_{- Biblioteca para Javascript baseada nos princípios e objetivos de Processing. Tem}

a vantagem adicional de não precisar de um IDE específico ou de uma instalação, bastando o uso de um browser e editor de texto.

20_{https://processing.org/} 21_{https://p5js.org/}

(31)

Capítulo 3

Método de Aprendizagem e

Organização dos Conteúdos

Neste capítulo é introduzido e descrito a abordagem de ensino e plano de estudos desenvolvi-dos no contexto deste trabalho.

3.1 Método de aprendizagem

Este trabalho trata o desenvolvimento de um método de aprendizagem híbrido para o ensino da Programação e do desenvolvimento de Jogos Digitais. A solução encontrada para isto foi uma abordagem PBL em que se dividiu o plano de estudos em problemas que coincidem com o desenvolvimento de pequenos jogos. Foi tido como objetivo durante o desenvolvimento deste plano que este fosse adaptável a processos de autoaprendizagem (e-learning).

3.1.1 Contextualização PBL

Por de trás do plano de estudos desenvolvido está uma abordagem de Problem Based Learning (PBL). Esta é uma abordagem pedagógica na qual estudantes aprendem sobre um tema através da resolução de problemas abertos introduzido pelo material disponível.

O processo de PBL originou e tem o maior historial no campo da medicina [UTMP15]. Como exemplo, no caso concreto do ensino de estudantes de medicina o processo de PBL funcionaria da seguinte forma: No primeiro dia de trabalho, em vez de uma aula teórica, é apresentado aos estudantes um problema como um paciente com uma determinada lista de sintomas. Aqui os estudantes, em pequenos grupos, reúnem um conjunto de perguntas e testes que pretendem fazer ao paciente e reúnem fontes de informação que possam precisar. Na fase ou aula seguinte são respondidas as perguntas e recebidos os resultados dos testes. Depois disso, incluindo outras possíveis iterações de testes e perguntas, os estudantes podem elaborar um plano de tratamento que é apresentado e debatido. Este processo é repetido nas seguintes aulas com um caso novo.

Este processo teve grande sucesso na área da medicina e eventualmente espalhou-se por outras áreas de estudos tais como matemática, direito, educação, economia, gestão, ciências sociais e

(32)

Método de Aprendizagem e Organização dos Conteúdos

engenharia. O ensino de qualquer campo onde o trabalho em projetos seja comum é facilmente adaptável e pode colher benefícios de uma metodologia PBL.

Numa metodologia tradicional de ensino, são comuns os seguintes passos no processo de aprendizagem: Exposição do conteúdo a aprender; Memorização do conteúdo; Atribuição de um problema que ilustra o uso do conteúdo [MGC98].

Por sua vez, numa metodologia PBL, o processo de aprendizagem seria algo mais próximo de: Exposição a um problema a ser resolvido; Identificação do conteúdo necessário para resolver esse problema; Aprendizagem e aplicação do conteúdo para resolver o problema [Ron16].

3.1.2 Ludificação da aprendizagem

Seguindo a metodologia PBL é proposto por este trabalho um ciclo de aprendizagem para percorrer o plano de estudos. Este ciclo de aprendizagem é uma boa oportunidade para introduzir conceitos de ludificação no plano de estudos tais como os conceitos de desafios de dificuldade crescente e o uso de terminologia de jogos (e.g. "boss final").

Uma iteração deste ciclo de aprendizagem seria composta pelas seguintes etapas:

1. É feita uma introdução teórica breve aos conteúdos a abordar e a um jogo que servirá de problema.

2. O estudante segue depois um tutorial para implementar esse jogo passo a passo sendo, du-rante o processo, abordados os conteúdos alvo.

3. Depois de seguir o tutorial é apresentado ao estudante um conjunto de desafios de solução mais aberta para testar os conhecimentos adquiridos.

4. Finalmente, como "boss final", é apresentado um último desafio mais extenso, tal como implementar um novo jogo de um género semelhante ao desenvolvido.

O uso de ciclos de iteração permite ao estudante dividir facilmente o seu percurso pelo plano de estudos em sessões de trabalho mais ou menos curtas ou então a um tutor dividi-lo, por exemplo, em iterações semanais.

3.1.3 Compatibilidade com B-Learning

Como foi referido nos objetivos deste trabalho, este projeto foi desenvolvido com um ambiente de autoaprendizagem em mente (e-learning). Independentemente do formato final que tomar (li-vro, e-book, website, ...), o estudante deverá ter tudo o que precisa para independentemente seguir os conteúdos do início ao fim.

Porém, uma vez que tem por base uma metodologia PBL, considera-se este plano de estudos de fácil adaptação a um processo de aprendizagem supervisionada. Seria possível, por exemplo, implementar este plano num contexto de flipped classroom [RRS13]: A introdução teórica e parte

(33)

ou a totalidade do tutorial seriam feitos pelos estudantes fora das aulas e as aulas seriam dedicadas a dúvidas no tutorial e a implementar os desafios.

3.2 Planeamento dos Conteúdos

3.2.1 Tópicos de Aprendizagem Escolhidos

O primeiro passo para desenvolver o plano de estudos foi enumerar o conjunto de tópicos que este deveria abordar. Como dito anteriormente, estes tópicos deverão englobar todos os conceitos necessários para um curso de introdução à programação assim como para um curso de introdução aos jogos digitais. Para isso, foram tidos como bases os currículos do ACM/IEEE [The13] e IGDA [Int08] para as áreas respetivas.

Segue-se a lista dos tópicos escolhidos: 1. Fundamentos da Programação

(a) Sintaxe e semântica de uma linguagem de programação

(b) Variáveis e tipos de dados primitivos (ex., números, caracteres, booleanos) (c) Expressões e atribuição

(d) I/O básico, incluindo ficheiros

(e) Estruturas de controlo condicionais e iterativas (f) Funções e passagem de parâmetros

(g) Recursividade

(h) Teste e correção de programas 2. Estruturas de Dados

(a) Vetores (arrays)

(b) Cadeias de caracteres (strings) (c) Listas, Pilhas, filas e tabela

(d) Abstrações de dados e sua implementação (e) Seleção da estrutura de dados mais adequada 3. Projeto de Software

(a) Conceitos básicos (Abstração, encapsulamento, acoplamento e reutilização) (b) Programação estruturada

(c) Abordagem top-down

(d) Programação baseada em abstrações 4. Gráficos e Visualização

(34)

(a) Representação de imagem: modelo vetorial e raster (b) Cor e modelos de cor

(c) Desenvolvimento de aplicações gráficas (d) Interfaces gráficas

5. Linguagens de Programação

(a) Programação Orientada por Objetos (b) Programação baseada em eventos 6. Algoritmos e complexidade

(a) Complexidade algorítmica

(b) Diferenças no comportamento de um algoritmo - melhor/esperado/pior caso; Defini-ção da notaDefini-ção O-grande

(c) Complexidade temporal e espacial

(d) Complexidade constante, linear, quadrática, logarítmica, e exponencial (e) Algoritmos de pesquisa (pesquisa sequencial e pesquisa binária)

(f) Comparação da complexidade algorítmica

(g) Algoritmos de ordenação (selection sort, bubble sort e quick sort) 7. Fundamentos e design de Jogos Digitais

(a) Conceito de jogo e fatores humanos (b) Narrativas interativas e não lineares (c) Mecânicas de jogo

(d) Design dos mundos de jogo 8. Programação de Jogos Digitais

(a) Arquitetura de um motor de jogo (b) Programação gráfica

(c) Programação de áudio (d) Lógica de jogo

(e) Input e gestão de eventos (f) Física e deteção de colisões (g) Inteligência artificial

(35)

3.2.2 Escolha dos Problemas/Jogos

Para este trabalho foram escolhido e implementado um conjunto de jogos. A seleção destes jogos seguiu um conjunto de requisitos:

• Serem suficientes em número e em conteúdo para abordar todos os tópicos escolhidos para o plano de estudos.

• Serem simples o suficiente para serem implementados em ciclos de aprendizagem relativa-mente curtos.

• Serem apelativos para os estudantes.

Com vista a cumprir os requisitos especificados anteriormente foi proposta a seguinte lista de jogos:

1. Rock Paper Scissors (Pedra Papel Tesoura) 2. Guess the Number

3. Text Adventure 4. Hangman (Enforcado) 5. Snake

6. Pong

7. Space Invaders

8. Platform (Jogo de Plataformas)

9. Tic-Tac-Toe (AI) (Jogo do Galo contra o computador) 10. FPS (Wolfenstein)

Estes jogos, a sua implementação e os tópicos que abordam serão apresentados em capítulo próprio.

3.2.3 Linguagem e Tecnologia escolhidas

Foram descritas diversas linguagens e tecnologias usadas para o ensino da programação e para o desenvolvimento de jogos digitais. O plano de estudos desenvolvido deverá ser genérico o suficiente para permitir uma adaptação fácil à maioria das linguagens.

Para desenvolver os conteúdos planeados e ter uma noção objetiva de que competências é que cada jogo iria precisar foi necessário escolher uma linguagem e conjunto de tecnologias especifi-cas.

(36)

Optou-se pelo javascript como linguagem, auxiliada pela biblioteca p5.js1como suporte para o desenvolvimento de aplicações gráficas. Esta escolha deveu-se a várias razões:

• Optou-se por javascript por ser linguagem com uma sintaxe relativamente simples mas pode-rosa, semelhante e transferível para outras linguagens e relativamente tolerante a pequenos erros.

• Optou-se pelo ambiente de desenvolvimento web, associado por natureza ao javascript, uma vez que a maioria dos computadores hoje em dia já vêm por defeito com software de execu-ção e desenvolvimento web, nomeadamente, browsers. É também interessante a facilidade que este ambiente traz à partilha dos trabalhos desenvolvidos, podendo facilmente ser envi-ados sem nenhuma dependência ou, melhor ainda, expostos num servidor web.

• Optou-se pela biblioteca p5.js por ser fácil de se obter e utilizar, por permitir desenvolver uma aplicação gráfica muito facilmente e por vir com uma vasta gama de ferramentas e funções utilitárias bastante úteis. É também relevante o facto de ser open source o que permite ao utilizador explorar e manipular o seu funcionamento.

3.2.4 Framework Desenvolvida

Para certificar que o plano de estudos cobre os tópicos escolhidos de uma forma progressiva e completa foi desenvolvida uma framework de avaliação de cada iteração do ciclo de estudo, ou seja, de cada problema.

O método a que se chegou foi uma matriz de competências onde se cruzam os problemas com os tópicos que abordam usando uma escala.

Escolheu-se usar a escala da taxonomia de Bloom [Blo56, p. 201] para dar um valor ao nível de presença que um dado tópico tem em cada problema. Foram usados 5 níveis numa escala hie-rárquica crescente (o segundo nível implica o primeiro, o terceiro nível implica os dois anteriores, etc.): 1. Lembrar 2. Entender 3. Aplicar 4. Analisar 5. Avaliar

Escolheu-se omitir um sexto nível da taxonomia (Criar) uma vez que se estão a tratar conceitos introdutórios. Já os níveis 4 e 5 foram esparsamente usados na avaliação.

A matriz resultante desta framework, onde está caracterizado cada jogo, pode ser encontrada em anexo (FigurasB.1eB.2). Estatísticas sobre esta caracterização (tais como a média na escala

(37)

atingida em cada tópico e o valor máximo na escala atingido para cada tópico) podem também ser encontradas em anexo (FiguraB.3).

3.3 Plano de atividades

Um dos objetivos para o plano de atividades definido era poder estabelecer um percurso de progressão não linear para o estudante. Assim optou-se por dividir os jogos por níveis. Um estudante pode assim começar nos níveis mais baixos e subir de nível quando se sentir confortável. Apresenta-se aqui uma apresentação possível para o plano de estudos desenvolvido (Figura3.1), disponível também neste link:https://paginas.fe.up.pt/~ei12085/diss/.

(38)

(39)

Capítulo 4

Plano de atividades baseado em Jogos

Uma lista de todos os jogos e tutoriais implementados, assim como a árvore de progressão não linear entre jogos pode ser vista através do seguinte link:https://paginas.fe.up.pt/ ~ei12085/diss/

4.1 Rock Paper Scissors

Figura 4.1: Jogo "Rock Paper Scissors"

Este jogo foi implementado e pode ser jogado através do seguinte link:https://paginas.

fe.up.pt/~ei12085/diss/jogos/rock_paper_scissors.html.

Também foi implementado o tutorial para este jogo que pode ser visitado através do seguinte

link:https://paginas.fe.up.pt/~ei12085/diss/tutoriais/rock_paper_scissors.

html.

4.1.1 Descrição

O primeiro jogo dado é o Pedra Papel Tesoura (Rock Paper Scissors). Este jogo é um dos mais importantes uma vez que é o primeiro que o estudante vai ver e vai servir como introdução a todo o processo.

(40)

Plano de atividades baseado em Jogos

Teve de ser escolhido um jogo simples uma vez que o respetivo tutorial, para além de acompa-nhar o seu desenvolvimento, tem de introduzir a linguagem, o ambiente de trabalho e as praticas necessárias para acompanhar esta linha de tutoriais. Efetivamente este jogo é como que o "Hello World"desta linha de tutoriais.

O conceito deste jogo é simples: Um título e um botão que altera o título para as palavras "Rock", "Paper"ou "Scissor"aleatoriamente quando é carregado. A ideia é permitir o jogador "jogar"Pedra Papel Tesoura com o computador carregando no botão ao mesmo tempo que lança a sua jogada fisicamente.

4.1.2 Pré-requisitos

Uma vez que este é o tutorial de introdução, poucos ou nenhuns pré-requisitos são necessários. Dito isto, uma vez que o tutorial foi feito para um publico alvo do ensino superior, espera-se que o estudante tenha algumas competências básicas. Nomeadamente, conceitos básicos de informática, experiência com um editor de texto, gestão de ficheiros, saber usar um browser, etc.. Apesar de ser feita uma introdução breve, experiência prévia com HTML básico será de grande valor.

4.1.3 Detalhes de Implementação

O código para este jogo é bastante simples, não chegando às 30 linhas já com indentação e comentários. Está dividido em 3 objetivos que se pretende que o estudante compreenda:

1. A estrutura de um documento HTML e como fazer um interface muito simples (titulo e botão).

2. A criação de um bloco de código javascript que é chamado quando um evento acontece (neste caso, quando o botão é clicado).

3. A escolha aleatória de uma palavra e a sua colocação no interface declarado.

O primeiro não requer uma explicação muito aprofundada sendo que o HTML, como tecnolo-gia especifica para implementar o interface, não é o tema principal do tutorial. Da mesma forma o segundo objetivo apenas precisa de ser explicado por alto. Estes dois objetivos servem para construir uma base para o terceiro objetivo.

A lógica do jogo é bastante simples e cabia quase numa só linha mas no código do exemplo é separada em pequenas partes para que os vários conceitos abordados possam ser comentados em separado. Estes conceitos são:

• Criar uma lista de palavras.

• Escolher um numero aleatório entre 0 e número de palavras menos 1. • Aceder um elemento a uma lista de palavras.

(41)

• Atualizar o interface com a palavra escolhida.

Aqui são introduzidos brevemente vários conceitos relativos à programação tais como: • O que é uma variável

• O que é um vetor/array e como aceder a um elemento dele • O que é uma função

• Como tratar input do utilizador/subscrever a um evento 4.1.4 Desafios

Para este exemplo simples foram propostos dois desafios para testar os conhecimentos obtidos. O primeiro seria criar um novo jogo com palavras diferentes e uma descrição só para o estudante mudar as palavras e ver o efeito das mudanças e para mexer um pouco com o HTML (acrescen-tando simplesmente uma tag <p>).

O segundo seria refazer o jogo de raiz para cara ou coroa fazendo as alterações necessárias para que o jogo funcione com 2 estados em vez de 3.

4.2 Guess the Number

Figura 4.2: Jogo "Guess the Number"

fe.up.pt/~ei12085/diss/jogos/guess_the_number.html.

4.2.1 Descrição

A primeira opção sugerida após o primeiro tutorial é um pequeno "jogo"em que o computador advinha o número em que o utilizador fazendo perguntas sucessivas. Este jogo foi escolhido pela sua simplicidade em termos de interface e por introduzir conceitos importantes da programação.

(42)

Assume-se que o estudante efetuou o tutorial anterior de onboarding e, portanto, está minima-mente confortável com o ambiente de trabalho estabelecido.

Para além disso, os conceitos mais importantes a reter do tutorial anterior são: • Como colocar num ficheiro e executar código javascript

• Como fazer um interface simples em HTML e mostrar mensagens simples ao utilizador (via alert)

O código deste exemplo é também bastante curto (<50 linhas, com comentários e indentação) mas introduz vários conceitos novos:

• Como passar e usar parâmetros numa função • A estrutura condicional "if/else"

• Construção de strings

Para além disso apresenta dois tópicos importantes relativos à ciência dos computadores: • Algoritmos e, em especifico, a pesquisa binária

• Recursividade

4.2.4 Desafios

Para este exemplo foi usado a interface com utilizador por mensagens default de HTML (fun-ção "confirm") por razões de simplicidade e para "forçar"um pouco o tema da recursividade. Propor-se-ia refazer o programa sem usar a função "confirm"e em vez disso usar botões na pa-gina.

4.3 Text Adventure

fe.up.pt/~ei12085/diss/jogos/adventure/1.

(43)

Figura 4.3: Jogo "Text Adventure"

4.3.1 Descrição

A segunda opção sugerida após o primeiro tutorial é um jogo de aventura por texto. Aqui o jogador pode seguir uma aventura interativa lendo pequenos excertos de texto e escolhendo entre opções que o levarão para outros excertos. Isto é semelhante ao conceito dos livros "Choose your own adventure". Este jogo foi escolhido por ser simples de implementar e ter imenso potencial para fomentar a criatividade e interesse do estudante.

Tal como o tutorial anterior este tutorial assume que o estudante efetuou o primeiro tutorial de onboarding. Tem aproximadamente os mesmos requisitos que o tutorial anterior.

O código deste exemplo é ligeiramente maior do que o do anterior ( 60 linhas sem comentários) se não contarmos com o texto e suporte da história em si. Introduz um conjunto de conceitos semelhante ao tutorial anterior:

(44)

• A estrutura condicional "if/else"

• Construção de objetos compostos simples ("structs") • Conjuntos de pares chave-valor ("maps")

Para além destes conceitos não se introduzem muitos outros conceitos de programação. Porém, este jogo é excelente para introduzir conceitos dos fundamentos e design de jogos digitais, tais como o conceito de um jogo e narrativas não lineares.

Outro conceito importante que pode ser introduzido com este tutorial é o de grafo, já que a história não linear desenvolvida pode ser vista como um grafo.

4.3.4 Desafios

É fácil imaginar desafios para este exemplo. O que salta mais à vista é sugerir que o estudante crie a sua própria história e sugerir que se incluam o máximo de situações "estranhas"que uma narrativa não linear traz, como, por exemplo: desvios sem saída, linhas de narrativa que se afastam e voltam a encontrar e ciclos.

4.4 Hangman

Figura 4.4: Jogo "Hangman"

fe.up.pt/~ei12085/diss/jogos/hangman.html.

Também foi implementado o tutorial para este jogo que pode ser visitado através do seguinte link:https://paginas.fe.up.pt/~ei12085/diss/tutoriais/hangman.html. 4.4.1 Descrição

Este é o primeiro tutorial do nível 3 e o mais simples. É o jogo do Enforcado (Hangman) onde o jogador tenta adivinhar, letra a letra, uma palavra escolhida pelo computador. Este jogo foi escolhido, mais uma vez por ser relativamente simples e por permitir introduzir os conceitos de ciclos e construção de strings.

(45)

Este tutorial requer que o estudante já tenha alguma experiência básica com javascript e uma boa compreensão de alguns dos tópicos dos tutoriais anteriores, especialmente do tutorial de on-boarding. Em particular:

• Arrays e o acesso aos seus elementos • Interfaces simples em HTML

• Estruturas de controlo (if e else)

• Construção simples de strings (concatenação)

O código deste exemplo é um pouco maior que os anteriores mas continua a ser relativamente curto ( 90 linhas com comentários e indentação). É facilmente divisível em pequenos módulos com funções especificas. Em particular introduz-se pela primeira vez o uso de uma função como método de reutilização de código.

São introduzidos os seguintes conceitos: • O tipo de variável booleano

• As estruturas de controlo "while"e "for" • A pesquisa de um elemento numa lista

4.4.4 Desafios

No tutorial implementado foram sugeridos três desafios. Os dois primeiros são resolver dois "bugs"da implementação sugerida: procurar por letras já introduzidas anteriormente e ignora-las e procurar por letras erradas já reveladas.

O terceiro desafio é mais interessante e consiste numa espécie de trabalho de investigação. Sugere-se a funcionalidade de validar o input do jogador quando este carrega na tecla enter. Apenas Sugere-se dão algumas pistas de como isto é feito, ficando o resto a cargo do jogador descobrir através de pesquisa.

4.5 Snake

(46)

Figura 4.5: Jogo "Snake"

4.5.1 Descrição

Este é o segundo tutorial do nível 3 e é o primeiro com uma interface gráfica que não HTML simples. O Snake é um jogo em que o jogador controla um ponto, quadrado ou objeto que deixa um rasto no campo de jogo que se assemelha a uma cobra. O principal obstáculo do jogo é o rasto do jogador em si o qual este deve evitar. Existem inúmeras variações deste jogo sendo que normalmente o jogador tem como objetivo recolher "comida"no campo de jogo que faz aumentar o tamanho do seu rasto e também a sua pontuação.

Este jogo foi escolhido por ser bastante conhecido e icónico, por ser relativamente simples de implementar e por permitir introduzir conceitos relativos a listas e outras estruturas de dados lineares assim como a pesquisa em listas.

Este tutorial é o primeiro a introduzir a biblioteca p5.js usada para a implementação da inter-face gráfica.

Os conceitos principais abordados neste tutorial são os de listas e outras estruturas de dados li-neares, por isso, um aproveitamento adequado dos tutoriais anteriores que introduzem esses temas será importante. O aproveitamento dos seguintes temas é importante para este tutorial:

• Criação e acesso a listas em javascript.

• Como organizar o código em funções de forma a organiza-lo e poder reutiliza-lo facilmente. • Como criar objetos simples em javascript ("structs").

Para além disso e dos básicos de como correr um programa em javascript não existem muitos pré-requisitos para este tutorial uma vez que introduz do princípio o funcionamento da biblioteca p5.js.

(47)

O código deste tutorial continua a ser relativamente curto (~110 linhas com comentarios e indentação) e continua a caber num ficheiro único. Tal como o anterior, e também graças ao funcionamento da biblioteca p5.js, este pode ser facilmente dividido em módulos com funções especificas. São introduzidos aqui os seguintes conceitos:

• Uso de objetos javascript para organizar variáveis.

• A subscrição a eventos para receber input do teclado (com a biblioteca p5.js). • Inserção e remoção de elementos à cabeça e à cauda de uma lista.

• Pesquisa linear.

• Programação gráfica simples (desenho de retângulos em diferentes cores). 4.5.4 Desafios

Uma vez que existem inúmeras variações para o jogo Snake é fácil imaginar diferentes de-safios para este tutorial. Os propostos são, por exemplo, implementar um "reset"do jogo quando o jogador carrega numa tecla para evitar ter de recarregar a pagina e implementar um segundo jogador que controla uma segunda cobra (O primeiro jogador a tocar num corpo ou nas paredes perde).

4.6 Pong

Figura 4.6: Jogo "Pong"

Este jogo foi implementado e pode ser jogado através do seguinte link:https://paginas. fe.up.pt/~ei12085/diss/jogos/pong.html

Também foi implementado o tutorial para este jogo que pode ser visitado através do seguinte link:https://paginas.fe.up.pt/~ei12085/diss/tutoriais/pong.html(Tutorial adaptado de um tutorial de A.Coelho et al. Link disponível no tutorial).

(48)

4.6.1 Descrição

Este é o terceiro e último tutorial do nível 3, o clássico jogo Pong. É um jogo em que dois jogadores controlam uma raquete e rematam uma bola para o campo do adversário marcando pontos se este deixar que a bola passe pela linha de fundo.

Este jogo foi escolhido por ser bastante conhecido e icónico e por ter todos os elementos necessários para explicar o funcionamento de um motor de jogo do início ao fim.

O fundamental deste tutorial é a apresentação do conceito e fundamentos de um motor de jogo e, por isso, não constrói especificamente sobre nenhum tema específico dos tutoriais anteri-ores. Assim os pré-requisitos são apenas ao nível da linguagem e ambiente de trabalho, de forma sememlhante ao tutorial anterior:

• Como organizar o código em funções de forma a organiza-lo e poder reutiliza-lo facilmente. • Como criar objetos simples em javascript ("structs").

Ter seguido o tutorial anterior não é de todo obrigatório para se poder seguir este.

O código deste tutorial é aproximadamente do mesmo tamanho que o do anterior (~130 linhas com comentários e indentação). A sintaxe e estrutura do código é bastante simples permitindo que o foco do tutorial seja mesmo só o funcionamento de um motor de jogo e como implementar as diferentes features do jogo.

O único tópico relevante mais aprofundado neste tutorial em relação aos anterior é o da compu-tação gráfica sendo que são introduzidos alguns conceitos básicos ao nível dos do tutorial anterior.

4.6.4 Desafios

Durante o tutorial são sugeridos varias pequenas melhorias ao jogo tais como melhorar a ra-quete para dar um "efeito"à bola ou criar um oponente mais equilibrado.

O tutorial é terminado com um desafio aberto a criar novos jogos com os conhecimentos aprendidos já que com o conhecimento de como funciona um motor de jogo é já possível criar muitos jogos simples. Uma sugestão possível mais especifica seria implementar o jogo Arkanoid que tem uma complexidade, jogabilidade e features muito semelhantes ao jogo desenvolvido.

4.7 Space Invaders

(49)

Figura 4.7: Jogo "Space Invaders"

4.7.1 Descrição

Este é o primeiro tutorial do nível 4 de tutoriais. O nível 4 contém os tutoriais mais avan-çados cujo seguimento não é obrigatório. Tem o intuito de dar ao estudante a escolher um tema sobre o qual queira aprender mais. Este tutorial é o primeiro e mais simples, talvez servindo de gateway aos próximos, cujo objetivo é introduzir o estudante a um projeto de maior dimensão e à programação orientada a objetos.

O Space Invaders é um jogo clássico em que o jogador controla um canhão ou laser que se desloca na horizontal no fundo do ecrã protegido por diversos bunkers. O seu objetivo é destruir um exercito de naves alienisnas que descem progressivamente e disparam contra o jogador. Se as naves chegarem ao fundo do ecrã o jogador perde.

Este jogo foi escolhido por ser um clássico muito popular e por ter um nível de complexidade e quantidade de features que justifiquem a introdução de conceitos mais avançados de organização de código e programação OO.

Este tutorial constrói sobre os conceitos de motor de jogo e nos conhecimentos sobre aplica-ções gráficas dados nos tutoriais do nível anterior. Sendo um tutorial avançado supõe um bom aproveitamento geral dos tutoriais dos níveis anteriores.

(50)

O primeiro ponto abordado por este tutorial é a divisão do código por ficheiros. Este é o primeiro exemplo onde a complexidade presente justifica esta divisão. O tópico da programação OO também beneficia da divisão por ficheiros.

O segundo e principal ponto principal abordado por este tutorial é a programação OO em si. • É abordado o conceito de construtor.

• São apresentados os métodos como funções membros dos objetos. • É abordado o conceito de escopo.

• É usada uma sintaxe simples de javascript declarando os métodos no construtor de cada objeto, evitando assim usar/abordar o conceito de prototype.

São implementadas as classes Player, Bullet, Enemy, Sprite e Animation.

É também abordado o tópico do uso de ficheiros externos, neste caso imagens. Isto é relativa-mente simples graças ao uso da biblioteca p5.js.

Não são implementados no tutorial todas as features do jogo original, deixando-as como desa-fios. Com o básico o código do exemplo é composto de 5 ficheiros com ~50 linhas cada um.

4.7.4 Desafios

Este jogo apesar de parecer simples, tem um grande número de features em relação aos jogos anteriores. Faz sentido que, depois de apresentados os básicos, se sugiram as restantes features como desafios. Sugerem-se as seguintes features como desafios:

• Explosões.

• Disparos dos inimigos. • Vidas do jogador.

• Múltiplos níveis de dificuldade. • HUD com vidas, pontuação e nível. • Bunkers destruíveis.

• Nave mãe para pontos extra.

4.8 Platform

(51)

Figura 4.8: Jogo "Platform"

4.8.1 Descrição

O segundo tutorial do nível 4 ensina a fazer a base para um género de jogo também muito popular: os jogos de plataformas. Neste tipo de jogo o jogador controla uma personagem que se move num ambiente de jogo com plataformas onde pode caminhar e entre as quais pode saltar.

Este género de jogo foi escolhido por ser popular, por poder servir de base para um grande número de jogos diferentes com mecânicas variadas e por permitir introduzir temas tais como os motores de física e o tratamento de ficheiros.

Tal como o anterior, este tutorial entra na programação orientada a objetos apesar de ser um pouco mais simples nesse sentido. Assim sendo um aproveitamento do tutorial anterior seria uma mais valia mas não é obrigatório.

Mais uma vez, tratando-se de um tutorial avançado, supões um bom aproveitamento geral dos tutoriais dos níveis anteriores.

Tal como no anterior este exemplo se dividido em ficheiros, e mais uma vez encontra-se uma introdução à programação OO apesar de encontra-ser um exemplo mais simples. São implementadas apenas as classes Player e Level.

Um dos pontos de foco deste tutorial é a construção de um motor de física simples. Isto é um tópico relativamente avançado e optou-se por uma implementação de raiz. Dependendo do contexto, o uso de um motor de física pré-feito poderia ser mais indicado.

(52)

O segundo ponto de foco deste tutorial é o tratamento de ficheiros de imagem raster. É usada uma imagem para construir o nível de jogo e são percorridos os pixeis dessa imagem para delinear que blocos são sólidos, que blocos estão vazios e onde começa o jogador.

É também introduzida brevemente a programação áudio com a introdução de um som de salto. Isto é facilitado com a biblioteca p5.js.

Apesar de relativamente curto, o código deste exemplo é relativamente complexo. Em parti-cular o motor de física. É uma cedência que se escolheu fazer uma vez que o verdadeiro objetivo deste exemplo é dar uma base para o estudante explorar e expandir.

4.8.4 Desafios

Este exemplo trata-se como que de uma tela em branco sem qualquer mecânica de jogo im-plementada por cima da qual o estudante pode criar o seu jogo. Como desafios apresentar-se-iam apenas uma lista de features sugeridas e algumas pistas de como as implementar. Por exemplo:

• Blocos com espinhos que matam o jogador.

• Inimigos sobre os quais o jogador pode saltar para os matar. • Um martelo com o qual o jogador pode partir blocos. • Projeteis que o jogador pode atirar aos inimigos. • Portas com chaves.

• ...

4.9 Tic-Tac-Toe (AI)

Figura 4.9: Jogo "Tic-Tac-Toe"

(53)

4.9.1 Descrição

Este é o terceiro jogo do nível 4 e apesar de parecer simples é um dos mais complexos. Este exemplo foi incluído como experiência para saber se seria possível incluir inteligência artificial no plano de estudos.

Este é o simples jogo do galo com um oponente controlado pelo computador. Neste jogo cada jogador coloca, por turnos, a sua marca ("O"ou "X") num campo 3x3 com o objetivo de formar uma linha horizontal, vertical ou diagonal de 3 marcas.

Este jogo foi escolhido por ser simples, por ser facilmente resolvido por um computador (e também por um humano) e por haver a possibilidade de, fazendo o jogo de forma genérica, aplicar o algoritmo desenvolvido a regras de jogo ligeiramente diferentes (tabuleiros de tamanho maior, tamanho de linhas de vitoria diferentes...).

Como os anteriores este jogo utiliza programação orientada a objetos para organizar o seu código por isso o aproveitamento dos tutoriais anteriores seria uma mais valia, apesar de não ser obrigatório.

Este é talvez o exemplo mais complexo do plano de estudos proposto. O mais provável era ser apenas sugerido aos estudantes que mostrassem competências mais desenvolvidas e que tivessem interesse pelo campo da inteligência artificial.

O código deste projeto encontra-se dividido em dois módulos. O primeiro é a definição de uma classe Board que engloba toda a lógica do tabuleiro de jogo incluindo: jogador atualmente a jogar, operações sobre as células do jogo, obtenção de uma lista de jogadas válidas, verificação de se um jogador ganhou e função de desenho do tabuleiro. No exemplo esta implementação foi feita de forma genérica para permitir a aplicação de parametros diferentes (apesar disso poder ser guardado para um desafio).

O segundo módulo é onde está implementada a pesquisa no espaço de estados de jogo usando um algoritmo minimax, mais especificamente negamax. É também onde está o tratamento do input do jogador e configurações gerais. Aqui foram implementadas otimizações e features interessantes que poderiam ser explicadas e deixadas como desafio:

• Foi implementado um mecanismo de timeout para parar a pesquisa ao fim de um tempo razoável.

• Foi implementado um algoritmo de iterative deepning para obter soluções parciais caso o computador não tenha tempo de chegar a uma solução final.

• Com base no resultado do algoritmo o computador emite mensagens sobre a sua pesquisa tais como: "I think I’m going to lose", "I don’t know how to win", "I can force a draw"e "I am going to win".