20 Games Challenge - Game #1

Introduction

Near the end of my first blog post I talked about why I was doing the 20 Games Challenge. Today I’m finally gonna talk about my first entry to the challenge and go in-depth about my experience making it.

Disclaimer: This is not a tutorial, just a peek into my development process!

**Pong - Available now!**

A classic Atari title remade using modern tools and modern design. This iteration of the original game uses Google’s equally recognizable and classic Material Design framework as the primary inspiration for its visual style. Work your way up through the difficulty levels or play against a friend.

Getting Started

After years of coding as a hobby, making a basic Pong clone should have been a breeze, but for me, the challenge wasn’t about just getting a ball to bounce—it was about actually finishing a project, something I’ve always struggled with. If you’re doing the 20 Games Challenge, my advice is simple: focus on getting things done. Finishing is a skill just as important as coding itself. I knew that for me to see this project through, I had to make it fun—something more than just another Pong clone. So, I set out to put my own spin on it, hoping to create something unique.

The first step was figuring out a concept I actually wanted to execute, and that proved harder than I expected. I spent weeks with the idea lingering in the back of my mind, but no matter how much I thought about it, nothing came to me. I couldn’t recall a single time in my life when I had even played any version of Pong regularly, which made finding inspiration even trickier. Anytime I found myself laying in bed, I racked my brain for ideas—until finally, after what felt like forever, I had an minor epiphany.

I juST HAD to pick an aesthetic

At first, that might sound like an obvious choice, but I was getting caught up in trying to find ways to make the gameplay more exciting. In hindsight, it feels like a silly roadblock to have faced. I might have eventually come up with a new mechanic or some way to complicate the game, but the key word there is “complicate”. I needed to keep things simple if I was actually going to finish the project, and honestly Pong is a classic for a reason. Sometimes, simplicity is all you need.

I decided to focus on creating a polished yet faithful experience—something that works well and feels good to play, but just saying that doesn’t make it any easier. I must’ve opened Paint.NET a dozen times, trying to mock something up to get me started. For that I was browsing Lospec to grab a color palette, but nothing really spoke to me. At some point in this process my internet briefly cut out, thus reminding me of and bringing me to the Google Chrome Dino Game.

It was pretty much at that point that the synapses in my brain fired and I made the connection. I was remaking one of the most classic and recognizable games, so why not give it a similarly classic and recognizable theme, backed by years of Google’s R&D?

Finally, my mind flooded a clear vision for the game.

Visualizing

Fortunately, I had known about Google’s Material Design framework, which turned out to be a powerful resource moving forward. My main goal wasn’t to strictly follow the framework’s specifications, but rather to capture its recognizable elements. At the time of writing this, Material Design has three separate iterations, and honestly, nothing I created really aligned perfectly with any specific version. Instead, I focused on blending the essence of the design, aiming for something that felt familiar.

When it comes to popular uses of Google’s design framework, there were plenty of options to draw inspiration from, like YouTube, Gmail, Android OS, and of course, the search engine itself. With no shortage of references, I looked closely at the various sign-in pages Google has used over the years. I spent a few hours in Paint.NET crafting a mock-up of the final menu design, which would end up being precisely what you see in the finished game.

I pulled the key colors I needed from a simple Google search and sampled some images for accuracy. I also discovered that Google has custom in-house fonts, like Product Sans, which they use for their products. Fortunately, they also have some freely available fonts, including Roboto and Open Sans—an excellent free alternative to Product Sans.

Overall, the logo is my favorite part. I felt it was the deciding factor in whether someone might be fooled into thinking Google had made it. With the goal of capturing the vibe of real Google product logos I focused on incorporating the recognizable colors, font, and even the aspect of the "product" itself. Take Gmail, for example, where the letter "M" doubles as both the letter for "Mail" and the folds of an envelope. While my design isn't quite as elegant as that, I decided to make the "O" into a ping-pong paddle with the ball in the center. It’s a simple touch, but it adds a certain charm without compromising readability.

Hopefully in the future I can come up with more clever designs like this!

