How to create a Dynamics Keyboard UI

Hello, I’m a new/beginner game programmer and just started to create it’s own typing game. I need some help of how to create this keyboard and finger animation guide animation UI for typing game like the one on video. Is there any video/link/guide on how to create this same effect on my game? thank you!

Video reference

That keyboard is just UI, a bunch of buttons, each button causing a “this letter has been pressed” intent.

If you want practice at 100% of what you need to make a huge keyboard, just make a 2-button keyboard with “A” and “B” buttons.

  • Display a string
  • When button A is pressed, add an A to the end of the string.
  • When button B is pressed, add a B to the end of the string.
  • Update the string to the display

That’s it. Hurry to some basic UI tutorials: how to display a string, how to handle button presses.

All of this stuff is a vast space of techniques and tricks, but none of them are new and all of them are covered extensively.

Two steps to tutorials and / or example code:

  1. do them perfectly, to the letter (zero typos, including punctuation and capitalization)
  2. stop and understand each step to understand what is going on.

If you go past anything that you don’t understand, then you’re just mimicking what you saw without actually learning, essentially wasting your own time. It’s only two steps. Don’t skip either step.

Imphenzia: How Did I Learn To Make Games: