weeXord.org

Nouvelle version

z0va — Sun, 07 Nov 2010 06:17:35 +0000

Un peu de nouveauté sur le blog, je me permet donc de faire un billet pour accompagner la peinture fraîche. La version 7.2 se veut plus ergonomique et mieux organisée afin de laisser place à l’essentiel ! La ligne de mire reste toujours le minimaliste dans un soucis d’optimisation du poids de la page, et plus simplement parce que c’est le genre d’interface qui me convient parfaitement.

Pour cela il y a eu pas mal de modification du thème, j’ai tout d’abord modifié la mise en place des éléments afin d’obtenir un résultat plus clair et naturel. J’ai par la même occasion remanié et optimisé entièrement la feuille de style (CSS), et fait place à quelques propriétés en CSS3.
L’autre nouveauté est l’ajout d’un bouton Twitter sur les pages des articles, ceci est une volonté que j’ai d’ouvrir ce site vers un autre moyen de communication que j’utilise, pour pouvoir partager plus facilement les contenus que je met à votre disposition.

Sinon le rythme du blog ne changera surement pas, en ce moment j’ai beaucoup de projets en parallèle, je publie toutes les semaines une chronique sur Nextbuzz, je code et fait pas mal de veille. Et au delà de ça, j’ai quand même un métier et une vie donc je prends mon temps pour essayer de faire les choses du mieux possible.
Pour finir je dirais que la volonté même du blog est de fournir des articles de qualité, et que c’est surement pour cela que la quantité d’articles est bien maigre.

En attendant la suite, vous pouvez toujours suivre mes actualités sur mon compte Twitter.

Canvas Player beta

z0va — Sat, 02 Oct 2010 16:23:00 +0000

[UPDATE 1.2.b]
Je vais vous présenter un projet que je développe actuellement : un canvas player.
On trouves de plus en plus d’animations/jeux réalisés avec les canvas (html5) seulement elles sont gourmandes en ressources. De ce constat, j’ai imaginé une solution qui réglerait certains problèmes que cela peut engendrer.

Imaginez que je poste une démo dans un article, vous la découvrez et souhaitez ensuite lire l’article. La question qui me vient à l’esprit et de savoir pourquoi la démo devrait tourner en fond lorsque c’est inutile ?
Certains proposent donc des permettant de stopper l’animation mais c’est extrêmement moche d’un point de vue esthétique.

Du coup je proposerai bientôt un « widget » en JavaScript permettant de contrôler votre animation de la même manière que le ferait un player comme celui de Youtube avec une vidéo.
Je ne vous en dis pas plus pour le moment, je ferais une présentation complète lorsque j’aurai fini son développement.

En attendant voici une première ébauche du player, mettant en action une petite démo que j’avais réalisé pour le fun :

Hacks JavaScript

z0va — Sun, 05 Sep 2010 17:14:10 +0000

Aujourd’hui je vais vous montrer quelques hacks JavaScript, qui pourront vous aider à optimiser vos codes (en terme de taille) chose utile lors des concours qui imposent une limitation de taille.

Ce petit article va vous montrer les méthodes que je connais, il en existe surement d’autres et je ne demandes qu’à les connaitre !

Regroupement des variables

Lorsqu’un groupe de variables sont initialisées avec la même valeur, au lieu de les déclarer séparément il est clairement plus simple de faire une seul déclaration :

// Code non optimisé
var a=1;
var b=1;
var c=1;
 
// Code optimisé
var a=b=c=1;

Ainsi on passe de 24 à 12 bytes, c’est donc un gain considérable et à mon sens la déclaration est bien plus simple à relire.

Récupérer un élément

Généralement lorsqu’on souhaites manipuler un élément, on fait appel à la méthode document.getElementById(), et bien sachez que l’on peut récupérer ce même élément avec d’autres méthodes.
Le point commun des éléments de la page et bel est bien le corps de la page (body), et bien on va l’utiliser pour récupérer un de ses « enfant ».
Voici l’exemple de page que nous allons utiliser :

<html>
	<head><title>Exemple</title></head>
	<body>
		<div id="a"></div>
		<div></div>
	</body>
</html>

Maintenant nous allons voir comment récupérer les deux div à l’aide de document.body.

