Como fazer jogos online (com imagens)

Índice:

Como fazer jogos online (com imagens)
Como fazer jogos online (com imagens)

Vídeo: Como fazer jogos online (com imagens)

Vídeo: Como fazer jogos online (com imagens)
Vídeo: Como Inserir Marcadores do Word 2016 - para Iniciantes 2024, Abril
Anonim

Você já jogou um jogo online e pensou: "Eu gostaria de poder fazer um desses, tenho ótimas ideias"? No passado, era necessário ter aprendido a codificar em ActionScript 3, a linguagem que alimenta o Flash. Graças a alguns programas de construção de jogos, entretanto, a experiência de codificação é um requisito do passado. Você pode criar jogos divertidos e profundos manipulando objetos e lógica, sem nunca tocar em uma linha de código.

Passos

Parte 1 de 4: Projetando o jogo

Etapa 1 dos jogos online
Etapa 1 dos jogos online

Etapa 1. Escreva uma descrição básica

Inclua recursos e o que você deseja que o jogador realize. É bom ter um esboço básico do que você deseja fazer com o seu jogo, para que possa consultá-lo enquanto trabalha nele.

Consulte este guia para obter mais detalhes sobre como escrever um documento de design de jogo

Etapa 2 dos jogos online
Etapa 2 dos jogos online

Etapa 2. Desenhe alguns esboços

Desenhe um layout básico de como você deseja que as telas se pareçam. Eles não precisam ser muito detalhados, mas você deve pelo menos ter uma ideia sobre onde os vários elementos serão colocados na tela. Eles serão incrivelmente úteis mais tarde, quando você começar a construir a interface do seu jogo.

Etapa 3 dos jogos online
Etapa 3 dos jogos online

Etapa 3. Escolha um método para criar seu jogo

Tradicionalmente, você precisa aprender a codificar no ActionScript 3 para criar jogos em Flash. Embora você ainda possa fazer isso, existem programas disponíveis que podem tornar a criação de jogos muito mais fácil de aprender, sem exigir experiência em programação. Algumas das opções mais populares para fazer jogos incluem:

  • Stencyl - Esta é uma ferramenta mais recente que permite construir jogos usando objetos e scripts lógicos. Esses jogos podem ser convertidos em projetos em Flash e carregados em qualquer site que ofereça suporte a jogos em Flash.
  • Construir 2 - Conforme o Flash fica mais velho, ele começou a ser substituído por outros meios de criação de jogos. Uma das formas mais novas de criar um jogo online é usar HTML5. Normalmente, isso requer muito conhecimento de codificação, mas o Construct 2 permite que você crie jogos usando objetos e scripts, bem como Stencyl.
  • Flash Builder - este é o método tradicional para criar jogos em Flash. Isso requer uma boa quantidade de conhecimento do ActionScript, mas é uma das linguagens mais fáceis de aprender o básico. O Flash Builder custa dinheiro, mas você pode usar o programa FlashDevelop de código aberto para obter o máximo da mesma funcionalidade.

Parte 2 de 4: Usando Stencyl

Etapa 4 dos jogos online
Etapa 4 dos jogos online

Etapa 1. Baixe e instale o Stencyl

Stencyl é um programa de criação de jogos que não requer nenhum conhecimento de codificação. Em vez disso, você pode usar uma variedade de ferramentas lógicas para manipular objetos no jogo.

O Stencyl pode ser usado gratuitamente se você quiser apenas publicar seu jogo online. A versão gratuita terá um logotipo Stencyl aparecendo no início. Se você obtiver a versão paga, poderá publicar em outras plataformas

Etapa 5 dos jogos online
Etapa 5 dos jogos online

Etapa 2. Crie seu novo jogo

Ao iniciar o Stencyl, será exibida uma lista de seus jogos. Haverá vários jogos de exemplo na lista que você pode examinar para ver como funcionam. Para começar a trabalhar em seu próprio jogo, clique na caixa com a linha pontilhada "Clique aqui para criar um novo jogo".

