Bring forward at runtime workaround

Help
#1

I am working on a game, and I could really use an option to bring object forward via code. While I requested this feature, I know the devs are busy so I am asking the community for help.

In my game I have a set of clips, that will sometime overlap each other (think multiple explorer windows in your OS). When this happens, I would like a way to “choose” which clip goes on top of the others.

Any ideas on how can can I approach it with the tools we have now?

I tried cloning the object and deleting the original, but the change is visible and it messes up some other interactions I have.

#2

Do all clips need to be seen at all times?
If not, you could set the opacity of the “behind” clips to 0.

1 Like
#3

Sadly, they do :frowning: It was a good idea tho :slight_smile:

Basically what I want to do is “window switching” as seen in any OS. When you have two windows open, you see both, but they are overlaping, click on the bottom window and it pops to the front.

1 Like
#4

How is the change visible? Does the object’s state reset? Or is it just in a different position?

#5

It stays in the same position, but “blinks” once (seems to be missing for 1 frame). Also an element is missing. Also, because it is on click, it messes-up other “sub clips” and they are no longer properly clickable…

Will mess with it a bit more, see if I can make it work somehow.
I was looking through the code to see if I can get to the functions responsible for arranging objects in the editor, but no dice - there is too much code :stuck_out_tongue:

Maybe if I can find the array holding all the clips I can sort it, but I think this is asking for more trouble :P

#6

If you modify Wick using the instructions in the README, you can try adding a function to send a Clip forwards/backwards into this file: wick-editor/engine/src/base/tickable/clip/Clip.js

This is a really convenient file. I think it contains every property/function for Clips that’s exposed in the Wick API (along with a few hidden ones, but I’m not sure if they work).
It might look something like this:

/**
* Move this clip to the front of the Z stack.
* EDIT: put this.view in brackets
*/
bringToFront () {
    paper.OrderingUtils.bringToFront([this.view]);
}

I would probably insert this at line 503 of that file, but I only studied the code online at Github I’m not sure whether it’ll work :thinking: If it does, yay! It will most likely not be exposed in the script editor’s reference, though.
edit: I did try running this code in Wick itself, attached to a clip, and it gave me an error: "item.layer is undefined." I think it expects a View.Selection type object but is given a View.Clip type object.

You also might have to recompile the wickengine.js file for the function to work while the project is running. I haven’t cloned the alpha editor locally before so I’m not an expert on whether you need to do that or how :man_shrugging:

2 Likes
#7

That looks really promising. Will test it tomorrow after work.

Edit: Did a quick test before work. Can’t compile – No gulpfile found even if I install gulp again and again. Will poke at it after work more.

Edit2: @kryptot7 did you have to recompile it before testing it? I am kinda lost, as I haven’t really built anything with js before, but will try poking at it, see if I can solve it :P

1 Like
#8

What I did was:

  1. run npm install in the wick-editor folder
  2. go to the /engine/ subfolder and install gulp and jsdoc
  3. run npm install again

I didn’t try building the engine with gulp yet. That produces the big file /dist/wickengine.js, but the repository already comes with one by default. I think the way it works is, gulp takes the stuff inside the /engine/ folder and compresses it into one file so it’s faster to run. You rebuild the file when you change something.

But I’ve only made changes to the src/Editor/ folder so far, so I don’t have to rebuild the wickengine.js file because nothing in the /engine/ folder has changed. When I start making changes to /engine/ later, I’ll try rebuilding it.

1 Like
#9

Yep, installing inside /engine/ was the part I was missing.

Still, can’t call it. It is either undefined when called as bringToFront(), and giving me the layer error you mentioned before when just calling paper.OrderingUtils.bringToFront([this.view]);

No worries tho, I will work on some other stuff and hope this will get implemented in the future. I am rethinking this game for NG jam anyway. The more I think about it, the less Flashback-y it gets :stuck_out_tongue: I might come up with some other idea or sit that jam out.

#10

Hey all,

Thanks for working through stuff even though there isn’t a ton of documentation on how to contribute yet! @Luxapodular and I are working on some stuff that should make development on the editor much smoother.

As for reordering objects at runtime, it’s kind of tricky as ordering is determined by the objects places in the _children array in Wick.Base which cannot be directly modified. I may need to add some helper functions for moving objects in there, then those could be used to create API functions for moving Clips around.

3 Likes