Q: How are on screen controls made?

Basically, you have to use the ones already provided in Motion (unless you can program FxPlug plugins.)

You find OnScreen Controls in several filters. The most common one is Poke (in the Distortion filter set.) However, *any* filter that has Publish OSC in its parameter list can be used and there are several different types available. (My "exotic" favorites are Blur > Gradient blur, Tiling > Kaleidotile, and Stylize > Extrude.)

Create a new group at the top level - rename it OSC (or OSCs if you have more than one). In the Group inspector (you *must*) set 2D Fixed Resolution. (Failure to do so will have very unexpected effects.)

With the Group selected, add Filters > Distortion > Poke.

In the Poke inspector, find and check Publish OSC.

Note: the group still has a length of 0 frames. You can into Properties > Timing > and set the duration to the length of your project (or longer) or more simply, just add a shape - rectangle, circle, whatever is convenient, and then turn it off (or turn off the group so it doesn't show). The group will have its length set to the length of the project (if your Preferences > Project > Create New Layer at start of project is on or your playhead is at 0.) Onscreen controls only appear in FCPX for the number of frames that the parent group/object has in the timeline. Just adding a filter does not add an object and filters have no length if there is nothing to act upon.

Add Link behaviors to the X and the Y parameters of your object under control. (You need to add separate links to individual parameters because there is a mismatch in parameter types.)

To the Source Object wells of the behaviors, add the OSC group. For the Source Parameter, from the Compatible Parameters drop down menu, select Filters.Poke.Center.X and Y respectively.  Your object will move to the upper right corner of the canvas. At the bottom of each Link Behavior inspector, there is an Offset value. Set each of these to -0.5 (which will reset the object to the middle of the canvas.)

Your object will now be controllable in FCPX with the onscreen control.

You need to know a little about how Motion deals with multiple resolution destinations and how it applies to what you just did.

Motion (very cleverly I must add) treats all screens resolutions as having coordinates from 0 to 1 (inclusive.) No matter what project resolution you have, SD, HD, 4K, etc. OSC controls are treated as having the same dimensions. The actual pixel values are calculated from the screen resolutions for the horizontal and vertical dimensions of the destination video (project). [The Fixed Resolution dimensions help determine the aspect ratio in FCPX, but I believe are automatically scaled to fit the target FCPX Project when applied. This may not always be true, and if you make adjustments, then you basically override this behavior in your specific template project. See below.]

The middle of the canvas for an object, like a shape, etc., is (0,0), but for an OSC it is 0.5, 0.5. When you create a link from an object to an onscreen control's center parameters, you are "adjusting" the center to another coordinate system. Offsetting those values to the negative of the Center value resets the position to the original "normal".

All that said, you can actually trick OnScreen Controls by setting a custom "resolution" of the Group you placed them in with the Fixed Resolution dimensions (say: 300x500pixels). So if you want to create something like a "HUD" to appear in FCPX and have the control only move within its bounds and controls some other object on the screen, that can be done (use clamp behaviors to restrict the Center.X and Center.Y to between 0 and 1 and the osc will stay within the bounds of the group fixed resolution dimensions you set.)  If you don't "get" this yet, then forget about it for now, it's not that important and has nothing to do with what you asked. [In the case of a "HUD" type setup, you could create another group with another OSC to control positioning the HUD group of objects on the screen, and everything in that group would move according to that OSC including the OSC of the HUD designed object... get some practice with one OSC, then venture into complicated . You're only limited by what you can put together with whatever you have available in Motion if you aren't programming this stuff on the application/plugin level. Here is an example project of this type of control - it's very simple and used to set the color of a background: https://www.youtube.com/watch?v=jpIxuuZuko8 - it was designed to be taken apart and studied.]

If you build a template with an OSC and the OSC does not appear in FCPX: go back into Motion and check that its group has length (Timing) and make sure you checked the Publish OSC checkbox (and that the effect is selected in the FCPX Inspector - click on the effect title bar.)

About Fixed Resolution. Motion, by default, has dynamic groups - they grow and shrink to simply be the bounding box of whatever they contain. By setting Fixed Resolution, you force Motion to restrict the size of the group to whatever you have set. When the OSC center control goes beyond the bounds of a dynamic group, it acts as a positional multiplier - and your object very quickly (most of the time immediately) disappears off the screen. If your initial OSC group has no physical object in it, then it's dynamic dimensions are 0 x 0 and *any* movement of the onscreen control increases by whole numbers for every pixel it moves. If you move the OSC by 1/2 pixel in any direction, your object's center is already aligned to the edge of the canvas.

If you have any questions... feel free to ask. This topic might be a little hard to grasp until you actually work it out for yourself and see it in action.