Making an interactive hud

Started by
9 comments, last by ethancodes 5 years, 7 months ago

So I'm making a power up where the ball on the screen will hit a paddle and stop there, a hud element will pop up giving the player control to aim the ball's direction, and then the ball will launch when the hud element is released. I've never done anything like this before, the most I've done is simple health bars or menu's, and I'm having a hard time finding any info on how to do something like this. I've put an image below to show what I'm trying to do. If the arrow on the bottom is slide to the left or right, the arrow at the top indicating the direction the ball will launch will move accordingly. Any ideas on where to even start with this?

 

 

SniperShot.png

Advertisement

I've never done anything as you mentioned using C# but I have using another programming language. I'm sure it shouldn't be too difficult to convert it to c# as its pretty flexible. where are you in development as of right now, starting from scratch? 

For the most part, yes. 

Are you using a perspective or orthographic projection transform? Also, when you say the upper arrow should move accordingly, do you mean that it should rotate around the ball as the lower arrow is moved side to side along the horizontal axis?

Orthographic. And technically the top arrow won't be there? that's just the direction the ball will go when shot. Think of it like pool. The ball is the cue ball and the arrow is the stick.  You rotate around the ball at different angles to make it go different directions. Same thing here. 

well, perhaps...the two arrow indicators are a group that inherit the position of the ball as a pivot with initial rotation of the paddle normal when activate. The lower arrow moves relative position on a flattened cosine arc (-halfPi -> halfPi) scaled to paddle edge to edge position and maintains orientation to the original group normal. So there are some variables you'll want to track and get fed per frame, get one tiny piece working at any given iteration and build on top of that. Given the short answer, does that spark something more in depth? 

Neat little gizmo. 

On 8/26/2018 at 7:14 AM, ethancodes said:

Any ideas on where to even start with this?

You said the top arrow will not be there, so you are only making the bottom arrow and the line? Is the line part of the paddle or part of the indicator? In any case, they will be separate.

I assume you can find the coordinates of the ball. For the arrow, you need to start from the ball coordinates and then translate and rotate it, in the right order. You can look up "translation and rotation order" or something like that. Here's a picture to get you started.

image005.gif

@1024 The line is like a slider, and the arrow slides along the slider, always staying perpendicular to it. So when the arrow is at the far left, and the screen is release, the ball will shoot in the direction the arrow is pointing. So towards the right side of the screen. 

If you want the arrow to slide along the line, then a simple rotation won't work. I can think of two ways to do it. 

1. Hardcode it: calculate the coordinates of the arrow for all angles in advance, and just look them up wen you need them. This can be a list of coordinates, or keyframes in an animation or something like that, depending on what you have available in your code. This approach requires the most work from you, but the least thinking :)

2. Parametrize it: Create a formula for the slider line (hopefully the slider is a curve that can be easily parametrized). Then you calculate the position/rotation of the arrow using the parametrized formula. This approach requires some math, and if your slider curve is reasonably simple, that is what I would do.

There is also an option 3: change the slider :) Make it a half-circle, then you can solve the problem with a simple transformation.

I stepped away from this for awhile to get a different part of the game taken care of. I'm back on this now and I found this:

https://unity3d.com/learn/tutorials/topics/user-interface-ui/ui-slider

I'm wondering if there is a way to make a custom UI element similar to the slider, but shaped differently. 

This topic is closed to new replies.

Advertisement