Etapa 6 dos jogos online
Etapa 6 dos jogos online

Etapa 3. Selecione um kit

Existem vários kits que contêm ativos e objetos predefinidos que podem ajudá-lo a colocar seu jogo em funcionamento rapidamente. Selecione um kit se desejar ou selecione "Jogo em branco" se você planeja fazer o seu próprio.

Você pode baixar kits que outros usuários criaram online

Etapa 7 dos jogos online
Etapa 7 dos jogos online

Etapa 4. Insira as informações do jogo

Antes de começar a criar seu jogo, você precisará inserir algumas informações.

  • Nome - Este é o nome do seu jogo. Você pode alterar isso mais tarde para o que quiser.
  • Tamanho da tela - Este é o tamanho da tela do jogo e é muito importante, pois afetará a arte que você usa. Como as pessoas provavelmente jogarão seu jogo no navegador da web, o tamanho da tela não precisa ser muito grande. Experimente Largura: 640 px Altura: 480 px. Este é um bom tamanho para começar.
Etapa 8 dos jogos online
Etapa 8 dos jogos online

Etapa 5. Familiarize-se com o layout

Ao carregar o novo jogo pela primeira vez, você será levado ao Painel. É aqui que você pode ver todas as cenas do seu jogo e acessar todos os recursos. Você também pode alterar as configurações do jogo aqui. Você passará a maior parte do tempo trabalhando no Painel.

  • Cenas - Esta é a janela principal do Painel e mostra o jogo real e todos os ativos. Seu jogo será uma coleção de cenas.
  • Recursos - Esta é a lista de todos os objetos e ativos em seu jogo. inclui atores, planos de fundo, fontes, cenas, lógica, sons e tilesets. Os recursos são organizados em uma árvore no lado esquerdo da tela.
  • Configurações - As opções Jogo e Configurações permitem ajustar como a mecânica do jogo funciona, incluindo controles, gravidade, colisões, telas de carregamento e muito mais.
Etapa 9 dos jogos online
Etapa 9 dos jogos online

Etapa 6. Personalize um ator

Um ator é qualquer objeto que se move ou com o qual pode interagir no jogo (jogador, inimigo, portas, etc.). Você precisará criar um ator para cada objeto do jogo. Para criar um ator, clique na opção "Tipos de ator" no menu Recursos. Selecione o ator desejado na lista (a lista é determinada pelo kit que você escolheu).

  • Atribua o ator a um Grupo (Jogador, Inimigo). Isso ajudará a determinar as propriedades de colisão do ator. Selecione seu ator para abrir o Editor de Ator. Clique na guia Propriedades e escolha o grupo apropriado no menu suspenso.
  • Adicione comportamentos (pular, piscar, caminhar). Os comportamentos são o que permitem que seu ator execute ações. Clique na guia Comportamentos e, em seguida, clique no botão "+ Adicionar comportamento" no canto inferior esquerdo. Selecione um comportamento (como "Andar") da lista e clique em "Escolher".
  • Defina os controles. Se você estiver criando um personagem do jogador, provavelmente desejará permitir que o jogador o mova. Ao adicionar o comportamento de Caminhada, você será levado à tela de atributos de Caminhada. Você pode usar os menus suspensos para escolher quais teclas moverão o ator para a esquerda e para a direita. Você também pode atribuir animações se o kit que está usando contiver alguma.
  • Você pode adicionar vários comportamentos para personalizar o que um ator pode fazer.
Etapa 10 dos jogos online
Etapa 10 dos jogos online

Etapa 7. Crie uma cena

