Parabéns por escolher o Construct 2! Vamos começar fazendo seu primeiro jogo em HTML5. Vamos fazer o demo do jogo 'Ghost Shooter'. Teste ele aqui Primeiramente para que você saiba os nossos objetivos: um jogador que olha para o mouse, se move com as setas do teclado e atira nos monstros com o mouse. Você aprenderá tudo o que precisa para fazer um jogo simples - de camadas (layers) a eventos de sistema (event system)!
Nota: por favor não peça ajuda nos comentários deste tutorial! Ao invés disso, visite nosso forum para ter as melhores respostas possíveis para os seus questionamentos.
Tutoriais alternativos
Há um guia alternativo para iniciantes: Como fazer um jogo de plataforma, com foco na construção de um jogo plataforma do tipo "corre e pula" (jump-and-run) em vez de um jogo de tiro com visão de cima (top down shooter). Você pode iniciar com qualquer um deles, mas nós recomendamos fortemente que você complete ambos para ter uma boa ideia de como construir ambos os tipos de jogos!
Também tem o Como fazer um clone do Asteroids com menos de 100 eventos do Kyatric que é um pouco mais avançado mas também é bem detalhado.
Link para o Curso do Construct2 em Português
Instalando o Construct 2
Se você ainda não tem, pegue uma cópia da última versão do Construct 2 aqui. O Construct 2 é apenas para Windows, mas os jogos que você fizer podem rodar em qualquer lugar, como em Mac, Linux ou iPad. Construct 2 também pode ser instalado em contas de usuário limitadas. Ele também é portátil, então você pode, por exemplo, instalar em um cartão de memória USB e levá-lo com você!
Iniciando
Agora que está configurado, inicie o Construct 2. Clique no botão File (arquivo) e selecione New (novo).
No diálogo New Project (novo projeto), você não precisa alterar nada. Apenas clique em Create Project (criar projeto). Construct 2 mantém todo o projeto em um único arquivo .capx pra gente. Você agora deve estar vendo um layout vazio - que é a área de desenho onde você cria e posiciona os objetos. Pense no layout como um fase ou um menu de um jogo. Em outras ferramentas, isso pode ser nomeado como room (ambiente), scene (cena) ou frame (moldura).
Inserindo objetos
Plano de Fundo
(Tiled Background)
A primeira coisa que queremos é um plano de fundo que se repita. O Tiled Background pode fazer isso pra gente. Primeiro, aqui está a sua textura de background - clique com o botão direito do mouse e salve em algum lugar no seu computador:
Agora, clique duas vezes em um espaço dentro do layout para inserir um novo objeto. (Depois, se estiver cheio, você pode também clicar com o botão direito e selecionar Insert new object (inserir novo objeto). Uma vez que aparecer o diálogo do Insert new object, clique duas vezes no objeto Tiled Background para inserí-lo.
Um ponteiro em forma de cruz aparecerá para indicar onde será inserido o objeto. Clique num local próximo ao meio do layout. O texture editor (editor de texturas) abrirá para você inserir a textura. Vamos importar a imagem que você salvou anteriormente. Clique no ícone de arquivo para carregar a textura do disco, encontre e selecione o arquivo que você baixou.
Feche o editor de texturas clicando no X no canto superior direito. Se você for questionado, certifique-se de salvar! Agora você deve visualizar o objeto tipo Tiled Background no layout - o nosso plano de fundo. Vamos redimensionar para cobrir todo o layout. Confirme que o objeto está selecionado, a Properties Bar (barra de propriedades) à esquerda deve mostrar todas as configurações do objeto, incluindo seu tamanho e posição. Configure sua posição para 0,0 (canto superior esquerdo do layout), e seu tamanho para 1280,1024 (o tamanho do layout).
Vamos verificar nosso trabalho. Segure a tecla control e role para baixo a roda do mouse para afastar o zoom. Alternativamente, clique em view - zoom out algumas vezes. É possível também segurar a tecla espaço ou o botão do meio do mouse para deslocar o layout. Simples, né? Seu plano de fundo deve cobrir todo o layout agora:
Aperte control+0 ou clique em view - zoom to 100% para retornar à visão 1:1.
(Se você é impaciente como eu, clique no pequeno ícone 'run' (executar) na barra de título da janela - um navegador deverá ser aberto exibindo o seu layout com o plano de fundo! Uhu!)