This is fun! I haven’t played an idle game in a while, and I got sucked into this pretty easily! ’^~^
transmutrix
Creator of
Recent community posts
Hi! First of all let me say that I love this project in both concept and execution! Link’s Awakening is my favorite game and I’m so happy to see someone else with the same level of love I have for it.
I play LA a lot, and am making an indie game inspired by it (see my Twitter, not gonna post a foreign link on your forum lol).
When playing this, I noticed some gamefeel things are very different from the original, particularly movement and combat in some places, and I wanted to volunteer to bring those things more in line with the original game, if you would be interested in that. My own project has required researching the disassembly of the original game in BGB emulator, and comparing behavior frame by frame. With this effort I’ve been able to capture the gamefeel of LA very accurately.
Everything here is almost perfect, and I adore the Mario Maker visual style you’ve developed for this. If I could make my muscle memory for the original game seamlessly slot in, I think it would elevate this even higher.
And hey, even if you’re not interested in another contributor, I would nevertheless love to chat about LA with you. :)
Let me know what you think!
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!
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.
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:
- Normal
- Scared
- Blushing
- …
- I recommend writing a list and keeping it somewhere on your desk, like this:
UI:
- 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.
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:
-
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
Some folks have been curious about how to solve particular levels, so I put up a little walkthrough: https://youtu.be/dnXdmkg3Ep8