in gui ? — the easiest way
This kind of thing is always labour-intensive in my experience, but I would recommend something like the following:-
Start with an existing photograph or schematic picture of a real keyboard. On a printout or on the image itself, give each key a number in sequence, starting from zero. Number the keys methodically along rows, keep the alphabetic keys separate from the numeric pad, etc. Also, number all the “normal” keys (ie, not different shaped ones like space, return, etc) first and add the remaining ones at the end.
In your script, create a public array of strings which will contain the legend for each key cap. The index numbers of this array are the same as the corresponding numbers on the keyboard picture. There is probably no choice but to type in each key’s character manually ![]()
Add the keyboard picture to the Unity project as a texture. Apply it to a plane or other object and position and scale it so that the keys appear more or less as you want them to in the GUI design.
Add a public array of Rects to the script (which will define the buttons). Add one element and resize it so as to fit nicely to the shape of a normal key. This is straightforward if you add an OnDrawGizmos function, where you iterate over the rect array, drawing each one as you go. Basically, just pick a key on the keyboard image and resize the rectangle visually until it fits well.
The Inspector panel has a nice helpful feature when you extend an array by changing the size value - the value of the last element in the array is copied to all the new elements that are added. If you position the first rect array element at the start of a row of keys and then increase the array size, all the new elements will be rects of the same size and at the same position. This makes it easier to create rows - the Y coordinate and the width+height of the new rects will be set correctly for that row and you just need to shift each key rect along to the right X position.
Hopefully, you can see where I’m going with this. It’s still a laborious process, but you can add rows of keys relatively quickly if you use this technique. You basically need to add all the keys so that the legends and rects correspond to the key with the same number on the picture.
Once you got all the rects laid out, you can use GUI.Button in a loop at runtime to iterate over all the keys. Since the indices of the legend and rect arrays correspond, you can use the same loop counter variable to access both:-
for (i = 0; i < numKeys; i++) {
if (GUI.Button(rects[i], legends[i])) {
buttonPressed = i;
}
}
Another technique is to use Photoshop (or whatever) to determine the x,y positons of the keys in the image one by one and then record these as separate lines in a text file. You can then use grep, find and replace, spreadsheet, etc, to generate the script code that initialises the arrays. Personally, I like this approach, but I’ve found most people frown on code generation for some reason.
Of course, whenever you suggest a longwinded plan like this, you are just crying out for someone to follow it up with something simple and effortless
Anyway, though, I’ve found this kind of technique useful for layout tasks.