Procédure d'affichage des images

Un écran devenant blanc n'est pas très amusant, nous allons donc essayer d'affichager une image quelconque. Cette fois, ouvrez la solution se trouvant à Tutorial/Sample02_01/.

La procédure suivante explique comment afficher une image.

Enregistrement du fichier image

Enregistrez le fichier d'image que vous voulez afficher dans le projet.

Dans l'exploreur de solution PS Suite Studio, séléctionnez le dossier resources, clic droit - >Ajouter -> Ajouter un fichier et séléctionné le fichier d'image que vous désirez afficher.
Quand le fichier est enregistré, cliquez dessus avec le clic droit -> Propriétés -> Build Action et séléctionné "Content" (Content est défini de base pour le format PNG).
- Les formats d'images supportées sont PNG, BMP, JPEG, and GIF. Le format PNG supporte la transparence, donc il est préférable et même nécessaire d'utiliser ce format quand vous avez besoin de transparence.
- Le fichier d'image n'a pas besoin d'être dans le dossier "resources"; vous pouvez le mettre ailleurs si vous préferez.

Programme d'enregistrement du shader

Enregistrer le programme de shader dans le projet.

Ici, le vertex shader "Sprite.vcg" et le pixel shader "Sprite.fcg" sont inscrits pour avec projet.
Quand le fichier est enregistré, clic droit -> Propriétés -> "Action de construction" et séléctionnez ShaderProgram. Quand ShaderProgram et séléctionné dans "Action de contruction", cela changera Sprite.vcg et Sprite.fcg pour un fichier au format binaire Sprite.cgx

Création de texture et initialisation du programme de Shader.

Quand le fichier d'image et le programme de shader sont enregistrés dans le projet, exécuter l'initialisation suivante du programme.

Sample02_01/AppMain.cs

public static void Initialize ()
{
    graphics = new GraphicsContext();
    ...

    texture = new Texture2D("/Application/resources/Player.png", false);
    shaderProgram = new ShaderProgram("/Application/shaders/sprite.cgx");

    ...
}

Texture2D

texture = new Texture2D("/Application/resources/Player.png", false); créer la texture. "Texture creation" référence à la création d'une image dans la mémoire vidéo.

ShaderProgram

Lors de la lecture du program shader dans le programme, spécifiez bien le Sprite.cgx qui a été créé.

shaderProgram = new ShaderProgram("/Application/shaders/sprite.cgx"); cela compilera le program shader spécifié dans l'argument lors de l'exécution. Ensuite, le traitement peut être effectué en utilisant la méthode de shaderProgram.

Création d'un Vertex Buffer

Ensuite, réglez le vertex buffer pour le rendu de la texture. L'exemple suivant montre comment dessiner deux polygones triangulaires et les transformer en un quadrilatère.

Regardez le code source

Une zone qui conserve les coordonnées des vertex, les coordonnées de texture, les couleurs de vertex, et les indices qui doivent être préparées pour quatre vertices.

Parce que 3 éléments (x, y et z) sont requis en tant que coordonnées des vertex, 12 sont alloués dans un tableau de float (z est utilisé pour spécifier la profondeur).

Parce que 2 éléments (u et v) sont requis en tant que coordonnées de texture, 8 sont allouées dans un tableau de float.

Parce que 4 éléments (r, g, b, et a) sont requis en tant que couleurs de vertex, 16 sont allouées dans un tableau de float.

Allouer 4 indices (les indices sont utilisés pour spécifier l'ordre de rendu des vertex).

AppMain.cs

public class AppMain
{
    ...
    static float[] vertices=new float[12];

    static float[] texcoords = {
        0.0f, 0.0f, // 0 top left.
        0.0f, 1.0f, // 1 bottom left.
        1.0f, 0.0f, // 2 top right.
        1.0f, 1.0f, // 3 bottom right.
    };

    static float[] colors = {
        1.0f,   1.0f,   1.0f,   1.0f,   // 0 top left.
        1.0f,   1.0f,   1.0f,   1.0f,   // 1 bottom left.
        1.0f,   1.0f,   1.0f,   1.0f,   // 2 top right.
        1.0f,   1.0f,   1.0f,   1.0f,   // 3 bottom right.
    };

    const int indexSize = 4;
    static ushort[] indices;
    ...

Définir les coordonnées des sommets ("vertex") après que le fichier d'image est été lu avec Initialize ().

AppMain.cs

public static void Initialize ()
{
    graphics = new GraphicsContext();
    ImageRect rectScreen = graphics.Screen.Rectangle;

    texture = new Texture2D("/Application/resources/Player.png", false);
    shaderProgram = new ShaderProgram("/Application/shaders/sprite.cgx");
    shaderProgram.SetUniformBinding(0, "u_WorldMatrix");

    Width = texture.Width;
    Height = texture.Height;

    vertices[0]=0.0f;   // x0
    vertices[1]=0.0f;   // y0
    vertices[2]=0.0f;   // z0

    vertices[3]=0.0f;   // x1
    vertices[4]=1.0f;   // y1
    vertices[5]=0.0f;   // z1

    vertices[6]=1.0f;   // x2
    vertices[7]=0.0f;   // y2
    vertices[8]=0.0f;   // z2

    vertices[9]=1.0f;   // x3
    vertices[10]=1.0f;  // y3
    vertices[11]=0.0f;  // z3
    ...

Réglage du Vertex Buffer

Ensuite, réglez le vertex buffer. La taille des 4 Vertex est spécifiée dans le premier argument de VertexBuffer ().

public static void Initialize ()
{
    ...
    //                                              vertex pos,               texture,       color
    vertexBuffer = new VertexBuffer(4, indexSize, VertexFormat.Float3, VertexFormat.Float2, VertexFormat.Float4);
    ...
    vertexBuffer.SetVertices(0, vertices);
    vertexBuffer.SetVertices(1, texcoords);
    vertexBuffer.SetVertices(2, colors);

    vertexBuffer.SetIndices(indices);
    graphics.SetVertexBuffer(0, vertexBuffer);

Copiez les données des vertex vers le vertex buffer en utilisant vertexBuffer.SetVertices().

Spécifiez le vertex buffer à utiliser pour le rendu en utilisant graphics.SetVertexBuffer().

Coordonner conversion du Système

Ensuite, définir une matrice qui convertit le système de coordonnée d'une unitée de pixel vers l'écran par défaut du système de coordonnées.

public static void Initialize ()
{
    ...
    ImageRect rectScreen = graphics.Screen.Rectangle;
    ...
    unitScreenMatrix = new Matrix4(
         Width*2.0f/rectScreen.Width,   0.0f,       0.0f, 0.0f,
         0.0f,   Height*(-2.0f)/rectScreen.Height,  0.0f, 0.0f,
         0.0f,   0.0f, 1.0f, 0.0f,
         -1.0f,  1.0f, 0.0f, 1.0f
    );
}

ImageRect rectScreen = graphics.Screen.Rectangle; obtient la taille de l'écran.

Dans des systèmes de coordonnées de jeu 2D, généralement la partie supérieure gauche est l'origine et l'axe Y augmente en direction du bas de l'écran. Par ailleurs, une unité est un pixel de la résolution d'affichage.

Dans les systèmes de coordonnées par défaut d'écran, le centre de l'écran est à l'origine, le côté droit de l'écran est à 1.0, le côté gauche est à -1.0, la face supérieure est à 1.0, et le côté inférieur est à -1.0.

Système de coordonnées d'un jeu 2D (à gauche) et le système de coordonnées d'écran (à droite)

Par conséquent, pour l'affichage des polygones spécifiés avec le système de coordonnées d'un jeu 2D (ci-après "le système de coordonnées de pixel"), les sommets ("vertex") doivent être convertis en un système de coordonnées d'écran pour l'affichage à l'écran.

La valeur choisie avec Matrix4 () sert à effectuer cette conversion.

Polygon Rendering Execution

Après avoir spécifié chaque élément, exécutez la commande de rendu.

public static void Render ()
{
    graphics.Clear();

    graphics.SetShaderProgram(shaderProgram);
    graphics.SetTexture(0, texture);
    shaderProgram.SetUniformValue(0, ref unitScreenMatrix);

    graphics.DrawArrays(DrawMode.TriangleStrip, 0, indexSize);

    graphics.SwapBuffers();
}

DrawArrays() est une fonction d'exécution de rendu

Lorsqu'elle est exécutée, l'image s'affiche à l'écran.

Définition d'une Simplified Version Sprite Class

Il est recommandé que vous fassiez le code d'affichage d'image de ce chapitre en tant que classe réutilisable. Les définitions de classes sont décrites dans TutoLib/SimpleSprite.cs.

Note: La présente classe SimpleSprite est une version simplifiée créée pour en voir l'explication dans ce guide de programmation, son développement n'est pas optimisé pour le rendu. Pour un rendu à grande vitesse, utilisez Sce.Pss.HighLevel.GameEngine2D.

2. Afficher une image