Skip to content

Frame size slider - #201

Open
Alani25 wants to merge 9 commits into
developmentfrom
frame-size-slider
Open

Frame size slider#201
Alani25 wants to merge 9 commits into
developmentfrom
frame-size-slider

Conversation

@Alani25

@Alani25 Alani25 commented Aug 23, 2026

Copy link
Copy Markdown
Member

Added setting option for frame size to allow users to minimize the frame size smaller than the current, smallest limit.
Smaller frame size options have been requested multiple times on Discord by ~2 users.

The setting option is a slider.
This increases customizability to make the timeline feel closer to what may be more comfortable working with.

@StickmanRed

Copy link
Copy Markdown
Collaborator

Awesome changes! The new frame size setting works and saves after reloading the project.

Minor UI suggestion: when the frame width goes below a certain threshold, maybe the intermediate gray numbers could be hidden to reduce clutter
image
The size of the playhead handle and contentful frame circle thing don't interpolate as smoothly

frame.size.slider.mp4

Also the orange frame scripts indicator overflows on extra-small frame sizes, but imo it doesn't matter as much

Comment thread engine/src/gui/Frame.js Outdated
Comment thread src/Editor/Modals/SettingsModal/EditorSettings/EditorSettings.jsx Outdated
@InternetAstronaut

Copy link
Copy Markdown

Hey I got a question, I never really understood the GUIElement system in Wick, would it be possible to somehow make it available in a simpler manner for game creators on Wick?

@Alani25

Alani25 commented Aug 23, 2026

Copy link
Copy Markdown
Member Author

Hey I got a question, I never really understood the GUIElement system in Wick, would it be possible to somehow make it available in a simpler manner for game creators on Wick?

@InternetAstronaut
GUIElement is more of an internal system for rendering the timeline editor itself (the frames, playhead, layers panel, etc)
The game runs in its own canvas element separately. We can possibly give the user more access to that

@Alani25

Alani25 commented Aug 23, 2026

Copy link
Copy Markdown
Member Author

@StickmanRed I went for more of an interpolating approach in terms of the sizing, but I did also fix the mismatch issue you brought up.

Screen.Recording.2026-08-23.at.11.45.12.AM.mov

(The suggestion to hide the gray text actually made a huge difference)

@InternetAstronaut

Copy link
Copy Markdown

Hey I got a question, I never really understood the GUIElement system in Wick, would it be possible to somehow make it available in a simpler manner for game creators on Wick?

@InternetAstronaut GUIElement is more of an internal system for rendering the timeline editor itself (the frames, playhead, layers panel, etc) The game runs in its own canvas element separately. We can possibly give the user more access to that

Huh, well that's weird since all Wick.Base objects contain a View and a GUIElement.

@StickmanRed StickmanRed left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving frames at a compact frame size is much easier with the _mouseOverFrameEdge changes as well! Overall looks good to me

I did notice the onion skin range acts out in the smaller frame sizes, maybe the playhead margin here could get eased out to 0

@StickmanRed

StickmanRed commented Aug 24, 2026

Copy link
Copy Markdown
Collaborator

Yeah, it definitely looks better
image image

// In OnionSkinRange.js:
var margin = Wick.GUIElement.PLAYHEAD_MARGIN * 2;
if (this.gridCellWidth < Wick.GUIElement.GRID_SMALL_CELL_WIDTH)
    margin *= (this.gridCellWidth - 8) / (Wick.GUIElement.GRID_SMALL_CELL_WIDTH - 8);
var edgeWidth = this.gridCellWidth - margin;

OnionSkinRange.js just needs something along these lines, to interpolate margin to 0

@BaronAWC

Copy link
Copy Markdown
Collaborator

Looks good so far! I have a couple suggestions though:

  1. Maybe it's just me, but I think the frame dot should still be shown if there is content in the frame. This is mainly to add some more visual distinction between filled and empty frames.
    a. Something to be careful of, though, is that if a frame is named, the name text and the frame dot will overlap. Not sure what is the smoothest way to fix it. The text needs to show on top for sure, and maybe there's a way to improve the contrast, or we get rid of the dot if there is text.
  2. if a frame is too narrow (e.g. <= 16 or 20 pixels wide) and is not currently selected, stretching/shrinking the frame should be disabled, only leaving the ability to select it (duh) and drag it around. the click targets are so small that it's kinda hard to select what you want.
  3. The orange code indicator is not currently being resized. It should be set to the same size as the frame bubble.
  4. The layers have bad padding. I'm not sure what the best way to deal with it is, but there are a few options:
    a. reduce the margin between layers themselves
    b. don't let the layers/frames get that thin
    c. shrink the buttons and text
    image
  5. I think in video editors, you can use a keyboard shortcut to change the size of frames? I forget how it is in DaVinci Resolve, but since normal scroll is for up/down and shift+scroll is for left/right, we can use either alt+scroll or meta+scroll to change the size of frames.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants