Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

transmutrix

107
Posts
6
Topics
251
Followers
227
Following
A member registered Dec 17, 2017 · View creator page →

Creator of

Recent community posts

Great stuff <3

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. :)

No idea why that would be. It’s a very simple program and doesn’t do anything crazy 🤔

(1 edit)

Hey folks!

I released this small tool last night:

https://charliezip.itch.io/png2br

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! 😄

Happy tubing!

(34 edits)

Avatar Creation

​​

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! 😄

The Basics

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:
    [1]:
      name: "normal"
      animations:
        [1]:
          name: "idle"
          frames:
            [1]:
              filename: "popcat1.png"
              duration: 100
        [2]:
          name: "talk"
          frames:
            [1]:
              filename: "popcat2.png"
              duration: 100
            [2]:
              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.

State Properties

  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.

Animation Properties

  name: <String>
  frames: <Array<Frame>>

Each animation has a name, which is one of "idle", "idle-blink", or "talk", and an array of frames.

Frame Properties

  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.

Effects

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>

Tips

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.

Further Information

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.

PNG2br community · Created a new topic [Tutorial] Controls
(10 edits)

Controls

Video:

Keyboard:

  • Press [Escape] to hide or show the UI.
  • Press [<,] and [>.] to cycle to the next or previous state in the list.
  • Press [1] through [9] to switch to one of the first 9 states, and press [0] to jump to the tenth state.
    • I recommend writing a list and keeping it somewhere on your desk, like this:
      1. Normal
      2. Scared
      3. Blushing

UI:

  1. Open an avatar file.
  2. Reload the loaded avatar file and all its images.
  3. Set the window size to a preset, like 720p.
  4. Set the background color.
  5. Set the microphone sensitivity.
  6. Set the “speaking” audio threshold.
  7. Mute or unmute the microphone.
  8. Select which microphone to listen to.
PNG2br community · Created a new topic [Tutorial] OBS Setup
(16 edits)

OBS Setup

Video Version:

Set up a Window Capture source for PNG2br with a Chroma Key filter matching your chosen background color.

Step by step:

  1. In OBS, create a new Window Capture. Select PNG2br from the list of windows.

  2. Right click your new Window Capture, and select Filters.

  3. Click the plus (+) at the bottom left, and select Chroma Key.

  4. Set the color to match your PNG2br background (pure green by default).

  5. 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. :)

Some folks have been curious about how to solve particular levels, so I put up a little walkthrough: https://youtu.be/dnXdmkg3Ep8

I’ll see what I can do.

Awesome! Sorry for the goofy question haha

Mmmm this looks nice! Are there included presets like the setups in the example screenshots?

Thanks!

Oh, thanks!

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!

(2 edits)

Ah, I see. I need to put in a puzzle earlier for teaching that you can you can dig dirt from between two blocks, like this:

I’ll be excited to see this develop! :)

Thank you! Best of luck with the remaining levels! :)

(let me know if you want a hint)

(I should maybe upload a playthrough for when people get stuck or something…)

Thank you! Sorry you got stuck – did you get stuck at the first bomb or the second bomb in level 8?

(2 edits)

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’.

Nice! ECSs are fun to write, for sure. Makes sense about all the DLLs for .NET! Thanks for explaining your project setup. :)

Thanks! If I do another game like this I will try to make the player movement feel more responsive. I need to have a good think about how to make that work with the game’s state management.

Nice! If I had it to do over, I would definitely handle player movement a bit differently; I agree it feels a bit clunky and requires practice to adjust to.

I only managed 9! I didn’t have much time to spend, though.

I didn’t finish the rainy level. I only had a little bit of time for each entry before work. :)

Well executed! Good job.

Hah, very classic! This is a very accurate recreation. Cool that it’s in Godot. I could only get to 17 lol

Oh man, I haven’t thought about Bubble Tanks in years! Awesome. It was really jarring to go from 3 kinda empty blue rooms to the yellow room full of guys shooting at me haha.

I would like to try this out. Is there an emulator you recommend?

Nice recreation!

I couldn’t seem to get things working, pic attached:

This is pretty fun!

Hey, it looks like you’ve restricted your game page. If you want folks to check it out, please mark it public instead! :)

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 cool! Nice job.

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.