Just to explain what this is:

I noticed, as did others like 12Outerme, that there was an absence tutorials on how to set up sprites, and other things about xLIBC.

So, I decided to do something about it, creating this in-depth explaination on how to draw sprites!
I hope to create more tutorials, about tilemaps, backgrounds, uservars, and other commands in the xLIBC library under the title "xLIBC Tutorials".

----------------

I know many of you programmers for the TI 84+ CSE would like to use sprites in your TI-BASIC programs. Well, I’m sure, if you researched it, you know you can, using XLIBC, a library included in Doors CSE. But, due to some vauge inormation here, it has been hard for some programmers to implement sprites. Fear no more, though, as you now have a tutorial for it.

Before you start this tutorial, I assume you can set up an xlibc program. If not, go here: Link Unavailable

2 - Creating a spritesheet.

Go over and download TokenIDE We will use this to make and export a spritesheet in the xlibc format, .8xv.

Make a spritesheet using the image editor.
Code:

Set the colors to xLIBC

Then check the Draw Grid checkbox and zoom in to seven.
Use the bucket tool to cover the whole spritesheet in one color.

Create your 8x8 sprite. To keep it 8x8, make sure the sprite does not expand past the 8x8 square in the grid.
Then, set the width and height to:
Width: 128
Height: 64
Then, go to: File > Save As > xLIBC Tiles
Then, name your file and click save, once you are in your project directory
You should now have a file called “FileName.8xv”!
You can also go to File > Open to open a premade spritesheet, then follow the instructions to create the AppVar.

This is the spritesheet I will be using in this tutorial, if you would like to use it:


Go here for the appvar: https://usercontent.irccloud-cdn.com/file/pYIsCZqn/SPRT.8xv


Now, all you need to do, is send this file to your calculator, and you are done creating you spritesheet. You just need to display your sprite, which I will cover in the next section.


2 - Displaying the sprites


Now, you can program this on your calculator, but I suggest using SourceCoder and JsTIfied if you have a cemetech.net account, or TokenIDE and WabbitEmu if you do not have an account. This just makes things easier for developing larger programs.

First off, start with this code, where “SPRT” is the name of the Spritesheet AppVar you made earlier.

Code:

This loads your Appvar into temporary RAM for later drawing sprites using real(4

Now, take this line, and add it to your program, replacing the text, with the corresponding numbers.


Code:


X - The X coord to display at

Y - The Y coord to display at

WIDTH - How many 8x8 chunks the sprite takes up in width. 1 for just an 8x8 sprite, 2 for a 16x16, and so on.

HEIGHT - How many 8x8 chunks the sprite takes up in height. 1 for just an 8x8 sprite, 2 for a 16x16, and so on.

XOFFSET and YOFFSET - As on now, I have no idea what these do. Just set them to zero, it doesn’t effect anything that way.

TRANSINDEX - The color that the parser sees, and makes transparent. So, I set the background of my sprite sheet to green which is identified by the number 7, so any time a green color like that shows up, it becomes transparent.

UPDATELCD - If you set this to 1, it switches sides of the screen for drawing. If you set it to zero, nothing happens. Set it to zero for your purposes.

PICINDEXSTART - This tells the calc what Pic Index to load from in this case, we load from 0, so set it to zero.

PICINDEX0, 1, and 2 - Below

For my spritesheet, my sprite is located on the top left hand corner, in which that area just so happens to be associated with the number 0, shown below. So, in place of PICINDEX0, I would place a 0. The numbers correspond to each 8x8 square.


So, we have our code:

Code:


When you run the code, you should see something like this:


Now, if my sprite was 16x16, I would need to change 4 things. WIDTH, HEIGHT, and PICINDEX

The changes:
WIDTH: 2
HEIGHT: 2
PICINDEX1: 0
PICINDEX2: 1
PICINDEX3: 8
PICINDEX4: 9

So my entire sprite displaying code would become:

Code:


I hope this helped you! Post below if you have any questions

Thanks to tr1p1ea for writing this library, and Kerm for helping me learn this myself AND hosting dcs.cemetech.net for us programmers.

Oh yeah, and PM me or post below if you notice any grammatical errors.