Sudoku des îles est le second jeu de Faguo Games. Je l'ai programmé avec les même technologies que Calixa Code Breaker. Un algorithme génère des niveaux aléatoirement, adapté au niveau de difficulté choisi. Ce jeu est lui aussi disponible sur les 3 plateformes : Android, iTunes et Facebook.
Si comme moi vous n'aimez pas le sudoku, celui-ci grace à son graphisme originale donne nettement plus envie de jouer !
Affichage des articles dont le libellé est flash. Afficher tous les articles
Affichage des articles dont le libellé est flash. Afficher tous les articles
mercredi 17 juillet 2013
Calixa Code Breaker, le premier jeu de Faguo Games
Calixa Code Breaker est le tout premier jeu de Faguo Games. Ce jeu est disponible sur Android, iTunes, et Facebook.
J'ai programmé ce jeu avec Adobe AIR et ND2D. Lors du démarrage du projet, ND2D était plus performant que Starling. Pour la génération des assets graphique, j'utilise mon propre script JSFL d'export. Celui-ci en fonction d'une charte de nommage exporte les assets dans differents DPI. Un autre JSFL exporte les animations de la timeline de flash sous forme de EazeTween notamment utilisé pour l'animation d'introduction du jeu.
Le même code source est utilisé pour les 3 versions. La compilation se fait avec un script en python qui génère le fichier xml de configuration AIR pour android ou ios. Il exécute les commandes MXMLC et ADT en fonction du profil d'export choisit.
Notre équipe a beaucoup appris en travaillant sur ce premier projet. Nous avions déjà travaillé sur de nombreux jeux flash auparavant pour nos clients. Ces jeux avaient pour but de remplir des bases de données d'internautes en offrant via un tirage au sort ou un instant gagnant de nombreux lots. Ils bénéficiant donc d'une grande visibilité via la marque, et d'un intérêt pour les joueurs via les lots.
Mais pour Calixa Code Breaker, le plaisir de jouer doit être notre priorité. Pour continuer à jouer, le joueur doit pouvoir progresser. La difficulté est croissante, et de nouveaux éléments de gameplay arrivent de temps en temps. Nous avons donc après la première beta test privée ajouté un mode aventure à travers l'Europe qui permet de cumuler un butin. Ce mode aventure permet aux joueurs qui cherchent la difficulté, de passer rapidement de villes en villes en sautant les niveaux optionnels, et aux joueurs acharnés du scorring de faire l'intégralité des niveaux, et de refaire ceux qu'ils ont déjà fait pour avoir un plus gros butin que leurs amis.
J'ai programmé ce jeu avec Adobe AIR et ND2D. Lors du démarrage du projet, ND2D était plus performant que Starling. Pour la génération des assets graphique, j'utilise mon propre script JSFL d'export. Celui-ci en fonction d'une charte de nommage exporte les assets dans differents DPI. Un autre JSFL exporte les animations de la timeline de flash sous forme de EazeTween notamment utilisé pour l'animation d'introduction du jeu.
Le même code source est utilisé pour les 3 versions. La compilation se fait avec un script en python qui génère le fichier xml de configuration AIR pour android ou ios. Il exécute les commandes MXMLC et ADT en fonction du profil d'export choisit.
Notre équipe a beaucoup appris en travaillant sur ce premier projet. Nous avions déjà travaillé sur de nombreux jeux flash auparavant pour nos clients. Ces jeux avaient pour but de remplir des bases de données d'internautes en offrant via un tirage au sort ou un instant gagnant de nombreux lots. Ils bénéficiant donc d'une grande visibilité via la marque, et d'un intérêt pour les joueurs via les lots.
Mais pour Calixa Code Breaker, le plaisir de jouer doit être notre priorité. Pour continuer à jouer, le joueur doit pouvoir progresser. La difficulté est croissante, et de nouveaux éléments de gameplay arrivent de temps en temps. Nous avons donc après la première beta test privée ajouté un mode aventure à travers l'Europe qui permet de cumuler un butin. Ce mode aventure permet aux joueurs qui cherchent la difficulté, de passer rapidement de villes en villes en sautant les niveaux optionnels, et aux joueurs acharnés du scorring de faire l'intégralité des niveaux, et de refaire ceux qu'ils ont déjà fait pour avoir un plus gros butin que leurs amis.
Shader pour paysage
En voulant pousser plus loin mon précédent shader sous-marin, j'ai créé celui-ci qui me permet de rendre ce paysage.
Pour plus de détails sur la génération de ce décor :
Pour plus de détails sur la génération de ce décor :
- Une texture noir et blanc est utilisée pour déplacer verticalement les vertex.
- Une texture RGBA est utilisée pour mixer les 4 types de sols. par exemple, du rouge 100% affiche de l'herbe à 100%.
- Si la coordonnée Y du fragment shader est inférieure à zéro, j'applique un displacement map + un fog plus fort.
Shader sous-marin
Voici mon premier post-process développé avec Minko, il s'agit d'un shader d'effet d'ondulation sous-marine. Bien qu'en réalité cet effet ne se produit que quand la caméra est en dehors de l'eau, cette démo a été pour moi un bon exercice.
Le procédé est simple, j'utilise une image de perlin noise que j'utilise comme "displacement map". Je déplace les UVs du perlin noise pour créer cet effet d'ondulation.
J'ai aussi créé un shader spécial pour le sol pour mixer plusieurs image (textures de sol) + effet lumineux sur lequel j'applique aussi un "displacement map".
Vous pouvez déplacer le sous-marin avec les 4 flèches de dirrection et les touches A et Q.
Le procédé est simple, j'utilise une image de perlin noise que j'utilise comme "displacement map". Je déplace les UVs du perlin noise pour créer cet effet d'ondulation.
J'ai aussi créé un shader spécial pour le sol pour mixer plusieurs image (textures de sol) + effet lumineux sur lequel j'applique aussi un "displacement map".
Vous pouvez déplacer le sous-marin avec les 4 flèches de dirrection et les touches A et Q.
The Count : Mon premier jeu Android
Voici mon tout premier jeu Android : The Count. Je l'ai développé en AIR / Starling. Ce jeu reprend le concept du jeu "le compte est bon" dans "Des chiffres et des lettres".
Au début de la partie, vous avez 2 minutes pour réaliser un maximum d'opérations. À chaque bonne opération, vous gagnez 10 secondes de jeu supplémentaire, ainsi que des points. Si vous jouez en mode "facebook connect" votre meilleur score est enregistré sur facebook via l'API de jeux de facebook.
Dans l'écran des scores, vous pouvez comparer votre score avec celui de vos amis facebook.
Pour le facebook connect, j'ai utilisé l'ANE gratuit de freshplanet et j'ai développé une classe FacebookTexture qui charge progressivement une liste de vignettes d'amis facebook. Elle me permet d'appliquer la texture sur une Image de starling même si celle-ci n'est pas encore loadée. La texture se met automatiquement à jour après chaque chargements. L'ensemble des vignettes est dans une seule texture ce qui permet de limiter les drawcalls.
Au début de la partie, vous avez 2 minutes pour réaliser un maximum d'opérations. À chaque bonne opération, vous gagnez 10 secondes de jeu supplémentaire, ainsi que des points. Si vous jouez en mode "facebook connect" votre meilleur score est enregistré sur facebook via l'API de jeux de facebook.
Dans l'écran des scores, vous pouvez comparer votre score avec celui de vos amis facebook.
Pour le facebook connect, j'ai utilisé l'ANE gratuit de freshplanet et j'ai développé une classe FacebookTexture qui charge progressivement une liste de vignettes d'amis facebook. Elle me permet d'appliquer la texture sur une Image de starling même si celle-ci n'est pas encore loadée. La texture se met automatiquement à jour après chaque chargements. L'ensemble des vignettes est dans une seule texture ce qui permet de limiter les drawcalls.
mercredi 22 août 2012
mardi 21 août 2012
Colormix Shader
Voici un shader réalisé sur shaderlab qui permet de changer la couleur d'un objet avec "une onde de choque" comme transition.
Minko / shader lab, mon premier shader
ShaderLab est un bon outil pour apprendre à créer des shaders, il permet en temps réel de les tester et de voir les possibles messages d'erreurs.
Le shader par défaut permet de colorer un objet et de l'éclairer à partir de la caméra. Pour bien comprendre, un shader est divisé en 2 parties : Vertex Shader (en bleu dans shader lab), qui permet de traiter le positionnement des vertex, et le Fragment Shader (en jaune dans shader lab) qui permet de traiter les pixels à afficher.
Le shader n'est pas un langage de programmation avancé. Il n'y a, par exemple, pas d'instruction if ou de boucle. Tout doit se faire par opérations mathématique.
Pour débuter notre premier shader, nous allons supprimer tous les noeuds, et ne laisser que Output Position et Output Color. Ces deux noeuds correspondent aux résultats de nos opérations, et à ce que la carte graphique doit afficher.
Le shader par défaut permet de colorer un objet et de l'éclairer à partir de la caméra. Pour bien comprendre, un shader est divisé en 2 parties : Vertex Shader (en bleu dans shader lab), qui permet de traiter le positionnement des vertex, et le Fragment Shader (en jaune dans shader lab) qui permet de traiter les pixels à afficher.
Le shader n'est pas un langage de programmation avancé. Il n'y a, par exemple, pas d'instruction if ou de boucle. Tout doit se faire par opérations mathématique.
Pour débuter notre premier shader, nous allons supprimer tous les noeuds, et ne laisser que Output Position et Output Color. Ces deux noeuds correspondent aux résultats de nos opérations, et à ce que la carte graphique doit afficher.
Output Position :
Les vertex correspondent (entre autre) aux coordonnées XYZ d'un point, qui composent des triangles, qui composent à leur tour un objet 3D. Cet objet peut être déplacé dans le monde 3D, sans pour autant changer les coordonnées de ses vertex. Les matrices contiennent des informations concernant la position, la rotation et la taille. Pour afficher un objet 3D à l'écran, il faut prendre les coordonnées de ses vertex (locales), les transformer en coordonnées relatives au monde, puis, transformer ces coordonnées en coordonnées relatives à la caméra. Ces transformations se font par multiplications de la matrice avec le vertex.
coordonnées écran = coordonnées locales * matrice monde * matrice caméra * matrice projection
![]() |
| Le vertex Shader le plus simple, décomposé |
Output Color :
Le Output Color attend une float4, c'est à dire une valeur à 4 composants RGBA, ce qui permet de connaitre la couleur du pixel à remplir.
![]() |
| Le Fragment shader le plus simple (aplat de couleur) |
vendredi 18 novembre 2011
Leschinois.com Premier site Stage3D / Away3D
Le site leschinois.com est le premier site web exploitant Stage3D, sorti le même jour que flash player 11. Nous avons eu accès à la beta privée de Flashplayer 11 et de Away3D et nous avons conçu ce site en collaboration avec les équipes de Adobe.
Nos efforts on été récompensés par un FWA site of the day !
Nos efforts on été récompensés par un FWA site of the day !
Inscription à :
Articles (Atom)












