How I Built a Tarot Game in Roblox Over a Weekend

‍Avatar’s Fate: A Tarot Simulator – A Developer’s Breakdown

👩‍💻 The Goal

I wanted to create a UI-based tarot simulator in Roblox with:

A shuffle and draw mechanic
Upright/reversed card logic
Reveal animation with meaning overlays
No avatars, movement, or 3D interaction—just clean interface work

I gave myself a weekend to prototype and publish.

🧠 Design Philosophy: MVP + Magic

Because I had limited time, I leaned into the following principles:

Focus on one mechanic: Draw a tarot card. That’s the core loop.
2D UI only: All game logic happens in the GUI layer—no 3D elements or character controllers.
Keep art static: I used a fixed set of 22 tarot images I designed elsewhere.

🛠️ Tools Used

Roblox Studio – Core development
ChatGPT/ Photoshop – Card meaning descriptions / Card illustrations
Elevenlabs.io - Text to speech AI voiceovers
Studio Scripts – Lua, all local and module-based
No external frameworks (yet) – MVP kept it tight

🔄 Core Systems

1. Deck & Draw Logic

Cards are stored in a ModuleScript as a table of dictionaries:

‍local Deck = {    
	{ name = "The Fool", id = "card_00", meaning = "...", reversed = "..." },    
	{ name = "The Magician", id = "card_01", meaning = "...", reversed = "..." },    
-- etc}

A DrawCard() function:

Clones a card GUI template
Randomly selects a card from the deck
Applies a 50/50 upright/reversed orientation
Animates into position

Cards are removed or reshuffled depending on game mode.

2. Card Reveal Animation

Reveal is handled with a TweenPosition and TweenRotation chain:

‍local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
local flipTween = TweenService:Create(cardFrame, tweenInfo, { Rotation = 90 })

flipTween:Play()
flipTween.Completed:Connect(function()    	  
	cardImage.Image = revealImage    
	cardFrame.Rotation = -90    
	TweenService:Create(cardFrame, tweenInfo, { Rotation = 0 }):Play()
end)

Simple, smooth, and mobile-safe.

3. Upright vs Reversed Meaning Overlay

When the card is drawn, a text overlay fades in with either the upright or reversed meaning.

‍‍if isReversed then    
	meaningLabel.Text = cardData.reversed    
	cardImage.Rotation = 180
else    
	meaningLabel.Text = cardData.meaning
end

The overlay fades in based on user input timing.

4. Audio Feedback

Each card has a unique voiceover. When revealed:

‍local sound = Instance.new("Sound", cardFrame)
sound.SoundId = "rbxassetid://12345678" -- stored in module
sound:Play()

‍

I fed the card meaning scripts into ElevenLabs.io, using the Old Wizard voice for narration. The result gives each card a mysterious, immersive vibe that enhances the draw experience.

🧪 Playtesting Notes

Playtesting... didn’t really happen 😅

I tested myself, iterated quickly, and made sure nothing broke. Because the experience is single-player and visual, I focused on user flow and animation timing. I had to rework the layout again once I remembered to check on mobile 😅- its not perfect but readable.