Problems with sprites

Ok derp. Somehow I equated ‘header’ with ‘library’ and assumed it should go there.

Now I’m trying to display an image at either 220x176 or 110x88 pix.
With the lower res at 16 bit color it works, but the higher resolution the 2 halves of the image look jumbled together and everything is grey-scale.

1 Like

Copy paste your code (or the part where you draw) and your My_settings.h here

I’m just doing the basic tutorial still:

  #include "Pokitto.h" 
  #include "test2.h"
  
  Pokitto::Core mygame;
  
  int main () {
      mygame.begin();
      mygame.display.load565Palette(test2_pal); //load the palette for the image
      mygame.display.bgcolor=0;
  
      while (mygame.isRunning()) {
  
          if (mygame.update()) { 
              mygame.display.drawBitmap(0,0,test2);
          }   
      }
      return 0;
  }
#ifndef MY_SETTINGS_H
#define MY_SETTINGS_H

#define PROJ_HIRES 1            //1 = high resolution (220x176) , 0 = low resolution fast mode (110x88)
#define PROJ_ENABLE_SOUND 0     // 0 = all sound functions disabled

#endif

With for instance this file: http://mrtoasted.com/~dreamer/test2.h

When you say either 220x176 or 110x88, are you sure you’re using 16-colour modes for both of those and not accidentally using a 4-colour mode for either?

The 16-colour modes and the 4-colour modes expect images in different formats, and image halves looking jumbled sounds like a typical case of mixing the modes up.

There’s a reference for the capabilities of the different modes here:

1 Like

Today I Learned!

See, I had no idea about these screenmodes, since this was not mentioned in this tutorial.
I will play with this a bit so see how I can make my piskel-animation work.

For the animation you just import the same header and do the same drawBitmap() ?
[Edit: nope. @jonne said it was simple so I must be missing something]

1 Like

There’s an overload for drawBitmap that accepts a frame argument:
http://pokitto.com/api/class_pokitto_1_1_display.html#a28671631d3b26c1bcaf076f352406657

The bitmap has to be in a particular format though.
It needs to have the width, the height and some third value (that I still don’t quite understand) at the beginning, and then the data for all the frames.

So

const char image[] =
{
	// Width, Height, 3rd thing
	16, 16, 16,
	
	// Frame 0
	/* frame 0 data... */
	
	// Frame 1
	/* frame 1 data... */
};

(We could really do with improving the library documentation,
but I keep putting it off because I’d really love to redesign the library with C++11 in mind.)

Ok, so what is the simplest way to iterate over these frames?
I saw there is a setFrameRate() for the core, is this related?

The default export from piskel does not include this third value by the way.

It would depend entirely on what kind of animation you want to do.
The frame system is designed to be flexible, so people can (for example) choose the order that frames are displayed in.

If you just want to loop through a set number of frames every frame then the easiest way is to just maintain a counter variable, increment it each frame/update and loop it back around if it goes too high.

E.g.

// Pretend there are 4 frames
constexpr std::uint32_t minFrame = 0;
constexpr std::uint32_t maxFrame = 3;

if(frameCounter < maxFrame)
	++frameCounter;
else
	frameCounter = minFrame;

Sort of.

That sets the number of frame updates that happen per second.
Not animation frames, but the frames that are actually drawn to the screen (i.e. what the screen displays is ‘a frame’, and it draws a certain number of those per second - the number of frames per second is the frame rate).

Its relation to your animation speed is reflected by how you choose to do the animation.
Using the simple method I demonstrated, your image will change frame at the same rate as the frame rate.

Substituting the width worked for me.
I haven’t got round to asking what it’s actually for, so hopefully someone else will chime in and explain that.

and this all runs inside the

if (mygame.update()) {
...
}

?

Yes.

Here’s an example:

#include "Pokitto.h" 
#include "test2.h"

Pokitto::Core mygame;

int main ()
{
	mygame.begin();
	mygame.display.load565Palette(test2_pal); //load the palette for the image
	mygame.display.bgcolor=0;

	// Pretend there are 4 frames
	constexpr std::uint32_t minFrame = 0;
	constexpr std::uint32_t maxFrame = 3;
	std::uint32_t frameCounter = minFrame;

	while (mygame.isRunning())
	{
		if (mygame.update())
		{ 
			if(frameCounter < maxFrame)
				++frameCounter;
			else
				frameCounter = minFrame;
				
			mygame.display.drawBitmap(0, 0, test2, frameCounter);
		}   
	}
	return 0;
}

(Note that I haven’t tested this compiles, so there may be some syntax errors or something.)

I was trying to do something similar like that but it didn’t work.

With your constexpr lines I get a:

src/main.cpp:12:2: error: 'constexpr' was not declared in this scope

Which compiler are you using? Mbed online? Change constexpr to const.
(I keep forgetting not everyone is set up to use C++11.)

I’m still using platformio as that is the only usable toolchain for me.

Using

const std::uint32_t minFrame = 0;

I get

src/main.cpp:12:13: error: 'uint32_t' in namespace 'std' does not name a type

Then you don’t have your project set up to use C++11, which is understandable.

May as well just change constexpr to const for now.

Oh, I forgot std::uint32_t is a C++11 thing. Use uint32_t instead.


If you want to get C++11 working (I highly recommend it, it makes using C++ much easier) then you have to edit:
.platformio/packages/framework-mbed/platformio/variants/LPC11U68/LPC11U68.json

Edit the file to use:

 "cxx": [
            "-std=c++11", 
            "-fno-rtti", 
            "-Wvla"
        ], 

And then edit the platformio.ini in your project to use:

; PlatformIO Project Configuration File
;
;   Build options: build flags, source filter
;   Upload options: custom upload port, speed and extra flags
;   Library options: dependencies, extra library storages
;   Advanced options: extra scripting
;
; Please visit documentation for the other options and examples
; http://docs.platformio.org/page/projectconf.html

[env:lpc11u68]
platform = nxplpc
board = lpc11u68
framework = mbed
build_flags =
  -DPOKITTO_PIO_BUILD
  -Isrc
  -std=c++11
extra_scripts = pre:pokitto_pre.py

Thnx, but I’ll stick to the ‘default’ environment for now.

It compiles, and I almost have some sort of blinking animation, just that only half the frame is drawn and frames seem to be ‘sliding’ over each other.

A clear tutorial on how to get a piskel animated gif to display on the pokitto would still be really great :eyes:

That sounds like either a mode mismatch or possibly that third thingy isn’t correct.

It would be.
Unfortunately I won’t be the one to write it because I have no experience with using Piskel.
(I dislike browser-based tools so I wrote my own image converter.)

Understood.

Mode is correct. If I don’t give any frame argument I get the 1st frame perfectly on the screen.
When I manually set a frame only 1/3 of the frame is drawn.

I tried setting some value (you mentioned the frame width) as this third thing but then it breaks:

src/tester.h:373:1: error: too many initializers for 'const uint8_t [38722] {aka const unsigned char [38722]}'

[Edit: ok I have to increment the total bitmap to accomodate this number.

However the ‘animation’ only seems to shift the frame up and down a bit (or something)

Ah, I think I know what’s wrong.

Can you post your image header file?
It’ll be easier to demonstrate the fix manually.

Ok: http://mrtoasted.com/~dreamer/tester.h

It’s a little trinket for a friend’s wedding :slight_smile: