A Game Studio

Unity étape par étape - jeu de ballon

Thu, 21 May 2020 00:00:00 GMT

Aperçu:
→ Installer Unity
→ Afficher un sprite
→ Animer un sprite
→ Les règles du jeu
→ Le moteur physique
→ Trucs et astuces

[Note: Article en cours d’écriture, il n’est pas encore finalisé. Merci de votre compréhension]

Cet article a vocation de tutorial et de support de cours pour apprendre les bases de Unity en 2D. Aucun pré-requis n’est nécessaire, mais il se peut que vous deviez explorer certaines fonctionnalités de Unity par vous même pour réussir certaines étapes.

Il s’agira de développer avec Unity un jeu de ballon, prétexte pour apprendre des notions clés tel que :

L’initialisation d’un projet
La configuration d’un environnement de développement
l’importation de sprites
les scripts pour manipuler les entités (camera, personnage)
le rendu de sprites animés (via script et via Animator)
le moteur physique 2D
les règles du jeu via scripting

Installer Unity

Télécharger et installer Unity Hub
Depuis le hub, installer la dernière version stable de Unity (Installs > Add > Latest Official Release)
Dans les modules,
installer Visual Studio Community 2019 si vous souhaitez l’utiliser comme environnement de développement (IDE). Nous utiliserons plutôt Visual Studio Code (VSCode) pour la suite de ce tutorial.
installer les platformes pour lesquelles vous souhaiter compiler votre projet, au moins une, par exemple “Windows build support” si vous êtes sous windows.
Télécharger et installer Visual Studio Code
Dans VSCode, installer les extensions “C#” et “Debugger for Unity”
Créer un nouveau projet depuis Unity HUB (Projects > New > 2D), choisir un nom et un dossier de destination
Dans Unity, configurer votre éditeur de script externe pour être VSCode en installant le paquet “Visual Code Extension depuis le package manager”.
Suivre la manipulation suivante pour configurer l’éditeur externe dans “edit > Preferences > External Tools”.

L’interface

Les onglets manipulés fréquement sont :

La hiérarchie : va de paire avec la scène. Dans Unity on manipule des objets GameObject qu’on peut hierarchiser dans la scène. un objet peut avoir des enfants et être situé dans un parent. Lorsqu’un parent est déplacé, redimensionné ou tourné, alors les objets enfants subissent la transformation relative à leur parent.
La scène : Les objets ayant des composants visuels sont affichés sur la scène. Ils peuvent être manipulés (déplacements, etc.) via les outils de la barre d’outils. Les objets n’ayant pas de composants visuels sont également manipulés mais ne peuvent être sélectionnés que via l’onglet hiérarchie. Il est fréquent d’avoir des scènes différentes pour différentes étapes du jeu et de basculer d’une scène à l’autre via des scripts.
Le jeu : Lorsqu’on clique sur le triangle “lecture” en haut de la scène, Unity démarre le jeu et bascule directement sur l’onglet “jet” qui affiche le rendu final du jeu. Ce rendu est celui de la (ou des) caméra(s) configurée(s) dans la scène.
L’inspecteur : c’est là qu’on peut modifier les propriétés de l’objet sélectionné (qui peut être sur la scène/hierarchie ou dans la vue projet) et de ces composants. C’est également là qu’on peut ajouter à l’objet des nouveaux composants. Un composant est un script qui hérite de MonoBehaviour et qui enrichit l’objet de nouveaux comportements. Certains sont fournis par défaut avec Unity (par exemple SpriteRenderer pour afficher une image) et il est souvent nécessaire de créer des composants personnalités (via le bouton “Add Component > New Script” de l’inspecteur).
Le projet : Rattaché au système de fichiers du système d’exploitation, c’est à dire au dossier du projet, c’est là qu’on ajoutera toutes les assets (images, sons, scripts, etc.) qui serviront au fonctionnement du projet.
La console : C’est là qu’apparaitront les erreurs de compilations et les Exceptions non capturées lors de l’exécution (runtime). A consulter lorsque tout ne se passe pas comme prévu.

Afficher un sprite

Ajouter une image (glisser déposer) depuis votre exlorateur de fichier vers la vue projet OU créer le fichier image dans le dossier Assets/ de votre projet.
Dans la vue projet, sélectionner l’image puis regarder l’inspecteur: il affiche les informations d’importation de texture.
En projet 2D la texture est automatiquement configurée de type “sprite (2D and UI)“. Pour texturer un objet 3D on utiliserait “default”. Les autres modes sont pour des usages avancés (vous le saurez quand vous en aurez besoin).
“PixelsPerUnit” Indique à Unity quelle sera la densité de pixels à utiliser par rapport au système d’unité du moteur. Unity est un moteur 3D, et comme la notion de “pixel” n’existe pas dans un espace 3D Unity propose un système d’unité de référence. Ces unités sont totalement arbitraire (on dira “une taille de une unité” ou “une taille de un”) mais permettent de garantir la cohérence des proportions entre les assets quelle que soit la position de la caméra et la résolution finale. Nous n’apprendrons pas à afficher un sprite en rendu pixel perfect (1px du sprite rendu sur 1px dans le rendu final), si vous souhaitez le faire voici un tutorial : https://blogs.unity3d.com/2019/03/13/2d-pixel-perfect-how-to-set-up-your-unity-project-for-retro-8-bits-games/
Si vous utilisez du pixel art, passer le “filter mode” en “Point (no filter)” pour un meilleur rendu.
Depuis la vue projet, glisser déposer l’image vers la scène. Celà créera automatiquement un GameObject avec un composant SpriteRenderer configurer pour afficher votre image.

Autres exemples courants

Sprite de fond avec répétition

Particularités :

Draw Mode: Tiled (préciser le nombre de répétitions dans Width et Height)
(Configuration d’importation de l’image) Mesh Type: FullRect

Forme géométrique de base (ex. hexagone)

Particularité :

Créé depuis la vue Project via “clic droit > Create > Sprite > Hexagon”

Animer un sprite

Deux méthodes seront présentées ci-dessous pour animer des sprites: avec un script ou avec l’outil Animator de Unity.

Pour toutes les méthodes : créer un sprite multiple à partir d’une image spritesheet, extraire les séquences en sélectionnant les images voulues dans l’onglet projet et en les déplaçant vers la scène.

Image de référence pour le sprite :

Option 1: Animer à la Unity

Configurer le Controller au niveau de l’Animator qui a été ajouté automatiquement sur un des game object créés, ajouter des transitions basées sur des propriétés pour basculer d’une animation à l’autre.

Utiliser un script pour modifier la propriété du controller.

AnimateGirl.cs

using UnityEngine;

[RequireComponent(typeof(Animator))]
public class AnimateGirl : MonoBehaviour {

    Animator animator;

    private void Start() {
        animator = GetComponent<Animator>();
    }

    void Update() {
        if (Input.GetKey(KeyCode.RightArrow)) {
            animator.SetFloat("Speed", 2f);
        } else {
            animator.SetFloat("Speed", 0f);
        }
    }
}

Option 2: Animer un sprite via script

Personnellement, j’évite le plus possible d’utiliser les Controller et Animator de Unity pour la 2D: ils apportent énormément de complexité pour simplement faire défiler des sprites. Aussi je préfère écrire moi-même un script qui va venir modifier les images du SpriteRenderer à fréquence régulière pour créer l’animation.

Je crée un script “SpritesheetAnimator” qui s’occupe d’accepter une configuration de séquences pour un gameObject et de modifier l’image du SpriteRenderer Associé, et un deuxième script comme précédemment pour piloter l’animation en fonction du gameplay.

SpritesheetAnimator.cs

using System;
using System.Linq;
using UnityEngine;

// Lister toutes les animations possibles ici
public enum Anims {
    Iddle,
    Run,
    Roll
}

// Structure de données pour définir une animation
[Serializable]
public struct AnimDefinition {
    public Anims name;
    public Sprite[] frames;
}

