Distortion Mesh

Here I try to explain the functionality of a Distortion Mesh and take a quick glance at the Factory Method pattern.

First, take a look at the TriVertex stuff, because the Distortion Mesh uses TriVertex objects. The TriVertex is a structure, containing:

  • x,y for the screen coordinates
  • u,v for the image coordinates (uv-mapping: which pixel of the screen should be associated with which pixel of the image)
  • a color for this point

Now to the Distortion Mesh: in simple terms, the mesh is nothing more than a two-dimensional array of TriVertexes. This array is filled with the coordinates of a, in equally spaced cells divided, image. For details, take a look at the SetImage() function of the DistMesh-class. After initializing the mesh we have something like this:

cleared mesh

Every intersection point, including the corners of the white mesh, is a point stored in the mesh-array. To draw this, we want to use the DrawTriangleTex() function, which accepts a list of triangles to draw. Since a triangle is a commonly used geometric primitive also used by Direct X, we need 3 of this TriVertex structures (v1, v2, v3) to describe a triangle. By the way, if you provide different color values, the colors will be blended between the vertices of the triangle (take a look at the sunbeam reflection on the water). We can also form a quad with 2 triangles by adding a fourth TriVertex (v4). Triangle 1 with the points v1, v2, v3 and Triangle 2 with the points v3, v2, v4 :

TriVertex Quad

Back to our mesh: each quad of the mesh is formed by 2 triangles, as you see on this magnification here:

mesh triangles

Now, all we have to do is to vary the x and y coordinates of the mesh by looping over the array and offset the TriVertex points. This adds the distortion to the image:

mesh distorted

With this technique, a relatively wide variation of effects can be achieved.

The Factory Method design pattern

Well, besides all of this object-oriented pros and cons, I tried to find a way to avoid this ugly switch-case things when switching between the different effects. I found the factory method pattern, see here on wiki. I´ve drawn a little picture to make it more understandable:

Factory Method Pattern

The method GetMeshEffect() is the so called "factory method". I don´t use it as defined by Gamma et al, because all of my objects are created in the constructor of the factory, but it fits my needs ;) Choosing the current effect in the Board-class is really easy now, without any switch-cases: 

MeshEffect = MeshEffectFactory.GetMeshEffect("EffectName");

Now have fun with the little demonstration, perhaps the mesh will make it into your next game ? Like always, any feedback is appreciated.


Bitte bewerten Sie den Beitrag, vielen Dank für Ihr feedback!: 

Noch keine Bewertungen vorhanden