If you have trouble logging in, try to disable JavaScript temporarily. If that doesn't work, please contact  a d m i n @ c o d e w a l r . u s  with your account nickname.

* WalrusIRC Shoutbox (Support and development thread)

You need to have 5 posts and not be part of restricted usergroups in order to use the WalrusIRC embedded shoutbox. However, you can also access our IRC channel called #CodeWalrus via EFnet.

Author Topic: xLIBC Tutorials: Drawing Sprites  (Read 1102 times)

0 Members and 1 Guest are viewing this topic.

Offline Unicorn

  • Unicorn Overlord of CodeWalrus
  • Super User
  • CW Contest II - 2nd place
  • *
  • Posts: 2580
  • Post Rating Ratio: +4/-2
  • Weeeeeeeeeeeeee!
    • Unicorn808
    • 114/11432
    • View Profile
    • UnicornCalcs
  • Gender: Male
xLIBC Tutorials: Drawing Sprites
« on: August 11, 2015, 12:35:18 am »
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: [Select]
[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.
Code: [Select]
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.

Code: [Select]
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:
Code: [Select]
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:
Code: [Select]
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
« Last Edit: September 04, 2015, 04:18:31 am by DJ Omnimaga »


  • Calculators owned: I own all of them: TI 84+ CSE TI 83+ SE TI something something



Offline 123outerme

  • Full User
  • Posts: 425
  • Post Rating Ratio: +2/-0
  • Professional Unpaid Intern
    • 113/11355
    • View Profile
  • Gender: Male
Re: xLIBC Tutorials: Drawing Sprites
« Reply #1 on: August 11, 2015, 12:44:48 am »
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!
  • Calculators owned: TI-84+CSE

Offline Unicorn

  • Unicorn Overlord of CodeWalrus
  • Super User
  • CW Contest II - 2nd place
  • *
  • Posts: 2580
  • Post Rating Ratio: +4/-2
  • Weeeeeeeeeeeeee!
    • Unicorn808
    • 114/11432
    • View Profile
    • UnicornCalcs
  • Gender: Male
Re: xLIBC Tutorials: Drawing Sprites
« Reply #2 on: August 11, 2015, 01:01:21 am »
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. ;)
  • Calculators owned: I own all of them: TI 84+ CSE TI 83+ SE TI something something



Offline DJ Omnimaga

  • Omni founder & CW co-founder
  • CodeWalrus Staff
  • Super User
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Topic Management
  • Posts: 14137
  • Post Rating Ratio: +71/-7
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • View Profile
    • DJ Omnimaga music store
  • Gender: Male
Re: xLIBC Tutorials: Drawing Sprites
« Reply #3 on: August 11, 2015, 02:29:45 am »
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?
  • Calculators owned: TI-73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX, HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline Unicorn

  • Unicorn Overlord of CodeWalrus
  • Super User
  • CW Contest II - 2nd place
  • *
  • Posts: 2580
  • Post Rating Ratio: +4/-2
  • Weeeeeeeeeeeeee!
    • Unicorn808
    • 114/11432
    • View Profile
    • UnicornCalcs
  • Gender: Male
Re: xLIBC Tutorials: Drawing Sprites
« Reply #4 on: August 11, 2015, 02:59:01 am »
Thats kind of what I'm hoping will happen once I create more

And thanks :) I should proofread some more tomorrow.
  • Calculators owned: I own all of them: TI 84+ CSE TI 83+ SE TI something something



 


You can also use the following HTML or bulletin board code to share it on your page or forum signature!


Also do not forget to check our affiliates below.
Planet Casio TI-Planet Calc.news BroniesQC BosaikNet Velocity Games