Aller au contenu

How to create floating score displays that rise and fade away

Ce contenu n’est pas encore disponible dans votre langue.

💡 Having trouble with Scratch block assembly? Don’t know how to implement code logic? 🚀 Get Help Now

SE

ScoreEffects_Master

Posted on May 2, 2025 • Intermediate

🎮 Need help with floating score displays

Hey everyone! I’m working on a Japanese-style shooter game (similar to Touhou) and I want to create floating score displays that appear when items are collected. The effect should:

  • Show the points earned when an item is collected
  • Rise up from the player’s position
  • Gradually fade away as it moves
  • Handle variable score amounts (from small to millions)

I’ve seen this effect in many professional games and it really adds to the game feel. How can I implement this in Scratch? 🤔

VE

VisualEffects_Pro

Replied 4 hours later • ⭐ Best Answer

Excellent question @ScoreEffects_Master! Floating score displays are a fantastic way to provide visual feedback. Here’s a comprehensive guide to implementing them:

🎯 Floating Score System Flow

Here’s how the floating score effect works:

flowchart TD A[🎯 Item Collected] --> B[Calculate Score Points] B --> C[Broadcast 'Show Score'] C --> D[Score Display Sprite Activated] D --> E[Position Above Player] E --> F[Show Score Value] F --> G[Start Animation Loop] G --> H[Move Upward] H --> I[Increase Transparency] I --> J{Animation Complete?} J -->|No| G J -->|Yes| K[Hide/Delete Clone] style A fill:#e1f5fe style B fill:#f3e5f5 style F fill:#e8f5e8 style H fill:#fff3e0 style I fill:#ffebee style K fill:#f1f8e9

🔧 Step 1: Basic Floating Score System

First, create a sprite for the score display with costumes for different point values:

    when I receive [show score v]
clear graphic effects
set [score points v] to [100] // This will be set dynamically
go to [Player v]
change y by [50] // Start above player
show

// Choose appropriate costume based on score
if <(score points) = [100]> then
switch costume to [+100 pts v]
else
if <(score points) = [500]> then
switch costume to [+500 pts v]
else
if <(score points) = [1000]> then
switch costume to [+1000 pts v]
end
end
end

// Animate upward and fade
repeat [60]
change y by [3]
change [ghost v] effect by [1.5]
end

hide

🚀 Step 2: Advanced Dynamic Score Display

For variable score amounts, use a text-based system with clones:

    // Main score display controller
when I receive [show floating score v]
set [display score v] to (score to show)
set [digit count v] to (length of (display score))
set [clone index v] to [1]

// Position at player location
go to [Player v]
change y by [60]
change x by (((digit count) * [15]) / [-2]) // Center the text

// Create clones for each digit
repeat (digit count)
set [current digit v] to (letter (clone index) of (display score))
create clone of [myself v]
change x by [15] // Space between digits
change [clone index v] by [1]
end
  
    // Clone behavior for individual digits
when I start as a clone
set [my digit v] to (current digit)
switch costume to (join [digit ] (my digit))
set [ghost v] effect to [0]
show

// Float up and fade animation
repeat [80]
change y by [2.5]
change [ghost v] effect by [1.2]

// Add slight random movement for organic feel
change x by (pick random [-0.5] to [0.5])
end

delete this clone

💫 Step 3: Enhanced Effects System

Add more polish with color coding and special effects:

    // Enhanced score display with effects
when I receive [show score with effects v]
set [score value v] to (points earned)
set [score color v] to [white]

// Color code based on score value
if <(score value) > [1000]> then
set [score color v] to [gold]
set [brightness v] effect to [30]
else
if <(score value) > [500]> then
set [score color v] to [blue]
set [color v] effect to [50]
else
if <(score value) > [100]> then
set [score color v] to [green]
set [color v] effect to [-50]
end
end
end

// Position and show
go to [Player v]
change y by (pick random [40] to [80]) // Vary height
change x by (pick random [-20] to [20]) // Vary horizontal position
show

// Create floating animation with easing
set [animation step v] to [0]
repeat [100]
change [animation step v] by [1]

// Easing function for smooth movement
set [ease factor v] to ([sin v] of ((animation step) * [1.8]))
change y by ((ease factor) * [0.8])

// Fade out
change [ghost v] effect by [1]

// Scale effect
if <(animation step) < [20]> then
change [size v] by [2] // Grow slightly at start
else
change [size v] by [-0.5] // Shrink as it fades
end
end

hide
set [size v] to [100] // Reset size

🎨 Step 4: Professional Polish

Add these features for a professional look:

  • Score Formatting: Use commas for large numbers (1,000,000)
  • Critical Hits: Special effects for bonus scores
  • Combo System: Chain multiple score displays
  • Sound Effects: Audio feedback for different score tiers
    // Score formatting function
define format score (number)
set [formatted v] to []
set [temp number v] to (number)

repeat until <(temp number) < [1000]>
set [remainder v] to ((temp number) mod [1000])
set [temp number v] to ([floor v] of ((temp number) / [1000]))

if <(length of (formatted)) > [0]> then
set [formatted v] to (join (join [,] (remainder)) (formatted))
else
set [formatted v] to (remainder)
end
end

if <(temp number) > [0]> then
set [formatted v] to (join (temp number) (formatted))
end

This creates professional-looking score displays that enhance the game experience! ✨

SE

ScoreEffects_Master

Replied 2 hours later

@VisualEffects_Pro This is absolutely perfect! Thank you so much! 🎉

I implemented the clone-based system and it works beautifully. The score displays now handle any value from 10 to 10,000,000+ and the animation looks exactly like what I wanted. The color coding based on score value is a nice touch too!

UX

UXDesigner_Alex

Replied 1 day later

Great implementation! Here are some UX tips to make the score displays even better:

  • Timing: Vary the animation speed based on score value - bigger scores should be more dramatic
  • Positioning: Offset multiple score displays so they don’t overlap
  • Feedback: Add a subtle screen shake for high-value scores
  • Accessibility: Consider players who might have motion sensitivity

These small details make a huge difference in game feel! 🎮

VB

Vibelf_Community

Pinned Message • Moderator

🚀 Create Stunning Visual Effects!

Amazing discussion on floating score displays! For those ready to add professional-quality visual effects to their games, our community can help you implement:

  • ✨ Particle systems
  • 🌟 Screen transitions
  • 💥 Impact effects
  • 🎨 Advanced UI animations

📚 Related Topics

Ready to make your games visually stunning? Get personalized guidance from our expert tutors in the Vibelf app!