Hamster Life - Devlog #1

Youpi un devlog !

Un devlog est un blog permettant de parler des nouveautés et/ou modifications apportés au développement d'un projet, c'est dans ce genre de blog que nous allons voir précisément ce qui a été fait pour le jeu !

Un splashscreen

Vous vous souvenez de ce gif utilisé pour un blog ?

Il est maintenant en splashscreen, c'est à dire qu'au lancement du jeu, on a ce petit gif qui se lance avant d'afficher le menu principal. Théoriquement il est censé permettre de charger certains éléments avant d'afficher le menu, mais pour le moment il n'est là que pour compiler les shaders !

Il faut savoir que pour le rendu à l'écran, j'utilise OpenGL et je ne savais pas, mais il prend bêtement qu'en charge une simple image, pas un gif, pas une vidéo, juste une image. Et c'est pour cela que techniquement, on pourrait faire ça sans un gif.

Comme il est plus simple pour moi de décoder une image fixe plutôt qu'un gif, j'ai préféré alors un peu triché... Voici en fin de compte l'image utilisée :

On appel ça un SpriteSheet, ce sont plein de petites images qui se suivent, formant alors une animation. Et on affiche chaque petit bout de l'image selon les besoins (c'est un peu ce qu'on a avec les films en pellicules).

Je voulais marquer le coup et montrer un effort plus grand sur les détails, comme je l'ai dit, l'objectif contrairement à Minesweeper et d'en faire un jeu plus intéressant et beaucoup plus travaillé.

UI

