BoomChaCha! – A physical musical decentralized RPG game

Link to updated portfolio page:

BoomChaCha!

屏幕快照 2015-12-07 上午2.16.17

BoomChaCha!

Team members: Wangshu Sun, FY(Fengyuan Zhu), Carrie(Yue Zhang).

My Main role: game programming, music composition and audio effects

Other work involved: play testing, video clipping, visual design and animation timing, staff design for laser cutting, soldering.

 

Latest Trailer:

 

Concept

BoomChaCha! is a physical musical role-playing game where three players will fight together against monsters.

Intention

When we were asked to generate some idea for our final, I just couldn’t stop thinking about music and game together. One day I talked to a lot of my classmates also including FY. I was chatting with him thinking about making music with some gesture made by physical tools – like waving the wand in your hand. He thought this was really interesting and we could even make a game into it, anyway there will sure be a lot of fun. Then Carrie was also thinking about some idea about music so we joined together.

Process

——————-  Stage 1: Making music with sword and wand  —————————

At first we was trying to make music by waving the sword and this was the first prototype we made.

https://vimeo.com/144669908

But at the playing test on class, most people didn’t find that make sense. They were also intended to fight each other, unless being told to follow some music, or being told to regard the sword as a wand.

https://vimeo.com/145344112

Fight each other

https://vimeo.com/145330574

Igoe following some pattern

https://vimeo.com/145344228

Fake the sword to be a wand

 

———— Stage 2: Inspired by Patapon, but a lot more ——————

At that time we really needed a way to combine battle and music together. Or at least just involve a little element of rhythm. One day it reminded me a game I ever played on PSP called Patapon. It was a great RPG game that you make normal orders like forward, attack, defend, jump… but by making different drum patterns! It really make sense with drum and battle signal together because that’s what drum meant to be. And that game felt really great because you can get bonus by keeping the pace throughout one gameplay, and that just felt like you are in a bar dancing to the music, and music and dance can simply make you happy.

Patapon 3 (square:Pata / circle:Pon / cross:Don / triangle:Chaka)

The game was so amazing that we all agreed on this form of great combination of music and RPG game. I was really curious about whether we can make this into 3/4 beats, creating a dance-like feeling. Carrie was thinking about we have three people in our group, making it perfect for 3/4 beat, and also three different characters. I was inside a mage and FY a warrior, and Carrie chose to be a defender. We could also start making different orders by starting with different person and that sounded really reasonable.

Carrie then created this wonderful design. To be honest, at first I thought this was too creepy. But by changing the color a little bit, everyone in my class was so fond of that like a magic and I had to admit that Carrie is a genius.

Screen-Shot-2015-11-17-at-9.37.36-PM1-1024x764

And I also found that the player’s performance was highly relevant to how good the visual guide is designed. Blinking border was not that good as falling note since people need some time to react to a newly appeared border. When I made the blinking border appear a little earlier then that worked better.

屏幕快照 2015-12-10 上午2.39.53 leftward notes with a judging line

屏幕快照 2015-12-10 上午2.41.03

falling note with judging line and sound together

屏幕快照 2015-12-10 上午2.41.47

blinking border with text

——————- Stage 3: Keep going  ——————–

Software, hardware, communications, visual design, sound production, fabrication.

They are all a big deal when you are actually doing it.

— Game using processing –

屏幕快照 2015-12-10 上午2.36.54

I was responsible for the whole software part. Learning object oriented stuff was painful but FY was a great help, and at last the OO turned out to be really helpful.

屏幕快照 2015-11-25 下午10.13.15

Couldn’t forget the night when I finished all image slicing and made them appear in my sketch. Carrie is truly a genius and she did what we suggested – remaining her style, but at the same time express some sort of funny and happy mood.

—- Composing music using GarageBand

屏幕快照 2015-12-10 上午2.48.10

I also composed the music for the game using GarageBand. At first some music was judged to be too artistic and sad, then the second was fun but like journalism TV shows…

Thankfully, the last turned out to be really good. And everybody loved it. It was so simple and easy to remember that some boys passed by began to hymn this song. I was so proud of myself.

At first there was nothing but main melodies. I then added some drumbeat and the sound of triangle to indicate different positions of beats, making it easier for players to follow.

—- Design for laser cutting

屏幕快照 2015-12-10 上午2.52.55

I even tried designing the wand. That involved a lot of measurement. But luckily this second version worked just great. Laser cutter was so precise and powerful. And many thanks to FY’s blue LEDs!

IMG_4146

IMG_20151208_202604

IMG_20151208_203051

Next Steps:

Recently there was a huge cracking sound happening inside processing. I couldn’t figure out how it happened exactly but there should be some problem inside the Sound Library.

屏幕快照 2015-12-09 下午8.31.32

It just happened when playing multiple files. It can be fixed by removing the sound feedback but that’s a huge loss in user experience. We really need to figure that out, or just use another sound library instead.

Apart from sound part, the visual guidance are also important to be designed and implemented better.

Also we needed a better tutorial part, or different stages, to make sure that people enter the fight after they are fully prepared, and before that, just have fun through the tutorial.

Updates ITP Winter Show 2015:

Used Minim library to solve the problem!

Added visual guidance!

Added interactive tutorials!

Detailed introduction for ITP Winter Show 2015:

BoomChaCha! is a physical musical role-playing game where three players will fight together against monsters.

Basically there is a warrior attacking the monster, a defender defending all of the three, and a mage healing all of the three. The three characters share the same life so they will get hurt or get healed for the same amount of health.