// L'animator va changer le sprite du SpriteRenderer à une certaine fréquence (par défaut 25 fois par secondes)
[RequireComponent(typeof(SpriteRenderer))]
public class SpritesheetAnimator : MonoBehaviour {

    [Tooltip("animation speed in images per seconds")]
    public float animationSpeed = 25;

    public AnimDefinition[] animations;

    // accessors (getters)
    public AnimDefinition CurrentAnimation => currentAnimation;
    public int LoopCount => loopCount;
    public float animationFrameDuration => 1f / animationSpeed;

    // private properties
    private SpriteRenderer spriteRenderer;
    private AnimDefinition currentAnimation;

    private int currentFrameIndex = 0;

    // durée en seconde avant l'affichage de la prochaine image
    private float nextFrameCoolDown;

    // nombre de fois que l'animation est jouée complètement
    private int loopCount = 0;

    void Start() {
        spriteRenderer = GetComponent<SpriteRenderer>();
        nextFrameCoolDown = animationFrameDuration;
        currentAnimation = animations[0];
    }

    void Update() {
        if (currentAnimation.frames.Length == 0) return;

        // déclenche la frame suivante si le temps est écoulé
        if (nextFrameCoolDown <= 0) {
            AnimateNextFrame();
        }

        // si on change la vitesse de l'animation, raccourci le temps d'attente si nécessaire
        if (animationFrameDuration < nextFrameCoolDown) nextFrameCoolDown = animationFrameDuration;

        // écoule le temps avant la prochaine image
        nextFrameCoolDown -= Time.deltaTime;
    }

    public void AnimateNextFrame() {
        // calcule l'indice de l'image suivante
        currentFrameIndex = (currentFrameIndex + 1) % currentAnimation.frames.Length;
        // affiche l'image suivante
        spriteRenderer.sprite = currentAnimation.frames[currentFrameIndex];
        // Ajoute un temps d'attente calculé à partir de la fréquence de l'animation
        nextFrameCoolDown += animationFrameDuration;
        // compte le nombre de fois que l'animation a été jouée
        if (currentFrameIndex == 0) loopCount++;
    }

    public void Play(Anims nextAnimation) {
        // Si l'animation est déjà jouée, on ne fait rien
        if (currentAnimation.name == nextAnimation) return;
        // trouve l'animation correspondante dans la liste
        currentAnimation = animations.First(a => a.name == nextAnimation);
        // réinitialise à la première image de la séquence
        currentFrameIndex = 0;
        loopCount = 0;
    }
}

AnimateGirlSpritesheet.cs

using UnityEngine;

[RequireComponent(typeof(SpritesheetAnimator))]
public class AnimateGirlSpritesheet : MonoBehaviour {
    SpritesheetAnimator animator;

    void Start() {
        animator = GetComponent<SpritesheetAnimator>();
    }

    void Update() {
        if (Input.GetKey(KeyCode.RightArrow)) {
            animator.Play(Anims.Run);
        } else if (Input.GetKey(KeyCode.DownArrow)) {
            animator.Play(Anims.Roll);
        } else {
            animator.Play(Anims.Iddle);
        }
    }
}

Le debugger

Debugger (déboguer en français, peu utilisé), permet d’inspecter le code alors qu’il est en train d’être exécuté par le programmes. Avec Unity, votre outillage VSCode (avec les plugins installés précédemment) vous permettent d’utiliser directement cette fonctionnalité.

1er cas: le fichier launch.json n’existe ppas dans le projet

Pour le configurer (première utilisation uniquement), accéde à l’onglet debug (1) puis créez un fichier launch.json si proosé (2).

2eme cas: le fichier existe déjà et “Unity debugger” ne fait pas partie des environnements proposés

Dans ce cas ajouter l’environnement comme indiqué dans l’image ci-dessous.

Choisissez l’environnement “Unity debugger”.

Utiliser le debugger

Une fois l’environnement d’exécution “Unity Debugger” sélectionner, lancer “l’attache” en cliquant sur le triangle vert à côté de l’environnement.

L’outil de debugging de VSCode va alors s’attacher au debugger intégré à Unity, et vous pourrez alors commencer à mettre des points d’arrêts (breakpoint en anglais).

Pour mettre un point d’arrêt cliquer sur la marge gauche d’un ligne de code que vous souhaitez inspecter.

Démarrer le jeu et faites en sorte que la ligne qui contient le point d’arrêt soit atteinte. Le jeu va alors se mettre en pause et la fenêtre se transformer de la façon suivante :

(1) La ligne où le debugger est arrêté est surlignée en jaune
(2) Une barre de navigation en haut à droite permet de controler l’exécution du programme: reprendre, avancer de une ligne, debugger l’intérieur de la fonction, terminer la fonction et debugger à la sortie, relancer le debugger (interrompt la session en cours), arrête de debugger.
(3) en haut à gauche l’encart “variables” permet d’inspecter les variables du contexte en cours
(4) à gauche milieu “watch” permet de saisir des expressions à évaluer et d’afficher le résultat par rapport au contexte en cours
(5) à gauche en bas “call stack” permet de remonter dans la pile d’appel du programme (trouver les contextes des fonctions appelantes)
(6) à gauche en bas “breakpoints” permet de gérer la liste des breakpoints actuellement acquis
(7) il est possible de survoler les variables avec le souris pour connaitre leur valeur (ex: maxDistancePerFrame dans cette image)

Le moteur physique

Pour le vocabulaire et les notions clés :

https://teachings.samuel-bouchet.fr/jeu-video/essentiel_physique#/

Déplacement d’un personnage dans un univers physique

Ajouter un Rigidbody2D configuré en dynamique. Cocher la case “Contraints: Freeze rotation Z” pour que le sprite ne tourne pas sur lui même.
Ajouter un CircleCollider2D. Il est possible d’ajouter plusieurs collider2D sur un même gameObject pour créer une forme composée, il en faut au moins un. Ici le circle collider eut être édité en cliquant sur le bouton “edit collider” et en modifiant la taille et la position du cercle qui apparait sur le personnage.

Ensuite, il faudra utiliser un script pour déplacer le personnage. Lorsqu’on travaille avec le moteur physique de Unity :

on doit toujours déplacer l’objet en modifiant le RigidBody2D. On par exemple le déplacer en utilisant dans un script rigidbody2D.velocity = new Vector2(1, 0) pour donner une vitesse de 1 unité par seconde vers la droite, le moteur physique se chargera de mettre à jour la position.
il est préférable de faire cette action dans une fonction void FixedUpdate() { plutôt que dans l’habituel void Update() { car FixedUpdate est appelé à chaque étape du moteur physique alors que Update est appelé à chaque rendu de frame du moteur, les 2 n’étant pas forcément synchronisés en fonction de la configuration du moteur de jeu et des performances de la machine.

Les règles du jeu

Créer des buts sur les côtés
Lorsque la balle entre dans un but,
- +1 point pour l’équipe de la couleur opposée
- la balle est remise au milieu
- les joueurs sont repositionnés de chaque côté
lorsqu’une équipe à 3 points
- l’équipe est indiquée vainqueur
- les points sont remis à 0
les joueurs sont bloqués par la balle et ne la font pas bouger
les joueurs sont attaché à un marteau par un lien de longueur fixe, en bougeant ils peuvent donner de l’inertie et faire tourner le marteau

Trucs et astuces

Source : https://teachings.samuel-bouchet.fr/jeu-video/4_fichespratiques#/4/1

Prefabs

Les prefabs permettent de créer un gameObject “modèle” qui pourra ensuite être instancié sur la scène autant de fois qu’on le souhaite à l’identique. Il est aussi possible d’instancier des prefabs dynamiquement via des scripts.

Glisser/Déposer un objet d’une scène dans le projet pour faire un prefab
Glisser/Déposer un prefab sur la scène pour créer une instance liée
Mettre à jour prefab = update sur toutes les instances liés
Mettre à jour instance liée = possibilité d’apply
Seules les valeurs par défauts sont mises à jours, les valeurs spécifiques instance sont indiquées en gras dans l’interface

Pour instancier dynamiquement un prefab, il faudra créé une propriété public GameObject myPrefab; dans le script qui doit l’utiliser. Ensuite, il est possible de faire à tout moment var instance = Instantiate(myPrefab) pour ajouter l’élément sur la scène dynamiquement. La variable “instance” pourra être modifiée directement pour changer certaines propriétés du gameObject (par exemple sa position).

Conseils de collaboration

https://teachings.samuel-bouchet.fr/jeu-video/4_fichespratiques#/4/2

Une scène par collaborateur (Très difficile à fusionner à la main)
Chacun développe ses prefabs, scripts et sa scène de façon indépendante
1 personne fait l’intégration dans la scène générale du jeu

Interactions entre scripts

private ScriptName scripteRef;

void Start () {
    // Récupère une référence au script ScriptName attaché au même GameObject
    scripteRef = GetComponent<scriptname> ();
    scripteRef.someMethodOfScriptName();
}

Hiérarchie - références et parents

// un gameObject de la scène, on réfère ici son Transform
public Transform otherGameObjectTransform;
// on affectera dans scripteRef le ScriptName de ce gameObject
private ScriptName scripteRef;

// un 2eme game object de la scène, on réfère ici le GameObject
public GameObject otherGameObject2;
// on affectera dans scripteRef2 le ScriptName de ce 2eme gameObject
private ScriptName scripteRef2;

void Start () {
    // scripteRef attaché à otherGameObjectTransform
    scripteRef = otherGameObjectTransform.gameObject.GetComponent<scriptname> ();
    Transform parent = otherGameObjectTransform.parent;

    // scripteRef2 attaché à otherGameObject2
    scripteRef2 = otherGameObject2.GetComponent<scriptname> ();
    Transform parent2 = otherGameObject2.transform.parent;
}

Hiérarchie - Parcourir les enfants

void Start () {
    // on cherche à trouver les ScriptName dans les enfants, mais le parcours d'enfant
    // peut servir à plein de choses.
    // méthode 1, si on souhaite utiliser LinQ sur la collection d'enfants
    IEnumerable<Transform> children = (IEnumerable<Transform>) this.transform;
    foreach (Transform child in children) {
        child.gameObject.GetComponent<ScriptName>(); // peut être null !
    }
    // méthode 2, plus courte si on veut juste itérer
    foreach (Transform child in this.transform) {
        child.gameObject.GetComponent<ScriptName>(); // peut être null !
    }
    // méthode 3, si on cherche spécifiquement un script
    foreach (ScriptName script in this.GetComponentsInChildren<ScriptName>()) {
        // script n'est pas null
    }
}

Audio

AudioSource = Haut parleur qui peut lire un son à la fois.
C’est un composant à attacher à un game objet, il sera spacialisé à l’endroit de l’objet.
AudioClip = Clip audio qui peut être lu par un Audio source.
On peut changer le AudioClip d’un AudioSource par script.
Le son est capturé par l’AudioListener, positionné par défaut sur la caméra.

[ExecuteInEditMode]

L’annotation [ExecuteInEditMode] permet d’exécuter un script en mode édition. Ex:

Barre de vie

GameObject parent pour positionner le tout
- GameObject BackgroundScaler pour étendre la barre vide
- SpriteRenderer BackgroundSprite avec décalage de 0.5 vers la droite pour décaler le point d’origine du scaling
- GameObject ForegroundScaler pour étendre la barre pleine
- SpriteRenderer ForegroundSprite avec décalage de 0.5 vers la droite pour décaler le point d’origine du scaling
Ajouter un script pour piloter la taille des éléments visuels (Ex: LifebarController)

Exécuter une action étendue sur plusieurs frames / durées

Appeler une fois :

StartCoroutine (DoRotateByStep ());

Effet avec boucle :

IEnumerator DoRotateByStep () {
    Quaternion originalRotation = this.transform.rotation;
    int durationInFrames = 20;
    for (int i = 0; i < durationInFrames; i++) {
        this.transform.rotation = Quaternion.Euler (0, 0, (i * 360f) / durationInFrames);
        yield return null; // attends la prochaine frame pour continuer
    }
    this.transform.rotation = originalRotation;
}

Exemple plus complexe: Shake

Envie de réagir ? Mentionnez @Lythom dans votre tweet ou envoyer un mail à samuel@a-game-studio.com.

2020, a year of temporal paradoxes?

Fri, 03 Jan 2020 00:00:00 GMT

Happy new year! Is training your brain some part of this year good resolutions? Then give a try to this new A Time Paradox update on Android!

A Time Paradox on Play Store

English version

A Time Paradox is now available in most country world wide on the Android Play Store. You can enjoy the game as long as you can speak english or french!

Rotating menu of A Time Paradox

Play with a friend!

A new cooperation campaign is available as preview. 10 levels are already there to play with a friend (use landscape mode), more will come!

Story mode rebalancing

Previously stuck? Give it another try! There is even challenge keys to collect now.

Challenges

Those keys will allow you to unlock new challenges levels. If you already completed the game, here is more content to play with!

A bunch of keys will be distributed weekly when you start the game! (required an internet connection)

Level editor

The level editor will allow you to create your own levels and play with the game engine itself. Come post your levels on the Discord!

Level editor showcase

Account creation and online backup

After you bought the game, you can create a passwordless “A Game Studio” account from the game. This will sync your progress and acquired challenge keys when connected to the internet. The game will remain 100% playable offline.

Sound toggle

I bet a lot of you like to play with your favorite musics!

Have fun!

I can’t wait to get feedbacks on all this new stuff, Have Fun with the game!

Samuel

https://a-time-paradox.com/

Want to respond to this article? Let me know!
PM or mention @Lythom or drop a message at samuel@a-game-studio.com.

2020, une année de paradoxes temporels ?

Fri, 03 Jan 2020 00:00:00 GMT

Bonne Année 2020 !

Si entrainer votre cerveau fait partie de vos bonnes résolutions pour 2020, vous devriez aimer cette mise à jour de A Time Paradox ! Voici un aperçu de ce qu’elle contient.

Elle est déjà disponible sur Android : A Time Paradox sur Play Store

Version anglaise

A Time Paradox est maintenant disponible dans la plupart des pays du monde, et vous pourrez le partager avec vos amis à l’étranger pour peu qu’ils parlent français ou anglais.

Menu rotatif de A Time Paradox

Jouez avec un ami !

L’aperçu de la nouvelle campagne coopérative est disponibles. Dix niveaux sont déjà jouables à 2 sur le même apppareil et d’autres sont prévus !

Rééquilibrage du mode histoire

Vous étiez coincé ? Les niveaux trop durs ont été retravaillé ! Il y a même des clés de défi à collectionner dans certains niveaux.

Défis

Ces clés permettent de débloquer des niveaux de défi. Si vous avez déjà terminé le jeu, voilà de quoi s’amuser encore !

Des lots de clés sont offerts en se connectant au jeu chaque semaine (nécessite une connexion internet).

Éditeur de niveaux

L’éditeur de niveau enrichit encore plus l’expérience de A Time Paradox en vous permettant de créer vos propres défis. Venez les partager sur le Discord !

Démonstration de l'éditeur de niveaux

Sauvegarde de la progression en ligne

Après avoir acheté le jeu, il vous sera proposé de créer un compte “A Game Studio” pour synchroniser votre progression en ligne. Ne perdez plus vos clés de défis ni votre avancement en changement de matériel ! Le jeu restera toujours jouable sans internet.

Option de son

Vous pourrez désactiver/activer les sons désormais, je parie que certain d’entre vous apprécieront de jouer avec leurs musiques préférées.

Amusez-vous bien !

J’attends vos retours avec impatience sur toutes ces nouveautés, amusez-vous bien !

Samuel

https://a-time-paradox.com/

Envie de réagir ? Mentionnez @Lythom dans votre tweet ou envoyer un mail à samuel@a-game-studio.com.

Upcoming update for A Time Paradox

Mon, 11 Nov 2019 00:00:00 GMT

A Time Paradox development is still going on! If you haven’t heard of it, it’s a puzzle game I’m working on based on infiltration against one-self. Because the project is self financed, progress is depending on other jobs and life stuff. So how is A Time Paradox going may you ask? Reaching some key points!

In-game

Android freanch early access version is still available on the Play Store, but it’s ending soon. Challenge mode is now technically implemented, and will provided even harder challenges! The Story mode was made for smooth progression, and challenge mode to explore the limits of your mind.

Some upcoming challenge

You’ll also be given the opportunity to create your own level. I put it in for amusement, but could become a ccommunity creation tool in the future.

Level editor showcase

Finally, I had to tackle some big stuff like the hidden part of the iceberg, you’ll be asked if you want to synchronize your data using an “A Game Studio” account. Passwordless, the account will allow you to synchronize you data, scores and collected keys across devices. Also, you personnal data (email, game data) won’t be shared with 3rd party companies and will be kept secret on A Game Studio servers in Europe.

Unlock all the challenges!

Challenges will unlock by collecting keys. There are several ways to get them like in-game levels and weekly deliveries. Also, you’ll never have to purchase “keys” directly. The promise is that once you bought the game, you have it all, and the content must be earned the hard way!

On the web

Playing alone is cool, sharing the experience is greater! A Time Paradox will also be living on Discord), on Twitter), and on Facebook. You only want news ? Check the blog RSS or the newsletter.

