\documentclass[12pt,oneside,openright,a4paper,english,brazil,sumario=tradicional]{abntex2}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{indentfirst}
\usepackage{color}
\usepackage{graphicx}
\usepackage{microtype}
\usepackage[brazilian,hyperpageref]{backref}
\usepackage[alf]{abntex2cite}
\usepackage{multicol}
\usepackage{multirow}
\usepackage{enumitem}
\usepackage{amsfonts}
\usepackage{amssymb}
\usepackage{listings}
\usepackage{tikz-uml}
\usepackage{uarial}
\usepackage{blindtext}
\usepackage{float}
\usepackage[section]{placeins}
\usepackage{pdfpages}
\usepackage{tabularx}
\usepackage{longtable}
\usepackage{tabu}
\usepackage{smartdiagram}
\usesmartdiagramlibrary{additions}
\usetikzlibrary{arrows}
\setSpacing{1.5}
\graphicspath{{../images/}}
\renewcommand{\familydefault}{\sfdefault}
\renewcommand{\backrefpagesname}{Citado na(s) página(s):~}
\renewcommand{\backref}{}
\renewcommand{\arraystretch}{1.5}
\renewcommand*{\backrefalt}[4]{
   \ifcase #1 %
   Nenhuma citação no texto.%
   \or
   Citado na página #2.%
   \else		Citado #1 vezes nas páginas #2.%
   \fi}%
