Afficher des news dynamiquement

6277208304_ab6988a99f_z

Lorsque vous créez un jeu, même si ce n’est pas un jeu online, il peut être intéressant d’afficher des news. Par exemple pour dire au joueur qu’une nouvelle version est disponible ou bien que vous avez sorti un nouveau jeu !

Il va de soi que ces informations ne peuvent pas être contenues dans le build que vous allez fournir à vos joueur. A moins que vous ne puissiez voyager dans le futur pour savoir quand vous devrez afficher les infos. Hum… Nous allons donc devoir les récupérer autrement : via un service web. Ce fonctionnement implique une connexion à Internet pour fonctionner et nous allons voir comment gérer ça.

La cinématique est simple :

  1. Le joueur lance le jeu
  2. Le jeu appelle votre site web via Internet pour récupérer les dernières news
  3. Le jeu affiche le contenu récupéré dans le jeu
  4. Le joueur est super content parce qu’une nouvelle version est dispo avec plus de contenu et moins de bugs ! 😀

Disclaimer

Cet article a été originalement écrit le 10/02/2014 sur mon précédent blog. Certaines informations présentées ici peuvent donc ne plus fonctionner telles quelles.

Le service web

Pour commencer, il faut créer notre service web. Il y a plein de façons de construire un service web, certaines plus sécurisées que d’autres, certaines plus lourdes que d’autres… Tout dépend de votre besoin. Afficher une news dans votre jeu n’est pas particulièrement critique. Gérer des achats in-ap l’est déjà un peu plus… C’est à vous de juger !

Dans notre exemple, je vais utiliser du du PHP et du JSON. Du PHP parce que c’est la techno la plus facile à utiliser sur le net, du JSON parce que c’est léger, donc plus rapide à transmettre ! Imaginons le cas le plus simple : une date et un contenu. Notre site va générer le JSON à la demande et le servir via HTTP. Voilà le script PHP :

<?php $news = array(); $news[0] = array(); $news['data'][0]['date'] = time() - 1000; $news['data'][0]['content'] = 'Voici notre première news !'; $news['data'][1]['date'] = time(); $news['data'][1]['content'] = 'Voici notre seconde news !'; echo json_encode($news); ?>

Dans cet exemple, étant donné que le contenu est statique (en dur dans le fichier), l’utilisation de PHP n’est pas nécessaire. Vous pouvez directement créer un fichier JSON sur votre hébergement. L’intérêt est de pouvoir brancher ce script sur une base de données, ce qui rendra votre service web un peu plus vivant (à condition de remplir votre base, ça va de soi).

Votre service est prêt, la suite se passe dans Unity. Uploadez le script PHP sur votre hébergement et notez l’URL pour y accéder (vous en aurez besoin par la suite).

L’interface

Par simplicité, je vais utiliser NGUI. La façon dont vous afficherez les infos n’a pas d’importance sur le fonctionnement en lui même. Je vais donc aller relativement vite sur la création de ces éléments. Créons donc une UI 2D dans laquelle nous allons placer un libellé. C’est ce libellé va contenir les news.

label

Voilà c’est tout pour l’interface !

Communication

Bien, passons maintenant à la récupération des news. Il va nous falloir créer un script qui va appeler l’URL notée plus haut, parser le JSON et l’afficher dans le libellé.

L’appel d’une URL peut prendre du temps, indépendamment de la puissance de la machine du joueur. Pour ne pas bloquer le jeu pendant l’appel et le traitement, on va utiliser une Coroutine. Si vous ne savez pas comment fonctionnent les Coroutines, je vous invite à jeter un oeil à la documentation. Voilà la structure dont nous allons avoir besoin. Elle est volontairement simplifiée au maximum :

public class JsonRetreiver : MonoBehaviour
{
  public string UrlToFetch;
  public UILabel Label;

  void Start ()
  {
    StartCoroutine(LoadContent());
  }

  private IEnumerator LoadContent()
  {
    // Chargement du contenu via Internet
  }
}

Nous avons là deux attributs exposés dans l’inspecteur : l’URL où le script va aller chercher les infos, et le libellé (NGUI) dans lequel sera affiché les news. Si vous utilisez la GUI par défaut, ce deuxième paramètre n’est pas nécessaire. Il vous faudra en revanche stocker la chaîne de caractères contenant les news pour l’afficher dans la méthode OnGUI.

Pour résumer, la méthode Start lance tout simplement le chargement en asynchrone sans bloquer le reste du jeu.

Concentrons nous maintenant sur comment récupérer nos news. Il est possible d’appeler une URL avec les classes disponibles. En revanche, pour parser du JSON, il va nous falloir récupérer un parseur. Le wiki officiel en propose un, c’est celui là que j’utiliserai dans cet exemple. Vous pouvez le télécharger ici.

Le code suivant est à placer dans la méthode LoadContent :

// On utilise WWW pour appeler une URL.
var www = new WWW(UrlToFetch);
// L'appel est en cours, on attend qu'il se termine 
yield return www;

// A partir de là, nous avons le retour, prêt à être parsé
var newsText = "";
// Parsing du contenu
var node = SimpleJSON.JSON.Parse(www.text);
// Parcourons la liste des news
foreach(var currentNode in node["data"].Childs)
{
 // Le champ date contient un timestamp UNIX
 // Il faut procéder comme suit pour s'en servir en C#
 var date = new DateTime(1970,1,1,0,0,0,0);
 date = date.AddSeconds(long.Parse(currentNode["date"].Value));
 
 // Ce qui suit est de la mise en forme du contenu.
 newsText += "\nNews du " + date.ToString("dd/MM/yyyy - HH:mm:ss") + "\n";
 newsText += currentNode["content"].Value + "\n";
}

// Notre chaine de caractère est terminée, on peut l'afficher.
Label.text = newsText;

Le parseur est prêt.

Finalisation

On y est presque. Il faut maintenant ajouter notre script sur la scène. Je l’ai ajouté à mon UI comme suit :

ui

Remplacez http://www.monsite.fr/news par l’URL de votre site et (si vous utilisez NGUI), affectez le label dans lequel afficher les news. Cliquez sur play… vos news s’affichent à l’écran !

news

Aller plus loin

Il est à noter que le script ne gère pas les erreurs : non connecté à Internet, erreur serveur (500, 404…). Avec le script actuel, si une erreur se produit, le libellé sera rempli avec une chaîne vide. Pour savoir si une erreur s’est produite pendant l’appel, vous pouvez vous baser sur l’attribut error de la variable www. Elle contiendra le message d’erreur, ou null si tout s’est bien passé. Plus d’infos à propos de cet attribut sur la documentation de WWW.

Crédits image : NS Newsflash

Advertisements

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s