On your PC

This update is also a first step toward PC release! Android update will come in the upcoming weeks, Pc version will have to wait some extra weeks after that. It will contains some exclusive game mode that wouldn’t fit mobile…

If you prefer playing on PC, feel free to whishlist the game now on A Time Paradox Steam Page.

Soon in your library

I wish A Time Paradox raise your interest as much as it passionate me! See you soon in time adventures ;)

Want to respond to this article? Let me know!
PM or mention @Lythom or drop a message at samuel@a-game-studio.com.

Mise à jour prochaine de A Time Paradox

Mon, 11 Nov 2019 00:00:00 GMT

A Time Paradox est toujours en développement ! Pour ceux qui ne connaissent pas c’est un jeu de réflexion que je suis en train de développer dont la mécanique principale est l’infiltration contre soi-même. Comme le projet est auto-financé, il progresse de façon irrégulière en fonction des prestations et événements de la vie. Où en est-il ? Et bien puisque vous demandez… de plus en plus proche de son but !

Dans le jeu

La version Android est toujours en accès anticipé, mais touche à sa fin. Le mode défi est techniquement terminé et le mode histoire a été retravaillé pour être plus abordable. Là où le mode histoire vous permettra de progresser petit à petit, le mode défi est fait pour explorer les limites de votre esprit ! N’hésitez pas à reprendre l’histoire si vous aviez du vous arrêter à cause d’un niveau infranchissable, les barrières de l’extrême sont maintenant dans les défis.

Exemple de défi à venir

Vous pourrez aussi créer vos propres expériences grâce à l’éditeur de niveau intégré ! Simple outil d’amusement dans un premier temps, il pourra peut être vous permettre plus tard de créer des expériences plus grandes pour les autres joueurs.

Démonstration de l'éditeur de niveau

Enfin, c’était un gros morceau à développer telle la partie cachée d’un iceberg, il vous sera proposé si vous le souhaitez de créer un compte “A Game Studio”. Sans mot de passe, avec juste votre adresse mail, vous aurez le choix de synchroniser votre progression en ligne. Ainsi, vous pourrez récupérer vos clés, votre progression et vos records si vous changez de téléphone ou pour jouer sur plusieurs périphériques à la fois. A noter que vos données personnelles (e-mail et données de jeux) ne seront pas transmises à des tiers, et que les serveurs A Game Studio sont localisés en Europe.

Débloquez tous les défis !

Sauvegarder ses clés ? Et oui ! Les défis se débloquent en collectionnant des clés. Vous pourrez en récupérer de multiple façon, dans certains niveaux du jeu lui-même ou chaque semaine en vous connectant. A noter que les clés ne seront jamais payantes directement. La promesse reste inchangée : un achat unique pour profiter de l’intégralité de l’expérience du jeu. Il vous faudra mériter certains contenus cependant !

Dans l’internet

Jouer seul c’est sympa, et partager est une expérience plus grande encore ! Aussi, A Time Paradox est présent sur Discord), sur Twitter), et sur Facebook. Si vous voulez juste les actualités sans fioriture sociale, le flux RSS de ce blog ou la newsletter seront vos meilleurs choix.

Dans votre PC

Cette mise à jour est aussi une première étape préparatoire à la sortie PC du jeu ! Si la mise à jour Android viendra dans les prochaines semaines, la version PC prendre encore quelques semaines de plus. Elle contiendra un mode exclusif qui n’aurait pas été possible sur mobile…

Si vous êtes plutôt joueur PC, je vous invite à ajouter A Time Paradox à votre liste de souhaits sans plus tarder.

Bientôt dans votre bibliothèque

J’espère que A Time Paradox vous intéresse autant qu’il me passionne ! A bientôt pour de nouvelles aventures temporelles !

Envie de réagir ? Mentionnez @Lythom dans votre tweet ou envoyer un mail à samuel@a-game-studio.com.

What babies teach us about game design

Fri, 14 Sep 2018 00:00:00 GMT

“Between twenty and fifty times a day, the little child experiences a state of great enthusiasm. (…) Each small storm of enthusiasm implements a kind of cerebral autodoping. In this way, the substances necessary for all processes of growth and redevelopment of neural networks are produced. That is why we are learning so quickly in what we are doing with enthusiasm. Because it’s as simple as that: the brain develops precisely where it is enthusiastically used.” Pr. Gerald Hüther

Illustration by Francis Ray

On brain development

In addition to telling us about the mechanics of human growth, which are invaluable in order to guide our childs toward a better development, Professor Gerald Hüther’s “Neurobiology and Education” conference sheds light on a specific brain mechanic linked to learning.

Studies show¹^,² that spikes of enthusiasm causes a spill of neuroplastic transmitters. In the same way as fertilizer, their role is to promote brain development. Three important things should be noted:

only the actually active areas of the brain are affected by this development,
it only happens when you feel a powerful emotion,
this biomechanics phenomena works regardless of age.

An anecdote from the author, relevant in our context:

« Our young people have had, for the past 10 years, a region of the brain that receives so much fertilizer that it has already doubled in size: this is the region that is responsible for regulating thumb movements. Pr. Gerald Hüther

The take away is that to convey a message, encourage certain behaviours, promote the memorization of important elements, the player must be emotionally affected.

We also learn in this conference that when we experience isolation or social exclusion, it activates the same neural circuits as when we are inflicted bodily suffering.

With this in mind, the inclusive part of a game becomes essential: it is not moraly possible to produce a game that creates suffering.

From my experience, a concrete example is the Dixit board game. In this game the goal is to make some players guess a card, but not all. As a result, players who already have strong social relationships tend to strengthen their relations even more, but players who are not already part of the social group majority are excluded as a result of the game mechanics.

Example of "vision" cards from Mysterium

Aware of this, the flaw is corrected in Mysterium. Identical in its mechanics (making people guess cards), the collaborative approach naturally encourages players to know each other better in order to succeed. The designers have managed to keep the fun game mechanics (Dixit remains a very good game!) while reversing the relationships between the players: the new game objectives promote empathy even more (players try to imagine how the other players will perceive a visual) and the discriminating mechanics disappears (even if only a part of the group guesses, the whole group benefits from the discovery).

For us and for all

