Final updates and notes on design process

This post will probably not matter as official project documentation anymore, but since I forgot to publish it yesterday  and it was written already anyway I decided to publish it today if someone would ever came by this and would like to find out a bit more about the project itself for whatever reasons. I'm quite happy that I managed to get two more levels in, in very short time.

Original post content:
     "Today I have added two more levels to my game and also a little bit more to the game mechanics. There are now more types of diamonds and doors. In the final game submitted player has to collect appropriate coloured diamonds to open the doors and finish the level-in tutorial level player has to open purple door that will take him to the first puzzle level with a little more going on. in this level as well as in the last one the aim is to get to top right corner of the board. To achieve that player has to successfully solve the puzzles by collecting diamond (only one diamond of the same colour can be collected but diamond with different colours can be merged to achieve a new colour diamond). Unfortunately due to time constraints I did not manage to put some instructions in the tutorial level.

     On the other hand while doing some level design drawings today I have found some of my earlier designs for this projects that I completely forgot about. Here I will put all of the designs I've made for this project. As the time since the end of February was very busy I did not implement a lot then but I did do some of the design drawings and outlines for game structure. Below are the lost and found."

Touch screen input finally solved!

     So I gave this issue another go and tried the solution trick that really should not work...But it did work. What I ended up doing was inversing the velocity of x and y(left and up direction). The only one last bug I still have with touch input is that it saves original player's position and I should probably figure out how to use updated player's position. As well as this the game seems to crash on my iPad but I have no idea why this is happening...

Music

   I have found some royalty free music online that I put into my game-credits are in comments in game.js file. This kind of fits the style I was going for hopefully it will also have a bit of impact on making gameplay better.

Music Credits:

"Ambler" Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0
http://creativecommons.org/licenses/by/3.0/

Project updates-new textures added, issues with touchscreen input..

     I have added some new textures to the project I found online. They had to be also added to json file and a new file had to be saved and some names changed as well. Then I have used one of the texture to create doors as well- firstly I created a rectangle shaped doors with oval edges at the top and modified it until I got the result I wanted after that I've added a knob and I filled the shape with appropriate colours (that would match diamond colours) with low level of alpha channel so the texture can be seen a little to make the doors look better.

Current look&feel of tutorial level.

     For the last couple weeks I have been trying to work on touch input for my Phaser game. Unfortunately it seems to be much more difficult to implement than I though. I have tried coming up with my own maths for pointer creation and using those to control the character-when I finally got it working it was not accurate enough.. So I thought I could try out Phaser's virtual joystick stuff, but unfortunately I couldn't got that working and googling the errors did not help at all.. Lastly I tried following a tutorial and adapting bits of the code I needed to my project. This did not seem no work as well even though I fixed all thrown errors..

Some current updates..

     I haven't had much time for this project recently due to high volume of other projects being due. I have spent most of today trying to implement touch screen features for my game-basically using pointers to first start the game then move the player character with touchscreen input. Since the only way to test it for me is on my iPad I had to commit every change in order to test it and since I am not sure even if it's possible to have debug console there I had to find the errors in the code manually...which is why it has taken me quite a long time to complete such a simple task. For now it's 'playable' kind of, but if I will have time before submission I will work on the accuracy as it is far from being accurate. I may look into implementing swipe function as this did not look too difficult but at the same time I was trying to find my own solution rather than following tutorials on the Internet.


    For next iterations I will start working on better graphics, level manager and adding more levels and puzzles to the game itself, but before that there is one quite important feature I was thinking of implementing which is scaling for different devices.

Quick screen capture of how I'm handling the touch input for player's movement at the moment:

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:

Phaser Game Idea

         Basic assumption for this project is to get it released for iPads and mobile phones. I was trying to come up with a game idea that would have easy game mechanics so that I could implement it predominantly for these devices.

          This post is to give an initial concept of the idea I have so far. There are still elements that are unclear about it and I think I will solve those during implementation process. The basic concept is that a player is a butterfly locked in a box. Depending on the level this box may be locked inside another-bigger box- which will make the level more difficult and longer depending on the game progression. The goal is to escape from the boxes by solving puzzles. For example initially the door will be locked but by completing puzzles by using picked up objects and avoiding enemies(or killing them depending whether the power up was collected) the player will be able to  unlock the door and therefore finish the level. There will be some constraints on the number of objects and power ups that player would be able to pick up.

           I wanted to make the controls for the game as intuitive as possible therefore I plan on using swiping up/down/left/right to move the character around and tapping on the nearby object will cause the player to pick it up.