Une classe GUIButton pour représenter un bouton cliquable

8HcZT

Intro :

Parfois nous avons besoin d’afficher un bouton pour rendre l’interface utilisateur (GUI) plus dynamique. Le bouton peut afficher une autre image lorsqu’il est reste cliqué dessus !

Prérequis :

– Avoir lu la classe GUIWidget

Contenu :

Voici le fichier GUIButton.h :

 

Voici le fichier GUIButton.cpp :

 

Résumé :

Voici une classe qui permet d’afficher un bouton cliquable.

Une classe GUIImage pour afficher une image

Intro :

4NgHv

Parfois nous avons besoin d’afficher une image pour rendre l’interface utilisateur (GUI) plus jolie.

Prérequis :

– Avoir lu la classe GUIWidget

Contenu :

Voici le fichier GUIImage.h :

 

Voici le fichier GUIImage.cpp :

Résumé :

Une classe GUIWidget pour gérer les objets graphiques

Morrowind_UI

Intro :

Dans un jeu vidéo, nous avons besoin de créer des interfaces graphiques afin que le joueur puisse communiquer ou sélectionner des items, cliquer sur des boutons, déplacer une armure, etc…

Prérequis :

– Savoir initialiser DirectX 10

– Savoir lire du C++

– Connaître la classe Sprite2D

Contenu :

Voici le fichier GUIWidget.h  :

 

Voici le fichier GUIWidget.cpp :

Résumé :

Nous avons présenter la première classe nommée GUIWidget qui servira de base à toutes les autres classes graphiques (GUI).

Une simple classe D3D10Renderer

Intro :

1211804249

Pour utiliser DirectX, il nous faut une classe D3D10Renderer afin d’initialiser le rendu graphique 3D.

Prérequis :

– Aucun

Explications :

Voici le code du fichier D3D10Renderer.h :

 

Voici le code du fichier D3D10Renderer.cpp :

 

Résumé :

Nous avons présenté les deux fichiers nécessaire à l’initialiser du rendu graphique de DirectX !

Le texture mapping

texturage

Intro :

Le texture mapping est une opération qui consiste à ajouter, avec une image, du détail de couleur à un modèle 3D.

Ce procédé est réalisé par l’étape Pixel Shader de la pipeline graphique du GPU.

Prérequis :

Explications :

texture

Résumé :

Références :

– https://takinginitiative.files.wordpress.com/2010/08/6.pdf

Les différents espaces de rendu graphique

transfor

Intro :

Avant d’effectuer un rendu en deux dimensions à l’écran (qui est une matrice de pixels), il est nécessaire d’effectuer certaines conversions de coordonnées entre des repères bien spécifiques.

DirectX a besoin de 3 matrices pour effectuer ce rendu.

Prérequis :

– Savoir ce qu’est une matrice

– Savoir ce qu’est un vecteur

– Savoir ce qu’est une transformation d’un système coordonnées dans un autre

Explications :

Tous les objets 3D sont composés d’un ensemble de triangles. Ces triangles sont composés de vertices. Ce qui fait que les objets 3D (appelés aussi meshes) sont représentés simplement une liste de vertices.

Model Space :

[image bonhomme avec axe model space]

Pour repérer correctement les vertices d’un modèle, nous avons besoin d’un repère ou d’un système de coordonnées.

Chaque modèle (ou mesh) a un système de coordonnée appelé en anglais « Space » .

L’artiste qui a créé ce modèle avec un logiciel de modélisation 3D (comme Maya, Blender ou 3D Studio Max)
a défini ses vertices dans cet espace (qui se nomme comme le Model Space).

World Space :

Notre scène a aussi un système de coordonnées (ou repère) qui se nomme le « World Space » et chaque modèle / objet a une position relative à ce dernier repère.

C’est dans cet espace que nous pouvons effectuer des translations, des rotations et des agrandissements.

View Space :

Nous avons besoin que la scène soit vue d’une certaine position dans celle-ci. Cette position s’appelle l’œil (the eye en anglais) ou la caméra.

Projection Space :

Nous avons besoin d’afficher le contenu de la scène en fonction de la position de la caméra à l’écran ou au framebuffer.

Résumé :

Références :

– https://fr.wikipedia.org/wiki/Rast%C3%A9risation

– https://en.wikipedia.org/wiki/Rasterisation

– https://takinginitiative.files.wordpress.com/2010/08/2.pdf

La technique du back-face culling

backface

Intro :

La technique du back-face culling permet d’ignorer le rendu des triangles qui ne sont pas visible par l’observateur ou la caméra.

Prérequis :

–  Savoir ce qu’est un produit scalaire

Explications :

Par exemple, les triangles de l’intérieur d’un modèle ou personnage ne seront pas rendu si l’on rentre et se positionne dedans !

Bacfaceculling

Dans DirectX, les vertices d’un triangle sont définis dans un certain ordre (il existe deux sens : le sens « counter clockwise » et le sens « closewise»). Cet ordre va définir dans quel sens est orienté la normale du triangle en question (voir l’article sur la normale).

clock_wise

Comment ça fonctionne ?

Soit le vecteur représentant la position de la caméra \(\vec{c} \) ; et le vecteur représentant la position du centre du polygone à tester \(\vec{p} \).

On calcule donc le vecteur \(\vec{v} = \vec{p} – \vec{c} \)

On a aussi le vecteur normal à ce même polygone \(\vec{n} \)

Mathématiquement :

\(k = \vec{v} \cdot \vec{n} \)

 

Si le produit scalaire \(k \) est positif (en fait cela dépend du type de culling) alors cela signifie que le triangle est orienté dans le même sens que la vue (il nous tourne le dos), et il peut donc être éliminé du rendu.

Voilà c’est tout simple !

Il faut savoir aussi que cet algorithme est géré automatiquement par DirectX et la carte graphique.

On peut le configurer comme suit :

 

Résumé :

Pour conclure, le backface culling est l’élimination des faces qui « tournent le dos » à la caméra et que l’on ne voit donc pas.

Références :

– http://jeux.developpez.com/faq/3d/?page=culling

– http://stackoverflow.com/questions/3595087/opengl-newbie-question-what-is-back-face-culling

– http://www.gamedev.net/page/resources/_/technical/graphics-programming-and-theory/3d-backface-culling-r1088

– https://en.wikipedia.org/wiki/Back-face_culling

– https://fr.wikipedia.org/wiki/D%C3%A9termination_des_surfaces_cach%C3%A9es

Le Frustum de la caméra

frustum

Intro :

Appelé aussi « view frustum », ce volume décrit la façon dont la caméra effectue le rendu 2D.

En effet, pour effectuer du rendu 3D à l’écran, il faut définir une « camera » virtuelle qui pourra se mouvoir et se déplacer dans la scène.

Prérequis :

– Savoir initialiser DirectX 10.1

Explications :

camera_view_volume

Cette caméra spécifie quel volume, depuis l’observateur de la scène, elle peut observer.

L’espace compartimenté entre le « near clip plane » et le « far clip plane » définit le volume que la caméra peut voir. Cet espace s’appelle le « frustum » de la caméra, et comme on peut le voir c’est une sorte de pyramide tronquée.

Le clipping :

Les objets (ou les parties d’objets) qui ne sont pas à l’intérieur de ce volume doivent être ignorés avant d’être traités vers le rendu 2D. Ce procédé s’appelle le « clipping » (ou coupage en français).

Le « near clip plane » définit jusqu’à quelle distance les objets les plus proches de la caméra sont ignorés, en effet les objets situés entre le « near clip plane » et la caméra sont « coupés » (clipped).

Le « fear clip plane » définit jusqu’à quelle distance les objets les plus loins de la caméra sont ignorés, en effet les objets situés au delà du « far clip plane » sont « coupés » (clipped).

Les triangles situés en partie dans ce volume sont séparés en deux parties.

Les propriétés de ce volume « frustum » dépendent du FOV (Field of View) et des positions des near clip plane et fear clip plane.

La nature du frustum va modifier la façon dont le rendu sera effectué à l’écran 2D. C’est-à-dire depuis l’espace de la caméra 3D vers l’espace de projection 2D.

Composition :

Le frustum est composé de 6 plans formant une pyramide tronquée.

Pour savoir savoir si un point est dans le volume on utilise le produit scalaire sur ces 6 plans. Si les valeurs correspondent après avoir calculer les produits scalaire, le point est à l’intérieur du frustum.

Résumé :

Le frustum de la caméra représente le volume de vue que l’observateur peut voir dans la scène (graphe qui est formée de tous les modèles visibles).

Référence :

– https://msdn.microsoft.com/en-us/library/ff634570.aspx

– https://en.wikipedia.org/wiki/Viewing_frustum

– Shader Approach – Franck D.Luna

Kit basique d’initialisation DirectX 10.1

 

Kit

KIT_2

Intro :

Voici un kit formé d’un ensemble de fichiers qui pourra servir de base pour vos programmes graphiques ou essais 3D. Le kit comprend à peu près 4000 lignes de code.

Prérequis :

– Savoir lire du C++

Explications :

[rajouter : ]

[fullscreen switch]

[shadermanager]

Il comprend :

– le support de la transparence

– une caméra classique

– une caméra de type FPS (First Person Shooter) avec laquelle on peut voler partout

– une énumération de couleurs

– un gestionnaire D3D10Renderer – quasi complet

– la possibilité de lancer l’application en plein-écran ou non

– la possibilité d’afficher du texte

– des gestionnaires en design-pattern Singleton (classe Singleton)

– un ensemble de macros toutes utiles

– un gestionnaire InputManager pour gérer les entrées clavier et souris de l’utilisateur

– une classe SceneNode pour représenter vos entités sur la scène

– avec fonctions de translation, rotation et agrandissement

– un gestionnaire de fichier effet Shader avec gestion automatique des variables shader

– quelques définitions de shaders (ex : simple, lumière)

– une classe SkyDomeSceneNode (pour afficher un ciel avec une TextureCube)

– une classe SphereMeshSceneNode pour générer une sphère de façon procédurale

– une classe System

– une classe TextureManager pour charger les fichiers textures rapidement

– une liste complète de déclaration de vertex (avec les Vertex Input Layout)

– une classe Utils avec fonctions toutes très utiles

Résumé :

Voici l’archive contenant le kit et tous ses fichiers associés.

Références :

– stackoverflow.com

Utilisation du type TextureArray

TextureArray

Intro :

Souvent à l’étape pixel shader, on a besoin d’accéder à plusieurs textures en même temps.

Prérequis :

– Savoir lire du C++

– Savoir initialiser DirectX

Explications :

Voici une fonction qui créé un objet Texture2D :


Voici une fonction qui créé un objet Texture2D assemblé et combiné de plusieurs Texture2D :

 

Voici la fonction qui créée une texture ressource shader pour le programme HLSL :

 

Utilisation : 

Résumé :

Nous avons présenté une façon d’accéder à une variable représentant un tableau de textures directement dans le shader !

Références :

– Franck D.Luna – DirectX 10

Générer une sphère MeshSceneNode

Sphere

Intro :

Il peut être utile de savoir générer une sphère à la volée par la définition de ses vertices et de ses indices.

Prérequis :

– Savoir lire du C++

– Savoir initialiser DirectX 10

– Savoir utiliser et comprendre un peu de trigonométrie

– Savoir utiliser la classe Renderable

– Savoir utiliser la classe MeshSceneNode

– Savoir utiliser la classe ShaderTechnique

Explications :

Voici l’implémentation de la classe shader :

 

Voici le fichier ShaderTechnique_BasicTexture.cpp :

 

