Archives de
Étiquette : html5

NodeJS fusionne avec iojs

NodeJS fusionne avec iojs

Et voilà, c’est fait : NodeJS fusionne avec iojs. L’annonce faite par Mikeal Rogers le 8 mai 2015 suivie d’un vote du Comité Technique 5 jours plus tard a permis de confirmer la rumeur qui courait depuis déjà un moment. Retour sur un événement historique pour notre cher internet et sur ses implications dans un futur proche et lointain.

NodeJS, kézako?

Pour les non-initiés, revenons-en aux définitions de base.

Node.js est ce qui permet, depuis 2009 / 2010, d’ utiliser JavaScript aussi hors du navigateur, comme des langages plus classiques, en lui donnant accès notamment à la manipulation de fichiers et aux interactions avec le réseau. Du fait de ses performances, et ses caractéristiques, il est surtout utilisé pour coder des serveurs web minimalistes, rapides, capables de répondre à de nombreuses requêtes en parallèle ou de faire du web temps-réel (chats / jeux multijoueurs…). Son développement et sa maintenance sont effectués par l’entreprise Joyent. Node.js est progressivement devenu populaire et est utilisé par Groupon, SAP, LinkedIn,Microsoft, Yahoo!, Walmart, Rakuten et PayPal entre autres. Nous l’utilisons également beaucoup chez Toxicode pour nos jeux multijoueurs et nos outils autour de l’apprentissage de la programmation.

Pourquoi iojs a changé la donne?

Il y quelque mois de cela, la v0.1 d’un  nouveau fork de Node, baptisé io.js, voyait le jour. Quand io.js a été lancé en janvier 2015, nombreux y ont vu une sorte de « Node amélioré », un fork plus agressif dans le développement et qui permettait d’implémenter des fonctions qui manquaient dans les v0.11 et 0.12 de NodeJS. (Pour les débutants comme moi, un fork est un projet ou logiciel issu d’une scission avec un projet initial unique, et qui partage avec lui une part de son code source).

Mais alors que Node.js avait déjà été forké auparavant, avec l’avènement de io.js, une vraie scission s’est produite : plusieurs contributeurs majeurs ont quitté Node.js et ont commencé à faire des pulls requests pour io.js. L’année 2014 avait déjà vu une diminution des suiveurs de Node.js, mais en 2015, la division s’est faite plus profonde également pour des raisons de gouvernance. En effet, la communauté des développeurs autour de Node.js s’agrandissant, certains des contributeurs trouvait qu’il était difficile de s’intégrer au projet et reprochaient aux chefs de projets un certain manque de transparence. Ils n’approuvaient pas de voir Node.js aux mains d’une compagnie privée, et d’avoir à passer du temps à faire accepter aux chefs de projets chacune des améliorations qu’ils voulaient apporter au code.

Au contraire, io.js a lancé dès janvier 2015 des cycles d’amélioration rapides, en suivant un modèle de gouvernance ouverte qui a attiré de nombreux contributeurs.

Naissance de la Node Foundation

Voyant l’évolution de la situation, Joyent a réagi rapidement, annonçant en février 2015 son intention de créer la Node Foundation, gérée par un Comité Technique, une initiative soutenue par IBM, Paypal, Microsoft et la Fondation Linux et qui permettrait de résoudre les problèmes de gouvernance qui s’étaient posés. Selon ioJS, les deux projets convergent donc sous l’appellation Fondation Node, « sous la tutelle conjointe des équipes techniques de Node.js et io.js ». Par ailleurs, la Node Foundation utilise le nom de Node.js et s’appuie sur un référentiel io.js

L’objectif principal est de réunifier la communauté divisée autour d’un modèle plus ouvert, transparent et proposant des updates très réguliers.

Souhaitons donc la bienvenue à cette nouvelle fondation  et gardons un oeil sur les prochains développements du projet !

 

HTML 5 et sa balise canvas

HTML 5 et sa balise canvas

Avec l’arrivée du HTML5, une nouvelle balise voit le jour : la balise canvas. Outil de dessin puissant, elle permet au développeur de créer des animations ou des jeux, beaucoup plus rapides et modulables qu’avec des balises HTML, directement sur le navigateur, sans plugin.

