Always On Always Connected

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

Final Project Ideas

My project ideas are the same as my midterm ideas; both of them are pretty sizeable projects so either one would work well. 

The two options I'm considering for the final are: 

  • Project Legend - my final for Project Development Studio and Dynamic Web Development for Mobile. 
  • Six Degrees of Marvel - my midterm

Project Legend is a geo location game that puts a spin on urban legends - it's meant to be an iOS game but I'm prototyping the tutorial as a PhoneGap app to show the general flow of the game. It utilizes the following technologies

  • JavaScript and p5 - I'm staying as far away from JQuery as possible. 
  • Camera and Maps plugin - this is a bit of stretch as I still have to build my jigsaw puzzle in p5 and handle the touch events, but I want to at least show what happens when the user gets to the location I need them to go to. 

Six Degrees of Marvel is a visualization app, though I'm thinking about spinning it into a game so that I have a good reason to make it a mobile app/publish it eventually. I still have a ton of work to do on it, but I'm leaning more towards Project Legend because of the complexity of the work. 

And Now The Temp! Followup Documentation from the SensorTag work

I continued with the work I started using the SensorTag from the previous week since I was so close - it turns out that my bug was a mistyped function name, so my code started work pretty soon after that. 

I was working with the IR sensor, which stores information as unsigned integers, so I adapted the code from the notes to store the incoming notifications to a Uint8Array. I used the calculations from the SensorTag guide to get Celsius, which I then converted to Fahrenheit.

I wanted to have a little fun with the assignment, so I decided to show the current temperature according to the SensorTag. I drew the SensorTag in Illustrator: if it's too hot, the SensorTag sweats; too cold and it gets grumpy and has to wear an NYU branded scarf.

I felt the need to draw the SensorTag as a cute cartoon. 

I felt the need to draw the SensorTag as a cute cartoon. 

Here's what the final UI looked like - you can't tell from the screenshot, but I used a animation importing Justin Aguilar's CSS3 animation library to make the SensorTag float.

Screenshot from iPhone

Screenshot from iPhone