# Dreamball

**A classic pinball, rethought for a screen and a phone.**

Mixed-reality experience design · Rebuilt for the web in 2026

Dreamball is an exercise in mixed-reality interaction: the computer is the table and the phone is the controller, for short, low-effort play. In 2026 I rebuilt it for the web with AI coding tools; you can play it at the end of this page.

- **Problem:** Adapt classic pinball to a digital medium in a way that uses it, instead of copying the physical table.
- **My role:** Designer. Built the playable prototype in Processing; UI in Figma.
- **What I did:** Defined the experience, ran a competitive analysis, designed the game system and its visuals, and built a playable prototype.
- **Outcome:** A working prototype, later used as a teaching example in a faculty open educational resource on experience and game design.

Play it in the browser: <https://maujimenez.io/dreamball>

![Dreamball title screen](https://maujimenez.io/work/dreamball/title-screen.jpg)
_Keyboard: ← and →. Phone: tap each half of the table._

## The idea

Dreamball is an interaction exercise: take classic pinball and rethink it for two screens at once. Instead of copying the physical table, it uses the medium: the computer is the screen and a phone is the controller, a small mixed-reality setup.

It was designed for entertaining moments, so the bar was a low cognitive load: one simple objective, few tasks, and visuals attractive enough to hold a casual player.

![Dreamball concept poster: the title over a dark circle with pinball flippers and a ball, and two hands holding a phone that shows the game menu](https://maujimenez.io/work/dreamball/concept-poster.jpg)

_The concept: the computer is the table, the phone is the controller._

## How it plays

The design ran on six rules.

![A ball entering the table through the tube at the top](https://maujimenez.io/work/dreamball/dyn-spawn.jpg)

_A new ball spawns from the top every 15 seconds._

![A ball touching an orange diamond-shaped point target, with the ring at the center of the table](https://maujimenez.io/work/dreamball/dyn-points.jpg)

_Points add +5 when the ball hits them._

![A pink star target on the table](https://maujimenez.io/work/dreamball/dyn-star.jpg)

_Star points add +10. They appear only with 3 or more balls in play._

![The score reading 25, with a ball and a pink star point on the table](https://maujimenez.io/work/dreamball/dyn-score.jpg)

_The score rises on every hit._

![Four balls on the table at the same time, with the score reading 25](https://maujimenez.io/work/dreamball/dyn-no-limit.jpg)

_There is no limit to how many balls can be in play._

![A ball falling between the two flippers at the bottom of the table](https://maujimenez.io/work/dreamball/dyn-end.jpg)

_The game ends when the last ball leaves the table._

The 2026 web version keeps these rules on its first level, with one change: at most six balls are on the table at once. It also adds two levels, Dusk at 50 points and Nebula at 150. Each one drops balls and targets faster, makes gravity heavier and changes how the center ring spins. On Nebula, star points appear from two balls and are worth +15.

## How I worked

I worked in three stages, from research to a playable build. The prototype was built in Processing, with the interface designed in Figma.

1. **Research and definition**
   - Experience definition
   - Benchmarking analysis
   - Information architecture
2. **Design**
   - Design concept
   - Components
   - Typography
   - Color
   - Wireframes and prototype
3. **Build**
   - Coding
   - Testing

## Competitive analysis

Before designing anything, I studied how four casual games handle interaction.

**Alto's Odyssey**

![Alto's Odyssey: a snowboarder on a long dune slope under a teal sky, between tall rock formations](https://maujimenez.io/work/dreamball/competitor-altos-odyssey.png)

_Alto's Odyssey, by Snowman. Shown for analysis._

An endless snowboarding game. You touch the screen to jump and do stunts, the scenery keeps evolving, and the design is captivating.

**Peggle**

![Peggle: a board of blue and orange pegs and curved rails over a large illustrated animal, with the launcher at the top and score meters at the sides](https://maujimenez.io/work/dreamball/competitor-peggle.png)

_Peggle, by PopCap Games. Shown for analysis._

A 2D puzzle and shooting game. You aim and shoot with the mouse, the score depends on hits and balls used, and you win by clearing the orange targets. The screen never changes.

**Angry Birds**

![Angry Birds: red birds beside a slingshot on the rocks, facing a tower of wood and glass blocks across a misty bay](https://maujimenez.io/work/dreamball/competitor-angry-birds.png)

_Angry Birds, by Rovio Entertainment. Shown for analysis._

A 2D strategy and shooting game. You aim and shoot with the mouse or by touch, earn up to three stars based on shots and birds used, and win by clearing every pig. The scenery changes from level to level.

**Jetpack Joyride**

![Jetpack Joyride: the hero flying a jetpack down a lab corridor past coins, a missile and robots](https://maujimenez.io/work/dreamball/competitor-jetpack-joyride.png)

_Jetpack Joyride, by Halfbrick Studios. Shown for analysis._

An endless run with jetpack flight and shooting. You touch and hold to fly, obstacles and speed make it harder over time, and points come from survival time and coins.

Then I compared them feature by feature.

| Feature                   | Peggle | Alto's Odyssey | Angry Birds | Jetpack Joyride |
| ------------------------- | ------ | -------------- | ----------- | --------------- |
| Simple controls           | ✓      | ✓              | ✓           | ✓               |
| Shooting dynamics         | ✓      |                | ✓           | ✓               |
| Shot direction preview    | ✓      |                | ✓           |                 |
| Static scenarios          | ✓      |                | ✓           |                 |
| Moving background effects |        | ✓              | ✓           | ✓               |
| Limited ammo              | ✓      |                | ✓           |                 |
| Special powers            | ✓      | ✓              | ✓           | ✓               |
| Levels                    | ✓      | ✓              | ✓           | ✓               |
| Scenario variety          | ✓      | ✓              | ✓           | ✓               |

## What the analysis pointed to

The comparison pointed to three things that keep a casual player engaged:

1. Feedback on the ball's direction before the shot, to give the player context.
2. Objects with special powers that change the dynamics during play, to create interest.
3. Variety in difficulty through levels with different challenges, to keep players engaged and motivated over longer play.

The 2021 design delivered the second: star points are the special object. They appear only while three or more balls are in play, a reward for keeping more balls alive.

The 2026 web version adds the third: three levels, each with its own challenge. Levels arrived in 2026 because the 2021 version was a proof of concept, and rebuilding it with AI coding tools made them possible. There is still no aim preview, because the flippers hit the ball and there is no shot to aim.

## Visual direction

The aesthetic set four rules:

- Subtle lighting.
- Monochromatic or analog palettes, with pastel colors.
- Noise, and offsets with slight contrasts, for a sense of depth.
- Simple sans-serif typefaces.

The palette, sampled from the Figma file:

- `#222854`
- `#95c3ff`
- `#a8c7ad`
- `#ff5442`
- `#e98c68`
- `#f1c08d`

The 2021 design used three typefaces: Chaney, Brandon Grotesque and TT Firs Neue. The 2026 web version sets its text in Poppins, an open-license typeface close to TT Firs Neue.

## Components

The game has five components, deliberately few.

**Ball**

![The ball: a purple sphere on a dark blue tile](https://maujimenez.io/work/dreamball/component-ball.png)

The main character, controlled with the flippers to hit targets and raise the score.

**Points**

![A point: an orange diamond on a red tile](https://maujimenez.io/work/dreamball/component-points.png)

Basic targets that add +5 to the score.

**Star points**

![A star point: a pink star on a pink tile](https://maujimenez.io/work/dreamball/component-star-points.png)

Special targets worth +10, appearing only when 3 or more balls are in play, as a reward.

**Flippers**

![Two white-outlined flippers on a black tile](https://maujimenez.io/work/dreamball/component-flippers.png)

Controlled by the player to direct and propel the ball.

**Boundaries**

![A boundary: an orange bar on a yellow-orange tile](https://maujimenez.io/work/dreamball/component-boundaries.png)

The arena's limits. They act as obstacles and do not change the score.

## The screens

![Title screen: the Dreamball wordmark above a box that reads Use your device as the controller](https://maujimenez.io/work/dreamball/screen-title.jpg)

_Title._

![Game screen: the table with a ring at its center, the score, the flippers at the bottom and a ball counter in the corner](https://maujimenez.io/work/dreamball/screen-game.jpg)

_The game._

![Instructions screen: the components and how to play on the left, a map of the game screen and the phone controller on the right](https://maujimenez.io/work/dreamball/screen-instructions.jpg)

_Instructions._

![Final score screen reading Your Score, 200](https://maujimenez.io/work/dreamball/screen-score.jpg)

_Final score._

The phone is the controller: a menu to start, then one button for each flipper.

![A phone held in landscape showing the controller menu with New Game and Instructions buttons](https://maujimenez.io/work/dreamball/controller-menu-landscape.png)

_The phone menu._

![A phone held in landscape showing two large round buttons, one for each flipper](https://maujimenez.io/work/dreamball/controller-flippers-landscape.png)

_One button per flipper._

---

- Web page: https://maujimenez.io/work/dreamball
- Index for AI tools: https://maujimenez.io/llms.txt