Mais alors, que permet cette balise ?
Est-elle simple d’utilisation ?
Quelles sont ses forces et ses faiblesses ?
Qui sont ses concurrents ?
Plein de questions auxquelles nous allons essayer de répondre.

Que permet-elle ?

Faire des animations, des bannières, des applications, des jeux etc… Tout ça sur votre navigateur, sans plugin. Mais plutôt que des mots, des exemples.

Des démos techniques :

Des jeux :


L’utiliser

Même si c’est une balise HTML, tout se passe en Javascript. Il faut donc pour commencer maîtriser un minimum le Javascript.

On commence par initialiser une balise canvas dans son .html.

<canvas id="canvas">
    Message qui s'affichera si la balise n’est pas supportée par le navigateur
</canvas>

Côté Javascript, on va récupérer la balise et la traiter un petit peu.

var canvas  = document.getElementById("canvas");
var context = canvas.getContext("2d");

Et c’est tout. A partir de ce contexte vous allez pouvoir tout faire. Par exemple :

context.drawImage(img, x, y);          //Afficher une image
context.fillStyle = "red";             //Changer la couleur de remplissage
context.fillRect(x, y, width, height); //Dessiner un carré plein (du coup rouge dans notre cas)
//etc...

Comme je ne vais pas vous écrire la documentation pour le canvas :

Hey ne partez pas ! Ce n’est pas parce que je vous donne des liens vers de la doc que je vais vous laisser tomber !

Il y a une fonction Javascript récente qui va nous être très utile pour faire du travail propre en canvas! Si vous avez déjà fait des petits scripts avancés en Javascript, vous avez sûrement déjà rencontré setTimeout et / ou setInterval.
Ce sont deux fonctions de timer en Javascript. Bon, pour elles, rien de nouveau: s’il est possible de faire de l’animation avec celles-ci, ce n’est pas une bonne idée. Vos boucles ne seront pas calculées en fonction du rafraîchissement de l’écran et vous pourrez donc avoir deux boucles qui s’exécutent (donc deux déplacements par exemple) avant un affichage.
En bref, elles ne sont pas faites pour de l’animation !

C’est pourquoi désormais nous avons requestAnimationFrame ! Parfaite pour de l’animation. Pourquoi parfaite ? Pour faire simple, cela va nous permettre de créer une boucle infinie, qui va s’exécuter de façon synchronisée avec le rafraîchissement de l’écran pour votre navigateur.

Mais comment fonctionne requestAnimationFrame ?
En schématisant un peu, vous appelez requestAnimationFrame et lui passez une fonction qui contient le code de votre animation. Quand le navigateur rafraîchira l’écran, il exécutera le code contenu dans la fonction !

Dans cette fonction que va exécuter le navigateur, on va lui passer un nouveau requestAnimationFrame avec notre code. Nous avons ainsi une boucle de calcul qui s’exécute à l’infini pour chaque rafraîchissement de l’écran.

Voici ce que ça donne dans le code :

function run () {
    /* On l’appelle dès le début, après le prochain
    rafraîchissement d’écran, run sera rappelé, et ainsi de suite */
    requestAnimationFrame(run);  

    //Notre code à effectuer pour chaque rafraîchissement d'écran.
}

Si vous voulez aller plus loin sur l’aspect technique, vous pouvez lire cet article.


Autour de canvas

Des tutoriels intéressants :

Il n’existe pas encore d’éditeurs de code spécifiques pour canvas comme flash develop pour flash ou code::block pour le c.
Cependant on commence à trouver pas mal de librairies et de frameworks :

  • Phaser. Un framework de jeu.
  • Box2DJS. Pour faire de la physique.
  • Fabric. Pour créer et manipuler des objets facilement sur le canvas.


Un flash killer ?

On connaît tous les jeux flash, certains sites n’étant même que des bibliothèques de ceux-ci.
Flash est le concurrent direct de notre petite balise canvas.
Et oui, on peut faire la même chose en flash qu’en canvas, alors pourquoi l’un plutôt que l’autre ?

Flash a été lancé en 1996, et continue à être mis à jour. Il a été le sauveteur des animations web. Aucun concurrent pour lui à l’époque, il était la solution.
Forcément, en 18 ans d’existence, Flash possède une énorme communauté, une solution à quasiment tous les problèmes sur 20 forums différents, que ce soit pour l’animation ou de l’actionscript, beaucoup de librairies, des environnements pour programmer.

