Sunday, March 31, 2013

[Philippe] Done! Presenting: Constellations

Hello everyone! First of all, I apologize for not providing continuous updates. I needed to finish the Game Jam before tomorrow (Sunday) so it was a bit of a hustle getting everything done. However, I can finally say that I have finished my game, and I am quite proud of the result! Here are some screenshots (with minimal spoilers!)





Here are the features included in the finished product:
  1. 5 Puzzles, each featuring multiple solutions and detailed feedback on incorrect solutions
  2. 3 unlockable Challenges, some with solutions, and some without
  3. Detailed instructions on how to play the game
  4. Support for iPad and iPod Touch (Theoretically)
  5. Includes the following topics: Connected Graphs, Vertex Degrees, Cycles, and Bipartite Graph
My idea behind the puzzles was to give the player the opportunity to explore the ideas of graph theory through touch-based challenges. Most of the puzzles feature multiple valid solutions, and players are encouraged to try and find different ways of drawing graphs. In doing so, I hope that the player will notice patterns that lead them towards general conclusions and insights. The unlockable challenges were my attempt at encouraging the player to seek mathematical certainty. Since only some of the challenges are unsolvable, the players must convince themselves that a challenge has no solution; the game will not tell them. This forces the player to find reasons to support their claims, which are the makings of a Graph Theory proof.

Some challenges I faced along the way:
  • Writing algorithms to check solutions was especially hard. Since I wanted to allow for multiple solutions, I couldn't just compare answers to stock solutions. Instead, I wrote algorithms to test whether graphs were connected or bipartite, and then used these functions to provide feedback in the game. The bipartite algorithm in particular was challenging, and I had to go through multiple iterations before I was confident that my it worked the way I wanted it to.
  • I had limited space in the game to explain topics and puzzles clearly, and it was especially challenging choosing the right words to make my message easy to understand. I had my family and friends playtest the game and give feedback, which I then used to improve upon my explanations.
  • Although I coded methodically, I did not comment sufficiently until the very end, which made my code very convoluted. Going forward, I want to make commenting second nature, so that I don't end up with a jumbled mess in the later stages.
My goal for this Jam was to make a complete, self-sufficient game. In my previous creations I always focused heavily on the mechanics, and had to explain the controls and goals in person. Constellations features a detailed explanation of the controls and puzzles while also boasting a fully-functional user interface. While I had to cut back on many of my original goals, the final product feels like a real, publishable game (even though it only lasts around 30 min!).

Here is the link for the game! I made it using codeheart.js, so to play the game simply open the play.html file in any web browser.
https://www.dropbox.com/s/1wj2ixmhh9h7xns/Constellations.zip

Good luck to the rest of you; I'm looking forward to trying everyone's games!

--Philippe Demontigny

3 comments:

  1. That is beautiful and clever!

    I put it at

    http://graphics.williams.edu/hosted/constellations/

    You can bookmark it on iOS to play full screen on a tablet. I upgraded play.html to the latest version before uploading as well.

    I had a hard time with the controls...when I dragged up from the bottom of the screen, about half the time, it placed another star. I then couldn't delete that extra star, and hard to restart! I suggest just keeping the controls on screen.

    If you make the selection region for a star be the entire star, then there is no need to have two tools--simply drawing a line between stars is distinct from drawing a new star. That allows you to reduce the UI to submit, reload, and back, at which point you can leave the controls on screen for simplicity.

    ReplyDelete
  2. I just played a bunch more. This game is great! I enjoyed playing it once I got the hang of the controls. It really succeeds as graph theory made fun.

    A little more feedback on the UI will really make the gameplay shine by eliminating the frustration for the first-time player. If you want to polish, some things that I'd do:

    * While drawing a line, SHOW the line being drawn
    * Tell the user that lines can be removed by drawing them again
    * When someone completes a puzzle, take them back to the puzzle screen (you can use setTimeout to delay this if you don't want to manually time it)
    * Use a different background and star color on the puzzle screen--it isn't obvious that you've gone back if your constellation looked similar.
    * Needs soothing music :)
    * If you want to keep the two-tool interaction mode, then:
    - show a visual indicator of the active tool on screen
    - make it easier to switch--don't require me to swipe up
    - make a bigger dead zone on the bottom of the screen, so that I don't accidentally place stars while trying to access the controls
    - if I tap on a star again, delete it instead of drawing a second one that overlaps it

    ReplyDelete
    Replies
    1. The instructions say that stars can be moved and deleted, which is a good design...so you should probably ignore large pieces of my advice and debug either why I'm having trouble (playtest) or why the code doesn't do that (if it isn't user error).

      Maybe the instructions should be accessible from inside the game as well, or summarized under the tools, e.g.: "STAR: tap to draw or delete, drag to move" under the star.

      Delete