Author: Ewan S.

Tutoriels

Les bases pour débuter sur Unity

  • par Ewan S.

Envie de commencer à créer des jeux par vous-même? Unity est le meilleur moyen pour cela.

Unity, qu’est-ce que c’est ?

Unity est un moteur de jeu 2D et 3D gratuit faisant partie des plus utilisés de ces dernières années et est parmi les plus complets. De plus il possède une compatibilité avec tous les supports utilisés pou les jeux vidéos( PC, consoles, mobile) et a une prise en main assez simple donc parfait pour apprendre à faire des jeux

Commencer son projet sur Unity

Tous d’abord, il faut évidemment installer le Unity hub, que vous pouvez télécharger ici. Une fois l’installation terminée, nous pouvons enfin commencer notre premier projet. On commence donc par créer ce projet en appuyant sur « New project » et sélectionner si l’on veut faire à partir de zéro en 2D ou 3D ou si l’on part d’un template. Ici on va partir de zéro en 3D

Comprendre l’interface

Avant de travailler avec le moteur, il faut déjà comprendre l’interface dans laquelle on se retrouve afin de la maitriser. Cette interface se constitue de 6 parties

  • 1 > Scene View : La zone principale où on va placer et manipuler les objets .
  • 2 > Game View : Une vue d’aperçu pour tester à quoi ressemblera le jeu une fois exécuté.
  • 3 > Hierarchy : Liste des objets de la scène actuelle (caméra, lumières, personnages).
  • 4 > Inspector : Affiche les paramètres détaillés de l’objet sélectionné.
  • 5 > Project : Tous les fichiers (modèles, scripts…) sont stockés ici.
  • 6 > Console : Affiche les erreurs ou les messages liés à vos scripts.

À noter que la Scene view et la Game view s’affichent au même endroit suivant celui séléctionné, de même pour l’onglet projet et la console

Ajouter et manipuler différents objets

On va commencer par ajouter un cube à notre scène afin de pouvoir le manipuler par la suite. On va donc dans le panneau Hierarchy puis on fait un clic droit et on sélectionne « 3D object « puis « Cube ». Une fois le cube apparu à l’écran, nous pouvons commencer à le manipuler. Nous pouvons effectuer 2 actions basiques su ce cube: le déplacer sur 1 ou 2 axes à la fois (raccourci: W), le tourner sur un seul axe à la fois (raccourci: E) et enfin nous pouvons l’étirer sur 1 ou 3 axes à la fois(racourci: R)

On peut ensuite s’occuper des autres éléments de la scène, à commencer par la lumière. Il s’agit de l’objet « directional light » dans la Hierarchy. C’et un objet dont on ne peut changer la taille et dont la position ne change rien. Ainsi on utiliser uniquement la rotation pour orienter cette lumière comme celle du soleil en agissant sur sa hauteur dans le ciel et l’angle qu’elle possède par rapport au reste.

Enfin on va manipuler la caméra dont on ne peut également pas changer la taille. C’est cette caméra qui décide à partir de quelle position nous allons voir la scène créée , on peut observer par cette caméra dans la parti Game view mais également lorsqu’on la déplace, grâce à la petite fenêtre qui s’affiche en bas à droite et qui nous montre ce que l’on va voir à travers la caméra

Colorer un objet

On va pouvoir changer la couleur de notre objet et lui ajouter une texture plus ou moins réfléchissante. Pour cela, on va commencer par faire un clic droit dans le panneau Project et sélectionner « Create » puis « Material ». À partir de là on va modifier a texture en changeant plusieurs paramètres dans le panneau Inspector . Une fois que cela est fait, on va pouvoir appliquer cette texture aux objets que l’on veut en la glissant sur l’objet dans la Hierarchy ou directement dans la scène

Faire bouger l’objet grâce à un script C#

Pour pouvoir faire bouger nos objets il va bien évidemment nous falloir programmer (sinon ce serait trop facile). Unity utilise du code en C# pour ses programmes, il va donc falloir un éditeur compatible comme Visual Studio afin de pouvoir modifier ce script. On va donc commencer par créer le script en faisant clic droit>Create>C# script. Il est préférable de le nommer pour s’y retrouver plus facilement lorsqu’on en aura plusieurs. Une fois le fichier créé, on va l’ouvrir afin de le modifier. Pour l’exemple, j’ai décidé de faire simplement tourner l’objet sur lui-même grâce au code ci-dessous. Une fois le code écrit et sauvegardé, on va pouvoir l’intégrer à un objet en sélectionnant l’objet dans le panneau Hierarchy et en glissant le fichier vers l’Inspector . On peut ensuite lancer la scène avec le script en appuyant sur les boutons en haut au centre de l’écran

public class ObjectRotator : MonoBehaviour
{
    // Vitesse de rotation 
    public Vector3 rotationSpeed = new Vector3(0, 100, 0);

    void Update()
    {
        // Appliquer la rotation
        transform.Rotate(rotationSpeed * Time.deltaTime);
    }
}

À partir de là vous avez des bases sur lesquelles vous pouvez encore progresser sur tous les aspects de la conception de jeu , c’est une expérience très intéressant car cela nous pousse à en apprendre plus pour aller plus loin et pas seulement en code mais également en game design, éventuellement en modélisation et en encore une multitude d’autres aspects.

Merci d’avoir suivi ce tutoriel, j’espère que vous avez pu en apprendre plus sur l’incroyable moteur qu’est Unity

Art

Miata: une route de nuit

  • par Ewan S.

Il s’agit d’un projet d’art génératif réalisé en utilisant principalement le module turtle de python . Nous avons décider de générer une Mazda mx-5 aussi appelée Miata sur une route de nuit avec des étoiles générées aléatoirement.

Le script

On commence par importer les modules dont on a besoin pour la suite tout en définissant la taille de l’image grâce au module pillow

from turtle import *
from random import randint
try:
    from PIL import *
    pillow_installed = True
except:
    print("Oops! - ModuleNotFoundError: No module named 'PIL' - RTFM :")
    print("https://nsi.xyz/py2png")
    pillow_installed = False
# Uniquement des lettres, des chiffres, un tiret. Rien d'autre.
titre = "MIATA"
# Définir le titre de la fenêtre de turtle + propagande ^^
title(titre+" | Au lycée, la meilleure spécialité, c'est la spé NSI")
# definir la taille de la fenêtre en 720p (Largeur, Hauteur)
# La tortue part du centre, au point de coordonnées (0,0)
setup(800, 700)
# La tortue va à la vitesse du lièvre et active sa cape d'invisibilité
speed(0)
hideturtle()

Image de fond

On génère ensuite l’image en commençant par le fond

On commence par le ciel de nuit et les étoiles

def star():

     pensize(3)
     seth(randint(0,360))
     e = randint(2,6)
     color("#F2F3CF")
     penup()
     goto(randint(-400,400),randint(85,350))
     pendown()
     for i in range(5):
        forward(e)
        right(142)

speed(0)
pensize(10000)
hideturtle()
color("#07073C")
forward(10)

for i in range(18):
    star()
penup()
goto(-250,300)
pendown()
pensize(2)
begin_fill()
seth(210)
color("#BFC298")
for i in range(

On commence par définir la fonction star() qui nous sert a générer une étoile d’une taille aléatoire a une position elle aussi aléatoire dans la zone qui sera le ciel pour éviter qu’elle finisse cachée par les autres éléments qui seront générés par la suite. Ensuite on fait un fond bleu nuit qui prend l’entièreté de l’écran en mettant une taille de crayon très grande et on génère 18 étoiles en utilisant une boucle qui répète la fonction star() puis on fait un croissant de lune en faisant des boucles donnant des arrondis . Ainsi on obtient cela:

on continue en ajoutant une forêt qui sera derrière la voiture

goto(-400,75)
pendown()
pensize(2)
color("#2C4D20")
begin_fill()
for i in range(3):
    seth(45)
    forward(77)
    right(90)
    forward(70)
    seth(45)
    forward(60)
    right(90)
    forward(80)
    seth(45)
    forward(50)
    right(90)
    forward(43)
right(45)
forward(460)
right(90)
forward(810)
right(90)
forward(455)
end_fill()

Ce code nous permet de générer des triangles de 3 tailles différentes que l’on va remplir fin de donner l’illusion d’une forêt dense en utilisant un vert foncé

On continue en réalisant la route

seth(0)
goto(-450,-125)
pensize(30)
color("#373639")
forward(900)
penup()

goto(-400,-175)
pendown()
pensize(2)
begin_fill()
color("#262527")
forward(800)
right(90)
forward(200)
right(90)
forward(800)
right(90)
forward(200)
end_fill()

goto(-400,-180)
pensize(7)
seth(0)
for i in range(4):
    color("white")
    forward(100)
    penup()
    forward(100)
    pendown()

Ce code nous permet de faire un grand trait de couleur grise pour représenter la barrière puis il génère un grand rectangle qui représente la route en y ajoutant des bandes blanches, créant ainsi une route.

La voiture

On passe ensuite à la partie la plus importante du script: la voiture 

def phares():
    left(30)  
    fillcolor('gray')
    begin_fill()
    left(80)
    color('yellow')
    pensize(4)
    forward(25)
    pensize(1)
    color('gray')
    right(120)
    forward(30)
    right(130)
    forward(30)
    end_fill()
    forward(-31)
    color('red')
    pensize(4)
    right(50)
    forward(32)
    forward(-32)
    color('red')
    right(125)
    pensize(1)
    pendown()
def jantes():
    color('gray')
    begin_fill()
    fillcolor('black')
    circle(30)
    end_fill()
    forward(5)
    left(90)
    forward(10)
    pendown()
    begin_fill()
    fillcolor('silver')
jantes()

Cette partie nous permet de faire l’avant de la voiture en définissant la fonction pour faire une roue composée d’un pneu et d’une jante, inspiré des jantes BBS et ainsi que la fonction qui servira à faire le phare avant

pensize(1)
color('black')
fillcolor('red')
for i in range (35):
    forward(1)
    right(0.75)
right(75)

forward(50)
right(90)
for i in range(169):
    forward(0.5)
    left(1)
right(94)
forward(20)
end_fill()
right(85)
forward(52)
right(163)
penup()
forward(63)
pendown()
jantes()

Résultat final

Il s’agit de la fin du code pour l’image, terminant la Miata en faisant l’habitacle composé du toit de la voiture et d’une fenêtre puis l’arrière de la voiture en rappelant la fonction définie plus tôt afin de faire la seconde roue

Pour conclure on met la dernière partie de code pour exporter l’image en fichier.png

# ============== GENERER DES IMAGES AUTOMATIQUEMENT ==============

if flash:
    wn.update() 

image = getcanvas()
nom_du_fichier_sans_extension=titre+"_"+hex(randint(2**30+2**25,2**30+2**25+2**24-1))[2:]

# Génère un fichier .ps
image.postscript(file=nom_du_fichier_sans_extension+".ps", colormode='color')

# Ouvre le fichier .ps et génère le fichier .png


try:
    psimage = Image.open(nom_du_fichier_sans_extension+".ps")
    psimage.load(scale=2)
    psimage_resized = psimage.resize((1280, 720))
    psimage.save(nom_du_fichier_sans_extension+".png")
    print(nom_du_fichier_sans_extension+".png", psimage.size, "sauvegardé dans le dossier")    

except:
    if not pillow_installed:
        print("Oops! - ModuleNotFoundError: No module named 'PIL' - RTFM :")
        print("https://nsi.xyz/py2png")
    else:
        print("Oops! - 'ghostscript' not installed- RTFM :")
        print("https://nsi.xyz/py2png")

exitonclick()

Télécharger le projet

projet miataTélécharger