How to make a game like Pong with Felgo - Music and Sound

How to make a game like Pong with Felgo - Music and Sound

Tutorial Chapters

1. Overview
2. Creation of a Felgo game
3. GameWindow, Scenes and Physical Worlds
4. The Level and the Ball
5. Level Boundaries
6. Paddles
7. HUD
8. Menus
9. AI
10. Special Effects
11. Music and Sound
12. Further Perspectives

Music and Sound

No game is complete without music and soundeffects. First of all, you will have to create a subdirectory snd in your main qml directory and place your soundfiles, for instance: collision.wav, ping.wav or pong.wav in the snd directory. You can add a background music item at the end of your VPongScene.qml.

 ...
   // use BackgroundMusic for long-playing background sounds
   BackgroundMusic {
     id: backgroundMusic
     // don't use mp3 on Symbian & MeeGo (they are not supported there) use ogg instead (i.e. 128 Kbit/s, 44.1kHz, Stereo), on all others play mp3 (i.e. 320Kbit/s, 48 kHz, Stereo)
     source: system.isPlatform(System.Symbian)||system.isPlatform(System.Meego) ? "../assets/snd/bg_edge.ogg" : "../assets/snd/bg_edge.mp3"
     volume: 0.8
   }
 ...

You can add ping and pong sounds to the end of Paddle.qml now. Each paddle should sound differently. Therefore, the sound file loaded depends on the player ID.

 ...
   // gets played at a collision, .wav file (44.1kHz, Stereo)
   GameSoundEffect {
     id: collisionSound
     source: playerID === 1 ? "../../assets/snd/ping.wav" : "../../assets/snd/pong.wav"
     volume: 1.0
   }
 ...

The sound should be started when something collides with the paddle.

 ...
  BoxCollider {
     id: boxCollider

 ...

     fixture.onBeginContact: {
       // play the collision sound when the paddle collides with anything
       collisionSound.play();
     }
   }
 ...

To gain audio feedback during collisions with walls you can add a collision sound at the end of Wall.qml.

 ...
     // Collision sound .wav file (44.1kHz, Stereo)
     GameSoundEffect {
       id: collisionSound
       source: "../../assets/snd/collision.wav"
       volume: 0.3
     }
 ...

When onBeginContract of the BoxCollider is called, it can trigger the sound effect.

 ...
     // Box Collider is used due to the boxed form
     BoxCollider {
         id: boxCollider
         // The wall should not move
         bodyType: Body.Static

         // When something collides with the box, this function is called
         fixture.onBeginContact: {
           // The color of the inner Rectangle changed to give visual feedback
           innerRect.color = "green"
           // start the timer
           timer.start()
           // Play a collision sound
           collisionSound.play();
         }
     }
 ...

Finally you created a small game with Felgo which includes many concepts from entity components to sound effects. This was the first step and more demo games are available which provide more information.