So this has been something difficult for me, but I am trying to find a way to build and show bezier curves in the editor. I want to be able to create paths for a character to move along, but I’m not sure if there’s a way to have these curves show up in and be editable within Cocos Creator. I know that this is pretty vague, and I apologize for that. This is pretty new to me, and I’m trying to find the best way to handle it. Any help would be greatly appreciated!
are you using the animation component (and its editor) for this? if so, this is how you do it:
as far as i remember, moving an object on a bezier path had some issues in <2.0.10 versions, haven’t checked it since though.
if you’re looking to roll your own curve editor, this might be a good start: Editor Extension · Cocos Creator
Thanks for your reply! I am looking for something like the timeline, but outside of the animation node. I was able to get something close to working yesterday. I can set up points and move an object along a drawn line, but I can’t see the line outside of play / simulation.
I will probably have to dig into an editor extension and see what I can put together. Even getting the curve to show in the game preview window would be good enough for me.
I think, you may check default components’ codes from GitHub and learn from there.
Eg: Box Collider has an option to enable edit mode and it allows editing during design time.
Good luck…
if you want to draw stuff in editor, check this out: Draw a polygon using Editor? - executeInEditMode is what you’d need, more info here https://docs.cocos.com/creator/manual/en/scripting/reference/class.html
Hey, this works great, thank you! This is a huge step in the right direction, and something cool to see just in general. Just have two things to figure out now.
The first is seeing if this can work with TypeScript. Not sure how to call / reference the editor attribute properly, so I’ll have to keep looking that up.
The second is working out how I can clear old, already drawn paths from the Graphics node. Currently, when I move parts of my curve, the ‘old,’ lines stay, making it hard to see where the current curve is.
you can use cc.Graphics#clear to erase contents of Graphics: https://docs.cocos.com/creator/api/en/classes/Graphics.html#clear
g.clear(true);
from my experience, it should be called with the true parameter, otherwise it doesn’t seem to actually do anything. also, this is just a generic observation, clearing causes flickering for some reason (at least in 2.3.4), not sure if it’s an engine bug or anything. it’s not gonna matter in editor, but if you want to do in-game vector animations, they will flicker.
for the typescript syntax, i think it should work like this:
@ccclass
@executeInEditMode
export class MyComponent extends cc.Component
{
}
That works out as well, I just needed to declare, (I think declare is the proper term), a constant before hand. Looks something like;
const {ccclass, property} = cc._decorator;
const {executeInEditMode} = cc._decorator;
@ccclass
@executeInEditMode
export class myComponent extends cc.Component
{
}
But overall, this is pretty great. I’ve got a moving curve that I can set the points and see it in the editor, which in turn shows me how a character will move along it. Just have some clean up to do, and it’ll cover just about every need I have for it. The good news is, the flicker isn’t an issue, since I’m only using the Graphics curve only in the editor. When it comes to play, they won’t be shown. It’s mainly to be used for set up and testing.
Once again, thank you for all of your help! It has been a huge assist for me.
I guess you want this : Beizer Curve Editor In Cocos Creator
tip : this is chinese forum, maybe you need google translation.