Final touches before the demo- GUIs and testing..

     As the demo session is approaching very quickly I decide to work a little bit on the GUI design and implementation. As this is the first prototype I am still using placeholder arts for those and default fonts. I also didn't manage to research more about buttons in Phaser as when I tried to implement those, it just didn't work.. As I wanted a quick solution for that I decided to implement mouse click and keyboard keys to enable that functionality. I have also tested tutorial levels many times to ensure everything works correctly and except for some minor bugs it seems to work fine, but I'm sure it will be still easy to break it tomorrow! :) 

     I have also started implementing basic inventory bar to show the player what diamond was collected last-it will later be updated so that if player uses a diamond to solve the puzzle it will disappear from the inventory. I realise it is still quite buggy and therefore it is only visible when player's position on the map is high enough. I will have to figure out how to make its position fixed so whenever the camera is following player the bar stays at the top of the screen and is visible all the time.

     There are a lot of features I still need to implement and one of those is enabling player to drop the diamonds so that the level doesn't have to be restarted when player locks himself out. As well as this whenever diamonds where merged when player wants to drop the diamond they will drop the merged diamond not the two diamonds collected originally.

Level design.

     For the level design I have used placeholder art for box tiles at the moment. To make player learn easily I designed it so that in the first part player is locked within small area with only one diamond next to him and blue square(placeholder art for blue doors) so that there is not much of a choice about what to do. Next when player escapes this area he moves to the next bit which has the red diamond and blue diamond inside it-this is done on purpose so that the player has to choose the right diamond to open the doors, note that when player picks up both diamonds the game will be over as they will lock themselves in the area and the game has to be restarted by pressing Q key and going back to main menu and then starting the game again. This may be quite tricky bit but I want the player to be able to learn from this part. Hopefully the demo session will show me how intuitive these parts are and then I will be able to decide what to prioritise next. After completing these two areas player enters the biggest area in the tutorial level and has to pick up the diamond that was left behind in the previous area as well as the one this area to merge both diamonds to get the colour needed for opening the last doors in the tutorial level and therefore winning the game.

     I have used basic mathematical skills to solve where specific items should be spawned in tutorial level. In the future I will definitely have to think about creating level manager and how to handle multiple levels- one idea may be to store those in json file and then load specific json file depending on which level was chosen(provided it was unlocked-this is another feature I am hoping to add for my final release).

Doors as the last piece of core game mechanics... for now. :)

    The core mechanics involves using diamonds to enable performing certain actions, for the tutorial level it's opening the doors.There are no instructions to the game itself and I wanted to keep it that way for the demo session to see if people can see from the level design itself what to do.

     To implement doors I have used another group creation, and used randomly generated numbers for doors positions. Then I have moved on to testing mechanics, as general idea of how it works is very similar to collectable items it wasn't difficult to implement. The only tricky thing was making sure if statements checks for the correct combination of diamonds- this is because I am using a variables to stored the data about picked up items. Note that only one item can be picked up at once but if colours are appropriate you can pick two diamonds so that they will merge creating another colour for the diamond. I hope this should be easy to figure out that door's colours should match the diamond's colour. The only issue I had at that point was when player collected two diamonds of different colours, they would still open one coloured doors(like before merging the diamonds- when blue and red diamond were picked up they would open red, blue and purple doors while they should be only opening the purple doors). I have fixed that relatively quickly by working out changes to if statements.

     This is only core game mechanics for the first tutorial level that will be presented during first demo session, and therefore this will be expanded later on by creating more sophisticated puzzles and diamonds will probably have more possible colours and I may think about adding instructions about which diamonds can be merged(or i may just let the player figure this out on their own). I will also implement other groups of items player can interact with that will lead to more puzzles before opening the doors. As well as this some doors in later levels may require more than one diamond types that cannot be merged, to open them. Note the doors have the placeholder graphics at the moment so they are just coloured squares. :)

Animations

    Today I started creating actual sprites for diamond collectables so that those can replace placeholder art. I have also created some animations for the diamonds, but since they don't look the way I want them to I will stick to sprites with no animations for now.. Later when I have time I will come back to diamonds sprites and animations so that I can make them look better. As well as this I also started working on idle animations for the butterfly, again those will need more work later as now it just doesn't look the way I want..

    Here are the sprites I created so far:

Collectable items introduction..

     Today I started working on collectable items which are the main feature in this game project. Those will be used later to solve specific puzzles by enabling specific actions happening.

    I have started with placeholder rectangles so that I can test the spawning collectables and creating some simple collisions before moving on. Initially I had some errors from which most adhered to 'this' keyword. I have discovered that this happens quite often as Javascript is loosely typed language and Phaser framework is very strict about those keywords, but playing around and trying out different solutions finally worked.

    In order to enable correct collisions I had to create a collision group for collectable items. Later I will use this for all collectable item types. each item type will have its own name assigned so that it will not be mistaken for something else when used for solving puzzles. I have also encountered some issues while trying to manage those specific groups. Fortunately most errors I had were syntax errors and therefore quite easy to fix. I had  also some issues with detecting correct collisions between specific items.

Main Menu

     I couldn't figure out how buttons work so for now I decided to implement basic main menu functionality by pressing specific keyboard keys (this will later be listed on the main screen, unless I will implement buttons functionality later on). I will also plan on implementing mouse input and touch input functionality for starting the game so that it can also be easily played with touchscreen.
    When implementing those I had major issues with game states as it appeared to create multiple game states while the game run. I researched how game states should be connected and made sure actual game state is created only once after pressing start button (S key) and when exiting the game to main menu by pressing Q key.

Basic player movement in Phaser.

     After fixing a hidden problems with server(xamp) I had over the past few days on my computer, I have moved on to creating basic movement keyboard control for the main butterfly sprite. This came along quite easily, despite couple issues I had with disabling diagonal movement. This problem still needs resolving but it's better than it was initially.

     Next thing I want to implement are collectable items so that I can start working on the basic puzzle game mechanics for this project. As well as this I will move on to creating more art, that will still be placeholder sprites before I will create final art for the game.

     I will also look into swipe controls for tablets and mobiles as I want my game to work mainly on those devices. I have already researched this topic a bit and have discovered that Phaser does not have a built in functionality for the way I want to use those types of controls and therefore I will have to research it more in order to come up with a working solution.

Concept Art

     I have started the project with creating basic concept art and then designing sprites in Inkscape so far I've got: