I am working on a project in Wick Editor and I’m trying to find out if it’s possible to add frames and insert default scripts into these frames programmatically. I want to automate part of my animation/interactive project creation process by scripting the addition of new frames, each with a predefined script.
Is there a function in the Wick Editor root JavaScript files that can be utilised to add the frame and open the script editor at the frames default. I can paste the rest using a script in my JS.
I’ve tried:
// Create a new instance of Wick.Frame
var newFrame = new Wick.Frame();
this.addFrame(newFrame);
This should do it but it does nothing.
//////////////////////////////////////////////////////////////////////////////////////
// Gets the active layer
var currentLayer = this.activeLayer;
This works but… It doesn’t stay when I pause the project.
///////////////////////////////////////////////////////////////////////////////////////////
//Create a new layer
var newLayer = new Wick.Layer();
this.timeline.addLayer(newLayer);
//Create a new frame
var newFrame = new Wick.Frame();
I had downloaded the WickEngine.js and had been testing the functions that I see. My aim is to try and build plugin assets that people can use. I’ve done similar stuff for eLearning development software in the past. The user can just drag and drop the asset and as with your great tool for creating the fly particles. They should be able to use these to add functionality to their builds. That asset that I got to write the path to js libraries is just the start. I think its also possible to create tools that add functionality by generating a text file that can be downloaded so that the user can copy and paste the content into the wick script editor and Viola they have some working code.
Yeah, but you could also do a fork and work a new editor. The development of this editor ended…
I worked in a custom editor in the past… but I lost the motivation due to performance issues… (a combination of paper.js and other things that makes this editor to perform bad) https://forum.wickeditor.com/t/custom-wick-editor
I’m currently working (from scratch) in a Game Engine inspired by Wick Editor and other engines. The performance seems to be a lot better.
I’ve found a whole bunch of code that allows me to bounce around the interface using the hotkeys.js. This is a bit of a work around until I can nail where and what to call and edit. This code works up to a point and then I get lost trying to find where to inject the html values. If you know where to aim I’d be happy for the help.
First of all, welcome to the forums @lukeo25! I’m sure you’ve been here for a while by now but I didn’t get the chance to welcome you yet. I’ve read most of the other posts you made here though, all good stuff
I’ve played a lot with timeline code for most animating tools I’ve tried to create with Wick before, so I can help out here as well.
To begin with, here’s how you’d refer to the project’s timeline.
project.timeline
From there, you can get an array of layers inside the timeline, and go into the frames inside a specific layer, and even go into the specific child objects inside that frame, and etc. For example, the code below gives you the first frame in the third layer (if a third layer exists).
project.timeline.layers[2].frames[0]
The frame’s “start” and “end” refers to where on the timeline that a frame starts and ends. You can alter these variables to extend a frame, even move a frame around too. The code below extends the frame by increasing its end.
project.timeline.layers[2].frames[0].end++;
You can also change project with the name of a clip to get that clip’s timeline instead.
You’re kind of on the right track with your code, however, you want to add the new frame to an actual layer.
I’m guessing this line is the issue, “this” probably isn’t a layer.
replace this with an actual layer:
var newFrame = project.timeline.layers[0].addFrame(new Wick.Frame({
start: project.currentFrameNumber+1
}));
This code will add a frame in the first layer (top layer) of the project’s timeline, and that frame will start at the current frame number plus 1. You can also define where the frame ends
var newFrame = project.timeline.layers[0].addFrame(new Wick.Frame({
start: project.currentFrameNumber+1,
end: project.currentFrameNumber+2
}));
By default, the start and end are the same, making a frame that’s one frame long. In the example above, where I changed the end, the length of that frame should be 2 frames long.
Also keep in mind that the first frame doesn’t start at 0, it starts at 1, the start and end numbers match with the timeline.
I’ve read through the Wick engine before (back when I had the time to scan through thousands of lines of code without getting bored lol). This code isn’t wrong here, but “this” represents different things based on where it’s used. In this case, “this” refers to the project. project.activeLayer will get you the current layer. You were on the right track, you had the right code and all, but you just needed to replace this with project and it would’ve worked, you were sooo close!
I’m guessing you placed the code inside of a frame, in this case this reffered to the frame, and this.timeline gave you the frame’s timeline, so you were successful in adding a new layer to it, and adding a new frame inside that new layer as well.
However, it reset after you paused the project, which is to be expected. If you want the timeline to remain the same even before you pause it, then I have a trick for that as well! Wick editor keeps track of the project’s default data to reset it after testing is complete, returning the timeline to its original state. I also picked this up from reading through the wick engine couple years ago, I present to you: project.timeline._cachedSerializeData
Check out this post I wrote to learn more about it, you might find an example file there as well.
The cached serialized data saves UUID code (Universally Unique ID) for objects that the project wants to keep after reseting.
For example, this code
project.timeline._cachedSerializeData.children
will give you an array of all the UUID values for the timeline’s “children,” the layers, that were in the project when you started. The code below
should give you the saved data for the first layer’s frame. If you have 4 frames in the first layer before you played the project, you should get an array of 4 UUID codes with this.
See where I’m going with this? If you add the UUID code for the newly created frame inside of the cached serialized data thing, then the editor wouldn’t remove the new frame… you’d be editing the project while playing it
The new frame that you add is going to be at the end of this array of frames for the first layer
project.timeline.layers[0].frames
To get it’s index, simply take the length of this array and subtract 1, then get that frame’s UUID code from there.
var l1 = project.timeline.layers[0].frames; // set variable to first layer's frames
l1[l1.length-1].uuid // this is it
So
// create a new frame in layer 0
project.timeline.layers[0].addFrame(new Wick.Frame({
start: 5
}));
// get all frames inside layer 0
var l1 = project.timeline.layers[0].frames;
uuidCode = l1[l1.length-1].uuid; // get uuid code for the last frame added to that layer
// add its code to the saved data
project.timeline.layers[0]._cachedSerializeData.children.push(uuidCode);
Keep in mind to save often, I ended up bugging the editor out a few times while testing
Take note, the reason my editor bugged out is because the new frame that I created was created in a place where another frame had already existed, so the editor tried to reset both frames after the project paused and glitched out!! In another attempt where I created the frame in an empty spot, the editor didn’t glitch.
If you’re adding objects to a frame, pushing their UUID code like in the last step would be the right move, however, in this case creating a new frame could totally erase another one, that’s why it’s better to get the UUID code of all frames inside of a layer, and set the layers cached data to that. In other words, instead of adding the last added frame to the data we are redefining it from the beginning.
stop();
// create a new frame in layer 0
project.timeline.layers[0].addFrame(new Wick.Frame({
start: 5
}));
// get all frames inside layer 0
var l1 = project.timeline.layers[0].frames;
// create an array for all frames' UUID codes
arrayUUID = [];
l1.map(function(f){arrayUUID.push(f.uuid)});
// set saved data to all frames' UUID codes
project.timeline.layers[0]._cachedSerializeData.children = arrayUUID;
Here’s an example file creating frames and keeping them .wick (6.6 KB)
Keep in mind that once you play the example file, the frames will change, then after you play it the second time nothing will change since the editor will keep all the frames the same after you pause.
This example will create a new frame that starts at 5, removing the one that’s already there.
When you click play, focus on frame 5 and see how the new frame created there removes the last one, then pause and the frame will still be there.
Sorry for the super long response, I tried explain the full process and all, though I’m sure I added in a buncha useless info here. I didn’t bother checking for typos and stuff but I made sure to make this a wiki so anyone can edit it if they see any typos or areas that might need a bit more clarification.
@Hamzah_Al_Ani Thanks so much, This is going to help a great deal!
I work as an eLearning developer and learning architect, making educational games. The team I work with at the moment is looking for alternatives to an article builder that squeezes out HTML but is very limited. My Wick knowledge only harks back a month or two so its very early days for me. I thought Wick Editor would make a great tool for them to pump out simple quiz like content, and later more complicated content. My aim at the moment though is to develop (widgets/assets/tools) that, with a simple asset load, add functionality that auto-builds templates based on their choices in the tools interface. I knew about the “this.clip” etc… from my days coding in actionscript (RIP). The syntax looks familiar in Wick so hopefully I will get something working the way I hope soon.
