tracking 7.6; add missing text image

Author: cdhanna

articles/tutorials/advanced/2d_shaders/07_sprite_vertex_effect/images/missing-text.png

@@ -169,15 +169,21 @@ Follow along with the steps to set up the effect.
 
 [!code-csharp[](./snippets/snippet-7-16.cs)]
 
-9. When the game runs, the text will be missing. This is because we never created a projection matrix to assign to the `MatrixTransform` shader parameter. Add this code when loading the material:
+9. When the game runs, the text will be missing. This is because we never created a projection matrix to assign to the `MatrixTransform` shader parameter. 
+
+| ![Figure 7-4: The main menu title is missing](./images/missing-text.png) |
+| :----------------------------------------------------------------------------------------: |
+|          **Figure 7-4: The main menu title is missing**           |
+
+Add this code when loading the material:
 
 [!code-csharp[](./snippets/snippet-7-17.cs)]
 
 10. And now you should see the text normally again.
 
-| ![Figure 7-4: The main menu, but rendered with a custom vertex shader](./images/basic.png) |
+| ![Figure 7-5: The main menu, but rendered with a custom vertex shader](./images/basic.png) |
 | :----------------------------------------------------------------------------------------: |
-|          **Figure 7-4: The main menu, but rendered with a custom vertex shader**           |
+|          **Figure 7-5: The main menu, but rendered with a custom vertex shader**           |
 
 ### Making it Move
 
@@ -191,19 +197,19 @@ And change the vertex shader to add the `DebugOffset` to the `output.Position` a
 
 The sprites now move around as we adjust the shader parameter values. 
 
-| ![Figure 7-5: We can control the vertex positions](./gifs/basic.gif) |
+| ![Figure 7-6: We can control the vertex positions](./gifs/basic.gif) |
 | :------------------------------------------------------------------: |
-|         **Figure 7-5: We can control the vertex positions**          |
+|         **Figure 7-6: We can control the vertex positions**          |
 
 It is important to build intuition for the different coordinate systems involved. Instead of adding the `DebugOffset` _after_ the clip-space conversion, if you try to add it _before_, like in the code below:
 
 [!code-hlsl[](./snippets/snippet-7-20.hlsl?highlight=7)]
 
 Then you will not see much movement at all. This is because the `DebugOffset` values only go from `0` to `1`, and in world space, this really only amounts to a single pixel. In fact, exactly how much an addition of _`1`_ happens to make is entirely defined _by_ the conversion to clip-space. The `projection` matrix we created treats world space coordinates with an origin around the screen's center, where 1 unit maps to 1 pixel. Sometimes this is exactly what you want, and sometimes it can be confusing. 
 
-| ![Figure 7-6: Changing coordinates before clip-space conversion](./gifs/basic-2.gif) |
+| ![Figure 7-7: Changing coordinates before clip-space conversion](./gifs/basic-2.gif) |
 | :----------------------------------------------------------------------------------: |
-|          **Figure 7-6: Changing coordinates before clip-space conversion**           |
+|          **Figure 7-7: Changing coordinates before clip-space conversion**           |
 
 ### Perspective Projection
 
@@ -248,25 +254,25 @@ Moving the `z` value uniformly in the shader will not be visually stimulating. A
 
 And now when the debug parameter is adjusted, the text spins in a way that was never possible with the default `SpriteBatch` vertex shader.
 
-| ![Figure 7-7: A spinning text](./gifs/spin-1.gif) |
+| ![Figure 7-8: A spinning text](./gifs/spin-1.gif) |
 | :-----------------------------------------------: |
-|          **Figure 7-7: A spinning text**          |
+|          **Figure 7-8: A spinning text**          |
 
 The text disappears for half of the rotation. That happens because as the vertices are rotated, the triangle itself started to point _away_ from the camera. By default, `SpriteBatch` will cull any faces that point away from the camera. Change the `rasterizerState` to `CullNone` when beginning the sprite batch:
 
 [!code-csharp[](./snippets/snippet-7-26.cs?highlight=4)]
 
 And voilà, the text no longer disappears on its flip side. 
 
-| ![Figure 7-8: A spinning text with reverse sides](./gifs/spin-2.gif) |
+| ![Figure 7-9: A spinning text with reverse sides](./gifs/spin-2.gif) |
 | :------------------------------------------------------------------: |
-|          **Figure 7-8: A spinning text with reverse sides**          |
+|          **Figure 7-9: A spinning text with reverse sides**          |
 
 You may find that the field of view is too high for your taste. Try lowering the field of view to 60, and you'll see something similar to this,
 
-| ![Figure 7-9: A spinning text with reverse sides with smaller fov](./gifs/spin-3.gif) |
+| ![Figure 7-10: A spinning text with reverse sides with smaller fov](./gifs/spin-3.gif) |
 | :-----------------------------------------------------------------------------------: |
-|          **Figure 7-9: A spinning text with reverse sides with smaller fov**          |
+|          **Figure 7-10: A spinning text with reverse sides with smaller fov**          |
 
 As a final touch, we should remove the hard-coded `screenSize` variable from the shader, and extract it as a shader parameter. While we are at it, clean up and remove the debug parameters as well:
 
@@ -280,9 +286,9 @@ And instead of manually controlling the spin angle, we can make the title spin g
 
 [!code-csharp[](./snippets/snippet-7-29.cs?highlight=5-7)]
 
-| ![Figure 7-10: Spin controlled by the mouse](./gifs/spin-4.gif) |
+| ![Figure 7-11: Spin controlled by the mouse](./gifs/spin-4.gif) |
 | :------------------------------------------------------------: |
-|          **Figure 7-10: Spin controlled by the mouse**          |
+|          **Figure 7-11: Spin controlled by the mouse**          |
 
 ## Applying it to the Game
 
@@ -368,9 +374,9 @@ And then apply all of the parameters to the single material:
 
 Any place where the old `_colorSwapMaterial` is being referenced should be changed to use the `_gameMaterial` instead. Now, if you run the game, the color swap controls are still visible, but we can also manually control the tilt of the map.
 
-| ![Figure 7-11: All of the effects in one](./gifs/uber.gif) |
+| ![Figure 7-12: All of the effects in one](./gifs/uber.gif) |
 | :-------------------------------------------------------: |
-|         **Figure 7-11: All of the effects in one**         |
+|         **Figure 7-12: All of the effects in one**         |
 
 ### Adjusting the Game
 
@@ -380,19 +386,19 @@ Add this snippet to the top of the `GameScene`'s `Update()` method:
 
 [!code-csharp[](./snippets/snippet-7-43.cs)]
 
-| ![Figure 7-12: Camera follows the slime](./gifs/cam-follow.gif) |
+| ![Figure 7-13: Camera follows the slime](./gifs/cam-follow.gif) |
 | :------------------------------------------------------------: |
-|            **Figure 7-12: Camera follows the slime**            |
+|            **Figure 7-13: Camera follows the slime**            |
 
 The clear color of the scene can be seen in the corners (the `CornflowerBlue`). Pick whatever clear color you think looks good for the color swapping:
 
 [!code-csharp[](./snippets/snippet-7-44.cs)]
 
 And to finish this chapter, the game looks like this,
 
-| ![Figure 7-13: vertex shaders make it pop](./gifs/final.gif) |
+| ![Figure 7-14: vertex shaders make it pop](./gifs/final.gif) |
 | :---------------------------------------------------------: |
-|         **Figure 7-13: vertex shaders make it pop**          |
+|         **Figure 7-14: vertex shaders make it pop**          |
 
 ## Conclusion