Click here to Skip to main content
Click here to Skip to main content

Tagged as

Touch the Music

, 10 Sep 2013
Rate this:
Please Sign up or sign in to vote.
An innovative multi-touch music game

Please note

This article is an entry in our AppInnovation Contest. Articles in this sub-section are not required to be full articles so care should be taken when voting.


[All visuals displayed below are not final, and are

just to demonstrate and explain the game. The final game will look much

better.  Also, 'Touch The Music' is a

working-title, and will almost definitely be changed]

Platform  

This game will be targeting the All-In-One range because of its large display and fast hardware, both of which will help make the experience better for the user.

Category 

This is being entered into the "Game" category.

Overview 

Music is one of most widely enjoyed and accepted forms of entertainment, and has been for centuries. Most people even have a large collection of music on their PC’s that they listen to. But why stop there? Why not add interactivity to music and make it a game?

This is exactly what Touch The Music seeks to do.

Before I explain how the game will work, and what the player will do, here is a quick explanation of the sound that the game's core mechanic is built around:

As you have probably seen before, music files can be broken down into their wave form, producing something similar to the following:

 

 

 


 The game will take that raw input, and smooth out the values to make a wave that still represents the music, but is nice and smooth, and looks better: 

 

 

 

 

To explain that visually, here is what those waves would look like when overlaid over each other:

 

 

 

For the game, we rotate the wave upright because it is played vertically.

The game itself is very easy to understand, but can be as challenging as the player wants it to be. The aim of the game is to slide your finger horizontally near the bottom of the screen to follow the wave of the music. The game takes advantage of the All-In-One PC's multi-touch interface; while one finger is following the music, you use your other hand to turn the "volume" dial. The louder the volume, the more variations/fluctuations in the wave, meaning it is harder. You can dynamically change the volume to make the game harder or easier on-the-fly for extra points.

Points are calculated by multiplying the current accuracy with the volume (which is a multiplier).

In the image above here are some key points:
- The circle at the bottom left is the volume. Rotate this dial to make it harder, and get more points.
- The wavey line is the representation of the selected song. It will slide downward.
- The player must slide the circle to match where the wavey line passes through the bottom white line.
- The left and right white end lines represent the volume "width".
- At the top right the overall accuracy of the game so far is displayed. Accuracy is calculated by averaging how closely the player keeps the circle on the song line.
- Below the accuracy, there is a representation of how far through the song the player currently is.

Here is a simulation to demonstrate how the game will be played. The simulation does not show the multi-touch interaction with the volume multiplier, only following the wave.

 

 

 [This image above is a large GIF file, please allow some time for it to load. If it doesn't, please click here: http://sdrv.ms/14oiL5X]

 



Uses

This game will be both fun and engaging for people of all ages. The great thing is that people can play their own songs in the game, so there is no risk of someone not liking the game due to the choice of music. That also means there are no licensing costs! 


 People can play the game to have fun with music, or simply just relax. The large screen of the Lenovo All-In-One PC combined with the soothing colors of the game will make this an awesome experience.

A player can also choose to play an unlimited mode which will continually choose a random new song each time a song ends so there is no interruption in the game. The wave (and music) will crossfade between each song to make this experience seamless.

 

One of the aspects that will really differentiate this game played on the Lenovo All-In-One compared to any other Windows 8 machine is the unique use of the Joystick and Striker accessories.

 

Details on their design and use can be found on the Lenovo Developer site.

Using the Joystick, the horizontal axis will be directly mapped to the position of the circle (usually controlled with a finger). So fully tilting the Joystick left will put the circle to the far left, and same for right.

The Striker will work more like a standard finger, and the user will drag it along the bottom horizontal line. One difference between using the Striker and a finger is that the UI will change to being slightly larger when using the Striker so that the accessory does not obstruct important parts of the screen.

While using either accessory (or a finger), the left hand will still be used to control the volume/difficulty throughout the game.

Approach 

An interesting part of this project is the smoothing out of the sound waves.

I will achieve this with a simple Low Pass Filter. This type of filter is used to average out an input and reduce fluctuations. I typically use the below method in electronics when filtering out electrical interference in sensor input:

    public class LowPassFilter
    {
        private double _smoothingFactor;
        public double SmoothedValue;
        public LowPassFilter(double smoothingFactor)
        {
            _smoothingFactor = smoothingFactor;
        }


        public void Step(double sensorValue)
        {
            SmoothedValue = _smoothingFactor * sensorValue + (1 - _smoothingFactor) * SmoothedValue;
        }
    }

 

Results and player statistics in the game will be shown in a detailed interface, giving the player a breakdown of their past games. This user interface will be created primarily with the Telerik Graph controls.

Coding  


The game will be made using C# and WPF. I've chosen WPF because it provides a good mix of decent performance, while also being able to make good UI's easily.

XNA was also considered, and could possibly have been a better choice for the actual game sections. However, creating a compelling UI in XNA takes a lot of time, plus there is limited touch support in in XNA. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Matt Cavanagh
Software Developer self employed
South Africa South Africa
I develop awesome Windows Phone/Windows 8 stuff, am a Nokia Developer Champion, I do Netduino electronics stuff, and blog a lot. I also occasionally do talks about development at Universities and conferences like TechEd. I run a small indie Windows Phone studio, currently working on an AppCampus-funded game.
 
Checkout my just-for-fun apps here: http://www.windowsphone.com/en-US/store/publishers?publisherId=RogueCode&appId=23d742d2-5b14-48a7-8e5f-b3b779537338
I also do Windows Phone (and Windows) development for clients, for example: http://www.windowsphone.com/en-za/store/app/dstv/a87feeed-a8dd-4bcb-8d47-15908340fdab
 
I am currently on hiatus from writing development articles for WPCentral.com.
 
My first book has just been published on home automation with a Netduino: http://www.amazon.co.uk/Netduino-Home-Automation-Projects-Cavanagh/dp/1849697825
Follow on   Twitter

Comments and Discussions

 
QuestionHow's app development going? Will you be submitting on time? PinstaffKevin Priddle24-Oct-13 6:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 10 Sep 2013
Article Copyright 2013 by Matt Cavanagh
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid