Project Legend - Update for Week of 04/13

To Do from Last Week

  • Finish writing the JSON file
  • Populate text in dialog box with contents of the JSON file
  • Tweak the CSS as needed for the font in the dialog box
  • Add the arrow

Updates from the Week

Was it really only a week ago that I was working on a JSON file? I scrapped that idea because I was running into CORS problems when I went to parse a file. I opted to go the quick and dirty route and just create an array of text to populate the dialog box. It was much faster and I once again learned the rule about prototypes: it's disposable code and not a final product. But it was a good attempt as I learned about writing my own JSON file; up until now I've always read in JSON.

I accomplished everything else in the to-dos, so now the game's introductory dialog works! In the last week of work before the final demo in Project Development Studio, I will finish the first puzzle. Initially the plan was to create a jigsaw puzzle for the player to assemble in order to reveal Harlem Meer as their first destination. Then I sat and thought about it as I was in the middle of writing the puzzle in p5.js. What triggered it was looking at the placeholder image I have as the background of the puzzle, which is a scene of Harlem Meer. It didn't make sense to have such a busy screen when the focus was on the puzzle, so I thought about what would be a good backdrop. You do puzzles on a table, so why not have a dark wooden background?

Except the story begins with you meeting the Narrator out in the street. At what point do you have access to a table? You're not going anywhere with this guy, he's a crazy person who bumped into you and wants to show you the truth about urban legends! So narratively having the jigsaw puzzle didn't make sense. Given that I have a week between now and the PDS presentation, I am swapping out the jigsaw puzzle and replacing it with a mini hidden object game. Hidden object games typically are puzzles where the user is presented with a scene that is full of different objects. Some objects make sense to the story, others are just arbitrary. The core mechanic is to quickly go through the large amounts of items to find the ones you want. The trick is to make them nearly invisible so that the user doesn't process the item immediately. It works with the narrative in that you can walk with the stranger somewhere close to where he met you. Development wise it's also much simpler (knock on wood). Here's how I picture it:

  • Set a background image that has objects already in it
  • Draw a p5 canvas or use CSS transform functions to lay out the objects the user needs to find on top of the image
  • Animate the objects that are on the list and make them disappear (again, CSS)
  • When the user finds the clue to the location do a special animation or something to reveal the location; if that is the last item the user finds, transition to the dialog. If it is not, the user has to continue to the end and then show the item again before showing the dialogue (alternative: don't show it again and reference it in just the dialogue - testing required!)
  • Dialog to transition to maps piece. 

It's going to be interesting to get this done in a week, but since I've gotten the hang of CSS3 animations and callback functions in JavaScript this should go a bit faster. 

For Next Week

  • Finish the hidden object game
  • Test on iOS and Android
  • Presentation for Project Development Studio