NOUS LES DEVS

Animer un pixelArt

Niveau : débutant(e)

</> </> </>

Dans l’article précédent, j’ai construit une image pixel en PHP à partir d’une image source. Maintenant ce que j’aimerais bien faire, c’est créer une animation. Je vais utiliser le même algorithme pour générer plusieurs séquences d’images et les recomposer en une seule image animée (gif).

Première step, ajouter un nouveau paramètre, animated, qui va contenir deux informations, le nombre d’images générées et l’interval de temps entre deux images. Et bien entendu, je crée une nouvelle méthode que je nomme makingAnimation.

//params for class
$params = array(
	"fileName"            => "sangoku.jpg",
	"nbrPoint"            => 20000,
	"shape"               => "rect",
	"rangeSizeShape"	  => array(0,20),
	"minOpacity"		  => 30,	//0 = hide | 100 = visible
	"lowerizationLvl"	  => 2,
	"borderLess"		  => true,
	"exportMode"		  => "image",				
	"animated"		  	  => array(
		"nbrImage"		=> 3,
		"timerInterval"	=> 100
	)
);

//launch object	
$imageRendering = new pixelArt($params);
$imageRendering->makingAnimation();

La méthode makingAnimation va faire une boucle sur le nombre d’images défini dans les paramètres et reprendre une grosse partie de la logique existante pour la génération des images.

A chaque passage de boucle, je stocke l’image (ressource) dans un tableau. Et une fois que j’ai toutes les images, j’utilise une classe que j’ai trouvée sur gitHub (GifMerge.class.php) qui va me permettre de combiner mes images, car en GD il n’y a pas vraiment de fonction qui fait le truc tout seul.

Et quand c’est bon, je retourne l’image.

public function makingAnimation(){
	
	//replace default nbr image
	if( !isset($this->params["animated"]["nbrImage"]) ){
		$this->nbrAnimatedImage = $this->params["animated"]["nbrImage"];
	}
	
	//replace default interval
	if( !isset($this->params["animated"]["timerInterval"]) ){
		$this->intervalDurationAnimation = $this->params["animated"]["timerInterval"];
	}

	//construct image
	$tmpListImg = array();
	for($nbrImage = 0; $nbrImage < $this->nbrAnimatedImage; $nbrImage++){
		$this->collectPixel();
		//$tmpListImg[] = $this->makingShape(true);
		
		ob_start();
		imagegif($this->makingShape(true));
		$tmpListImg[] = ob_get_clean();

		 
	}

	//making
	$gif = new GIFEncoder($tmpListImg, $this->intervalDurationAnimation, 0, 2, 0, 0, 0, 'bin');
	header('Content-type: image/gif');
	echo $gif->GetAnimation();	
}

J’ai modifié makingShape pour permettre de retourner une ressource via le paramètre passé dans l’URL. Dans le cas où l’argument de la fonction est false, j’affiche directement l’image. Pour le moment, il n’y a qu’un seul paramètre de rendu possible mais je vais le faire évoluer au besoin.

public function makingShape($return = false){
	
	//check if sufficient point
	if( !isset($this->params["shape"]) ){
		die("Not shape defined");
	}
	
	//rendering option	
	if($return){
		return $this->{$this->params["shape"]}();
	}else{
		$image = $this->{$this->params["shape"]}();
		if( isset($this->params["exportMode"]) ){
			if( $this->params["exportMode"] == "image" ){
				header('Content-type: image');
				imagepng($image);
				exit();						
			}
		}
	}
}

Et le rendu est plutôt sexy.