Great stuff <3
Recent community posts
Thank you for writing this up, Mattias! I enjoy reading people’s motivations for their design choices and inspirations a lot. It makes the tools more “human” to know what’s underneath, and it’s just fun to see “behind the curtain” a little bit. :)
I released this small tool last night:
You can use it to make simple “pngtuber” style vtubers. User feedback would be very valuable! If you have any problems, or if there are specific features you would like to see, let me know! 😄
Avatar creation is currently a bit overcomplicated, and it will be easiest for you if you are somewhat tech savvy. That said, nothing in here is especially complex once you learn the rules, and if you get stuck, I and others may be happy to help you get un-stuck! 😄
Note: Make sure all your avatar’s images are the same size! This is a limitation which will be removed in the next version of PNG2br.
Each avatar is a plaintext file with the extension “.2br”. Two example avatars, “bear” and “popcat” ship with PNG2br. If you open one in Notepad or another text editor, you will see something like this:
avatar format: '1.0.0' name: "popcat" states: : name: "normal" animations: : name: "idle" frames: : filename: "popcat1.png" duration: 100 : name: "talk" frames: : filename: "popcat2.png" duration: 100 : filename: "popcat1.png" duration: 50
Those of you familiar with MoonScript may recognize this as source code, and it is, albeit sandboxed. This means you could write the above document in different ways, some more compact and less human-readable than the version shown.
Each Avatar contains States, and each State contains at least one Animation: “idle”. Each State can also contain the animations “idle-blink” and “talk”. Each Animation contains at least one Frame, which specifies an image filename and a duration, in milliseconds.
name: <String> animations: <Array<Animation>> [effects: <Effects>]
Each state has a
name and an array of
animations. Optionally, you can define
effects for a given state, described later in this post.
name: <String> frames: <Array<Frame>>
Each animation has a
name, which is one of
"talk", and an array of
filename: <String> duration: <Milliseconds> [offset_x: <Pixels>] [offset_y: <Pixels>]
Each frame specifies a
filename for the image to use and a
duration in milliseconds. Each frame can optionally specify an
offset_x and an
offset_y in image pixels. The origin of an avatar is the bottom center of each image. The offset properties are applied to this origin.
Paths are Relative
All paths specified in a .2br file are relative to the .2br file. You will notice this when reading the sample avatars that come with PNG2br: Because the needed images are in the same folder as the .2br file, the image paths are naked:
"popcat1.png" and similar.
Each state can optionally specify
effects to be applied to it. The full range of effects available are outlined below. You may specify any or none of these effects, in any order, however: There may only be one of each effect applied to a state.
effects: tint: on: true r: <0-255> g: <0-255> b: <0-255> flash: on: true period: <Seconds> shake: on: true power_x: <Pixels> power_y: <Pixels> period: <Seconds> squash: on: true scale_mod_x: <Multiplier> scale_mod_y: <Multiplier> period: <Seconds> wobble: on: true max_angle: <Degrees> period: <Seconds> sine_x: on: true amplitude: <Pixels> period: <Seconds> sine_y: on: true amplitude: <Pixels> period: <Seconds> bounce: on: true impulse: <Pixels> gravity: <Pixels> restitution: <Multiplier> delay_min: <Seconds> delay_max: <Seconds>
Use the Refresh button at the top left of the UI to reload the open avatar. This way, you can see your changes as you work on your avatar.
If you are still confused about how to create an avatar for PNG2br, I highly recommend watching the video tutorial linked at the top of this post and following along with it. If you still have questions or get stuck, post here and the community and someone may help you out.
- Press [Escape] to hide or show the UI.
- Press [<,] and [>.] to cycle to the next or previous state in the list.
- Press  through  to switch to one of the first 9 states, and press  to jump to the tenth state.
- I recommend writing a list and keeping it somewhere on your desk, like this:
- I recommend writing a list and keeping it somewhere on your desk, like this:
- Open an avatar file.
- Reload the loaded avatar file and all its images.
- Set the window size to a preset, like 720p.
- Set the background color.
- Set the microphone sensitivity.
- Set the “speaking” audio threshold.
- Mute or unmute the microphone.
- Select which microphone to listen to.
Set up a Window Capture source for PNG2br with a Chroma Key filter matching your chosen background color.
Step by step:
In OBS, create a new Window Capture. Select PNG2br from the list of windows.
Right click your new Window Capture, and select Filters.
Click the plus (+) at the bottom left, and select Chroma Key.
Set the color to match your PNG2br background (pure green by default).
Return to PNG2br, and press [Escape] to hide the UI.
The player movement has been hard for folks to adjust to, myself included. It feels unresponsive because the game takes place in discrete “turns” that last about half a second, and the state of the game doesn’t change until a turn begins.
Obviously you want to allow players to start moving immediately, but doing this in a visually nice way while preserving the very rigid turn-based nature of the game turns out to be a hard problem.
If nothing but the player could move on its own, you could fake it and start a “movement turn” whenever the player moved, but with other things moving you need a way to lock everyone to the same rules to prevent weirdness.
There’s a very long discussion about this sort of problem vis a vis Jon Blow’s Sokoban game in Jai, in which he mentions having spent a long time solving this problem well: https://youtu.be/_tMb7OS2TOU
So I don’t feel as bad for doing a poor job in the time frame of a game jam! I would like to figure out a good solution on some future game, though.
Thanks! There’s a YouTube video on the game’s page (complete with a bad kazoo cover) that shows the unused animations at the end—extra animations for the units and buildings, like working and being killed. I got sidetracked doing art one day and spent too much time on things that didn’t get to be used haha
I forget that the jam entry pages don’t include the actual description of the game! Yes, the SCV just follows your mouse around and you can’t actually issue commands to selected units. I didn’t get to a properly playable map. :)
That’s better! I’m glad I got to see this entry, because it’s polished and fun. The little animations on everything add a lot of personality, and the screen shake and stuff is immersive. Nice!
I’m a sucker for Sokoban type games and I like the concept of this one a lot. :)
I got stuck on level 2 by accidentally hitting R to reset before making any moves – it just spawned more rocks for some reason until I was trapped.
Edit: No, wait, it happens when I press ‘E’.
This is a really cool idea! I would never imagine mixing breakout and a dating sim, but I think it could work. There are some sensory nuances of conversation and flirting that I think could be expressed in a funny way through various breakout mechanics, and you could make a really interesting experience out of that.
This is a cool idea. I think with a bit more work it would feel more complete. With no way to differentiate the good and bad apples, and only one apple spawning at a time, it feels like I don’t have much of a choice as the player. Eventually, apples stopped spawning for me. The snake itself is very charming!
Maybe the snake could change colors and should only eat apples of the same color, or maybe the apples could “go bad” over time and you have to eat them fast, etc.