Sur Pump it! j'ai eu l'occasion de programmer la gestion de la synchronisation entre le jeu et la musique.

Le deltaTime

Habituellement, les jeux en temps réel fonctionnent sur le principe du deltaTime : c'est la différence de temps écoulé entre deux images. A priori, ce temps devrait être stable :

Pour une application en 30 images par seconde, le temps entre deux images est de 1/30 de secondes : 0.03333.. s.

Néanmoins, en fonction de la machine, de l'occupation du processeur, ce temps varie au cours de l'exécution. Le connaître permet de placer les éléments à l'écran de manière à combler les ralentissements ou les hausses de vitesse. Le jeu est ainsi fluide et même avec une perte sensible du nombre d'images par seconde, le temps s'écoule de manière constante.

Synchronisation avec la musique

Pour synchroniser le jeu avec la musique, il suffit de calculer ce deltaTime à partir de la piste audio. C'est à dire que l'on calcule la différence entre la position en millisecondes de la tête de lecture à l'image en cours et celle qu'elle avait à l'image précédente. Ainsi, si la piste audio subit des ralentissements ou des hausses de vitesse, les éléments de l'écran sont ajustés et parfaitement synchrones avec le son.

Côté code

On calcule le deltaTime lié à la piste son avec une fonction liée à un évènement onEnterFrame.

import flash.display.MovieClip;
import flash.events.Event;
import flash.media.SoundChannel;

public final class SoundTimer 
{
	private var _channel:SoundChannel;//Une référence à la musique
	
	private var _lastTime:Number;//Contient la position de la tête de lecture à l'image précédente
	private var _deltaTime:Number = 0;//Contient le deltaTime
	
	public static function get deltaTime() {//Permet de récupérer le deltaTime de n'importe où
		return _deltaTime;
	}
	
	public function SoundTimer(soundChannel:SoundChannel) 
	{
		//On assigne OnEnterFrame à updateDeltaTime
		//updateDeltaTime est appelé à chaque nouvelle image
		var mc:MovieClip = new MovieClip();
		mc.addEventListener(Event.ENTER_FRAME, updateDeltaTime);
		
		_lastTime = 0;//Au départ le temps à l'image précédente est de 0
		assignSound(soundChannel);//assigne la référence au son
	}
	
	public function assignSound(soundChannel:SoundChannel) {
		channel = soundChannel;
	}
	
	private function updateDeltaTime(ev:Event) {
		var currentTime:Number = _channel.position;//On récupère la position à l'image actuelle
		_deltaTime = (currentTime-_lastTime) / 1000;//on fait la différence avec la position à l'image prédédente
		//La position de l'image précédente est écrasée par l'actuelle
		//Ainsi quand la fonction est appelée à l'image suivante, son image précédente est celle juste avant
		_lastTime = currentTime;
	}
}

On utilise ensuite ce deltaTime lors du calcul des déplacements des notes, par exemple.

//! Ce code n'est pas du tout optimisé mais sert à illustrer l'exemple.
//...
private var tones:Vector.<Sprite>//Contient les notes
private tempo:Number = 120;//Le tempo en pulsations/minutes est ici régulier
private laneWidth:Number = 200;//La longueur en pixels parcourue par la note à chaque pulsation
//...
//Update est appelée à chaque nouvelle image
public function update() {
	for each(var tone:Sprite in tones) {
		//On traduit le tempo en secondes
		//On multiplie par la longueur que la note doit parcourir à l'écran en une pulsation
		//On multiplie par le temps qui s'est écoulé entre l'image précédente et celle-ci pour être synchronisé avec la musique
		tone.x  +=  tempo / 60 * laneWidth * SoundTimer.deltaTime;
	}
}
//...

Alors que le Game Design était en cours, j'ai réalisé une maquette de l'écran principal de Pump It!.

Pour cette interface, je me suis inspiré des jeux vidéo de rythme les plus joués du moment : Guitar Hero, Rock Band.

Le jeu que nous devions faire était à l'origine déstiné à la page des fans de David Guetta, je me suis donc attardé sur un design en accord avec le style musical de l'artiste et son public.

Les informations à afficher étaient :

• L'aire de jeu avec les quatre quart de cercles, le bouton pump it, les notes ;
• Les bonus multiplicateur X2 pour chaque quart ;
• Le score, le nombre de fans : les fans viennent s'ajouter au score en fin de partie ;
• Le volume : la jauge représentant le nombre de notes collectées. Une fois au maximum, le joueur clique sur le bouton pump it au milieu, au moment où il est rouge.

Au final, l'interface représente un haut-parleur sur lequel les notes défilent. Le centre représente le point de récupération des notes et correspond au bouton à cliquer quand le maximum des notes à collecter est atteint. Dans chaque coin, les valeurs des bonus sont clairement identifiables par leur design lumineux.

D'un point de vue défilement des notes, on pourrait penser que les faire glisser de l'intérieur du haut-parleur à l'extérieur représente mieux la propagation du son mais côté gameplay les notes sont plus difficiles à suivre car le regard doit se poser sur les quatre coins de l'écran en même temps. Il était plus judicieux d'avoir un mouvement vers l'intérieur.

Une version 2

Entre la V1 et la suivante, nous avons remis en question quelques principes de Gameplay et réajusté l'interface. Je suis passé en programmation à ce moment là et le graphiste de notre équipe a modifié le design graphique.

• La jauge de volume a été conservée pour l'esthétique mais il fallait un signe au centre, où le regard se porte constamment, nous avons entouré une jauge autour du bouton pump it ;
• Le design du bouton est passé en bleu ;
• Les multiplicateurs sont plus visibles grâce à un filigrane qui apparaît sur chaque quart ;
• Le format 4/3 est devenu un format carré, il a donc fallu adapter ;
• Nous avons ajouté une feature de pause que l'on déclenche à l'aide du bouton en haut à gauche ;
• Le graphisme a été épuré.

Le Game Design était la première tâche que nous avions sur Pump it. Nous avons commencé avec le game concept, un petit prototype et nous avons écrit le game design document. Tous le design a été fait par notre équipe.

Le game concept