Área do Desenvolvedor

Esta página apresenta detalhes da implementação do iFractions. É indicada para desenvolvedores que desejam colaborar com o projeto, tem curiosidade sobre o funcionamento da ferramenta ou desejam incorporá-la ao seu site ou a um Moodle preexistente.

Criando um novo jogo

Se você é um desenvolvedor que deseja colaborar com o iFractions criando um novo jogo, essa seção mostrará os passos mínimos para fazê-lo.

  • 1. Criar um arquivo novo em js/games/nomeDoJogo.js contendo: 

    /******************************
 * This file holds game states.
 ******************************/

/** [GAME STATE]
 *
 * Write game documentation here
 *
 * @namespace
 */
const nomeDoJogo = {
  /**
   * Main code
   */
  create: function () {
    // Your code goes here

    if (moodle) {
      navigation.add.right(['audio']);
    } else {
      navigation.add.left(['back', 'menu', 'show_answer'], 'customMenu');
      navigation.add.right(['audio']);
    }

    game.timer.start(); // Set a timer for the current level (used in postScore())
    game.event.add('click', this.events.onInputDown);
    game.event.add('mousemove', this.events.onInputOver);
  },

  /**
   * Game loop
   */
  update: function () {
    // Your code goes here

    game.render.all();
  },

  utils: {
    // Your functions go here
  },

  events: {
    /**
     * Called by mouse click event
     *
     * @param {object} mouseEvent contains the mouse click coordinates
     */
    onInputDown: (mouseEvent) => {
      // Your code goes here

      navigation.onInputDown(x, y);
      game.render.all();
    },

    /**
     * Called by mouse move event
     *
     * @param {object} mouseEvent contains the mouse move coordinates
     */
    onInputOver: (mouseEvent) => {
      // Your code goes here

      navigation.onInputOver(mouseEvent.x, mouseEvent.y);
      game.render.all();
    },
  },

  fetch: {
    /**
     * Saves players data after level ends - to be sent to database 
    
     *
     * Attention: the 'line_' prefix data table must be compatible to data table fields (MySQL server)
     *
     * @see /php/save.php
     */
    postScore: () => {
      const data = ''; // Your query goes here
      sendToDatabase(data);
    },
  },
};

  • 2. Adicionar o arquivo criado no <body> em index.html 

    <script src="./js/games/nomeDoJogo.js"></script>

  • 3. Adicionar o novo estado do jogo no <script> em index.html 

    game.state.add('nomeDoJogo', nomeDoJogo);

  • 4. Adicionar as informações sobre o jogo novo na lista de jogos em js/globals/globals_control.js 

    const gameList = [
  // ...
  {
    gameName: string, // Nome do jogo
    gameMode: string[], // Modos de jogo disponíveis
    gameOperation: string[], // Operações de jogo disponíveis
    gameDifficulty: number, // Nível máximo de dificuldade
    gameShape: string, // Figura geométrica que está representando a fração
    assets: {
      menu: { // centraliza informações necessárias no menu principal
        gameNameBtn: string, // ID do botão de seleção do jogo atual no menu principal
        infoBox: () => ({}) // Conteúdo informativo que aprece ao clicar no "?" ao lado do botão 
      },
      customMenu: { // centraliza informações necessárias no menu secundário
        gameModeBtn: string[], // ID do botão de modo do jogo atual no menu secundário
        gameOperationBtn: string[], // ID do botão de operação
        auxiliarTitle: (x, y, offsetX, offsetH) => {}, // renderiza parte de elemento auxiliar no menu secundário
        infoBox: () => ({
          gameMode: {},
          gameDifficulty: {},
          gameMisc: {},
        }), // Conteúdo informativo que aparece ao clicar no "?" ao lado de cada botão
      },
      map: { // centraliza informações necessárias no mapa do jogo
        characterAnimation: (operation) => {}, // Parâmetros recebidos pela função de animar personagem no mapa
        character: (operation) => {}, // Sprite com animação do personagem principal do jogo percorrendo o mapa
        startBuilding: () => {}, // Lugar de onde o personagem sai no mapa
        endBuilding: () => {}, // Lugar que o personagem quer chegar ao percorrer o mapa
      },
      end: { // centraliza informações necessárias na tela final do jogo
        characterAnimation: () => ({}), // Parâmetros recebidos pela função de animar personagem na tela final
        character: () => ({}), // Sprite com animação do personagem principal do jogo na tela final
        building: () => ({}) // Lugar que o personagem quer chegar ao percorrer o mapa
      }
    }
  }
];

  • 5. Adicionar as mídias que serão usadas no jogo atual em js/globals/globals_tokens.js

    A global url referencia todos arquivos de mídia usados dentro do iFractions. Novos itens podem ser adicionados em boot ou dentro de uma nova propriedade com o nome do jogo. Itens colocados em boot são carregados em cache assim que o iFractions inicia enquanto os dentro do uma propriedade com o nome do jogo só serão carregadas quando esse jogo for selecionado. 

    const url: {
  // (esses itens serão carregados logo quando o ifractions é iniciado)
  // é preciso pelo menos colocar os ícones de menu associados ao novo jogo
  boot: {
    image: [
      ['game_<gameId>', <url>], // ícone do jogo no menu primario
    ],
    sprite: [
      ['mode_<gameId>', <url>], // ícone do modo de jogo no menu secundario
    ]
  },

  // (esse itens só serão carregados ao abrir o jogo)
  nomeDoJogo: {
    image: [
      ['<lugar de onde o personagem sai no mapa>', <url>],
      ['<lugar onde o personagem chegará no mapa>', <url>],
    ],
    sprite: [
      ['<spritesheet do personagem>', <url>],
    ],
    audio: [],
  }
  
}

  • 6. Adicionar novos assets

    Criar as novas figuras em:

    • assets/img/icons_menu/nomeDoJogo.png -> ícone de jogo na tela de menu principal.
    • assets/img/icons_menu/nomeDoJogo_1.png -> ícone de modo de jogo na tela de menu de customização.
Voltar