Help with Sprites?


(Sam) #1

Hi I am new to coding and I have been experimenting with my Arduboy. I am interested to know, how to make a sprite?
How would I make it appear on my Arduboy?
How wood I animate it? (Switch between 2 sprites continuously).

Thank you
Sam


(Simon) #2

Try this thread …


(Sam) #3

How do I make a sprite sheet?


(Pharap) #4

Arduboy image converters can be found in this thread:


The Sprites class can be used to render sprites from a sprite sheet.

e.g.

Sprites::drawOverwrite(x, y, spriteSheet, spriteIndex);

The format for sprite sheets is the width of each sprite, followed by the height of each sprite, followed by the sprite data, each sprite one after another (they all have to be the same size).
The drawing code figures out where to look for each sprite by using the width and height and then doing some calculations to get the right byte offset.

Here’s an example of what a sprite sheet might look like:

constexpr const static uint8_t SmallRabbitImageWidth = 8;
constexpr const static uint8_t SmallRabbitImageHeight = 8;

const uint8_t SmallRabbitImages[] PROGMEM =
{
	// Dimensions
	SmallRabbitImageWidth, SmallRabbitImageHeight,
	
	// Frame 0 (North)
	0x00, 0x78, 0x7E, 0x78, 0x78, 0x7E, 0x78, 0x00,
	
	// Frame 1 (East)
	0x00, 0x00, 0x78, 0x7E, 0x48, 0x78, 0x00, 0x00,
	
	// Frame 2 (South)
	0x00, 0x78, 0x4E, 0x78, 0x78, 0x4E, 0x78, 0x00,
	
	// Frame 3 (West)
	0x00, 0x00, 0x78, 0x48, 0x7E, 0x78, 0x00, 0x00,
};

(Sample taken from EasterPanic.)


How to make your own sprites
ToChars - Online Tool For Converting Spritesheets To Character Codes
Arduboy Classes and Header files?
Help me with C++ for my game
[Concept and WIP] Undertale Pocket Battles
[WIP] Ardubike
(Scott) #5

Team A.R.G. has an online sprite sheet converter in the tools section on their web site:

http://www.team-arg.org/spriteconvert-manual.html


(Sam) #6

I have been messing around with @crait’s tutorial. I would like to know how to make a .PNG file with a sprite. :thinking:


(Pharap) #7

If note of the tools in the thread I linked to have an option to do that then I suspect there aren’t are any tools for turning sprite data back into images.

You could try using ProjectABE’s screenshot functionality though.


(Sam) #8

I need to know how to make a .PNG file as I don’t know how yet. Thanks


(Pharap) #9

Oh, from the way you were asking (“how to make a .PNG file with a sprite.”) I thought you meant take an existing sprite and turn it into a .png :P

Making a .png just needs some image editing software.
Pretty much every modern image editor handles .png.

If you’re on Windows then you can just use paint.
Personally I mainly just use paint, though sometimes I use GIMP (the GNU Image Manipulation Program), which runs on any OS.

Whatever editor you use, you usually just have to look for either ‘save as’ or ‘export’ and there’s usually a .png option somewhere.


What happened to Ardumon?
(Sam) #10

Can you explain what paint is please?


(Felipe Manga) #11

Are you using windows, mac or linux?


(Sam) #12

Windows 10 (extra words)


(Pharap) #13

Turns out they deprecated paint in the ‘Fall Creators Update’ ; n ;
That means it should still be there but they’re going to kill it someday.

You should be able to find paint using the search tool.
Otherwise look in your start menu under ‘W’ and there should be a ‘Windows Accessories’ folder and ‘Paint’ should be in there.

If not, Paint 3D (the paint replacement for Win 10) should be able to do .png files, but might not be as convinient for sprites.

Failing that there are some online spriting tools you could use, or you could look for other programs like paint.net (or the earlier mentioned GIMP).


(Felipe Manga) #14

Might also want to look at graphicsgale, which is also free.


(Sam) #15

Ok so I have lots 0x00 and need some code to show them on my arduboy.
Can someone please make some code to make the 0x00 appear e.g.

