Social Rhythms: Artgame Proposal

With my game project, I want to explore ideas of subculture and social belonging. Many subcultures feature a very distinct aesthetic style that separates them from the mainstream culture. For example, people who participate in goth subculture often dress in dark, Victorian influenced clothing contrasted with a style of pale makeup. Sometimes certain movie or literature genres are associated with a subculture. Oftentimes, music is also a defining attribute of a subculture, such as with the culture surrounding jazz or punk rock. In short, belonging to a subculture influences a person’s entire lifestyle, from the media they choose to consume to the way they express their self to the world.

When someone plays my game I want them to experience the sense of community and belonging that comes with immersing oneself in a subculture and befriending others who are passionate about the same interests. At the same time though, I want to show some of the tension that can arise when you center your core identity around a specific set of things but also like and participate in things that are outside of the subculture.

The existing game that I’m going to adapt is the 2D platformer. However, I’m going to change the example’s coin pickups and scoring system. Instead of coins, there will be sprites that correspond to items associated with a subculture such as pieces of clothing or music albums. In general, the game’s aesthetic will be closely tied into the aesthetic of subculture, and I will probably get most of the assets online and from Unity’s asset store. However, if there is enough time, I’d like to try creating my own with Adobe Illustrator.

The game’s scoring system will have two meters, reputation/popularity and credibility (labeled ‘poser’ in game). When picking up items associated with a subculture that the player chooses at the beginning, their popularity goes up and they make more friends within the subculture. These friends follow the player around as they navigate through the level, but don’t interfere with the gameplay. When picking up items from other subcultures, the player’s credibility goes down, and the ‘friends’ may muse about the player’s authenticity.

The idea for this game came from my experiences in middle and high school, where cliques were mostly formed around specific interests, and people would point to those interests as part of what makes them different and ‘better’ than anyone else. The implication was that if you liked things that those outside of your group were interested in, you were no longer cool. Although that was my thinking in the past, I’ve now realized that people have many rich and varied interests outside of their special interest. I want my game to reflect my feelings from both points in time. During the game, I want players to feel the dilemma of picking up things that they like versus things that they think they should like (and maybe do also like). However, at the end of the game, each of the friends that the player made from their community will come up and talk about a common interest that they share that is outside of their shared subculture.

MIDTERM DOCUMENTATION ADDENDUM

Project Zip file: https://drive.google.com/file/d/1dwZk56L6hQybyI_dO7r9k8SmqBDsiKCM/view?usp=sharing

Overall, I think that the end result of my project adhered to the majority of what I laid out in my proposal. In the end, the focus shifted away from specific subcultures and more towards the general concept of social groups. “Subculture”, as it manifests in my game, is mostly expressed through the type of media the player and their friends like to consume, though the usage of different background art based on which interests are picked in the beginning gestures towards how people can orient their whole lives around a subculture. Although I only created content for two different groups (as opposed to my original intent of 4) I feel that the content I do have is developed in a way that drives home my theme.

When watching people play my game, they exhibited the behavior I expected and wanted them to. At first, they would try to pick up everything in the level. However, once they realized that the friends who follow you around disapprove of items from the “out-group”, they started going out of their way to avoid those items, and only picked up the ones that increased their popularity. This perfectly mirrored the real life behavior that I wanted to model, how peer pressure influences people’s media consumption. This was really exciting to observe in playtests.

On the other hand, I feel like I could have done a better job of making the player aware of their own behavior. After the ending scene, players realize the message of the game, but I think there may be more ways to communicate that there’s nothing wrong with picking up the things you enjoy during the game. This is hinted at by the heart that appears above your head even if your friends disapprove. I wonder what could be less subtle than that, but still isn’t immediately obvious in the first minutes of gameplay. Nevertheless, the people who playtested my game seemed to really enjoy the ending and the message it imparted. For the most part, the criticism they gave was on the smoothness of the controls, like the player getting caught on the side of platforms.

The most challenging part of actually creating the game was probably the code for the friends that follow you around. To get them to follow the player, I use the lerp function, with the target being the player’s transform plus an offset. However, once more friends show up, they all kept bumping into each other constantly because they were all trying to be in the same place. To get past this, I had to make a list of all the friends in the player script. When a new friend spawns, they are added to the larger list, and their follow target is actually the previous friend in the list. After finishing all this logic, I realized that it only worked when moving to the right. Then I had to add in lots of conditionals to make it so that the friends properly move and follow you when the player turns around. Even after all of this, I also had to take into account following you on the Y axis. When the player jumps, it also makes the friends jump, but they often do not manage to get onto the same platform. In response, I wrote a function that puts the friends in the same Y position as the player if they cannot be seen. This still doesn’t quite work properly if the player is standing in a spot where the friends are constantly falling down. I have not figured out how to stop the rubberbanding that the friends do in this scenario.

On a more positive note, I discovered a couple of really cool tools within Unity while creating my game. The first is the ability to alter prefab settings from a C# script. Any prefab that you want to change by using a script should go in a folder called “Resources”. Then you can call the really awesome function Resources.Load() which will allow you to load the prefab as a game object. Any changes that you make to the prefab game object afterwards will apply to the entire prefab, not just that current scene. I used this function in the scene where the player chooses their interests in order to apply the correct tag, friend prefab instance, and audio to the player prefab.

To give some background for the other feature that I discovered, when I made a text-based Unity game in the past, all of the UI elements looked perfectly fine in the editor, but when I built and ran the game, all of the text was tiny. This happened again when I made Social Rhythms. Then, I noticed something I had never seen before while I was trying to debug. If you click on the canvas in the inspector, there is a component called Canvas Scaler (Script) with an option called UI scale mode. By default, this is set to Constant Pixel Size. However, it can be changed to Scale By Screen Size, which fixed my aforementioned problem. Discovering this feature felt absolutely revolutionary.

 

Midterm User Stories and Competitive Analysis

When I researched various examples of address book apps, I noticed that they fell into two broad categories based on the target audience. One group of apps focused on professional usage. These apps tend to list the contact’s occupation along with their contact information. One app, called FullContact also allows you to see when and what your last correspondence with the person was. FullContact and another app called CircleBack also allow you to add a contact from a photo of a business card. By default, these apps tend to sort contacts alphabetically by name and occasionally by most recently contacted.

The other general group of apps is more focused on personal connections. The iPhone address book is an example of this. Typical features of this app type include setting ‘favorite’ contacts, which are always at the top of the list regardless of filtering. The iPhone app also allows you to set a relationship to your contact such as “Father” or “Sister”. The app Ready Contacts also allows you to associate calendar events with contacts like birthdays and set shortcuts for emails, phone calls, and texts. These more personal apps tend to sort contacts by most recently contacted and most frequently contacted.

Many of the personal address book apps are very focused on visuals, with the contact’s picture taking up most of the space. However, in a review of three professional address book apps, which were mostly very clean and text based, the top rated one was boosted in rank because it featured a small photo of the contact to the left of their information. Therefore, I think that having photos in the address book is an absolute requirement no matter what type of app I pursue.

For my app, I want to do a professional app, but on a closer, more personal scale. My address book would be used by a company internally. The primary use case would be for communicating with members of your team. However, it is also important to be able to contact people like the big boss or HR personnel.

User Stories-

  • As a user, when I open the app, I see a list of contacts with their photo, first and last name, address, phone number, email, and department/position.
  • As a user, when I type a name into the search box, contacts that do not match my query disappear
  • As a user, when I click the filter button, a list of filters appears (A-Z, Z-A, Country, Department)
  • As a user, when I click a filter from the drop down menu, the list of contacts becomes sorted by my criteria
  • As a user, when I click the email button, a form appears where I can draft and send an email

Analysis of an Artgame: All Our Asias (Krom)

All Our Asias, which just came out on February 7th, is an artgame created as a solo project by designer Sean Han Tani. The game is about a well off Japanese American man named Yuito, whose father abandoned him and his mother when he was born. Although Yuito never knew the father, he reaches out to Yuito on his deathbed, expressing a desire to meet his son before he passes. By the time Yuito reaches the hospital, the father is still alive but unable to interact with anyone. The doctor then allows Yuito to enter his father’s “Memory World” and learn something of what the father’s life was like. The player is then given license to control Yuito’s navigation pod and explore the visualization of the father’s mind in search of memories.

A lot of what makes All Our Asias an artgame is the creator’s intent and framing. At the beginning of the game, the player meets a character called The Storyteller who explains his intentions for telling this story. Although this technically takes place within the game, it feels like it’s the voice of Sean Han Tani telling us his personal motivations for creating the game. This shifts the play context in a way, moving away from someone sitting in their room and blindly deciding to play a new game towards something more akin to a gallery experience where the viewer is asked to consider a central theme or question.

