I'm making a custom build of Piskel

Pokitto Programming
1

Hi all

Expect to see a customized version of Piskel pixel editor embedded on Pokitto site soon.

It will have direct-to-pokitto C header export.

I just got palette file write implemented in Piskel, next step is to change rgba writes to indexed palette values.

Palette addition shown below. It reads and parses the piskel palette, reformats it in 565-format hex values and writes it before the pixel data begins.

#include <stdint.h>

#define NEW_PISKEL_FRAME_COUNT 1
#define NEW_PISKEL_FRAME_WIDTH 32
#define NEW_PISKEL_FRAME_HEIGHT 32

/* Palette data for "New Piskel" */
const uint16_t new_piskel_pal[] = { 
0x0, 0xf800, 0x7e0, 0x1f, 
};
/* Piskel data for "New Piskel" */

static const uint32_t new_piskel_data[1][1024] = {
{
8 Likes
2

Can we have a C++ one too?
(With #include <cstdint>, std::uint16_t and constexpr variables.)

(If not, I’ll just write myself a post-processor.)

1 Like
3

Great idea!

4

@BigBadHodad was looking for a pixel art editor, think he’ll appreciate this.

1 Like
5

Excellent idea. I keep thinking we need something like the pico-8 tools that run on Pokitto itself, a sprite/tile editor, map editor, that sort of thing.

2 Likes
6

That sounds easy enough to do just need to be able to to write to a file

7

Also the motivation to do it, the idea has been bouncing around in my head for months now, but tapping my foot or drumming my fingers on the desk seem like more fun at the time :-p

8

Is there any tools for sound effects and music? That would be great as well.

9
10

Yes. But I don’t think it’s user friendly that much. I can’t even get a sound coming out of it. :wink:

11

There is also a windows app which is using compatible tracker-files:

1 Like
12

I’ve added bit depth to Piskel functionality

kuva

Exporting to 256 colors (8-bit) is already working

kuva

The test image:

kuva

1 Like
13

Exporting to 4-bit colors (16 colors) also works now

Now I need to stop and go ship the pending Pokitto orders for today

kuva
kuva1280×800 83.6 KB

3 Likes
14

Oh crap, looks like the tracker did work, it’s just that i need to put the sound almost to the max to hear it.

Thank you for all this! The better the tools are, the better and faster we will see interesting stuff made for the Pokitto!

1 Like
15

I’m not a webdev, but I know this is a thing:

1 Like
16

was talking about the pixel editor on the pokitto itself.
but yea in web context you basicly have to upload and download files, though it might be able to save the last state with a cookie so you dont lose your drawing by acidentaly refreshing the page

17

Now that would be a great idea!

2 Likes
18

Probably ready to deploy tomorrow.

  • customized UI
  • bit depth settings
  • fixed palette & palette export
  • 8-bit and 4-bit pixel data export to C headers
  • settings finetuned for Pokitto use

kuva
kuva1280×727 58.7 KB

EDIT: @pharap, if you are serious about it being better to export to .cpp files, then specify how the output should be in detail

Output of above image

#include <stdint.h>

#define PISKEL_GHOST_FRAME_COUNT 1
#define PISKEL_GHOST_FRAME_WIDTH 24
#define PISKEL_GHOST_FRAME_HEIGHT 24
#define PISKEL_GHOST_COLOR_BITS 4

/* 16-bit (565 rgb) palette data for "Piskel Ghost" */
static const uint16_t piskel_ghost_pal[] = { 
0x0, 0xffff, 0x7e0, 0xf800, 
};

/* Piskel data for "Piskel Ghost" */
static const uint8_t piskel_ghost_data[1][288] = {
{
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x01,0x11,
0x11,0x11,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x11,0x00,
0x10,0x01,0x10,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x10,0x12,
0x01,0x20,0x10,0x00,0x00,0x00,
0x00,0x00,0x00,0x01,0x10,0x22,
0x02,0x20,0x11,0x00,0x00,0x00,
0x00,0x00,0x00,0x01,0x11,0x00,
0x10,0x01,0x11,0x00,0x00,0x00,
0x00,0x10,0x00,0x01,0x11,0x11,
0x11,0x11,0x11,0x00,0x01,0x00,
0x01,0x11,0x11,0x11,0x11,0x10,
0x01,0x11,0x11,0x01,0x11,0x10,
0x00,0x10,0x00,0x11,0x11,0x10,
0x01,0x11,0x10,0x00,0x01,0x00,
0x00,0x00,0x00,0x01,0x11,0x11,
0x11,0x11,0x10,0x00,0x00,0x00,
0x00,0x00,0x00,0x01,0x11,0x11,
0x11,0x10,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x11,0x11,
0x11,0x11,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x11,0x11,
0x11,0x10,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x01,0x11,
0x11,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x01,0x11,
0x11,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x01,0x11,
0x11,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x01,0x11,
0x10,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x01,0x11,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x01,0x10,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x11,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,
}
};
2 Likes
19

The equivalent of the output of that image would be:

#pragma once

#include <cstdint>

constexpr std::uint32_t piskel_ghost_frame_count = 1;
constexpr std::uint32_t piskel_ghost_frame_width = 24;
constexpr std::uint32_t piskel_ghost_frame_height = 24;
constexpr std::uint32_t piskel_ghost_color_bits = 4;

// 16-bit (565 rgb) palette data for "Piskel Ghost"
static const std::uint16_t piskel_ghost_pal[] =
{ 
	0x0, 0xffff, 0x7e0, 0xf800,
};

// Piskel data for "Piskel Ghost"
static const std::uint8_t piskel_ghost_data[piskel_ghost_frame_count][288] =
{
	{
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x01,0x11,
		0x11,0x11,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x11,0x00,
		0x10,0x01,0x10,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x10,0x12,
		0x01,0x20,0x10,0x00,0x00,0x00,
		0x00,0x00,0x00,0x01,0x10,0x22,
		0x02,0x20,0x11,0x00,0x00,0x00,
		0x00,0x00,0x00,0x01,0x11,0x00,
		0x10,0x01,0x11,0x00,0x00,0x00,
		0x00,0x10,0x00,0x01,0x11,0x11,
		0x11,0x11,0x11,0x00,0x01,0x00,
		0x01,0x11,0x11,0x11,0x11,0x10,
		0x01,0x11,0x11,0x01,0x11,0x10,
		0x00,0x10,0x00,0x11,0x11,0x10,
		0x01,0x11,0x10,0x00,0x01,0x00,
		0x00,0x00,0x00,0x01,0x11,0x11,
		0x11,0x11,0x10,0x00,0x00,0x00,
		0x00,0x00,0x00,0x01,0x11,0x11,
		0x11,0x10,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x11,0x11,
		0x11,0x11,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x11,0x11,
		0x11,0x10,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x01,0x11,
		0x11,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x01,0x11,
		0x11,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x01,0x11,
		0x11,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x01,0x11,
		0x10,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x01,0x11,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x01,0x10,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x11,0x00,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x00,0x00,
		0x00,0x00,0x00,0x00,0x00,0x00,
	}
};

The main differences:

  • #pragma once is desirable if the file is going to be included as a .h file, it will ‘multiple definition’ errors if the header is included more than once
  • #include <cstdint> should be preferred because #include <stdint.h> is deprecated (see here and/or here.)
  • When using cstdint, expect the fixed width integer types to be in the std namespace. Many implementations also put them in the global namspace, but that’s not guaranteed by the standard
  • constexpr variables should be preferred over macros because the identifiers are confined to a specific namespace (in this case, the global namespace), whereas macros pollute the entire translation unit

Other things of note:

  • Naming conventions are debatable
  • Brace style is debatable
  • Indentation style is debatable
  • Spelling is debatable

It would be good (though not strictly necessary) to be able to choose which styles are used in the output.

20

What is the screen size of pokitto?
So I know how big I can make stuff.