Tecnologias utilizadas
| Front-end | Back-end |
|---|---|
|
|
O iFractions é desenvolvido principalmente usando HTML, CSS e JavaScript. É uma aplicação que executa em sua maioria no lado do cliente, portanto, a conexão com o banco de dados é estabelecida apenas para acessar/guardar informações sobre o jogo e progresso do jogador, mas não para o carregamento de mídia. Sua Versão Web usa MySql e PHP para se conectar ao banco de dados, enquanto a Versão Moodle usa o banco de dados do Próprio Moodle.
É uma aplicação de página única (Single Page Application), portanto o carregamento de arquivos de mídia quando a conexão com o banco de dados é feita de forma assíncrona.
No início do desenvolvimento um arcabouço (framework) voltado para o desenvolvimento de jogos foi usado para gerenciar os elementos de jogabilidade e interação, no entanto, recentemente, o escopo do projeto foi redesenhado utilizando elementos nativos do JavaScript.
O iFractions foi desenvolvido para executar em sua maioria no lado do cliente, no entanto, para que as informações de progresso do usuário sejam coletadas, uma conexão com o banco de dados é estabelecida sempre que o jogador termina um jogo.
Inicialmente, um arcabouço (framework) voltado para o desenvolvimento de jogos foi usado para gerenciar os elementos de jogabilidade e interação, no entanto, recentemente, o escopo do projeto foi redesenhado utilizando apenas elementos nativos do JavaScript.
No processo de concepção do iFrations foi feita a decisão de usar o arcabouço Phaser. Mas recentemente, tendo em vista a tendência das aplicações atuais de abusarem de arcabouços, muitas vezes acabando por "usar um canhão para matar uma formiga" e tendo em vista o tamanho reduzido do projeto, o iFractions se propôs a retirar arcabouços se não se provassem tão necessários.
Assim, a sua versão atual deixou de usar o Phaser e lança mão exclusivamente de recursos nativos do JavaScript, facilitando a retrocompatibilidade com navegadores mais antigos.
Assim, o iFractions é praticamente todo desenvolvido usando HTML, CSS e JavaScript, usando principalmente as propriedades fornecidas pelo HTMLCanvasElement. O carregamento de mídia no cache é feita usando o Fetch API e HTMLImageElement, e a conexão com o banco de dados é feita usando PHP e XMLHttpRequest.
O iFractions é uma aplicação de página única (single page application), portanto todas telas do jogo são desenhadas no Canvas. Mas nem todo elemento de mídia é carregado no cache quando a página é aberta, sendo carregado quando necessário ao longo da execução.
Para isso o programa faz comunicação assíncrona usando o Fetch API para carregar áudios e arquivos de internacionalização e propriedades do HTMLImageElement para carregar imagens e spritesheets. Esse tipo de comunicação é feito também para estabelecer a comunicação com o banco de dados salvando informações de progresso do jogador.
Como é comum em jogos, o iFractions utiliza uma estrutura de máquina de estado, a qual estão associados os estados do jogo − mais comumente as telas, mas alguns estados não são explicitados, como o de carregamento inicial e de alteração de idioma.
Assim, a nível de código, um estado é um tipo especial de objeto que possui algumas funções que seguem um comportamento predefinido, são elas: preload, create e update. Mais sobre estados e suas funções na próxima página.