RPG Maker style exp curve

Hi,

This is my first time posting on a forum but here goes, I am looking to make a custom editor for creating a player etc. similar to RPG Maker, i have a good understanding now of how to do it but i am stuck on one part in particular. I want to create an experience curve and stats curve like in RPG Maker where it has like intractable progress bars that can set the value for each level up one by one. I understand it could mean making 99 small progress bars to reflect this however i do not know if Unity can do this or if there is a good alternative. I tried "EditorGUI.ProgressBar" which can show a value with a little math but this is not intractable. I know there is also animation curves that can be set but i don't know if this would be a suitable alternative or how to implement it. If it helps i am using a Custom Editor Window and i code in C#, i am completely self taught so there might be stuff i am completely unaware of. I would be grateful of any help or at least pointing in the right direction so i can figure something out. Thanks in advance

 

Animation curves are a good option, you should investigate those.

 

@zafuri

What @brownboot67 said - There is an example in manual, you basically add keyframes, that create a curve:
https://docs.unity3d.com/ScriptReference/AnimationCurve-ctor.html

It's also editable.

Just curious - in your image I only see linear graphs (six different colors). Do you mean that it is possible to somehow drag these with mouse to change their shape? Also, having such graphs for levels sounds pretty inaccurate for leveling system if there is no numerical entry.

If you don't need clickable / interactive graphs, you could also use Texture2D and SetPixels to draw your graph in texture, then you can set the texture to UI system image as sprite. It sounds more complicated than it is. This way you can have colorful graphs.

 

Thank you for your replies, I have looked into the curves and while indeed i could set key frames etc it doesn't seem to be able to do what i intend.

Those linear graphs are indeed editable by mouse and have integers that they represent. I intend for something similar, they also have a slider where you can choose whether the level up has a slow, linear or fast growth rate which makes them behave similar to the presets on the animation curve which is what made me look into them.

the animation curve would work if it was able to save outside of the editor window instance and more importantly if i could read the values from the graph at certain keyframe points in code to set the level up integers.

I never thought of looking at Texture2D pixels but that may be an option if i can use it on a custom window, This pic attached here shows where i am at with a character create window. This interacts with a game object in a monobehaviour script which holds lists from [system.serialisable] classes i created to hold the data. I have left the curve in for now until i find a proper work around, where the "manual EXP Curve" is ticked it brings up the "level2" int, this would instead show all level ints up to the amount the max level is set to, the idea is to allow full control over exp required (not at the stats point yet but would want something similar for them too) but while this could be a pain to do individually i would like a button (instead of "EXP Growth") to maybe control these ints based on a formula which could have different growth rates which could then be tweaked manually if required if that makes any sense..

All the graphs are really to do is show this in a visual format

 

@zafuri

You can get the keys of animation curve:
https://docs.unity3d.com/ScriptReference/AnimationCurve-keys.html

Keyframe:
https://docs.unity3d.com/ScriptReference/Keyframe.html

You can use evaluate to get animation curve value (y-axis position) at specific time (x-axis position):
https://docs.unity3d.com/ScriptReference/AnimationCurve.Evaluate.html

Edit - you can render your curve to texture (just going column by column for example), I don't see why it wouldn't work in editor window / custom inspector (but I might be wrong):

 

Thank you for your insight, i have figured out how to read the curves and add keyframes in code, just need to figure out how to convert the graph to a texture2D like your gif shows and that should be problem solved. Your help is much appreciated as i wouldn't have got this far without it.

 

hi there - resurrecting a slightly older thread. i'm planning on much the same idea though it's for a musical performance interface. basically i want the user to be able to draw their own graph with a mouse or finger. i thought about Animation Curves, but my only issue is that i'd probably stick a lot more keyframes in there. maybe as much as one keyframe per frame, for really complex random waveforms. i know how to create and read Animation Curves but i'm not sure how one goes about turning a touch value as something that adds a key.

i could do this with a 2D Texture as well but at that point i'd have to be able to allow only one vertical pixel per horizontal frame time. in other words it would have to override whatever value was there and act more like a line and not independent vertical pixels. anyone know if there's a tutorial on this or possibly an Asset? i've seen various pixel drawing assets that might work but i'm not interested in drawing per se. likewise i've seen a lot of charting/graphing Assets but none of these are set up to draw the waveform with the mouse or via touch. any help appreciated!

 

Hiya,

Not sure if it will help you but if you can read the curves then on a mouse click you could set the evaluate of the frame to an int if you are using ui buttons. If you mean open up a graph and click on a value to change the graph value of that point then this will already be possible when you open the graph in the editor window. To save the result though you would need to create a button that gets the new evaluate values and sets the default values that you use to open the window to the new values so effectively it's not really saving but when you open the window back up after it is closed it'll use the new values you had when clicking on your created button.

I'm not at my computer right now so cannot give the code i used but it is how i overcome my issue.

Cheers

Zaf

 

thanks for the reply Zaf! i'm suspecting i'll need two parts to the situation. the first being the graph drawing interface which has to be viewable and interactable in runtime not the Editor. so the user would use their finger to draw in the area, probably a 2D Texture using dragging gestures or clicking. but the drawing method would only allow vertical positioning of one pixel or element for every horizontal element (basically like having a bunch of sliders as you mentioned previously).

the drawing information could then be applied as keyframes on an AnimationCurve. i'm estimating a pretty minimal table size - like 128 x 128 elements. but i don't have to use AnimationCurves actually - anything where i can read a value at a horizontal position is fine with me. also if a keyframe always has interpolation between it an the next keyframe it might not be as useful for me. i would like to be able to have wide, sudden leaps in value if i needed it. actually something like a user interactable bar chart would be exactly what i'd want.

anyway, i appreciate the tips!

 

No probs,

An idea if you are using runtime is to get your results from screen position. Like how an interactable mouse finds its position when making a drag and drop inventory (there are tutorials on this type of thing) maybe a load of fill bars that fills to point the mouse is on when clicked over that bar. (OnMouseHover and OnMouseClick functions) although not sure how to do it with touch screen.

Cheers,

Zaf