Soundscaping

It is very seldom that I reach the point of developing a game where I’m adding sounds or music. With little to no skill in this department I knew I’d be looking for a sound-pack to use. It only took a moment for me to locate Product Sounds, a wonderful resource available for free to download on the Material Design 2 website. Be aware that it does have a license which I suggest you read carefully if you want to use it.

Here’s some examples of sounds I’d play from the pack anytime the ball would hit something:

Hopefully you’ll have played the game and heard one of these sounds for winning and losing respectively:

Beside those examples, all the interactable items on the main menu also make sounds, and there are a few more you might hear in-game. That said, there’s one notable absence—music. That’s intentional, as the original Atari version of Pong didn’t have music, so I didn’t want mine to either. I felt that adding music would have detracted from the simple and minimal experience I was aiming for.

When you take these sounds out of the context of the game, it’s clear that they’re the kind of sounds you’d typically find in an app or on a website. Still, I felt in the context of my game they were exactly what I needed to make the experience feel complete—almost like something Google might’ve actually created themselves.

A Quick Mention

As a reminder I develop using the GameMaker Studio 2 engine, and I also typically do so using the latest beta release as long as it doesn’t cause me too many issues. You can actually find me listed on the GameMaker Community page as a meetup host for Arkansas.

If you’re interested in GameMaker, game development in general, or even just games of any kind and you wanna chat, showcase your projects, or even potentially attend a GameMaker meetup:

Feel free to join my Discord using this invite!

Breaking Ground

While not my most impressive project when it comes to technique, its time to talk about the code and how I structured this project from the start. I’ll be the first to point out that my code writing style can be all over the place sometimes, so try not to get too upset if you spot any inconsistences. The way I structure things is just based on my preferences and experience. Everyone develops their own style and approaches over time, so don’t put too much stock in that aspect of my examples either.

// Possible game states
enum game { 
	menu,
	start,
	rally,
	point,
	finish
}

// Initialize to default state
global.state = game.menu;

I always start off by making a controller object that manages all of the other objects. It’s the only one I place manually in the room, and it’ll handle the majority of the game logic.

In the create event I listed out all the possible states the game could be in with an enumerator, and I defined a global variable set to the default state. As you can see, I opted to utilize some Tennis lingo in leu of better terms.

From there I went ahead and defined the default game settings along with a small array containing the difficulty setting as strings, which I could later use for easy drawing.

// Difficulty options
difficulty_str_array = ["Easy", "Medium", "Hard"];

// Settings
difficulty = 0;
difficulty_str = difficulty_str_array[difficulty];
two_player = false;
points_to_win = 3;

After that I decided it would be best to put all of my GUI related code into its own object, as to not clog up the manager object with a ton of animation, sound, and button-related stuff that I knew I’d need. At the end of my controller objects create event I spawned the GUI object like so:

// Spawn GUI object
instance_create_depth(0, 0, 0, obj_gui);

Interfacing

By this point I already had the earlier discussed mock-up of the menu, so one might guess that I separated it into various sprites where necessary and imported all of them to draw onto the screen. That is probably what a normal person would of done, but I was on a quest to find something I could over complicate with this project, and so I did.

I decided to use a pair of assets called Clean Shapes and Scribble Deluxe both created by Juju Adams. Clean Shapes is a library for rendering primitive shapes with SDFs and Scribble Deluxe is a feature packed text renderer which happens to support SDF fonts. These would be the key for achieving the look I was aiming for with the project.

I mention SDFs rather frequently, so here is a simplified explanation of what they are.

Signed-Distance-Functions or SDF, as as popularized by the brilliant Inigo Quilez, are typically used inside of a shader to render shapes which are defined mathematically and thus have potentially infinite detail. During rasterization, an SDF can be rendered as detailed as the resolution of your display allows.

These functions typically take in the specifications of the shape (position, size, etc.) along with another position to check as the input. The function then determines if the the shape inhabits the checked position and returns a distance value. The distance value if positive indicates that the position is outside of the shape. On the other hand, a negative distance value means the position is inside of the shape. Using this we can determine whether or not the GPU should color a pixel, or otherwise if we should set it to be transparent, a background color, or discard the pixel altogether.

XorDev has an excellent blog post on GM Shaders where he talks about SDFs. I recommend checking it out here.

With that out of the way, lets talk about how I used them!

For the setup, I probably could’ve stored my colors in a better way but this was good enough for me. I’m sure you also spotted that I’ve defined my target resolution with a 2 component vector struct . I always use these in my projects as they are so convenient and can make your code so much cleaner. If you want to use them I suggest checking out Foxy Of Jungle’s awesome library called TurboGML. It has vector structs and a ton other useful stuff that can speed up the development of any project. For Clean Shapes I enabled anti-aliasing, and because I have to manually update the cursor to behave as expected for the GUI I store the cursors state.

// Resolution
res = new vec2(1280, 960);

// Clean Shapes AA
CleanAntialiasSet(true);

// Colors
red		= #d34836;
blue		= #4285F4;
white		= #ffffff;
green		= #34A853;
yellow		= #FBBC05;
dark_blue	= #407CE0;
light_gray	= #d2d2d2;
dark_gray	= #2d2d2d;
lighter_gray	= #f1f1f1;
darker_blue	= #4173CC;

// Cursor state
cursor = cr_default;

From there I manually defined all of the shapes and text from my menu mock-up one by one.
I’ll provide some examples here, but the total was 11 shapes and 11 text elements.

// Menu box
menu_size = new vec2(512, 600);
menu_pos = res.Mul(0.5);
menu_box = CleanRectangleXYWH(menu_pos.x, menu_pos.y, menu_size.x, menu_size.y);
menu_box.Blend(white, 1.0);
menu_box.Rounding(30);
menu_box.Border(2, light_gray, 1.0);

// Logo text
logo_scrib = scribble("P[#34A853]o[#FBBC05]n[#d34836]g");
logo_scrib.align(fa_center, fa_middle);
logo_scrib.starting_format("fnt_opensans_72b", blue);
logo_scrib.build(true);
logo_pos = menu_pos;
logo_pos.y -= 188;

Once the menu was completed and ready to go the next step was going to be to make it interactable.

For clickable text I was in luck, as Scribble Deluxe has the convenient regions feature which combined with the provided region_detect function meant I could easily check if the mouse was hovering over one of these text elements. Things such as the play button were done using the point_in_rectangle function. Combined with some simple checks to see if the mouse was held or clicked that was all it took!

Here’s an example of those in action:

/// Create Event:

// Defining clickable text
difficulty_left_txt = "[region, difficulty_left]<";
difficulty_left_scrib = scribble(difficulty_left_txt);
difficulty_right_txt = "[region, difficulty_right]>";
difficulty_right_scrib = scribble(difficulty_right_txt);

/// Step Event: 

// Clickable text detection
var difficulty_left_hovered = difficulty_left_scrib.region_detect(difficulty_left_pos.x, difficulty_left_pos.y, mouse_pos.x, mouse_pos.y) != undefined;
var difficulty_right_hovered = difficulty_right_scrib.region_detect(difficulty_right_pos.x, difficulty_right_pos.y, mouse_pos.x, mouse_pos.y) != undefined;

// Clickable button detection 
var p_hs = play_button_size.Mul(0.5);
var p1 = play_button_pos.Sub(p_hs);
var p2 = play_button_pos.Add(p_hs);
var play_button_hovered = point_in_rectangle(mouse_pos.x, mouse_pos.y, p1.x, p1.y, p2.x, p2.y);

As shown above, just like how you can store the result of a function or mathematical operation in a variable, you can also store the result of a comparison that you would typically use for the expression of an if-statement. So to clarify the above example, when I check if the output of the region_detect functions do-not equal undefined, I’m actually storing true or false in the difficulty_left_hovered and difficulty_right_hovered variables respectively.

With the building blocks I laid out, I put all of the GUI logic within a switch-statement based on the state of the game which we defined earlier in the controller object.

Paddles

It was time to move on to gameplay, and first on the agenda was the paddles.

I stored the colors I’d use, and grabbed the center y-position of the screen to use as the spawn position so it could return there at the end of each match, and also so I could initialize the actual position. I needed the movement to feel smooth so I used velocity which I stored in a vector-2, although the x-component did go unused.

For constraining the paddle I also stored the vertical boundaries, along with some some values I would use later for a bounce effect which would happen when the ball collided with the paddle.

Here’s what that looked like:

// Colors
color_fill = obj_gui.white
color_outline = obj_gui.light_gray;

// Spawn position
spawn_pos = obj_gui.res.Mul(0.5);
spawn_pos.x = 150;

// Paddle size
size = new vec2(50, 175);

// Position
pos = variable_clone(spawn_pos);

// Clean Shapes paddle
paddle = CleanRectangleXYWH(pos.x, pos.y, size.x, size.y);
paddle.Blend(color_fill, 1);
paddle.Border(2, color_outline, 1.0);
paddle.Rounding(10);

// Velocity
velocity = new vec2(0, 0);
max_velocity = 10;

// Min/Max position
min_pos = size.Mul(0.5);
max_pos = obj_gui.res.Sub(min_pos);

// Bounce animation
bounce_lerp = 0;
bounce_dir = new vec2();
bounce_offset = new vec2();

Over in the step event, the controls and movement were fairly simple. The logic for collision is entirely in the ball object, and because of that the ball is also what triggers the bounce effect so I just always have the code running for it to ensure the offset always goes back to zero. Speaking of which, the bounce effects takes advantage of Easing Curves, another great library from Juju Adams.

I’m not sure why I opted to recreate the paddle shape every frame instead of using matrix_set in the draw event, but perhaps the answer was that I was just being lazy.

// Check for keys held
var input = -keyboard_check(ord("W")) + keyboard_check(ord("S"));
				
// Apply input to velocity
velocity.y = lerp(velocity.y, max_velocity * input, 0.1);
		
// Move
pos = pos.Add(velocity);
		
// Friction
velocity = velocity.Mul(0.9);

// Clamp position
pos.y = clamp(pos.y, min_pos.y, max_pos.y);

// Bounce animation
bounce_lerp -= 0.01;
bounce_lerp = clamp(bounce_lerp, 0, 1);
bounce_offset = bounce_dir.Mul(tween(0, 1, acElasticIn, bounce_lerp) * -(obj_ball.spd * 5));

// Update paddle shape
paddle = CleanRectangleXYWH(pos.x + bounce_offset.x, pos.y + bounce_offset.y, size.x, size.y);
paddle.Blend(color_fill, 1);
paddle.Border(2, color_outline, 1.0);
paddle.Rounding(10);

All of this is placed throughout various sections of another switch-statement as the paddle can be either player-controlled or AI. The AI state of course being for use in single-player mode.

There was a lot of variables I needed for AI paddles which helped to make them beatable while still being potentially challenging. For example, I gave them a focus level which decreases when the ball is not heading towards them and affects how quickly the paddle reacts.

Another interesting thing I did was to make it so the AI doesn’t try to align the middle of the paddle with the ball, and instead they have a range where they consider themselves to be in a good enough position. This acceptable range is made smaller for higher difficulties. Specifically for hard-mode the paddle will also start using a line_intersect function based on the balls direction to determine where along the axis of the paddle the ball is heading towards. This behavior makes the AI try to align itself with where the ball is going rather than just where it is on the y-axis.

You might notice that I determine the direction with a conditional that uses ternary operators. If you don’t know about them already they are basically just shorthand for if-statements, and I suggest familiarizing yourself with them if you haven’t. They can sometimes make for cleaner code, albeit slightly less readable at first glance.

Here’s a snippet of how the hard-mode AI works:

// Direction
var dir = obj_ball.pos.y < pos.y ? -1 : 1;