En premier lieu nous avons un div qui possède un ID, un simple document.body.a nous permet donc de récupérer l’élément.

Dans le deuxième cas il va falloir utiliser le tableau d’enfants de body (document.body.children), et indiquer la position du div.
Nous voulons récupérer le deuxième élément de la page or dans un tableau, l’indexation commence à 0 (donc ce div sera le numéro 1), ce qui donne : document.body.children[1].

Au final on voit qu’on gagne très peu en taille mais justement ça se joue souvent à très peu de choses, donc il est bon de garder cette méthode à l’esprit

Les conditions

Voici une partie où l’on peut gagner pas mal de bytes très simplement.
Je vais vous montrer tout d’abord une petite astuce qui pourra peut être vous servir :

// Code non optimisé
	if (a > 10 && a < 20 && b > 30 && b < 40) { }
 
// Code optimisé
	if (a > 10 & a < 20 & b > 30 & b < 40) { }

J’ai volontairement conservé les espaces pour la lisibilité, mais en fait on voit que && peut dans la plupart des cas être remplacé par &, et dans ce cas on gagne quand même 3 caractères !

Voici maintenant la partie la plus intéressante, l’opérateur ternaire. En fait il s’agit d’optimiser une condition simple de type if/else, avec une seule condition dans le if, et une seule action à effectuer dans les deux cas !

// Exemple #1
	//Code non optimisé
		if (a == 10) b = 20;
		else b = -20;
 
	// Code optimisé
		b = (a == 10) ? 20 : -20;
 
// Exemple #2
	// Code non optimisé
		if (a == 10) alert('pile');
		else alert('poil');
 
	// Code optimisé
		(a == 10) ? alert('pile') : alert('poil');

Une dernière petite chose, quand on cherche à vérifier qu’une variable n’est pas égale à zéro :

// Code non optimisé
	if (a != 0) { }
 
// Code optimisé
	if (a) { }

En effet quand une variable est égale à 0/null/false il est considéré qu’elle n’existe pas puisqu’elle est nulle.

Math.floor()

Pour finir je vais vous montrer une astuce plutôt sympa, si on cherches à arrondir à l’entier en dessous : |0

// Code non optimisé
	alert(Math.floor(2.5));
 
// Code optimisé
	alert(2.5|0);

Cette méthode fait quand même gagner 10 bytes donc imaginez si on répète l’opération plusieurs fois !

Conclusion

Je pense avoir fait le tour des différentes méthodes permettant de gagner quelques bytes, j’en ai surement oublié (peut-être même certaines que je connais) mais je complèterai cette liste si le besoin s’en fait.

Un dernier petit conseil pour l’optimisation utilisez packer pour minifier vos codes. C’est le meilleur compresseur JavaScript que j’ai pu trouver jusqu’à ce jour !

Initiation aux Canvas

z0va — Sat, 07 Aug 2010 17:27:03 +0000

Je parle des canvas, c’est bien mignon mais encore faudrait-il savoir les utiliser ! Pour cela j’ai décidé de faire un petit tutoriel -plus ou moins complet- afin de faire un petit tour d’horizon de l’API de dessin.

Qu’est-ce qu’un Canvas ?

C’est un composant issu du HTML5, qui n’est pas encore complet mais qui nous permet dors et déjà pas mal de choses. On peut apparenter cet élément à une zone de dessin, qui peut être manipulée à l’aide d’une API spécifique en JavaScript.

Comment ça marche ?

On a tout d’abord la partie HTML qui va définir l’élément Canvas d’un point de vue de la page. Cette partie aura pour but de positionner le Canvas dans notre page, mais aussi de définir sa taille.

1
2
3