Voici le fichier SphereMeshSceneNode.h :

 

Voici le fichier SphereMeshSceneNode.cpp :

 

Résumé :

Nous avons appris comment générer une sphère en 3D avec ses coordonnées de texture et normales.

Référénces :

– http://stackoverflow.com/questions/5988686/creating-a-3d-sphere-in-opengl-using-visual-c

Quelques notions de l’API système Windows 32

win32

Intro :

Prérequis :

– Savoir lire du C++

Explications :

La structure RECT :

Cette structure permet de définir un rectangle.

Résumé :

Références :

– https://msdn.microsoft.com/fr-fr/library/windows/desktop/dd162897%28v=vs.85%29.aspx

Les processus légers (threads) avec std::thread (C++11)

Intro :

Les threads sont utilisés dans ce qu’on nomme  « la programmation concurrente », qui consiste en l’exécution des processus légers. Cela représente une séquence d’exécution du code d’un programme au sein d’un processus. Quelque part, les threads sont des processus légers qui sont exécutés « à l’intérieur » d’un processus.

Les threads d’un même processus partagent la même mémoire et leurs variables. La pile de chaque thread est cependant unique pour chacun d’entre-eux.

Un processus habituel possède un seul thread et ce dernier correspond tout simplement au processus lui-même.

Soit c’est le noyau du système d’exploitation qui s’occupe des threads, soit ils sont gérés dans l’espace utilisateur à travers un gestionnaire spécial !

Prérequis :

– Savoir lire du C++

Explications :

Exemple d’utilisation d’un std::thread :

 

La méthode .join() permet d’assurer que le thread se termine avant de quitter le programme ou la portée du code. Cet appel est bloquant !

Un thread est dans l’état « joignable » s’il est est créé avec une tâche à réaliser.

Le type std::thread (C++11) a une méthode get_id() afin d’obtenir l’id du thread en question.

Il peut exister un problème de synchronisation entre deux threads ! On doit protéger l’accès à certaines ressources si deux threads distincts sont en train d’y accéder en écriture.

Un thread peut être aussi détaché :


Qu’est-ce qu’un sémaphore ?

Il permet de synchroniser l’accès à une ressource partagée. Cette ressource peut aussi bien être un bout de code !

Les threads accèdent aux ressources par le biais de ce sémaphore.

Pendant que le thread exécute cette ressource partagée aucun autre thread ne peut y accéder. Dès qu’il a terminé son travail, il libère le sémaphore (qui est nommé aussi « moniteur »).


Qu’est-ce qu’un mutex ?

Le mot « mutex » provient de l’abréviation « Mutual Exclusion ». Il assure que les données partagées sont « mutuellement exclusives ». Il s’agit juste d’une variable qui peut être soit dans l’état « verrouillé » ou soit dans l’état « déverrouillé » !

Pour verrouiller un mutex on utilise la méthode lock().

Dès qu’un thread a fini de travailler avec une donnée / ressource partagée il doit libérer le mutex ! Il faut utiliser la méthode unlock().

On peut déclarer le mutex en même temps que la variable à protéger !

 

Qu’est-ce qu’une condition ?

Une condition est nécessaire d’être utilisée si l’on veut qu’un thread patiente à l’événement d’un autre thread.

Lorsqu’un thread est en attente d’une condition, il reste bloqué jusqu’à ce que la condition soit réaliser par un autre thread.

Résumé :

Nous avons présenter l’utilisation des thread (processus léger) afin de répartir l’exécution des bouts de code d’un jeu-vidéo.

En effet, les programmes utilisant des threads sur des architectures de type multi-processeurs sont plus rapides que les programmes plus classiques !

Références :

– http://www.iro.umontreal.ca/~dift1169/cours/ift1169/communs/Cours/2P/C12_1169_2P.pdf

– https://fr.wikipedia.org/wiki/Thread_(informatique)

Transformations géométriques des objets par les matrices

1

Intro :

