GamesDoneQuick / gdq-break-channels

Break Screen Channels for GDQ broadcasts
Other
141 stars 45 forks source link

feat: Adding Breakout channel #5

Closed plamoni closed 1 year ago

plamoni commented 1 year ago

Plays a game of breakout centered around the donation tracker.

https://github.com/GamesDoneQuick/gdq-break-channels/assets/306088/d712909d-cffe-4fac-9436-5540ca5f3e8a

Description

Creates a new channel on the GDQ break channels featuring a game of breakout. In the spirit of GDQ, this entire channel (including programming the game and associated AI) came together over the course of about 24 hours.

The game has a built-in AI that's sort of OK at playing Breakout. Each time a donation is received, a new ball is added to the mix (see above). Once the board is cleared, it's reset back to its base state and provides a "free" ball to continue play.

The donation tracker is shown at the top and fits without overlap up to >$10MM.

This change adds a new filter from the Pixi JS filter library for CRT filtering (see package.json) to make it look more retro.

A longer demo that completes a game can be found here.

Checklist:

If your change is for a new channel, uncomment and check the following

plamoni commented 1 year ago

I would ask that the CRT filter be made just a slight bit less intense. I like the texture it adds, but I think it just barely ends up with the scanlines being visually distracting.

I agree that the CRT filter felt more like a bug than a feature (a couple folks I showed it to thought it might be compression artifacts rather than intentional). My fix was to go slightly the other way: I did turn down the intensity of the noise, but added a very light gray backdrop so that you could more clearly see the filter across the entire screen. Here's an updated demo:

https://github.com/GamesDoneQuick/gdq-break-channels/assets/306088/e8cbbcf9-2202-47c4-9c50-7a1c4cb401b4

Let me know if you'd like to see more tuning.

I would make the motion of the paddle slightly less erratic, especially when there aren't any balls yet.

Again, you took the words out of my mouth on this one. I do like the wobble it gives when there's no balls (it feels like an athlete ready to sprint into action), but the constant motion during ball chases felt sloppy. My most recent commit updates the AI behavior to allow pauses when it thinks it knows where it needs to be. This makes for much less "wobbling". See updated demo to get a feel for how it moves now.

Quite often the balls can end up moving almost entirely horizontally, which is not very interesting if donations aren't coming in, and makes it far less likely that a board will be complete any time soon. Maybe the balls should have a minimum absolute vertical velocity?

I'll see what I can do on this front. I have a couple ideas how I might manipulate ball travel to avoid low vertical velocity without having to mess with the collision physics.

I think it's better if the balls get sent up first rather than towards the paddle, since that way each donation is more likely to have an impact on the board before being lost, since the paddle will often miss them when there are several on screen.

This is an easy one. I'll drop a commit to do that in a few minutes.

Some kind of screen or animation for clearing the board entirely would be neat.

Completely agree. This falls into the "make it more fun" basket. I've got a space for it in the code. I just need to hone my PIXI skills a bit to figure out how to do something neat.

plamoni commented 1 year ago

Applied most of the requested changes (including tuning down the CRT filter a couple more notches and removing the back-and-forth wobble when there's no ball to chase). Also included the requested minimum-vertical-velocity (you can see this in effect when I spammed a bunch of donations --- the balls could go directly sideways, but the limiter prevents that).

https://github.com/GamesDoneQuick/gdq-break-channels/assets/306088/14891e46-1da6-445f-9bb4-7d3a0757c79e

plamoni commented 1 year ago

Responded to review comments (this is actually my first published React code, so I appreciate the feedback on using React right).

Also added in a simple victory experience. It's not much, but it's better than nothing:

https://github.com/GamesDoneQuick/gdq-break-channels/assets/306088/526b0899-431f-4574-aa70-31fc68071992