// Hard
if obj_main.difficulty = 2 { 
	
	// Settings
	var ball_targeting_threshold = 0.2;
	var interest_decel_rate = 0; // Stay focused
	
	// Line points
	var l1 = new vec2(pos.x - (size.x * 0.5), 0);
	var l2 = new vec2(pos.x - (size.x * 0.5));
	
	// Intersection test
	var line_test = line_intersect(obj_ball.pos, obj_ball.dir, l1, l2, obj_gui.res.y);
	
	// Valid results
	if line_test != undefined {
		line_test = line_test.Round()
		dir = line_test.y < pos.y ? -1 : 1;
		dist = abs(line_test.y - pos.y);	
	}
}

// Focused
if sign(obj_ball.dir.x) = side {
			
	// Increase interest
	interest = lerp(interest, 1, interest_accel_rate);
			
	// Apply
	dir *= round(interest);
			
} 
else  // Unfocused
{
	
	// Decrease interest
	interest = lerp(interest, 0, interest_decel_rate);
			
}
		
// Set velocity
if dist > size.y * ball_targeting_threshold {
	dir = sign(dir)
	velocity.y = lerp(velocity.y, dir * spd, 0.1);
}

Click here if you want the line_intersect function!

function line_intersect(pos, dir, p1, p2) {
	
    // Line segment p1-p2
    var x1 = p1.x;
    var y1 = p1.y;
    var x2 = p2.x;
    var y2 = p2.y;

    // Object's line
    var x3 = pos.x;
    var y3 = pos.y;
    var x4 = pos.x + dir.x;
    var y4 = pos.y + dir.y;

    // Compute the determinant
    var denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
    
    // If denom is zero, lines are parallel and there's no intersection
    if (denom == 0) {
        return undefined; // No intersection
    }
    
    // Calculate the intersection point
    var t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
    var u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom;
    
    // Check if the intersection is within the line segment
    if (t >= 0 && t <= 1 && u >= 0) {
        // Intersection point
        var ix = x1 + t * (x2 - x1);
        var iy = y1 + t * (y2 - y1);
        return new vec2(ix, iy); // Returns true and the intersection point
    } else {
        return undefined // No intersection within the segment
    }
	
}

Ping-Pong

All that was left was to implement the actual ball, and beyond that the rest just fell into place.

The create event of ball is very similar to the paddles, although we don’t use velocity here because the ball will only ever have a constant speed which only increases a fixed amount during collisions with the paddles. For the movement direction I use a vector-2 which when multiplied with the speed would become the balls next position.

// Spawn position
spawn_pos = obj_gui.res.Mul(0.5);

// Position
pos = variable_clone(spawn_pos);

// Reset animation
reset_pos = new vec2();
reset_lerp = 0;

// Colors
color_fill = obj_gui.white;
color_outline = obj_gui.light_gray;

// Clean Shapes ball
radius = 20;
ball = CleanCircle(pos.x, pos.y, radius);
ball.Blend(color_fill, 1);
ball.Border(2, color_outline, 1.0);

// Direction
dir = new vec2(choose(-1, 1), 0); 

// Speed
default_spd = 6;
spd = default_spd;

I mentioned earlier that we calculate the collision all within the ball object, and that’s true. There’s always two paddles when this code runs so the first thing we do is figure out which one we’re closest to.

With that we reach an actual collision check, and I take advantage of the rectangle_in_circle function, which I give a bounding-box belonging to the paddle. The bounding-box is an array of two separate vector-2 positions created using the center of the paddle offset by half of its size in either direction towards its corners. We’re gonna check this collision recursively next, so I also store whether or not a collision happened atleast once for use in things like sound effects and for speeding up the ball.

I found that in some circumstances a singular collision wasn’t enough to fully stop the ball from overlapping with the paddle, which caused all sorts of issues. My next approach was to run a while-loop wherein I would displace the ball until no overlap was detected. Was there a better way to do this? Probably, but I found this worked which meant I could move on and hopefully finish the game.

While these collisions continue to happen I average the collision-normal together so that the final bounce-direction would align with the the displacement even in trickier situations. If you have a keen-eye you might also realize this means I don’t use a physically-accurate bounce with a reflected angle that one might typically expect to see.

I preferred the way this method played, so I chose to leave it so that the balls bounce direction was based off of this displacement/collision vector. It gives the player more control over the ball and in a competitive game that feels right to me. If I ever update the game I’ve considered adding options in a secondary menu that would maybe include changing this behavior.

// Collision
var paddle_0 = instance_find(obj_paddle, 0);
var paddle_1 = instance_find(obj_paddle, 1);
var col_inst = pos.Distance(paddle_0.pos) < pos.Distance(paddle_1.pos) ? paddle_0 : paddle_1;
var col_bbox = col_inst.bbox;
var collision = rectangle_in_circle(col_bbox[0].x, col_bbox[0].y, col_bbox[1].x, col_bbox[1].y, pos.x, pos.y, radius);
var col_happened = collision = 0 ? false : true;
			
// Collide until displaced
while collision != 0 {
		
	// Directional vector from the center of the paddle to the ball
	var collision_normal = pos.Sub(col_inst.pos).Normalize();
	
	// Edge cases where the direction is nearly aligned with the X or Y axis
	if abs(dir.x) > 0.95 or abs(dir.y) > 0.95 {
			
		// Force a directional offset or exagerate a tiny existing directional offset
		var y_sign = sign(collision_normal.y);
		var offset =  y_sign = 0 ?  choose(-0.1, 0.1) : y_sign * 0.5;
			
		// Apply
		collision_normal.y += offset;	
			
		// Renormalize with offset
		collision_normal = collision_normal.Normalize();
			
	}
	
	// Set new direction
	dir = collision_normal;	
		
	// Move 
	pos = pos.Add(collision_normal);

	// Recheck
	collision = rectangle_in_circle(col_bbox[0].x, col_bbox[0].y, col_bbox[1].x, col_bbox[1].y, pos.x, pos.y, radius);
		
}

Outside of collisions we move the ball as normal:

// Move
pos = pos.Add(dir.Mul(spd));

Conclusion

In the final game there is a bunch more code than what I talked about in this blog post. Things like game-state transitions, animations, sounds effects, and a bunch of time spent tweaking and polishing the experience.

Looking back on the game there is a challenge that I faced which I never quite figured out. I put all this effort into setting up and talking about SDFs and their “infinite resolution”, but you might notice sometimes it still looks slightly off as it’s possible for there to be artifacts on the edges of shapes and text. This is due to the games size and resolution being affected by a bunch of stuff including your OS, browser, display, and DPI settings. Neither the game or the HTML I-frame its encased in corrects for this, and its a problem I’m still trying to figure out with my next entry for challenge #2. If I can figure out a solution I will likely go back and update Pong, which as I mentioned has a few extra features I may decide to add.

Truth be told, once I started working on the game and I had my concept it still took me a few weeks to finish. Let that be another lesson that its okay to do things at your own pace. I’ve been working on games for years and I still spent almost a month just figuring out and putting together a clone of Pong, one of the simplest games.

Regardless of all that, I had fun working on it and that is the main reason I finished it at all.

Thanks for Reading!

If you played it, thankyou so much! If you took the time to even just skim through this blog post I really appreciate it.

Incase you can’t play it right now, here’s a video showcasing the game:

Comments

Pong: Materialized

20 Games Challenge - Game #1

Introduction

Getting Started

I juST HAD to pick an aesthetic

Visualizing

Soundscaping

A Quick Mention

Breaking Ground

Interfacing

Paddles

Ping-Pong

Conclusion

Thanks for Reading!

DERIK.Digital

Pong: Materialized

20 Games Challenge - Game #1

Introduction

Getting Started

I juST HAD to pick an aesthetic

Visualizing

Soundscaping

A Quick Mention

Breaking Ground

Interfacing

Paddles

Ping-Pong

Conclusion

Thanks for Reading!

Experiments and Progress

DERIK.Digital