Prática 17 e 18 – Elementos do desenvolvimento de jogos

Prática 17 e 18 – Elementos do desenvolvimento de jogos
1. Objetivos
Estudar os elementos essenciais no desenvolvimento de jogos
Desenvolver um jogo de quebra-cabeças em Flash
2. Recursos Necessários
Computador com o programa Macromedia Flash MX ou superior.
3. Conceitos Gerais
O processo do design de um game pode ser uma das mais gratificantes experiências nos
computadores de hoje. É um campo em que se fundem a criatividade e a experiência técnica. O
desenvolvedor de um game deve ser um contador de histórias, um artista e um técnico.
Para elaborar o escopo de games online educativos, é necessário primeiro saber quais são os
requisitos do produto, no caso, o próprio game. Para tanto, é necessário estabelecer os principais
elementos que compõem os jogos.
No processo de design de um game existem fundamentos nos quais a maioria dos games são
baseados. Sempre existirão exceções, é claro, mas, segundo RHODES, no geral existem regras
simples nas quais bons jogos são feitos e, segui-las assegura que a sua audiência seja satisfeita. Ele
os lista como os itens a seguir:
3.1. A idéia do jogo
Está é o primeiro passo para uma boa formulação do jogo. É esta a ocasião aonde podemos coletar
as idéias sem a necessidade de organizá-las. A pergunta que principal deve ser: Este jogo deve ser
sobre o quê? É neste estágio de podemos decidir que tipo de jogo deve ser direcionado a sua
audiência.
3.2. Gênero / Tipo
Este é um passo simples, mas importante. É neste momento que devemos decidir exatamente qual
será o gênero do jogo. Ele será um jogo de tiro ao alvo? Jogo de palavras? Quebra-cabeças? É
preciso olhar para idéia principal e decidir qual tipo de jogo se encaixa melhor.
3.3. História
Neste ponto decidimos exatamente o que acontece no jogo. Qual a história? Quais objetivos? Quais
as ações desejadas?
Se o jogo segue um enredo é necessário escrever um roteiro para guiar-nos na construção do jogo.
De alguma maneira é como um roteiro de um filme, mas em vez de conter instruções para o câmara,
ele contém uma lista geral de ações. Assim, o enredo deve conter detalhes de pontos de
interatividade para que o jogador possa ser responsável por realizar as etapas do jogo.
1
Este roteiro também pode conter os diálogos, assim como, desenhos para ilustrar algumas cenas.
3.4. O planejamento do jogo
Este é um ponto crítico no processo geral do planejamento de um game. O documento do
planejamento de um jogo é o cume de esforços criativos tanto do time responsável pela
comunicação visual quanto do time responsável pela programação.
Neste documento que deve constar todo o escopo do jogo por escrito. O documento de deixar bem
claro todas as partes do jogo, incluindo:
O tema ou o enredo da história
A listagem dos ambientes e uma detalhada lista do que eles querem transmitir
Esboços ou mapas - A distribuição dos personagens com o respectivo papel, comportamento e
visual. A idéia é guiar tanto os programadores quanto os artistas, esclarecendo o trabalho à
fazer.
Stroyboards para as animações e suas seqüências - Aspectos técnicos como fórmulas, esboços
de ações, etc. Eles tem o propósito de representar visualmente alguns conceitos complexos.
Planejamento - O objetivo do planejamento de um jogo é dar aos programadores as baselines
que possam ser usadas como base para construção do mecanismo do jogo. O documento nunca
pode ser considerado muito detalhado, pois quanto mais informação melhor para evitar conflitos
e retrabalho.
O planejamento deve ser a união entre os produtores, programadores e artistas. Devem haver
encontros regulares para o propósito da confecção deste documento. Os produtores devem estar
presente para determinar os requisitos, os programadores devem estar lá para determinar os
requisitos técnicos e qualquer limitação possível no design, os artistas dêem estar presentes para
sugerir idéias criativas e determinar as limitações visuais. Esta parte do processo é mais técnica do
que criativa.
Devemos determinar o que pode e não pode ser feito. É neste momento que os programadores
devem falar com os artistas, por exemplo, que cada elemento deve ter mais de 400 vetores.
Devemos achar o balanço entre o melhor visual possível e a alta performance do jogo.
Ao mesmo tempo, esta é a oportunidade para os artistas sugerirem idéias que os programadores
podem não acatar. O plano de fundo pode deslizar? As estrelas podem mudar com o tempo? As
chamas da nave podem aumentar quando o jogador acelera? Neste pondo os programadores podem
dizer sim ou não. Um bom programador tentaria acomodar a maior quantidade de idéias possíveis,
pois estas guiariam para a criação de um ótimo jogo.
Uma vez que este processo seja completado, o resultado será um documento claro e conciso, onde
todas as partes possam ser usadas como referência. Ele também proporciona uma checklist para
que os desenvolvedores sigam.
3.5. O mecanismo central
Em qualquer jogo, antes que a história e os efeitos especiais sejam fundidos em um código, um
mecanismo básico deve ser programado. O objetivo deste mecanismo é o de criar um framework no
qual o restante do jogo possa ser escrito.
2
Uma vez que você tenha um mecanismo que carregue em níveis, mostre os inimigos, mova de
acordo com os elementos e tenha um sistema genérico de colisão, a construção do game é uma
questão de nível e design gráfico. O programador cria um molde no qual o resto do jogo pode se
apoiar.
3.6. Nível, design gráfico e interação
Uma vez criado o mecanismo central, começa o processo para incrementar este mecanismo. O
programador cria a funcionalidade, o artista cria o conteúdo atual. O código proporciona as
ferramentas, e o artista cria o mundo, ambos são igualmente importantes.
Quando o artista cria os gráficos para o game e segue o planejamento, assim como respeita as
limitações técnicas que possam ser impostas pela ferramenta, é hora do programador criar o
mecanismo. Um mecanismo modular e expansível pode possibilitar que o artista crie 1 ou 100
animações e o código ainda funcione. Ao mesmo tempo, é a hora do programador determinar os
parâmetros e as limitações da ferramenta, de maneira que o artista não perca tempo desenhando ou
criando alguma coisa tecnicamente impossível de implementar.
Este processo é um vai-e-vem. Tanto o artista pode reconhecer as limitações e modificar o design
quanto o programador pode expandir seu programa para permitir acréscimos. A boa comunicação é
essencial neste processo.
Para decisão correta é necessário observar alguns fatores como:
Escopo: O design está além ou aquém do planejado? Se o escopo do trabalho começou a crescer,
algumas mudanças serão necessárias tanto no tempo quanto no custo do projeto.
Deadline: Será que há tempo suficiente para as mudanças solicitadas? A resposta é comumente
muito direta: sim ou não – facilitando a decisão.
Prioridade: qual a prioridade do jogo? Mire nela.
3.7. Funcionamento do jogo
Neste ponto do processo de criação, os elementos específicos do funcionamento do jogo são
programados e solidificados. No estágio de funcionamento do jogo, os programadores e artistas
devem adicionar elementos e coisas que em geral vão ajudar a preencher o jogo e transformá-lo em
um jogo profissional. Por exemplo, adicionar bônus especiais para bons jogadores.
3.8. Inteligência artificial dos personagens
Este passo não precisa necessariamente vir depois dos passos anteriores. Neste ponto devemos dar
aos personagens do jogo alguma inteligência artificial. Ou seja, inserir alguma lógica neles,
programá-los a agir com certa inteligência.
Devemos ponderar nas limitações técnicas e de tempo para podermos construir personagens mais
ou menos inteligentes.
3.9. Elementos da história
Estes elementos são aqueles do enredo da história, eles fazem parte da experiência geral do jogo
ajudando a compô-lo. Talvez estes elementos sejam animações que funcionam entre cada nível, ou
quando o jogador consegue vencer o inimigo virtual. Estes elementos são responsáveis por dar ao
3
game um acabamento especial, uma aparência trabalhada, polida, terminada. São também,
necessários para aumentar o interesse do jogador, incentivando-o a continuar jogando.
3.10.
Som e música
O projeto deve aplicar novas tecnologias de produção sonora e visuais, auxiliando na composição de
um cenário lúdico para os jogos educativos e na ambientação do usuário com a interface.
Os efeitos sonoros e visuais podem ser fatores importantes na comunicação, reforçando o conteúdo
principal e instigando a exploração do game e, conseqüentemente, favorecendo o aprendizado e a
memorização. Desta forma, eles podem auxiliar na navegação, guiar os jogadores por diversas
cenas, indicar o progresso das descobertas e manter o site “vivo” nos momentos em que nada
parece estar acontecendo.
O som e a música devem ser estudados em dois momentos diferentes no processo de produção.
Quando é necessário usar vozes e ação de personagens, o áudio é usualmente gravado bem cedo
no processo criativo, de maneira que os responsáveis pela animação possam usar as vozes para
mover os lábios dos personagens.
A música e os efeitos sonoros, entretanto, são realizados comumente no final da produção. É
somente neste momento que é possível ter os efeitos visuais e sentir o que o jogo realmente quer
transmitir e, assim, determinar qual a música usar para dar ao jogo esta sensação de emoção. É a
música que faz com que a mente humana tenda a assimilar o contexto e determinar como você deve
se sentir. A combinação entre o visual e a sonoridade pode ser boa o bastante para fazer o jogo um
clássico.
A produção de efeitos sonoros é também um processo com vários estágios. No início da produção,
simples efeitos sonoros são usados para permitir que o mecanismo de áudio seja testado, assim
como, dar aos designers e desenvolvedores o senso elementar de como o jogo final será. Uma vez
que o visual e a emoção tenham sido estabelecidas, os efeitos sonoros são mais trabalhados e
modificados para expandir a experiência do jogo.
3.11.
Interface com o usuário
Interface com o usuário (IU) é um dos elementos finais na criação de games. Usualmente, no início,
os programadores criam uma interface bem rudimentar, para facilitar o teste e o desenvolvimento do
jogo. No final, entretanto, os artistas fazem com que esta interface seja realmente interessante.
Lembrando que a interface é a primeira coisa que o usuário vai visualizar, e você nunca tem uma
segunda chance de dar uma “primeira boa impressão”. A interface com o usuário geralmente
consiste em:
Botão de “play”: este é provavelmente a parte mais importante da interface com o usuário, e pode vir
escrito de diversas maneiras, tanto em português quanto em inglês: “start”, “começa”, “play”, “jogar”.
Ela pode ter uma série de portas de entrada, como por exemplo, uma série de telas convidando o
jogador a escolher um personagem ou selecionar um nível de dificuldade. Esta parte da interface
com o usuário tem um propósito: deixar com que o usuário comece a jogar.
Salvar/ Download: Jogos que permitem os usuários a carregar ou salvar os jogos, geralmente
permitem com que eles tenham estas ações através de algum tipo de interface. Algum tipo de lista
ou tabela de games para download.
Saída: eventualmente muitos usuários vão necessitar sair antes do jogo terminar, portanto é
importante considerar a criação de um botão de saída e / ou pausar.
4
Opções: Muitos jogos tem opções variadas, e algumas podem ser configuradas. Itens como mapas,
características de qualidade, controle de som ligado/desligado são bem importantes para os
usuários.
A interface com o usuário é a primeira oportunidade de agarrar o jogador no universo do game.
3.12.
Teste
Neste ponto, o jogo está quase finalizado e o produto estará pronto para alguma versão alpha ou
beta. A versão alpha tende a ocorrer mais cedo no processo de desenvolvimento dos processos e é
quando o jogo é dado a algumas pessoas de confiança para testar e jogar. A versão beta, por outro
lado, é quando convidamos uma audiência bem maior para participar e testar o jogo. Durante esta
fase os bugs vão aparecer.
As pessoas que testam usualmente encontram muitos pequenos defeitos ou coisas ainda não
descobertas. Assim, você obtém o retorno do game, e com ele muitas outras opiniões e sugestões.
O feedback é importante também para saber as expectativas dos usuários finais e avaliar se é
possível modificá-lo para torná-lo mais emocionante.
5
4. Jogo de quebra-cabeças
O objetivo deste jogo é ser um jogo de quebra-cabeças simples e usável. O jogador pode arrastar as
peças que estão espalhadas ao redor da grade para dentro dela. Quando uma peça correta é
colocada perto do ponto correto, ela fica presa em seu lugar.
O jeito de fazer este jogo é com um curto script associado à um movie clip “ações” que ficará fora do
palco. Quando o usuário clica na tela, este script determina qual peça está sob o cursor. Ele então
habilita que a peça seja arrastada.
Quando o botão do mouse é solto, o código determina quando a peça está próxima do lugar correto.
Se a peça está, então ela fica presa no mesmo lugar.
Vamos começar com todos os movie clips com alpha igual a 75% para fazê-los ligeiramente mais
claros. Então, quando o jogador põe a peça em seu lugar ele muda para 100% de alpha. Isto
proporciona um retorno ao usuário que a peça está agora no lugar. Isto também é importante para
ter certeza que a peça não está a 100% quando o usuário clica para arrastar, de maneira que se
uma peça está adequadamente no lugar, ela não pode ser arrastada de novo.
Você pode saber quando uma peça está na posição
correta porque todas elas foram feitas de maneira
que seus centros estão no centro da figura inteira.
Por exemplo, a figura que está no canto superior
esquerdo tem o seu centro afastado para direita e
para baixo.
Agora imagine cada peça construída como isto.
Ponto central continua no centro da figura não
importando aonde está a peça. Se você está
inseguro à respeito disso, dê um exemplo no arquivo
“p17_ativ1.fla”. Examine alguns movie clips das
peças e você poderá ver como o centro das peças
permanecem constantes.
Isto simplifica bastante o código. Cada peça precisa estar exatamente na mesma localização das
linhas de divisão para encaixar propriamente. De maneira que você não tem que adivinhar em que
posição cada peça deve estar, elas estão sempre na mesma posição.
6
No arquivo, existem 24 peças de quebra-cabeças. Para que desenvolver estas peças primeiro é
preciso uma imagem vetorial feita somente com preenchimento. Em caso de linhas é preciso
convertê-las em preenchimentos. Se quiser, uma imagem .jpg também pode ser usada, porém, ela
deverá ser quebrada (break apart).
As linhas divisórias são feitas em um movie clip com a ferramenta lápis. Então, usamos as linhas das
divisórias das peças para dividir a imagem em peças. Neste ponto é preciso fazer cópias tanto do
movie clip que contém a imagem inteira quanto do que contém os formatos das peças.
Para fazer com que a imagem fiquem cortadas de acordo com as linhas divisórias, basta copiar as
linhas e colar em cima da figura. Com a seta seleciona-se todo o conteúdo de uma peça, para então
cortar e colar no mesmo lugar (Ctrl+ Shift+V) em um novo movie clip. Depois de fazer isto para cada
uma das peças, temos 24 movie clips.
a) Caso você ainda não tenha aberto o arquivo “p17_ativ1.fla”, abra agora.
b) Os movie clips estão no palco de maneira a formar a imagem completa. Cada um dos 24
movie clips deve ser nomeado de acordo com sua posição na grade. Por hora usaremos a
seguinte organização:
Coluna 0
Coluna 1
Coluna 2
Coluna 3
Linha 0
0-0
1-0
2-0
3-0
Linha 1
0-1
1-1
2-1
3-1
Linha 2
0-2
1-2
2-2
3-2
Linha 3
0-3
1-3
2-3
3-3
Ou seja, a primeira peça, do canto superior esquerdo, terá sua instância nomeada de 0-0 e assim por
diante.
c) Cada uma das peças deverá ter o Alpha 75%. No Properties Inspector faça esta mudança.
d) Isto feito, já podemos tirar as peças dos lugares e embaralhá-las ao redor da grade.
e) Selecione agora a grade que está no centro do palco e nomeie este movie clip de “grade”.
Clique na camada “Ações” e arraste o movie clip “ações”, que está na biblioteca, para acima do
palco. Nele, escreva o código:
onClipEvent(mouseDown) {
// pega a localização do mouse
mx = _root._xmouse;
my = _root._ymouse;
// roda pelas peças procurando pelo clique
for(x=0;x<6;x++) {
for(y=0;y<4;y++) {
peca = _root[x+"-"+y];
// vê quando uma peça está sob o cursor
// e se ela ainda não foi colocada no lugar
if (peca.hitTest(mx,my) and (peca._alpha < 100)) {
// esta é a peça clicada
peca.startDrag();
7
// acaba com os loops, ou seja não procura mais
x = 6;
y = 4;
break;
}
}
}
}
f)
Ele começa com onClipEvent(mouseDown), que reage ao ser clicado em algum lugar no
palco. Este código roda em cada uma das peças do quebra-cabeças e encontra quando uma
está em baixo do cursor. Ele também se assegura que a peça não está com 100% de Alpha,
o que indicaria que ela já teria sido colocada em seu lugar.
Se uma peça é encontrada, o Flash solta a peça com o comanto startDrag. Os loops então
são abandonados. O comando startDrag é uma ação básica que permite que o usuário
solte um único movie clip. O comando stopDrag desabilita a possibilidade de soltar.
g) Quando o jogador solta o mouse, a peça a colocada na tela. O código, que vamos escrever,
chega a distância do centro da peça a partir do centro das linhas da grade. Se elas estiverem
mais perto que 10 pixels, a peça é movida para a posição exata aonde ela pertence. O efeito
aplha é então forçado a ficar 100% para que o jogador veja e para que o código reconheça
que a peça não pode mais ser arrastada.
Acrescente o seguinte código ao movie clip “ações”:
onClipEvent(mouseUp) {
// não deixa mais a peça se mover
stopDrag();
// pega a distância do centro da peça
// ao centro da grade
dx = _root.grade._x - peca._x;
dy = _root.grade._y - peca._y;
dist = Math.sqrt(dx*dx+dy*dy);
// se está perto o suficiente, então libera no lugar
if (dist < 10 ) {
peca._x = _root.grade._x;
peca._y = _root.grade._y;
// põe na cor normal, sem transparência
peca._alpha = 100;
}
}
h) Salve agora o seu arquivo como “p17_ativ1_seunome.fla” e publique o arquivo com .html e
teste.
4.1. Atividade 2 – Fazendo seu próprio quebra-cabeças
8
Na atividade anterior demos o passo-a-passo para desenvolver um quebra-cabeças de 24 peças.
Agora você deverá fazer outro quebra-cabeças. Desta vez, da seguinte maneira:
Com 30 peças,
Com uma imagem que você desenvolver no Flash,
Se o usuário soltar uma peça a 20píxels de distância, ela terá que ir para o lugar certo.
Salve seu arquivo como “p18_seunome.fla”. Publique como html.
Atenção: faça uma cópia de todos os arquivos para no diretório determinado pelo professor para
correção.
Boa noite!
9