- JavaScript 96.2%
- HTML 2.5%
- Lua 1.3%
| pico_keyboard.html | ||
| pico_keyboard.js | ||
| pico_keyboard.p8 | ||
| pico_keyboard.p8.png | ||
| pico_keyboard.p8.rom | ||
| README.md | ||
Anta's pico keyboard
Anta's pico keyboard is a tool representing a basic virtual keyboard in pico8 easy to handle and for the cost of 351 tokens if used as is.
It can be used like a library and is easy to modify the vkey_draw() function to fit your style, that will make you free of 65 tokens.
compared to devkit keyboard, the virtual keyboard allow devices that don't have a keyboard like phones to still play the game with only the basic inputs from pico8.
tools like that may exist, but I found it funnier to make my own and recreate the wheel, by also making it easy to port on different projects
This is still a WIP for now but it is usable and it is a basic version for QWERTY that i'll try to make for AZERTY, because I'm french and french keyboards use AZERTY.
I'll also squeeze the maximum of tokens that I can in the core logic but will probably let the vkey_draw() function as is since it is made simply for decoration and it is not really relevant to change it to make it prettier since it is just to show an example
I've made below different section on how to use it or how to modify it, and also what I'm planning to add (if i'm planning to make changes)
Features
This virtual keyboard is basic but handles :
- moving selected character using arrow keys
- adding a character to the input using the
xbutton - removing a character from the input using the
obutton
How to use
All of the code snippet can be found in the file pico_keyboard.p8, add the functions to your files except for the _draw(), _init() and _update() functions
First you'll need to initialize the keyboard with vkey_init(y), a good place to initialize it is inside you _init() function or the function your initialising a scene for example.
vkey_init(y) takes an optional int as argument, setting it's starting height if you draw the keyboard with vkey_draw(). If you use vkey_init() without arguments vkey_draw() will draw the virtual keyboard with a default height of 0
To update the virtual keyboard logic you'll need to put vkey_update() to your _update() function. This function will map the inputs to allow the user to naviguate and use the virtual keyboard
And finally to draw the virtual keyboard you may use vkey_draw() to your _draw() function. This function will draw a basic virtual keyboard on screen with the selected letter in yellow.
You can also erase this function and make your own draw function for the virtual keyboard as explained in the section below
Note that no input will be shown with the vkey_draw() function but you can print it using vkey_input variable after initialisation of the virtual keyboard. You may also use vkey_input to retrieve the input when the user finished typing
Changing the visual
You can change the visual of the keyboard (and i recommend it because otherwise it feels bland) simply erase the vkey_draw() function and use the vkey_keys array of array containing the keyboard layout along with vkey_sel array
The vkey_keys array is a pretty simple array of array representing the lines in a keyboard layout (qwerty in our case) and is written as follow :
vkey_keys = {
{'1','2','3','4','5','6','7','8','9','0'},
{'q','w','e','r','t','y','u','i','o','p'},
{'a','s','d','f','g','h','j','k','l'},
{'z','x','c','v','b','n','m'}
}
the vkey_sel array is an array of 2 integer representing the line and column the selected character is currently located inside of the vkey_keys array of array.
So in order to retrieve the current character selected you can use vkey_keys[vkey_sel[1]][vkey_sel[2]
What to do next
I'm planning to at least make an AZERTY version and add the other symbols from ASCII and the symbols from PSCII as a side button for both versions.
And if the file isn't too big, I'd like to add both versions into 1 file easy to change using a side button