[C2] Tutorial Primeiros passos

Titulo	Primeiros passos
Ferramenta	Construct 2
Resumo	Olá pessoal, este é o primeiro tutorial da Nação Maker e nele vamos ter um contato inicial sobre a ferramenta de criação (principalmente de jogos) Construct 2.

Bem amigos, vamos inicar nossa jornada no C2 dando uma olhada na interface do programa. Se você ainda não instalou o seu, dê uma lida neste tópico.



Essa é a tela inicial do programa. Ela pode parecer bem intimidadora no princípio, mas logo logo vamos quebrar esse gelo. Na tela principal você pode escolher entre criar um novo projeto (Create New Project) ou abrir um projeto exsistente (Open Project). Você tem também a opcão de abrir projetos exemplo que vem com o C2. Para você que está começando, sugiro dar uma olhada neles. Em "Recent Project" você tem uma lista de projetos que vem trabalhando.

Visualizando a interface

Vamos começar criando um novo projeto. Para isso clique em Create New Project. Ao fazer isso o C2 vai te perguntar se deseja colocar tudo em um único arquivo com extenção .capx ou usar uma pasta para o projeto e colocar em arquivos separados, deixe a opção padrão (single file) e clique no botão "Create project". Veja:



Observe atentamente esta tela. Ela é composta de várias janelas e cada uma destas janelas desempenha um papel importante na criação do seu jogo.
Vamos descrever resumidamente cada uma delas e sua função:

Properties

Janela de propriedades do elemento selecionado. Ou seja sempre que você clica em algo que tiver propriedades a ser mostrada/alterada elas vão aparecer nesta janela. Vamos usa-la muito!

No centro da tela temos uma grande janela divida em abas cada uma tendo o seu papel. Vamos la:

Start Page	Apenas a pagina inicial que é mostrada quando entramos no C2, se quizer pode fecha-la.
Layout 1	Essa é a aba de layouts, você pode ter várias delas no seu jogo. Se você já usou o GM ela seria equivalente (não igual) às rooms ou tambem um form (Delphi, VB etc). Cada tela do seu game pode ser feita em um layout diferente, alias assim é o jeito mais facil.
Event Sheet 1	Essa aba é responsável pela interceptação de eventos e consequentemente uma resposta (ação) a ocorrência deles. Eventos pode ser qualquer coisa que conteça em um jogo como por exemplo, o clique do mouse, um objeto saindo fora da tela, pressionamento de teclas etc.
Projects	Uma simples janela pra mostrar os elementos do nosso projeto/jogo. Veremos mais sobre ela no decorrer dos tutoriais.
Objects	Lista todos os objetos usados no projeto. Também veremos mais sobre ela depois.
Barra de menu	Uma simples barra de menu com diversas opções, usaremos apenas o botão de salvar por enquanto, pois a maioria das outras opções podem ser acessadas clicando com o botão direito do mouse na janela desejada.

Colocando a mão na massa!

Bom chega de bla bla bla, vamos colocar o C2 para funcionar! Vou mostrar a você passo a passo a criação de um pequeno digamos, joguinho.
Para esse nosso exemplo teremos 2 telas (layouts):

• Layout 1 - Apresentação
  
• Laytou 2 - O jogo em si (vamos criar depois)
  

Trabalhando no Layout1

• 1) Clique na aba "layout 1" para seleciona-la.
  
• 2) Clique com o botão direito do mouse no "layout 1" e no menu de contexto que vai abrir clique "Insert New Object".
  Você obterá uma tela com uma série de objetos que podem ser inseridos. Clique no objeto Text e depois no botão <Insert>.
  Ok, agora o seu mouse vai virar um sinal de +, posicione-o em algum lugar do layout e clique com o botão esquerdo. Pronto objeto inserido.
  Esta é a maneira de inserir objetos, aprenda isso pois faremos isso bastante em nossos tutoriais.
  

Clique no objeto recem inserido "Text". vá até a janela Properties".

Mude as seguintes propriedades:

Name	coloque o nome de "lblNomeJogo", pode ser qualquer coisa, mas quando seguir um tutorial é bom colocar o nome sugerido pois podemos nos referir a ele depois.
Text	"Super UFO"
Font	selecione Georgia tamanho 36
Color	eu coloquei Azul
Horizontal Aligment	coloque Center

