Kirby Weber

Up Stream: A Twitch Fishing Game - Design Delve

Background

Up Stream is a game I designed for viewers on Twitch. As a Twitch streamer, I wanted to set up a strong theme for my channel, while also showcasing my game design skills. This game debuted in September of 2022 and has since gone through some major updates. Through this design delve, I am exploring those changes, why they were needed, and what I learned from doing them.

The updates for Up Stream can be broken down into the following versions:

1.0 - Original

1.5 - Text & Bot Update

2.0 - Fish Updates & First UI Redesign

2.5 - Fishing Scroll Fix

3.0 - Second UI Redesign

What is it?

Up Stream is a fishing game. Its purpose is to increase viewer interaction during streams. Channel points, subscriptions, and bits are all used to catch fish. Viewers can stack their fishing contributions to get a more powerful pull in 30 seconds. After the timer is up, the game pulls up a random fish. Fish caught are then displayed in the fishing scroll. The fishing scroll has blacked out fish for those still yet to be caught. The game also keeps track of a variety of stats (see Text Updates).

The Updates for this game can be broken down into three major categories:

UI Updates
Programming Updates
Bot Updates

UI Updates:

Up Stream is an integrated in the UI interface of my Twitch streams.. This has given me the unique challenge of making the game look good specifically for the stream. As time went by, I realized how the UI could be better for streams. The UI went through several changes. The changes affected the layout, color, and text of the game.

Layout:

In the 1.0 and 1.5 versions, I kept having an issue with the size of the game. It took up a lot of screen space. The main gameplay of the stream was being shrunk down smaller than what I liked, and the fishing game felt like it was overshadowing it. The caught fishing sprites and words were also blocking gameplay.

In the 2.0 version of Up Stream, the UI was made to be smaller. The water was shrunk down along with the fish scroll. The character was moved more to the left and made smaller. The stats got moved from above the fishing guy to above the fishing scroll at the bottom.

While this was an improvement over the previous versions, I still wanted something even more compact to look better in edited content and take up less space.

In version 3.0, the fishing scroll was moved above the player. The fish scroll then moved vertically instead of horizontally. Stats were moved to the bottom of the screen. This overlay condensed the fishing game so it would not overwhelm the screen, but still kept the game's core intact and visible.

When making games for stream, an organized layout is extremely important. The fishing game becoming more condensed over time helped make the visual quality of the stream go up while keeping the integrity of the fishing game. After making Up Stream, I've tried to make my other games for stream simple. This is mostly done by keeping the game in a small moveable box. This allows streamers to move the game to the spot they want, rather than having a set layout.

Color:

In the versions before 2.0, the water color the game was using did not seem right. After using it for a while, I realized that it did not fit in with the stream (personally I was really dissatisfied with the color). The water was originally not even built into the game. It was an image overlay in OBS. Since 2.0, the water became a more neutral blue and it was added as an in-game sprite.

While choosing the color for the water, I had to avoid using similar shades of blue on any of the fish. I do not want the fish to blend in with the background. Most fish avoid using a similar shade of blue.

Text:

Up Stream started off with almost no text. As the game grew and evolved, the text changed with it. Most changes to the text came because of feedback from the stream audience. The major text updates break down as follows:

Timer: In version 1.0, there was no timer. This confused viewers and made them think their inputs did not go through. This got immediately remedied in version 1.5 to give some much-needed clarity to the game.

Caught Fish Words: The game originally had words pop up along with the caught fish describing what the fish was. This kept getting into the game screen and was usually unreadable. The message is now sent in Twitch Chat by a bot. This helped keep the message up longer for the chat to read and got it out of the way of the gameplay.

Fishing Power: Alongside the timer, a text saying how much power viewers put into each cast was added. This was also to give clarity to what each pull was doing in the game. In 1.5, the fishing power would show all the time, but in later versions, it only appears when chat was actively fishing.

Stats: In version 1.0 of the game, the only stat that was shown was the "Total Fish Caught", after the first version, more text got added. In version 1.5, the text was above the fishing. Eventually the text was move to the bottom of the screen to help save space. The word "caught" was removed from "Total Fish" and "Last Fish" to help save space. The extra stats helped give viewers information and became a way to track how chat was doing.

Each stat displayed at the bottom was chosen to be displayed based on a few different things:

Total Fish: This stat has been in since the beginning of the game. I set various goals based on how many of the different types of fish chat has caught. It also creates a fun goal for viewers to move towards.
Amount Caught: Originally this stat only tracked how many fish were caught that day. Eventually I realized it would be fun to have an all time count of how many fish chat has caught.
Last Fish: Similar to the "Caught Fish Words" getting moved to the Twitch Chat, this was a way of viewers seeing what fish was just caught. The fish only stays on screen for a few seconds before moving on. This was chat could see what was caught last.

Programming Updates:

Behind the scenes, there were a lot of coding updates that were necessary for the game's growth. While this was something chat never got to see, it was important to be constantly updating and making the game better. Every fish added has its own new section of code created so it can get added to the fishing pool. The biggest update was done to the fishing scroll. The fishing scroll's code got completely overhauled to make the game run better.

The Fish Scroll:

When the game was first made, the fish that scrolled by never disappeared. Once the fish hit a certain point, they would teleport back to the start of the scroll. This never caused issues when the game only had fifty fish. Once more fish were added, the game started lagging after running for a while (especially if another game made in Unity was being run at the same time).

The fishing game would have to be restarted multiple times during the stream to get the scroll back to normal. During the 2.5 update, the scroll was changed to be run through an array. The fish now despawn once they reach a certain point out of bounds, and the array would keep track of which fish spawned next.

This ended up helping the UI. Instead of each fish being placed manually, the fish now spawned in the same locations. This made the fish more evenly spread out and kept them in a straighter line. This change also made it easier to add future fish.

Bot Updates:

When I originally planned this game, I wanted to have a chat bot. While building the game, I could get the chat bot to talk for every new session, but as soon as I left the current session, the bot refused to work. This led to a lot of frustration, and I eventually dropped the chat bot for version 1.0 of the game. Once the rest of the game was working, I went back to working on that bot. After finally getting the bot to work with the game and stay connected, I tried to come up with different ways to use it.

Fish Caught:

One piece of feedback I got back from viewers is that they would sometimes miss when the screen displayed what fish was caught. To fix this, I had the bot also post what fish was caught in chat. This went over well. In the current version, the text of the fish no longer appears on screen and only shows up in the chat.

Commands:

I added a few commands for the bot to do. That would check different fish stats that did not fit into the UI.

!count - Displays how many fish have been caught that stream
!bigboi - Shows the biggest fish ever caught.

Startup Message:

One useful thing I have the chat bot do is send a message when the game is first launched. This lets me know that the game is working without having to test it further. If the message does not appear then I know something is wrong. It is super helpful to get that feedback before starting a stream.

Afterward:

Overall, I am very happy with how Up Stream turned out. Every update to the game has only made it better. Through making it, I learned a lot about UI placement and more efficient coding practices. While I am happy with how the game currently is, I will probably always be changing it until I am done streaming. New fish will keep being added and there is always room to tweak what is already there.

To see Fish from Up Stream, please click on the fish.

Page updated

Google Sites

Report abuse