#include arduboy stuff
// put your 0x00 here
show sprite
more stuff to make it work
more code

Thanks


(Pharap) #16

Either:

#include <Arduboy2.h>

const uint8_t YourSprite[] PROGMEM =
{
	0x00, 0x00, 0x00, 0x00,
};

Arduboy2 arduboy;

void setup(void)
{
	arduboy.begin();
}

void loop(void)
{
	if(!arduboy.nextFrame())
		return;
		
	arduboy.clear();
	arduboy.drawBitmap(0, 0, YourSprite, widthOfYourSprite, heightOfYourSprite);
	arduboy.display();
}

Or:

#include <Arduboy2.h>

const uint8_t YourSprite[] PROGMEM =
{
	widthOfYourSprite, heightOfYourSprite,
	0x00, 0x00, 0x00, 0x00,
};

Arduboy2 arduboy;

void setup(void)
{
	arduboy.begin();
}

void loop(void)
{
	if(!arduboy.nextFrame())
		return;
		
	arduboy.clear();
	Sprites::drawOverwrite(0, 0, YourSprite, 0);
	arduboy.display();
}

And you have to replace widthOfYourSprite and heightOfYourSprite with the width and height of your sprite.

If the sprite is fullscreen then that’s 128x64.


ToChars - Online Tool For Converting Spritesheets To Character Codes
(Simon) #17

Ahh you beat me to it.

#include <Arduboy2.h>

Arduboy2 arduboy;

const uint8_t Rabbit[] PROGMEM = {

  8, 8,
  
  0x00, 0x78, 0x7E, 0x78, 0x78, 0x7E, 0x78, 0x00,
};


const uint8_t Rabbits[] PROGMEM = {

  8, 8,
  
  // Frame 0 (North)
  0x00, 0x78, 0x7E, 0x78, 0x78, 0x7E, 0x78, 0x00,
  
  // Frame 1 (East)
  0x00, 0x00, 0x78, 0x7E, 0x48, 0x78, 0x00, 0x00,
  
  // Frame 2 (South)
  0x00, 0x78, 0x4E, 0x78, 0x78, 0x4E, 0x78, 0x00,
  
  // Frame 3 (West)
  0x00, 0x00, 0x78, 0x48, 0x7E, 0x78, 0x00, 0x00,
};


uint8_t frame = 0;

void setup() {

  // initiate arduboy instance
  arduboy.begin();

  // here we set the framerate to 15, we do not need to run at
  // default 60 and it saves us battery life
  arduboy.setFrameRate(5);
  
}


// our main game loop, this runs once every cycle/frame.
// this is where our game logic goes.
void loop() {
  // pause render until it's time for the next frame
  if (!(arduboy.nextFrame()))
    return;

  // first we clear our screen to black
  arduboy.clear();


  frame++;
  if (frame == 4) frame = 0;

  Sprites::drawOverwrite(16, 16, Rabbit, 0);
  Sprites::drawOverwrite(96, 16, Rabbits, frame);


  // then we finaly we tell the arduboy to display what we just wrote to the display
  arduboy.display();
}

(Sam) #18

Do you mean top to bottom, white pixels, side to side white pixels?


(Sam) #19

and I get this error

Arduino: 1.8.5 (Windows Store 1.8.10.0) (Windows 10), Board: “Arduino Leonardo”

In function ‘void loop()’:

error: ‘class Arduboy2’ has no member named ‘draw’

arduboy.draw(0, 0, Guy, 128, 64);

       ^

exit status 1
‘class Arduboy2’ has no member named ‘draw’

This report would have more information with
“Show verbose output during compilation”
option enabled in File -> Preferences.


(Pharap) #20

All pixels in total.
The entire width of the sprite and the entire height of the sprite.

Sorry, just fixed that.
I accidentally wrote draw instead of drawBitmap.

I tend to use the Sprites functions for drawing rather than the regular Arduboy2 drawing functions.


By the way, @filmote’s version has comments which I didn’t bother to add, and he uses a slightly more complex feature, so be sure to read his too.

(Also he borrowed the Rabbit sprites from my game jam entry EasterPanic, so that nets bonus points :P.)