Code a Super Mario Brothers Game to Master Game Development

Super Mario Brothers themed image

Super Mario Brothers is more than just a beloved video game franchise – it‘s a global cultural phenomenon. First introduced in 1985, the series has sold over 380 million copies across more than 200 games on various Nintendo consoles. Mario, the mustachioed Italian plumber protagonist, is one of the most recognizable fictional characters in the world.

But Super Mario games aren‘t just fun to play – they also serve as an incredible learning tool for game developers of all skill levels. By deconstructing and recreating the core mechanics and components of a Mario game from scratch, you can gain a deep understanding of the fundamental principles of game development that apply to any game genre and programming language.

In this in-depth guide, we‘ll explore how you can turbocharge your game development skills by making your own complete Super Mario Brothers game. We‘ll analyze the key elements that define the Mario formula and how to implement them yourself step-by-step. Whether you‘re an aspiring indie developer or simply curious how Mario games tick, this project will give you a solid foundation in game design and programming.

The Anatomy of a Mario Game

Over nearly four decades, the Mario series has experimented with diverse gameplay styles and formats, from the sprawling 3D sandboxes of Super Mario 64 and Odyssey to the competitive multiplayer of Mario Kart and Smash Bros. However, the 2D side-scrolling platformer remains the quintessential Mario experience.

Indeed, many of the signature elements, power-ups, and level design philosophies established in the very first Super Mario Bros. game for the Nintendo Entertainment System in 1985 still pervade the series to this day. Distilled down to its essence, a Mario game is defined by:

Responsive and expressive movement: Mario has incredibly fine-tuned movement, with the height and distance of his jump precisely controlled by how long you hold the button. This allows for intricate platforming and rewards mastering the timing and rhythm of his acrobatics. Later additions like the ground pound and wall jump further expand his moveset.

Memorable power-ups: Mario games are famous for the creative power-ups Mario can acquire, usually by hitting item blocks or defeating enemies. These include classics like the Super Mushroom which makes Mario grow in size, the Fire Flower enabling him to shoot fireballs, and the Super Star which grants temporary invincibility. Power-ups radically change how Mario interacts with the level.

Varied enemy roster: Each Mario game features a colorful cast of foes for Mario to contend with. Most can be dispatched by jumping on their heads, but many require special strategies, like using a fire flower or luring them into traps. Enemies are often introduced in a safe environment to teach the player how they behave before integrating them into more challenging scenarios.

Thoughtful level design: Mario levels are meticulously hand-crafted obstacle courses full of ramps, pits, moving platforms, breakable blocks, swinging ropes, and other hazards to overcome. Great care is taken to design around Mario‘s existing abilities and gradually layer on new concepts over the course of the game. Levels strike a balance between reflex-testing challenges and improvisation.

Secrets and shortcuts: Mario levels reward exploration and curiosity with cleverly hidden secrets and alternate paths. These often lead to valuable power-ups, 1-ups, coins, or even let you bypass sections entirely. Scouring every nook and cranny of a level creates an engaging risk/reward loop and invites repeat playthroughs.

By coding these core Mario mechanics and systems yourself, you‘ll develop a much greater understanding and appreciation for the craft of game design and the work that goes into even a simple platformer. You‘ll start to see games in a new way, with an eye for the underlying systems and structure. That perspective is invaluable for aspiring game developers.

The Benefits of Cloning a Classic

Some of the most successful and acclaimed indie games of the last decade started as experiments in recreating the mechanics of retro classics:

  • Stardew Valley, a farming life sim heavily inspired by the early Harvest Moon games, has sold over 10 million copies. Solo developer Eric Barone used it as a project to learn game development.
  • Spelunky, the revolutionary roguelike platformer, began as a clone of the NES game Spelunker. Creator Derek Yu wanted to modernize that game‘s unforgiving difficulty and unique procedurally generated levels.
  • Fez, the mesmerizing perspective-shifting puzzle game, was designer Phil Fish‘s attempt to remix Super Mario Bros. 3 and Zelda‘s 2D/3D duality.