A cena é o que o jogador vê durante o jogo. É o plano de fundo, bem como quaisquer objetos e atores que são visíveis. Para criar uma nova cena, clique na opção Cenas na árvore Recursos e, a seguir, clique na caixa tracejada. Dê um nome à sua nova cena para continuar.

  • Plano de fundo - sua cena será dimensionada automaticamente, então você não precisa se preocupar com isso no momento. Você pode escolher usar uma cor como plano de fundo, que terá ladrilhos colocados sobre ela. Você pode escolher entre uma cor sólida ou gradiente. Clique em “Criar” quando terminar. Isso abrirá o Scene Designer.
  • Colocar tiles - O tileset incluído em seu kit será carregado no lado direito da janela. Clique na ferramenta Lápis no menu esquerdo e, em seguida, clique no bloco que deseja usar. Você pode então colocar o ladrilho em sua cena. Clique e arraste com o mouse para colocar vários ladrilhos.
  • Colocando atores - Clique na guia Atores acima do seu tileset para alternar para os atores disponíveis. Você deve tê-los criado anteriormente para que apareçam nesta lista. Clique no ator que deseja posicionar e, em seguida, clique no local da cena em que deseja que ele apareça. Se você segurar ⇧ Shift, o ator se ajustará à grade.
  • Adicionando gravidade - Clique na guia "Física" na parte superior da janela e insira um valor no campo "Gravidade (Vertical)". Entrar em 85 simulará a gravidade do mundo real.
Etapa 11 dos jogos online
Etapa 11 dos jogos online

Etapa 8. Teste o jogo

Depois de criar uma cena e colocar alguns atores, você pode testar o jogo. Clique no botão "Testar jogo" na parte superior da tela para jogar o que você tem até agora. Você pode usar as teclas que definiu ao criar seus atores para controlar o personagem do jogador.

Encontre todos os aspectos que não funcionam e tente consertá-los. Por exemplo, os inimigos estão se comportando corretamente? Você pode derrotar seus inimigos? Existem plataformas inacessíveis ou abismos que não podem ser transpostos? Volte para a área relevante de seu editor de jogo para corrigir qualquer um dos problemas que encontrar. Isso pode demorar um pouco, mas o resultado final será um jogo muito mais divertido e jogável

Etapa 12 dos jogos online
Etapa 12 dos jogos online

Etapa 9. Adicione mais

Agora que você tem uma primeira cena funcional e jogável, é hora de começar a construir o jogo inteiro. Adicione mais níveis e desafios e continue testando seus acréscimos para garantir que eles sejam divertidos e funcionem corretamente.

Etapa 13 dos jogos online
Etapa 13 dos jogos online

Etapa 10. Site Lock your game

Se você for enviar o jogo para um site que hospeda jogos em Flash ou enviar para o seu próprio site, provavelmente desejará ativar o "Bloqueio de site". Isso impedirá que seu jogo seja jogado se não estiver na lista de sites permitidos.

  • Abra "Configurações do jogo" na árvore "Recursos". Selecione a seção "Carregador". Insira os sites que deseja permitir no campo "Bloqueio de sites", separados por vírgula sem espaço. Por exemplo, newgrounds.com, kongregate.com.
  • Enquanto estiver nesta tela, insira sua página inicial no campo "Sua página inicial", se você tiver uma. Isso permitirá que os jogadores que jogam seu jogo sejam vinculados ao seu site.
Etapa 14 para fazer jogos online
Etapa 14 para fazer jogos online

Etapa 11. Exporte o jogo como Flash

Quando estiver satisfeito com o jogo, você pode exportá-lo para o formato Flash. Isso permitirá que você carregue o jogo em um site que hospeda jogos em Flash ou em seu próprio site. Clique Publicar selecione Web e clique em Flash. Salve o arquivo em um local fácil de encontrar no seu computador.

Etapa 15 dos jogos online
Etapa 15 dos jogos online

Etapa 12. Publique o jogo

Assim que tiver seu arquivo Flash (. SWF), você pode enviá-lo para o host de sua escolha. Existem vários sites online que hospedam jogos em Flash, e alguns podem até permitir que você ganhe dinheiro com a receita de anúncios com seu jogo. Você também pode fazer upload do seu jogo para o seu próprio site, mas deve garantir que terá largura de banda para atender aos jogadores se o jogo se tornar popular.

  • Consulte este guia para enviar seu jogo para seu próprio site.
  • Se você quiser fazer upload de seu jogo para um site como Newgrounds ou Kongregate, você precisará criar uma conta e, em seguida, passar pelo processo de upload para o site. Os termos e condições variam de site para site.
  • Se você deseja publicar seu jogo no Stencyl Arcade, pode fazê-lo de dentro do Programa Stencyl. Clique Publicar selecione Stencyl e clique em Arcade. O jogo será carregado automaticamente, então certifique-se de que está satisfeito com o nome antes de fazer isso. O Stencyl Arcade tem um limite de tamanho de arquivo de 8 MB.

Parte 3 de 4: Usando o Construto 2

Etapa 16 dos jogos online
Etapa 16 dos jogos online

Etapa 1. Baixe e instale o Construct 2

Este programa permite que você crie jogos HTML5 com muito pouca codificação. Você terá que atribuir algumas variáveis, mas tudo isso é feito por meio de menus, sem a necessidade de codificação real.

O Construct 2 é gratuito, embora alguns recursos sejam limitados, a menos que você atualize. A versão gratuita não pode publicar em nenhuma outra plataforma além de HTML5

Etapa 17 dos jogos online
Etapa 17 dos jogos online

Etapa 2. Crie um novo projeto

Ao iniciar o Construct 2 pela primeira vez, você será saudado com um menu de boas-vindas. Clique no link "Novo Projeto" para iniciar um novo jogo. Também há alguns exemplos incluídos que você pode usar para ver como os jogos básicos são criados.

Ao criar um novo projeto, você receberá uma lista de modelos. Para o seu primeiro projeto, você provavelmente desejará começar com um projeto vazio. Isso permitirá que você pegue o jeito básico sem que os modelos atrapalhem

Etapa 18 dos jogos online
Etapa 18 dos jogos online

Etapa 3. Ajuste as configurações do projeto

No quadro esquerdo da janela do projeto, você verá uma série de itens no quadro Propriedades. Você pode usar isso para definir o tamanho da tela e inserir as informações do jogo e da empresa.

Etapa 19 dos jogos online
Etapa 19 dos jogos online

Etapa 4. Insira um plano de fundo

Clique duas vezes no layout. Selecione "Plano de fundo lado a lado" na seção Geral. Clique no seu layout para colocar o plano de fundo. Isso abrirá o editor de plano de fundo. Você precisará criar seu próprio software de edição de imagem ou baixar texturas de uma variedade de locais online.

  • Defina o plano de fundo com o tamanho do layout. Faça isso selecionando o objeto de fundo e alterando o tamanho no quadro Propriedades.
  • Mude o nome da camada e bloqueie-a. Você desejará bloquear a camada para evitar movê-la acidentalmente ao posicionar outros objetos. Clique na guia “Camadas” no lado direito da tela. Selecione a camada e clique no ícone do lápis. Nomeie a camada como "Plano de fundo" e clique no botão "Cadeado" para bloquear o plano de fundo.
Etapa 20 dos jogos online
Etapa 20 dos jogos online

Etapa 5. Crie uma nova camada

Na guia Camadas, clique no botão "+" para criar uma nova camada. Renomeie-o para "Principal". Esta será a camada em que residem a maioria dos objetos do seu jogo. Certifique-se de que a camada principal esteja selecionada antes de continuar.

Etapa 21 dos jogos online
Etapa 21 dos jogos online

Etapa 6. Adicione entradas para o seu jogo

No Construct 2, suas entradas precisarão ser adicionadas como objetos ao seu jogo. Eles são invisíveis e permitirão o uso do teclado e do mouse em todo o projeto.

Clique duas vezes em seu layout e selecione "Mouse" na seção de entrada. Faça o mesmo para inserir o objeto "Teclado"

Etapa 22 dos jogos online
Etapa 22 dos jogos online

Etapa 7. Adicionar objetos

É hora de começar a adicionar alguns objetos de jogo ao seu layout. Clique duas vezes no layout e selecione "Sprite" na seção Geral. Use a mira para escolher onde você deseja colocar o sprite. O editor de imagens será aberto, permitindo que você carregue um sprite existente ou crie um novo.

Quando você seleciona os sprites em seu layout, as propriedades do sprite são carregadas no quadro esquerdo. Mude o nome do sprite para que você possa identificá-lo e consultá-lo com mais facilidade

Etapa 23 dos jogos online
Etapa 23 dos jogos online

Etapa 8. Adicione comportamentos aos seus objetos

Para adicionar um comportamento, clique no objeto ao qual deseja adicionar um comportamento completo para selecioná-lo. Clique no link "Adicionar / editar" na seção Comportamentos do quadro Propriedades. Uma lista de comportamentos disponíveis aparecerá.

Os comportamentos são peças de lógica pré-configuradas que permitem adicionar funcionalidades rapidamente aos seus objetos. Você pode escolher entre uma ampla variedade de comportamentos predefinidos que podem executar uma ampla gama de funções. Por exemplo, para tornar o piso sólido, atribua a ele o comportamento "Sólido". Para mover o personagem do jogador em oito direções, dê a ele o comportamento de "movimento em 8 direções"

Etapa 24 dos jogos online
Etapa 24 dos jogos online

Etapa 9. Altere as propriedades de comportamento

Você pode editar comportamentos existentes para personalizar a maneira como seus objetos funcionam. Você pode alterar os valores para alterar a velocidade, direção e outras propriedades.

Etapa 25 dos jogos online
Etapa 25 dos jogos online

Etapa 10. Entenda como os eventos funcionam

Os eventos são uma lista de condições e são o que impulsiona o jogo. Se as condições forem atendidas, o evento ocorre. Se as condições não forem atendidas, o evento não ocorre. A planilha de eventos normalmente é executada cerca de 60 vezes por segundo. Cada vez que ele é executado é chamado de "tique".

Etapa 26 dos jogos online
Etapa 26 dos jogos online

Etapa 11. Crie um evento

Clique duas vezes na folha de eventos em branco. Uma lista de objetos disponíveis aparecerá. Selecione o objeto para o qual deseja criar um evento ou pode criar um evento do Sistema.

  • Selecione quando a ação ocorre. Após selecionar o objeto, será solicitado que você selecione quando o evento deve ocorrer. Isso pode ser baseado em outros eventos ou em determinados momentos. "Cada tique" é sempre.
  • Adicione uma ação. Você será solicitado a selecionar um de seus objetos. Escolha em uma lista de ações. Por exemplo, se você estiver fazendo um jogo de tiro de cima para baixo e quiser que o personagem do jogador esteja sempre olhando para o mouse, você deve criar uma ação "Definir ângulo em direção à posição" em cada tique definido para o objeto Jogador. Quando perguntado pelas coordenadas, digite "Mouse. X" para X e "Mouse. Y" para Y. Isso manterá a nave do jogador sempre apontada para o cursor.
Etapa 27 dos jogos online
Etapa 27 dos jogos online

Etapa 12. Adicione mais eventos e comportamentos

Eles são a espinha dorsal do seu jogo. Adicionar e ajustar comportamentos e eventos irá ajudá-lo a criar um jogo único e divertido que as pessoas estarão implorando para jogar. Experimente diferentes eventos para tentar obter o jogo exato que você deseja.

Etapa 28 dos jogos online
Etapa 28 dos jogos online

Etapa 13. Adicione algumas variáveis