Unlike most of the RPG games, BoomChaCha! is musical. This means it is always better to follow the rhythm while playing. There’s always a “Boom Cha Cha, boom cha cha” six-beat pattern repeating itself in the 6/8 background music, which creates a feeling of dancing party rather than a dangerous fight. During the first three “Boom Cha Cha”, you can do attacking, defending or healing by hitting the first “Boom” with the physical sword, shield or wand, and the effects will be executed in the next three “boom cha cha”. That is to say, if the warrior hits the first “Boom” beat, an attack will be executed in the next “boom cha cha”; if the defender/mage hits the first “Boom” beat, the next “boom” it will start defending/healing all the characters.

Since our aim is to invite people to play together, acting cooperatively should get better results than doing alone, so we designed an “assistance” logic with the “Cha Cha” beats. That is to day, if the warrior hits the “Boom” followed by the other two hitting the next two “Cha”, “Cha” beats, you will get a huge attack-power bonus and can kill the monster fast without getting too much damage. The same applies to the mage and the defender.The more assists, the better effects the players will get. Better results are also granted by the better timings of you three hitting the first three “Boom Cha Cha” in the six-beat patterns in the music.

At the beginning you will be in a practice mode to learn how to play. When you think your are ready, you can enter the fighting mode and the monster will start attacking you. Try to kill him fast and prepare a defend before his attack, and during the gap after you kill a monster, it’s a good time for you to get healed.

In all, if you want to survive and thrive, follow the beats and dancing together!


Updates (20160520):

New Laser Cutting for wand (moved batteries to bottom):

Top three for Best Game Design in Student Game Competition!

Attended CHI 2016!

 

Final Result

 

Reference:

FY’s blogpost :http://itpzhufy.com/2015/11/10/the-concert-of-sword-and-magic/

A music box that can help you improvise with random melodies

We designed this music box that can give you inspiration by generating random melodies, and also allow you to play as you wish. In this video, I combined the random melodies with improvised melodies to make a whole music piece.

My role:

  • acquired data from a soft pot and a force sensor, and send then via serial communication with Arduino
  • developed a program that can map the input to melodies using p5.js, a touch event from force sensor is mapped to random tones, and a touch event from soft pot is mapped to a tone with certain frequency according to where you touch it (like a piano).
  • made a visualization of the frequencies and intensity of each tone using p5.js

 

Bike Alarm – a simple application of LED

Stay away guy! I didn’t want my bike be stolen anymore, so I made this alarm circuit.

IMG_1269

Just wind a thin conductive string around the wheels. If the bike is moved, this string will break up and the alarm light will turn on and send out a message that your bike is moved.

IMG_1270

Below is a video about how it works.

 

The logic behind is a simple Not logic, thus when the string is good, the electric current is drawn to the ground so that no current flows into the LED; otherwise when it breaks, the LED turns on.

FullSizeRender

Some progress:

IMG_1267

It was fun cutting paper into a shape. Haven’t done it since long ago.

 

PComp Week 01: Readings about Interaction

References

  1. Crawford, The Art of Interactive Design, chapters 1 and 2
  2. Bret Victor, A Brief Rant on the Future of Interaction Design

1. How would you define physical interaction?

My definition of physical interaction: interaction is the communication between two processors (either human or computer) that all have input and output channels, and at least one of the channel should be physical. Like in this picture:

FullSizeRender

2. What makes for good physical interaction?

A good interactivity should, by definition, not miss any of the links and processing ability in this picture. If there is a bad listener/speaker, either human or computer, then at least one of the links will break and their conversation won’t continue. If one of them can’t process or speak or listen at all, they cannot even setup a conversation, or at most, like a man reading a book, there can only be one-way communication. Besides, the interaction should be physical, meaning that activities like people watching and listening, are not physical at all.

And that’s not enough a good physical interactivity. A good interactivity between two processors should be efficient, therefore they should have proper level of listening and speaking that match each other, and both of them should be efficient thinker. Say a person is typing on a computer like what I’m doing now, a good interactivity is based on that I have good eyes and an efficient typing skills, while the computer has a good keyboard and a good screen, and we can well understand each other and both perform our work efficiently.

3.  Are there works from others that you would say are good examples of digital technology that are not interactive?

Looking at the picture above, it is easy to find some digital things that are not interactive.

  • Digital things lack of input channel: traffic light and pedestrians, screen and user.
  • Digital things lack of output channel: keyboard and user, microphone and user.
  • Digital things lack of processor (straight-forward processing): air-conditioner and user. (I should say that it barely think about us at all >_< how cold they are! Why they don’t understand and be a little nicer…)

PComp Week 01: iFriend

iFriend

This is the great prototype that we made at PComp week 1.

How can distant friends hug each other? We designed iFriend to realize this dream!

At first, we want to make a touchable hologram of a distant friend. But soon the question appeared: How can you hug a hologram? At best you can see his/her face and body, but we expect MORE than this 😛

So it came to our mind a real avatar to represent you to your distant friend. It is named iFriend!

Yep.

IMG_1092

It is a big white soft robot like Baymax, that you can hug and send your hug to your friend. On iFriend’s head there’s a big screen for you to see your friend’s face and make it more emotional. To recognize your gestures and transmit it to your distant friend, we have two cameras on iFriend’s head, and additional cameras can be added on the wall of a room to improve precision, too. Some more sensors can be added to the robot to send more information like how hard you hug, how warm your hug is, etc.

Designers: To be completed!