Created By: Shannon Hanson
Artwork By: Linda Flores
Video By: Shannon Hanson
Game Play Video Links:
Roasting Marshmew
Microwaving Marshmew
Melting Marshmew
Music:
Index and About Page =
Mitchipineko - (Mitchirineko March Chiptune cover) by
lordmarum
Game Page =
Caketown by Matthew Pablo [Cute/Whimsy Video Game Music] [FL Studio 10]
Coded By: Shannon Hanson
Code Used: HTML5, CSS/CSS3, jQuery, jQuery Plugins
jQuery Plugins Used:
Simple Lightweight Responsive jQuery Mobile Menu Plugin,
jQuery UI Touch Punch
Google Fonts: Comfortaa and Karla
Description: The MarshMew Cuteness-Aggression Game is an Emerging Media and Communications Capstone project for the School of Arts, Technology, and Emerging Communication located at the University of Texas at Dallas.
Special Thanks To:
All those who gave me feedback and assistance in the Senior Seminar Class and my friends and family. Thank you for your help and time!
More About Marshmew: A Cuteness-Aggression Game
Kawaii, the Japanese word for cute, is an aesthetic that has captured the hearts of many adults and children alike. For many, cuteness is just so enjoyable. Partly because the brain is affected by it in many interesting ways similar to caffeine and chocolate. This is why addiction to kawaii things and all things considered cute is so common in adults. However, most don't realize it is also common to experience "Cuteness Aggression". The urge to want to bite or squeeze cute things. To illustrate the research found on the subject, an online interactive game experience was created using HTML, HTML5, CSS, CSS3, jQuery, and jQuery plugins.
NARROWING THE FOCUS OF THE PROJECT
The project began by asking what subject not only pulls in my interest, but others as well. What subject would be interesting that others may not be familiar with. After polling the class to see which of my ideas was considered the most interesting, the topic that received the most engagement was ‘cute/kawaii stimuli’.
The Research Phase. A search for cute/kawaii scholarly articles was commenced through online resources such as Eugene McDermitt’s Online Catalog and Google Scholar. A search for blog posts related to cute/kawaii stimuli was also commenced. Topics such as the physiological and psychological effects cute/kawaii stimuli has on people and why it's such a successful economic and marketing tool was included in the search.
Cute/kawaii stimuli touches the nurturing, parental side of our emotions while producing positive feelings. This draws “in the care and concern of the parent and the care from a protector” (Cheok and Fernando 1). An survival mechanism that helps increase the chances of survival during infancy stage when we are at our most vulnerable.
According to Cheok and Fernando in the article ‘Kawaii Cute Interactive Media’, cuteness can be defined as:
“Cuteness includes the feelings and emotions that are caused by experiencing something that is charming, cheerful, happy, funny, or something that is very sweet, innocent, or pure. It can stimulate a feeling of adoration, sympathy, or stimulating the care response.” (Cheok and Fernando 12)
Cuteness-aggression is an unfamiliar affect of cute/kawaii stimuli that affects many people. Although the topic of cuteness-aggression sounds like a discussion on anger management and controlling one's negative emotions, it quickly became apparent that it's quite the opposite. Instead, the theory of cuteness-aggression sheds light on how intense emotions are handled by the brain and the body. Due to the overstimulating affect that cute/kawaii stimuli has on certain people, the body tries release the intense feelings through physical means (Aragón 271). Cuteness-aggression is strongly correlated with individuals that exhibit dimorphous expression of emotions, people who exhibit both positive and negative emotions at the same time (Aragón 259, 271). An attribute that is not based on any particular - but more situational in its context.
Starting the Project Phase. The focus of the project was narrowed and centered around the subject of cuteness-aggression. An interactive web game was proposed that utilizes emerging media to deliver the information in a fun and engaging way while illustrating the topics of the research. Because cute/kawaii stimuli helps increase motor skills and attention focused behavior, having it combined with an educational objective to increase people’s knowledge on the subject can also aid in the retention of the information being displayed (Nittono 1).
DESIGNING AND PRODUCING THE PROJECT
Inspiration was discovered from cute designs that already exist such as Pusheen, Mitchiri Neko, and Cooking Mama. Certain elements and features contained within the inspirational designs, along with research data collected and explored by Cheok and Fernando, were referenced while sketching various versions of the character and gameplay.
Creating the media objects. The variations of the character Marshmew and gameplay were voted on by a variety of individuals. Various people were also asked to vote for their prefered orientation of the cat’s body and select features such as the ears, eyes, tail, and body design. They were also asked to vote on the orientation of gameplay and interaction types and amounts. These votes and suggestions were used to help create the final design of the main character and background for the gameplay page.
An artist, Linda Flores, was hired to produce the digital images of the background and character. The initial draft images and images thereafter were surveyed as well with a variety of people. This helped ensure that adequate progress was being made throughout the different stages of the project. The feedback received aided in producing the final images that can be seen on the site.
Creating the gameplay and the site. Different variations and orientations of the gameplay was sketched and used as references to determine what type of code would be needed to create those interactions. People were asked to vote for the type of gameplay they would find most engaging. Other interaction details such as an image that changes randomly when clicked and playing a popup video when an object is dropped, followed by an informative modal dialog box that contains information about cuteness-aggression theories, related kawaii/cute research, and general information about the subject were noted. Then a search of the code needed for the ideas that received the most votes and noted were conducted. This aided in determining which gameplay design would be the best fit for my skill level; which at the time was limited to basic knowledge of HTML, CSS, and jQuery.
Because custom code would be needed, not just any free hosting site could be used. A site offering access to a c-panel was needed to allow custom HTML, CSS, and Javascript documents to be uploaded and edited. The free hosting site x10hosting.com provided the c-panel needed along with unlimited bandwidth and space to host and grow this project site being created. A site map was then sketched out to help formulate the site’s structure, the c-panel directory, and the navigation menu.
The main layout of the page was coded with HTML, HTML5, CSS, and CSS3. A precoded mobile/desktop navigation menu was added to the site to for a seamless menu transition when viewing the site on mobile devices as well as common computer systems. Afterwards, jquery code was then added to facilitate the user interaction. This included coding the draggable object interaction, the droppable areas for the object to be drop onto to, 10 second popup videos, and 10 second dialog modals. The jQuery plugin TouchPunch was added to ensure the draggable object feature of the site could be used on mobile devices as well as on a common computer systems.
The extra game features a clickable image which includes audio of a meowing cat that was added to facilitate further interaction between the user and the site. Other interactive areas of the site include being able to drag Marshmew around on the index page and press the Marshmew Pez dispenser to reveal the text on the about page.
The 10 second videos within the popups were created in After Effects to illustrate the interaction between Marshmew and the various kitchen appliances featured in the background of the main game area. The videos contain sounds that emphasize the actions as they play out. However due to the browser restraints of Google Chrome, ‘muted audio’ code must be added in order for the video to autoplay during the 10 second duration it is visible for. Bringing to light certain aspects about this project that could be improved upon.
ROOM FOR IMPROVEMENTS
The original idea for gameplay interaction designed was a bit ambitious at first. Especially since the lack of in-depth coding knowledge needed to create it varied from the beginner's level I was at.To compensate for this and not lose the level of engagement sought, a simpler design of the interactions was decided upon. While it provided a better fit for my coding level, it also provided a challenge that required a lot of experimentation.
Some of the code found/written didn't work out as well as expected. Some code didn't even work at all. The coding aspect of the project became a trial and error process while looking for code that would successfully work as needed as well as keep working with the other code present. The failures experienced while coding the interaction became the boundaries that my project was confined to. Other failures existed in the form of the amount of artwork and videos that could be produced in the remaining timeframe. This was mainly due to not solidifying the project’s subject until weeks after the semester began, requiring the need to immediately enter the production stage of the project soon after deciding on the project's subject matter. To work around these failures, the project was constantly improvised into a direction that would fit with the code that was properly working.
Although the project did not exactly turn out how I would have hoped when designing it during the first phase, the way it did turn out makes me feel more than happy about what I was able to achieve. While I originally had planned for more interaction, the project itself is closely aligned with my finalized revised version. Although I am not sure if this project site fits into the educational game realm, I would like it to. I feel this project offers interactive game play with some educational elements that might elevate it to an educational game status if possibly given more depth. As it stands right now, I think it is an excellent interactive web app that engages the user with cute stimuli and interesting facts.
LESSONS LEARNED
Throughout this project, I challenged myself to learn a lot more about jQuery, web coding, and how to create an interactive game experience, and learn about the subject of cuteness-aggression. The knowledge learned about cute/kawaii stimuli, its associated addictiveness, how it's used as a successful marketing tool, and why it's so successful as a global economic powerhouse helped provide a solid base for the project. Knowledge obtained about cuteness-aggression and the related kawaii/cute research that has been conducted in the past few years up to the present helped further shape the project. This knowledge obtained during the research phase helped guide the direction of the project.
The production phase of the project helped deepen the existing basic knowledge I had about coding web interaction. Throughout this phase, how to use and implement jQuery and jQuery plugins along with slightly touching upon JavaScript elements was learned. How to make an interactive educational game to engage users was another skill learned. Engagement that might not only teach users something they didn't know, but also might help them become more interested in the subject of cute/kawaii stimuli and cuteness-aggression.
CONCLUSION
‘Marshmew: A Cuteness-Aggression Game’ is an interactive educational game project in which knowledge about cute/kawaii stimuli and cuteness-aggression is displayed. Creating an interactive way to play and learn for the user to engage with. Bringing together the research and theories of cuteness-aggression and cute/kawaii stimuli with emerging code used for web app technologies.