Test for v1 of auto tutorial generation from code.

DrawSpriteDemo.md

Step 1

Create a new C# file called DrawSpriteDemo.cs in your project's source folder.

Step 2

Add the following namespaces to the top of the file:

001 using System;
002 using PixelVisionSDK.Engine.Chips.Data;
003 using PixelVisionSDK.Engine.Chips.Game;
004 using PixelVisionSDK.Engine.Utils;

Let's take a look at how to draw sprites to the display. The SpriteChip handles rendering each 8 x 8 px sprite on the screen.For this demo, we'll need to create a new game class that contains all of our logic. Inside of the game class, we'll work with the APIBridge's draw methods as well as the FontChip's own draw methods for visually debugging sprite data.

Step 3

Create a new public class called DrawSpriteDemo that extends GameChip:

001 public class DrawSpriteDemo : GameChip
002 {
003 
004 }

The DrawSpriteExample extends the GameChip and will override its Init(), Update() and Draw() methods.

Step 4

Create a new private field called frame; with a type int inside of the DrawSpriteDemo Class:

002 private int frame;

Step 5

Create a new private field called shellAPos with a type Vector inside of the DrawSpriteDemo Class:

002 private readonly Vector shellAPos = new Vector(0, 8 * 8);

These values represent the shell's position, speed, animation time and frame.

Step 6

Create a new private field called shellBPos with a type Vector inside of the DrawSpriteDemo Class:

006 private readonly Vector shellBPos = new Vector(8 * 22, 0);

Step 7

Create a new private field called shellSprites with a type int[][] inside of the DrawSpriteDemo Class:

006 private readonly int[][] shellSprites =
007 {
008 new[] {0, 1, 6, 7},
009 new[] {2, 3, 8, 9}
010 };

This 2D array stores sprite IDs for the turtle shell animations. Each shell is a made up of 4 sprites in a 2x2 grid.

Step 8

Add the following fields near the top of the DrawSpriteDemo Class:

010 private readonly int speed = 100;
011 private float time;

Step 9

Create a new public method called Init that returns a type void inside of the DrawSpriteDemo Class:

010 public override void Init()
011 {
012 
013 }

The Init() method is part of the game's lifecycle and called a game starts. We are going to use this method to configure the DisplayChip, ScreenBufferChip and also draw fonts into the background layer.

Step 10

Add the following code to the Method:

013 apiBridge.ChangeBackgroundColor(32);
014 apiBridge.ToggleDisplayWrap(true);

Here we are starting by changing the background color and telling the DisplayChip to wrap.

Step 11

Add the following code to the Method:

015 apiBridge.RebuildScreenBuffer();

Here we are rebuilding the screen buffer so we can draw tile and fonts to it. This will cut down on our draw calls.

Step 12

Add the following code to the Method:

017 apiBridge.DrawFontToBuffer("Sprite Test", 1, 1, "large-font", 0);
018 apiBridge.DrawFontToBuffer("Position Wrap Test", 1, 6, "large-font");

With the ScreenBuffer ready, we can now draw fonts into it. Here we are creating two new labels to display under our demo sprites.

Step 13

Create a new public method called Update that returns a type void inside of the DrawSpriteDemo Class:

020 public override void Update(float timeDelta)
021 {
022 
023 }

The Update() method is part of the game's life cycle. The engine calls Update() on every frame before the Draw() method. It accepts one argument, timeDelta, which is the difference in milliseconds since the last frame. We are going to keep track of time to sync up our sprite animation as well as move the sprites across the screen.

Step 14

Add the following code to the Method:

025 shellAPos.x += (int) Math.Ceiling(speed * timeDelta);
026 shellBPos.y += (int) Math.Ceiling(speed * timeDelta);

We are going to move the sprite positions by calculating the speed by the timeDelata. We can then add this to the x or y position of our sprite vector.

Step 15

Add the following code to the Method:

028 time += timeDelta;

We are going to keep track of the time by adding timeDelta to our time field. We can then use this to tell if we should change our animation frame.

Step 16

Create the following condition to the Method:

030 if (time % 9 == 0)
031 {
032 
033 }

We'll use modulus to determine when it's time to change the sprite frame.

Step 17

Add the following code to the condition Condition:

029 frame = MathUtil.Repeat(frame + 1, shellSprites.Length);

If time modulus 9 is 0 we'll increase the frame number to advance the animation.

The MathUtil has several methods we can use to simplify common calculations. MathUtil.Repeat() will loop a value based on the maximum value supplied. It's important to use this sparingly since it could potentially slow your game down.

Step 18

Create a new public method called Draw that returns a type void inside of the DrawSpriteDemo Class:

032 public override void Draw()
033 {
034 
035 }

The Draw() method is part of the game's life cycle. It is called after Update() and is where all of our draw calls should go. We'll be using this to render each of the sprites and font characters to the display.

Step 19

Add the following code to the Method:

035 apiBridge.DrawScreenBuffer();

It's important to clear the display on each frame. There are two ways to do this. Here we are going to use the DrawScreenBuffer() way to copy over the existing buffer and clear all of the previous pixel data.

Step 20

Add the following code to the Method:

038 apiBridge.DrawSprite(0, 8, 24, false, false, true, 0);
039 apiBridge.DrawSprite(1, 18, 24, false, false, true, 0);
040 apiBridge.DrawSprite(6, 8, 34, false, false, true, 0);
041 apiBridge.DrawSprite(7, 18, 34, false, false, true, 0);

Here we are going to draw the first example. The turtle shell is made up of 4 sprites. We'll draw each sprite out with a few pixels between them so you can see how they are put together.

Step 21

Add the following code to the Method:

041 apiBridge.DrawSprites(shellSprites[0], 32, 24, 2, false, false, true, 0);
042 apiBridge.DrawSprites(shellSprites[frame], 54, 24, 2, false, false, true, 0);

For the next two examples we'll use the DrawSprites() method which allows us to combine sprites together into a single draw request. Each sprite still counts as a draw call but this simplifies drawing larger sprites in your game.

Step 22

Add the following code to the Method:

044 apiBridge.DrawSprites(shellSprites[frame], shellAPos.x, shellAPos.y, 2, false, false, true, 0);
045 apiBridge.DrawFont("(" + shellAPos.x + "," + shellAPos.y + ")", shellAPos.x, shellAPos.y + 20, "large-font", 0);

Here we are drawing a turtle shell along the x and y axis. We'll take advantage of the Display's wrap setting so that the turtle will appear on the opposite side of the screen even when the x or y position is out of bounds.

Step 23

Add the following code to the Method:

047 apiBridge.DrawSprites(shellSprites[frame], shellBPos.x, shellBPos.y, 2, false, false, true, 0);
048 apiBridge.DrawFont("(" + shellBPos.x + "," + shellBPos.y + ")", shellBPos.x, shellBPos.y + 20, "large-font", 0);

The last thing we are going to do is draw text below each of our moving turtles so we can see the x and y position as they wrap around the display.