Existem dois tipos de variáveis no Construto 2: variáveis de instância e variáveis globais. Isso permite que você defina valores personalizados para seus objetos e jogo, como saúde, limites de tempo, pontuação e muito mais.

  • Variáveis de instância - variáveis de instância são variáveis atribuídas a objetos únicos. Eles são usados para coisas como a saúde do inimigo e do jogador. Você pode adicionar variáveis de instância após selecionar um objeto clicando no link "Adicionar / editar" na seção Variáveis do quadro Propriedades. Dê à variável um nome que possa ser referido em um evento, bem como um valor inicial.
  • Variáveis globais - variáveis globais são variáveis atribuídas a todo o jogo. Eles são usados para coisas como a pontuação do jogador. Para criar uma variável global, abra a folha de eventos e clique com o botão direito em um espaço em branco. Clique em "Adicionar variável global", dê a ela um nome que possa ser referido em um evento e, a seguir, insira um valor inicial.
Etapa 29 para fazer jogos online
Etapa 29 para fazer jogos online

Etapa 14. Crie uma interface

Ao criar uma interface, geralmente é melhor fazê-lo em uma nova camada. Isso ocorre porque a interface raramente se move ou muda, então é bom tê-la em uma camada bloqueada. No quadro Propriedades da nova camada, defina "Paralaxe" como 0. Isso evitará que a camada role quando a tela o fizer.

Use caixas de texto e variáveis para criar sua interface. Você pode definir suas caixas de texto para exibir a saúde restante, pontuação, munição ou qualquer outra coisa que o jogador precise ver regularmente

Etapa 30 dos jogos online
Etapa 30 dos jogos online

Etapa 15. Teste e revise seu jogo

Agora que você tem alguns objetos na tela com eventos e comportamentos, pode começar a testar e adicionar conteúdo. Clique no botão "Jogar" na parte superior da tela para construir e testar o jogo. Anote tudo o que não funcionou e tente consertar para que seu jogo seja jogável e divertido.

Etapa 31 dos jogos online
Etapa 31 dos jogos online

Etapa 16. Exporte o jogo

Se estiver satisfeito com seu jogo, você pode exportá-lo para que possa ser carregado em um site e jogado por qualquer pessoa. Para exportar o jogo, clique no Arquivo menu e selecione Exportar. Salve o projeto em um local que você possa localizar facilmente.

Etapa 32 dos jogos online
Etapa 32 dos jogos online

Etapa 17. Publique o jogo

Existem vários sites que permitem fazer upload de jogos em HTML5 para que outros possam jogar. Você também pode adicionar o jogo ao seu próprio site. Consulte este guia para obter detalhes sobre como enviar o jogo para o seu próprio site.

Parte 4 de 4: Codificação do zero

Etapa 1. Baixe um IDE de programação (Integrated Development Environment) que suporte HTML como o Game Maker Studio

Alguns estão disponíveis gratuitamente, embora muitos dos melhores IDEs custem centenas de dólares.

Etapa 2. Aprenda a usar o IDE

Aprender a programar em seu ambiente é extremamente importante. Memorizar a maior parte do código comum e aprender como implementar as coisas corretamente pode levar semanas ou até meses. Seja paciente e tudo valerá a pena!

Etapa 3. Crie seu jogo assim que achar que está pronto

Fazer um documento de design ou anotar algumas idéias é um grande começo. Programar um jogo pode levar meses ou, se você realmente quiser fazer um sucesso, até um ou dois anos.

Etapa 4. Teste o jogo

Tente fazer coisas malucas ou inesperadas e elimine o máximo de bugs que puder. Além disso, tente determinar se a jogabilidade está do jeito que você queria ou se você precisa voltar e fazer alterações.

Etapa 5. Publique

Publique seu jogo online em um site como o Kongregate. Você deve estar preparado para críticas construtivas e pode desejar atualizar seu jogo para atender aos desejos de sua base de jogadores.

Pontas

  • Se estiver mais interessado em aprender o código por trás dos jogos em Flash, você pode usar o código Flash Builder e ActionScript 3 para criar jogos personalizados. Isso vai demorar mais, mas pode resultar em uma experiência mais única. Consulte este guia para obter detalhes sobre a programação no Actions Script 3.
  • Dê crédito a todas as fontes das quais você tirou ideias ou conteúdo, e a todos os outros que ajudaram a criar o jogo.

Recomendado: