Development

Love to see you here. Let's get started

###Libraries Used

To begin contributing to the project you need to be acquainted with these two libraries -

1. Infusion
   Infusion is a different kind of JavaScript framework. As you go through the tutorials and eventually the project you will realize the configuration and accessibility infusion provides.

   • To start with Infusion you can go through this tutorial - [Getting Started with Infusion] ( http://docs.fluidproject.org/infusion/development/tutorial-gettingStartedWithInfusion/GettingStartedWithInfusion.html)
   • If you have any issue, you can always find help on the fluid IRC channel #fluid-work.

2. Phaser
   Phaser is the HTML5 game framework used for the project. Phaser is opensource and has great community support.

   • To start with you can look into this great introduction to Phaser - [Making your first Phaser game] (http://phaser.io/tutorials/making-your-first-phaser-game)
   • If you have any issue, you can find help on html5gamedev forum. Better just google your
     issue. Also you can try joining the slack channel of Phaser, it is really a great place, here you can also find Richard Davey creator of Phaser who is always ready to help.

State management

The game uses state management system of phaser. It would be great if you understand the state management system, it is pretty easy search for any tutorial on this and then look at this basic template for state management and its image will become clear in your mind.

Repository structure

Lets get through how is the repository structured and how the game works.

The main directory consists of files like package.json, gruntfile.js, gitignore etc which are general to all JavaScript projects. Apart from these, the two folder /src and /demo is where magic happens.

Every game in Phaser has a main parent game object created using Phaser.game around which the game is built. Another important thing in a Phaser game are States. States are like scenes in a game like the loading screen, main menu, or any of the level. These states are the building blocks which are added to the game object eventually to make the game. Each states is a constructor function with prototype methods create, preload and update attached to them, which are used to define the logic and functionality of that scene. You can read about them more in the Phaser tutorial.

Infusion on the other hand is a framework made with intent of re-usability in mind. The implementation unit of infusion is called a component. We made a wrapper for Phaser by creating a infusion component (which is placed in /src/js/phaser-infusion.js) which when instantiated, creates a Phaser.game object. The wrapper is used in /demo as base grade for demo.discoveryCat (present in /demo/js/game.js)component which is the main component for the game. Next we created each state for the game as a component(different js files in demo/js) and added these components as sub-components to the main component demo.discoveryCat(can be seen in /demo/js/game.js) containing the Phaser game object. This way the sub-component can access the Phaser game object and also the game object can access these states and add them into itself to make the game work. This is the basic ideology behind the code of Discovery Cat, and might help you to understand its code more easily. Every other subcomponent in the /demo/js/game.js is either a state of the game or a component adding some functionality to the game. For example sizePref component in demo/js/sizePref.js contains all the level details about size Room in the game which is also a subcomponent to demo.discoveryCat. Apart from the custom state subcomponent that are created for the game, we also used some inbuilt infusion components like textToSpeech which we have attached as subcomponent in /demo/js/game.js.

In the demo folder,

• Assets sub-folder contains all the assets that are used by the game.
• Filters contains some js files that are used to apply filters to the game canvas, these are used to apply contrast mode to the game.
• js folder maintains the same structure as the template for state management that we came across above.
• messages folder contains different language translations to provide language support.
• index.html is where we initialize the demo.discoveryCat component we created.

Special Mentions -
prefModel in /demo/js/prefModel.js is a model component which is used to store variables that we need to pass around the whole game like-has the user visited the size room, then size.visited will become true, and other information like these are stored in this component.

This is all the basic idea you need to get into the code, apart from this the code base is commented at all the places to help you understand how specific parts work and how different parts interact with each other.

Also you can have a look at the blog which was written during the development phase of the game for help.

Thank you for being here, would love to have you as a part of our project.