Canvas a lui, de la documentation… (bon j’exagère un peu).

Oui mais. Parce qu’il y a un mais, et même plusieurs.
Le plus important c’est que Flash n’est pas natif au navigateur. Il appartient à une société, Adobe, or c’est la w3c qui s’occupe de la “normalisation” des services web, pour que tous les navigateurs fassent la même chose.

Et donc ? Tout le monde a Flash player installé sur son ordinateur.
Eh bien plus maintenant, et ce sont de grosses entreprises qui s’en mêlent, comme Google ou Apple. Et c’est tout à leur avantage d’utiliser une norme, plutôt que d’utiliser une technologie qui appartient à quelqu’un et qui en fait ce qu’il veut.

Google vous prévient qu’un site comporte du Flash sur vos mobiles et pourrait ne pas fonctionner. Les nouveaux systèmes Android ne supportent plus Flash. Googlemaps va être désactivé pour Flash.

Apple critique énormément Flash, le tenant responsable de certains crashes de navigateurs. Apple refuse lui aussi Flash sur ses périphériques mobiles.

En conséquence, Adobe arrête les mise à jours de Flash pour mobile.
Il est important de noter aussi que la plupart des logiciels pour Flash sont payants.

Le débat du HTML5 Flash killer est assez récurrent sur la toile et évolue de jour en jour.


Pour conclure

Même si canvas est encore jeune, il semble avoir déjà été adopté par beaucoup de monde, et sollicité par de grosses entreprises, ce qui lui présage un avenir très intéressant. Canvas arrive dans une ère où les navigateurs et le Javascript commencent à être très puissants, il suffit de regarder des technologies comme asm.js émerger, des jeux unity fonctionner avec un simple plugin. Il ne serait plus étonnant de voir le prochain gros mmorpg/moba tourner sur navigateur.

Les navigateurs web entrent dans une nouvelle ère. Canvas en fait partie. Seul l’avenir nous dira comment cela évoluera.

Google Analytics pour les jeux JavaScript

Google Analytics pour les jeux JavaScript

Lorsque l’on crée son jeu HTML5, on ajoute souvent le script de Google Analytics sur sa page web, afin de savoir combien de personnes jouent à notre jeu, et d’autres infos utiles comme leurs pays, leurs langues et leurs navigateurs. Mais si on utilise l’API Google Analytics, on peut faire bien plus que ça.

Vous aussi, devenez de véritables big brothers grâce à cet article qui vous expliquera toutes les ficelles de l’espionnage de vos joueurs.

toxicode_blog01

Que pouvez-vous enregistrer ?

Virtuellement tout ce pour quoi vous pouvez donner une valeur sous forme de chaîne de caractères à votre utilisateur. Par exemple : le niveau actuel, le nombre de Game Over, le nombre de clics, en combien de temps il passe sur le tutoriel, le niveau de difficulté choisie, est-ce qu’il a désactivé le son…

Cependant, gardez le tout le plus simple possible. Google Analytics ne vient pas remplacer votre base de données, et il n’est pas intéressant de mettre par exemple l’ensemble de l’inventaire dans une variable que vous sauvegarderez. En faisant ça, vous perdrez la possibilité de trier via les valeurs comme vous pourriez le faire avec des valeurs simples.

Il est également possible d’enregistrer des évènements (le joueur bat un boss, finit une partie etc.). Les fonctionnalités du site Google Analytics vous permettront ensuite de visualiser la fréquence des évènements sous forme de statistiques. Vous pourrez ainsi observer si l’ajout d’un nouveau boss dans le jeu le jeudi 30 février augmente le nombre de Game Over, ou autre…

Enfin, vous pouvez segmenter vos joueurs en leur donnant des tags particuliers. Typiquement, vous pouvez ainsi dire à Google que le visiteur a payé son abonnement, a déjà acheté un contenu In-Game, que c’est un nouveau joueur. Ou alors que c’est un joueur qui n’est pas venu depuis plus d’un mois.

Grâce à ces segmentations, vous pourrez ensuite trier les joueurs sur l’interface de Google Analytics. Vous pourrez ainsi voir l’effet de l’ajout de votre nouveau boss sur les nouveaux venus VS sur les joueurs vétérans.

Tout ceci vous permettra de rendre votre jeu plus fun, plus addictif, ou même plus rentable selon vos aspirations personnelles.