Learning game development by recreating childhood favorites is a time-honored tradition in the games industry. When legendary developers John Romero and John Carmack were teenagers, they honed their programming skills by coding their own versions of arcade hits like Super Mario Bros. and Contra. Those early experiments prepared them to later create revolutionary hits of their own like Wolfenstein, Doom, and Quake.

This learn-by-cloning ethos is common in other creative and technical fields too:

  • Aspiring painters often recreate famous works stroke-by-stroke to deconstruct the techniques of the Old Masters
  • Fledgling musicians learn to play their favorite songs note-for-note to internalize their heroes‘ creative decisions
  • Beginning web developers recreate well-designed sites like Twitter and Airbnb to reverse engineer best practices

The goal with any of these studies isn‘t to just duplicate surface-level aesthetics, but to dig deep into the underlying design decisions, technical implementation, and craftsmanship that makes the classics enduring and timeless.

Mario by the Numbers

Still not convinced Mario is worthy of careful study? Let‘s look at some statistics that illustrate the seismic impact the franchise has made on the industry and pop culture:

Metric Data
Total games in Mario franchise 200+
Total series sales 380+ million
Best-selling Mario game (Super Mario Bros.) 40.2 million
Year original Super Mario Bros. released 1985
Number of Mario movies 1

(Sources: Nintendo, Guinness World Records)

Adjusting for inflation, the Mario series has earned the equivalent of over $30 billion. If Mario was a standalone company, it would be one of the most valuable media franchises in the world. Mario games are a major reason Nintendo has remained a gaming industry leader for nearly 40 years.

But Mario‘s impact extends far beyond sales figures. Mario is a fixture of popular culture, with mainstream recognition on par with Mickey Mouse and Darth Vader. Multiple generations across the globe have grown up with Mario. The Mario series has inspired countless game developers, musicians, artists, and filmmakers.

Mario games are the Citizen Kane of the medium – a watershed work that advanced the art and science of interactive entertainment in countless ways. They remain a master class in game feel, level design, audio direction, visual feedback, controls, physics, and perhaps most of all, pure unadulterated fun. Deconstructing and rebuilding Mario is a rite of passage for game designers.

Learning by Playing

Unlike other mediums, the only way to truly understand how a game works is to play it yourself. To make an effective Mario clone, carefully study Mario‘s movement, abilities, power-ups, and level designs. Observe how high and far he jumps based on your button presses. Notice how power-ups change his appearance and capabilities. Analyze how levels introduce new mechanics and iterate on them through more complex scenarios.

I highly recommend playing the original Super Mario Bros., Super Mario Bros. 3, and Super Mario World, as they form the foundation the rest of the 2D games build upon. Pay attention to the pacing of levels, the placement of obstacles and items, and how the physics and controls feel. Try to identify the design philosophies and principles at work.

If you have access to a copy of Super Mario Maker 2 for Switch, its Level Maker mode is an invaluable tool to easily prototype and test level ideas. Seeing first-hand how different level elements affect the play experience will make you a better designer.

Techniques for Cloning Mario

With a solid understanding of Mario‘s game design, you‘re ready to start coding your own clone! Let‘s break down some of the key techniques you‘ll need to implement:

Loading Assets
Before you can code any gameplay, you‘ll need to load in image files for the characters, tiles, items, and other graphics, as well as sound effects and music. How you load assets will depend on the programming language and framework you‘re using, but most provide straightforward APIs for it. For example, in JavaScript/HTML5:

let mario = new Image();
mario.src = ‘mario.png‘;

Rendering Sprites
The visible graphics in a 2D game are known as sprites – essentially an image file or a portion of one. To render sprites, you‘ll load the image into memory, then draw them to the screen at a specific position. Many frameworks have built-in sprite rendering, but you can also roll your own:

ctx.drawImage(mario, x, y);

Implementing Physics
The behavior and feel of Mario‘s movement is governed by some simple physics equations. At a minimum, you‘ll need variables for Mario‘s position, velocity, and acceleration. In each frame of the game loop, you‘ll update Mario‘s velocity based on his acceleration, then change his position based on his velocity:

function update(dt)
  mario.velX = mario.velX + mario.accelX * dt
  mario.velY = mario.velY + mario.accelY * dt
  mario.x = mario.x + mario.velX * dt
  mario.y = mario.y + mario.velY * dt
end

Handling Collisions
Detecting and resolving collisions between Mario and the level tiles, items, and enemies is crucial for making the game playable. There are many ways to implement collision detection, but a common approach in 2D games is to give each collidable object an invisible rectangle hitbox. Each frame, you test if any hitboxes are overlapping, and if so, respond accordingly. Resolving collisions often involves pushing objects outside each other to avoid getting stuck:

if checkCollision(mario, goomba) then
  mario.y = goomba.y - mario.height
  mario.velY = 0
  goomba.alive = false
end

Managing Game State
Your Mario game will have various states like title screen, gameplay, pause screen, game over, etc. Each state has its own UI, controls, and logic. A simple way to manage state is with an enum variable:

enum GameState { Title, Play, GameOver }
GameState state = GameState.Title;

void Update()
{
    switch(state)
    {
        case GameState.Title:
            // update title screen
            break;
        case GameState.Play:
            // update gameplay
            break;  
        case GameState.GameOver:
            // update game over screen  
            break;
    }
}

Coding Power-ups
Power-ups are a defining element of Mario games. They‘re usually implemented as a type of collectible item that, when touched, alters Mario‘s sprite and grants him new abilities:

function collected(item)  
  if item.type == ‘mushroom‘ then
    mario.state = ‘super‘
    mario.sprite = mario_super
  elseif item.type == ‘fireflower‘ then
    mario.state = ‘fire‘ 
    mario.sprite = mario_fire
  end
end

Building Levels
Levels in Mario games are typically constructed from a grid of tiles, each with defined properties like solidity and friction. You can build a simple level editor that lets you "paint" tiles into a 2D array, then save the result to a file. Loading a level then is just a matter of reading the file and populating the tile grid. Alternatively, you could define levels directly in code using multi-dimensional arrays:

let level = [
  [1, 1, 1, 1, 1],
  [1, 0, 0, 0, 1],
  [1, 0, 0, 0, 1],
  [1, 1, 1, 1, 1],
];

These techniques merely scratch the surface of what‘s possible in a Mario-style platformer. You could implement enemies with basic AI, a camera that follows Mario through the level, a lives and checkpoint system, particle effects, unlockable secrets and more. The only limit is your imagination!

Transferable Game Development Skills

The skills and concepts you learn making a Mario clone apply far beyond Nintendo-style platformers. Many of the techniques, like loading assets, rendering graphics, handling input, simulating physics, and detecting collisions are the bedrock of every video game, regardless of genre or fidelity.

Making a Mario game will level you up as a programmer in ways that directly transfer to more "serious" software development too:

  • Games are highly interactive and event-driven, much like modern web/mobile apps
  • The Entity-Component-System architecture used in many games is conceptually similar to Model-View-Controller
  • Designing gameplay systems maps well to designing APIs and libraries
  • Optimizing game code to run at 60 FPS instills good performance practices
  • The iterative process of designing, prototyping, playtesting and refining a game builds strong product instincts

Game development is a crucible that forges versatile, adaptive, and resourceful programmers. It‘s a challenging but deeply rewarding way to grow your skills while flexing your creative muscles.

Go Forth and Make the Next Great Mario Game!

In this article, we‘ve taken a deep dive into the game design DNA of Super Mario Bros. and how to start constructing your own clone from scratch. We‘ve explored the essential techniques you‘ll need, as well as the invaluable game development skills you‘ll cultivate in the process.

Armed with these concepts and a solid Mario foundation, you now have the tools and knowledge to forge ahead and create a platformer all your own. Start small with a basic level or two, then gradually layer on more features, mechanics, and polish. With each addition, you‘ll be honing your chops as a game developer and gaining practical experience to make the next great indie game.

Some additional resources to accelerate your journey:

References:

Now go forth and make the next great Mario game! Happy coding!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *