Skip to main content

Working with Layers

Layers are the building blocks of your theme. Everything you add - images, text, shapes, video - exists on its own layer. Understanding how layers work is crucial for building organized, maintainable themes.

What Are Layers?​

Think of layers like transparent sheets of paper stacked on top of each other:

  • Each sheet has one element
  • You can see through transparent areas
  • The order matters (top sheet covers bottom sheets)
  • You can rearrange the stack

In HyperTheme, every visual element is its own layer.

The Layers Tab​

Find it in the left panel. This is your layer management HQ.

Reading the Layer List​

📄 Logo                    [👁️] [X]
📁 Wheel Items             [👁️] [X]
  📄 Wheel_Item_3          [👁️] [X]
  📄 Wheel_Item_2          [👁️] [X]
  📄 Wheel_Item_1          [👁️] [X]
📄 Background              [👁️] [X]

Understanding the hierarchy:

  • Top = Front: Logo appears in front of everything
  • Bottom = Back: Background appears behind everything
  • Indented = Nested: Wheel items are inside a group
  • Icons: Eye (visibility), X (delete)

Layer Basics​

Creating Layers​

Four ways to add layers:

  1. Drag from Library

    • Upload assets first
    • Drag onto canvas
    • Instant new layer

  2. Quick-add toolbar (bottom of screen)

    • Text, shapes, sprites, etc.
    • Click icon, layer created

  3. Import from PSD

    • File → Import from PSD
    • Preserves layer structure
    • Each PSD layer becomes a HyperTheme layer

  4. Duplicate existing (Ctrl+C, Ctrl+V)

    • Copy layer
    • Paste creates duplicate
    • Inherits all properties and animations

Selecting Layers​

Three selection methods:

  1. Click in Layers tab

    • Always works
    • Most reliable
    • Best for layers hidden behind others

  2. Click on canvas

    • Direct manipulation
    • What you see is what you select
    • Can be tricky with overlapping layers

  3. Use Properties to navigate

    • Properties panel shows selected layer name
    • Click to change selection

Multi-select:

  • Ctrl+Click to add to selection
  • Shift+Click to select range
  • Selected layers highlighted in Layers tab

Naming Layers​

DO THIS IMMEDIATELY! Future you will thank present you.

How to rename:

  1. Double-click layer name in Layers tab
  2. Type new name
  3. Press Enter

Good naming:

✅ Logo_Animated
✅ BG_Stars_Slow
✅ Wheel_Item_Center
✅ UI_Button_Start
✅ Text_GameTitle

Bad naming:

❌ Layer 1
❌ Rectangle 14
❌ Image
❌ asdfasdf
❌ final final FINAL v3

Naming conventions that work:

By function:

  • "Logo", "Background", "Overlay"

By location:

  • "Top_Banner", "Bottom_Footer", "Left_Panel"

By category:

  • "UI_Button_A", "UI_Button_B"
  • "Effect_Particle_1", "Effect_Particle_2"

By state:

  • "Selected_Frame", "Hover_Highlight"

Use underscores or dashes, not spaces!

Deleting Layers​

Three ways:

  1. Delete key (layer selected)
  2. Click X in Layers tab
  3. Right-click → Delete (if context menu available)

Can't delete by accident:

  • Ctrl+Z to undo
  • No confirmation dialog (fast workflow)

Deleted layers:

  • Removes layer and ALL animations
  • Can't get back after saving (except undo)
  • Make sure before deleting!

Layer Organization​

Stacking Order (Z-Index)​

The golden rule: Top of list = Front of scene

Changing order:

  1. Drag layers in Layers tab
  2. Drag up = move forward
  3. Drag down = move backward

Common layer order (top to bottom):

UI Elements (front-most)
Foreground Objects
Main Content
Midground Elements
Background Elements
Base Background (back-most)

Why order matters:

  • Determines what's in front
  • Affects clicking (top layers block bottom layers)
  • Creates depth perception

Pro tip: If you can't select a layer on canvas, it might be behind something else!

Groups​

Groups help organize related layers into collapsible sections. But they're more than just folders—groups can be transformed, animated, and configured just like individual layers!

Creating a group:

  1. Select layers you want to group
  2. Click "Group" button
  3. Group appears in Layers tab
  4. Rename the group (double-click name)

Group benefits:

  • Organization: Related items together
  • Collapse/Expand: Cleaner workspace
  • Move together: Drag group moves all layers in it
  • Transform together: Scale, rotate, position the entire group
  • Animate together: Apply animations to the whole group
  • Bulk operations: Select group, affect all

When to use groups:

By type:

📁 Backgrounds
📁 Main Content
📁 UI Elements

By feature:

📁 Intro Sequence
📁 Wheel Display
📁 Metadata Panel

By state:

📁 Selected State
📁 Unselected State

Group nesting: You can put groups inside groups!

📁 Main UI
  📁 Buttons
    📄 Button_Start
    📄 Button_Options
  📁 Text
    📄 Title
    📄 Subtitle

Don't over-group: If you only have 2-3 layers, grouping might be overkill.

Group Pivot Settings​

Groups have their own pivot/anchor point!

The pivot determines:

  • Where the group rotates around
  • The point for scaling transformations
  • The reference point for positioning

Finding pivot settings:

  1. Select a group
  2. Open Properties panel (right side)
  3. Look for Anchor Point settings
  4. Adjust pivot position

Pivot positions available:

Center (default):

  • X: 0.5, Y: 0.5
  • Group rotates around its center
  • Most common setting
  • Balanced transformations

Top Center:

  • X: 0.5, Y: 0.0
  • Group rotates from top
  • Perfect for pendulum/swing effects
  • Like hanging from a string!

Bottom Center:

  • X: 0.5, Y: 1.0
  • Group rotates from bottom
  • Ground-based rotations
  • Like a pivot at the base

Left Center:

  • X: 0.0, Y: 0.5
  • Group rotates from left side
  • Door opening effects
  • Hinged from left

Right Center:

  • X: 1.0, Y: 0.5
  • Group rotates from right side
  • Door opening from right
  • Hinged from right

Corners:

  • Top-Left: X: 0.0, Y: 0.0
  • Top-Right: X: 1.0, Y: 0.0
  • Bottom-Left: X: 0.0, Y: 1.0
  • Bottom-Right: X: 1.0, Y: 1.0
  • Diagonal rotation effects

Custom positions:

  • Any value between 0.0 and 1.0
  • Fine-tuned pivot placement
  • Advanced control

Why pivot matters for groups:

Example: Swing animation

Without pivot adjustment:
📁 Sign Group (pivot: center)
  Rotate animation → Spins in place

With pivot adjustment:
📁 Sign Group (pivot: top center [0.5, 0])
  Rotate animation → Swings like hanging sign! ✨

Example: Door opening

📁 Door Group (pivot: left [0, 0.5])
  Rotate Y animation → Opens like hinged door

Example: Scaling from corner

📁 UI Panel (pivot: bottom-right [1, 1])
  Scale animation → Grows from corner

Practical group pivot workflow:

  1. Create group of related layers
  2. Plan the animation you want
  3. Set pivot based on desired rotation/scale point
  4. Apply animations to the group
  5. Preview to verify (Spacebar)
  6. Adjust pivot if needed

Common use cases:

Pendulum/Swing effects:

  • Pivot: Top center [0.5, 0]
  • Animation: Rotate
  • Result: Swings from top like hanging object

Door/Panel reveals:

  • Pivot: Left or right edge
  • Animation: Rotate or scale
  • Result: Opens like hinged door

Grow from corner:

  • Pivot: Any corner
  • Animation: Scale up
  • Result: Expands from that corner

Spin in place:

  • Pivot: Center [0.5, 0.5]
  • Animation: Rotate
  • Result: Spins around center

Visual pivot indicator:

When group is selected, you'll see a yellow circle/handle indicating the pivot point. This can be dragged to adjust the pivot visually!

Or use Properties panel for precise numeric control.

Pro tips for group pivots:

Experiment freely:

  • Change pivot, preview, adjust
  • Undo works if you don't like it
  • Try different pivot points to see effects

Copy pivot settings:

  • If you have multiple groups with same animation style
  • Note the pivot values
  • Apply to other groups

Aspect ratio awareness:

  • Pivot settings are per-aspect-ratio
  • Can have different pivots for 16:9 vs 4:3
  • Advanced feature for multi-aspect-ratio themes

Animation types that use pivot:

  • Rotate (most obvious)
  • Scale (origin point matters)
  • Swing preset (needs top pivot)
  • Any rotation-based effect

Visibility Toggle​

The eye icon controls layer visibility.

Open eye = Visible Closed eye = Hidden

Uses for hiding layers:

Reduce clutter while editing:

  • Hide background to focus on foreground
  • Hide completed elements while working on new ones

Compare versions:

  • Create two versions of a layer
  • Toggle between them to compare

Disable without deleting:

  • Keep layer for later
  • Test theme without specific elements

Important: Hidden layers DON'T export! Use for editing only.

Advanced Layer Techniques​

Layer Duplication​

Fast way to create variations:

  1. Select layer
  2. Ctrl+C (copy)
  3. Ctrl+V (paste)
  4. Duplicate appears on top of original
  5. Move and modify

Duplicates include:

  • All properties (position, scale, etc.)
  • All animations
  • All effects

Use cases:

  • Create repeated elements (stars, particles)
  • Make variations (different colors, sizes)
  • A/B testing (try two versions)

Pro workflow:

  1. Perfect one element
  2. Duplicate it
  3. Adjust variations
  4. Way faster than starting from scratch!

Layer Locking (Mental Note)​

HyperTheme doesn't have layer locking (yet), but you can work around it:

To "lock" a layer:

  1. Name it clearly: "FINAL_Background_DONT_TOUCH"
  2. Put it in a group: "Locked Elements"
  3. Collapse the group
  4. Just... don't touch it!

Self-discipline is the lock!

Layer Hierarchy Best Practices​

Flat is usually fine:

📄 Logo
📄 Background
📄 Item1
📄 Item2

Group when it helps:

