Como Criar um Jogo Online

Alguma vez jogou um jogo on-line e se pegou pensando que gostaria de criar seu próprio jogo com suas ideias geniais? No passado, era preciso aprender a programar (ou codar, como dizem os programadores) em programas como o ActionScript 3, mas hoje em dia isso é coisa do passado, pois existem programas que permitem o desenvolvimento de jogos sem experiência de programação. Abaixo, você aprenderá a criar jogos divertidos e até mesmo avançados com a manipulação de objetos e lógicas, sem sequer tocar em uma linha de código.

Parte 1

Parte 1 de 4:

Projetando o jogo

Baixe em PDF

1
Crie uma descrição básica. Inclua todas as características desejadas para o jogo e as coisas que gostaria que os jogadores fizessem. É bom ter tudo isso por escrito, para poder conferir seu projeto na hora de botar a mão na massa.
- Para aprender a escrever um documento do design do seu jogo, confira este artigo.
Em um papel, faça um layout básico da tela principal do jogo. Não é preciso entrar em muitos detalhes, mas é necessário ter uma ideia de onde cada elemento principal vai ficar na tela. Acredite, isso vai ser muito útil na hora de montar a interface do jogo.
3
Escolha um método para criar seu jogo. Antigamente, para se criar um jogo em Flash, era preciso aprender a programar no ActionScript 3. Por mais que isso ainda seja possível, existem muitos programas disponíveis que facilitam a criação de jogos sem a necessidade de experiência com programação. Algumas das opções mais populares incluem:
- Stencyl. Uma ferramenta recente que permite que se crie jogos utilizando objetos e scripts de lógica. Esses jogos podem ser convertidos em projetos de Flash e carregados em qualquer site que suporte Flash.
- Construct 2. Como o Flash tem se tornado obsoleto, ele já começou a ser substituído por outras ferramentas. Uma das formas mais modernas de se criar um jogo para internet é usar HTML5. Esse processo normalmente envolve conhecimentos de programação, mas o Construct 2 permite a criação de jogos de forma similar ao Stencyl.
- Flash Builder. O método tradicional de se criar jogos em Flash. É preciso ter um conhecimento vasto de ActionScript, mas trata-se de uma das linguagens de programação mais fáceis de se aprender. O Flash Builder é pago, mas é possível usar o FlashDevelop, que é gratuito e tem basicamente as mesmas funcionalidades.
Publicidade

Parte 2

Parte 2 de 4:

Usando o Stencyl

Baixe em PDF

1
Baixe e instale o Stencyl. Trata-se de um programa de criação de jogos que não exige nenhum conhecimento de programação. Nele, você usará apenas ferramentas de lógica para manipular objetos dentro do jogo.
- Se quer apenas publicar o jogo na internet, você pode usar o Stencyl gratuitamente. O único ponto negativo é que o logo do Stencyl aparecerá no início do jogo. Se deseja publicar sua obra em outras plataformas, é preciso comprar a versão paga do programa.
Ao abrir o Stencyl, uma lista de jogos será carregada, com diversos modelos para que você os teste. Para criar seu próprio jogo, entretanto, clique na caixinha com uma linha pontilhada escrito "Click here to create new Game" (Clique aqui para criar um novo Jogo).
3
Escolha um kit. Existem diversos kits que oferecem assets prontos e objetos que podem ser usados para que você rode o jogo rapidamente. Escolha um kit se quiser, ou clique na opção "Blank Game" (Jogo em branco) se prefere criar tudo do zero.
- É possível baixar também kits prontos feitos por outros usuários.
4
Preencha as informações do jogo. Antes de botar a mão na massa, digite algumas informações.
- "Name" (Nome). Esse é o nome do jogo, e ele pode ser o que você preferir. Saiba que é possível alterá-lo depois, e não há nenhuma urgência em pensar no nome do jogo agora.
- "Screen size" (Tamanho da tela). Esse é o tamanho da tela, e ele é muito importante, pois afetará as artes do jogo. Como muitas pessoas vão jogar dentro de um navegador de internet, não é preciso usar um tamanho muito grande. Comece com um tamanho como 640 px por 480 px.
5
Familiarize-se com o layout. Ao carregar o novo jogo pela primeira vez, você será redirecionado para o "Dashboard" (Painel), onde ficam todas as cenas do jogo e os recursos disponíveis. É aqui que dá para mudar as configurações do jogo e onde você vai passar a maior parte do tempo dentro do programa. Alguns itens presentes no painel:
- "Scenes" (Cenas). A janela principal do painel, que exibe o jogo e todos os assets. O jogo em si será basicamente uma coleção de cenas.
- "Resources" (Recursos). Lista de todos os objetos e assets do jogo, incluindo personagens, fundos, fontes, cenas, lógicas, sons e sets de imagens. Os recursos são organizados em uma árvore no painel à esquerda da tela.
- "Settings" (Configurações). Permite que você ajuste o funcionamento das mecânicas do jogo, incluindo controles, gravidade, colisões, telas de carregamento e muito mais.
6
Personalize os "atores". O Stencyl chama de "Actor" (Atores) os objetos que se movimentam e com os quais é possível interagir dentro do jogo (como o jogador, os inimigos, as portas, etc.). É preciso criar um ator para cada objeto no jogo. Para fazê-lo, clique na opção "Actor Types" (Tipos de Atores) no menu "Resources". Selecione o ator desejado na lista, que vai depender do kit que escolheu na hora de iniciar o projeto.
- Designe o ator a um grupo (jogador, inimigo, etc.). Assim, você poderá determinar as propriedades de colisão dele. Selecione o ator no menu "Actor Editor" (Editor de Atores). Clique na aba "Properties" e selecione um dos grupos no menu suspenso.
- Adicione comportamentos (pular, pisar, caminhar, etc.). Os comportamentos permitem que os atores do jogo executem ações. Clique na aba "Behaviors" (Comportamentos) e clique no botão "+ Add Behavior" (+ Adicionar Comportamento) no canto inferior esquerdo. Selecione um comportamento, como "Walking" (Caminhada), na lista e clique em "Choose" (Escolher).
- Defina os controles. Se está criando um personagem jogável, você provavelmente quer que o jogador o controle. Ao adicionar o comportamento de caminhada, você será redirecionado para uma tela de atributos. Use os menus suspensos para escolher quais teclas vão mover o personagem para a esquerda e para a direita. Atribua também animações para as ações, caso o kit que está usando contenha alguma.
- Para personalizar as ações dos atores, adicione diferentes comportamentos a elas.
7
Crie uma cena. As cenas são o que os jogadores veem ao rodar o jogo. A cena é o plano de fundo, além dos objetos e dos atores visíveis. Para criá-la, abra a árvores de recursos e clique na opção "Scenes" (Cenas). Em seguida, clique no campo pontilhado e dê um nome à cena. Algumas opções disponíveis no menu:
- "Background" (Plano de fundo). Sua cena será redimensionada automaticamente e não é preciso se preocupar com isso no momento. Você pode escolher uma cor sólida de fundo, que será coberta com quadradinhos repetidos. Ao terminar, clique em "Create" (Criar) para abrir o "Scene Designer" (Designer de Cenas).
- Coloque tiles. Tiles é o nome dado aos quadrados que ficam repetidos pela tela. Um conjunto de telas incluso no kit escolhido será carregado no painel direito da janela. Clique na ferramenta "Pencil" (Lápis) no menu à esquerda e arraste o tile que deseja usar, colocando-o sobre a cena. Clique e arraste com o mouse para colocar vários tiles.
- Posicione os atores. Clique na aba "Actors" acima do conjunto de tiles ("Tileset") para visualizar os atores disponíveis — eles precisam ter sido criados anteriormente para que apareçam nessa lista. Clique no ator desejado e, em seguida, clique no local onde deseja colocá-lo dentro da tela. Ao segurar a tecla ⇧ Shift, o ator ficará preso na grade.
- Adicione gravidade. Clique na aba "Physics" (Física) na parte superior da janela e divite um valor no campo "Gravity (Vertical)" (Gravidade (Vertical)). Use o valor 85 para simular a gravidade do mundo real.
8
Teste o jogo. Criou a cena e posicionou os atores? Agora é hora de conferir o resultado. Clique em "Test Game" (Testar Jogo), no topo da tela, para começar a jogar. Use as teclas que definiu ao criar os atores para controlar seu personagem.
- Identifique o que não está funcionando como o planejado e tente arrumar os problemas. Por exemplo, os inimigos estão se comportando corretamente? É possível derrotá-los? Alguma plataforma não pode ser alcançada? Volte à área relevante do editor do jogo para resolver os problemas. Esse processo é demoradinho, mas o resultado final vai ser ainda melhor e mais divertido.
Agora que tem uma cena inicial jogável e funcional, construa o restante do jogo. Crie mais fases e novos desafios, sempre testando as adições para ver se tudo funciona como o planejado.
10
Trave o acesso ao jogo. Se vai carregar o jogo em um site que hospeda jogos em Flash ou em seu próprio site, habilite a trava para evitar que o jogo seja baixado e carregado em outras páginas sem sua permissão.
- Na página de recursos, clique em "Game Settings" (Configurações de Jogo). Selecione a opção "Loader" (Iniciador) e digite os nomes do sites que deseja permitir que rodem o jogo, separando-os por uma vírgula, sem espaço. Por exemplo: newgrounds.com,kongregate.com.
- Nesta mesma tela, digite sua home page no campo "Your Home Page" (Sua Página Inicial), caso tenha uma. Assim, o jogo será linkado ao seu site.
Quando estiver satisfeito, exporte o projeto no formato Flash para poder publicá-lo em sites que hospedam jogos desse tipo. Clique em "Publish" (Publicar), selecione "Web" e clique em "Flash". Salve o arquivo em um destino fácil de localizar no seu computador.
12
Publique o jogo. Agora que já tem um arquivo .SWF (Flash), você pode subi-lo no host de sua preferência. Existem muitos sites que hospedam jogos em flash, e muitos até mesmo deixam que você lucre com a renda do jogo. Se preferir, suba-o no seu próprio site, mas é importante ter banda suficiente para acessos caso o jogo se torne popular.
- Confira este artigo para aprender a subir o jogo em seu próprio site.
- Para carregar o jogo em sites como o Newgrounds ou o Kongregate, você precisará criar uma conta e passar pelo processo de upload no site. Os termos e condições vão variar de página para página.
- Se quer publicar o jogo no Stencyl Arcade, faça-o através do Stencyl. Clique em "Publich", selecione "Stencyl" e clique em "Arcade". O jogo será carregado automaticamente, e é importante escolher o nome dele antes de fazer isso. O tamanho limite para o arquivo é de 8 MB.^{[1]XFonte de pesquisa}
Publicidade

Parte 3

Parte 3 de 4:

Usando o Construct 2

Baixe em PDF

1
Baixe e instale o Construct 2. Esse programa permite que você crie jogos HTML5 sem o uso de muitos códigos. Você precisará designar variáveis, mas tudo é feito através de menus, sem nenhuma programação manual de códigos.
- O Construct 2 é gratuito, mas algumas funções são limitadas e disponíveis apenas para a versão paga. A versão gratuita só pode publicar jogos na plataforma HTML5.
2
Crie um novo projeto. Ao abrir o Construct 2, você se deparará com um menu de boas-vindas. Clique em "New Project" (Novo Projeto) para criar um novo jogo. Existem também alguns exemplos que você pode conferir para ver como os jogos básicos são criados.
- Ao criar um novo projeto, você receberá uma lista de modelos. O ideal para um primeiro projeto, entretanto, é criar um arquivo em branco para poder entender o básico do programa sem se atrapalhar com as funções dos modelos prontos.
No painel esquerdo da janela, chamado "Properties" (Propriedades), você encontrará diversos itens que podem ser modificados para ajustar o tamanho da tela e as informações do jogo e da sua empresa.
4
Crie um fundo. Dê um clique duplo no fundo da tela e uma janela se abrirá. Na seção "General" (Geral), clique em "Tiles Background" (Fundo Lado a Lado). Em seguida, clique na tela para colocar o fundo e abrir o editor. Você precisará criar seu próprio fundo usando um editor de imagens ou usando texturas da internet.
- Configure o plano de fundo com o tamanho da tela. Para fazer isso, selecione o objeto de fundo e altere o tamanho dele na seção "Properties".
- Altere o nome da camada e trave-a. É importante travar o fundo no lugar para não acabar movimentando-o sem querer na hora de posicionar outros objetos. Clique na aba "Layers" (Camadas) no lado direito da tela e selecione a camada desejada. Clique no ícone do lápis e digite um nome para a camada — chame-a de "Plano de Fundo", para identificá-la com facilidade. Em seguida, clique no ícone do cadeado para travá-la.
Na aba "Layers", clique no botão "+" para criar uma nova camada. Dê um nome a ela — nossa sugestão é usar o nome "Principal", pois essa será a camada que abrigará a maioria dos objetos do jogo. Selecione a camada "Principal" antes de prosseguir.
6
Adicione comandos ao jogo. No Construct 2, os comandos precisam ser adicionados como objetos no jogo. Eles ficarão invisíveis e habilitarão o uso de mouse e teclado no projeto.
- Dê um clique duplo na tela e selecione "Mouse" na seção "Inputs" (Comandos). Em seguida, faça o mesmo selecionando a opção "Keyboard" (Teclado).
7
Adicione objetos. É hora de começar a adicionar objetos ao seu jogo. Dê um clique duplo na tela e selecione "Sprite" na seção geral. Use o mouse para selecionar onde deseja posicionar o sprite no jogo. O editor de imagens vai abrir, permitindo que você carregue um sprite existente ou crie o seu próprio.
- Ao selecionar os sprites, as propriedades deles vão ser carregadas no painel esquerdo da tela. Renomeie os sprites para poder identificá-los com mais facilidade mais tarde.
8
Adicione comportamentos aos objetos. Para fazê-lo, clique no objeto ao qual deseja adicionar um comportamento para selecioná-lo. Dentro do painel "Properties", procure pela seção "Behaviors" (Comportamentos) e clique no link "Add/edit" (Adicionar/Editar). Uma lista de comportamentos disponíveis vai ser carregada.
- Comportamentos são peças de lógica pré-configuradas que permitem que você adicione funcionalidades aos seus objetos sem grandes complicações. É possível escolher dentre uma variedade de comportamentos prontos para realizar diferentes funções. Por exemplo, para transformar o chão em um objeto sólido, selecione o comportamento "Solid" (Sólido). Para mover o personagem do jogador em oito direções, selecione o comportamento "8 Direction Movement" (Movimento em 8 direções).
É possível editar os comportamentos existentes, personalizando-os de acordo com cada objeto. Basta alterar os valores no painel, incluindo coisas como velocidade e direção.
Os eventos são uma lista de condições que movimentam o jogo. Se as condições forem alcançadas, o evento ocorre. Caso contrário, nada acontece. A planilha de eventos normalmente é executada 60 vezes por segundo, com cada turno chamado de "tick".
11
Crie um evento. Dê um clique duplo na tela "Event" (Eventos), que está em branco, para abrir uma lista de objetos disponíveis. Selecione o objeto desejado para poder criar um evento para ele.
- Selecione quando a ação vai acontecer. Depois de selecionar o objeto, o programa perguntará quanto gostaria que o evento ocorresse, seja por conta de uma ação do jogador, seja após determinado tempo. Marque a opção "Every tick" (A cada tick) para que o evento ocorra o tempo inteiro.
- Adicione uma ação. Selecione um dos objetos e escolha uma ação dentre as disponíveis. Por exemplo, se está criando um jogo de tiro visto de cima, e quer que o personagem esteja sempre olhando na direção do mouse, você pode escolher a ação "Set angle toward position" (Definir ângulo na direção da posição) para o objeto "Jogador" a cada tick. Quando o programa perguntar quais as coordenadas, digite "Mouse.X" para o eixo X e "Mouse.Y" para o eixo Y. Assim, o personagem vai estar sempre virado na direção do cursor.
Adicionar e modificar comportamentos e eventos é o que vai ajudá-lo a criar um jogo divertido e único que todo mundo vai querer jogar. Experimente um pouco para criar a peça que deseja criar.
13
Adicione variáveis. Existem dois tipos de variáveis no Construct 2: de instância e globais. Elas permitem que você defina valores personalizados para os objetos e para o jogo, como pontos de vida, limites de tempo, pontuação, entre outros.
- Variáveis de instância — identificadas pelo nome em inglês, "Instance variables", elas são designadas a objetos únicos, usadas para coisas como pontos de vida dos inimigos e do jogador. Para adicioná-las, abra o painel "Properties" e navegue até a seção "Variables" (Variáveis). Em seguida, clique no link "Add / edit" e selecione um objeto. Dê um nome à variável, para que ela possa ser associada a um evento, e dê um valor inicial também.
- Variáveis globais — são aquelas designadas para o jogo inteiro, usadas para coisas como a pontuação do jogador. Para criar uma variável global, abra a planilha de eventos e clique com o botão direito em um espaço em branco. Selecione a opção "Add global variable" (Adicionar variável global), dê um nome a ela para pode associá-la a um evento e dê um valor inicial.
14
Crie uma interface em uma nova camada. A ideia é usar uma nova camada para poder traver a interface no lugar, já que ela quase nunca se move ou é modificada. No painel "Properties", crie uma nova camada e configure a opção "Parallax" para 0, evitando assim que a interface se mexa junto do cenário.
- Use caixas de texto e variáveis para criar sua interface. Você pode usar essas caixas para exibir os pontos de vida restantes, a pontuação, a munição ou quaisquer outras informações interessantes para o jogador.
Agora que já criou objetos na tela, com eventos e comportamentos, é hora de testar e adicionar conteúdo ao jogo. Clique no botão "Play" (Jogar), no topo da tela, para testar o jogo. Anote tudo o que não funcionar do jeito esperado e tente resolver os problemas para criar um jogo divertido e funcional.
Está satisfeito com o resultado? Exporte o jogo para poder subi-lo em um site para ser jogado por qualquer pessoa. Para exportá-lo, clique no menu "File" (Arquivo) e selecione a opção "Export" (Exportar). Salve o projeto em um local fácil de encontrar no seu computador.
Existem muitas formas de se carregar um jogo HTML5 na internet em sites voltados para jogos independentes. Outra opção é criar o seu próprio site para publicar o jogo.^{[2]XFonte de pesquisa}
Publicidade

Parte 4

Parte 4 de 4:

Codando do zero

Baixe em PDF

1
Baixe um IDE (Integrated Development Environment) que suporte HTML, como o Game Maker Studio. Alguns desses programas são gratuitos, mas os melhores disponíveis costumam ser pagos.
2
Aprenda a usar o IDE. Aprender a programar no ambiente digital que escolheu é importante. Memorizar os códigos e aprender a implementar funções corretamente são processos que podem levar semanas ou meses. Com paciência e estudo, você chegará lá!
3
Crie o jogo quando achar que está pronto para isso. Um bom começo é criar um documento focado no design do jogo e anotar algumas ideias. A programação em si pode levar meses — caso esteja focado em criar um jogaço, entretanto, o processo pode levar anos.
4
Teste o jogo. É importante levar o que programou aos extremos, fazendo coisas inesperadas para ver como o jogo se comporta e eliminar os bugs. Avalie também se a jogabilidade é o que esperava, ou se é preciso voltar e mudar algumas coisas.
5
Publique o jogo! Use um site como o Kongregate para divulgar seu jogo, mas esteja preparado para receber críticas — construtivas e não construtivas — e usá-las para atualizar o jogo e torná-lo ainda melhor.
Publicidade

Dicas

Se tem mais interesse em aprender a programar jogos em Flash, você pode usar o Flash Builder e o ActionScript 3 para criar seus jogos. O processo é mais demorado, mas resultará em experiências únicas. Confira este guia para mais detalhes sobre a programação no ActionScript 3.
Dê crédito às fontes que usou para suas ideias e para todo mundo que ajudou a criar o jogo.