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 some tutorials 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 project. 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) 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 subcomponents 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 subcomponent in demo/js/sizePref.js contains all the level details about size Room in the game. Apart from the custom state subcomponent that are created for the game, we also used some inbuilt infusion components like textToSpeech which also 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.
• The js folder maintains the same structure as the template for state management that we came across above.
• The messages folder contains different language translations to provide different language support.
• The index.html is where we initialise 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 commented at all the places to help you understand how those 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.