toxicode_blog02a

Rentrons dans la technique

Avant toute choses, il faut savoir qu’il existe deux versions de l’API Google Analytics : ga.js et analytics.js. La seconde (plus récente) sera utilisée dans cet article.

Elle permet entre autre de déclarer des évènements et variables à la volée (il fallait auparavant les déclarer depuis l’interface web), et se charge de manière asynchrone.

Voici un exemple du script à inclure dans la page.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

La première partie très condensée est un peu de magie vaudou made in Google, qui permet de déclarer la fonction ga, et de commencer à charger le script de Google Analytics. Une fois le script chargé, il remplace ga, tout en lançant la série de méthodes que l’on aurait pu appeler entre temps. De cette façon, il n’y a pas besoin de faire de callback une fois le fichier chargé, tout est transparent.

Ensuite, la première ligne du deuxième bloc initialise l’analytics avec votre compte utilisateur (il faut mettre son identifiant à la place du UA-XXXX-Y qui n’est qu’un placeholder). Le troisième paramètre, ‘auto’, se réfère au paramètres que vous pouvez donner à votre Tracker Analytics.

Par exemple, vous pouvez interdire d’envoyer des données si le domaine n’est pas le bon (pour empêcher d’envoyer des données sur votre serveur de développement par exemple). Plus d’infos sur les possibilités ici. Mais sachez que vous pouvez par exemple y autoriser les envois de données depuis localhost, si vous souhaitez tester le fonctionnement de Google Analytics.

La deuxième ligne du second bloc envoie une page vue. C’est par défaut le seul comportement de Google Analytics. Elle peut également prendre un troisième paramètre, qui configure les propriétés de la page vue.

Vous pouvez l’utiliser par exemple pour overrider l’url que vous envoyez, afin de savoir si le joueur est dans le menu de votre jeu, ou dans les options, ou sur l’inventaire…. Pensez à rappeler cette commande à chaque fois que vous voudrez envoyer une valeur de pageview.

Envoyer des events

Pour envoyer des events, il suffit d’utiliser la méthode send :

ga('send', 'event', 'playerGotItem', 'diamondSword', 5);

Le premier paramètre, « send« , est commun avec la méthode pour envoyer une pageview. C’est en réalité le nom de la méthode commune à tout envoie de donnée sur votre Tracker Analytics.

Le second paramètre, « event« , permet de dire que vous envoyez un évènement, par opposition à une pageview par exemple.

Le troisième paramètre, « playerGotItem » ici, est le nom de la catégorie d’évènement. Dans le cas d’un jeu, considérez le comme le nom de l’event. Sentez vous libre de le remplacer par ce que bon vous semble.

Le quatrième paramètre est normalement le nom de l’event. Dans le cadre d’un jeu, il est plus intéressant de le considérer comme une valeur. Par exemple, je dis ici que le joueur a obtenu l’épée en diamant. Ce paramètre est optionnel.

Enfin, le dernier paramètre est normalement la valeur numérique de l’évènement. Utilisez la (ou non, elle est optionnelle), pour stocker des informations complémentaires. Par exemple, lors d’un Game Over, vous pouvez y stocker le niveau actuel du joueur. L’intérêt est que cette valeur étant numérique, vous pouvez utilisez Google Analytics pour faire des graphs l’utilisant.

toxicode_blog02b

Segmentez vos utilisateurs avec les dimensions

Pour segmenter vos utilisateurs (premium / non premiums par exemple), il est d’usage d’utiliser les dimensions. Dans notre cas, ça peut être premium, non-premium, beginner-user, advanced-user…

Vous devez définir pour chaque dimension un index entre 1 et 20 (entre 1 et 200 si vous êtes un utilisateur Google Analytics payant). Vous pouvez ensuite déclarer votre dimension en utilisant :

ga('set', 'dimension5', 'premium-user);

Dans cet exemple, vous dites que l’utilisateur est un utilisateur premium, ce qui le place dans la dimension numéro 5.

Vous pourrez ensuite trier vos utilisateur dans l’interface Google Analytics en fonction de ces différents critères.

C’est tout pour aujourd’hui. N’hésitez pas à poster vos astuces, questions, corrections en commentaire.

Illustrations par Lou Pine (www.loupine.fr)