Special Layer Types

Beyond basic images, HyperTheme supports several special layer types that add unique functionality to your themes. Let's explore each one and when to use them!

Layer Type Overview

Standard layers:

Image (PNG, JPG, etc.)
Shape (rectangles, circles)

Special layers:

Text
Scrollable Text
Video
Sprite Sheet
Flip Book
Audio
Metadata (covered in Metadata Guide)

Each has unique properties and use cases. Let's dive in!

Text Layers

The most common special layer. Add labels, titles, and information to your themes.

Adding Text

Quick add:

Click T icon in bottom toolbar
Text element appears on canvas
Default text: "Text"

Via menu:

Add → Text (if menu option available)

Editing Text Content

Double-click the text on canvas:

Text becomes editable
Type your content
Click outside or press Esc when done

Or use Properties (right panel):

Find "Text" or "Content" field
Type directly there
Updates in real-time

Text Properties

Typography:

Font - Choose from available fonts
Size - Font size in pixels
Color - Text color
Bold - Weight emphasis
Italic - Slanted style
Underline - Underlined text

Layout:

Alignment - Left, Center, Right, Justify
Line Spacing - Space between lines
Letter Spacing - Space between characters
Word Wrap - Wrap to width (on/off)

Appearance:

Outline - Stroke around letters
- Width (thickness)
- Color
Shadow - Drop shadow
- Offset X/Y
- Blur amount
- Color
Glow - Outer glow effect
- Size
- Color

Dimensions:

Width - Text box width
Height - Text box height
Auto-size - Expand to fit content

Text Best Practices

Readability:

High contrast against background
Appropriate size (test at target resolution)
Avoid thin fonts on busy backgrounds
Use outlines or shadows for legibility

Typography tips:

Titles: Bold, large (48-72px)
Subtitles: Medium (24-36px)
Body text: Regular (16-24px)
Fine print: Small but readable (12-16px minimum)

Font pairing:

Heading: Display/decorative font
Body: Clean, readable font
Don't mix more than 2-3 fonts per theme

Styling for backgrounds:

Light backgrounds:

Dark text
Minimal outline needed

Dark backgrounds:

Light text
Optional subtle glow

Busy/image backgrounds:

Strong outline (2-4px)
Or solid background behind text
Or drop shadow for separation

Animating Text

Text layers can use all animations!

Entrance effects:

Fade in (Opacity)
Slide in (Move X/Y)
Scale up (Scale)
Type-on effect (custom implementation)

Emphasis:

Pulse (Scale + Yoyo)
Glow pulse (animation + glow effect)
Color shifts (Tint)

Avoid:

Constant rotation (hard to read)
Excessive motion (distracting)
Blur on text (unreadable)

Scrollable Text

For long content that needs to scroll vertically.

When to Use Scrollable Text

Perfect for:

Game descriptions (long paragraphs)
Credits
Lengthy information
Content that doesn't fit on screen

Not needed for:

Short text (use regular Text)
Single words/phrases
Titles and labels

Adding Scrollable Text

Click scrollable text icon in bottom toolbar
Scrollable text element appears
Edit content in Properties (right panel)

Scrollable Text Properties

All standard text properties PLUS:

Scrolling:

Auto-scroll - Automatically scrolls (on/off)
Scroll Speed - How fast it scrolls
Scroll Direction - Usually vertical
Loop - Start over when finished
Padding - Space around text inside box

Container:

Width - Scrollable area width
Height - Scrollable area height
Background - Optional background behind text
Mask - Fade out at edges (optional)

Scrollable Text Tips

Speed settings:

Slow (10-20): Readable, calm
Medium (20-40): Standard speed
Fast (40+): Quick scrolling, hard to read

Content length:

Test with actual content length
Make sure full text is included
Account for word wrap

Readability:

Don't scroll too fast
Sufficient line spacing
Clear font choice
High contrast

Video Layers

Add video backgrounds or elements to your themes.

Adding Video

From Library:

Upload video file (MP4 recommended)
Drag from Library to canvas
Video layer created

Quick add:

Look for video icon in toolbar (if available)
Choose video from Library

Video Properties

Playback:

Auto-play - Starts automatically
Loop - Repeats continuously
Volume - Audio level (0-1)
Muted - Silent playback

Display:

Fit Mode - How video scales
- Cover (fills space, may crop)
- Contain (fits inside, maintains aspect)
- Stretch (fills space, may distort)
All standard transform properties (position, scale, etc.)

Performance:

Preload - Load before showing
Quality - Playback quality settings

Video Tips

File optimization:

Compress before uploading
H.264 codec in MP4 container
Reasonable bitrate (3-5 Mbps for 1080p)
Shorter loops = smaller files

Use cases:

Background videos - Atmospheric loops
Gameplay footage - Via metadata VideoUrl or EmuMovies
Transitions - Video wipe effects
Ambient effects - Smoke, fire, rain

EmuMovies Integration

Automatic gameplay video integration!

HyperTheme can fetch gameplay videos directly from EmuMovies for your themes.

What is EmuMovies?

Large database of game videos
Gameplay footage for thousands of games
Trailers, attract modes, snapshots
Integrated with HyperSpin ecosystem

How it works:

Add video layer to theme
Connect to EmuMovies (via metadata VideoUrl field)
Videos auto-fetch based on selected game
Plays in real-time as user browses wheel

Setup process:

Step 1: Add metadata video layer

Use metadata image/video layer
Set field to: VideoUrl
Position and size as needed

Step 2: Configure EmuMovies connection

Background settings reference EmuMovies
System authenticates with your EmuMovies account
No manual video uploads needed!

Step 3: Test with HyperSpin

Videos load automatically per game
Changes as wheel scrolls
Smooth playback

Video playback settings:

Loop: Continuous playback
Muted: Usually muted (background ambience)
Volume: Adjustable if audio enabled
Auto-play: Starts when game selected

Benefits:

✅ No manual video uploads
✅ Automatic updates when EmuMovies adds videos
✅ Consistent video quality
✅ Huge library of content
✅ Works across all games automatically

Requirements:

EmuMovies account (may require subscription)
Internet connection for video streaming
Proper HyperSpin configuration

Fallback behavior:

If video not available: Shows placeholder
If connection fails: Theme continues without video
Graceful degradation

Performance notes:

Videos stream on-demand
Not stored locally (saves space)
Bandwidth usage consideration
May have slight loading delay

Pro tip: Combine EmuMovies video with semi-transparent overlay and metadata text for professional game detail screens!

Performance:

Video is resource-intensive
Limit to one playing video if possible
Test on target hardware
Consider static image alternative

Audio:

Usually mute background videos
Or very low volume
Avoid competing with theme music

Sprite Sheets

Animated sprites using a sprite sheet (multiple frames in one image).

What is a Sprite Sheet?

Single image containing multiple frames:

┌────┬────┬────┬────┐
│ 1  │ 2  │ 3  │ 4  │
├────┼────┼────┼────┤
│ 5  │ 6  │ 7  │ 8  │
└────┴────┴────┴────┘

= 8-frame animation in one image

Benefits:

One file instead of many
Efficient loading
Easy management
Standard for game sprites

Adding Sprite Sheets

Method 1: Image + JSON Data File

Upload sprite sheet PNG to Library
Upload corresponding JSON data file
Click sprite sheet icon in toolbar
Select the sprite sheet image
HyperTheme automatically uses JSON for configuration
Preview plays immediately

Method 2: Manual Configuration

Upload sprite sheet image to Library
Click sprite sheet icon in toolbar
Select the sprite sheet image
Manually configure rows, columns, frames
Adjust frame rate and playback options

JSON Format Support:

Standard sprite sheet JSON formats
Auto-detection of frame dimensions
Frame ordering from JSON data
No manual configuration needed!

Sprite Sheet Properties

Layout:

Columns - Number of frames horizontally
Rows - Number of frames vertically
Total Frames - How many frames to animate
Frame Size - Width and height of each frame (auto-calculated usually)

Animation:

Speed/Duration - Configurable from 0.01 to 20 seconds
Frame Rate - Frames per second (FPS)
- 12 FPS: Choppy, retro
- 24 FPS: Smooth, cinematic
- 30-60 FPS: Very smooth, modern
Auto-play - Start automatically
Loop - Repeat continuously
Reverse - Play backwards

Transform Properties:

Position (X, Y): -7000 to 7000 pixel range
Scale (X, Y): 0.01 to 1000x multiplier
Rotation: -360° to 360°
Opacity: 0-100%

Replacing Sprite Sheets:

Upload new PNG + JSON anytime
Select sprite sheet layer
Choose new image from Library
Automatically replaces with new animation
Keeps all other settings intact

Example setup:

Sprite sheet: 512x512 pixels
Layout: 4 columns × 4 rows = 16 frames
Frame size: 128x128 pixels each
Frame rate: 12 FPS
Loop: Yes

= Character animation that loops smoothly

Creating Sprite Sheets

Tools:

Photoshop - Manual layout
TexturePacker - Automated packing
Free alternatives - Shoebox, Leshy SpriteSheet Tool
Game engines - Export sprite sheets

Best practices:

Consistent frame sizes
Logical frame order (left-to-right, top-to-bottom)
Power-of-2 dimensions (256, 512, 1024) for best compatibility
Transparent background (PNG)

Sprite Sheet Tips

Frame count:

Walk cycle: 8-12 frames
Idle animation: 4-8 frames
Attack/action: 6-10 frames
More frames = smoother but larger file

Performance:

Smaller sprite sheets = better performance
Don't make 4096×4096 with 1000 frames
512×512 or 1024×1024 usually sufficient

Use cases:

Character animations
Particle effects
UI animations
Spinning coins/items
Animated logos

Flip Books

Frame-by-frame animation using separate images.

What is a Flip Book?

Multiple separate images played in sequence:

frame_001.png
frame_002.png
frame_003.png
...
frame_024.png

= Plays like a flipbook animation

Difference from Sprite Sheets:

Sprite Sheet: One image, multiple frames
Flip Book: Multiple images, one frame each

Adding Flip Books

Upload all frame images to Library (PNG files)
Click flip book icon in toolbar
Select all frames in order (auto-sorts alphabetically)
Configure animation
Use "Manage Images" to add/remove frames later

Frame Selection Tips:

Files auto-sort alphabetically
Name files: frame_001.png, frame_002.png, etc.
Leading zeros ensure correct order
Select all at once for efficiency

Managing Frames:

Manage Images Dialog: Add or remove frames after creation
Delete individual frames: Select and remove from list
Reorder frames: Depends on file naming
Add more frames: Upload new images and add via dialog

Flip Book Properties

Frames:

Frame List - Ordered list of images
Frame Duration - How long each frame shows
FPS - Alternative to duration (frames per second)

Animation:

Speed/Duration - Configurable playback speed (0.01-20 seconds)
Auto-play - Start automatically
Loop - Repeat continuously
Ping-pong - Play forward then backward

Transform Properties:

Position (X, Y): Full positioning range
Scale (X, Y): Resize each frame uniformly
Rotation: Rotate entire animation
Opacity: Fade entire animation

Example:

Frames: 12 images (walk_01.png through walk_12.png)
FPS: 12
Loop: Yes

= Smooth looping walk cycle

Flip Book Tips

When to use:

High-quality frame-by-frame animation
Each frame significantly different
Need maximum quality per frame
Don't have sprite sheet

File management:

Name files with numbers: file_001, file_002, etc.
Consistent naming makes selection easier
Upload all at once

Performance:

More files = more loading time
Sprite sheets usually more efficient
Use for special cases or high-quality animations

Use cases:

Complex animations (can't fit in sprite sheet)
Video-like sequences
Very high quality needed per frame
Transitional effects

Audio Layers

Add sound and music to themes.

Adding Audio

Upload audio file to Library (MP3, WAV, etc.)
Add to theme via toolbar or menu
Audio layer appears (invisible on canvas)

Audio Properties

Playback:

Auto-play - Start automatically
Loop - Repeat continuously
Volume - 0 (silent) to 1 (full)
Fade In - Gradual volume increase at start
Fade Out - Gradual volume decrease at end

Timing:

Start Time - When to begin playing
Duration - How long to play (or full file)

Audio Tips

File optimization:

MP3 at 128-192 kbps (good quality, reasonable size)
Don't use uncompressed WAV unless necessary
Compress before uploading

Volume levels:

Background music: 0.3-0.5 (subtle)
Sound effects: 0.7-1.0 (clear)
Test at different volumes
Don't blow out users' speakers!

Use cases:

Background music - Theme ambience
Menu sounds - Hover/select effects
Ambient sounds - Environmental audio
Stingers - Short emphasis sounds

Best practices:

Don't auto-play loud audio (startling)
Fade in for smooth entrance
Loop seamlessly (check loop point)
Provide user volume control if possible

Shapes

Basic geometric shapes for design elements.

Available Shapes

Common shapes:

Rectangle
Circle/Ellipse
Triangle
Polygon
Line

Adding Shapes

Click shape icon in bottom toolbar
Shape appears on canvas
Resize and position

Shape Properties

Appearance:

Fill Color - Interior color
Stroke Color - Border/outline color
Stroke Width - Border thickness
Opacity - Transparency

Geometry:

Corner Radius - Rounded corners (rectangles)
Sides - Number of sides (polygons)

All standard transforms apply!

Shape Tips

Use cases:

Backgrounds and panels
Frames and borders
Decorative elements
Masks and overlays
Buttons and UI elements

Advantages over images:

Infinitely scalable (no pixelation)
Small file size (generated, not uploaded)
Easy to modify colors
Perfect for prototyping

Limitations:

Simple geometry only
No complex graphics
Limited styling options

Tiling Sprites (Repeating Textures)

Convert images into seamlessly repeating textures - perfect for backgrounds and patterns.

What Are Tiling Sprites?

Regular image:

Shows once
Empty space if smaller than canvas
Stretches if resized too large

Tiling sprite:

Repeats seamlessly
Fills any size area
No stretching or distortion
Like wallpaper or floor tiles

Think: Brick wall texture, starfield, grass pattern, circuit boards, etc.

When to Use Tiling

Perfect for:

✅ Background textures
✅ Repeating patterns
✅ Procedural backgrounds
✅ Fills that need to cover large areas
✅ Any texture that should seamlessly repeat

Not ideal for:

❌ Unique images (logos, characters, photos)
❌ Things that shouldn't repeat
❌ Images with obvious edges
❌ One-off graphics

Creating Seamless Textures

For best tiling results:

Use seamless textures
- Edges must match perfectly
- Left edge = right edge
- Top edge = bottom edge
- No visible seams when repeated
Tools for creating seamless textures:
- Photoshop: Filter → Other → Offset (then paint seams)
- GIMP: Filters → Map → Make Seamless
- Online: Seamless Texture Generator websites
- TexturePacker tools
Test before using:
- Place texture side-by-side in image editor
- Check for obvious seams
- Adjust if visible

Adding Tiling Sprites

Step-by-step:

Upload seamless texture to Library
- Best size: 256×256 to 1024×1024 pixels
- PNG with transparency works great
- JPG for photos/solid backgrounds
Add sprite to canvas
- Drag from Library OR
- Add via sprite icon in toolbar
Enable tiling
- Select sprite layer
- In Properties (right panel)
- Find Tiling section
- Enable Tile Horizontally and/or Tile Vertically
Configure tiling
- Tile X (horizontal): On/Off
- Tile Y (vertical): On/Off
- Tile Position X: Offset horizontal start point
- Tile Position Y: Offset vertical start point
- Tile Scale: Size of each tile

Tiling Properties

In the Properties panel:

Basic Tiling:

Tile Horizontally (checkbox)
Tile Vertically (checkbox)
Both enabled = tiles in all directions (most common)

Advanced Controls:

Tile Position X: -3000 to 3000 (shifts pattern horizontally)
Tile Position Y: -3000 to 3000 (shifts pattern vertically)
Tile Scale X: 0.1 to 10 (stretches tiles horizontally)
Tile Scale Y: 0.1 to 10 (stretches tiles vertically)

Transform Properties:

Position: Where the tiling area starts
Size: How large the tiling area is
Rotation: Rotate the entire tiled area
Opacity: Fade tiling layer

Tiling Techniques

Simple Background Fill

Goal: Cover entire canvas with texture

Setup:

Tile X: Enabled
Tile Y: Enabled
Position X: 0
Position Y: 0
Size: Cover entire canvas

Result: Seamless texture fills background

Animated Scrolling Texture

Goal: Moving starfield, scrolling clouds, etc.

Setup:

Enable tiling
Add Move X or Move Y animation
Animate Tile Position X or Y
Enable loop and yoyo

Example:

Animation: Move (applied to Tile Position X)
Start: 0
End: 1000
Speed: 10s
Loop: Yes

Result: Texture scrolls continuously!

Perspective Floor

Goal: Floor texture with perspective

Setup:

Enable tiling (both directions)
Apply 3D projection
Tilt perspective for floor view
Tiles maintain seamless pattern

Result: Realistic floor/ground effect

Layered Textures

Stack multiple tiling layers:

Example:

Layer 1: Stars (small, slow scroll)
Layer 2: Clouds (larger, medium scroll)
Layer 3: Foreground fog (largest, fast scroll)

Result: Parallax depth effect!

Common Tiling Patterns

Starfield:

Small star texture
Black background
Tile both directions
Optional slow scroll animation

Circuit Board:

Green circuit pattern
Tile seamlessly
Good for tech themes
Works at any size

Brick/Stone Wall:

Brick texture photo
Ensure seamless edges
Tile both directions
Add shadows for depth

Grass/Ground:

Grass texture
Natural color variation
Tile for infinite ground
Great for outdoor themes

Abstract Patterns:

Geometric designs
Mandala patterns
Psychedelic backgrounds
Tile for infinite pattern

Troubleshooting Tiling

"I can see the seams!"

Causes:

Texture isn't seamless
Edges don't match
Compression artifacts

Solutions:

Use proper seamless texture
Run through seamless filter
Higher quality texture
Reduce texture contrast at edges

"Tiling looks stretched/weird"

Causes:

Wrong aspect ratio
Tile scale too large/small
Non-uniform scaling

Solutions:

Reset tile scale to 1.0
Use square textures (512×512)
Adjust scale uniformly

"Pattern is too obvious"

Causes:

High-contrast texture
Distinctive features in texture
Pattern too regular

Solutions:

Lower opacity (blend with background)
Add blur filter
Use more subtle texture
Layer multiple textures

"Tiling is slow/laggy"

Causes:

Texture too large (4K+)
Too many tiling layers
Complex animations

Solutions:

Use smaller textures (512-1024px)
Reduce tiling layer count
Simplify animations
Test on target hardware

Performance Tips

Optimize tiling layers:

✅ Use power-of-2 dimensions

256×256, 512×512, 1024×1024
GPU-friendly sizes
Better performance

✅ Compress textures

PNG-8 for simple patterns
JPG for photos (quality 80-90)
Smaller file = faster loading

✅ Limit tiling layers

2-3 tiling layers usually sufficient
More = performance impact
Test on slower hardware

✅ Smaller is often better

512×512 often looks identical to 2048×2048
Test smallest size that looks good
Users won't see difference at normal zoom

Creative Uses

Animated overlays:

Rain/snow falling (scrolling texture)
Scan lines (CRT effect)
Grid overlays
Energy fields

Depth layers:

Near, mid, far textures at different scales
Different scroll speeds
Creates parallax depth
Immersive backgrounds

Texture mashups:

Blend multiple tiling layers
Different opacities
Create complex patterns
Unique aesthetic

Dynamic backgrounds:

Start with one texture
Crossfade to another
Animate tile position
Ever-changing background

Tiling Sprite Best Practices

Do's:

✅ Test seamlessness before adding ✅ Use appropriate texture sizes ✅ Consider performance impact ✅ Animate tile position for motion ✅ Layer multiple textures for depth ✅ Match texture style to theme

Don'ts:

❌ Use non-seamless textures ❌ Tile photos of objects (looks weird) ❌ Make textures too large (waste) ❌ Over-complicate patterns ❌ Forget to test on target device

Combining Special Layers

The power move: Use them together!

Example: Game Detail Screen

Layer stack (top to bottom):
- Text: Game Name (metadata)
- Scrollable Text: Description (metadata)
- Text: Developer info (metadata)
- Image: Box art (metadata)
- Video: Background gameplay (metadata VideoUrl)
- Shape: Semi-transparent overlay (dims video)
- Audio: Background music (looping)

Result: Rich, multi-media experience!

Example: Animated Logo

- Sprite Sheet: Animated character
- Text: Game title
- Shape: Glow circle behind character
- Audio: Logo whoosh sound

All animated together for entrance effect!

Special Layer Best Practices

Performance:

Limit videos (resource-intensive)
Compress audio files
Optimize sprite sheets
Test on target hardware

Organization:

Name special layers clearly
Group related elements
Document what each does

Accessibility:

Don't rely solely on audio
Provide visual alternatives
Text must be readable

Testing:

Test with missing metadata
Check all animations play
Verify audio levels
Test video playback

Special Layer Reference

Layer Type	File Type	Best For	Performance
Text	N/A	Labels, titles	Light
Scrollable Text	N/A	Long descriptions	Light
Video	MP4, WebM	Backgrounds, gameplay	Heavy
Sprite Sheet	PNG	Character animations	Medium
Flip Book	PNG sequence	High-quality animation	Medium-Heavy
Audio	MP3, WAV	Music, sound effects	Light-Medium
Shapes	N/A	UI elements, frames	Light

Next Steps

Metadata Integration - Dynamic content
Assets & Library - Managing media files
Best Practices - Professional techniques

Pro Tip: Mix and match special layers for rich, dynamic themes. The best themes use multiple layer types together! 🎬🎵✨

Layer Type Overview​

Text Layers​

Adding Text​

Editing Text Content​

Text Properties​

Text Best Practices​

Animating Text​

Scrollable Text​

When to Use Scrollable Text​

Adding Scrollable Text​

Scrollable Text Properties​

Scrollable Text Tips​

Video Layers​

Adding Video​

Video Properties​

Video Tips​

EmuMovies Integration​

Sprite Sheets​

What is a Sprite Sheet?​

Adding Sprite Sheets​

Sprite Sheet Properties​

Creating Sprite Sheets​

Sprite Sheet Tips​

Flip Books​

What is a Flip Book?​

Adding Flip Books​

Flip Book Properties​

Flip Book Tips​

Audio Layers​

Adding Audio​

Audio Properties​

Audio Tips​

Shapes​

Available Shapes​

Adding Shapes​

Shape Properties​

Shape Tips​

Tiling Sprites (Repeating Textures)​

What Are Tiling Sprites?​

When to Use Tiling​

Creating Seamless Textures​

Adding Tiling Sprites​

Tiling Properties​

Tiling Techniques​

Simple Background Fill​

Animated Scrolling Texture​

Perspective Floor​

Layered Textures​

Common Tiling Patterns​

Troubleshooting Tiling​

Performance Tips​

Creative Uses​

Tiling Sprite Best Practices​

Combining Special Layers​

Example: Game Detail Screen​

Example: Animated Logo​

Special Layer Best Practices​

Special Layer Reference​

Next Steps​

Layer Type Overview

Text Layers

Adding Text

Editing Text Content

Text Properties

Text Best Practices

Animating Text

Scrollable Text

When to Use Scrollable Text

Adding Scrollable Text

Scrollable Text Properties

Scrollable Text Tips

Video Layers

Adding Video

Video Properties

Video Tips

EmuMovies Integration

Sprite Sheets

What is a Sprite Sheet?

Adding Sprite Sheets

Sprite Sheet Properties

Creating Sprite Sheets

Sprite Sheet Tips

Flip Books

What is a Flip Book?

Adding Flip Books

Flip Book Properties

Flip Book Tips

Audio Layers

Adding Audio

Audio Properties

Audio Tips

Shapes

Available Shapes

Adding Shapes

Shape Properties

Shape Tips

Tiling Sprites (Repeating Textures)

What Are Tiling Sprites?

When to Use Tiling

Creating Seamless Textures

Adding Tiling Sprites

Tiling Properties

Tiling Techniques

Simple Background Fill

Animated Scrolling Texture

Perspective Floor

Layered Textures

Common Tiling Patterns

Troubleshooting Tiling

Performance Tips

Creative Uses

Tiling Sprite Best Practices

Combining Special Layers

Example: Game Detail Screen

Example: Animated Logo

Special Layer Best Practices

Special Layer Reference

Next Steps