J'ai beaucoup utilisé Unity et j'aime beaucoup la façons dont-il gérait l'interface utilisateur (même si maintenant c'est avec un autre système nommé l'UI Toolkit). Techniquement, je lui trouvais des défauts, particulièrement sur le fait qu'il est difficile de créer une interface utilisateur complète depuis le code (tout est plutôt adapté à une configuration sur l'éditeur lui-même).

Pour la création de mon UI, je m'en suis alors très inspiré tout en l'adaptant à mes besoins.

J'avais déjà pu travaillé sur une interface utilisateur complète sur le moteur SPEngine, ce que je vais vous présenter ci-dessous était principalement déjà présent. Il y a donc un mélange entre ce que j'avais déjà pu faire, ce que j'ai ajouté et ce que j'ai modifié.

Pivot

Si je vous demande de mettre une image à 5x et 7y, est-ce que c'est le centre de l'image qui doit se trouver à cette endroit ou ça doit être par exemple en bas à gauche de l'image qui doit se trouver à 5x et 7y.

Pour résoudre ce problème on y met un point de pivot (ou appelé aussi un point d'origine). ce point de pivot représente un pourcentage en X et en Y.

Tous les contenus dans XYEngine, vont de gauche à droite et de bas en haut (C'est une règle global que j'ai mit en place, pour garder une certaine cohérence).

Pour avoir une valeur positif de Y, il faut aller vers le haut et pour une valeur positif de X, il faut aller vers la droite.

0% en x, sera en à gauche, 50% au milieu et 100% à droite.
0% en y, sera en bas, 50% au milieu et 100% en haut.

En sachant ça, je peut aisément définir le point de pivot !

L'encrage

C'est quelque chose d'un peu complexe à expliquer, mais qui permet d'avoir un UI cohérent. L'encrage à le même fonctionnement que le pivot mais il est appliqué à l'écran, par exemple si je vous dit de mettre mon objet à 0x et 0y : il doit être en bas à gauche, ou en haut à gauche ?

Comme je l'ai dit, pour XYEngine, tout est dans le même sens, 0x et 0y sera et restera toujours en bas à gauche. Mais si je souhaite mettre mon objet en bas à droite, je peux pas lui donner une valeur en pixel (les écrans n'ont pas tous la même taille). Donc l'encrage rentre en jeu.

Si je met mon encrage à 100% x et 0% y (comme je l'ai dit, ça fonctionne de la même manière qu'un point de pivot), la valeur 0x et 0y sera en bas à droite.

Ca peut parraitre déroutant, mais ça permet d'avoir une interface utilisateur responsive (elle s'adapte à l'écran) et qui en place facilite sa création. Par exemple, ça me permet aussi d'avoir un bouton qui se placera au centre de l'écran et qui aura pour taille 30% de largeur à celui de l'écran. (oui car ça peut aussi changer la taille d'un élément)

Sur XYEngine, il est là et complet, vous le verrez peut-être par vous même en testant mes futurs projets.

Il lui faudrait un blog à lui seul pour pouvoir expliquer concrètement son fonctionnement et toute les possibilités.

Le Canvas

C'est un petit début !

L'objectif du canvas et d'avoir un endroit pour définir le comportement de l'UI. Pour être franc... Il fait simplement pour le moment apte de présence, mais il gère bien entendu certain aspect de l'interface utilisateur.

Il permet pour le moment aucune configuration, j'attends d'avoir besoin d'ajouter cela pour le programmer.

L'animation

C'est l'exemple même, que la plus part du temps, le plus dur pour moi n'est pas le fait de le programmer, mais plutôt de savoir en théorie comment il doit fonctionner.

Un système d'animation peut-être assez simple à mettre en place, mais je cherche surtout à le rendre polyvalent. Par exemple, si je souhaite faire des animations pour :

• l'UI
• les objets dans le jeu
• les maillages (ou meshes en anglais)
• ou autres...

Il me faut un système solide, pouvant être utilisé sur ces différents cas de figures, et c'est pour cela, que j'ai créé ceci :

Nous avons plusieurs parties importantes : Animation qui à pour objectif d'être le chef d'ochestre, il gère le temps qui passe et s'assure que chaques AnimationTrack soient dans les temps.

L'AnimationTrack va contenir une liste de KeyFrame et ce sont les keyframes qui ont à la fois la valeur et le temps où l'appliquer.

Ainsi, comme le schéma le montre :

• Une animation contient une seule valeur de temps et plusieurs Track.
• Chaque Track à un objectif : la position, la rotation, ou autre...
• Les Tracks ont tous des Keyframes qui eux, definissent la valeur à avoir au temps donné.

Les Tracks (ou pistes en français), sont d'un type générique, ce qui veut dire, que la valeur à modifié peut-être ce que l'on souhaite par exemple un chiffre, une lettre, une texture, etc... (ça renforce le souhait de pouvoir l'utiliser pour plusieurs types d'animations).

Voici, par exemple le bout de code permettant de paramètrer l'animation du SplashScreen :

Keyframe<Rectangle>[] uvKeys =
[
    new (0, texture.GetUV(0)), new (10, texture.GetUV(1)), new (11, texture.GetUV(2)), new (12, texture.GetUV(3)), new (13, texture.GetUV(4)),
    new (14, texture.GetUV(5)), new (24, texture.GetUV(6)), new (25, texture.GetUV(7))
];
animation.AddTrack(new AnimationTrackProperty<Rectangle>(uvKeys, value => mesh.SetQuadUv(0, value.position00, value.position11).Apply()));
animation.Play();

Il est très simple à mettre en place, même si il lui manque encore beaucoup de fonctionnalité pour un système d'animation complet (mais tout cela, sera ajouté selon mes besoins).

Mon avancement

Bon finalement c'est un peu compliqué de montrer une certaine avancée, je me suis beaucoup attardé par exemple sur le mouvement des clients. Sauf que je n'avais rien en fond permettant de voir si ce genre de mouvement rend bien pour le jeu.

En fait, j'ai fais les choses complètements à l'envers, au lieu de travailler sur le magasin ; mettre en place un tilemap etc... Je me retrouvais à vouloir animer un client dans un monde vide.

J'ai tardivement commencé à créer le magasin et j'y ai ajouté quelques mouvements de caméra à faire avec la souri, voici une petite vidéo de démonstration :

On peut y voir une petites démonstration du déplacement des clients, je voulais avoir un aspect de pion dans un jeu de plateau.

Comme prévu, il était un peu long à sortir ce blog...

Finalement, j'ai fait beaucoup de chose un peu technique où j'avais à la base donné de belle et grande explication. Le soucis, c'est que la compréhension selon moi assez flou, donc je vous ai donné des explications plutôt bref !

En tout cas, un nouveau "format" est présent, ce sont les vidéos, car j'ai pu remarqué que j'avais beaucoup de mal à expliquer certaine chose, donc maintenant j'ajouterais parfois des petites vidéos !