Dynamic Web Mobile

Project Legend - Update for Week of 04/27 (AOAC Final Post)

I was able to do some user testing in class on Tuesday for Always On Always Connected to mostly to test the first puzzle, which is a hidden objects game. I had three users, two of whom liked games (the third I'm not sure about and didn't remember to ask), but I got some key feedback across the board: 

  • The instructions for the puzzle were not clear
  • One of the items is really hard to find
  • Everyone requested more feedback when they found an object - currently when you tap on it it just disappears. 

I was able to work on the first two but when I looked at my code again it turns out I did have an animation in place for when they tap on it but it doesn't trigger. I have it set to pulse and fade away. I tinkered with this for a while and found that for whatever reason the event handler for tapping on an object never actually triggers the call to add the class that is needed to make the pulse animation, nor does it successfully change the opacity. I was supposed to meet with Shawn for office hours but unfortunately couldn't make it.

The next step for me is to finish polishing the puzzle so I can test again. After that I'll be ready to move onto the next phase, which is setting up for the first location puzzle - the player will be directed to go to a location, which lead to the augmented reality part. 

Project Legend - Update for Week of 04/20 (Proj. Development Studio Final)

After much tweaking and a lot of attempts to camouflage images in a scene, I have completed the hidden objects game (the goal of a hidden objects game is to find a list of items embedded in a scene full of objects). I wanted to keep it easy since this is the tutorial and keeping the player invested is important at this point. I messed a lot with event handlers and had to constantly remind myself that this is prototype code and not code that I will ever ship, which is good because this code is gnarly and hacked together. However, I got a look and feel very close to what I hope to bring to the game so I'm happy. 

So for the final I will be presenting the first third of my tutorial which covers: 

  • Title page
  • Introduction dialogue
  • Instructions for the first puzzle - hidden objects game
  • First puzzle

Overall Experience and Lessons Learned

For something that was intended to be an exercise in learning Swift/iOS, I learned so much about HTML and CSS prototyping! I also thought a lot about the software architecture as I pieced the tutorial together, which will save me a ton of time for when I build it in Swift. However, in focusing on the technical detail, I moved away from thinking about the story of the game. I do have a lot of ideas about it especially given the feedback I got about wanting to play with other people. Something that people also asked about was what the payoff was for the player, so I have to think about that as well.

Here's what I learned from this experience:

  • Prototype code is throwaway code: I knew this academically, but it wasn't until I built the prototype that it really hit home. Prototypes are meant to convey a basic idea, they will never ship. I mentioned this above, but as I was building this code I built it to be very modular. However, this doesn't mean I can't not comment. My puzzle file is incredibly tangled whereas most of my other files are pretty well documented and commented on. I made sure to keep my naming as clear as possible since I was switching between anywhere from two to five files at a given point, not to mention going from code to browser to test the code. 
  • The technology is great, but that shouldn't be the focus - I truly intended to learn iOS over this semester, but the concept I pitched was far more complex than I realized even though it's a tutorial. When I first pitched this idea, I thought that building a game would be a fun way to learn iOS. I didn't bank on loving Project Legend as much as I do, and I realized that I was actually invested in creating this game as well as learning Swift. The amount of moving parts in the tutorial range from different sensors to a dynamic interface, and I came into this not knowing Swift. I picked up the basics and can understand code examples, but I was doing it piecemeal by looking at samples of code that related to the technology I was trying to employ to build the tutorial - SwiftKit, CoreLocation, and Camera. Building my own code was like attempting to do a triathlon after learning to walk. I certainly learned a lot from following tutorials - Ray Wenderlich's Candy Crush clone tutorial for Swift was incredibly informative. 
  • Game design is an entirely different species of design from UX - and I really enjoy it! I came in with no game design experience. While my UX experience came in handy thinking about tap targets and interactions, game design and UX intersect very little. This class along with recommendations from other ITP students are why I'm taking Big Games next semester. This is intended to evolve into a multiplayer game, so I have a lot to learn about game design principles around that.
  • Play test frequently - I really thought I wasn't ready to playtest this second time around, and while I could have built out more of the game to test, I learned quite a lot from testing the core navigation of the game. I was surprised by the results that I got because it was very different than what I expected since I mimicked interactions and layouts that I'd found in other mobile games I'd played. In the end I think I have a much better product. Where I'm at now with the final is a great place to do another round of playtesting since I have the prototype now available on device. 
  • Prepare for the worst, hope for the best - my project plan went sailing out the window the minute I knew I was blocked by my lack of Swift knowledge and pivoted to web dev. In doing so, I lost the opportunity to focus on the story of the game itself and what I wanted to do with it. I cut out a research trip to Merchant's House since I wasn't going to have time to write the story for the first actual quest. I think that'll be my first step  

Moving Forward

I want to play test the game up until this point to test a few things: 

  • Tap target sizes for the hidden object game
  • Font readability
  • Are the transitions too long?

I plan to build the next component of the game using the PhoneGap Maps plugin to direct the player where to go next in their quest. I have a few designs I want to try for the mapping portion. 

In the long term I will have to convert to native development sooner rather than later since the AR portion of the game is probably better done natively than in HTML/CSS. I talked to a few people in Always On Always Connected and it sounds like I could overlay a p5 canvas on the camera to at least try and draw an animation on it. I don't know if it's possible or how performant it would be, but that's what experimenting is for!


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

Project Legend - Update for Week of 04/06

Update from the Week

I admittedly fell into the trap of developing before testing - with my initial wireframes, I had very text heavy dialog that amounted to almost a paragraph on the page. I got feedback on this within the first round of testing done in class, so I wanted to pare down on the dialog. However, I got caught up in trying to build the prototype since I have a lot to do in a very short amount of time. 

For this round of testing though, I decided to test the navigation interactions. I had assumed that the user would tap, but since almost 100% of testers in the previous round swiped I included that interaction as well. I had variants on:

  • Text size - large paragraphs vs short Tweet sized text
  • Navigation cues - none vs an arrow in the corner indicating more text

I tested with a few people on the floor and overwhelmingly got feedback that shorter text and the arrow were far more successful in getting the user to progress through the introduction. So now there will be an arrow in the bottom right corner of the dialog box to show the user that they can move on to the next screen.

I also got the animation working correctly to fade in the background and trigger the dialog box to appear after the background is done loading (thanks to Diego and Katie the resident for the help!). I've started to write the JSON file for the dialog and the next step is to parse through that file to populate the dialog. The next step after finishing the dialog work is to finish working on the jigsaw puzzle game. 

To Do for Next 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

Project Legend - Update for Week of 03/23 and 03/30

Objectives for the Week

  • Revise Project Plan
  • Continue to develop code for pulling up camera when in the right spot
  • Start the jigsaw puzzle

Updates from the Week

So it's April, which means I don't have very much time left. MEEP. That said, here's the revised code deliverable for the next four weeks

  • Tutorial Introduction
  • Jigsaw Puzzle
  • Location

I've eliminated the augmented reality and the hidden object game because realistically the augmented reality is going to take much longer. I put the investigation into pulling up the camera when in the right location on hold so that I can focus on these things for the final. I'm also revising my wireframes based on the feedback that was given during the first user testing. 

The documentation above was prior to class on 03/23, during which I realized that with the timeline left that making a prototype in Swift was just not possible; I was limiting myself to a technology I'm unfamiliar with. So with that, I'm building the tutorial prototype as a PhoneGap application implemented in HTML/CSS. This is much more feasible in the next five weeks and I'm also making this project for Dynamic Web Development: Mobile, so I have plenty of resources to build the tutorial at least to the point of the hidden object game for this class. 

I will still build this with Swift in the future since the concept is fundamentally an iOS game and the technology requirements mean this has to be native.

The tools I'm using are:

  • PhoneGap - simple way to create the prototype for mobile
    • Camera Plugin - I'm only pulling using this to pull up the camera based on the user's location, with PhoneGap it's even harder to find augmented reality plugins
    • Google Maps Plugin - I'm going to render the map in Project Legend to show the user where in Central Park Harlem Meer is. 
  • Javascript - I'm building the UI in plain Javascript but am leveraging a few libraries for some of the complicated parts
    • p5 - drawing the UI of the jigsaw puzzle. Thanks to Jia for talking me through how to render a p5 drawing in a regular HTML file!
    • Hammer - a JS library that enables multi touch recognition in web browsers (I'm not too sure if I will have to use Hammer since I'm doing this on a mobile device but I will have to double check)
  • JSON - I'm storing the dialog of the game as a JSON file so I can load it in dynamically into the scenes rather than pulling from a server

So with that said, the tutorial will include

  • A main menu
  • The opening dialog
  • The jigsaw puzzle
  • The map
  • Pulling up the camera when in the right spot

Where I'm at right now is that the main menu and the transition into the next page after the user picks Play Game is done - I played with some transitions there and still need some help figuring out how to bring up the dialog box from the wireframes and showing the text line by line. 

Here's what the next 5 weeks look like: 

Week of 04/06

  • Continue to work on the jigsaw puzzle logic
  • Figure out the animation for opening the dialog box 
  • Write the JSON file with the dialog until the jigsaw puzzle and load the text into the dialog box
  • Deliverable for next week: Functioning prototype until the jigsaw puzzle

Week of 04/13

  • Finish and test the jigsaw logic
  • Camera and Maps plugin
  • Write the JSON file with the dialog to bridge between the jigsaw puzzle and the map
  • Deliverable for next week: Functioning prototype - including the jigsaw puzzle and the dialog after it 

Week of 04/20

  • If not complete from last week, definitely finish the jigsaw puzzle along with camera and maps!
  • Figure the logic out of the hidden object game
  • Deliverable for next week: functioning prototype from start all the way to opening the camera when in correct spot


For Next Week

  • Continue to work on the jigsaw puzzle logic
  • Figure out the animation for loading 
  • Write the JSON file with the dialog until the jigsaw puzzle
  • Deliverable for next week: Functioning prototype until the jigsaw puzzle