SpriteDemoTutorial.md

Step 1

Create a new Lua file called code.lua in your Workspace/Sandbox/ folder.

Copyright (c``) 2017, Jesse Freeman. All rights reserved.

Licensed under the Microsoft Public License (MS-PL) License. See LICENSE file in the project root for full license information.

Contributors -------------------------------------------------------- This is the official list of Pixel Vision 8 contributors:

Jesse Freeman - @JesseFreeman Christer Kaitila - @McFunkypants Pedro Medeiros - @saint11 Shawn Rakowski - @shwany

The Stress Test Demo highlights the sprite rendering limitation of Pixel Vision 8. By default, the DisplayChip can only handle displaying 64 sprites at the same time. We'll create a loop the attempts to render more sprite than the system can handle. The outcome is that additional draw calls are ignored and the engine maintains its optimal performance.

Step 2

Add the following local variables:

001 local delay = 0
002 local delayTime = 2
003 local totalSprites = 200;
004 local x = 0
005 local y = 0
006 local width = 0
007 local height = 0
008 local totalColors = 0
009 local lastFPS = 0
010 local newFPS = 0

These are some fields we'll use for performing the stress test.

Step 3

Create a new function called Init():

011 function Init()
012 local displaySize = Display()
013 width = displaySize.x
014 height = displaySize.y
015 totalColors = TotalColors()
016 end

It's best to define these outside of the for loop since we only need to set the value once.

Step 4

Create a new function called Update():

017 function Update(timeDelta)
018 
019 end

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 use this timeDelta value to keep track of the time before changing the background color.

Step 5

Add the following code to the Update() function:

018 delay = delay + timeDelta

We start by adding the time delta to the delay.

Step 6

Add the following condition to the Update() function:

019 if(delay > delayTime) then
020 
021 end

Next, we will need to test if the delay value is greater than the delayTime field we set up at the beginning of our class.

Step 7

Add the following code to the condition :

020 BackgroundColor(math.random(0, totalColors))

After the appropriate delay, we can change the background color a random value. We'll cap this between 0 and 63.

Step 8

Add the following code to the condition :

021 delay = 0

We need to reset the delay so we can start tracking it again on the next frame.

Step 9

Create a new function called Draw():

024 function Draw()
025 
026 end

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 sprites to the display.

Step 10

Add the following code to the Draw() function:

025 Clear()

Clearing the display on each frame is important. Since we are not using the ScreenBufferChip, we can directly clear the DisplayChip by calling the Clear() method.

Step 11

Add the following code to the Draw() function:

026 for i = 0, totalSprites, 1 do
027 x = math.random(0, width)
028 y = math.random(0, height)
029 DrawSprite( i + 12, x, y)
030 end

This loop will create a random x and y value based on the display's dimension then attempt to draw a sprite. Since we are drawing more sprites to the display than it can handle, it will not display any additional sprites over the max sprite count. This loop does add overhead so FPS will be lower than a real world game where you can manage the draw calls better.

Step 12

Add the following code to the Draw() function:

031 DrawText("SPRITES " .. ReadTotalSprites() .. " FPS " .. ReadFPS(), 4, 4, DrawMode.UI, "large-font")

Let's draw the FPS chars first since they will always be displayed. Any additional sprites over the max sprite count will simply be ignore.