Welcome to the devlog of "Farbenfall" a game from EarlGrey and HopFlash!

EarlGrey and I are friends and colleagues (not yet in game development ;) ). He is a design artist and I'm a software developer.

Day(s) before theme released for "My First Game Jam: Winter 2021"

EarlGrey and I were randomly talking about our potential game and he had the spontaneous idea about waterfalls with different colors which can merge into different (realistic) colors like yellow + red = orange

Because I thought that this colorful base theme would push some positive vibes into the world I totally agree that this can be our fundament for the game of this GameJam.

Then we played around with some words for the game name and finally chose "Farbenfall" which is a word transition from "Wasserfall" (german word for waterfall) and "Farben" (german word for colors).

We were sure to do a 2D puzzle-like game. I want to use Python and PyGame and he wants to use Figma for the art.

Some time ago I streamed on Twitch mainly for fun but there was a little community built up and therefore I have a (mostly german) discord server where I have still contact with some very nice people and I opened up a gamejam channel to discuss with EarlGrey and other interested peoples.

I talked about this GameJam with some friends and I think I will have several playtesters when it is time for that :)

Day 1

At 9am in my time zone the theme "locked" was announced. Normally my day is filled with family activities and such so I normally will have time to work on this GameJam primary after 8pm but I can think about brainstorming things from time to time. After some time thinking about how the theme could fit into our game it manifests into an idea that I want to discuss with EarlGrey on Day 2 because this will be our first day we both have time to really meet virtually.

I started some organization stuff like this devlog, reading GameJam infos, thinking about tools like Trello and such.

I'm not sure at the moment if I will use PyCharm for the Python development (like I always do) or try out Visual Studio Code (which I used at work for JavaScript and other coding but not for Python) but I think because of this Jam is motivating to do new stuff I will try out Visual Studio Code.

I set up a GitHub project: https://github.com/HopFlash/Farbenfall

Day 2

I had some time during the course of the day so I installed Visual Studio Code and the Python support plugin. I think I will miss some PyCharm features but we will see.

I installed PyGame into my Python and realized that PyGame had its 20 years anniversary last year in October and so they had released 2.0. I think that is an awesome achievement.

Because I’m interested in it and it will be necessary to see if and how it works I started my research for Exe-Building. I searched for some comparison sites between PyInstaller and Py2Exe because these two seem to be the most promising ones.

Based on my research I started with Py2Exe. I set it up and it worked fine with my hello-world script. I wrote a little function to automatically add the static files like images and audio/sound files, wrote a batchfile to get a clean dist directory, played around with some Py2Exe options so that I got one exe file with only a few DLLs. I got a temporary test program icon and put it in, managed to get “Farbenfall.exe” as output name and was a little thrilled that it worked so smoothly.

Then I got a little example pygame script from a tutorial site and tried the exe-building-process again but I got some potential error and warning messages and the final exe was not working.

So I tried PyInstaller. It runs a little slower to build the exe file (first time it runs) but after setting a few flags and options it worked nicely. It produced one Exe-File without DLLs. I used xcopy in my batch file to move the static files into the dist directory and my pygame example worked as intended. Only the UPX (exe-File compressor) didn’t want to work but I invested no more time because at the moment it’s not necessary.

I recognized that VSC and it’s pylint had some problems with pygame so I whitelisted it in VCS settings (pylintArgs with --extension-pkg-whitelist=pygame).

I prepared the itch.io game page and provided a minimum set of known metadata. I think EarlGrey has some nice skills to prepare that page when we have a plan of how it will look and be played.

After reading the quality-guidelines of itch.io (https://itch.io/docs/creators/quality-guidelines) and the info page about there game upload tool butler (https://itch.io/docs/butler/single-files.html) I need to rethink about the PyInstaller generation of a single exe file because it makes very much sense because butler handle the patched-data which is needed for updating later with a very elaborated concept.

Now I took the parameter away so that PyInstaller doesn’t create only one file but then my Windows Defender (antivirus software) alerts that the new little Farbenfall.exe is dangerous and a potential trojan virus. So I think it’s no option because potentially too many people will have Windows Defender running.

Now I uploaded both Farbenfall.exe variants to Virustotal (https://www.virustotal.com/gui/) to test them with over 70 antivirus tools and both files have (partly different) scanners which let them look like a virus. Awesome...not :(

Ok, after trying some options and trying Py2Exe again (you should always preserve things you tried) I managed to get a result I can live with:

Py2Exe with no bundling and UPX (perhaps not necessary) and I get a running example app, many small files (good for distribution with butler) and only 3 (irrelevant) antivirus scanners that think it’s a virus.

Definitive enough for today. 

Tomorrow I will commit things into GitHub and I really need something visual to be happy and to feel that the project is moving forward (it is moving forward sure but too few things to really see and recognize).

Day 3

Today I talked to EarlGrey explicitly about our gameplay idea and we found a very satisfying one. Perhaps he can sketch something up tomorrow.

Independently I can make the first steps with pygame because now we know what we want to do. And there will be colorful waterfalls, something that is locked and puzzling. I’m very excited.

I committed the first basic things into the GitHub repository and will do that in an ongoing manner. This is not only for backup reasons or collaborating reasons but additional for documentations and history reasons how the things go through the development process.

Setting up the Trello board is the last thing of organisation for today and I don’t want to overload the organisation part. So from now on we can throw our work pieces into Trello and get an overview of what we want and have to do.

I implemented the basics for the pygame display and show a background by using the tutorial explanations (https://www.pygame.org/docs/tut/ChimpLineByLine.html).

And Exe-Generation is still working :)

My final mission for today is setting up a provisional intro text with the default font of pygame. It should be central and has each character in a different rainbow color.

Of course this doesn’t represent the real intro screen but it was my first test of pygames handling fonts and still a test for PyInstallers work.

Day 4

Today we made a sketch. Ok, EarlGrey had done the real work and I threw ideas on him (and he used his ideas too ;) ) but he managed to make a conceptual drawing and with the following little explanation I hope that our game idea is understandable. 

This could be a level (a fairly easy one) of our puzzle game. There are three waterfalls (later levels may be different colored ones and/or more). You need to unlock the portal in the front right. There are white (unpainted) blocks in it and you drag it with your mouse cursor out, see the needed color and you have to colorize this block so it has the color that is shown.

You can manage this by holding the block in/under the colored waterfalls and you need to mix the colors to get the fitting color for this block. You get more of the particular color you dip your block in when holding it longer at/in the waterfall. There are 10 (?) color steps.

e.g. when you need to make the block orange you hold it for 5 steps in the red and for 5 steps in the yellow waterfall so you get orange. But with these 10 steps each, you have 1000 different possible colors. These blocks could have different forms like rectangles or perhaps triangles etc. It would be annoying when you need to colorize 4 blocks with the same color but we will figure out those gameplay mechanics later.

When you have the correct color you can put the block back into the portal. After coloring all blocks you will see a little (blocky) picture in the portal and it unlocks and lets you pass or sucks you in. What exactly happens will depend on our story we need to think of in the future. I hope you get the base gameplay idea out of this description.

While EaryGrey draws the sketch I tried to load an example waterfall PNG because I wanted to know if I could change the color of the waterfalls easily with pygames power so we only need one waterfall image to potential get unlimited possible ones.

But I had trouble loading the Photoshop exported PNG and remembered that there was an issue or limitation that pygame can't load the image when using PNGs and it doesn’t have some PNG-format fitting. I loaded the PNG into GIMP and exported it. Then it worked but had no graded transparency. So it was not the desired result.

But that problem I will try to figure out tomorrow.

Day 5

Today was a lazy day in terms of the GameJam.

Day 6

EarlGrey and I searched for the reason why PNG transparency didn’t work. After some research I found that the loading of my PNG was with the colorkey functionality and I learned that there is the per-pixel alpha variant. After understanding the different modes of transparency I changed my code and it worked as intended.

Then I tried to change the color of the waterfalls and the new made sponge on the fly. The sponge worked as intended because I only needed to replace the white parts with a new color. The waterfalls are indifferent  shades of color so it didn’t work out of the box but it wasn’t really necessary because EarlGrey painted me three separate waterfalls in different colors.

After color changing I implemented resizing of the sprites. And it looked like it’s fine.

Next step was moving the sponge around with the mouse cursor. I discovered that the cursor image format is a little bit special but for now I use the system hand cursor.

After that I looked into mouse movement and now when the game window has the focus, mouse cursor and center of the sponge should move together. The relative movement fits and was synchron but not the absolute position on the screen. I realized that by resizing the image I never updated the internal rectangle and that is where the positioning is oriented. Some try and errors and docu reading later I use now an x and y position variable in my sprite object and refresh the rectangle position in the update function that is called every frame. Because the waterfalls and potential other items (the sponge too when it is not grabbed) don’t move all the time I used a flag if the position should be updated. Now it’s working fine and I made a gif with medium quality I have to say but I think you see what is accomplished today.

Getting to see more dev gifs is always cool ^^ I do also appreciate that your collaborator is called Earl Grey. That's a top-class username for sure

Day 7

Lazy day because I’m a little tired after a long Homeschooling day (in the parent role), but I started my PyCharm and I think I switched (back) to it because it has some nice features I missed at VSC.

And I’ve done a little bit refactoring of the Python code. All classes in one module are bad style but I think I will do some more tomorrow during the day.

Day 8

My plan was to use some free daytime to make some progress but real life breached into this plan and I had to handle some surprise home sanitary cleaning stuff. I count on day 9.

Day 9

Today I started with a little cleanup. I wanted to build the classic three Intro-screen buttons “Play”, “About” and “Quit” and because I read some pygame documentation I realized the benefits of sprites and groups. So I restructured my classes to fit more to the pygame style.

Later I have to think about resizing because I don’t want to have a static screen resolution all sprites need to be resizable and so they need repositioning too

After that I put some work into a little system to use the pygame event system so that my button classes can switch to different scenes like Intro, Game and About (and Quit but that was trivial). Finally I have my first construction to have Buttons or other clickable things in the game to interact.

Because now the screen is dynamic enough I inserted a white background that will be copied onto the screen every frame. I researched a little bit because I thought there could be a better performance wise tactic but if we will have a dynamic background it’s the best variant in pygame. The other option is a group which returns the rectangles that need to be refreshed in the screen and update only these. But it’s only really relevant when you have software rendering and a static background. Sure at the moment we have a static white background but I hope this will change and if not the code changes will be straightforward.

Day 10

After checking-in the recent code on GitHub EarlGrey started working on visual things and myself on the necessary background code.

The title on the intro screen “Farbenfall” got a new nice font and now we use a 16:9 screen standard resolution (1280x720). Later I need to think about this resizing part but after the jam because I want one playable level as minimum condition and that could be hard to get because only a few timeframes are left.

I restructure the code (again...other parts) to have scenes and for playing the game the playfield scene. Every scene has its own event loop, so when the scene is switched I don’t have to care about different scenes in my main event loop. I only set the event loop of the active scene and go for it.

Meanwhile Eary Grey finished our intro buttons and they look really nice and give the impression how our game world will look like (at least in our first level).

Then I implemented that you can grab the block with the mouse and when you touch the waterfall it gets the color of it, only one-time because I had a fallacy when I colorized the white block I can’t replace the color white again. I need to investigate if I can do something with pygame masks or if I need to save the reference image so I can use white replacing every time.

Day 12

We made progress!

Pygame has a mask collision detection possibility so I add the mask to my sprite class and only half-transparent pixels of the waterfalls are recognized to color the block.

Now I took a reference image as a pygame pixelarray to change the color of the block more than once. When changing color I use the reference pixelarray to create a new surface, replace the white color and set it as the new image.

In this context I realized that I had a bug when resizing sprites because the positioning and the control over the rect was wrong. So I rethinked it all and made a more pygame-like method for repositioning the sprite without needing the sprite update function.

Earl Grey created some very nice playfield backgrounds where our waterfalls fit as separate objects so I can still check the collisons.

Then I was curious about the framerate. Sure there is not much going on and I have a decent CPU and GPU but it's always nice to see performance problems in early stages if they are huge. I limited the game framerate at 60 but to see some changes I set it up to 600 fps. Now I saw that it was something between 200-300 frames per second.

I stumbled over the clear function of the group objects and now I clear the background with the background image every frame more efficiently. The fps climbed up to 400-600.

I began to investigate how these layered group works to have control over the z-positioning of my sprites but that needs to wait because it was already too late and time for sleep.

Till now the devlog will be on Farbenfall's gameinfo site: https://hopflash.itch.io/farbenfall

I need to say that I'm very happy that I joined this GameJam because I learned several things about game developement, started an interesting game idea and found a very nice discord server. Thx.