In relationships with our children and players alike, we benefit from a better understanding of how the brain works in order to provide more fulfilling experiences. As designers (but not only), neuroscience probably still has a lot to teach us. Let’s adapt to this new knowledge!

Do you want to react? Mention @Lythom in your tweet or send an email to samuel@a-game-studio.com.

Ce que les bébés nous apprennent sur le game design

Fri, 14 Sep 2018 00:00:00 GMT

« Entre vingt et cinquante fois par jour, le petit enfant vit un état de grand enthousiasme. (…) Chaque petite tempête d’enthousiasme met en œuvre une sorte d’autodoping cérébral. Ainsi sont produites les substances nécessaires à tous les processus de croissance et de réaménagement des réseaux neuronaux. C’est ce qui explique pourquoi nous progressons si rapidement dans ce que nous faisons avec enthousiasme. Car c’est aussi simple que cela : le cerveau se développe précisément là où il est utilisé avec enthousiasme. » Pr. Gerald Hüther

Illustration par Francis Ray

Sur le développement du cerveau

En plus de nous exposer des mécaniques liées à la croissance, précieuses à connaître pour guider son enfant vers un meilleur épanouissement, la conférence « Neurobiologie et éducation » du Professeur Gerald Hüther éclaire plus généralement sur le fonctionnement du cerveau.

Des études montrent¹^,² qu’une poussée d’enthousiasme provoque un déversement de transmetteurs neuroplastiques. De la même façon qu’un engrais, leur rôle est de favoriser le développement du cerveau. Trois choses importantes sont à noter :

seules les zones actives du cerveau sont concernées par ce développement,
cela ne survient que lorsqu’on ressent une émotion puissante,
cette mécanique fonctionne quel que soit l’âge.

Anecdote de l’auteur, pertinente dans notre contexte :

« Nos jeunes ont, depuis 10 ans, une région du cerveau qui reçoit tant d’engrais qu’elle a déjà doublé de taille : il s’agit de la région qui est chargée de la régulation des mouvements du pouce. Pr. Gerald Hüther

Ainsi, on retiendra que pour transmettre un message, encourager certains comportements, favoriser la mémorisation d’éléments importants, il faut que le joueur soit touché émotionnellement.

Sur l’exclusion sociale

On apprend aussi dans cette conférence que lorsqu’on subit une isolation ou une exclusion sociale cela active les mêmes circuits neuronaux que lorsqu’on nous inflige des souffrances corporelles .

Sous cette lumière, la dimension inclusive d’un jeu devient primordiale : il n’est pas envisageable de produire un jeu qui crée de la souffrance.

Tiré de mon expérience, un exemple concret est celui du jeu de société Dixit. Dans ce jeu le but est de faire deviner une carte à certains joueurs, mais pas à tous. En conséquence les joueurs ayant déjà des liens sociaux forts ont tendance à resserrer leurs liens encore plus, mais les joueurs plus éloignés du groupe social majoritaire sont en revanche naturellement exclus.

Exemple de cartes "vision" de Mysterium

Fort de ce constat, le tir est corrigé dans Mysterium, identique dans ses mécaniques (faire deviner des cartes), mais dont l’approche collaborative incite naturellement les joueurs à mieux se connaître pour réussir. Les concepteurs ont réussi à conserver une mécanique de jeu vraiment amusante (Dixit reste un très bon jeu !) tout en renversant les relations entre les joueurs : les nouveaux objectifs de jeu promeuvent l’empathie encore davantage (on essaye d’imaginer comment l’autre joueur va percevoir un visuel) et la mécanique discriminante disparait (même si une sous-partie du groupe seulement devine, tout le groupe bénéficie de la découverte).

Pour nous et pour tous

Dans les relations avec nos enfants comme avec nos joueurs, nous gagnons à mieux connaître le fonctionnement du cerveau pour proposer des expériences plus épanouissantes. En tant que concepteurs (mais pas seulement), les neurosciences ont encore probablement beaucoup à nous apprendre. Sachons nous adapter à ces nouvelles connaissances !

Envie de réagir ? Mentionnez @Lythom dans votre tweet ou envoyer un mail à samuel@a-game-studio.com.

Hacking through shaders

Mon, 27 Aug 2018 00:00:00 GMT

Any sane programmer would teach “Read the documentation, understand what you are doing, and you’ll be able to solve your problems”. While true, there is a flaw : the time required to fully understand something grows bigger and bigger as what you are learning is vast or deep. Sometimes, hacking its way in might be enough, and how fun would life be without a bit of crazyness? let’s hack into shaders !

Just a step back

Ok yes there ARE things you must know before diving into shaders, here they are :

A shader contains 3 key parts : declarations, vertex function, and fragment function.
- Declarations allow you to drive or configure the shader from scripting.
- Vertex function allows you to affect the 3D world (displacement of vertex)
- Fragment function allows you to affect the rendered pixels on screen.
A color is represented as a 4 dimensions vector fixed4.
In the fragment function, you manipulate only one pixel at a time.
frac(float) function return the decimal part of a float.
text2D(sampler2D,float2) gives the pixel color of the texture sample2D at the coordinate float2. You get this coordinate as input in the fragment function.
Coordinates are between (0,0) and (1,1).

It may looks very specific if you a new to shaders but this is actually things you’d find early while learning shaders.

Multiple layers of rendering

I’m working on a game called A Time Paradox which takes place in a futuristic universe (in a spaceship riding a blackhole horizon). A way to evocate a futuristic world is using something both typical, visual appealing, and quick to create : holograms.

So here is the idea : we will display a spotlight texture as a background, then animate a glitch texture on the top of it, to simulate scanlines. The plan? Find a simple enough sprite shader as starter, add a glitch texture as parameter on top of the main texture, do fun math to animate the glitch texture

Find a starter shader

Note : I use Unity and paint.NET as tools but the workflow would work for any engine or technology supporting shaders and any image editor.

On https://unity3d.com/fr/get-unity/download/archive you’ll find under “downloads (your platform)” an entry named “integrated shaders”. It contains all built-in shaders of unity and can be copy/pasted/modified in your project. I choose to start with the shader DefaultResourcesExtra\Unlit\Unlit-Alpha.shader since i’m working in 2D without lighting, and I want transparency in my result. It looks like :

// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)

// Unlit alpha-blended shader.
// - no lighting
// - no lightmap support
// - no per-material color

Shader "Unlit/Transparent" {
Properties {    _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}}
SubShader {
    Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
    LOD 100

    ZWrite Off
    Blend SrcAlpha OneMinusSrcAlpha

    Pass {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata_t {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f {
                float4 vertex : SV_POSITION;
                float2 texcoord : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                UNITY_VERTEX_OUTPUT_STEREO
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata_t v)
            {
                v2f o;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target            {                fixed4 col = tex2D(_MainTex, i.texcoord);                UNITY_APPLY_FOG(i.fogCoord, col);                return col;            }        ENDCG
    }
}}

Here we find “Properties”, and both “vert” and “frag” functions. The frag function is basically doing the following thing : lookup the pixel color in _MainTex that is located at i.texcoord position, run a UNITY_APPLY_FOG process we don’t know about, return the color.

Let’s try this shader already :

copy/paste file in project asset folder;
in shader file line 8, rename shader from Shader Unlit/Transparent to Shader Custom/MyHologram;
in unity editor right click on shader file -> create -> material to create a new material linked with the shader;
drag and drop the “spotlight” sprite into the scene;
drag and drop the material from asset folder to the sprite in the scene hierarchy, so that the sprite uses the material configured with our shader.

The “spotlight” sprite? Let’s use this one :

You should end with something like this :

Add a glitch texture

Let’s add a new glitch texture. We could either find one online, or create it ourself. Here is how I created mine :

Create a 1024x1024 png file filled with black.
On a new layer, draw random horizontal white lines of 3 pixels height.
Duplicate last created layer, apply a “motion blur effect” toward top, 10px
repeat step 3. a few time until it creates a smooth gradient
remove the original line layer (the pure white is too hard and sharp)
merge all remaining layers

You should get something like that (well, I also tweaked the luminosity curve a bit) :

To use it into our shader, let’s mimic what is done for the _MainText.

Line 11, add in the _GlitchTex property:

Properties {
    _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
    _GlitchTex ("Glitch Texture", 2D) = "white" {}
}

Then line 44, add the _GlitchTex declaration :

sampler2D _MainTex;
sampler2D _GlitchTex;
float4 _MainTex_ST;

From here, the “Glitch texture” property should appear in the spotlight inspector in Unity. Select the texture you just created (or use mine) as value.

And… nothing happens. We now need to actually use the texture we declared in the shader code, the fun maths beggins !

Fun with maths

To change the rendering of the pixels, the fragment function is the one we should work with :

fixed4 frag (v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.texcoord);
    UNITY_APPLY_FOG(i.fogCoord, col);
    return col;
}

We want to get the color of our glitch texture, let’s try to copy the function for the _MainTex, and mix the 2 colors.

    fixed4 mainCol = tex2D(_MainTex, i.texcoord);
    fixed4 glitchCol = tex2D(_GlitchTex, i.texcoord);
    fixed4 col = mainCol + glitchCol;

Great we mixed the 2 textures into 1 render ! But it looks weird, doesn’t it? The alpha of the first image is overriden by the second texture : we lose the smooth gradient we had and the edges looks wrong. Let’s try using multiply instead of addition to mix the colors.

    fixed4 mainCol = tex2D(_MainTex, i.texcoord);
    fixed4 glitchCol = tex2D(_GlitchTex, i.texcoord);
    fixed4 col = mainCol * glitchCol;

Not bad, but we barly recognize the original sprite. That said, this colors could look good as an “additional layer”. Let’s add the original color on top of this one.

    fixed4 mainCol = tex2D(_MainTex, i.texcoord);
    fixed4 glitchCol = tex2D(_GlitchTex, i.texcoord);
    fixed4 col = mainCol * glitchCol + mainCol;

Hey ! We are getting there !

Now it’s time to animate the glitch. For this, we need some kind of “time” external variable to calculate from. Every engine provide a way to access some time clock, in Unity we can use _Time.y. The idea is to modify the texcoord (reminder: it’s a vector2 between 0,0 and 1,1 for x,y coordinates), to have the y value changed over time and looped between 0 and 1.

To loop a variable that depends on time between 0 and 1 we can do as follow :

    fixed scrollValue = frac(0.04 * _Time.y);

_Time.y is a value that consistently increase (elapsed time since start of the game ), frac() is keeping only the decimal part of a float (making the value loop between 0 and 1), 0.04 is an arbitrary constant used as a ratio to slow down the scrolling effect. This constant can be exported in a shader property to configure the speed, but let’s keep it inlined for the moment.

In order to remap the texcoord from static to scrolled coordinates, we need to create a new float2 element, and change the y value only so that the glitch scrolls vertically.

    float2 offsetTexCoord = float2(
        i.texcoord.x,
        frac(i.texcoord.y + 0.04 * _Time.y)
    );
    fixed4 glitchCol = tex2D(_GlitchTex, offsetTexCoord);

Here we keep the x value as is, and we add the current y value with the scrollValue that varies over time. This tells the shader to look at a different vertical position inside the texture over time for a given pixel, and because this vertical position moves slowly it renders the texture “offset” or “shifted”. Here we go :

Note that I had to cheat a little to get a perfect looping animation, your hologram should move more slowly that that.

We need to go deeper

It already looks fine, but out pattern recognition machine (aka. our brain) will quickly find out the repetition and loose interest for the visual quickly. No matter, we got more tricks! Let’s use multiple glitch overlay that run at different speed. Basically we copy/paste the shader code above to extract colors at different positions with different timing. It could write like :

fixed4 mainCol = tex2D(_MainTex, i.texcoord);

// glitch 1
float2 offsetTexCoord = float2(
    i.texcoord.x,
    frac(i.texcoord.y + _Time.y * 0.33)
);
fixed4 glitchCol = tex2D(_GlitchTex, offsetTexCoord);
// glitch 2
float2 offsetTexCoord2 = float2(
    i.texcoord.x,
    frac(i.texcoord.y +  _Time.y * 0.4521)
);
fixed4 glitchCol2 = tex2D(_GlitchTex, offsetTexCoord2);
// glitch 3
float2 offsetTexCoord3 = float2(
    i.texcoord.x,
    frac(i.texcoord.y + _Time.y * 0.2541)
);
fixed4 glitchCol3 = tex2D(_GlitchTex, offsetTexCoord3);

fixed4 col = mainCol + mainCol * glitchCol * 0.4 + mainCol * glitchCol2 * 0.2 + mainCol * glitchCol3 * 0.4;

And looks like :

Here it looks up 3 different positions from the same glitch texture, then add them like before but multiplied with a constant to soften the effect (else it becomes too bright). As a consequence, my animation capture cannot loop smoothly because it happens very rarely that the 3 glitch layers get back at their original position synchronously. Also, if it makes that the animation in-game looks like it never repeat itself, which is more satisfying to watch.

We need to go deeper AGAIN

This could be over, yet my brain is not fully satisfied. There are still some patterns I recognize sometimes so it can be even better.

In short : we are adding colors together, which means at any given time for one layer there is always a “minimum” light value (recognized as a white band) which the eye can follow along the way and that will repeat. The fact that there are other lines over it makes it harder to track but not impossible. There is a solution : multiplying the colors together instead of adding them. The consequence is that sometimes the lines overlap (creating brighter lines) and sometimes they get further from each other (fading the lines away).

The math becomes :

fixed4 col = mainCol + mainCol * glitchCol * glitchCol2 * glitchCol3;

Also the texture must be tweaked so that there is more overlapping (the current texture has too much black and overlapping must happens more frequently so that the effect works). From the previous texture, I inverted the color, they played with the luminosity curve until the effect looks right. Here goes the texture and the result :

As you can see, sometimes lines appear then fade away, if you have done it yourself you can look at it during hours without recognizing any pattern. The effect is now more subtle, intriguing.

Final words

Thank you for reading! I’m working hard on A Time Paradox so that it looks cool, check it out!

Want to respond to this article? Made something out of it? Let me know!
PM or mention @Lythom or drop a message at samuel@a-game-studio.com. I’ll re-tweet your work.

Happy hacking!

A Time Paradox

Mon, 27 Aug 2018 00:00:00 GMT

Your are stuck in a timeloop. Infiltrate against yourself to escape paradoxes !

I must hide from my past selves. If one see me…
A time traveller

Visit website

Trafiquer un shader

Mon, 27 Aug 2018 00:00:00 GMT

N’importe quel programmeur sain d’esprit enseignerait “Lisez la documentation, comprenez ce que vous faites, et vous serez capable de résoudre vos problèmes”. Tout à fait vrai ! Mais il y a un défaut : plus le sujet est vaste ou profond, plus le temps nécessaire à son apprentissage est grand. Parfois, “hacker” son chemin pourrait suffire. Et puis la vie est plus amusante avec un brin de folie non ? Trafiquons les shaders !

Un pas en arrière

Ok oui il y a des choses que vous devez savoir avant de plonger dans les shaders, les voici :

Un shader contient 3 parties importantes : les déclarations, la fonction vertex et la fonction fragment.
- Les déclarations vous permettent de piloter ou de configurer le shader à partir d’un script.
- La fonction vertex vous permet de manipuler le monde 3D (déplacement de vectrices).
- La fonction fragment vous permet de manipuler les pixels rendus à l’écran.
Une couleur est représentée par un vecteur à 4 dimensions fixed4.
Dans la fonction fragment, vous ne manipulez qu’un seul pixel à la fois.
La fonction frac(float) renvoie la partie décimale d’un nombre à virgule flottante.
text2D(sampler2D,float2) donne la couleur des pixels de la texture sample2D à la coordonnée float2. Vous obtenez cette coordonnée en paramètre d’entrée dans la fonction fragment.
Les coordonnées sont comprises entre (0,0) et (1,1).

Ça peut sembler très spécifique si les shaders sont nouveaux pour vous, mais ce sont en fait des choses que vous trouveriez tôt dans votre apprentissage des shaders.

Plusieurs couches de rendu

Je travaille sur un jeu appelé A Time Paradox qui se déroule dans un univers futuriste (dans un vaisseau spatial chevauchant un horizon de trou noir). Une façon d’évoquer un monde futuriste est d’utiliser quelque chose de typique, attrayant et rapide à créer : des hologrammes.

Voici l’idée : nous allons afficher une texture de projecteur (spotlight) en arrière-plan, puis animer une texture de bruit (glitch) sur le dessus pour simuler des lignes de balayage. Le plan ? Trouver un shader 2D assez simple comme point de départ, puis ajouter une texture de glitch par dessus la texture principale. Enfin, s’amuser avec des maths pour animer la texture de glitch.

En avant !

Shader de départ

Note : J’utilise Unity et paint.NET comme outils mais la façon de faire fonctionnerait pour n’importe quel moteur ou technologie supportant les shaders et n’importe quel éditeur d’images.

Sur https://unity3d.com/fr/get-unity/download/archive vous trouverez sous “téléchargements (votre plate-forme)” une entrée nommée “shaders intégrés”. Il contient tous les shaders de Unity et ils peuvent être copié/collé/modifié dans votre projet. J’ai choisi de commencer avec le shader DefaultResourcesExtra\Unlit\Unlit-Alpha.shader puisque je travaille en 2D sans éclairage et avec transparence. Il ressemble à ça :

// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)

// Unlit alpha-blended shader.
// - no lighting
// - no lightmap support
// - no per-material color

Shader "Unlit/Transparent" {
Properties {    _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}}
SubShader {
    Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
    LOD 100

    ZWrite Off
    Blend SrcAlpha OneMinusSrcAlpha

    Pass {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata_t {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f {
                float4 vertex : SV_POSITION;
                float2 texcoord : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                UNITY_VERTEX_OUTPUT_STEREO
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata_t v)
            {
                v2f o;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target            {                fixed4 col = tex2D(_MainTex, i.texcoord);                UNITY_APPLY_FOG(i.fogCoord, col);                return col;            }        ENDCG
    }
}}

On trouve ici les “Properties”, ainsi que les fonctions “vert” et “frag”. La fonction frag fait globalement la chose suivante : rechercher la couleur du pixel dans _MainTex qui est situé à la position i.texcoord, exécuter un processus UNITY_APPLY_FOG_FOG que nous ne connaissons pas, retourner la couleur.

Avant tout, faisons fonctionner ce shader :

copier/coller le fichier shader dans le dossier assets du projet;
dans le fichier shader ligne 8, renommer le shader de Shader Unlit/Transparent en Shader Custom/MyHologram ;
dans l’éditeur de Unity, cliquez avec le bouton droit de la souris sur le fichier shader -> create -> material pour créer un nouveau material associé au shader ;
créer (voir ci-dessous), puis glisser-déposer le sprite “spotlight” depuis les assets vers la scène ;
glisser-déposer le material du dossier asset vers le sprite dans la hiérarchie de la scène pour que le sprite utilise le material configuré avec notre shader.

Le sprite “spotlight” ? Utilisons celui là :

Cela devrait donner le résultat suivant :

Ajouter une texture de glitch

Ajoutons une nouvelle texture de glitch. Nous pourrions soit en trouver une en ligne, soit la créer nous-même. Voici comment j’ai créé la mienne :

Créez un fichier png 1024x1024 entièrement noir.
Sur un nouveau calque, tracez au hasard des lignes blanches horizontales de 3 pixels de hauteur.
Dupliquer le dernier calque créé, appliquer un “effet de flou de mouvement” vers le haut de 10px
Répétez l’étape 3. quelques fois jusqu’à avoir un dégradé lisse.
Enlever la couche de ligne d’origine (le blanc pur est trop dur et tranchant).
Fusionner toutes les couches restantes.

Vous devriez obtenir quelque chose comme ça (j’ai aussi un peu modifié la courbe de luminosité) :

Pour l’utiliser dans notre shader, recopions ce qui est fait pour le _MainText.

Ligne 11, ajoutons la propriété _GlitchTex :

Properties {
    _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
    _GlitchTex ("Glitch Texture", 2D) = "white" {}
}

Puis ligne 44, ajouter la déclaration _GlitchTex :

sampler2D _MainTex;
sampler2D _GlitchTex;
float4 _MainTex_ST;

A partir de ce point, la propriété “Glitch texture” devrait apparaître dans l’inspecteur du sprite “spotlight” dans Unity. Sélectionnez la texture que vous venez de créer (ou utilisez la mienne) comme valeur.

Et… il ne se passe rien. En effet, nous devons maintenant utiliser au niveau du rendu la texture que nous avons déclarée dans le code du shader. Que les maths commencent !

Maths et fun

Pour changer le rendu des pixels, la fonction fragment est celle que nous devons modifier :

fixed4 frag (v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.texcoord);
    UNITY_APPLY_FOG(i.fogCoord, col);
    return col;
}

L’objectif est d’afficher la couleur de notre texture “glitch”, essayons de copier le code utilisé pour _MainTex et de mélanger les 2 couleurs.

    fixed4 mainCol = tex2D(_MainTex, i.texcoord);
    fixed4 glitchCol = tex2D(_GlitchTex, i.texcoord);
    fixed4 col = mainCol + glitchCol;

Super, nous avons mélangé les 2 textures en 1 rendu ! Mais ça a l’air bizarre, n’est-ce pas ? L’alpha de la première image semble ne plus fonctionner : le dégradé lisse que nous avions est perdu et les bords ont l’air faux. Essayons de multiplier au lieu d’additionner pour mélanger les couleurs.

    fixed4 mainCol = tex2D(_MainTex, i.texcoord);
    fixed4 glitchCol = tex2D(_GlitchTex, i.texcoord);
    fixed4 col = mainCol * glitchCol;

Pas mal, mais on ne reconnait pas le sprite d’origine. Cela dit, on pourrait utiliser ce résultat comme “couche supplémentaire” non ? Additionnons ce rendu (mainCol * glitchCol) avec la couleur d’origine (mainCol).

    fixed4 mainCol = tex2D(_MainTex, i.texcoord);
    fixed4 glitchCol = tex2D(_GlitchTex, i.texcoord);
    fixed4 col = mainCol * glitchCol + mainCol;

Hé ! On s’approche !

Maintenant, il est temps d’animer le glitch. Pour cela, nous aurons besoin d’une sorte de variable basée sur le temps. Chaque moteur fournit un moyen d’accéder à une horloge, Unity fournit _Time.y. L’idée est de modifier le texcoord (rappel : c’est un vector2 entre 0,0 et 1,1 pour les coordonnées x,y), pour que la valeur y soit modifiée dans le temps et bouclée entre 0 et 1 pour faire un défilement infini.

Pour boucler une variable qui dépend du temps entre 0 et 1, nous pouvons faire comme suit :

    fixed scrollValue = frac(0.04 * _Time.y);

_Time.y est une valeur qui augmente indéfiniement (temps écoulé en secondes depuis de début du jeu), frac() ne conserve que la partie décimale d’un nombre à virgule flottante (faisant boucler la valeur entre 0 et 1), 0.04 est une constante arbitraire utilisée comme ratio pour ralentir l’effet de défilement. Cette constante pourrait être extraite comme propriété du shader pour configurer la vitesse, mais gardons-la inline pour le moment.

Afin de remapper la position statique de texcoord dans sa version “scrollée”, nous devons créer un nouveau texcoord float2, et changer sa valeur y pour appliquer le défilement.

    float2 offsetTexCoord = float2(
        i.texcoord.x,
        frac(i.texcoord.y + 0.04 * _Time.y)
    );
    fixed4 glitchCol = tex2D(_GlitchTex, offsetTexCoord);

