(Almost) Everything About Wick Editor

I felt like making a giant post thingy that has as much information as possible, so… here’s basically everything you need to know about Wick Editor and the Wick Editor Forums. Yes, I was that bored.

I started making this post on 9/24 or 9/25, I can’t even remember (today is 9/26). What am I doing help me please.

SUGGESTIONS ARE WELCOME!!! I don’t know absolutely everything, especially for “Forum Discoveries.” I’m probably leaving out some other important information somewhere.

Did I do this to procrastinate on other things? Yeah pretty much. Is this pointless? Maybe. Will anyone care? I have no clue. Will this get buried in all the other posts and never see the light of day after a solid 2 days? … Hopefully not?

(If you see a TODO somewhere, ignore it, I’m just not completely done yet)


Wick Editor

This doesn’t contain absolutely everything about Wick Editor. The basic basics (for example, how to draw, create frames, and tween) are at https://www.wickeditor.com/#/learn/. This is for the (marginally) more interesting, more important, and lesser known things.

General

This has a lot of necessary information, along with some not-as-important things.

Tools

Brush vs Pencil

The brush and pencil, on the surface, are pretty similar. However, there are a few differences. Visual representations are below.

  1. The brush is a filled shape, but the pencil is an individual line. It creates an interesting effect in which when you erase. The brush is fully erased, as you would expect. However, the line, when it is thick enough, sort of refills itself with its own border thickness. (See the first image)
  2. The brush has way more options, like pressure (when using a pen tablet). (See the second image)
  3. Since the brush is filled, there is both a fill and border color, and they work how you’d expect them to work. The pencil is a single path, so the fill color actually fills the space between the start and end of the stroke. (See the third image)

Generally, the brush is more useful than the pencil (in my opinion).

Screen Shot 2021-09-26 at 9.57.14 AM

Another thing to note is that “Brush Modes” has 3 modes. The first one is what you’d expect. The second mode takes the brush path and only keeps the part of the path that is touching other paths. The third mode is the exact opposite of the second. These options generally aren’t super useful, so you probably don’t have to worry about them.

Rectangle and Ellipse

Hold SHIFT to make a perfect square or circle.

Line

There is no keyboard shortcut to making perfect lines, but there is still a way to make lines perfectly straight. Go here to see me talk about making perfect lines.

Path Cursor

You can use this to change the paths of any object that’s… well… a path. That includes rectangles, ellipses, and lines. The method of path-changing is kind of frustrating (you have to drag the curves and lines around). But if you double-click, you get the handles of each node, and now it’s a lot easier to edit them. See below for what the handles look like.

In the “new” version of path editing, double-click to add a node, and right-click a node to delete it. You will get the right-click menu when you delete it, so just ignore it. Double-click a node to turn it from a smooth curve to a corner, and vice versa. Drag the nodes and handles to change the path the “old” way.

Text

Selecting the text and making it bigger is synonymous with increasing the font size.

Text actually has border color. It isn’t useful in most situations though.

Editing

Selecting

Select something to use the inspector. Hold shift to select more things or deselect things. Click and drag to select everything within the rectangular selection. Press CMD A or CTRL A to select everything in the frame.

Positioning/Resizing/Rotating

When the object(s) is/are selected:

  • Drag the middle to position the object.
  • Drag the circles on the corners and sides of the selection to resize.
    • Hold SHIFT to maintain aspect ratio when resizing.
  • Drag the light blue areas around the corners of the selection to rotate.

A more precise way to position/resize/rotate is to change the width and height in the inspector. You can get the exact numbers you want.

If there is a border, the border doesn’t resize along with everything else. For example, a circle with border width 10, when made 2 times wider and higher, still has a border width of 10, not 20. If you want the border to resize along with everything else, you can turn the shape into a clip, and then do the resizing.

Canvas Actions

I will only talk about the 3 rightmost options because the rest should be pretty self-explanatory.

Unite, subtract, and intersect only work on filled paths (brush, rectangle, ellipse). Below is where to find the options.

Unite combines 2 or more filled paths into a single path.

Subtract takes 2 filled paths and subtracts the one higher on the Z-axis from the one lower on the Z-axis. By that, it means if you create rectangle A first and rectangle B second, then subtract them, you are left with the subtracted version of rectangle A. (You are also left with the full version of rectangle B. You have to move the 2 rectangles away from each other to see the output.)

Intersect takes 2 filled paths and outputs only what intersects.

Code

Wick uses JavaScript for code. You can add scripts to frames, clips, or buttons.

The “Unload” script does not work as of now, so don’t use it.

TODO: naming clips, using/calling clips in code, this, subclips?, etc

Versions

These are the main 2.

For the most part, don’t worry about these.

Forum Discoveries

This goes over what the community has found, made, and/or discovered. You can use these in your own Wick Editor projects.

These aren’t really sorted, I don’t know how to sort them.

View

Wick Editor Forums

This is less about Wick itself and more about the community.

Rules/Guidelines

Official

Official rules: Wick Editor Forum Rules

Sharing and remixing projects: Sharing Projects on the Forum

What the #show-your-work:collabs category is for, and what the rules are: About the Collabs category

Unofficial

Hamzah_Al_Ani’s explanation all the official rules: MAJOR RULES explained, or simply restated in one post

My PSA/rant about the 10-character post limit: Bit of a PSA about the minimum character limit and filler phrases

Posting

Formatting

If you want to format your posts nicely, here is a list of stuff that can help. This list is roughly grouped by similarity.

Please don’t use the replies just to “test” these, that would be spam.


To make something bold, use 2 asterisks (SHIIFT8) on either side of the text you want to bold.

To make something italic, use 1 asterisk on either side of the text you want to italicize.

To make something both bold and italic, use 3 asterisks on either side of the text you want
to bold and italicize.

To make strikethrough, use the HTML tag <strike></strike>.


  • To make a bulleted list, use a dash and space, then type whatever you want in the bullet. (It looks like - this.)
    • To make sub-bullets, add 2, 3, or 4 spaces in front of a bullet. 4 looks cleaner though.
      • You can keep making sub-bullets if you keep using 8, 12, 16, and so on (or the multiple of 2 or 3)
        • The number of spaces you use should be consistent. It doesn’t have to be, but it will look super ugly in the post editor.
  • You
  • can
    • now
      • go
  • crazy
    • with
    • bulleted
  • lists
  1. To make a numbered list, just type 1. and type stuff after it. For example, 1. like this.
  2. Keep going with your numbers as you expand the list.
    • You can make sub-bullets for numbered lists if you want.

To hide details, click the gear in the post editor (shown below), click “Hide Details,” and it will create it for you.

Others will click this...

… and see what’s inside.


To make polls for other users to answer, click the gear (shown above), click “Build Poll,” and create your poll there.


To shorten links, use [shortened name](link). This link goes to Google.


To make monospace text, use the grave accent (`) on either side of the target text. Alternatively, you can put 4 spaces in front of the line you want to look like code.

Monospace text is not formatted in any other way

To make code, use 3 grave accents on the lines above and below the code.

var a = 0;
if(a < 5) {
    print("Code blocks are formatted to look like code");
}

To make text look like a keyboard key, use the HTML tag <kbd></kbd>.


To make headings, use #. You can go up to heading 6 by using 6 hashtags in a row.

Heading 1 (#)

Heading 2 (##)

Heading 6 (######)

To make small text, use the HTML tag <small></small>.

To make big text, use the HTML tag <big></big>.


To highlight text green, use the HTML tag <ins></ins>.

To highlight text red, use the HTML tag <del></del>.


Ok bye, please tell me if I’m missing anything, including important information and other cool stuff.

11 Likes

Very Interesting information!
I learned a few things I didn’t know like, you can make perfect square and circles by holding shift.

image

Thank you for sharing :+1:

1 Like

very useful

1 Like

Wow, this is very useful :0

I’m glad I’m not the only one who enjoys making posts this long ;)

I remember it was in the Wicky Adventures thread


But the link you shared seems to be better as it explains the code more

Thanks though for taking the time to write make this thread, I would definitely recommend it to all new Wick users :)

3 Likes

Thanks, A lot of info I’ve been searching for. Great reference information so I copied the hyperlink to my notebook. Really appreciated.