Go to this method, and type this.pos.X++;

This will add 1 to the X coordinate of the position. Run the game. You can see that the image is moving.

Download the source code here

The mesh can bee smooth or flat. The smooth one looks more realistic.

In order to activate on of these modes, go to the left panel (Object tools), select the object and activate a mode by pressing on the suitable button.

2. Making normals consistent

Sometimes, when you work in the solid mode, everything seems to be ok. However, when you switch to textured mode, you can see that your model has some terrible holes!

Or when you smooth your model, you get something like that:

To fix it, activate the ‘edit mode’ by selecting the object and pressing the ‘tab’ key on your keyboard. Now press ‘A’ to select all and then press ‘ctrl+N’.

At first, let’s add an object that will represent the image. Its type is Texture2D, it means that you can draw the image on the screen as it is or to apply it on a 3D model.

Type this line before the constructor method (public Game1())
Texture2D texture;

And this line:
Vector2 pos;
It will just store the position of the image.

Now it’s the time to load it from the computer. Take an image, go to Visual Studio, right click on Content in the right window, then Add – Existing item… and add your file.

In the LoadContent() method, load it:
texture = Content.Load<Texture2D>(“your file name with quotation marks“);

It’s a little bit tricky, in order to load an image you can’t create an instance of Texture2D. You must use the Content property of the Game class (the base of Game1).

And declare the position:
pos = Vector2.Zero;
Vector2.Zero – will return a (0,0) coordinate. It actually does the same as new Vector2(0,0).

Go to the Draw(GameTime gameTime) method.

In order to draw an image, you must declare a sprite batch first. Then to draw the image and after that, to end the sprite batch. Write these lines in this method:

spriteBatch.Begin();

spriteBatch.End();

Here we see that spriteBatch.Draw will draw our image. Here we see a simple method overloading of Draw, it gets our texture, the position and a filtering color, where ‘white’ means that our color filter won’t add color to the image.

Download the source code here

Let’s have a look.

This template is optimized for a 2D game. We have these data members: graphics and spriteBatch.

graphics - handles the configuration and management of the graphics device

spriteBatch – allows you to draw a 2d image on the screen. But it can’t draw *.gif and vector formats.

We have this method public Game1()
It constructs our game class. There is no need to edit it now.

protected override void Initialize()
Here you initialize the non-graphic content.

protected override void LoadContent()
When the game starts, it activates this method. Here you load your content. For example create instances, load images e.t.c.

protected override void UnloadContent()
The place to unload your content. Usually, there is no need to do that.

protected override void Update(GameTime gameTime)
This method is being called 60 times a second. Here you update the coordinates of the objects, handle input, check for collisions e.t.c.

gameTime – contains the game time data (game time in seconds, milliseconds, hours e.t.c.).

if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();

Feel free to remove this code from the method if you don’t make a XBOX 360 game.

protected override void Draw(GameTime gameTime)
The most interesting method. Here you draw the 2d images or 3d primitives.

In the next tutorials I’m going to talk about these two methods Update and Draw.

See you later!

Today we are going to make our effects more impressive and dynamic, by getting info from the game itself.
To add a variable, go to the .fx effect file and type, for example, float factor; after the sampler2D sourceColor;

Now we will multiply each coordinate indent (blur effect) by this factor.

color += tex2D( sourceColor, coord.xy + 0.01f * factor);
color += tex2D( sourceColor, coord.xy + 0.02f * factor);
color += tex2D( sourceColor, coord.xy + 0.03f * factor);
color += tex2D( sourceColor, coord.xy + 0.04f * factor);

Now try to run the game. If you see the XNA logo without any effects, it means that everything is okay.  In HLSL like in C# float has a default value of zero. It means that if you do not set a value to the float and use it somewhere, it acts like a zero.

Go to the game class (in our case Game1), to the Update method. We access the effect here. Now type this line:

effect.Parameters["factor"].SetValue((float)Math.Cos(gameTime.TotalRealTime.Milliseconds*10)/5);

Hard to understand? Let me explain it.
As you can see, here we access the effect parameter that we have added (called factor). Then we set its value to the cosine result of our game’s length, and multiply all this stuff by numbers that will make the animation look smoother.

In general, the indent value of the pixel is being multiplied by a figure-of-eight curve.

Download the source code here

This will be our template, here the pixel shader takes the pixel color and draws it on the screen. See how to use this code in the previous chapter.

And this photo will be our base.

Multiplying the color data by 2, will make the picture look brighter:
Write this line before “return color;“:
color *= 2;

The color data is contained from red, green and blue colors data. Each color data ranged from 0 to 1. It’s very important to know. Here you can see how to access the channel data of the color. Each color has the following parameters:

color.r = the red channel
color.g = the green channel
color.b = the blue channel
color.a = the alpha channel

And combinations, like:

color.rgb = red, green and blue
color.rg = red and green

And so on.

Here we divide the red channel value by 2:

color.r /= 2;

Put this code after “float4 color;“:

coord.y = coord.y  + (sin(coord.y*100)*0.02);

Wow, a water effect!

Even more:

color.rgb = (color.r+color.g+color.b)/3.0f;

Here we will test a pixel shader. The idea of a pixel shader is just to return the color of a pixel on the screen.

For example:

Here the shader blurs the picture. Let’s see how does it blur.

technique blur – the techinque we are using now.
BlurShader – our main code.
float4 – stores 4 floats (red, green, blue and alpha). It’s going to be our color.
sampler2D sourceColor – the current pixel. (The shader runs over all of the pixels in the given image).

color = tex2D( sourceColor, coord.xy); – sets the work color to the color of the current pixel.
color += tex2D( sourceColor, coord.xy + 0.001f); - adds the the work color a color of a nearby pixel
color /= 5; – here we need to reduce the brightness of the color by dividing its values by the quantity of the taken pixels.

Now we need to put it in the XNA code.

Create an effect:

Effect effect;

Load it:

effect =Content.Load<Effect>(“effect”);

Add it to the draw method:

spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Immediate, SaveStateMode.SaveState);
effect.Begin();
EffectPass pass = effect.CurrentTechnique.Passes[0];
pass.Begin();

spriteBatch.Draw(logo, new Vector2(100,150), Color.White);

pass.End();
effect.End();
spriteBatch.End();

Note that the sort mode must be set to immediate! Otherwise, it won’t work.

The result:

Download the source code