As hinted at by the title, All Our Asias’ stated goal is to explore notions of Asian American identities. In the intro sequence, The Storyteller points out that Asia has billions of people and hundreds of unique cultures, so is the commonality of being ‘Asian’ really significant enough to bring these people together?

The game’s contrasting art styles help to communicate how the designer feels about that question. While in the real world hospital, the game features a hand-drawn, but realistic, art style. The father’s memory world, on the other hand, is rendered in an extremely low-fi style, evocative of early Playstation graphics. It is both beautiful and abstract. Interestingly, when Yuito is speaking, his portrait is still shown in the hand-drawn style, despite the dreamy landscapes in the background. Furthermore, the memory world is encapsulated by a UI that represents the machine allowing Yuito access to his father’s mind. I believe that all of this is representative of the alienation felt between Yuito and his father. Some of that alienation is a result of the father not having been present in Yuito’s life, but there is also some tension between Yuito’s identity as a Japanese American and the father’s as an immigrant from Japan. The first area in the memory world is some sort of transit station in Japan. When you go to speak to people, everything they say is rendered in Japanese kanji; neither Yuito nor most players can understand what is being said. The effect is a sense of alienation and of being overwhelmed. The player is then forced to consider how something like language factors into identity.

In another memory, Yuito is walking down a highway. If you talk to other characters along the highway, they will make racist remarks about how ‘your people’ are going to kill someone with their bad driving. One women even goes so far as to use the racial slur ‘chink’ which Yuito responds to by exclaiming that he isn’t even Chinese. This is a moment where it is clear that yes, Asian Americans are bonded together by something, even if that something is being the target of racist attacks because of how they look. This scene, where a Japanese man is targeted with a slur against Chinese people by someone who thinks that all Asians look the same reminded me of the story of Vincent Chin. He was a Chinese American man who was beat to death as a hate crime due to anti-Japanese sentiment, an event that initiated the start of an Asian American sociopolitical movement.

In fact, in one of the final arcs, Yuito finds himself amongst one such movement. He meets a friend of his father’s, named General, who asks for a favor in exchange for giving Yuito information about his father. This favor is to pass legislation to help struggling restaurants owned by Asian immigrants. The gameplay that follows feels like what it would be like to be part of a grassroots movement. The player discusses with the Chinatown mayor to get ideas for policies that would help these restaurants, then goes to speak with some restaurant owners who would be affected by the policy to gain their support and get a feel for what their situation is really like. One restaurant owner who Yuito really connects with is a Korean woman, and Yuito later admits to General that he felt more compelled to help her because they are both Asian. General admonishes Yuito, saying that while it is good that their similar appearance helped inspire him, it is overall a ‘flimsy’ reason. Shouldn’t we help people in need regardless of what they look like, General questions. This is left for the player to ponder.

All together, I feel that everything I have discussed makes All Our Asias worthy of being called an Artgame. The creator’s intention to express a certain theme exists, and he uses methods such as the game’s art style and narrative, as well as references to historical and political events to communicate ideas about that theme.

Week 3 Button Component HW

I started out with mostly copying what we did in class on Wednesday, creating components for buttons and the display box. At this point, the only button prop was label. I added in the components to the render function in app.js and wrote the css for everything. Then I worked on adding the interactivity. My first step was to create the state in the constructor. Then I wrote the onclick function in app.js that changes the state to the clicked button’s label. After that, I had to go back into button.js and add in the onclick function as a property.

The hardest part was highlighting only the selected button. The way I solved it uses getElementsByClass function and a for loop and looks very similar to how it would be done in native javascript, so I’m not sure if it is a correct solution.

(Krom) Analysis of A Game: Dream Daddy

Dream Daddy: A Dad Dating Simulator (DDADDS) is a visual novel and dating simulator video game released in July 2017. In the game, the player is a single father to a girl about to graduate from high school. The family moves to a new neighborhood which is home to several other single dads. The objective of the game is to pursue a romance with one of the other dads while also being a supportive father to your child.

As a dating simulator, the game is a representation of the experience of dating. To that end, the main procedure of the game is to go on dates with your romantic interest. At some point during each day in the game, the player is given the option to choose which of the seven potential partners they would like to go on a date with. One important rule in DDADDS is that the player may go on up to three dates with any given dad. If the player goes on their third date with the same dad, that dad is locked in as their romantic interest for that playthrough. The game makes this discernable to the player in two ways. First of all, on the screen where the player chooses who to go on a date with, each character has three hearts next to their picture. The hearts begin grayed out, and after the player goes on a date with that character, the heart is then shown in red. Secondly, when a player selects the option to go on a third date, the game displays a prompt asking the player “Are you sure this is your Dream Daddy?” with the options “Sure” and “I can’t commit”. The player can then make an informed decision on whether or not to make that choice, without locking themselves into a specific love interest by accident without realizing. However, going on dates does not always feel meaningful because they are not well integrated. The player can go on up to two dates with every single romantic option, but who you date and how many times has little to no impact on your relationship with the other characters.

As a visual novel, the gameplay can feel a bit limited. For most of the game, the player is reading dialogue boxes and clicking the mouse or keyboard to progress the text. At some points, the player is given a choice of options to respond to the situation or dialogue with. Some of these choices affect the outcome of the game, but not all of the choices can be considered meaningful. For example, at the beginning of the game, your daughter is trying to wake you up and you can either play dead, mumble ‘5 more minutes’, or just get up. No matter which option you choose, the player character will eventually get out of bed. On the other hand, some choices do have a discernible impact. While on a date, if you say something that a date finds favorable, an animation with flowing hearts will play around them, but if you say something they really dislike, dark coal-like dots will spray out. At the end of each date, the player is shown a letter grade for how well the date went, integrating the choices made throughout the date into the final result. Although the game has programmed rules to calculate the grade based on the choices made, the exact weight of each choice is not known to the player. Exactly how poorly or how well the player must do to get a bad or happy ending with their chosen love interest is also unknown. In my playthrough, I received S, B, and A grades on my dates, so it seemed reasonable that I received the happy ending.

Although the gameplay of Dream Daddy isn’t always great at creating meaning, the game’s context is extremely important when evaluating it as a meaningful experience. The first aspect to consider is the cultural context in which the game was released. Recently, the issue of diverse representation in media has started being taken much more seriously, by both creators and consumers. DDADDS is impressive in the diversity that it showcases. Not only is there the obvious factor that all of the characters are gay or bi, but the characters also come from several different ethnicities and feature various body types. Additionally, because of the personal nature of representation, the profile of the player is also an important context. Seeing yourself represented within the game can be very meaningful. To further this, being able to customize your character in a way that reflects you enables the play to be more expressive.

Week 2 Assignment- Article Listing

https://github.com/themaskedtaquito/Reactive-user-interfaces/tree/master/nytimes

For this assignment, I did my best to recreate the article listing in the NYT screenshot using React.js. I created separate components for the date, article title, preview text, author, and photograph. Additionally, the title, preview, and author are encapsulated in a container to form a column.

Response to As We May Think

Much of what Vannevar Bush writes in “As We May Think” can be seen in how the internet works today. His description of linking multiple articles together and creating a system of ‘trails’ is exactly how embedded hyperlinks work. Bush says that “wholly new forms of encyclopedias will appear” and unsurprisingly, the most commonly used and complex network of these links is Wikipedia. Such trails of information exist for all kinds of topics, from a cataloguing of the entire Star Wars universe to information about gardening. One difference between wikis today and the memex system Bush describes is that the memex is more personal; a single person creates and maintains it, and others are free to use and reference it. However, many wikis are huge collaborative projects, seen as a single definitive guide, with the public being able to freely edit them.

Unfortunately, not everything that Bush wrote has become prevalent in the modern internet. Most notably, the idea of being able to annotate webpages does exist but hasn’t really been developed far. Some browser extensions allow users to do this, but they are not commonly used, and there’s no standardization. In order to become widely adopted, the function would probably have to come prebuilt into the browser, though there likely isn’t enough demand for that.

Fibonacci Puzzle: Final Project Documentation

The idea behind my final project was to create a puzzle that is similar to a jigsaw puzzle, but unique in two ways: 1. The pieces would have unique shapes rather than being similar and interlocking and 2. When all the pieces are in place, the puzzle would light up. For the first requirement, I looked at a lot of different designs and found myself rather inspired by the complex geometric patterns commonly found in stained glass designs.

Many of these geometric patterns are heavily based in mathematic principles. For my puzzle’s design, I chose a simple, well-known, and compelling concept in math, the Fibonacci sequence. In nature, many spirals follow the principles of the Fibonacci sequence, including seashells. I tried sketching out a simple version of two mirrored Fibonacci spirals in my notebook, but it was not very precise. Luckily, because the design is based in math, I was able to draw it very accurately using the ruler and measurements in Illustrator.

With the pattern I created in Illustrator, I used the laser cutter to produce the final puzzle pieces. I also used. As part of the surprise, the box containing the pieces doesn’t actually show what the final puzzle should look like. Much of the challenge is figuring out what the final output should look like based on the hints given. If the user knows that the numbers engraved on all sides of the box are the fibonacci sequence, and then connects the dots between the fibonacci sequence, the shape of the pieces, and the well known spiral,  they should be able to easily complete the puzzle.

 

I decided that the innermost pieces of the each spiral would be the ones that I replaced with LEDs for the second aspect of my design. Using the techniques that we learned in class, I put together a mold for the smallest quarter circle piece. After mixing and pouring the material together, I placed an LED inside the mold. I used the chemicals that require a 1:1 mixture and finish in white so that the LED’s light can still be visible from inside.

After the mold and pieces were finished, I started putting together the circuit that would go under the puzzle pieces. I used conductive tape to build the circuit, and made sure that it crossed through every single piece in the puzzle so that there would be no way the light turns on if the puzzle is incomplete.

Unfortunately, I didn’t realize the flaw in my design until it was too late to make a big change. Because the pieces are not interlocking, it can be really difficult for the connection between two pieces to fit snugly. I attempted to add solder to all the places where pieces connect to one another in the hope that it would give more leeway to how the pieces fit together while still allowing for the circuit to be completed, but this didn’t work very well. The most pieces I managed to connect together while having the final puzzle piece light up was about 7.

When marketing this toy as a product, my target audience would be both math enthusiasts and teachers. People who are already well versed in math will be very likely to be able to figure out the general shape of the puzzle based on the hints given before getting too frustrated, but it also shouldn’t be too easy. It is also designed for math teachers who want to teach their students more about math in a way that is fun and engaging. I think it would be really fun to create an entire series based on math puzzles. It would start with this relatively simple Fibonacci puzzle, and then move on to more complex patterns. For example, fractals are based in math and are extremely beautiful, forming patterns often seen in trees.

 

Toy Design Experience with Molding

In class, we learned how to make molds from existing figures, like the 3D printed Bulbasaur. With the mold, we made several different copies of the Bulbasaur. We also made copies using an LED mold and put a real LED inside as it cured, and the LED still worked with the light visible from the inside! I thought that this was the coolest thing ever and decided that I wanted to incorporate this technique into my final project.

The mold I made is of a little quarter circle in my puzzle. I created the shape by glueing together two laser cut pieces of the same shape, and also adding some of the box material to increase the thickness.

After adding the material for the mold into the box, I left it alone for about 20 hours or so and then came back. The first piece I made with the mold wasn’t very successful. I added too much liquid to the mold, so it overflowed a little and bubbled up. Additionally, the green LED wasn’t very strong and could barely be seen through the material.

I was much more careful with the next round of pieces I made. This time, I made sure to use a very clean, new cup to mix the molding material in, and I measured the amount of each chemical more carefully so that it was a 1:1 ratio. Because my mold is quite small, I only needed around 200ml of each one. I also tested the LED beforehand to make sure that it was bright enough to be seen through the material. I made two pieces this way to use in my puzzle.

A (Koala) Toy For Duchamp

DuchampPoster-1

As I mentioned in my poster, my inspiration for creating this toy came from my favorite snack here at NYUSH, chocolate filled koala biscuits. I eat them all the time, for snacks, when I skipped breakfast, when I’m stressed out. Ever since I took Paper Arts, I’ve wanted to create some kind of artwork featuring Koala boxes.

As I was doing my research on Duchamp, I realized that this project was a perfect opportunity. On the subject of Duchamp’s readymades, Marcus Moore said “These art forms are examples of ‘aesthetics of homelessness’ This is brought about when an artist is displaced from home and in exile.” I related to this feeling a lot when I first came to Shanghai and again when I studied away in New York. While in New York, koalas weren’t very readily available, so I ended up ordering a bunch of them online to get back the familiarity and comfort.

My ‘found object’ was the packaging used for the koala snacks, something that would normally be thrown away. I decided to make a toy akin to a teddy bear using various pieces of the box, cut up and rearranged. In total, I used about four boxes to make the body, arms, and legs. I assembled some pieces using hot glue and others with tape because I mostly wanted the connections to be transparent.