Les transformations géométriques opérées sur des objets 3D sont de 3 types : translation, rotation et mise à l’échelle (agrandissement). Grâce à ces trois transformations, on peut mettre un mouvement un ensemble de points (ou un modèle).

Mais de quoi s’agit-il ?

Une translation est un changement de position d’un point ou de plusieurs points.

Une rotation permet de faire pivoter un point (ou plusieurs points) autour d’un axe par un certain angle.

Une mise à l’échelle permet d’agrandir ou de diminuer la taille d’un objet.

Prérequis :

– Savoir ce qu’est un vecteur

– Savoir ce qu’est une matrice

Explications :

Il existe deux manières de représenter un système de coordonnées : de type gauche ou de type droit.

sys_coord

DirectX utilise un système de coordonnées de type droit tandis que OpenGL utilise un système de coordonnées de type gauche.


On peut se servir des matrices pour représenter une transformation d’un objet dans l’espace de coordonnées 3D.

L’intérêt de la représentation matricielle est principalement qu’on peut combiner à la suite n’importe quelle transformation en une et seule matrice de transformation finale.

Une transformation est une opération qui prend en entrée un vecteur et qui en sortie le converti autrement.

Transformation linéaire :

On précise que mathématiquement une transformation (en l’occurrence linéaire) représente :

Soit la fonction \(\tau(v) = \tau{(x , y , z)} = (x^{\prime}, y^{\prime}, z^{\prime}) \)

respectant les propriétés suivantes :

\(\tau(u+v) = \tau(u) +\tau(v) \)   et   \(\tau(ku) = k\tau (u) \)

avec \({u} \) et \({v} \) deux vecteurs  à 3 composantes.

Ces transformations sont nommées « linéaires » car elles préservent l’addition de vecteurs et la multiplication par un scalaire.

Toutes les transformations linéaires peuvent être représentées par une matrice 3×3 (ou plus).

Pensez que les opérations de rotation ou d’agrandissement sont toutes des transformations linéaires respectant ce dernier principe.

Quant à la transformation de translation, elle n’est pas une transformation linéaire mais une transformation affine.
Une transformation affine est une transformation linéaire qui est suivie d’une translation, elle préserve la colinéarité des vecteurs (caractéristique des vecteurs qui ont la même direction). Ces dernières sont peuvent être représentées par une matrice 4×4.

On remarque que les matrices de rotation et d’agrandissement sont aussi, par quant à elles, des transformations affines !

Pour s’en servir, on multiplie un vecteur qui a besoin d’être transformé par une matrice 4×4 de translation. Ce dernier vecteur doit être en notation « homogeneous » (voir l’article sur les transformations de coordonnées) pour être multiplié par une matrice 4×4.

L’avantage de ces matrices affines, est qu’elles peuvent être combinées les une à la suite des autres en une seule matrice finale qui peut représenter la somme de ces transformations.


La translation :

[schéma / dessin]

Voici la matrice de transformation affine représentant une translation :

\(\textbf{T}(\textbf{t}) = \textbf{T}(t_{x}, t_{y},t_{z}) = \begin{pmatrix} 1 & 0 & 0 & t_{x} \\ 0 & 1 & 0 & t_{y} \\ 0 & 0 & 1 & t_{z} \\ 0 & 0 & 0 & 1 \end{pmatrix} \)

Le vecteur \(\textbf{t} \) représente la valeur de déplacement de la matrice.

Pour changer la position d’un vecteur \(p \) par cette matrice on fait :

\(Translation = \textbf{T}(\textbf{t})p \)

L’inverse de cette matrice (opération inverse) :

\(\textbf{T}^{-1}(\textbf{t}) = \textbf{T}^{-1}(t_{x}, t_{y},t_{z}) = \textbf{T}(-t_{x}, -t_{y},-t_{z}) = \begin{pmatrix} 1 & 0 & 0 & -t_{x} \\ 0 & 1 & 0 & -t_{y} \\ 0 & 0 & 1 & -t_{z} \\ 0 & 0 & 0 & 1 \end{pmatrix} \)

L’agrandissement :

Une matrice d’agrandissement permet de faire grossir ou de diminuer un modèle.

Voici la matrice de transformation affine représentant une mise à l’échelle :

\(\textbf{S}(\textbf{s}) = \textbf{S}(s_{x}, s_{y}, s_{z}) = \begin{pmatrix} s_{x} & 0 & 0 & 0 \\ 0 & s_{y} & 0 & 0 \\ 0 & 0 & s_{z} & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} \)

Le vecteur \(\textbf{s} \) représente la grandeur d’agrandissement.

Pour agrandir ou minimiser un vecteur \(p \) par cette matrice on fait :

\(Agrandissement = \textbf{S}(\textbf{s})p \)

L’inverse de cette matrice (opération inverse) :

\(\textbf{S}^{-1}(\textbf{s}) = \textbf{S}(1/s_{x}, 1/s_{y}, 1/s_{z}) = \begin{pmatrix} 1/s_{x} & 0 & 0 & 0 \\ 0 & 1/s_{y} & 0 & 0 \\ 0 & 0 & 1/s_{z} & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} \)

Si  \(s_{x} = s_{y} = s_{z} \) alors la matrice d’agrandissement est dite « uniforme ».

La rotation :

Cette transformation opère une rotation sur un vecteur avec un angle donné \(\theta \) et autour d’un axe donné \(i \)

La matrice de transformation affine sur l’axe des x :

\(\textbf{R}_{x}(\theta) = \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos \theta & -\sin \theta & 0 \\ 0 & \sin \theta & \cos \theta & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} \)

La matrice de transformation affine sur l’axe des y est :

\(\textbf{R}_{y}(\theta) = \begin{pmatrix} \cos \theta & 0 & \sin \theta & 0 \\ 0 & 1 & 0 & 0 \\ -\sin \theta & 0 & \cos \theta & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} \)

La matrice de transformation affine sur l’axe des z est :

\(\textbf{R}_{z}(\theta) = \begin{pmatrix} \cos \theta & -\sin \theta & 0 & 0 \\ \sin \theta & \cos \theta & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} \)

Pour faire pivoter un vecteur p par cette matrice on fait :

\(Rotation = R_{x/y/z}(\theta)p \)

L’inverse de cette matrice (opération inverse) :

\(\textbf{R}^{-1}(\theta) = \textbf{R}(-\theta) \)

Faire une rotation autour d’un point quelconque :

[image / schéma avec un bonhomme]

On remarque qu’une rotation autour d’un axe \(i \) d’un point \(p \) ne change en rien la position du point \(p \) sur l’axe \(i \).

En utilisant ce principe, on déplace le point \(p \) de façon à ce qu’il coïncide autour de l’origine : la matrice de translation \(\textbf{T}(-p) \) le permet.
On opère ensuite la rotation sur l’axe \(i \) par la matrice de rotation \(\textbf{R}{_i}(\theta) \).
Finalement le point \(p \) doit être remis à sa position initiale par la matrice de translation \(\textbf{T}(p) \).

La transformation finale correspond à cette égalité : \(\textbf{X} = \textbf{T}(p)\textbf{R}{_i}(\theta)\textbf{T}(-p) \)

Résumé :

Nous avons présenté les matrices de transformations affines qui permettent de mouvoir les modèles (ensemble de points / vecteurs d’un objet / modèle) à travers la translation, la rotation, et la mise à l’échelle.

Références :

– https://takinginitiative.files.wordpress.com/2010/08/2.pdf

– Shader Approach DirectX 9

– Real Time Rendering – Third edition

Récupérer le nombre de cœurs et d’autres informations de votre processeur

gulftowndie

Intro :

Il peut être utile de connaître le nombre de cœur de votre processeur afin d’optimiser vos applications utilisant des processus légers.

On peut obtenir aussi les information des caches associés au CPU.

Prérequis :

– Savoir lire du C++

Explications :

Voici le fichier d’en-tête CPUInfo.h :

 

Voici le fichier source CPUInfo.cpp :

 

Résumé :

Nous avons présenter une méthode pour obtenir le nombre de cœur(s) de votre CPU.

Références :

– http://blogs.media-tips.com/bernard.opic/2007/09/03/compter-le-nombre-de-1-dans-la-forme-binaire-d-un-nombre/

– https://msdn.microsoft.com/fr-fr/library/windows/desktop/ms683194%28v=vs.85%29.aspx

Obtenir les informations de votre CG avec les interfaces DXGI*

gtx

Intro :

Il peut être utile d’obtenir le nom de la carte vidéo, sa mémoire vive maximum et tous ses modes d’affichage possibles pour un jeu vidéo.

Prérequis :

– Savoir initialiser DirectX 10

Explications :

Avant tout, voici deux petites macros affichant les erreurs tout en retournant false s’il y a en une !

 

Voici la fonction qui affiche les informations sur la carte graphique :

 

Voici la fonction qui affiche les capacités de la carte graphique en matière d’anti-aliasing (déjà présentée dans les articles précédents) :

 

Voici la sortie de la console une fois affichés les modes d’affichage :

CG_specs

 

Résumé :

Nous avons appris comment obtenir les informations à partir de la carte graphique.

Introduction à DirectX 10 – Écrire du texte à l’écran (système de polices) – partie 7

directx9c

Hello

Utilisation de BMFont :

BMFont

 

Intro :

Pour afficher du texte dans une application DirectX il faut procéder comme suit.

Prérequis :

– Savoir initialiser DirectX 10

– Savoir comment afficher une image 2D à l’écran

Septième partie :

Afficher du texte à l’écran.

Explications :

Il vous faudra plusieurs images bitmap pour supporter les différentes résolutions de l’écran de l’utilisateur.

« Their source rect will form our texture coordinates, and their destination rect will form our vertexcoordinates. »

 

Voici le fichier FontTextManager.h :

 

Voici le fichier FontTextManager.cpp :

 

Résumé :

Nous avons présenter une méthode générique pour afficher du texte à l’écran ! Pas besoin d’utiliser D3DXFont !

Références :

– http://www.rastertek.com/dx10tut12.html

– http://kvazars.com/littera/

– http://www.angelcode.com/products/bmfont/

– http://www.angelcode.com/products/bmfont/doc/file_format.html

– http://www.gamedev.net/topic/330742-quick-tutorial-variable-width-bitmap-fonts/

Apprendre à apprendre – méthode de travail

moreno-brain

Intro  :

La conception de jeu vidéo est un domaine vraiment dur à maitriser et à apprendre. Pour être compétent, il faut travailler régulièrement et sans relâche. Il faut donc être armé de méthodes pour y parvenir.

Prérequis : 

– Être motivé pour apprendre

Explications :

Voici quelques méthodes pour vous aider à progresser dans l’apprentissage de la conception de jeux vidéo ou celle du rendu 3D.

Méthodes :

1) Lors de la lecture d’un texte plus ou moins compliqué, il faut absolument noter tout les mots inconnus et prendre le temps de les définir avec un dictionnaire ou un lexique cherché par exemple sur un moteur de recherche.

2) Ne pas hésiter à essayer la méthode Coué pour suggestionner votre mental afin de faire émerger beaucoup d’idées dans votre esprit.

Répéter 15 fois 3 fois par jour : « Je suis très fort en programmation graphique et de jeux vidéo » à voix haute.

3) Ne faites qu’une chose à la fois ; apprenez qu’un seul thème à la fois. Par exemple « en ce moment j’apprend l’utilisation des quaternions ». Si vous n’avancez pas (ou si vous ne comprenez pas) un thème, passer au suivant.

4) Tenez à jour un mémo journalier où vous indiquez ce que vous apprenez petit à petit.
Il vous sera utile pour observer et identifier vos lacunes sur les sujets que vous n’avez pas assez travaillés ; à l’inverse, il vous sera aussi utile pour vous rappeler les sujets que vous maitrisez.

5) Travaillez par tranche de 1 heure 30 minimum sur un sujet, en effet mon expérience démontre qu’il n’est pas rentable de travailler moins d’une heure d’affilée. C’est pour cela que les cours à l’école durent plus de deux heures !

6) Comprendre avant d’apprendre. En effet il ne sert à rien d’apprendre par cœur des formules si vous ne savez pas à quoi elles servent.

7) Rejoignez un projet de jeu vidéo open source cherché sur le net. En effet le travail en équipe vous motivera et la communication avec les autres programmeurs enrichira vos connaissances.
C’est le même principe qu’avec un guitariste qui prendra peut-être plaisir à jouer seul, mais s’il jouait en groupe il progressera plus vite étant donné la motivation de travailler en groupe.

8) Faites des fiches en notant l’essentiel de chaque sujet où définissez vos mots inconnus.

9) Relisez vos fiches ou vos notes avant de vous coucher ou dans les transports en commun.

10) Ne lisez jamais du contenu que vous connaissez et maîtrisez déjà.

11) Lisez plus que vous n’écrivez !

12) Apprendre un langage de programmation est comme apprendre une langue étrangère : plus vous la pratiquez, mieux vous la comprenez.

13) Sélectionnez efficacement les documents / pages web que vous comptez lire, tout en évaluant la pertinence de ceux-ci.

En effet, le prix nobéliste de mathématiques C. Villani a dit : « […] maintenant, pour comprendre le monde, il ne s’agit plus d’avoir accès à l’information, mais bien de la trier ! »

14) Utilisez le principe de lecture « front to back and back to front ». Lisez d’abord de manière descendante et relisez de manière ascendante vos documents préférés.

15) Lisez de préférence du contenu qui vous semble facile. Lisez de préférence du contenu dont vous êtes susceptible de mieux retenir.

16) Je sais que c’est dur, mais essayer d’apprendre le plus rapidement possible !

Résumé :

Pour progresser dans l’étude de la programmation graphique, j’ai énuméré 4 idées :

Sur le net, il existe beaucoup de bonnes idées sur des blogs de développement personnel, n’hésitez pas à jeter un oeil !


Références : 

– https://fr.wikipedia.org/wiki/M%C3%A9thode_Cou%C3%A9

– Mon expérience

Introduction à DirectX 10 – Redimensionner la fenêtre de rendu – partie 6

directx9c

Intro :

Dans une application DirectX, l’utilisateur peut vouloir redimensionner la fenêtre à sa guise ou passer le jeu en mettre en mode plein écran.

Il faut implémenter et coder cette fonctionnalité.

Prérequis :

– Avoir suivi la cinquième partie de ce tutoriel.

Sixième partie :

Redimensionnement et plein écran de la fenêtre de rendu.

Explications :

Avant tout, juste pour énoncer un petit point  mis à part :

L’appel à D3D11DeviceContext::ClearState réinitialise par défaut toutes les configurations du contexte d’affichage (remet à zéro les shaders, les inputs layout, les viewports, etc..)

 


 

Avec les interfaces DXGI* on peut obtenir les informations sur la carte graphique :

 

Voici le programme de cet article une fois compilé et lancé :

fullscreen

 

La fonction qui redimensionne les buffers :

 

La fonction qui gère les entrées clavier :

 

Résumé :

Depuis DirectX 10 il est plus facile et aisé de changer de résolution et de passer en mode plein écran.

Voici les fichiers source – Partie 6

Références :

– https://msdn.microsoft.com/en-us/library/windows/desktop/ff476389%28v=vs.85%29.aspx

– https://msdn.microsoft.com/en-us/library/windows/desktop/bb174577%28v=vs.85%29.aspx