📄 Logo
📁 Wheel (collapsed)
📄 Background

Don't over-organize:

❌ This is too much:
📁 Elements
  📁 Foreground
    📁 UI
      📁 Buttons
        📁 Primary Buttons
          📄 Button_Start

Find the balance between chaos and over-engineering.

Layer Properties​

Each layer has properties that control its appearance and behavior.

Transform Properties​

Position (X, Y):

  • X: Horizontal position (left/right)
  • Y: Vertical position (up/down)
  • Measured in pixels from top-left corner

Scale (Width, Height):

  • Width: Horizontal size
  • Height: Vertical size
  • Uniform scaling option (maintain aspect ratio)
  • Scale: 1 = 100%, 2 = 200%, 0.5 = 50%

Rotation:

  • Degrees of rotation
  • 0-360 (or negative values)
  • Rotates around anchor point

Anchor Point:

  • The pivot point for rotation and scaling
  • Default: center
  • Can be moved to corners, edges, or anywhere
  • Important for specific animation effects!

Opacity:

  • Transparency level
  • 0 = invisible, 1 = fully visible
  • 0.5 = 50% transparent

Visual Properties​

Tint:

  • Color overlay
  • Affects entire layer
  • Useful for color variations

Blend Mode:

  • How layer blends with layers below
  • Normal, Add, Multiply, Screen, etc.
  • Creates special effects

Visible:

  • Same as eye icon in Layers tab
  • Checkbox to show/hide

Advanced Properties​

Projection Points:

  • Perspective distortion
  • Create 3D-like effects
  • Advanced feature - be careful!

Tiling (for sprites):

  • Repeat texture
  • Horizontal and/or vertical
  • Useful for backgrounds

Layer Workflow Tips​

The Setup Phase​

Before animating:

  1. Add all layers
  2. Name them all
  3. Organize with groups if needed
  4. Set base positions
  5. Check stacking order

THEN animate.

Why? Easier to see overall composition, make fewer changes later.

The Iteration Phase​

Common adjustments:

  • Reorder layers (drag in Layers tab)
  • Rename for clarity
  • Group related elements
  • Hide unused layers
  • Delete failed experiments

Preview often! Press Spacebar constantly to see how changes look.

The Polish Phase​

Final layer checklist:

  • All layers named descriptively
  • Logical stacking order
  • Groups used where helpful
  • No hidden layers you forgot about
  • No unused/junk layers
  • Clean, understandable hierarchy

Common Layer Problems​

"I can't find my layer!"​

Checklist:

  1. Is it hidden? (eye icon)
  2. Is it off-canvas? (Ctrl+0 to fit screen)
  3. Is it behind other layers? (check order)
  4. Is it scaled to 0? (check Properties)
  5. Is opacity 0? (check Properties)

"I can't select it on canvas!"​

Solutions:

  • Select from Layers tab instead
  • Hide layers on top of it temporarily
  • Zoom in (might be too small to click)
  • Press Alt+H to hide handles if they're in the way

"Layers are in wrong order!"​

Fix:

  • Drag in Layers tab to reorder
  • Remember: Top = Front
  • Group similar layers together

"My layer keeps resetting!"​

Possible causes:

  • Animation is changing it back
  • Check timeline for unwanted animations
  • Delete animations if they're causing issues

"Too many layers, total chaos!"​

Solutions:

  1. Use groups aggressively
  2. Delete layers you're not using
  3. Hide completed sections while working
  4. Rename everything clearly
  5. Take breaks to reorganize

Layer Naming Patterns​

System for complex themes:

[Type]_[Description]_[State]

Examples:
BG_Stars_Slow
UI_Button_Start_Hover
FX_Particle_01
Text_GameTitle_Selected

Benefits:

  • Alphabetical sorting groups similar items
  • Clear purpose at a glance
  • Easy to find specific layers

Working with Many Layers​

Themes can grow to 50+ layers!

Staying organized:

  1. Group early and often

    • Don't wait until you have 40 layers
    • Group as you build

  2. Collapse completed sections

    • Expand only what you're working on
    • Less visual clutter

  3. Consistent naming

    • Stick to a pattern
    • Makes scanning faster

  4. Delete ruthlessly

    • Tried something? Didn't work? Delete it!
    • Don't hoard layers "just in case"

  5. Use search (if available)

    • Quick way to find specific layer
    • Better than scrolling

Layer Types Reference​

Different layer types available in HyperTheme:

Standard layers:

  • Image (PNG, JPG, etc.)
  • Shape (rectangle, circle, etc.)
  • Text (static text)
  • Group (organizational)

Special layers:

  • Scrollable Text (auto-scrolling)
  • Sprite Sheet (animated sprites)
  • Flip Book (frame animation)
  • Video (MP4, etc.)
  • Audio (background music)
  • Metadata Image (dynamic game art)
  • Metadata Text (dynamic game info)

Each type has unique properties and capabilities. See Special Layer Types for details.

Next Steps​

Now that you understand layers:

Pro Tip: Spend 30 seconds organizing your layers NOW, or spend 30 minutes being confused LATER. The choice is yours! 📂