[Tutorial][Beginner]3.Creating your own art - Piskel editor for Pokitto

Creating your own pixel art for your Pokitto program

Note:

If you are familiar with creating pixel art, you can jump directly to chapter 3, the exercise. If you just want the link to the program, it is here → www.pokitto.com/piskel

Contents:

  1. The basics
    1.1. What are pixels, and where are they stored?
    1.2. Designing your own Pixel Art
    1.3. Using a computer for making pixel art

  2. Piskel - pixel art web application for Pokitto (www.pokitto.com/piskel)
    2.1. The Piskel User Inteface
    2.2. Before you begin - learn the meaning of Palettes
    2.2.1. What are Palettes and why are they needed
    2.3. Using a Palette the right way in Piskel
    2.3.1. Select 256 or 16 colour mode from the settings
    2.3.2. Create a new palette to store your chosen colours
    2.4. Drawing your artwork
    2.5. Saving your artwork
    2.6. Exporting your finished artwork to a Pokitto data file

  3. EXERCISE: Draw a picture and use it in the ‘draw bitmap’ tutorial
    3.1. Creating the artwork
    3.2. Ready for Export!
    3.3. Putting it together

kuva

1. The basics

1.1. What are ‘pixels’, and where are they stored?

A Pixel is 2 things:

  1. a pixel is a visible, coloured ‘dot’ on the display. Everything that you see on the display is made of these dots - the test, lines, pictures etc.
  2. a pixel is a colour value stored in the memory of Pokitto

The colour value of all of the pixels - meaning the individual dots of the screen together are called the screen buffer

1.2. Designing your own “Pixel Art”

Getting started with Pixel Art is easy. At first, you can just use pens and paper, as seen in this example below:


(link)

The important thing here to understand, that the Pokitto screen is exactly like the graph paper with the squares. To make art on the screen, you give a colour value to each pixel - just as if you were colouring the squares on a graphing paper.

1.3. Using a computer for making pixel art

There are many programs that can be used to draw pixel art. Some are free to use, some you have to buy. Here is a good list of alternatives to consider.

But, we have made getting started even easier:

you can simply use the free, web browser based Piskel for Pokitto!*

(*It is based on the hugely popular, open-source piskelapp.com)

2. Piskel - pixel art web application for Pokitto

Piskel is one of the best free pixel editors out there.

Piskel for Pokitto is a customized build of Piskel (original)

Simply click this link to begin → www.pokitto.com/piskel

2.1. The Piskel User Interface

  1. Tools - these are familiar drawing program tools: pen, eraser, select area, color pick etc.
  2. Color - this is the current color that you are painting with
  3. Drawing area - this is where you draw. Note: this view is zoomed in, so pixels are shown as big square blocks. You can change the size of your drawing area is, just read on!
  4. Zoom view - here you see a preview of your art (and animation) and how it looks as the real small size it will be on the Pokitto screen
  5. Settings - this is where you can set the size (width and height in pixels) of your drawing area as well as choose the amount of colours you wish to use in your palette
  6. Export - from here you can generate a Pokitto-compatible data file when you are ready
  7. Palette - the colours you will be exporting with your artwork. Explanation below!
  8. Info - here you see the current size of your drawing area and the art you are working on

2.2. Before you begin - learn the meaning of “Palettes”

2.2.1 What are Palettes and why are they needed

Modern computers have lots and lots of memory. They can handle 16 million colours with no problems at all. But: many old game consoles, and retro consoles like Pokitto, have a limited amount of memory. To save memory, they usually limit the amount of colours to 256 colors, 16 colors, 4 colors or even just black and white.

The selection of colours that can be used at the same time is called a palette.

This is an artist’s palette, and explains where the word palette comes from:
https://d27ucmmhxk51xv.cloudfront.net/media/english/illustration/palette.jpg?version=1.1.64

This is the palette of NES, the Nintendo Entertainment System (Famicom):

https://i.warosu.org/data/vr/img/0030/70/1458178243758.jpg

2.3. Using a Palette the right way in Piskel

Now that you are familiar with the idea of palettes, you should draw your artwork in such a way that you understand that the amount of colours that will be used in your game / application is limited to either 256 or 16 colours.

Do not worry: you can add more colours and also reduce the amount of colours later. Just get used to the idea of palettes - which is using a limited number of fixed colours, that’s all!

2.3.1. Select 256 or 16 colour mode from the settings

Press the settings gear icon (number 5. on the picture shown earlier). A settings box will pop up. Next, you can select the number of colours as 256 or 16. If you are unsure of how many colours your game will use, then just leave it at 256.

NOTE: Piskel actually stores ALL of the colours you are using, even if they are not stored in the palette. The only time, when the Number of colors -setting has an effect is when you have done your art and are exporting your artwork to be used on the Pokitto.

kuva

2.3.2. Create a new palette (palette #1) to store your chosen colours

In Piskel, palettes are created and managed in the “Palettes” window (number 7. in the picture shown before). By default, there is already one palette shown. This is a palette called Current colors and it is also palette number 0. This palette automatically includes all the colours that you have used in your art.

But you should not only depend on this palette #0 (current colors), because:

In Piskel, Palette #0 (current colors) only exports colors that are used. Often, you may want to include colors like a sky blue background color, that you know will be used in the game but is not visible in the art that you are currently using. That is why you need your own custom palette #1

What you need to do, is to press the ‘+’ button in the Palettes -window. This will create a new palette below ‘Current colors’. This new palette is palette #1 and you can give it any name you like. Use this palette to store the colours you are using in your art - it will make your life a lot easier later on!

Palette #1 should include all colours you are using, even if they are not visible in the image you are drawing. This is the palette that is exported with the image. The order of the colours is not critical - but use the same palette for all of the art that will be visible on the screen at the same time!

kuva

2.4. Drawing your artwork

Piskel is a normal drawing program. Just play around and you’ll quickly figure out how it works. You can also check out some Piskel tutorials made by other Piskel users.

2.5. Saving your artwork

Piskel gives many ways of storing your art while you are working on it. You can:

  • store it in the web browser (it will be saved on the machine you are using)
  • save it as a .piskel file, which is Piskel’s own graphics file
  • save it in the web cloud, if you have a PiskelApp account

But, when you are ready to test the file on your Pokitto, first save and then what you need to do is export:

2.6. Exporting your finished artwork to a Pokitto data file

To get your image into your game, we need to turn it from a pixel file into a C header file. C header files are text files that contain C (or C++) source code in a .h ending file. These source code files can be included in your project using #include "myfile.h" , where “myfile” is ofcourse the name you have given to your file. After this, you can use the art you created as a part of your game or application!

To export your art:

  1. check that your palette #1 (the one below ‘current colors’) has the right colours you intend to use
  2. check from “Settings” that you are using the correct ‘Number of colours’ setting. Use ‘256’ as a general rule, but use ‘16’ if you know your game will not need more colours and memory saving is important
  3. finally, press Export icon (number 6. in picture shown before) → choose ‘Others’ tab → press ‘Download .h file’ button

Piskel will create a text file with .h ending. This means it is “C” source code and can be either included as a file in your project, or you can open the file, select the palette and array and copy-paste the text into your main C source file (the one where you have the main function that runs the game)

kuva

3. EXERCISE: Draw a picture and use it in the ‘draw bitmap’ tutorial

Ok, let’s do this step-by-step together!

3.1. Creating the artwork

  1. Open Piskel in a new tab (right click, ‘Open Link in a new Tab’) www.pokitto.com/piskel
  2. In Piskel, first click ‘+’ in the Palettes window. Give a nice name to your Palette #1. Here I have given the name ‘Flaggy’

  1. Check that your new palette is now the active palette (shown in the Palettes window). ‘Flaggy’ is active, so everything is correct.

image

  1. Now, each time you start drawing with a new colour, press the ‘pen’ icon in your palettes window, and create the new colour inside your palette!

As you can see, I have created this beautiful palette of 5 different colours. Why 5 colours? You shall see in a moment!

image

And now, the artwork is drawn and ready. It’s the beautiful flag of Finland drawn with an ugly pink background. Why the pink? Can you guess? Answer below the picture!

(answer: the pink color is going to be the colour that is used to mark “transparent colour” in the Pokitto program. This means, that pixels with that colour will not be drawn, and the background that is behind the flag will be shown instead!)

Fun fact: old computers did not have “transparency” like today’s computers. Today you can see partially transparent layers on top of other transparent layers. With retro computers, there was no such fancy stuff. One colour of the palette was simply used to mean ‘transparent’. And that colour was often an ugly pink (Red 100%, Green 0%, Blue 100%) because nobody would use such an ugly colour in their art :wink:

3.2. Ready for Export!!

  1. Open ‘Settings’ (the gear symbol at the right edge)
  2. Select Number of Colors: 16 , click outside the settings slider tab to close it
  3. Click ‘Export’ (the ‘mountain picture’ symbol three steps down from the gear symbol)
  4. Click ‘Others’ tab
  5. Click ‘Download .h file’ button
  6. Save the file somewhere convenient (I usually save everything on desktop, bad habit!)

3.3. Putting it together

  1. Next, I simply open the downloaded file Flaggy.h in a text editor, and I copy the palette and the array (everything between the #define FLAGGY_H and #endif at the end!)

  2. Then, I head on over to the bitmap tutorial for Pokitto at:

https://os.mbed.com/teams/Pokitto-Community-Team/code/Bitmap/

… and I import it into the mbed online compiler using the yellow button, top right. (This is naturally after logging on, ofcourse… you do have an mbed account already don’t you?)

  1. In the compiler, after the importing is ready, I open up the main file bitmap.cpp:

  1. … and I simply paste the code I copied from Flaggy.c before my int main() function on row number 8.

  2. Next, its time to change 2 lines of code inside the main function. We change

mygame.display.load565Palette(pokitto_icon_pal); //load the palette for the image

to:

mygame.display.load565Palette(flaggy_pal); //load the palette for the image

And we change:

mygame.display.drawBitmap(0,0,pokitto_icon); // draw the pokitto_icon graphic

to:

mygame.display.drawBitmap(0,0,flaggy); // draw the flaggy!

Full end result of bitmap.cpp after editing:

/* Pokitto drawBitmap example - draws a Pokitto icon by @trelemar */

#include "Pokitto.h" // include Pokitto library
#include "pokitto_icon.h" // include the Pokitto icon graphics file

Pokitto::Core mygame; //create Pokitto application instance

#include <stdint.h>

#define FLAGGY_FRAME_COUNT 1
#define FLAGGY_FRAME_WIDTH 16
#define FLAGGY_FRAME_HEIGHT 16
#define FLAGGY_COLOR_BITS 4

/* 16-bit (565 rgb) palette data for "Flaggy" */
static const uint16_t flaggy_pal[] = { 
0x0, 0xffff, 0xdf, 0x7ff, 0xf81f, 
};

/* Piskel data for "Flaggy" */
static const uint8_t flaggy[130] = {
16,16,
//frame 0 
0x44,0x44,0x44,0x44,
0x44,0x44,0x44,0x44,
0x44,0x44,0x44,0x44,
0x44,0x44,0x44,0x44,
0x40,0x00,0x44,0x44,
0x44,0x44,0x44,0x44,
0x40,0x10,0x41,0x14,
0x44,0x44,0x44,0x44,
0x40,0x00,0x11,0x11,
0xF4,0x44,0x44,0x10,
0x40,0x10,0x11,0x11,
0xFF,0x11,0x11,0x10,
0x40,0x10,0x1F,0xF1,
0xFF,0x11,0x11,0x10,
0x40,0x10,0xFF,0xFF,
0xFF,0x11,0x11,0xF0,
0x40,0x10,0xF1,0x1F,
0xFF,0xFF,0xFF,0xF0,
0x40,0x10,0x11,0x11,
0xFF,0xFF,0xFF,0x10,
0x40,0x10,0x11,0x11,
0xFF,0x11,0x11,0x10,
0x40,0x10,0x10,0x01,
0xFF,0x11,0x11,0x10,
0x40,0x10,0x04,0x40,
0x0F,0x11,0x11,0x04,
0x40,0x10,0x44,0x44,
0x40,0x00,0x00,0x44,
0x40,0x10,0x44,0x44,
0x44,0x44,0x44,0x44,
0x40,0x10,0x44,0x44,
0x44,0x44,0x44,0x44,
};


int main () {
    mygame.begin(); // start the application
    mygame.display.load565Palette(flaggy_pal); //load the palette for the image
    mygame.display.bgcolor=0;
    /* the "while" loop runs as long as the program is running */
    while (mygame.isRunning()) {
        /* mygame.update() is processed whenever it is time to update the screen */
        if (mygame.update()) {
            mygame.display.drawBitmap(0,0,flaggy); // draw the flaggy!
            }
        }

    return 0; // this is "good programming manners". Program informs it ended without errors
}

Now let’s compile, download to Pokitto and run the program!

I press compile, the mbed online creates a binary Bitmap.LPC11U68.bin, and I store it on the desktop.

Because I am on a Mac, I use @adekto 's Mac Pokitto Loader to drag and drop the file to Pokitto

Success!!

And there we have it, on Pokitto screen:

Final note:

I will come back with more fine tuning (transparency, flag animation) and better pictures later!

11 Likes

This is amazing! Thanks!!!

I’m *bump ing this, so everyone notices it

1 Like

Hey all

Is this too much? Too much background info?

lol o no my old pokitto loader is still used XD

Nice intro, with detailed background. I believe it can be classified as easy instead of intermediate.

Seriously everyone.

I have the bugs hammered out. Making animations is so easy. Exporting is a piece of cake. Everyone should be using this program, giving me feedback.

@pharap : making the competition now makes a lot of sense - we have a tool that even the absolute beginner can use

(not to mention the fact that Piskel makes making gifs of ideas extremely simple!!)

Flaggy

2 Likes

is there a way to import pallets? like from existing sprites or do they have to be png’s or something?

2 Likes

my bad, just allot of gui to take in all at once

Yes, I know. But it will be worth your time, believe me. Piskel is amazingly feature-packed for such a simple web app & the workflow to Pokitto is simpler than anything else we have, hands down.

1 Like

since this is like a javascript thing could you run this inside visual studio code? (dumb idea to make vscode the full feature pokitto IDE)

Afaik vscode has no api for graphical windows.

But does it support html5 inside the ide, idk

EDIT: silly me. Ofcourse it could just launch a browser instance to display the ui.

So yes, probably

Update!

Piskel for Pokitto now generates .h header files directly.

You can just export as .h header file, then

#include "myfile.h"

in your game and you can then use the palette and bitmaps without any extra steps!

4 Likes

38 posts were split to a new topic: Problems with sprites

Piskel export as header doesn’t export palette properly. If even one pixel in the sprite is transparent:

piskel-packaged-min-2018-09-13-04-41.js:13 Uncaught TypeError: Cannot read property 'getColors' of undefined

Otherwise, it exports the .h file file, but the palette is:
/* 16-bit (565 rgb) palette data for "New Piskel" */ static const uint16_t new_piskel_pal[] = { 0x0, };

Tested in both Chrome and Edge.

2 Likes