Some improvements: Virtual keyboard on mobiles & preloader

[ricardograca]

Hi guys,

1. First, a small problem and a solution: On mobiles, the TEXT ENTRY do not call the virtual keyboard, so people can not write to the game; and to solve that I’ve decided to create a virtual keyboard for text entry on mobile versions of my games. The keyboard is almost ready to work. I’ve tested and it’s fine, except for the BACKSPACE button, cause I do not know how to “code” this.

These are some screenshots of the virtual keyboard; but the source files are here too. The last screenshot is the keyboard applied on a new game… it’s working, but I would like to fix and improve it. If someone can help… it’s for all of us, I think.

2. Second, I know that the preloader is not a priority of the development, but I would like to know what files should I edit to customize it. I can share the results here so anyone can use it. Just need to know where can I find this piece of code.

The preloader layouts made with Inkscape are here. I’ve animated then with Synfig, and the rendered images sequences are here for download too, as the synfig source files. So, if someone else could help…

The DOWNLOADABLE FILES:
The keyboard source files: http://www.mediafire.com/download/b1sggo21r9kin6n/virtual_keyboard.zip
The animated preloaders( png sequences ):http://www.mediafire.com/download/d9r55kp9eippnnc/Preloaders_1-2-3.zip
The synfig source files( preloaders): http://www.mediafire.com/download/5chjp1uernvovk9/Preloaders_sources_synfig.zip

[Wendigo]

This looks very nice

What exactly is your problem with backspace?
If it is the removal of the last letter when hitting the backspace button then you can do it with this code:
(“text” is the name of the text object in my example)

SubStr(text.String(),0,StrLength(text.String())-1)

The preloader is located in the file “runtimegame.js” in the “gdjs.RuntimeGame.prototype.loadAllAssets” method (see export folder).
Currently it is just displaying a text.

[ricardograca]

Hey Wendigo!

Yes, the backspace is now solved… thanks to you. Exactly that!
This is the updated virtual keyboard with your modification:
http://www.mediafire.com/download/b1sggo21r9kin6n/virtual_keyboard_v2.zip

Now I’ll try to customize the preloader a little bit. I’ll just drop these image sequences or animated gif behind the text file. No great modifications( I think ).

… well, I did something…

I’ve tried to customize it, but nothing happened. Someone have any idea about what I did wrong?
this is the code that I placed in runtimegame.js after line 406

// – preloader image start

// create a texture from an image path
var texture = PIXI.Texture.fromImage(‘loader/pre.gif’);

// create the texture on loading screen
loadingScreen.addChild(texture);

// create a new Sprite using the texture
var preloader = new PIXI.Sprite(texture);

// center the sprite’s anchor point
preloader.anchor.x = 0.5;
preloader.anchor.y = 0.5;

// move the sprite to the center of the screen
preloader.position.x = this._renderer.width/2-50;
preloader.position.y = this._renderer.height/2;

// -- preloader image end

[ricardograca]

Well… I’ve got a small improvement here. I could load the image behind the text percentage, but not the animated gif. I got a png static file loaded. It is a progress( little one ). Here the screenshot:

The right code used is(after line 406 ):

// – preloader image start

// create a texture from an image path
var texture = PIXI.Texture.fromImage(‘loader/pre_roda.png’);

// create a new Sprite using the texture
var preloader = new PIXI.Sprite(texture);

// create the texture on loading screen
loadingScreen.addChild(preloader);

// center the sprite’s anchor point
preloader.anchor.x = 0.64;
preloader.anchor.y = 0.4;

// move the sprite to the center of the screen
preloader.position.x = this._renderer.width/2;
preloader.position.y = this._renderer.height/2;

// -- preloader image end

[Wendigo]

Looks a lot better than just the text. Maybe you can use the animated icon with the MovieClip class of Pixi.js. It takes an array of single images.
http://pixijs.github.io/docs/PIXI.extras.MovieClip.html

[moise_nsuadi]

How can I use this virtual keyboad?

[ricardograca]

You can just open the project file( download link is bellow ): an copy the events structure to yours.

virtual_keyboard_v2

[moise_nsuadi]

tecladovirtual.gdg it’s cant open with GDevelop

[dinobit]

Ricardo,

can add a manual or “how to” in your zip file?

[Bouh]

I have a good news for you in next days/week, GD5 will have a new extension created by me, for open the keyboard on mobile, when a entry text object is used.
Keep wait, my extension is in debug and clean phase.

[moise_nsuadi]

wooooooww it’s very nice, what’s amazing news!!! can you tell me when it’s can be available please!

[audze]

That will be great! looking forward to it.