\newfloat{mylisting}{tbphH}{lopbl}[chapter]
\floatname{mylisting}{Listing}
\newsubfloat{mylisting}
\newcommand{\listofmylistings}{\listof{mylisting}{List of Listings}}
% if you use the hyperref package
\providecommand*\theHmylisting{\themylisting}
\newcommand{\listbylist}[6][showlines=true]{
  \begin{mylisting}
    \subfloat[ ]{
      ...
    }
    \hfill{}
    \subfloat[ ]{
      ...
    }
    \hfill{}
    \caption[#5]{#6}
    \label{#4}
  \end{mylisting}
}
\titulo{Módulo de pré visualização para a ferramenta CGT - Ceará Game Tools}
\author{<NAME>\thanks{\texttt{<EMAIL>}}}
\orientador{Prof. Dr. <NAME>}
\local{Fortaleza}
\data{2015}
\instituicao{
   Instituto Federal de Ciência, Educação e Tecnologia do Ceará
   \par
   Engenharia de Computação}
\tipotrabalho{Monografia}
\preambulo{Trabalho de conclusão de curso apresentado à banca examinadora do Instituto Federal de Educação, Ciência e Tecnologia do Ceará para obtenção do grau de bacharel em Engenharia de Computação sob a orientação do Prof. Dr. <NAME>.}
\definecolor{blue}{RGB}{41,5,195}
\makeatletter
\hypersetup{
   pdftitle={\@title},
   pdfauthor={\@author},
   pdfsubject={Trabalho de conclusão de curso},
   pdfcreator={pdfLaTeX},
   pdfkeywords={abnt}{latex}{abntex}{abntex2}{trabalho científico},
   colorlinks=true,
   linkcolor=blue,
   citecolor=blue,
   filecolor=magenta,
   urlcolor=blue,
   bookmarksdepth=4
}
\makeatother
\setlength{\parindent}{1.3cm}
\setlength{\parskip}{0.2cm}
\makeindex
\begin{document}
\lstset{
        frame=single,
        showlines=true,
        language=java,
        tabsize=3,
        basicstyle=\scriptsize
        }
\selectlanguage{brazil}
\frenchspacing
\imprimircapa
\imprimirfolhaderosto*

% \begin{fichacatalografica}
%     \includepdf{fig_ficha_catalografica.pdf}
% \end{fichacatalografica}

% \includepdf{folhadeaprovacao_final.pdf}

\setlength{\absparsep}{18pt}
\begin{resumo}
   O crescimento da industria de jogos em diversas áreas - como entretenimento e educação - torna necessário a elaboração de ferramentas que possibilitem a criação destes de forma simples, fácil e objetiva. Por esta razão, o projeto \emph{Ceará Game Tools} (CGT), tem como objetivo possibilitar isso aos usuários que não conhecem os meios e as técnicas envolvidas na criação de jogos.

   Então, é proposto nesse trabalho, melhorias importantes para a ferramenta CGT, principalmente, a pré visualização do jogo que está sendo construído e também dos seus objetos.

   \vspace{\onelineskip}
   \noindent
   \textbf{Palavras-chave}: CGT, ferramenta;
\end{resumo}
\pdfbookmark[0]{\listfigurename}{lof}
\listoffigures*
\cleardoublepage
\pdfbookmark[0]{\listtablename}{lot}
\listoftables*
\cleardoublepage
\pdfbookmark[0]{\contentsname}{toc}
\tableofcontents*
\cleardoublepage
\textual
\chapter{Introdução} % Ryllari
\label{chap:introducao}
% introduzindo sobre o que é o trabalho
Neste trabalho, é apresentado problemas existentes e pontos de melhorias na primeira versão da ferramenta de construção de jogos do projeto CGT (\texttt{ferramenta 1.0}). Bem como, de que modo essas questões foram tratadas e implementadas na segunda versão (\texttt{ferramenta 2.0}) que tem como objetivo melhorar o processo de criação de jogos e tornando-o mais intuitivo para o usuário final.
\section{O projeto CGT}
% Descrição/apresentação do projeto CGT
O projeto CGT que surgiu para tornar possível a qualquer pessoa a criação de jogos, assim como é explicado no trabalho \cite{monografia:aquino}, vem sido desenvolvido desde 2013 e possibilita a construção de jogos eletrônicos por qualquer pessoa, não sendo necessário conhecimentos em programação ou nas técnicas de criação de jogos. De foma fácil, simples e prática, a ferramenta, atende a necessidade da maior parte dos usuários, podendo produzir jogos de vários temas e para diversos fins, desde entretenimento a educação, por exemplo. Assim como, é proposto no \emph{website} do projeto que explica, detalhadamente, o seu objetivo.
\begin{citacao}
   O projeto Ceará Game Tools tem como objetivo oferecer uma ferramenta para a construção de jogos. Em suma, qualquer um poderá criar seu próprio jogo utilizando componentes \emph{drag and drop} e os configurando. \cite{website:projeto-cgt}
\end{citacao}
\subsection{Vínculo com o CNPQ}
A idealização e o início do desenvolvimento da ferramenta CGT deu-se no ano de 2013, através do projeto Ceará Game Tools (CGT) – Pesquisa, Desenvolvimento e Comercialização de Games Temáticos da Cultura Cearense, que é uma inciativa do professor do IFCE <NAME>  apoiado pelo CNPQ\footnote{Centro Nacional de desenvolvimento científico e tecnológico.} por meio do edital 80 de 2013 de número de processo 409227/2013-7.

A proposta deste projeto era desenvolver uma ferramenta de software livre para o desenvolvimento automático de \emph{games} casuais em que qualquer pessoa com conhecimentos medianos de operação de microcomputadores poderia desenvolver jogos. Neste caso, não há necessidade de codificação de software utilizando-se linguagens de programação, mas somente o desenvolvimento de modelos abstratos com o uso de aplicativos de software de uso livre. Além disso, ela pode gerar jogos que podem ser executados em vários sistemas operacionais(\emph{Windows}, \emph{Linux}, \emph{MacOS} e \emph{Android}). Desse modo, os desenvolvedores podem aferir retorno financeiro com a venda e/ou popularização dos jogos, democratizando este canal para todas as pessoas que queiram ingressar nessa área.
\subsection{Trabalhos anteriores}
A partir do projeto vinculado ao CNPQ, a primeira versão da ferramenta foi produzida, trabalhando o desenvolvimento dos jogos apenas com entrada e manipulação de dados, utilizando apenas botões e comandos, sem componentes \emph{drag and drop} ou módulo de pré-visualização. Com base no que foi desenvolvido ao longo desta etapa, foi produzido um trabalho acadêmico de conclusão de curso por título “Ceará Game Tools: Uma ferramenta de software livre para geração automática de games” \cite{monografia:aquino}.

Em aspectos gerais, esse trabalho apresenta todo o processo de criação da ferramenta Ceará Game Tools (CGT), que possui um ambiente de desenvolvimento visual simples e intuitivo e uma biblioteca de imagens e sons disponibilizados para os usuários desfrutarem. Além disso, nesse trabalho, relata trabalhos e \emph{softwares} similares ao CGT, descreve os métodos e ferramentas utilizados para o desenvolvimento da aplicação, além da forma com ela foi desenvolvida, os módulos em que o CGT está dividido, os pacotes e classes que compõem a ferramenta, seus diagramas, benefícios, bem como trabalhos futuros e possíveis melhorias para a ferramenta. Nesta última parte, o autor destaca a importância da criação de novas políticas que aumentem as opções dos jogos e implementem novas estruturas, do aumento no número de plataformas de exportação dos jogos desenvolvidos, além de adicionar módulo de pré-visualização do jogo, o qual se concentra o assunto do presente trabalho.

\subsection{Os módulos desenvolvidos para o projeto}
% ferramenta de construção de jogos
O projeto CGT é composto por módulos que foram desenvolvidos e dividem entre sí as funcionalidades existentes, eles são mostrados e descritos na tabela \ref{table:modulos}, o módulo da ferramenta é o objeto de estudo para este trabalho e tem como objetivo implementar toda a interação com o usuário, além de ser responsável por apresentar a ele o jogo no momento da sua criação de forma intuitiva, simples e prática. Pode-se notar que, esse módulo é essencial para o projeto e deve ser capaz de lidar com tudo que possibilita a criação de jogos.
\begin{table}[h]
   \centering
   \begin{tabular}{ | l | p{10cm} | }
      \hline
      \textbf{Módulos} & \textbf{Descrição} \\
      \hline
      \texttt{core} & Contém os objetos essenciais para o projeto. Assim como: Ator, Inimigo, Bônus. Na secção \ref{sec:objetos} pode ser visto todos os objetos. \\
      \hline
      \texttt{desktop} & Responsável por possibilitar a execução do jogo no computador, em ambientes que rodam os sistemas \emph{Windows}, \emph{Linux} e \emph{MacOS}. \\
      \hline
      \texttt{ferramenta} & Corresponde ao módulo objeto de estudo deste trabalho que possibilita a criação dos jogos. \\
      \hline
      \texttt{android} & Permite exportar o jogo para execução nos dispositivos que rodam o sistema operacional \emph{Android}. \\
      \hline
      \texttt{ios} & Permite exportar o jogo para execução nos dispositivos que rodam o sistema operacional \emph{iOS}. \\
      \hline
   \end{tabular}
   \caption{Módulos existentes no projeto CGT.}
   \label{table:modulos}
\end{table}
\section{Introdução ao problema}
\label{sec:intro-problema}
A identificação dos problemas e pontos de melhoria para a ferramenta foram percebidos, principalmente, através do uso e estão relacionados a interação com o usuário final, além disso, na forma como o jogo que está sendo produzido pelo usuário é percebido por ele mesmo.
Para tanto, a \texttt{ferramenta 1.0} possui uma interface bastante robusta e atende o propósito de criar os objetos que compõem o jogo e, eventualmente, produzi-lo em forma de aplicação para a plataforma destino.
Entretanto, a mesma carece em fornecer algum \emph{feedback} no momento da criação, obrigando ao usuário a sempre executar o jogo para poder perceber atributos essenciais dos objetos dele, tais como: a posição, o tamanho, a textura.
Por exemplo, sejam as posições de um novo objeto configuradas da forma que se deseja, logo após isso, naturalmente, o usuário executa o jogo para poder visualizar o que configurou, e também entender o que representa graficamente o número que inseriu.
Pode-se ver esse processo ocorrendo na imagem \ref{fig:intro-problema-1}, as duas janelas que estão abertas são, respectivamente, a do jogo em execução e da ferramenta de criação.
Logo, podemos assumir que para todo objeto recém configurado, será preciso executar o jogo para verificar o resultado da configuração e com isso o processo de criação se torna bastante repetitivo.

\begin{figure}[h]
   \centering
   \includegraphics[width=0.7\textwidth]{images/problema-1.jpg}
   \caption{Problema de pré-visualização na \texttt{ferramenta 1.0}.}
   \label{fig:intro-problema-1}
\end{figure}

% mais problemas
Além disso, os controles que fazem parte da primeira versão da ferramenta, tornam, na maioria das vezes, oneroso o processo de configuração dos objetos. Podendo citar a configuração das animações de um objeto, é necessário criar as animações olhando no \emph{spritesheet}\footnote{Imagem que contém todas as faces de um objeto no jogo.} do objeto e preenchendo campos de texto com o valor da linha e coluna do \emph{sprite} correspondente a animação configurada (ver imagem \ref{fig:intro-problema-2}).

\begin{figure}[h]
   \centering
   \includegraphics[width=0.7\textwidth]{images/problema-2.jpg}
   \caption{Problema com os controles na configuração de uma animação na \texttt{ferramenta 1.0}.}
   \label{fig:intro-problema-2}
\end{figure}

Os problemas encontrados na \texttt{ferramenta 1.0} foram a motivação para esse trabalho e serão descritos detalhadamente no capitulo \ref{chap:problemas}.

\section{Disposição do documento}
Este documento segue o método que consiste em: apresentar um problema, propor sua solução e, por fim, estudar as consequências da solução adotada. Dessa forma, tudo estará dividido basicamente nas três partes seguintes:
\begin{description}
   \item[Definição do problema] Mostrado no capítulo \ref{chap:problemas} que tem como objetivo enumerar detalhadamente os problemas e pontos de melhoria encontrados na \texttt{ferramenta 1.0} e como foram encontrados. Consequentemente, prepara-se uma lista das principais funcionalidades que farão parte da nova versão da ferramenta.
   \item[Proposta de melhorias] Corresponde ao capítulo \ref{chap:melhorias} que visa propor soluções para as questões encontradas anteriormente. Além disso, explicá-las e justificá-las detalhadamente, por fim demonstrando a solução adotada e como elas foram alcançadas.
   \item[Análise dos resultados] É um estudo de caso, mostrado no capítulo \ref{chap:caso}, com a nova versão da ferramenta, onde busca-se comparar o tempo de criação de jogo, a facilidade de uso e a quantidade de esforço necessário para configurar.
\end{description}

\chapter{Problema}
\label{chap:problemas}
% breve descrição do problema do preview
A ferramenta de construção de jogos do projeto CGT é robusta e atende aos objetivos propostos. Contudo, ela possui lacunas quando se trata da interação humano computador (IHC).
A falta de pré-visualização dos objetos contidos no jogo dificulta a percepção do usuário, obrigando-o a sempre executar o jogo para observar as configurações que foram feitas.
Além disso, os controles não são claros e, assim, produzir um jogo pode acabar sendo uma experiência onerosa, confusa e repleta de configurações repetitivas.
A nova versão da ferramenta visa resolver os dois problemas mencionados, principalmente o primeiro item, por ser mais importante para a usabilidade e clareza dos controles envolvidos no processo de criação de um jogo.
Com isso em mente, faz-se necessário conhecer os objetos e controles que existem em um jogo da primeira versão da ferramenta, com o objetivo de perceber os problemas e as possíveis melhorias.

\section{Objetos de um jogo}
\label{sec:objetos}

Para enumerar todos os problemas e melhorias da \texttt{ferramenta 1.0}, é importante construir um jogo com ela, então é preciso conhecer os objetos que existem nele e como eles são configurados. Observar que, cada um deles possui suas características e configurações, assim como um propósito no jogo, a tabela \ref{table:objetos-desc} mostra os possíveis tipos objetos e a descrição deles. Notar que, eles são inseridos na ferramenta a medida que o usuário ver necessidade e são responsáveis por dar liberdade ao autor de construir vários formatos de jogos, por exemplo jogos de: perguntas e respostas, concluir percurso, derrotar inimigo, sobreviver determinado tempo.

\begin{table}[htb]
\centering
\begin{tabular}{| l | p{7cm} |}
      \hline
      \textbf{Objeto} & \textbf{Descrição} \\
      \hline
      Mundo & Responsável por agregar todos os personagens de uma fase do jogo definindo o plano de fundo.  \\
      \hline
      Ator & Objeto controlado pelo jogador. \\
      \hline
      Inimigo & Objeto que causa dano ao ator e impede os objetivos dele. \\
      \hline
      Opositor & Objeto que impede ações do ator, que não pode ser ultrapassado e pode ser destruído pelo ator.  \\
      \hline
      Bônus & Objeto que promove bônus ao ator. \\
      \hline
      Projétil & Objeto que pode ser arremessado pelo ator. \\
      \hline
      Tela & Representa uma tela do jogo. \\
      \hline
      Botão de tela & Botão de uma tela do jogo. \\
      \hline
      Vida de um objeto & Representado através de uma barra, mostra a quantidade de vida que um objeto possui. \\
      \hline
      Munição de um objeto & A quantidade de projéteis que o ator ainda pode arremessar. \\
      \hline
   \end{tabular}
\caption{Objetos que existem em um jogo.}
\label{table:objetos-desc}
\end{table}

\section{Dificuldades encontradas}
\label{sec:dificuldades}
A medida que a ferramenta foi utilizada, achou-se dificuldades, por exemplo, alguma interação confusa com a ferramenta que dificulta a criação e configuração de algum objeto, assim como o entendimento do papel dele no jogo, ou, até mesmo, a necessidade de executar o jogo para observar o que foi feito. Essas dificuldades, embora pareçam subjetivas, podem ser mensuradas e quantificadas normalmente. As demais seções desde capítulo, encarregam-se de trazer esses problemas, dentre eles existe, por exemplo, a dificuldade de observar um objeto, após alterar alguma propriedade dele.
Notar que, a \texttt{ferramenta 1.0} está disponível no \href{http://www.cgt.ifce.edu.br/downloads.php}{site do projeto CGT} na secção de \emph{downloads}\footnote{http://www.cgt.ifce.edu.br/downloads.php}.

\subsection{Organização dos objetos}
\label{sec:orga-objetos}
Um dos pontos mais importantes quando se trata de criação de jogos, é que - no decorrer do desenvolvimento - eles podem se tornar enormes e, para a ferramenta, um jogo é um conjunto de objetos e suas respectivas propriedades. Logo, é imprescindível que os objetos possam ser vistos de forma lógica e, mais importante, organizada, já que, assim, serão acessados facilmente, pois o usuário terá necessidade de retornar a eles para melhorar ou corrigir alguma configuração. Além disso, vale ressaltar que entre os objetos existe uma relação de pertinência, um ator está inserido em um mundo, assim como o inimigo que ele precisa derrotar também o está, essa hierarquia precisa ser levada em consideração na ferramenta e o jogo será criado respeitando essas relações.

Na figura \ref{fig:objetos_disp}, pode-se visualizar um jogo sendo criado e - a partir dessa imagem - pode-se notar que a ferramenta é dividida em cinco áreas importantes (descritas na tabela \ref{table:ferramenta_areas}). Os botões que representam objetos são organizados por colunas que representam as categorias: ator, inimigos, opositores, bonificações e informações da tela. A medida que é adicionado um novo objeto para a aba, este é posicionado em uma dessas colunas. Essa forma de organizar os objetos do jogo, possui a vantagem de ser objetiva, pois exibe apenas o conteúdo que importa para aquele agregador (uma fase do jogo ou uma tela). No entanto, a medida que o usuário vai inserindo elementos ao jogo e configurando eles, essa visão pode perder o significado, isto é, precisa-se de algo além de um botão com um nome gerado automaticamente para representar um objeto e ser identificado facilmente pelo usuário. Como pode ser visto na figura \ref{fig:objetos_disp}, nesse jogo, existem quatro inimigos configurados, mas não se sabe quais são as características deles apenas olhando para os botões, ou seja, o usuário precisa selecionar um a um até encontrar qual deles é o que ele procura, qual deles é o inimigo final da fase, por exemplo. Sendo assim, a ação de reconfigurar um objeto pode tornar-se difícil a medida que novos itens forem sendo adicionados ao jogo.

\begin{table}[h]
   \centering
   \begin{tabular}{| l | p{8cm} |}
      \hline
      \textbf{Menu} & No menu é possível realizar ações que refletem no projeto todo, por exemplo: salvar, adicionar \emph{spritesheet}, executar o jogo. \\
      \hline
      \textbf{Abas} & As abas representam os agregadores de objetos, podem conter a aba inicial do projeto, um \emph{mundo} ou uma tela. \\
      \hline
      \textbf{\emph{Toolbar}} & Permite realizar ações referentes ao agregador, se for de um mundo possibilitar adicionar um inimigo ao jogo, por exemplo. \\
      \hline
      \textbf{Botões de objetos} & Cada objeto é representado por um botão que pertencem a uma determinada aba. \\
      \hline
      \textbf{Painel lateral} & Mostra as configurações do objeto selecionado, ao clicar em qualquer botão será mostrado as configurações daquele objeto.  \\
      \hline
   \end{tabular}
   \caption{Controles utilizados na primeira versão da ferramenta.}
   \label{table:ferramenta_areas}
\end{table}

\begin{figure}[h]
\centering
\includegraphics[width=0.8\textwidth]{images/objetos_disposicao.jpg}
\caption{Disposição dos objetos na versão anterior da ferramenta.}
\label{fig:objetos_disp}
\end{figure}

\subsection{Painéis de configuração dos objetos}
\label{sec:paineis-objetos}
Todos os itens que fazem parte de um jogo possuem características que os definem, sendo assim cabe a ferramenta prover ao usuário final uma forma clara e objetiva de configurá-las. Além disso, a ferramenta tem obrigação de validar os dados e guiar o usuário nos casos mais complexos, assim como dar um significado para o dado que está sendo recebido. Por exemplo, vamos supor que exista um objeto recém adicionado no jogo e que pretendemos configurar a sua posição inicial na tela, a ferramenta recebe essa configuração através de dois números que são, respectivamente, as posições cartesianas $x$ e $y$ do objeto, deve-se verificar se essas posições estão contidas no retângulo que representa a tela do jogo, assim como fornecer ao usuário formas de saber o que significa o valor que ele está configurando. Essa e outras propriedades possuem a mesma necessidade de serem visualizadas, ver tabela \ref{table:objetos-atributos}.

\begin{figure}[h]
\centering
\includegraphics[width=0.8\textwidth]{images/pos_inicial.jpg}
\caption{Configuração da posição inicial de um objeto na primeira versão da ferramenta.}
\label{fig:obj_pos_inicial}
\end{figure}

\begin{figure}[h]
\centering
\includegraphics[width=0.8\textwidth]{images/obj_dimensoes.jpg}
\caption{Configuração das dimensões de um objeto na primeira versão da ferramenta.}
\label{fig:obj_dimensoes}
\end{figure}

\subsection{Pré visualização dos objetos}
\label{sec:previa-objetos}
Os principais problemas dos painéis de configuração da \texttt{ferramenta 1.0} estão diretamente relacionados a falta de pré visualização dos objetos, notar que não há forma melhor de perceber o significado de uma configuração do que visualizando-a. Ou seja, simular o jogo é importantíssimo para a criação. Logo, a maior motivação para a criação do módulo que é proposto neste trabalho é a falta desse recurso.

A visualização dos objetos também contribui para os problemas mencionados nas secções anteriores. A disposição deles principalmente, pois com a prévia dos objetos, torna-se fácil identificá-los. Na secção \ref{chap:melhorias} será mostrado a solução sugerida para cada um desses problemas. Mas, antes disso, é importante enumerar as propriedades dos objetos que se beneficiariam com a pré-visualização, ou seja, as propriedades que trazem ao usuário a necessidade de executar o jogo para aferir a sua respectiva configuração. Esses atributos são mostrados na tabela \ref{table:objetos-atributos}.

\begin{table}[h]
   \centering
   \begin{tabular}{| p{6cm} | p{9cm} |}
      \hline
      \textbf{Objeto(s)} & \textbf{Atributo(s)} \\
      \hline
      Mundo e tela do jogo & Plano de fundo (figura \ref{fig:configurar-mundo-1}).\\
      \hline
      Ator, inimigo, bônus, opositor e projétil & Animações (\emph{spritesheet}), posição inicial, dimensões e área de colisão (figura \ref{fig:configurar-obj-1}). \\
      \hline
      Botão de uma tela & Posição, dimensões, textura do botão normal e textura quando for pressionado (figura \ref{fig:configurar-botao-1}).\\
      \hline
      Munição do projétil & Posição, dimensões e ícone (figura \ref{fig:configurar-municao-1}). \\
      \hline
      Barra de vida de um objeto & Posição, dimensões, textura do preenchimento da barra e textura do plano de fundo (figura \ref{fig:configurar-vida-1}). \\
      \hline
   \end{tabular}
   \caption{Objetos do jogo e suas respectivas propriedades que demandam ser simuladas, ou seja, serem visualizadas na criação.}
   \label{table:objetos-atributos}
\end{table}
\begin{figure}[h]
\centering
\includegraphics[width=0.4\textwidth]{images/configurar-mundo-1.jpg}
\caption{Painel de configuração de um mundo do jogo na primeira versão da ferramenta.}
\label{fig:configurar-mundo-1}
\end{figure}
\begin{figure}[h]
\centering
\includegraphics[width=0.4\textwidth]{images/configurar-obj-1.jpg}
\caption{Painel de configuração de um objeto do jogo, existe para os seguintes objetos: ator, inimigo, bônus, opositor e projétil. }
\label{fig:configurar-obj-1}
\end{figure}
\begin{figure}[h]
\centering
\includegraphics[width=0.4\textwidth]{images/configurar-botao-1.jpg}
\caption{Painel de configuração de um botão na tela do jogo.}
\label{fig:configurar-botao-1}
\end{figure}
\begin{figure}[h]
\centering
\includegraphics[width=0.4\textwidth]{images/configurar-municao-1.jpg}
\caption{Painel de configuração do mostrador de munição de um projétil do jogo.}
\label{fig:configurar-municao-1}
\end{figure}
\begin{figure}[h]
\centering
\includegraphics[width=0.4\textwidth]{images/configurar-vida-1.jpg}
\caption{Painel de configuração da barra de vida de um objeto do jogo.}
\label{fig:configurar-vida-1}
\end{figure}

\chapter{Descrição das melhorias} % Joel
\label{chap:melhorias}
Tendo visto os problemas da primeira versão da ferramenta mostrados na secção \ref{chap:problemas}, discuti-se aqui como resolvê-los e o que é necessário para isso. Primeiramente, tem-se uma solução correspondente aos problemas indicados, daí é discutido a sua viabilidade e a implementação técnica. Vale salientar que, os pontos de melhorias mostrados encontram-se implementados na \texttt{ferramenta 2.0}, dessa forma pode ser mostrado o resultado disso (secção \ref{chap:caso}).

\section{Resumo dos pontos de melhoria}
Para cada um dos problemas indicados anteriormente, é necessário determinar a solução de cada um e, além disso, detalhar qual foi o meio técnico. Portanto, tem-se três problemas descritos nas secções \ref{sec:orga-objetos}, \ref{sec:paineis-objetos} e \ref{sec:previa-objetos} e, consequentemente, as respectivas melhorias que estão relacionadas a seguir.

\begin{alineas}
\item \textbf{Organização dos objetos:} Utilizou-se uma árvore que organiza todos os objetos do jogo e deixa claro a relação que existe entre cada um deles. A árvore de objetos possui como raiz o projeto e cada objeto inserido nele é mostrado como seu filho.  Com isso, os botões que representam os itens do jogo na primeira versão da ferramenta foram substituídos por essa árvore.
\item \textbf{Painéis de configuração dos objetos:} Os painéis de configurações permanecem parecidos com a primeira versão da ferramenta, as melhorias visam permitir que as informações alteradas reflitam sempre com a área destinada a simular o jogo, a área de pré visualização, ou seja, no módulo de pré visualização, os painéis terão que interagir para mostrar as mudanças feitas no objeto.
\item \textbf{Pré visualização dos objetos:} A melhoria mais importante desse módulo, consiste em mostrar uma prévia do jogo ao usuário, mostrando os objetos inseridos e configurados, permitindo que o usuário perceba melhor o jogo que ele está criando.
\end{alineas}

\section{A nova tela inicial da ferramenta}
Com o objetivo de implementar as melhorias foi necessário redesenhar a tela inicial da ferramenta, colocando os componentes novos e retirando os que não são mais utilizados. Dessa forma, a árvore de objetos do jogo está localizada a direita da tela, os painéis de configuração dos objetos ficam logo abaixo dela. E, a área de pré visualização é disponibilizada no centro da ferramenta.  A figura \ref{fig:tela_inicial_2} mostra a nova versão da tela inicial e a tabela \ref{table:ferramenta_areas_2} descreve os controles utilizados.

\begin{table}[h]
   \centering
   \begin{tabular}{| l | p{8cm} |}
      \hline
      \textbf{Menu} & Assim como na primeira versão, armazena comandos da ferramenta, a partir do menu pode-se adicionar objetos no jogo, na nova versão da ferramenta o menu substitui a \emph{toolbar} e possui atalhos para facilitar o uso. Por exemplo, \texttt{CTRL + I} para adicionar um inimigo ao jogo. \\
      \hline
      \textbf{Área de pré visualização} & Região  destinada a prévia do jogo, onde os objetos são exibidos da forma mais próxima possível ao jogo. O usuário pode interagir com essa área, selecionando um objeto ou posicionando ele em outro lugar da tela por exemplo.\\
      \hline
      \textbf{Árvore de objetos} & Componente que sumariza todos os objetos existentes no jogo. A árvore é responsável por exibir os objetos em sua hierarquia.\\
      \hline
      \textbf{Painel de configuração} & Painel de configuração do objeto que foi selecionado. Nessa região todas as configurações relacionadas ao objeto selecionado devem ser exibidos \\
      \hline
   \end{tabular}
   \caption{Controles utilizados na segunda versão da ferramenta.}
   \label{table:ferramenta_areas_2}
\end{table}

Os novos controles interagem entre si com o seguinte comportamento, a cada interação na árvore a ferramenta atualiza os painéis e a área de pré visualização de acordo com o objeto que esteja selecionado. Este que, por sua vez, é atualizado também quando algumas propriedades são alteradas no painel. A tabela \ref{table:objetos-atributos} mostra os atributos que quando alterados atualizam a prévia, por exemplo, o campo correspondente ao plano de fundo do mundo (imagem \ref{fig:tela_inicial_2}).
A seguir, veremos como cada um dos problemas enumerados anteriormente foram resolvidos com base na solução sugerida, além disso como foi a implementação.


\begin{figure}[h]
   \centering
   \includegraphics[width=0.8\textwidth]{images/tela_inicial_2.jpg}
   \caption{Nova tela inicial da ferramenta com os novos controles que possibilitaram as melhorias.}
   \label{fig:tela_inicial_2}
\end{figure}

\section{Descrição técnica}

A ferramenta é escrita na linguagem \texttt{Java} e utiliza o \emph{framework} \texttt{JavaFX} para a interface do usuário, todo o código escrito para a primeira versão da ferramenta foi reutilizado, incrementando-o a medida que foi preciso na implementação do módulo de \textit{preview}.

Em \emph{JavaFX}, é usado um arquivo XML que descreve o \emph{layout} de uma tela e uma classe que cuida do comportamento dela. Assim, a implementação do módulo de pré visualização, consistiu em alterar esse arquivos XML e suas respectivas classes e, além disso, classes do pacote \texttt{br.ifce.edu.cgt.application.vo}, que receberam objetos customizados que implementam a interface \texttt{DrawbleObject}. A interface \texttt{DrawbleObject} é usada por todos os objetos que são mostrados na área de pré visualização e árvore de objetos, pois define o comportamento que deverá ter os objetos que estarão contidos nessas regiões. Nessa interface, existem dois métodos que são responsáveis por desenhar o objeto e o seu painel de configuração, métodos \texttt{drawObject()} e \texttt{drawConfigurationPanel()} respectivamente.

Com isso é possível visualizar as implementações que foram necessárias para concretizar o objetivo do módulo de pré visualização. O diagrama de classes, mostrando todas as classes que representam esse módulo, pode ser visto nos anexos.

\section{Organização dos objetos}

\subsection{Descrição da solução}
Árvores são ideais para organizar elementos que estão classificados hierarquicamente, com isso, tornou-se a melhor maneira de organizar os objetos da nova versão da ferramenta CGT.
A versão anterior exibia os mundos criados como abas e, dentro de cada uma, os objetos criados eram botões que quando eram clicados exibiam o painel de configuração correspondente ao objeto que foi clicado.
Ao substituir essa visão pela atual, permite-se que, facilmente, o usuário tenha visão de tudo que existe no jogo sem a necessidade de alternar entre abas, vale lembrar que a árvore de objetos ocupa menos espaço na janela, o que permitiu colocar outros controles.
Então, essa melhoria é mais lógica e conveniente, pois agrega mais praticidade a ferramenta.
A imagem \ref{fig:arvore_objetos} mostra um exemplo de uma árvore de objetos para um jogo em criação.

\begin{figure}[h]
   \centering
   \includegraphics[width=0.2\textwidth]{images/arvore_objetos.png}
   \caption{Árvore de objetos da nova versão da ferramenta.}
   \label{fig:arvore_objetos}
\end{figure}

\subsection{Implementação técnica}
O objetivo principal da árvore de objetos é garantir que a ferramenta seja atualizada quando um item for selecionado, pois o mesmo deve ser exibido na área de pré visualização e nos painéis de configuração, mas também ela deve organizar os objetos, agrupando-os quando necessário.

Usa-se o objeto \texttt{TreeView} para representar a árvore, onde cada um dos itens é um \texttt{DrawbleObject}. O comportamento que queremos que seja feito, foi implementado com uma fábrica de células customizada que é uma classe que estende de \texttt{TreeCell} e implemente os métodos \texttt{startEdit} e \texttt{updateItem}, chamados quando o usuário interage com a árvore. Nesses métodos, coloca-se a instrução para que seja desenhado os objetos e o painel, ou seja, executa-se os métodos abstratos de \texttt{DrawbleObject} (\texttt{drawObject} e \texttt{drawConfigurationPanel}),  por fim, atribui-se ao \texttt{TreeView} a fábrica customizada assim como é mostrado abaixo (seja \texttt{t} uma instâcia de \texttt{TreeView}):

\begin{lstlisting}[frame=single]
   t.setCellFactory(new Callback<TreeView<DrawableObject>,TreeCell<DrawableObject>>(){
      @Override
      public TreeCell<DrawableObject> call(TreeView<DrawableObject> param) {
         return new DrawableObjectTreeCellImpl();
      }
   });
\end{lstlisting}

Além do comportamento de redesenhar de acordo com o que foi selecionado na árvore, é importante definir os itens do jogo de acordo com a sua hierarquia, já que a árvore é montada obedecendo isso, a tabela \ref{table:obj-hierarquia} mostra todos os itens e os seus respectivos itens superiores.

\begin{table}[h]
   \centering
   \begin{tabular}{| p{8cm} | l | }
      \hline
      \textbf{Item} & \textbf{Item superior} \\
      \hline
      Projeto & (Raiz) \\
      Mundo & Projeto \\
      Ator, Inimigos, Bônus(es), Opositor(es) & Mundo \\
      Projetil & Ator \\
      Barra de vida & Ator, Inimigo \\
      Munição & Projétil \\
      Tela & Projeto \\
      Botão de tela & Tela \\
      \hline
   \end{tabular}
   \caption{Tabela mostrando a hierarquia que existe entre os objetos de um jogo.}
   \label{table:obj-hierarquia}
\end{table}

Garantir que a ferramenta mostre todos os objetos de acordo com a hierarquia, consiste em adicioná-los corretamente, o \texttt{PreviewPane} faz isso nos métodos que são chamados pelos eventos do menu editar, \texttt{addEnemy} por exemplo.

\section{Painéis de configuração}

Os painéis de configuração na ferramenta são, a grosso modo, os controles responsáveis por receber as informações do usuário e transformá-las em objetos do jogo.
É importante que, os controles usados sejam claros, objetivos e consigam passar para o usuário o significado do que está sendo configurado.

\subsection{Descrição da solução}
Para a implementação do módulo de pré visualização foi necessário aprimorar os painéis existentes na primeira versão da ferramenta, possibilitando as funcionalidades da segunda versão, tem-se a necessidade, por exemplo, de não exibir diálogos de configuração  com tanta frequência, como é feito na versão anterior, pois os mesmos se posicionam na frente da ferramenta  e, consequentemente, da área de pré visualização (ver figura \ref{fig:intro-problema-2} como exemplo de configuração em dialogo).
Além disso, é necessário para os objetos que possuem animação uma prévia dela ou uma forma de selecioná-la melhor no painel de configuração, é o caso do ator e inimigo por exemplo.
Lembrar que, o objetivo é passar para o usuário o que uma determinada configuração representa.

Os painéis são mostrados na ferramenta de forma semelhante aos objetos na pré visualização, ou seja, são disparados através da árvore de objetos, a medida que o usuário seleciona um objeto dela, a configuração correspondente é exibida na região destinada aos painéis.
Em um painel de configuração de um objeto, pode possuir mais de uma configuração para ele, cada configuração deve ser referente a algo e elas são exibidas separadamente.
Usa-se o componente de acordeão para agregar as configurações no painel de acordo com o objetivo dela. Ver a figura \ref{fig:painel_ator} por exemplo, nela temos um painel de configuração de um ator do jogo, percebe-se que cada configuração é separada de acordo com sua finalidade, há uma aba para configurar as animações e outra para configurar as propriedades relacionadas a colisão, por exemplo.

\begin{figure}[h]
   \centering
   \includegraphics[width=0.4\textwidth]{images/painel_ator.png}
   \caption{Painel de configuração de um ator no jogo}
   \label{fig:painel_ator}
\end{figure}

\subsection{Implementação técnica}

A implementação dessa melhoria está relacionada a reutilizar os painéis que já existiam e melhorar alguns aspectos, dentre eles, pode-se destacar a configuração das animações do painel responsável por configurar um \emph{game object}.
Na primeira versão da ferramenta, uma animação era adicionada a partir de uma janela \textit{pop up} que mostrava o \textit{sprite} do objeto, então o usuário escolhia dentro de uma matriz o \textit{frame} inicial e final, assim como a finalidade da animação e outras propriedades dela (ver imagem \ref{fig:add_animacao}).
\begin{figure}[h]
   \centering
   \includegraphics[width=0.8\textwidth]{images/add_animacao_1.png}
   \caption{Janela para adicionar animações para um objeto na primeira versão da ferramenta. }
   \label{fig:add_animacao}
\end{figure}
Quando há um painel destinado a mostrar as configurações do objeto correspondente, faz-se desnecessário o uso de janela \textit{pop up}, dessa forma, na nova versão da ferramenta as configurações da animação do objeto foram colocadas no painel dele apenas, facilitando a pré visualização e também o manuseio.
Ver imagem \ref{fig:add_animacao_2}, notar que, o que é preciso para configurar uma animação está em três abas desse painel, onde a última aba é uma lista de todas as animações que já existem, a segunda as propriedades da animação e a primeira aba a configuração do quadro inicial e final da animação. Vale notar que o comportamento de selecionar o quadro inicial e final de uma animação para um objeto, tornou-se mais fácil, pois antes  era feito com campos de texto que recebiam as coordenadas $x$ e $y$ do quadro e, na segunda versão, faz-se necessário apenas clicar no quandro que se deseja.
Logo, foi possível transferir tudo para o painel, contribuindo para a coesão da ferramenta e melhorando também no objetivo de pré visualização dos objetos.

De um ponto de vista técnico, os painéis implementados para a nova versão da ferramenta são classes que carregam o arquivo XML que descreve o \textit{layout} (FXML) e, Consequentemente, definem o comportamento.
Além disso, faz-se necessário escrever na função que abre um jogo salvo previamente o comportamento de preencher as informações desses painéis.

\begin{figure}[h]
   \centering
   \includegraphics[width=0.5\textwidth]{images/add_animacao_2.png}
   \caption{Painel de configuração das animações do objeto na nova versão da ferramenta.}
   \label{fig:add_animacao_2}
\end{figure}

\section{Pré visualização}

A pré visualização dos objetos do jogos criados pela ferramenta CGT é a principal melhoria do módulo que foi proposto e desenvolvido com esse trabalho. Vale lembrar que, a nova versão da ferramenta consiste exatamente nos itens presentes neste capitulo, sendo assim, a pré visualização dos objetos é a última funcionalidade que foi implementada e a mais importante, pois como - será visto posteriormente - é a maior responsável por melhorar a experiência do usuário, comparando-a com a versão anterior.

\subsection{Descrição da solução}
Poder conferir o que está sendo produzido, é a principal falta que os usuários da primeira versão da ferramenta sentem. Dessa forma, pode-se dizer que é o maior problema que ela possui. Para resolvê-lo, foi preciso dedicar uma região da janela para uma área de pré visualização do jogo, com isso a ferramenta foi alterada para conter essa área, a árvore de objetos e o painel de configuração (figura \ref{fig:tela_inicial_2}). A área de pré visualização deve conter todos os objetos existentes no jogo para aquele agregador (mundo ou tela do jogo), além disso, o itens devem ser exibidos tais quais seriam no momento de execução do jogo, devem ser fiéis a configuração feita e refletir no resultado real.
Na figura \ref{fig:preview_objetos}, pode-se ver como a tela da ferramenta é usualmente vista pelo usuário, notar que - na área de visualização - é mostrado um mundo em que podem ser vistos dois objetos configurados um ator e um inimigo.

\begin{figure}[h]
   \centering
   \includegraphics[width=0.8\textwidth]{images/preview1.png}
   \caption{Tela da ferramenta mostrando a área de pré visualização com dois objetos configurados.}
   \label{fig:preview_objetos}
\end{figure}

\subsection{Implementação técnica}

A construção da pré visualização da ferramenta foi implementada utilizando objetos customizados que possuem três atributos essenciais para o funcionamento dessa funcionalidade:
\begin{alineas}
\item Um atributo que corresponde ao objeto raiz do jogo, por exemplo: ator, inimigo;
\item Um método para desenhar esse objeto raiz na área de pré visualização;
\item Um método para exibir o painel de configuração correspondente ao objeto selecionado;
\end{alineas}

Dessa forma, temos uma interface criada para esse fim, a \texttt{DrawableObject}, a partir daí, foi implementada uma classe abstrata, cujo nome é \texttt{AbstractDrawableObject}, responsável por implementar algumas das tarefas comuns de todos esses objetos desenháveis.
Com isso, pode-se ainda estender essa classe abstrata e gerar classes especificas aos objetos que necessitam de uma prévia, então foram criadas classes com o sufixo \texttt{Drawable}, por exemplo \texttt{CGTGameActorDrawable} que tem o objetivo de descrever cada uma das propriedades citadas anteriormente.

Então, por definição, um objeto desenhável deve prover de meios para representar um objeto raiz do projeto, que são os objetos que estão no pacote \texttt{cgt.core} dentro do módulo \texttt{core} do projeto (ver tabela \ref{table:modulos}). Os meios que um desenhável possui são os métodos \texttt{drawObject} e \texttt{drawConfigurationPanel} que são responsáveis por exibir o objeto e o painel de configuração respectivamente.
Esses objetos desenháveis, são criados pelo usuário e inseridos na árvore de objetos (assim como explicado na secção \ref{sec:orga-objetos}), no momento de inserção, o método que os desenha é chamado e, então, a pré visualização é exibida.
A medida que, o usuário vai configurando esses objetos no respectivo painel de configuração, a prévia dele é atualizada na área de visualização.
Isso é possível, graças a criação de métodos do tipo \emph{callback} que existem em todos os painéis de configuração que necessitam que as mudanças sejam exibidas assim que feitas, notar que, esse método é chamado pelo próprio painel toda vez que algum atributo relevante é modificado, por exemplo, a dimensão e posição de um objeto, assim como é mostrado na figura \ref{fig:obj_preview_tamanho}.

\begin{figure}[h]
   \centering
   \includegraphics[width=0.8\textwidth]{images/preview2.png}
   \caption{Exemplo de dimensão do objeto sendo percebida no momento que é alterada na configuração}
   \label{fig:obj_preview_tamanho}
\end{figure}

Ou seja, toda vez que é detectado um evento de mudança no campo de texto do tamanho do objeto, o método de \textit{callback} - que é um objeto Java da classe \texttt{Runnable}, mas no painel é um atributo cujo nome é \texttt{onUpdateRunnable} - é executado da forma é mostrado a seguir. Notar que, quem cria o objeto que corresponde ao painel de configuração é que deve determinar o conteúdo desse método \texttt{callback}, dessa forma, é garantido que o painel seja compatível com a ferramenta.

\begin{mylisting}[t]
   \begin{lstlisting}
      boundsH.focusedProperty().addListener(new ChangeListener<Boolean>() {
         @Override
         public void changed(ObservableValue<? extends Boolean> observable,
         Boolean oldValue, Boolean newValue) {
            if (!newValue) {
               /** comportamento para mudar a altura do objeto */
            }

            if (onUpdateRunnable != null) {
               onUpdateRunnable.run();
            }
         }});
   \end{lstlisting}
\end{mylisting}


\label{chap:caso}
\chapter{Estudo de caso}

Neste capitulo será realizado um estudo para mostrar o ganho que se obteve com a implementação do módulo de pré-visualização, ou seja, qual o verdadeiro resultado que foi obtido após utilizar a nova versão da ferramenta. Sendo assim, será feito comparações com as duas versões da ferramenta com o intuito de demonstrar avanço na criação de jogos. Ao colocar o módulo de pré visualização na ferramenta, sabe-se que, com isso, exclui-se a necessidade de frequentemente executar o jogo para verificar qualquer configuração feita. Então, na tabela \ref{table:objetos-atributos} pode ser visto os atributos de cada objeto que fazem necessário a execução do jogo após a alteração deles. A nova versão da ferramenta elimina esse problema, ou seja, enquanto que para um jogo com cinquenta objetos criado na primeira versão da ferramenta, provavelmente, faria com que o usuário executasse esse jogo cinquenta ou mais vezes para averiguar o seu trabalho, a nova versão pouparia isso e exibiria todos os objetos com suas respectivas propriedades de uma só vez de forma objetiva e clara na área de pré visualização e na árvore dos objetos auxiliando no acesso a eles.

\section{Funcionalidades analisadas}

Para analisar o resultado deve-se criar um jogo com a antiga ferramenta e com a nova, pode ser visto no manual da ferramenta antiga, onde é mostrado como criar um jogo nela \cite{monografia:aquino} e - com o anexo \ref{anex:manual-novo} deste documento - mostra-se como proceder com as alterações do módulo de pré visualização, ou seja como criar um jogo com a nova versão da ferramenta. Posto isso, será usado o modelo KLM (\emph{Keystroke-Level Model}) que propõe quantificar o tempo de execução que o usuário leva para executar uma tarefa, será utilizado esse método na ferramenta para averiguar se as tarefas são executadas mais rápidas na nova versão.

Assim como sugere o modelo KLM \cite{klm-def} há uma tarefa maior que a ferramenta deve possibilitar que é a tarefa de criar um jogo, mas ela pode ser fragmentada em tarefas menores que são listadas na tabela \ref{table:tarefas} e, além disso, é importante lembrar que elas podem ser executadas em mais de um cenário, o que para o método KLM deve ser tratado de forma diferente \cite{klm-metodo}. Notar que, essas tarefas assemelham-se bastante com os casos de uso da ferramenta, contudo será analisado apenas o que é relevante para averiguar as melhorias implementadas na nova versão da ferramenta.

\begin{table}[h]
   \centering
   \begin{tabular}{| m{3em} | m{16em} | m{18em} |}
      \hline
      \textbf{ID} & \textbf{Tarefa} & \textbf{Descrição} \\
      \hline
      T1     & Configurar os objetos de um mundo:    & Os objetos do mundo que entram nessa categoria podem ser: ator, inimigo, opositor, bônus e projétil. \\
      \hline
      T1.1   & \hspace{2em} Configurar as dimensões; & Determinar e perceber o tamanho do objeto e o espaço de colisão. \\
      \hline
      T1.2   & \hspace{2em} Configurar a posição;    & Determinar e perceber alguma das posições iniciais do objeto. \\
      \hline
      T1.3   & \hspace{2em} Configurar uma animação; & Para qualquer objeto criado, inserir apenas uma animação para um objeto. \\
      \hline
      T2     & Configurar uma tela:                  & Criar uma tela para o jogo.\\
      \hline
      T2.1   & \hspace{2em} Configurar textura;      & Selecionar e perceber a textura para a tela.\\
      \hline
      T2.2   & \hspace{2em} Criar botão:             & Incluir um botão em uma tela criada.\\
      \hline
      T2.2.1 & \hspace{4em} Configurar textura;      & Configurar a textura do botão, inclusive quando ele for clicado. \\
      \hline
      T2.2.2 & \hspace{4em} Posicionar botão;        & Determinar a posição que o botão deve ficar na tela.\\
      \hline
      T2.2.3 & \hspace{4em} Configurar tamanho;      & Determinar o tamanho desse botão com relação a tela dele.\\
      \hline
      T3 & Selecionar um objeto & Significa selecionar um objeto qualquer do jogo. \\
      \hline
   \end{tabular}
   \caption{Tarefas que foram utilizadas para analisar a nova versão da ferramenta.}
   \label{table:tarefas}
\end{table}

Acredita-se que as tarefas mostradas na tabela \ref{table:tarefas} já possam exemplificar o que se deseja, pois algumas tarefas muito importantes para a ferramenta não foram contabilizadas, tais como: selecionar um objeto, configurar um mundo, configurar especificamente um objeto do mundo (ator, inimigo, opositor, bônus e projétil).

\section{Estimando as funcionalidades}

Para estimar as tarefas, considere o sistema KLM e suas operações vistas na tabela \ref{table:klm-ops}.
A partir dessas operações, pode-se expressar cada tarefa, uma vez que se sabe no que cada uma delas consiste. Nas próximas secções, é mostrado o que há em cada uma das tarefas listadas, começando com as atividades menores até as maiores.

\subsection{Configurar um objeto (T1)}
\label{sec:t1}
Assume-se que para criar um objeto, independente da versão da ferramenta, deve ser realizado os seguintes passos listados a seguir:
\begin{enumerate}
   \item Selecionar um objeto (T3);
   \item Configurar as dimensões (T1.1);
   \item Configurar a posição (T1.2);
   \item Configurar uma ou mais animações (T1.3);
\end{enumerate}

Posto isso, considere a função $tempo(x)$ que representa o tempo de uma dada tarefa $x$, então, pode-se dizer que tempo total para criar um objeto é $$tempo(T1) = tempo(T3) + tempo(T1.1) + tempo(T1.2) + N \times tempo(T1.3)$$ onde $N$ é a quantidade de animações que o objeto possui.

\begin{table}[H]
   \centering
   \begin{tabular}{| l | r | r |}
      \hline
      \textbf{Tarefa} & \textbf{Tempo(s)} & \textbf{Tempo(s)} \\
      \hline
      T3 & 5,0 & 2,5 \\
      T1.1 & 7,54 & 7,54 \\
      T1.2 & 2,76 & 2,4 \\
      T1.3 & 28,90 & 20,96 \\
      \hline
   \end{tabular}
   \caption{Tabela com os resultados dos tempos da ferramenta antiga para as tarefas relacionadas a objetos do jogo: T3, T1.1, T1.2 e T1.3.}
   \label{table:obj_resultados_antiga}
\end{table}

Nas subsecções seguintes - secções \ref{sec:t3}, \ref{sec:t1.1}, \ref{sec:t1.2} e \ref{sec:t1.3} - é mostrado como foram calculados os tempos para cada uma das tarefas (ver tabela \ref{table:obj_resultados_antiga}), com isso, pode ser substituído os valores na equação anterior,assumindo que seja um objeto com sete animações, daí temos para a primeira versão da ferramenta o resultado de $$tempo(T1_{antiga}) = 5 + 7,54 + 2,76 + 7 \times 28,98 = 15,3 + 202,86 \approxeq \textbf{3m38s}$$ e para a ferramenta nova o resultado é $$ tempo(T1_{nova}) = 2,5 +7,54+2,4+7\times 20,96=12,44+146,72 \approxeq \textbf{2m39s}.$$

Com isso temos o tempo que o usuário leva em média para configurar um objeto nas duas versões da ferramenta.

\subsection{Selecionar um objeto (T3)}
\label{sec:t3}
Consiste em um objeto qualquer do jogo, seja ele contido em mundo ou um botão de tela, a ferramenta deve possibilitar que essa ação seja mais fácil possível, pois é uma das ações mais usadas pelo usuário. Com isso, considere os seguintes passos para selecionar um objeto na ferramenta a seguir.

{\small
\noindent
\begin{tabularx}{\textwidth}{X  X}
   \textbf{Primeira versão:}
   \begin{enumerate}
      \item Achar aba do objeto (M);
      \item Posicionar ponteiro na aba (P);
      \item Clicar na aba (BB);
      \item Achar o botão do objeto (M);
      \item Posicionar ponteiro no botão do objeto (P);
      \item Clicar no botão do objeto (BB);
   \end{enumerate}
   &
   \textbf{Nova versão:}
   \begin{enumerate}
      \item Achar objeto na árvore (M);
      \item Posicionar ponteiro no item (P);
      \item Clicar no item do objeto (BB);
   \end{enumerate}
   \\
   $tempo(T3)=2tempo(M)+2tempo(BB)+2tempo(P)=2,4+0,4+2,2=\textbf{5,0s}$
   &
   $tempo(T3)=tempo(M)+tempo(BB)+tempo(P)=1,2+0,2+1,1=\textbf{2,5s}$
   \\
\end{tabularx}}

\subsection{Configurar as dimensões de um objeto (T1.1)}
\label{sec:t1.1}
A tarefa de configurar as dimensões do objeto é, geralmente, a primeira a ser feita quando um novo objeto em configurado. Para essa tarefa, vale observar que no caso da segunda versão da ferramenta, as dimensões já são preenchidas automaticamente com o valor calculado através do \emph{spritesheet} fornecido. A seguir, os passos e operações para o pior caso:

{\small
\noindent
\begin{tabularx}{\textwidth}{X  X}
   \textbf{Primeira versão:}
   \begin{enumerate}
      \item Posicionar e clicar em \textit{Configurações Game Object} (P+BB);
      \item Posicionar e clicar no campo de texto \textit{Dimensões} (P+BB);
      \item Digitar novo valor da largura (múltiplos K, mínimo 4);
      \item Repete os dois últimos passos 3 vezes para a altura, altura e largura do espaço de colisão.
   \end{enumerate}
   &
   \textbf{Nova versão:}
   \begin{enumerate}
      \item Posicionar e clicar em \textit{Propriedades de dimensão e colisão} (P+BB);
      \item Posicionar e clicar no campo de texto \textit{Dimensões} (P+BB);
      \item Digitar novo valor da largura (múltiplos K, mínimo 4);
      \item Repete os dois últimos passos 3 vezes para a altura, altura e largura do espaço de colisão.
   \end{enumerate}
   \\
   $tempo(T1.1)=5tempo(BB)+12tempo(K)+5tempo(P)=0,6+1,44+5,5=\textbf{7,54s}$
   &
   $tempo(T1.1)=5tempo(BB)+12tempo(K)+5tempo(P)=0,6+1,44+5,5=\textbf{7,54s}$
   \\
\end{tabularx}}

\subsection{Configurar a posição de um objeto (T1.2)}
\label{sec:t1.2}

Um objeto pode possuir mais de uma posição inicial, contudo, para o estudo de caso, está sendo levado em consideração que ele tenha apenas uma. A nova versão da ferramenta possui duas formas de posicionar o objeto, pode ser do mesmo jeito que é feito na ferramenta antiga ou pode ser utilizado a área de pré visualização para posicionar o objeto. Será contabilizado o segundo.

{\small
\noindent
\begin{tabularx}{\textwidth}{X  X}
   \textbf{Primeira versão:}
   \begin{enumerate}
      \item Posicionar e clicar no painel \textit{Configuração Game Object} (P+BB);
      \item Posicionar e clicar no campo de texto da posição do objeto (P+BB);
      \item Digitar valor da posição (K);
      \item Ir para o próximo campo de texto, pressionar \texttt{TAB} (K);
      \item Digitar valor da posição (K);
   \end{enumerate}
   &
   \textbf{Nova versão:}
   \begin{enumerate}
      \item Posicionar e clicar no painel \textit{Configuração gerais do objeto} (P+BB);
      \item Posicionar e clicar (segurando) no objeto contido na área de pré visualização, em seguida liberar o objeto na posição que se deseja (P+BB);
   \end{enumerate}
   \\
   $tempo(T1.2)=2tempo(P)+2tempo(BB)+3tempo(K)=2,2+0,2+0,36=\textbf{2,76s}$
   &
   $tempo(T1.2)=2tempo(P)+2tempo(BB)=2,2+0,2=\textbf{2,4s}$
   \\
\end{tabularx}
}

\subsection{Configurar uma animação de um objeto (T1.3)}
\label{sec:t1.3}
Configurar uma animação de um objeto é uma das ações mais importantes e demoradas da ferramenta, essa tarefa é responsável por definir o comportamento de um objeto quando um determinado acontece, além de ser responsável por estabelecer uma relação entre o objeto e o seu respectivo \emph{spritesheet}.

{\tiny
\noindent
\begin{tabularx}{\textwidth}{X X}
   \textbf{Primeira versão:}
   \begin{enumerate}
      \item Posicionar e clicar em \textit{Configurações Game Object} (P+BB);
      \item Posicionar e clicar no botão (+) ao lado de \textit{Animações} (P+BB);
      \item Posicionar e clicar em \textit{Estado do objeto} (P+BB);
      \item Posicionar e clicar em uma opção (P+BB);
      \item Posicionar e clicar no botão (+) ao lado de \textit{Estado do objeto} (P+BB);
      \item Posicionar e clicar de \emph{Sprite sheet} (P+BB);
      \item Posicionar e clicar em uma opção de \textit{Sprite sheet} (P+BB);
      \item Identificar quadro inicial da animação no \emph{spritesheet} (M);
      \item Posicionar e clicar no campo da linha do quadro inicial (P+BB);
      \item Digitar valor (M+K);
      \item Posicionar no campo da coluna do quadro inicial através da tecla \texttt{TAB} (K);
      \item Digitar valor (M+K);
      \item Repetir os cinco últimos passos para o quadro final (3M+P+BB+3K);
      \item Posicionar e clicar no campo de velocidade da animação (P+BB);
      \item Digitar valor da velocidade da animação (M+3K);
      \item Posicionar e clicar na opção \emph{Flip vertical} \textbf{(Opcional)} (P+BB);
      \item Posicionar e clicar na opção \emph{Flip horizontal} \textbf{(Opcional)} (P+BB);
      \item Posicionar e clicar em \emph{Animation Policy} (P+BB);
      \item Posicionar e clicar numa opção de \emph{Animation Policy} (P+BB);
      \item Posicionar e clicar no botão cadastrar (P+BB);
   \end{enumerate}
   &
   \textbf{Nova versão:}
   \begin{enumerate}
      \item Posicionar e clicar em \emph{Animações do objeto} (P+BB);
      \item Posicionar e clicar na lista com os \emph{spritesheets} (P+BB);
      \item Posicionar e clicar no botão \emph{Frame inicial} (P+BB);
      \item Posicionar e clicar no botão que representa o quadro inicial da animação (M+P+BB);
      \item Posicionar e clicar no botão \emph{Frame final} (P+BB);
      \item Posicionar e clicar no botão que representa o quadro final da animação (M+P+BB);
      \item Posicionar e clicar na aba \emph{Propriedades} (P+BB);
      \item Posicionar e clicar no campo \emph{Velocidade} (P+BB);
      \item Digitar o valor da velocidade (3K);
      \item Posicionar e clicar no campo \emph{Política} (P+BB);
      \item Escolher uma opção (P+BB);
      \item Posicionar e clicar na opção \emph{Flip vertical} \textbf{(Opcional)} (P+BB);
      \item Posicionar e clicar na opção \emph{Flip horizontal} \textbf{(Opcional)} (P+BB);
      \item Posicionar e clicar em uma opção do campo \emph{Estados de animação} (P+BB);
      \item Posicionar e clicar no botão \emph{Salvar} (P+BB);
   \end{enumerate}
   \\
   $tempo(T1.3)=15tempo(P)+9tempo(K)+15tempo(BB)+7tempo(M)=16,5+1,08+3+8,4=\textbf{28,98s}$
   &
   $tempo(T1.3)=14tempo(P)+3tempo(K)+14tempo(BB)+2tempo(M)=15,4+0,36+2,8+2,4=\textbf{20,96s}$
   \\
\end{tabularx}}

\subsection{Configurar uma tela (T2)}
\label{sec:t2}
A tarefa de configurar uma tela em ambas as versões da ferramenta é simples e tem seu tempo estimado facilmente através das seguintes sub tarefas:
\begin{enumerate}
   \item Selecionar o plano de fundo (T2.1);
   \item Criar um ou mais botões (T2.2)
\end{enumerate}

Ou seja, o tempo que é levado para configurar uma tela é calculado através da seguinte equação $tempo(T2) = tempo(T2.1) + N \times tempo(T2.2)$ seja $N$ a quantidade de botões na tela.

De acordo com as secções \ref{sec:t2.1} e \ref{sec:t2.2}, pode-se determinar que uma tela com dois botões é criada no seguinte tempo $tempo(T2_{antiga}) = 5,3 + 2\times 20,5 = \textbf{46,3s}$ e $tempo(T2_{nova}) = 5,3 + 2 \times 17,3 = \textbf{39,9s}$

\subsection{Configurar a textura da tela (T2.1)}
\label{sec:t2.1}
O tempo que se leva para configurar a textura de uma tela do jogo, ou seja atribuir um plano de fundo a ela é dividido nas seguintes operações:

{\small
\noindent
\begin{tabularx}{\textwidth}{X  X}
   \textbf{Primeira versão:}
   \begin{enumerate}
      \item Posicionar e clicar em \emph{Configuração Screen} (P+BB);
      \item Posicionar e clicar em \emph{Pesquisar} (P+BB);
      \item Posicionar e clicar no arquivo de imagem que será usado como textura da tela (M+P+BB);
      \item Posicionar e clicar em abrir (P+BB);
   \end{enumerate}
   &
   \textbf{Nova versão:}
   \begin{enumerate}
      \item Posicionar e clicar em \emph{Configurações da tela} (P+BB);
      \item Posicionar e clicar na lupa (P+BB);
      \item Posicionar e clicar no arquivo de imagem que será usado como textura da tela (M+P+BB);
      \item Posicionar e clicar em abrir (P+BB);
   \end{enumerate}
   \\
   $tempo(T2)=3tempo(P)+4tempo(BB)+tempo(M)=3,3+0,8+1,2=\textbf{5,3s}$
   &
   $tempo(T2)=3tempo(P)+4tempo(BB)+tempo(M)=3,3+0,8+1,2=\textbf{5,3s}$
   \\
\end{tabularx}}

\subsection{Criar um botão (T2.2)}
\label{sec:t2.2}
A tarefa de criar um botão é baseada em três sub tarefas que são mostradas nas secções \ref{sec:t2.2.1}, \ref{sec:t2.2.2} e \ref{sec:t2.2.3}. Logo, o tempo de criar um botão, é igual a soma dos tempos dessas sub tarefas $ tempo(T2.2) = tempo(T2.2.1) + tempo(T2.2.2) + tempo(T2.2.3) $.

Substituindo pelos valores obtidos na respectivas secções, é possível verificar que para criar um botão leva-se o seguinte tempo (ver tabela \ref{table:botao_tarefas_result}): $tempo(T2.2_{antiga}) = \textbf{20,5s}$ e $tempo(T2.2_{nova})=\textbf{17,3s}$.

\begin{table}[H]
   \centering
   \begin{tabular}{|l|r|r|}
      \hline
      \textbf{Tarefa} & Tempo(s) & Tempo(s) \\
      \hline
      T2.2.1 & 11,5 & 11,5\\
      T2.2.2 & 4,5 & 1,3\\
      T2.2.3 & 4,5 & 4,5\\
      \hline
   \end{tabular}
   \caption{Tempo que leva para executar as tarefas relacionadas a criação de um botão nas duas versões da ferramenta.}
   \label{table:botao_tarefas_result}
\end{table}


\subsection{Configurar textura de um botão (T2.2.1)}
\label{sec:t2.2.1}
Significa definir qual a imagem que deve ser exibida quando o botão da tela estiver sendo clicado ou não, é constituído das seguintes operações:

{\small
\noindent
\begin{tabularx}{\textwidth}{X  X}
   \textbf{Primeira versão:}
   \begin{enumerate}
      \item Posicionar e clicar em \emph{Configurações Button Screen} (P+BB);
      \item Posicionar e clicar em \emph{Pesquisar} ao lado do campo referente a textura (P+BB);
      \item Posicionar e clicar no arquivo de imagem que será usado como textura (M+P+BB);
      \item Posicionar e clicar em abrir (P+BB);
      \item Repetir os três últimos para a textura do botão quando for clicado (3P+M+3BB);
   \end{enumerate}
   &
   \textbf{Nova versão:}
   \begin{enumerate}
      \item Posicionar e clicar em \emph{Configurações do botão} (P+BB);
      \item Posicionar e clicar em \emph{Pesquisar} ao lado do campo referente a textura (P+BB);
      \item Posicionar e clicar no arquivo de imagem que será usado como textura (M+P+BB);
      \item Posicionar e clicar em abrir (P+BB);
      \item Repetir os três últimos para a textura do botão quando for clicado (3P+M+3BB);
   \end{enumerate}
   \\
   $tempo(T2.2.1)=7tempo(P)+7tempo(BB)+2tempo(M)=7,7+1,4+2,4=\textbf{11,5s}$
   &
   $tempo(T2.2.1)=7tempo(P)+7tempo(BB)+2tempo(M)=7,7+1,4+2,4=\textbf{11,5s}$
   \\
\end{tabularx}}

\subsection{Posicionar um botão (T2.2.2)}
\label{sec:t2.2.2}
é a tarefa que consiste em posicionar um botão na tela que ele pertence, vale salientar que a segunda versão da ferramenta utiliza a área de pré visualização para fazer isso e, portanto, consome menos tempo do usuário, contudo o tempo é determinado pelas seguintes operações:

{\small
\noindent
\begin{tabularx}{\textwidth}{X  X}
   \textbf{Primeira versão:}
   \begin{enumerate}
      \item Posicionar e clicar em \emph{Configurações Button Screen} (P+BB);
      \item Posicionar e clicar em \emph{Relativo X} (P+BB);
      \item Digitar valor (3K);
      \item Repetir os dois últimos para \emph{Relativo Y} (P+BB+3K)
   \end{enumerate}
   &
   \textbf{Nova versão:}
   \begin{enumerate}
      \item Posicionar e clicar (segurando) no botão na área de pré visualização, em seguida soltar o botão onde se deseja que ele fique (P+BB);
   \end{enumerate}
   \\
   $tempo(T2.2.2)=3tempo(BB)+3tempo(P)+6tempo(K)=0,6+3,3+0,72=\textbf{4,5s}$
   &
   $tempo(T2.2.2)=tempo(P)+tempo(BB)=1,1+0,2=\textbf{1,3s}$
   \\
\end{tabularx}}

\subsection{Configurar o tamanho de um botão (T2.3)}
\label{sec:t2.2.3}

É a tarefa que visa determinar o tamanho relativo que um botão ocupa na tela, consiste nas seguintes operações:

{\small
\noindent
\begin{tabularx}{\textwidth}{X  X}
   \textbf{Primeira versão:}
   \begin{enumerate}
      \item Posicionar e clicar em \emph{Configurações Button Screen} (P+BB);
      \item Posicionar e clicar em \emph{Largura relativa} (P+BB);
      \item Digitar valor (3K);
      \item Repetir os dois últimos para \emph{Altura relativa} (P+BB+3K)
   \end{enumerate}
   &
   \textbf{Nova versão:}
    \begin{enumerate}
       \item Posicionar e clicar em \emph{Configurações do botão} (P+BB);
      \item Posicionar e clicar em \emph{Largura relativa} (P+BB);
      \item Digitar valor (3K);
      \item Repetir os dois últimos para \emph{Altura relativa} (P+BB+3K)
   \end{enumerate}
   \\
   $tempo(T2.2.3)=3tempo(BB)+3tempo(P)+6tempo(K)=0,6+3,3+0,72=\textbf{4,5s}$
   &
   $tempo(T2.2.3)=3tempo(BB)+3tempo(P)+6tempo(K)=0,6+3,3+0,72=\textbf{4,5s}$
   \\
\end{tabularx}}

\begin{table}[p]
   \centering
   \begin{tabular}{| l | p{18em} | r |}
      \hline
      \textbf{Operação} & \textbf{Descrição} & \textbf{Tempo (s)} \\
      \hline
      K & Digitar uma tecla, é usado para quando o usuário digita qualquer tecla seja a letra \texttt{a} ou a tecla \texttt{SHIFT}.  & 0,12 \\
      P & Posicionar o ponteiro do mouse em algum local da tela.  & 1,1  \\
      B & Pressionar ou liberar os botões do mouse & 0,1 \\
      BB & Clique do mouse & 0,2 \\
      H & Mover a mão do teclado para o mouse. & 0,4 \\
      M & Pensar ou perceber algo relacionado ao sistema. & 1,2 \\
      \hline
   \end{tabular}
   \caption{Operações e seus respectivos tempos para o sistema KLM.}
   \label{table:klm-ops}
\end{table}

\section{Análise dos resultados}
Após estimar o tempo que leva as principais tarefas envolvidas na construção de um jogo em ambas as versões da ferramenta do projeto CGT, é possível, com esses números, provar que o módulo de pré visualização tornou mais rápida e fácil a criação de jogos.

Para tanto, considera-se um jogo exemplo que tenha 20 objetos em mundos diferentes e 10 telas, apenas com os resultados obtidos nas secções \ref{sec:t1}  e \ref{sec:t2} podemos calcular que esse jogo na primeira versão da ferramenta terá seus objetos e telas configurados em aproximadamente \textbf{1h 17min}, enquanto que a nova versão teria o mesmo jogo construído em aproximadamente \textbf{57min}. Vale lembrar que esse tempo da ferramenta antiga pode aumentar se incluirmos o tempo das execuções do jogo que o usuário faz a medida que vai configurando esses objetos. Ver tabela \ref{table:resultados}.

Pode ser considerado então que o aproveitamento obtido através da implementação da nova ferramenta, foi de pelo menos \textbf{25,97\%}, ou seja, pode-se assumir que os usuários criarão jogos 25,97\% mais rápidos. Como forma de ilustrar esse resultado, pode-se pensar que com quatro jogos criados na antiga versão da ferramenta, seria criado um quinto, caso fosse utilizado a ferramenta nova.

\begin{table}[h]
   \centering
   \begin{tabular}{|l|r|}
      \hline
      \textbf{Ferramenta 1.0} & \texttt{1h 17min} \\
      \hline
      \textbf{Ferramenta 2.0} & \texttt{57min} \\
      \hline
   \end{tabular}
   \caption{Resultado de análise KLM para ambas as versões da ferramenta.}
   \label{table:resultados}
\end{table}

\chapter{Conclusão e trabalhos futuros}
\label{chap:conclcsao}

Neste trabalho, apresentou-se melhorias significativas para a ferramenta de criação de jogos do projeto CGT que tem como objetivo tornar a criação de jogos ainda mais fácil, lógica e produtiva. De tal forma que, os usuários não tenham necessidade de possuir conhecimentos técnicos na criação de jogos, aumentando ainda mais o alcance da ferramenta ao público alvo. Além disso, a ferramenta torna-se ideal quando existe uma necessidade de rapidez na demanda ou se, essa demanda, é um jogo simples que na mão das grandes produtoras de jogo custaria bem mais que um jogo criado pela ferramenta. Ou seja, quando a necessidade é provar um conceito ou demonstrar uma ideia a ferramenta é uma excelente escolha.

Com o avanço e crescimento da indústria de jogos, ferramentas acessíveis e de confiança, farão a diferença nesse mercado onde o diferencial consiste, principalmente, na criatividade do autor do jogo. Então, para que o projeto CGT continue competitivo e interessante é importante investir na experiência do usuário e, dessa forma, ganhar espaço nessa área e, como grande pilar posto desde o surgimento do projeto, aumentar o alcance dos usuários menos especializados contanto apenas com as ideias deles para produzir jogos cada vez melhores.

Posto isso, ainda existem melhorias quem podem ser feitas em prol de uma ferramenta ainda mais robusta e eficiente. Assim, para trabalhos futuros seria interessante considerar os seguintes pontos:
\begin{alineas}
\item Disponibilizar mais ações na área de pré visualização que, atualmente, conta apenas com a função de mover os objetos para novas posições na tela, seria interessante incluir outras propriedades e ações (modificar o tamanho do objeto, por exemplo). Ou seja, transformar a área de pré visualização no verdadeiro protagonista da ferramenta.
\item Possibilitar a pré visualização de mensagens exibidas no jogo, tais como as mensagens de vitória e derrota no mundo, assim como o contador que é inserido quando o jogo é do tipo ``sobreviver durante um período de tempo''.
\item Prover de meios para a inserção rápida de telas e botões, a ferramenta carrega imagens externa para esses dois componentes, entretanto, muitas vezes, necessita-se incluir algo bem simples como uma mensagem de texto. Seria interessante a ferramenta ter configurações expressas para mensagens do jogo.
\item Possibilitar a criação de outros tipos de jogos, por exemplo, jogos de corrida e jogos em três dimensões que contem com outra perspectiva de câmera.
\item Outro ponto que a ferramenta poderia disponibilizar aos produtores de jogos, seria meios para inserir anúncios nos jogos construídos. Sabe-se que a publicidade em jogos destinados a dispositivos móveis, por exemplo, representa boa parte dos ganhos com o jogo. Então se a ferramenta permitir isso de forma natural, der opções ao produtor do jogo, atrairia ainda mais usuários.
\end{alineas}

O desenvolvimento da ferramenta deve continuar evoluir prezando sempre pelos princípios estabelecidos pelo projeto CGT, de tal forma que, o fato de o projeto ser código aberto, pode auxiliar bastante com o crescimento dele.



\postextual
\bibliography{references}

\begin{anexosenv}
   \partanexos
   \chapter{Manual da ferramenta}
   \label{anex:manual-novo}

   Após as melhorias implementadas na nova versão da ferramenta, foi preciso atualizar o manual existente em trabalhos anteriores \cite{monografia:aquino}. Usou-se a mesma estrutura do manual anterior, atualizando-o para adequar-se às novas telas implementadas.
   Então, com este complemento será possível encontrar uma descrição sucinta da ferramenta CGT(Ceará Game Tools), mostrando todas as suas funcionalidades e imagens que explicam as suas configurações.
   Além disso, com o intuito de mostrar as funcionalidades que a ferramenta possui, será demonstrada a criação de um jogo com a ferramenta CGT.

   \section{Criar tela}
   Uma tela representa uma tela do jogo inicial, podendo ser encontrada como uma tela de configurações, uma tela de créditos, entre outros exemplos.
   Para criar uma tela basta ir no menu: \texttt{Editar$\rightarrow$Adicionar$\rightarrow$Tela} da ferramenta, ou o atalho: \texttt{ALT+T} (ver figura \ref{fig:add_tela}).
   No painel de configuração de uma tela, o usuário pode configurar o plano de fundo e o áudio.
   No exemplo a seguir foi selecionada uma imagem para o plano de fundo e adicionado botões a ela, figura \ref{fig:add_tela_2}.

   Agora serão configurados os botões que foram adicionados a tela.
   Como o procedimento é o mesmo para todos os botões, será demonstrada apenas a configuração de um. Nele serão configurados ação, imagem, posicionamento e dimensão do botão.
   A ação do botão, representado pelo “ir para”, será selecionada outra tela previamente criada ou um mundo, que será explicado ao longo do texto.
   Quanto a imagem do botão, será selecionada uma para quando se encontrar no estado normal e outra para quando for pressionado, causando a ideia de efeito ao clicar sobre o botão.
   O seu posicionamento na tela e dimensão são configurados com base na tela e os valores devem variar de 0 a 1, representando a porcentagem da tela. A área de pré-visualização permite arrastar o botão para a posição desejada, atualizando o painel de configuração em seguida (figura \ref{fig:add_botao}).
   Com isso, a ferramenta permite ao usuário criar telas de acordo com a necessidade do jogo e com os botões que lhe forem preciso.

   \section{Criar mundo}
   O botão de uma tela pode levar a um mundo. Um mundo pode ser o seu jogo ou uma fase dele e é constituído de vários objetos que serão configurados mais adiante.
   Para criar um mundo basta ir no menu: \texttt{Editar$\rightarrow$Adicionar$\rightarrow$Mundo} da ferramenta, ou o atalho: \texttt{ALT+M} (ver figura \ref{fig:add_mundo}).
   Como mostrado na imagem \ref{fig:add_mundo_2}, o mundo possui algumas características gerais, que são: nome, plano de fundo e música. Além disso, configurações de vitória, derrota e pausa do jogo.

   \subsection{Critérios de vitória}
   Na figura \ref{fig:add_mundo_3}, temos as configurações do critério de vitória para um mundo que podem ser cinco (eliminar inimigos, sobreviver, pegar bônus, completar percurso e atingir pontuação) e da mensagem que será exibida quando o jogador vencer. Para selecionar um dos critérios basta marcá-lo, notar que podem haver mais de um critério para o mundo.

   \begin{alineas}
   \item \textbf{Eliminar inimigos}: Será atingido quando todos os inimigos que forem destruíveis forem derrotados.
   \item \textbf{Sobreviver}: Configurar qual o valor(inteiro) de score deve ser atingido para que o critério seja atingido, ver imagem \ref{fig:vitoria_sobreviver}.
   \item \textbf{Pegar bônus}: Será atingido quando todos os bônus existentes tiverem sido consumidos pelo ator.
   \item \textbf{Completar percurso}: Definir o ponto que deve ser alcançado, como também a largura e altura desse ponto, tendo como referência valores inteiros. O critério será atingido quando o personagem alcançar o ponto definido, ver figura \ref{fig:vitoria_completar_perc}
   \item \textbf{Atingir pontuação}: Informar o tempo (valor inteiro em segundos) que o personagem deve sobreviver para que o critério seja atingido, ver figura \ref{fig:vitoria_atingir_pont}.
   \end{alineas}

   \subsection{Critérios de derrota}
   Na figura \ref{fig:add_mundo_4}, temos as configurações de derrota desse mundo, os critérios podem ser: ator morrer ou contagem regressiva, uma mensagem de derrota também pode ser configurada.

   \begin{alineas}
   \item \textbf{Ator morrer}: Será atingido quando o personagem possuir vida igual ou menor que zero.
   \item \textbf{Contagem regressiva}: Deve-se definir o tempo (em segundos), tamanho e cor da fonte que será exibida na tela e o posicionamento desse tempo na tela. Este critério será cumprido se não for atingido nenhum critério de vitória ao término do tempo, ver imagem \ref{fig:derrota_cont_regress}.
   \end{alineas}

   Além dessas mensagens de derreta e vitória, na figura \ref{fig:add_mundo_5}, é possível configurar a mensagem que será exibida quando o mundo estiver em pausa.
   Por fim, na figura \ref{fig:add_mundo_6}, tem-se o painel de configuração da câmera do mundo.

   \subsection{Configurar mensagens}
   A configuração das mensagens são todas iguais, então será demonstrada apenas a configuração um deles. Para configurar será necessário ajustar posicionamento, dimensão, imagens e botões. Uma mensagem deve possuir três imagens bases, que precisam ser do tipo PNG, são elas o fundo, a borda horizontal e a borda do canto inferior. A imagem de fundo será o plano de fundo, as imagens de borda horizontal e canto inferior direito são imagens usadas para se definir a borda de toda a janela da mensagem. Ver figura \ref{fig:config_msg}.

   Para adicionar botões na mensagem basta clicar no botão destacado na figura \ref{fig:config_msg_2}. As configurações do botão são as texturas do botão em estado normal e quando pressionado, a ação, deve ser escolhida no campo “Ir para”, selecionando a tela ou o mundo que a que esse botão vai levar, o posicionamento e as dimensões que ele deve ter na tela com os campos recebendo entradas de 0 a 1 de acordo com a tela.

   \section{Configurar \emph{spritesheet} dos objetos}
   Para adicionar um \emph{spritesheet} de um objeto basta ir no menu \texttt{Editar$\rightarrow$Spritesheet $\rightarrow$Adicionar} da ferramenta. A janela da figura \ref{fig:add_sprite} será aberta, então o usuário deve escolher uma imagem PNG e informar o número de linhas e colunas.

   \section{Ator principal}
   Para cada mundo existirá um ator principal que corresponde ao personagem que será controlado por quem estiver jogando.
   Ele possui algumas características que são comuns a outros objetos, tais como o inimigo, opositor e bônus.

   A animação é uma propriedade que todos esses objetos tem em comum e significa o que é mostrado na tela quando algo acontece com o objeto (andar, ficar parado, morrer) é feita através de um \emph{spritesheet} que é uma imagem que possui várias outras imagens dentro que possibilitam que uma animação seja configurada. Então, deve ser escolhido um \emph{spritesheet} (figura \ref{fig:add_sprite}), isso pode ser feito através do menu \texttt{Editar$\rightarrow$Spritesheet$\rightarrow$Adicionar} ou pelo botão que existe no painel de configuração, depois disso, deve ser feita as demais configurações da animação.

   Ao escolher na aba de animações do objeto o \emph{spritesheet} correspondente a esse objeto, todos os \emph{sprites} que compõem a folha dele são exibidos abaixo e, com eles, é possível definir o \textit{frame} inicial e final da animação. Para isso, basta clicar no botão correspondente do \textit{frame} em que se deseja configurar e então clicar no \emph{sprite} correspondente, a ferramenta informa ao lado do botão através de um texto qual o \emph{sprite} selecionado, ver figura \ref{fig:anima_obj}.

   O próximo passo é configurar as propriedades dessa animação que, até agora, possui apenas um \textit{frame} inicial e final. Das propriedades que devem ser configuradas temos (figura \ref{fig:anima_props}):

   \begin{alineas}
   \item \textbf{Velocidade}: representa de quanto em quanto tempo o \emph{frame} atual é trocado pelo próximo.
   \item \textbf{Política}: indica como se deve alternar entre os \emph{frames} nessa animação, os valores podem ser:
      \begin{alineas}
      \item \textbf{Normal}: as imagens são mostradas na sequência, do \emph{frame} inicial ao final uma única vez;
      \item \textbf{Reversivo}: as imagens são mostradas na ordem inversa uma única vez;
      \item \textbf{\emph{Loop}}: as imagens são mostradas na ordem normal repetidas vezes;
      \item \textbf{\emph{Loop} Reversivo}: as imagens são mostradas na ordem inversa repetidas vezes;
      \item \textbf{Loop PingPong}: as imagens são mostradas na ordem normal depois na ordem inversa repetidas vezes;
      \item \textbf{Loop Random}: as imagens são mostradas em qualquer ordem.
      \end{alineas}
   \item \textbf{\emph{flip} horizontal ou vertical}: indica se deve ser modificado a imagem aplicando nela uma rotação.
   \item \textbf{Estado}: representa em que momento deve ser exibido a animação, por exemplo: parado, andando para esquerda, dano, morto, olhando para cima.
   \end{alineas}

   Após escolhido os quadros inicial e final e as propriedades, a animação pode ser salva com o botão de salvar no painel, com isso, a animação deverá constar na lista de animações do ator que fica na terceira aba do painel (ver figura \ref{fig:anima_lista}). Nessa lista é possível adicionar ou editar uma animação.

   No que foi configurado as animações do ator é preciso configurar as propriedades gerais do objeto, que consistem na informação da vida desse objeto, além de suas posições iniciais e velocidade de movimento, ver figura \ref{fig:obj_props_geral}. Vale salientar que, assim que configurado as posições iniciais, o objeto é posicionado na área de pré visualização, já que é nesse momento que a ferramenta sabe onde deve colocá-lo.
   Em seguida, deve ser configurado as dimensões do objeto, ou seja, tamanho dele e o tamanho do espaço de colisão (\ref{fig:obj_props_dim}). Ainda nas configurações do objeto, é preciso definir os sons que o objeto faz em duas ocasiões: colisão e eliminação (ver figura \ref{fig:obj_sons}).

   Até então, as propriedades que foram configuradas são comuns aos objetos: ator, inimigos, opositores, bônus e projétil. Portanto, por fim, devem ser configuradas as configurações exclusivas do ator que são mostradas na figura \ref{fig:ator_props}. Deve ser selecionado o projétil do ator, caso ele possua, o tempo de recuperação e as ações dele, que é um mapeamento da entrada que é dada pelo jogador com a ação que o personagem deve executar.

   \section{Configurar opositores}
   Opositores são objetos comuns do jogo, que podem ser casas, paredes, árvores e entre outros exemplos. A seguir, será demonstrada as suas configurações específicas, que são \emph{block} e destruível. O \emph{block} define se o ator principal pode se colidir com ele. Destruível define se o ator pode “matar” o inimigo com o projétil (figura \ref{fig:opositor_props}).

   \section{Configurar inimigos}
   Inimigos no jogo são opositores, que podem se movimentar e causar dano ao ator principal. Suas características específicas são \emph{block}, destruível, comportamento, valor do dano e grupo. Comportamento define a maneira como o inimigo irá se movimentar. Valor do dano define quanto o inimigo irá retirar de vida do ator principal ao colidir. O grupo garante que se o inimigo e o ator principal possuírem o mesmo grupo, eles poderão causar dano um no outro (figura \ref{fig:inimigos_props}).

   \section{Bônus}
   Bônus são objetos que ao colidir com o ator principal geram algum benefício. Suas características específicas são \emph{score}, destruível, \emph{lifetime} e políticas. O score define quanto de benefício será dado ao ator quando houver colisão. \emph{Lifetime} é o tempo de vida do bônus. Política é o que o bônus irá fornecer de benefício para o ator, no caso do exemplo abaixo, irá fornecer \emph{score}, ver figura \ref{fig:bonus_props}.

   \section{Configurar projétil}
   O projétil é uma arma que o ator possui, nela é possível configurar que o ator possa destruir inimigos. As configurações específicas são grupo, dano, intervalo, ângulo e posicionamentos. O grupo define a que grupo de inimigos aquele projétil irá afetar. Dano é o valor que irá retirar do inimigo. Posicionamentos são as posições iniciais do projétil referente ao estado do ator (figura \ref{fig:project_props}).

   \section{Configurar HUD}
   HUD são elementos de informação que irão ser exibidos na tela, por exemplo vida, munição, tempo, pontuação, e outros. No jogo criado foi configurado apenas uma barra de vida mostrando a vida do ator no mundo. Em sua configuração é escolhido o objeto do qual se quer exibir a vida, a imagem da barra e imagem de fundo, além do posicionamento e dimensão que a barra vai possuir (figura \ref{fig:lifebar_props}).

   %%%%%  FIGURAS DO MANUAL %%%%%
   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/add_tela.png}
   \caption{Inserindo uma nova tela na ferramenta.}
   \label{fig:add_tela}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/add_tela_2.png}
   \caption{Tela de um jogo exemplo sendo configurada.}
   \label{fig:add_tela_2}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/add_botao.jpg}
   \caption{Configurando um botão em tela de exemplo do jogo.}
   \label{fig:add_botao}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/add_mundo.jpg}
   \caption{Adicionando um mundo na nova versão da ferramenta}
   \label{fig:add_mundo}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/add_mundo_2.jpg}
   \caption{Propriedades gerais de um mundo.}
   \label{fig:add_mundo_2}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/add_mundo_3.jpg}
   \caption{Propriedades de vitória do mundo.}
   \label{fig:add_mundo_3}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/add_mundo_4.jpg}
   \caption{Propriedades de derrota do mundo.}
   \label{fig:add_mundo_4}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/add_mundo_5.jpg}
   \caption{Propriedades da pausa do mundo.}
   \label{fig:add_mundo_5}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/add_mundo_6.jpg}
   \caption{Propriedades da câmera do mundo.}
   \label{fig:add_mundo_6}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/vitoria_sobreviver.jpg}
   \caption{Configurações do critério de vitória sobreviver no jogo.}
   \label{fig:vitoria_sobreviver}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/vitoria_completar_perc.jpg}
   \caption{Configurações do critério de vitória completar percurso no jogo.}
   \label{fig:vitoria_completar_perc}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/vitoria_atingir_pont.jpg}
   \caption{Configurações do critério de vitória de atingir uma pontuação no jogo.}
   \label{fig:vitoria_atingir_pont}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/derrota_cont_regress.jpg}
   \caption{Configurações do critério de derrota de contagem regressiva no jogo.}
   \label{fig:derrota_cont_regress}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/config_msg.jpg}
   \caption{Janela de configuração de uma mensagem no mundo, seja ela para vitória, derrota ou pausa.}
   \label{fig:config_msg}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/config_msg_2.jpg}
   \caption{Configuração dos botões de uma mensagem do mundo.}
   \label{fig:config_msg_2}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/add_sprite.jpg}
   \caption{Janela para adicionar \emph{spritesheets} na ferramenta.}
   \label{fig:add_sprite}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/anima_obj.jpg}
   \caption{Painel de configuração da animação de um objeto}
   \label{fig:anima_obj}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/anima_props.jpg}
   \caption{Propriedades de uma animação nas configurações de um objeto.}
   \label{fig:anima_props}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/anima_lista.jpg}
   \caption{Lista de animações de um objeto do jogo}
   \label{fig:anima_lista}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.8\textwidth]{images/obj_props_geral}
   \caption{Propriedades gerais de um objeto}
   \label{fig:obj_props_geral}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.8\textwidth]{images/obj_props_dim.jpg}
   \caption{Propriedades de dimensões e colisão de um objeto no jogo.}
   \label{fig:obj_props_dim}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/obj_sons.jpg}
   \caption{Configuração dos sons que um objeto faz.}
   \label{fig:obj_sons}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/ator_props.jpg}
   \caption{Propriedades exclusivas do ator do jogo}
   \label{fig:ator_props}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.5\textwidth]{images/opositor_props.jpg}
   \caption{Configurações de um opositor.}
   \label{fig:opositor_props}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.8\textwidth]{images/inimigos_props.jpg}
   \caption{Propriedades do inimigo}
   \label{fig:inimigos_props}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.6\textwidth]{images/bonus_props.jpg}
   \caption{Propriedades de um bônus do jogo}
   \label{fig:bonus_props}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.6\textwidth]{images/projec_props.jpg}
   \caption{Propriedades de um projétil no jogo.}
   \label{fig:project_props}
   \end{figure}

   \begin{figure}[H]
   \centering
   \includegraphics[width=0.7\textwidth]{images/lifebar_props.jpg}
   \caption{Propriedades da barra de vida de um objeto.}
   \label{fig:lifebar_props}
   \end{figure}

   \chapter{Diagramas de classes}
   \label{chap:diagramas}
   Dessa página em diante, pode-se ver o diagrama de classes do módulo que foi e implementado juntamente com esse trabalho, os diagramas são das classes presentes na \texttt{ferramenta} contidas no projeto CGT no pacote \texttt{br.edu.ifce.cgt.application.vo} e outras classes que precisaram ser adaptadas para a nova versão. Os diagramas foram gerados a partir da ferramenta \textit{Enterprise Architect} que lê o código fonte e gera os diagramas UML para ele, obteve-se o código fonte a partir do repositório \textit{Git} do projeto \cite{website:projeto-cgt-repo}.
   As demais classes do projeto, são irrelevantes para o que foi proposto aqui ou não foram alteradas para as implementações que foram feitas para a nova versão da ferramenta.

   \begin{figure}[H]
   \centering
   \includegraphics[width=\textwidth]{images/classes.png}
   \caption{Classes envolvidas no módulo de pré visualização.}
   \label{fig:classes}
   \end{figure}

   \includepdf[pages=-]{ClassModel.pdf}
\end{anexosenv}
\phantompart
\printindex
\end{document}
