Introdução ao Desenvolvimento de Jogos BCT - UERN
Créditos Professores UERN Alberto Signoretti Raul Paradeda Alunos CC UERN Pedro Henrique Bruno Magnos Gustavo Matheus Rodrigo Fernandes
Visão Inicial Elementos iniciais Como um jogo funciona? Ideias básicas de um jogo Elementos iniciais de programação Voltado ao ensino de programação Não vamos criar imagens, gráficos e sons Vamos utilizar imagens e sons existentes
Introdução ao Desenvolvimento de Jogos O que é um jogo?
Como um jogo funciona? O que é a lógica de um jogo? O que é um programa? Que ferramentas vamos usar? Introdução
Como um jogo funciona?
Como um jogo funciona? Ciclo de um jogo Dispositivo de entrada Processamento Dispositivo de saída JOGO
Como um jogo funciona? entrada saída Programa Lógica do jogo JOGO Controla TODOS os elementos do jogo Gráficos e Animações Sons e efeitos sonoros Programa Captura o que o jogador faz no dispositivo de entrada Seleciona o que será mostrado no dispositivo de saída
O que é a Lógica do jogo? Exemplo de controle dos elementos do jogo Se então Se então Se então
Como definir a lógica do jogo? Através de um Programa Sequência de instruções que dizem o que o computador deve fazer (igual à recita de bolo da vovó ) no caso de um jogo Sequência de instruções que dizem ao computador o que mudar no jogo, em função do que o jogador faz no dispositivo de entrada (gamepad, teclado, ) As instruções são executadas numa ordem pré-definida (igual à receita de bolo da vovó )
Exemplo Que instruções vocês dariam ao robô abaixo para pegar o objeto e levá-lo ao alvo? SOLUÇÃO???
Exemplo: solução 1 Que instruções vocês dariam ao robô abaixo para pegar o objeto e levá-lo ao alvo? PRIMEIRA SOLUÇÃO 1. Vire 23 graus para esquerda 2. Vá pra frente 4 cm 3. Pegue o objeto 4. Vire 138 graus para direita 5. Vá pra frente 3 cm 6. Deposite o objeto
Exemplo : solução 1 Que instruções vocês dariam ao robô abaixo para pegar o objeto e levá-lo ao alvo? 23 o PRIMEIRA SOLUÇÃO 1. Vire 23 graus para esquerda 2. Vá pra frente 4 cm 3. Pegue o objeto 4. Vire 138 graus para direita 5. Vá pra frente 3 cm 6. Deposite o objeto
Exemplo : solução 1 Que instruções vocês dariam ao robô abaixo para pegar o objeto e levá-lo ao alvo? 4 cm PRIMEIRA SOLUÇÃO 1. Vire 23 graus para esquerda 2. Vá pra frente 4 cm 3. Pegue o objeto 4. Vire 138 graus para direita 5. Vá pra frente 3 cm 6. Deposite o objeto
Exemplo : solução 1 Que instruções vocês dariam ao robô abaixo para pegar o objeto e levá-lo ao alvo? PRIMEIRA SOLUÇÃO 1. Vire 23 graus para esquerda 2. Vá pra frente 4 cm 3. Pegue o objeto 4. Vire 138 graus para direita 5. Vá pra frente 3 cm 6. Deposite o objeto
Exemplo : solução 1 Que instruções vocês dariam ao robô abaixo para pegar o objeto e levá-lo ao alvo? 138 o PRIMEIRA SOLUÇÃO 1. Vire 23 graus para esquerda 2. Vá pra frente 4 cm 3. Pegue o objeto 4. Vire 138 graus para direita 5. Vá pra frente 3 cm 6. Deposite o objeto
Exemplo : solução 1 Que instruções vocês dariam ao robô abaixo para pegar o objeto e levá-lo ao alvo? 3 cm PRIMEIRA SOLUÇÃO 1. Vire 23 graus para esquerda 2. Vá pra frente 4 cm 3. Pegue o objeto 4. Vire 138 graus para direita 5. Vá pra frente 3 cm 6. Deposite o objeto
Exemplo : solução 1 Que instruções vocês dariam ao robô abaixo para pegar o objeto e levá-lo ao alvo? PRIMEIRA SOLUÇÃO 1. Vire 23 graus para esquerda 2. Vá pra frente 4 cm 3. Pegue o objeto 4. Vire 138 graus para direita 5. Vá pra frente 3 cm 6. Deposite o objeto
Exemplo : solução 1 funciona? Quem disse que o computador entende isso? É necessário dar as instruções num formato que ele entenda PRIMEIRA SOLUÇÃO 1. Vire 23 graus para esquerda? 2. Vá pra frente 4 cm 3. Pegue o objeto 4. Vire 138 graus para direita 5. Vá pra frente 3 cm 6. Deposite o objeto
Exemplo E se as possíveis instruções forem apenas frente, esquerda, direita, pegue e deposite? SOLUÇÃO???
Exemplo: solução 2 E se as possíveis instruções forem apenas Frente, Esquerda, Direita, Pegue e Deposite? SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite
Exemplo: solução 2 E se as possíveis instruções forem apenas Frente, Esquerda, Direita, Pegue e Deposite? SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite
Exemplo: solução 2 E se as possíveis instruções forem apenas Frente, Esquerda, Direita, Pegue e Deposite? SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite
Exemplo: solução 2 E se as possíveis instruções forem apenas Frente, Esquerda, Direita, Pegue e Deposite? SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite
Exemplo: solução 2 E se as possíveis instruções forem apenas Frente, Esquerda, Direita, Pegue e Deposite? SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite
Exemplo: solução 2 E se as possíveis instruções forem apenas Frente, Esquerda, Direita, Pegue e Deposite? SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite
Exemplo: solução 2 E se as possíveis instruções forem apenas Frente, Esquerda, Direita, Pegue e Deposite? SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite
Exemplo: solução 2 E se as possíveis instruções forem apenas Frente, Esquerda, Direita, Pegue e Deposite? SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite
Exemplo: solução 2 E se as possíveis instruções forem apenas Frente, Esquerda, Direita, Pegue e Deposite? SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite
Exemplo: solução 2 E se as possíveis instruções forem apenas Frente, Esquerda, Direita, Pegue e Deposite? SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite
Qual é o formato, então? Depende da Linguagem e Ferramentas usadas As ferramentas disponibilizam os comandos que podemos utilizar Ex: Vire à esquerda, vá em frente, etc. A linguagem especifica como usá-los SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite Ferramenta programa numa linguagem
Que ferramenta iremos utilizar? Motor de jogo (engine) Programa SEGUNDA SOLUÇÃO 1. Frente (4x) 2. Esquerda 3. Frente 4. Pegue 5. Esquerda (2x) 6. Frente (3x) 7. Direita 8. Frente 9. Deposite Engine Gráficos e imagens Sons e efeitos sonoros Captura de eventos no teclado mouse gamepad Sistema de partículas Modelos de física Primeira engine a ser usada: Scratch
Língua vs. Linguagem Língua (natural ; gramática) Linguagem (artificial ; sintaxe) Linguagem Evita-se ambiguidades Comunicação através de uma sintaxe formal
Que linguagem iremos utilizar? Linguagem de blocos do Scratch Interface própria
Criando a Ideia do Jogo Projeto, desafios e interface
Idealizando um jogo Em geral, essa é a parte mais difícil O que fazer para seu jogo ser interessante Criatividade: ovo de Colombo Precisa ter estímulos Desafios Você é capaz de? Mas Não pode ser muito difícil ( Nunca vou conseguir ) Não pode ser muito fácil ( Sem graça ) Vamos pegar um caso simples
Partes na definição de um jogo Jogo Interface do jogo Modelo do jogo Jogador
Modelo do jogo Alien Elementos que compõem o jogo Personagem, inimigos, objetos, Alien Atributos que eles possuem Posição, força, pontos de vida, Posição do alien Regras as quais os elementos estão sujeitas A posição de alien não pode ser negativa Se os pontos de vida forem nulo, o personagem morre
Interface do jogo Se refere a comunicação do jogo com o jogador Gráficos, áudio, botões, mouse, teclado, pontos: 3283
Elementos de um jogo de corrida Cenário: Asfalto, gramado... Faixas (sinalização horizontal) O carro do Jogador Obstáculos Cronômetro e Velocímetro Irá dar a sensação de movimento enquanto o carro estiver em movimento. Obstáculos como tempo, inimigos etc apresentam desafios, algo essencial a um jogo.
Regras do jogo - Mecânica Objetivo: O jogador terá o tempo de 1 minuto para percorrer 2 km Movimentos: O carro só poderá deslocar-se para frente e para os lados O carro não pode ultrapassar os limites da pista Obstáculos: Ao passar por um obstáculo o carro terá sua aceleração reduzida
Loop do jogo: Inicializa os dados (configura tela, carrega imagens, etc.) Desenha os dados (desenha gráficos e animações, etc.) Loop do jogo Captura eventos do usuário (movimento do mouse, teclado,gamepad,etc.) Atualiza os dados (muda posição de personagens, etc.) Várias vezes por segundo Ilusão de continuidade
Introdução ao Desenvolvimento de Jogos Elementos imprescindíveis: variáveis e funções
Elementos iniciais Objetivos Variáveis Funções
Criando o modelo do jogo Como armazenar esses dados no computador? Tipo do Alien Uso de variáveis
O que são variáveis? A memória do computador é armazenada em blocos de dados Cada bloco contém uma informação nele Força Posição Nome e ao menos uma etiqueta para sabermos que informação é aquela Chamamos de variáveis porque o conteúdo das caixas podem mudar ao longo do tempo
Variáveis Declaração da variável forca e atribuição do valor 5 a ela forca = 5 posicao = 12 nome = "abc" forca forca = 3 posicao = 11 forca = 3-1 forca = forca - 1
Variáveis Declaração da variável posicao e atribuição do valor 12 a ela forca = 5 posicao = 12 nome = "abc" forca forca = 3 posicao = 11 forca = 3-1 forca = forca - 1 posicao
Variáveis Declaração da variável nome e atribuição do valor abc a ela forca = 5 posicao = 12 nome = "abc" forca forca = 3 posicao = 11 forca = 3-1 forca = forca - 1 posicao Os valores podem ser de tipos diferentes nome
Variáveis forca = 5 posicao = 12 nome = "abc" forca forca = 3 posicao = 11 forca = 3-1 forca = forca - 1 posicao nome
Variáveis forca = 5 posicao = 12 nome = "abc" forca forca = 3 posicao = 11 forca = 3-1 forca = forca - 1 posicao nome
Variáveis forca = 5 posicao = 12 nome = "abc" forca forca = 3 posicao = 11 forca = 3-1 forca = forca - 1 posicao nome
Variáveis forca = 5 posicao = 12 nome = "abc" forca forca = 3 posicao = 11 forca = 3-1 forca = forca - 1 posicao nome
Dados possuem tipos Tipos básicos Número String (texto) Booleano (variável que pode assumir apenas dois valores: verdadeiro ou falso) Outros tipos Imagem Sprites etc
O que são funções? Uma FUNÇÃO é uma relação entre dois conjuntos de dados Na matemática, pode ser definida como uma relação onde: cada valor x de um conjunto é correspondido por UM elemento y do outro conjunto, também denotado por ƒ(x). f(x) IR (conjunto dos Reais) f(x) = x + 2 se f(x) = y, então y = x + 2
O que são funções? Em computação: f(x) IR Parâmetros de entrada Tipo do resultado Parâmetros de entrada Instruções a serem processadas (cálculos, consultas, etc.) Resultados (saída)
Como funciona uma Função? Vamos supor algumas situações do nosso diaa-dia: Um carro aumenta sua velocidade conforme o motorista pisa no acelerador. Então: Podemos dizer que a velocidade do carro É FUNÇÃO direta do pisar do motorista no acelador, ou seja: Maior o pisão, maior o aumento da velocidade Menor o pisão, menor o aumento da velocidade
Como funciona uma Função? Vamos supor algumas situações do nosso diaa-dia: Um carro diminui sua velocidade conforme o motorista pisa no freio. Então: Podemos dizer que a velocidade do carro É FUNÇÃO inversa do pisar do motorista no freio, ou seja: Maior o pisão, menor a velocidade Menor o pisão, maior a velocidade
Como funciona uma Função? Vamos supor algumas situações do nosso diaa-dia: Um carro vai para direita ou esquerda conforme o motorista vira o volante para esquerda ou para direita. Então: Podemos dizer que a direção do carro É FUNÇÃO direta do giro que o motorista dá no volante, ou seja: Motorista vira para direita, carro vai para direita Motorista vira para esquerda, carro vai para esquerda
Como escrevemos uma Função matemáticamente? Um carro aumenta sua velocidade conforme o motorista pisa no acelerador. Então: Podemos dizer que a velocidade do carro É FUNÇÃO direta do pisar do motorista no acelador, ou seja: Maior o pisão, maior o aumento da velocidade Menor o pisão, menor o aumento da velocidade Velocidade(pisão_ac) = vel_carro + pisão_ac x 2 Ou seja, a velocidade do carro é igual a valor da velocidade da variável vel_carro somada a duas vezes o valor da variável pisão_ac!
Como escrevemos uma Função matemáticamente? Um carro diminui sua velocidade conforme o motorista pisa no freio. Então: Podemos dizer que a velocidade do carro É FUNÇÃO inversa do pisar do motorista no freio, ou seja: Maior o pisão, menor a velocidade Menor o pisão, maior a velocidade Velocidade(pisão_fr) = vel_carro - pisão_fr x 2 Ou seja, a velocidade do carro é igual a valor da velocidade da variável vel_carro subtraida de duas vezes o valor da variável pisão_fr!
Como escrevemos uma Função matemáticamente? Um carro vai para direita ou esquerda conforme o motorista vira o volante para esquerda ou para direita. Então: Podemos dizer que a direção do carro É FUNÇÃO direta do giro que o motorista dá no volante, ou seja: Motorista vira para direita, carro vai para direita Motorista vira para esquerda, carro vai para esquerda Direção(vira) = vira Ou seja, a direçãodo carro é igual ao valor da variável vira. Se vira=esquerda, Direção =esquerda, se vira=direita, Direção=direita.
Introdução ao Desenvolvimento de Jogos Agora vamos aprender a usar o SCRATCH!