="premierCanvas" class="mesCanvas" width="300" height="300">
	Votre navigateur ne supporte pas les Canvas :(
</canvas>

Rien de plus complexe que ça, c’est en réalité aussi simple que de créer une IFRAME…
Donc c’est une simple balise type, où l’on peut spécifier ses dimensions de 3 façons différentes : directement dans la balise, via son style CSS, ou bien via le DOM.
Sachez que dans l’exemple ci-dessus la ligne 2 est optionnelle, et son texte ne sera affiché que si le navigateur ne prends pas en charge les Canvas, sauf dans le cas de Safari qui ne prends pas en charge la balise de fermeture et qui affichera à coup sur votre texte alternatif.

Comment ça se manipule ?

Donc à l’heure actuelle si vous ouvrez votre page dans un VRAI navigateur vous ne verrez absolument rien, car pour pouvoir afficher votre Canvas il faut initialiser le contexte de dessin.

Sachez qu’il existe 2 types de contextes : 2D et 3D mais pour ma part je n’ai jamais utilisé le 3D qui est extrêmement limité et n’est supporté par quasiment aucun navigateur ! Mais on peut imaginer dans le futur voir la manipulation de Canvas en 3D se généraliser, mais je n’y crois pas vraiment.

1 2	var element = document.getElementById('premierCanvas'); var canvas = element.getContext('2d');

Donc simplement on récupère notre élément via le DOM, puis on appelle la méthode getContext() qui va nous permettre d’utiliser les fonctions de dessin.

Maintenant je vais vous montrer comment empêcher de se bouffer des erreurs JavaScript parce qu’on tente d’exécuter notre code sur un navigateur qui ne supporte par les Canvas.

var element = document.getElementById('premierCanvas');
if (element.getContext) {
	var canvas = element.getContext('2d');
}

Bien sur n’oubliez pas de laisser tout le code relatif au Canvas dans le if, sinon ça ne sert strictement à rien

Comment on dessine dedans ?

Pour commencer on va aborder le dessin de formes simples. Donc il faut savoir que tout se mesure en pixels et que par défault l’origine du Canvas se situe en haut à gauche donc toutes nos coordonnées se baseront sur ce point.

Les rectangles

  fillRect(x,y,width,height)
    Pour dessiner un rectangle plein
  strokeRect(x,y,width,height)
    Pour dessiner un rectangle vide
  clearRect(x,y,width,height)
    Pour effacer la zone spécifiée et la rendre transparente

function draw() {
	var element = document.getElementById('premierCanvas');
	if (element.getContext) {
		var canvas = element.getContext('2d');
		canvas.fillRect(10,10,280,280);
		canvas.clearRect(20,20,260,260);
		canvas.strokeRect(140,140,20,20);
	}
}

L’exemple ci-dessus va dessiner un grand rectangle, dont une grande partie sera ensuite effacée et rendue transparente, dans laquelle on dessinera un petit rectangle vide. L’exécution de la fonction draw() devrait donc vous donner ça :

Les chemins

Voilà la seule autre possibilité dessin, mais pas des moindres puisqu’elle permet de dessiner absolument toutes les formes possibles !
Cette méthode se décompose en 4 étapes bien distinctes :

beginPath() – On commence la création d’un chemin, donc il faut voir ça comme une liste d’instructions qui sera (ré)initialisée à chaque appel de cette méthode
On appelle les méthodes de dessin de chemins (on va voir ça bientôt)
closePath() – On peut ensuite appeler ou non cette méthode afin de fermer le chemin en partant du point courant jusqu’au point de départ.
Notez que si la forme est fermée, ou qu’il n’y a qu’un point cette méthode est inutile
Pour finir on appellera la méthode stroke() si on veut dessiner une forme vide, ou fill() pour une forme remplie

Je vais maintenant vous présenter les méthodes de base des chemins

moveTo(x,y)
Cette méthode permet de dessiner un point de départ, mais sachez que ce point est réinitialisé à chaque appel de beginPath() aux coordonnées (0,0)
lineTo(x,y)
Cette méthode permet de dessiner une ligne, partant du point de départ jusqu’au point passé en paramètre (x,y)
arc(x,y,rayon,angleDepart,angleFin,sensInverse)
Cette méthode permet de dessiner des arc, ou cercles avec un point central aux coordonnées (x,y), avec un angle de départ et de fin (en radians).
Le paramètre sensInverse permet de définir le sens de rotation, lorsqu’il est à false il dessine l’arc dans le sens des aiguilles d’une montre

Il existe d’autres fonctions qui permettent de dessiner des courbes, mais je n’ai pas jugé bon de les aborder car je souhaites seulement aborder les « bases ».
Je vous ait donc préparé un petit exemple vous montrant ce que l’ont peut rapidement réaliser avec les méthodes ci-dessus.

function draw() {
	var element = document.getElementById('premierCanvas');
	if (element.getContext) {
		var canvas = element.getContext('2d');
 
		// Rectangle vide
		canvas.beginPath();
		canvas.moveTo(5,5);
		canvas.lineTo(291,5);
		canvas.lineTo(5,293);
		canvas.closePath();
		canvas.stroke();
 
		// Rectangle plein
		canvas.beginPath();
		canvas.moveTo(7,295);
		canvas.lineTo(295,5);
		canvas.lineTo(295,295);
		canvas.fill();
 
		var angleFin = Math.PI * 2;
			// Cercle vide
			canvas.beginPath();
			canvas.arc(55,75,20,0,angleFin,true);
			canvas.stroke();
 
			// Cercle plein
			canvas.beginPath();
			canvas.arc(85,75,20,0,angleFin,true);
			canvas.fill();
	}
}

On dessine tout simplement 2 rectangles inversés ainsi que 2 cercles, un vide et un plein afin que vous voyez les deux méthodes. Et normalement l’exécution de la fonction draw() devrait vous dessiner quelque chose comme ça :

Les images

Voici une partie extrêmement importante et vraiment facile à aborder. En effet si vous commencez à jouer avec les Canvas, vous aurez très certainement besoin d’intégrer des images, utiliser un système de sprites et je vais de ce pas vous expliquer comment ça se passe.
Pour pouvoir utiliser votre image il faut bien évidemment qu’elle soit intégrée à la page, donc plusieurs cas de figure d’offrent à vous :

Soit votre image est incluse dans votre code HTML et dans ce cas il suffira d’utiliser document.getElementById ou document.getElementsByTagName pour pouvoir accéder à votre image

Sinon vous pouvez aussi inclure votre image à partir d’un fichier

// On crée notre objet
var pic = new Image();
// Puis on indique le chemin notre l'image
pic.src = 'mon-image.png';

La dernière méthode est d’utiliser les Data URI en gros ça corresponds simplement au code de votre image encodé en base64. De ce fait l’image peut être inclue très facilement et sans avoir à appeler d’autre(s) fichier(s) sur le serveur

var pic = 'data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC';

Maintenant que vous savez comment accéder à votre image, il ne reste plus qu’à la dessiner dans notre joli canvas. Pour ce faire nous allons utiliser la fonction drawImage().

drawImage(image,x,y)
dessinera l’image à la position souhaitée (dans les exemples ci-dessus image = pic)
drawImage(image,x,y,w,h)
vous permettra de redimensionner votre image
drawImage(image,x1,y1,w1,h1,x2,y2,w2,h2)
vous permet de dessiner seulement une partie de l’image source, et voici un petit schéma illustrant les paramètres de la fonction

Texte

Nous allons maintenant voir très brièvement comment écrire un texte personnalisé dans un Canvas, et pour cela un exemple sera bien plus parlant qu’un long discours, donc je vous laisse admirer…

// On défini la taille du texte, et la police d'écriture
canvas.font = "12px Verdana";
// Puis on va écrire notre texte à la position souhaitée
canvas.fillText("Hello world !",10,10);

Couleur et transparence

Maintenant nous allons voir comment mettre de la couleur à nos textes/dessins, et pour cela nous auront besoin de 2 propriétés qui peuvent utiliser différents format de couleur :

fillStyle()

// Nom de couleur (comme en CSS)
canvas.fillStyle = "rouge";
// Format hexadécimal
canvas.fillStyle = "#FF0000";
// Format RGB
canvas.fillStyle = "rgb(255,0,0)";
// Format RGB avec transparence de 0.0 (invisible) à 1.0 (opaque)
canvas.fillStyle = "rbga(255,0,0,1)";

strokeStyle()
Fonctionne de la même manière que fillStyle()

Maintenant concernant la transparence, la propriété globalAlpha nous permettra de modifier la valeur de transparence de dessins effectués dans le canvas. Pour vous illustrer les propos de ce chapitre, je vous propose sans plus attendre un exemple :

function draw() {
	var element = document.getElementById('premierCanvas');
	if (element.getContext) {
		var canvas = element.getContext('2d');
 
		// On initialise le tableau de couleur,
		// le compteur de tour,
		// et les positions de départ
		var color = [
			'orange',
			'#ff017d',
			'rgb(0,255,0)',
			'rgba(0,0,255,0.1)'
		],
		c = 0,
		x = 25,
		y = 25;
 
		for (var i=0;i<8;i++) {
			// On trace le chemin du cercle
			canvas.beginPath();
			canvas.arc(x,y,20,0,Math.PI*2,true);
 
			// Cette condition sera vraie une foi sur 2
			if (i%2 == 0) {
				// On dessinera juste le contour
				canvas.strokeStyle = color[c];
				canvas.stroke();
				x += 83;
			}
			else {
				// On aura un dessin rempli
				canvas.fillStyle = color[c];
				canvas.fill();
				x += 83;
				c++;
 
				// Si on est à la moitié de la boucle,
				// on passe à la deuxième ligne
				if ((c == 2) && (y == 25)) {
					y = 70;
					x = 25;
				}
			}
		}		
	}
}

Ce qui devrait donner quelque chose du genre :

Conclusion

Ce tutoriel est vraiment simpliste et sert plutôt de manuel qu’autre chose, maintenant j’ai essayé de m’exprimer de façon simple, mais je ne suis pas sur de pouvoir être objectif sur ce point, donc je vous invite à me faire part de vos remarques/commentaires.

Je tiens à préciser que je n’ai pas parlé de tout ce que j’aurai voulu car en abordant seulement les bases, le tutoriel a atteint une taille assez conséquente, donc je vous propose d’aller voir la documentation du developer center de Mozilla pour plus d’informations.

Allez à vous de jouer !

Séance rétro-gaming

z0va — Mon, 26 Jul 2010 15:27:23 +0000

Aujourd’hui j’ai préparé une petite sélection de revues vidéos de vieux jeux de la Sega MegaDrive (aka genesis). Ces jeux sont mes préférés sur cette console et j’y joues encore et toujours, car pour moi ils ne pourront jamais vieillir !
Cet article me permet par la même occasion de vous faire découvrir LE meilleur testeur de jeux vidéos que je connaisse : le grand Hooper \o/

Photo réalisée par nickstone333

Commençons sans plus attendre avec le meilleur de cette sélection :

The Revenge Of Shinobi

Il y a aussi le très célèbre Dragon Ball Z – L’appel du Destin

Puis le magnifique Sonic The Hedgehog

Et pour finir le cultissime Desert Strike

S’il y avait quelque chose à retenir de cette console c’est surtout ces 4 jeux là que je citerait, mais ayant voulu me limiter à Hooper certains titres ont été oubliés comme les excellents Beat them all que sont Street of Rage ou Golden Axe.

Ouverture du blog

z0va — Sun, 25 Jul 2010 15:46:59 +0000

J’ai décidé de réouvrir un blog, afin de pouvoir vous transmettre de manière simple, tout ce qui touche à l’univers des jeux vidéos (2D), allant de mes créations, à mes coups de cœur, mais j’envisage aussi de publier des tutoriels afin de vous aiguiller dans ce processus.

À l’heure d’aujourd’hui, je m’adonne surtout à la créations de jeux en JavaScript. Avec l’arrivée de l’élément Canvas (issu du HTML5) il devient très simple de développer ses propres jeux et ainsi pouvoir les publier sur internet très rapidement. Le développement de l’HTML5 n’étant qu’à son début, c’est une voie prometteuse !

Son support est quand même bien étendu car n’importe quel personne ayant un « vrai » navigateur web pourra donc accéder à votre jeu sans avoir besoin de télécharger quoi que ce soit. C’est aussi vrai pour les Smartphones qui sont encore un peu faibles pour offrir des choses poussées mais qui à l’avenir auront sans problème adopté cette solution de remplacement au bon vieux Flash.

Attention je ne dis pas que l’HTML5 est censé remplacer Flash à part entière, mais je dis juste que dans certains contextes il peut être une alternative très intéressante.

Bref, je vous prépare quelques démo afin de vous montrer ce qu’on peut faire avec peu de choses et un peu de temps !