Help with Sprites?

Help & Information
#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 uint8_t smallRabbitImageWidth = 8;
constexpr 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.)

3 Likes
Creating a simple sprite animation on an Arduboy
ToChars - Online Tool For Converting Spritesheets To Character Codes
[Concept and WIP] Undertale Pocket Battles
Arduboy Classes and Header files?
How to make your own sprites
Help me with C++ for my game
Flapping Shooter Feedback & Tips
Casio Game - Rabbit Farm
[WIP] Ardubike
#5

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

Moderator Note:
Links to Team ARG’s website have been removed due to malicious new owners.

1 Like
#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:

#7

If none 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.

1 Like
#8

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

#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.

1 Like
What happened to Ardumon?
#10

Can you explain what paint is please?

#11

Are you using windows, mac or linux?

#12

Windows 10 (extra words)

#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).

1 Like
#14

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

2 Likes
#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

#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.

1 Like
ToChars - Online Tool For Converting Spritesheets To Character Codes
Creating a simple sprite animation on an Arduboy
#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();
}
2 Likes
#18

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

#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.

#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.)

#21

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

Sketch uses 8394 bytes (29%) of program storage space. Maximum is 28672 bytes.
Global variables use 1224 bytes (47%) of dynamic memory, leaving 1336 bytes for local variables. Maximum is 2560 bytes.
processing.app.debug.RunnerException
at cc.arduino.packages.uploaders.SerialUploader.uploadUsingPreferences(SerialUploader.java:160)
at cc.arduino.UploaderUtils.upload(UploaderUtils.java:78)
at processing.app.SketchController.upload(SketchController.java:713)
at processing.app.SketchController.exportApplet(SketchController.java:686)
at processing.app.Editor$DefaultExportHandler.run(Editor.java:2168)
at java.lang.Thread.run(Thread.java:748)
Caused by: processing.app.SerialException: Error touching serial port ‘COM3’.
at processing.app.Serial.touchForCDCReset(Serial.java:107)
at cc.arduino.packages.uploaders.SerialUploader.uploadUsingPreferences(SerialUploader.java:144)
… 5 more
Caused by: jssc.SerialPortException: Port name - COM3; Method name - openPort(); Exception type - Port busy.
at jssc.SerialPort.openPort(SerialPort.java:164)
at processing.app.Serial.touchForCDCReset(Serial.java:101)
… 6 more
An error occurred while uploading the sketch
Exception in thread “Thread-57” java.util.ConcurrentModificationException
at java.util.LinkedList$LLSpliterator.forEachRemaining(LinkedList.java:1239)
at java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:481)
at java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:471)
at java.util.stream.ForEachOps$ForEachOp.evaluateSequential(ForEachOps.java:151)
at java.util.stream.ForEachOps$ForEachOp$OfRef.evaluateSequential(ForEachOps.java:174)
at java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:234)
at java.util.stream.ReferencePipeline.forEach(ReferencePipeline.java:418)
at cc.arduino.contributions.libraries.LibrariesIndexer.rescanLibraries(LibrariesIndexer.java:127)
at cc.arduino.contributions.libraries.LibrariesIndexer.setLibrariesFolders(LibrariesIndexer.java:106)
at processing.app.BaseNoGui.onBoardOrPortChange(BaseNoGui.java:682)
at processing.app.Base.onBoardOrPortChange(Base.java:1313)
at processing.app.Editor$DefaultExportHandler.run(Editor.java:2198)
at java.lang.Thread.run(Thread.java:748)

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

#22

… which might look suspiciously like the ones from ‘HelloWorld’

2 Likes
#23

My bad it was bricked from Trolly Fish and yay it worked. :smiley: