🍞 Toast System (Floating Messages)

The engine includes a lightweight toast system for floating messages that can be displayed on screen for notifications, player warnings, or real-time debugging. Unlike alert(), toasts are non-blocking, appear elegantly, and allow full customization of color, size, and position.

⚙️ Main Function

showToast(
  message,
  type = "info",
  duration = 2500,
  bgColor = null,
  textColor = null,
  fontSize = null,
  top = "20px",
  left = "50%"
)

Parameters

• message → The text that will appear in the toast.
• type → Predefined style type ("info", "success", "error", "warning").
• duration → Visible time in milliseconds (default 2500).
• bgColor → Custom background color (optional).
• textColor → Text color (optional).
• fontSize → Font size (e.g. "16px").
• top → Vertical screen position (default "20px").
• left → Horizontal screen position (default "50%").

🎨 Basic Examples

// Info message
showToast("ℹ️ Loading data...", "info");

// Success (green)
showToast("✅ Saved successfully", "success");

// Error (red)
showToast("❌ Error connecting to server", "error");

// Warning (yellow)
showToast("⚠️ Low energy", "warning");

🎨 Advanced Examples with Custom Colors & Sizes

// Purple background, white text, large font
showToast("🔥 Power-Up activated!", "info", 3000, "#6f42c1", "#fff", "20px");

// Black background, green terminal-like text
showToast("Debug: variable = 42", "info", 2000, "#000", "#0f0", "13px");

// Translucent background with red text
showToast("Stealth mode active", "info", 2500, "rgba(0,0,0,0.7)", "#ff5555", "18px");

📍 Examples with Custom Position

// Top-left corner
showToast("📦 Item picked up", "success", 2000, null, null, null, "20px", "10%");

// Top-right corner
showToast("💎 You've earned 100 coins", "success", 3000, null, null, null, "20px", "90%");

// Center of the screen
showToast("🎯 New high score!", "info", 3000, "#333", "#fff", "22px", "50%", "50%");

// Bottom
showToast("💬 Message received", "info", 4000, "#004aad", "#fff", "16px", "90%", "50%");

🧩 Usage Inside Scripts

function Start(obj) {
  showToast("🚀 Scene started", "success");
}

function Update(obj, dt) {
  if (IsJustPressed("t")) {
    showToast("You pressed T", "warning");
  }
}

🧱 Multiple Toasts at Once

You can now display several messages at the same time, each with its own duration, position and style. They do not overwrite each other.

// Multiple active toasts
showToast("✅ Scene saved", "success");
showToast("💾 Autosave complete", "info", 3000, "#222", "#0ff", "14px", "60px");
showToast("💥 Critical error", "error", 4000, "#900", "#fff", "16px", "100px");

🧠 Recommendations

• Avoid showing more than 4–5 toasts at the same time to prevent UI clutter.
• Use colors consistent with your game's visual style.
• Use them as temporary feedback, not for persistent messages.
• Perfect for debugging, script logs, or quick confirmations.

💡 Full Example

// Script: notify_item_pickup.js

function OnTriggerEnter(obj, other) {
  if (other.name === "Player") {
    showToast("🎁 You obtained a golden key", "success", 3500, "#2ecc71", "#fff", "18px", "40px", "50%");
  }
}

// Script: debug_alert.js
function Update(obj, dt) {
  if (IsJustPressed("d")) {
    showToast("Debug enabled", "info", 2000, "#000", "#0f0", "14px", "80px", "20%");
  }
}

📌 Summary