Pronto, as propriedades do texto foram ajustadas. Mas antes de continuar, vamos ajustar as propriedades do nosso projeto e salva-lo.

Ajustando as propriedades do Projeto como um todo:

Para isso, vá até a janela "Projects" e clique no nome do projeto, no caso está como "New Project*" para selecionar.

Mude as seguintes propriedades:

Name	Super Ufo
Description	Meu primeiro jogo no C2

Agora clique no botão Salvar ou pressione Ctrl + S. Pode deixar "Window Size" com o tamanho padrão por enquanto.

Nota: eu sempre crio uma pasta pra colocar os jogos, eu acho que fica mais organizado, mas fica a seu critério.

Pressione o botão "Run Layout" (botão verde tipo Play) e veja o resultado.

Agora vamo inserir um Button (botão). Faça como no objeto "Text" mas agora selecione "Button" e clique <Insert>.

Mude as seguintes propriedades:

Name	btnIniciar
Text	Iniciar o jogo

Nota: Os jogos no C2 são executados no browser em HTML 5, por isso é importante você ter instalado um browser compatível com essa tecnologia.
Eu uso o Chrome por que acho ele bem rápido, mas tem pessoas usando o Firefox. Você deve obter o seguinte resultado:



Você pode clicar no botão que nada vai acontecer.. Porque ? Porque não interceptamos o EVENTO do botão e não colocamos uma ação0 para o evento. Vamos inserir mais um layout. Para inserir um layout vá em "Projects" e clique com o botão direito em "Layouts" e selecione "Add Layout".

Agora o C2 vai lhe perguntar se você deseja adicionar uma "Event Sheet" selecione "Don't Add Event Sheet". Isso é porque ele está te perguntado se você deseja adicionar uma "Folha de Eventos" separada para o recem criado layout2. Vamos usar a própria Event Sheet 1.

Agora em "Projects->Layouts" e selecione "Layout2". Mude a propriedade "Event sheet" para "Event Sheet1". Ok, Layout2 pronto para ser usado.

Interceptando Eventos

Vamos adicionar um evento para quando o jogador clicar no botão. Selecione o "Event sheet1" e clique com o botão direito e clique em "Add event". Você vai obter uma tela como essa:


Observe que temos 3 opções: System, btnIniar e lblNomeJogo. Isso porque só temos esses objetos e o "System" é um objeto interno do sistema.
Clique no "btnIniciar" e vamos obter a tela de Eventos:



Estes são os Eventos disponíveis para o nosso botão btnIniciar. Clique em "On Clicked" ou seja, "ao ser clicado" o botão deve executar alguma coisa,
mas oque? Simples, uma AÇÃO! Veja que na frente de "On Clicked" temos "Add Action". Clique então em "Add Action"
mais uma vez a tela de seleção de objeto vai aparecer. Cliquem System (um dos objetos interno do C2). Novamente uma tela vai surgir, clique em "Go to layout", selecione o layout "Layout 2" e pressione o botão "Done".

Agora ao clicar o botão "Iniciar" seremos levados para o outro layout. E obteremos, adivinha? Uma tela em branco.

Criando a segunda Tela

Agora que já conseguimor ir para a segunda tela, vamos criar o nosso "Ufo".
Ai esta ele, clique para download e salve em uma pasta local no seu micro.

Agora que salvou o Ufo localmente, vamos adicionar um objeto Sprite no Layout2.
Selecione o Layout2 e clique com o botão direito do mouse e selecione "Insert New Object". Veja que existem diversos tipo de objetos que podem
ser inseridos:

Clique em Sprite e depois em Insert. Novamente o mouse se torna um +, posicione no meio da tela e clique com o botão esquerdo.
A tela de edição de sprites vai aparecer:



Clique na pastinha amarela "Load image" e selecione o sprite que você acabou de carregar do site.
Pronto! Nosso Ufo está na tela.
Agora como vamos movimentá-lo ? Lembra dos eventos ? Pois é vamos inserir algumas ações em certos eventos. Mas isso, na parte 2 do tutorial. Até breve!