Ici, on conserve la valeur x tel quel, et on ajoute notre valeur de scroll qui varie en fonction du temps. Ça indique au shader, pour un pixel donné, de regarder une position verticale différente à l’intérieur de la texture au fil du temps. Parce que cette position verticale se déplace lentement, elle rend la texture “décalée”. Et c’est parti !

Remarque: j’ai triché un peu pour obtenir une boucle d’animation parfaite, votre hologramme devrait se déplacer un peu moins vite.

We need to go deeper (Nous devons aller plus loin)

Le rendu est déjà bien, mais notre machine à reconnaissance de motifs (notre cerveau) trouvera rapidement la répétition et perdra rapidement son intérêt pour le visuel. Peu importe, nous avons plus d’un tour dans notre sac ! On pourra par exemple utiliser plusieurs couches de glitch qui défilent à des vitesses différentes. Dans l’idée, on copie/colle le même code que précédemment mais avec des décalages différents pour extraire les couleurs à des positions différentes dans le temps.

fixed4 mainCol = tex2D(_MainTex, i.texcoord);

// glitch 1
float2 offsetTexCoord = float2(
    i.texcoord.x,
    frac(i.texcoord.y + _Time.y * 0.33)
);
fixed4 glitchCol = tex2D(_GlitchTex, offsetTexCoord);
// glitch 2
float2 offsetTexCoord2 = float2(
    i.texcoord.x,
    frac(i.texcoord.y +  _Time.y * 0.4521)
);
fixed4 glitchCol2 = tex2D(_GlitchTex, offsetTexCoord2);
// glitch 3
float2 offsetTexCoord3 = float2(
    i.texcoord.x,
    frac(i.texcoord.y + _Time.y * 0.2541)
);
fixed4 glitchCol3 = tex2D(_GlitchTex, offsetTexCoord3);

fixed4 col = mainCol + mainCol * glitchCol * 0.4 + mainCol * glitchCol2 * 0.2 + mainCol * glitchCol3 * 0.4;

Le résultat :

Ici le shader va lire dans la texture à 3 positions différentes, chacune de ces positions défilant à une vitesse différente. Ensuite, on additionne toutes les couleurs obtenues mais en appliquant une constante pour adoucir le rendu (sinon le rendu est trop lumineux). Autre conséquence, le rendu animé ne peut plus boucler de façon fluide comme avant, car il est extrêmement rare que les 3 couches de glitch retrouvent leur position initiale au même moment. Ainsi, dans le jeu, is smeble que l’animation ne se répête jamais ce qui la rends plus intéressante à regarder.

We need to go deeper AGAIN (Nous devons aller ENCORE plus loin)

On pourrait s’arrêter là, mais mon cerveau n’est pas encore satisfait. On observe encore certains motifs, il y a mieux à faire.

L’idée en bref : plutôt que d’additionner les couleurs des 3 couches, multiplions les ! En effet, il y a toujours une valeur lumineuse “minimale” (qu’on visualise comme une bande blanche) que l’œil peut suivre le long du chemin et qui se répétera. Le fait que les lignes se croisent rend le suivi plus difficile mais pas impossible.
Alors qu’en multipliant les 3 valeurs, parfois les lignes se chevaucheront et créeront des lignes plus brillantes, et parfois elles s’éloigneront et les lignes disparaitront en fondu.

Niveau maths le changement est assez direct :

fixed4 col = mainCol + mainCol * glitchCol * glitchCol2 * glitchCol3;

Par contre il est nécessaire de revoir la texutre pour qu’elle soutienne l’idée. Pour que le rendu soit intéressant il faut que les lignes se superposent plus souvent (lignes plus larges, luminosité plus claire). En repartant de la texture précédente, j’ai inversé les couleurs puis manipulé la courbe de luminosité jusqu’à ce que le rendu me plaise.

Et voilà le résultat final :

Comme vous pouvez le voir, parfois les lignes apparaissent puis s’estompent. Si vous êtes arrivés jusque là dans votre implémentation vous pouvez constater que les lignes apparaissent et disparaissent à des endroits qui semblent toujours différents, et on peut l’observer pendant des heures sans trouver de répétition dans les motifs. L’effet est maintenant plus subtil, plus intrigant !

Mots de la fin

Merci de m’avoir suivi jusque là ! Je travaille dur sur A Time Paradox pour que le rendu soit cool ! Passez voir le site !

Vous souhaitez régir ? Vous avez fait des choses grace à cet article ? dites-le moi !
Envoyez vos messages privés et mentions sur twitter @Lythom, et les messages à samuel@a-game-studio.com. Je les retweeterai !

Bon hacking !

A Time Paradox

Mon, 27 Aug 2018 00:00:00 GMT

Vous êtes coincé dans une boucle temporelle. Infiltrez-vous contre vous-même pour éviter le paradoxe !

Je dois me cacher des moi du passé. Si je suis vu…
Un voyageur temporel

Voir le site

Press Start Button

Sun, 26 Aug 2018 00:00:00 GMT

A Game Studio is opening the blog ! You will find news, technical articles about game programming, shaders, game design and any topic an indie game dev could find interesting.

I can wait ! I hope you’ll like it.

No more waiting, here is the first technical article. Let the fun begin !

Start

Appuyez sur Start

Sun, 26 Aug 2018 00:00:00 GMT

A Game Studio ouvre son blog ! Vous trouverez ici des actualités, des articles techniques sur la programmation, les shaders, le game design et sur tout sujet intéressant qu’un développeur de jeux indépendant peut aborder.

J’ai hate ! J’espère que ça va vous plaire !

Sans plus tarder, je vous emmène vers le premier article technique, que le fun commence !

Start

A Game Studio

Unity étape par étape - jeu de ballon

Installer Unity

L’interface

Afficher un sprite

Autres exemples courants

Sprite de fond avec répétition

Forme géométrique de base (ex. hexagone)

Animer un sprite

Option 1: Animer à la Unity

AnimateGirl.cs

Option 2: Animer un sprite via script

SpritesheetAnimator.cs

AnimateGirlSpritesheet.cs

Le debugger

1er cas: le fichier launch.json n’existe ppas dans le projet

2eme cas: le fichier existe déjà et “Unity debugger” ne fait pas partie des environnements proposés

Utiliser le debugger

Le moteur physique

Déplacement d’un personnage dans un univers physique

Les règles du jeu

Trucs et astuces

Prefabs

Conseils de collaboration

Interactions entre scripts

Hiérarchie - références et parents

Hiérarchie - Parcourir les enfants

Audio

[ExecuteInEditMode]

Barre de vie

Exécuter une action étendue sur plusieurs frames / durées

2020, a year of temporal paradoxes?

English version

Play with a friend!

Story mode rebalancing

Challenges

Level editor

Account creation and online backup

Sound toggle

Have fun!

2020, une année de paradoxes temporels ?

Version anglaise

Jouez avec un ami !

Rééquilibrage du mode histoire

Défis

Éditeur de niveaux

Sauvegarde de la progression en ligne

Option de son

Amusez-vous bien !

Upcoming update for A Time Paradox

In-game

On the web

On your PC

Mise à jour prochaine de A Time Paradox

Dans le jeu

Dans l’internet

Dans votre PC

What babies teach us about game design

On brain development

On social exclusion

For us and for all

Ce que les bébés nous apprennent sur le game design

Sur le développement du cerveau

Sur l’exclusion sociale

Pour nous et pour tous

Hacking through shaders

Just a step back

Multiple layers of rendering

Find a starter shader

Add a glitch texture

Fun with maths

We need to go deeper

We need to go deeper AGAIN

Final words

A Time Paradox

Trafiquer un shader

Un pas en arrière

Plusieurs couches de rendu

Shader de départ

Ajouter une texture de glitch