Clickteam Fusion 2.5 - #2 - Primeiros Passos

[Corvo]

Introdução
Primeiros Passos

[box class=calendar_today]

#2 Primeiros Passos

[/box]

Nesta aula iremos criar um projeto em branco para observar os principais menus do Clickteam Fusion 2.5 e suas funções. Não cobriremos toda a interface por razões óbvias. Conheceremos cada item conforme necessitarmos. Primeiro, vejamos novamente como é a tela inicial do programa:

[hs width=600]https://i.imgur.com/svdnMxY.png[/hs]
Tela inicial do Clickteam Fusion 2.5

Já podemos identificar várias opções distribuídas por toda a tela. Uma das vantagens da engine é que você pode segurar e arrastar todos os menus e organizá-los da forma como preferir. Nesta série de tutoriais não iremos alterar a posição das janelas, mantendo o modelo padrão. Que tal começarmos? O primeiro menu é o que é mais facilmente reconhecível:

Menu principal do Clickteam Fusion 2.5

Imagino que seja desnecessário explicar a função destes botões. Clique em New para criar um novo projeto. Ao fazer isso, a seguinte janela será aberta:

[hs width=600]https://i.imgur.com/plAd9FT.png[/hs]
Tela inicial de um projeto em branco

Note que os menus superiores, as barrinhas com ícones, sempre irão mudar de acordo com a janela que você está visualizando. Não se preocupe, estudaremos cada função conforme a necessidade. Por agora, vamos estudar esta tela. As aplicações / jogos criados com o Clickteam Fusion 2.5 são organizados por frames, isto é, telas. Você irá criar e testar cada cena do seu jogo separadamente, o que é uma grande vantagem em relação ao RPG Maker. Digamos que você esteja desenvolvendo um menu. Nesta engine você pode iniciar a tela do menu sem precisar iniciar o jogo inteiro, assim como pode testar o menu de título, a tela de game over, lojas e qualquer outra cena do projeto.

         Esta tela é chamada de Storyboard Editor irá mostrar cada frame separadamente, com atalhos para configurar as transições de entrada e saída de tela, tamanho e nome.

Para criar uma nova tela basta clicar duas vezes no número de um campo livre.

Agora observe o lado esquerdo da tela. Temos uma das principais barras do programa:

Workspace

Esta barra será constantemente utilizada.

[close]

Na parte superior você poderá ver todos as telas do seu jogo, arquivos e objetos em uma lista. Para acessar cada tela, basta clicar sobre o ícone da mesma. Na parte inferior temos a janela de propriedades. Quase todas as configurações referentes à objetos do seu jogo serão feitas aqui! Abaixo, no limite da tela você irá encontrar a Biblioteca de Arquivos:

Libray

Esta barra será constantemente utilizada.

[close]

Basta manter o ponteiro do mouse sobre o nome da aba e esta será expandida. Aqui se encontrarão todos os arquivos incluídos em seu projeto. Você também poderá importar arquivos por este mesmo local, mas veremos isso em uma próxima aula. À direita da tela, temos a janela de Layers:

Layers

Mantenha o ponteiro do mouse sobre o título da aba para expandi-la.

[close]

Layers são exatamente o que o nome diz. Cada tela pode ser divida em camadas assim como o mapeamento do RPG Maker. Esta aba só pode ser usada quando o editor de telas (Frame Editor) estiver ativo. Na versão completa do programa não há limites quanto à quantidade de camadas em cada tela. Voltando ao menu superior, observe os seguintes ícones:

Barra de seleção de menus.

As setas são atalhos para alternar entre os editores segundo a sua ordem. Os ícones seguintes são atalhos para cada editor individualmente sendo eles:
Storyboard Editor: Atalho para a lista de frames do seu projeto.
Frame Editor: Atalho para o editor da tela selecionada. Pense nele como a tela de mapeamento do RPG Maker.
Event Editor: Atalho para o editor de eventos da tela selecionada.
Event List Editor: O mesmo que a anterior, porém mostra a configuração dos eventos em lista e não em grade.
Campo de Seleção: Atalho para seleção de telas.
Setas Menores: Atalhos para a troca de telas conforme sua ordem.
Run Project: Testa o primeiro projeto da área de trabalho do programa.
Run Application: Testa a aplicação selecionada.
Run Frame: Testa a tela selecionada.
Stop: Para um teste iniciado.
Build and Run: Exporta e executa seu projeto.

Os demais comandos serão explicados em breve. Perceba também que cada ícone possui um atalho no teclado. Você pode descobrir qual é o atalho de cada um mantendo o ponteiro do mouse sobre o ícone. Que tal darmos uma olhada no Frame Editor? Clique no ícone respectivo. A seguinte tela aparecerá:

[hs width=600]https://i.imgur.com/S6Lsclk.png[/hs]
Finalmente, o editor de telas!

Você deve ter estranhado esse retângulo em branco à esquerda. Esta é uma janela especial onde aparecerá uma lista com todos os objetos incluídos no frame, sejam imagens, objetos de configuração, enfim. Uma vantagem dessa lista é que você pode arrastar objetos para a tela do mesmo modo como poderá fazer com a biblioteca de arquivos. Aqui é onde você irá definir todo o aspecto visual do seu projeto. Agora passemos ao editor de eventos:

Editor de eventos em branco.

Intimidador à princípio, mas saiba que esse editor fica mais claro conforme você o utiliza. Não porque você irá adquirir mais experiência, mas porque os eventos são representados visualmente. Por exemplo, clique em >> New Condition A seguinte janela será aberta:

Você irá ver essa janela com muita, muita frequência.

O editor de eventos funciona da seguinte forma: primeiro você define a condição e de qual objeto ela parte. Depois, seleciona o quê será feito quando a condição for cumprida e quais objetos serão afetados. Cada objeto adicionado ao frame selecionado também será referenciado no editor de eventos tanto nessa lista menor quanto na grade. Em nossa primeira aula vimos um exemplo com mais detalhes:

[hs width=600]https://i.imgur.com/DzWmoRC.png[/hs]
Novos objetos serão adicionados à direita da grade. Novos eventos estarão sempre abaixo, mas você pode
arrastá-los e organizá-los como preferir.

Você deve ter notado que alguns elementos estão presentes em ambas as imagens. São responsáveis pelas configurações principais do seu jogo e veremos mais sobre elas em uma aula futura. A execução dos eventos se dá de cima para baixo, da esquerda para a direita da grade. Nesta série não iremos utilizar a visualização em lista, mas caso tenha alguma dúvida em relação à mesma esteja à vontade para perguntar nos comentários.

         Recomendo fortemente que você dê uma olhada nos tutoriais do próprio Clickteam Fusion 2.5 e em seus exemplos. Eles podem ser acessados pela seguinte aba:

Os tutoriais são práticos e com conteúdo bastante relevante.

Por esta aula é só, espero você em uma próxima oportunidade. Tem sugestões sobre o que poderia ser explicado na sequência? Deixe-as nos comentários!