Direction créative
Introduction
2024 - 2025
C'est quoi la créativité ?
Wikipédia
La créativité est — de façon générale — la capacité à imaginer et mettre en œuvre un concept neuf, un objet nouveau, à combiner des idées existantes ou à découvrir une solution originale à un problème. Elle combine donc deux dimensions: imagination et efficacité
ChatGPT
La créativité est la capacité d'imaginer et de générer des idées originales en sortant des schémas traditionnels, souvent pour résoudre des problèmes ou créer quelque chose de nouveau.
L'approche
Nintendo
Nintendo est passé maitre dans l'art de repenser l'utilisation des technologies existantes pour offrir des expériences ludiques uniques. L'entreprise privilégie la réinterprétation de technologies éprouvées afin de révolutionner le gameplay et d'élargir son public.
La manette Wii
Tout le monde (ou presque) a déjà utiliser une manette de Wii. Elle a permis de transformer nos gestes naturels en commandes précises, rendant le jeu vidéo accessible non seulement aux joueurs aguerris, mais aussi à des novices et à des personnes âgées.
Comment ?
Par un moyen simple: la triangulation. La manette est équipée d'un détecteur infrarouge qui récupère les positions de leds intégrés dans la petite barre à mettre au dessus/en dessous de notre télé. La manette peut ensuite intreprété nos mouvements et envoyés ces informations à la Wii, et donc faire le lien entre nous et le jeu.
Mario Kart Live
En utilisant la réalité augmentée et en combinant des karts téléguidés équipés de caméras et une application mobile, Nintendo a créé une expérience hybride qui ouvre la porte a de nouvelles expériences immersives.
Nintendo Switch
Cette console représente l'âme de Nintendo, autant dans sa façon de passer d'une console de salon à une console portable mais aussi grâce aux joycons, qui sont une version améliorée des manettes de Wii.
Nintendo Switch 2
Leur nouvelle console, la présentation laisse sous entendre que les nouveaux joycons pourront être utiliser comme une souris.
The Legend of Zelda: The Wind Waker
On retrouve même cette approche dans leur création de jeu, The Wind Waker est un bon exemple en terme de texture et de luminosité.
Ancré dans leur ADN
Cette façon de réimaginer, combiner des idées existantes ou éprouvées n'est pas nouvelle. Ce mode de fonctionnement est présent depuis le début, avec l'inventeur de la Game Boy Gunpei Yokoi.
Processus de création
Déconstruire dans le but de comprendre et s'approprier un style, une technique, un résultat, etc.
Brandon James Greer
Brandon James est un illustrateur, spécialisé dans le monde du pixel art. Il a une façon très intéressente quand il s'agit de s'approprier des styles d'autres artistes en décomposant leurs œuvres.
La mécanique
du fun
Workshop
Réaliser un mouse pointer
En combinant plusieurs techniques simples, nous pouvons mettre en place un curseur qui suivra la position de la souris. Nous aurons besoin de:
un élément span stylisé pour notre curseur
le placer en position: absolute;
récupérer les coordonnées de la souris en javascript
synchroniser le curseur avec les coordonnées
Créer notre curseur
HTML
<span class="cursor js-cursor">On prévoit une classe pour stylisé notre curseur avec cursor et une classe qui ne servira que de ciblage en javascript avec js-cursor. Votre code sera plus lisible, et ce sera clair pour tout le monde que cela implique une intéraction en javascript.
Styliser notre curseur
CSS
.cursor {
display: block;
width: 48px;
height: 48px;
border-radius: 1000px;
background: dodgerblue;
}Positionner notre curseur
Il va falloir positionner notre cursor de manière à ce qu'il n'interfère plus avec le flux de la page et que notre curseur soit libre de se déplacer. Commençons par rajouter une position absolue et des indications de position avec top et left.
CSS
.cursor {
/* […] Nos styles précédents */
position: absolute;
top: 0;
left: 0:
}Coordonnées
de la souris
Fonctionnons par étape:
Cibler et stocker notre élément .js-cursor dans une variable
Ajouter un événement de type mousemove sur notre écran via window
Récupérer les coordonnées depuis notre événement
Mettre à jour la position de .js-cursor
Cibler .js-cursor
Pour cibler un seul élément nous pouvons utiliser une méthode de notre objet document> (HTML): querySelector. On peut lui passer un paramètre qui servira à cibler un élément de notre HTML, comme nous le ferions en CSS.
JS
/*
Sauvergarde notre élément .js-cursor dans une constante
('var' peut aussi faire l'affaire)
*/
const cursor = document.querySelector( '.js-cursor' );Événement mousemove
Rajoutons un événement mousemove sur notre fenêtre (window) avec la méthode addEventListener. Elle prend 2 paramètres:
type de l'événement, sous le format string
Une fonction a appeler quand l'événement est joué
JS
const cursor = document.querySelector( '.js-cursor' );
window.addEventListener( 'mousemove', function() {
// Le code a exécuter à chaque fois
// que l'événement aura lieu
});Les coordonnées
Chaque événement renvoie des données qui lui sont propre. Dans notre cas, comme nous jouons avec mousemove qui donne accès à la position de notre souris. Pour y accéder, il va falloir prévoir un paramètre dans notre fonction pour que l'événement puisse communiquer avec nous, appelons le event.
const cursor = document.querySelector( '.js-cursor' );
window.addEventListener( 'mousemove', function( event ) {
// Le paramètre 'event' contiendra
// des informations lié à notre souris
// Une bonne façon de s'assurer que notre
// code fonctionne est d'afficher des
// informations dans notre console.
console.log( event );
});
clientX & clientY
Ok, on a des données. Maintenant ce qu'on veut, c'est la position horizontale et verticale de la souris. Dans notre paramètre event se trouve ces 2 informations appelées clientX pour l'axe horizontal et clientY pour l'axe vertical.
const cursor = document.querySelector( '.js-cursor' );
window.addEventListener( 'mousemove', function( event ) {
// Stocke la position horizontale de notre souris
const x = event.clientX;
// Stocke la position veticale de notre souris
const y = event.clientY;
// Affiche les valeurs de nos variables 'x' et 'y'
// Elles sont exprimé en pixel
console.log( x, y );
});Lier les coordonnées
Dernière étape (spoiler: nope), mettre à jour les positions top et left de notre curseur via la propriété style.
const cursor = document.querySelector( '.js-cursor' );
window.addEventListener( 'mousemove', function( event ) {
const x = event.clientX;
const y = event.clientY;
// Met à jour les propriétés CSS
// top et left de notre élément cursor
// N'oublions pas de rajouter les unités 'px'
// via concaténation si non le CSS ne sera pas
// comment traiter ces valeurs.
cursor.style.top = y + 'px';
cursor.style.left = x + 'px';
});Étape bonus
Notre curseur suit bien la souris mais de manière décalée. La solution est de déplacer notre curseur vers le haut et vers la gauche de la moité de sa taille:
CSS
.cursor{
/* à la suite de nos styles */
position: absolute;
top: 0;
left: 0;
margin-top: -24px;
margin-left: -24px;
}
Améliorations
& performances
Notre exemple fonctionne, il est simple de mise en place mais par contre il n'est pas optimal. En CSS on évitera de mettre à jour ou d'animer des propriétés autre que transform, opacity, color, background, etc. pour améliorer les performances. Dans des projets plus conséquents/gourmants, on pourrait commencer à noter une baisse des performances.