The shoutbox is currently out of service. Join us on Discord instead.
You can help CodeWalrus stay online by donating here.

[84+CSE][xLIBC][Doors CSE][TI-BASIC]xLIBC Tutorials: Drawing Sprites

Started by Unicorn, August 11, 2015, 12:35:18 am

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Unicorn

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. [Ctrl] + [I]
   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.

real(0,1,1
real(8,1,0
real(0,3,4,0
"SPRT
real(5,0,0

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.


real(4,0,X,Y,WIDTH,HEIGHT,XOFFSET,YOFFSET,TRANSINDEX,UPDATELCD,PICINDEXSTART,PICINDEX0,PICINDEX1...etc


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:

real(0,1,1
real(8,1,0
real(0,3,4,0
"SPRT
real(5,0,0
real(4,0,0,0,1,1,0,0,7,1,0,0
Pause


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:

real(0,1,1
real(8,1,0
real(0,3,4,0
"SPRT
real(5,0,0
real(4,0,0,0,2,2,0,0,7,1,0,0,1,8,9
Pause


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. :P



??? ??? ??? ??? ???

123outerme

It's great, and would've helped me a lot when I was getting started with xLibC sprites (which, ironically, was not too long ago).
I have a few suggestions, though:
*There's actually an easier way to create blank spritesheets. In the xLibC sprite editor, go to Edit>Load Template>xLIBC Tiles.

*Maybe in the future you could cover how to add custom backgrounds into your programs? If you're unsure of this step, you could ask one of us.

Other than that, I like it a lot!

Unicorn

Thanks! :)

I didn't know there were templates! I'll update that tomorrow.

And yeah, I'm going to create a series of these, setting up  xlibc program, backgrounds, and tilemaps. ;)



??? ??? ??? ??? ???

DJ Omnimaga

Yeah when I saw this topic I figured that 123outerme might like this :P, but yeah it's well-explained overall. I didn't check much for grammar, though, so I'll have to check later. I wonder if eventually the DCS wiki could have a tutorials section with this one, for example?

Unicorn

Thats kind of what I'm hoping will happen once I create more

And thanks :) I should proofread some more tomorrow.



??? ??? ??? ??? ???

Powered by EzPortal