Code Monkey home page Code Monkey logo

bitmapflow's Introduction

Bitmapflow

ko-fi

Bitmapflow is a tool to help you generate inbetweens for animated sprites. In other words, it makes your animations smoother. It uses optical flow to try to guess how the pixels move between frames, and blends them accordingly. The results are far from perfect, and probably require some editing by hand afterwards, but sometimes it can produce decent results.

It supports loading and saving animated gifs, spritesheets and individual frames.

Example:

Example

Usage

You can download the executables here. (Windows and Linux only for now). On Windows, you'll need to install the Visual Studio Redistributable first (unless you already have Visual Studio 2015 or newer installed). On Linux, you'll need to install OpenCV 4.2, see the releases page for more details. Other than that, it should work out of the box.

A video tutorial on how to use the program can be found here.

A short summary:

  1. Drag and drop your image into the program. It can be an animated gif, a spritesheet, or individual frames. If you don't have any sprites laying around you can find some in the examples folder in this repository.
  2. Tweak the parameters.
  3. Open the File menu to export the results as an animated gif, a spritesheet, or individual frames.

If you use big sprites with lots of frames, you may need to wait a while after tweaking the parameters for the processing to complete, since calculating optical flow can be quite CPU intensive.

A short explanation of the parameters follows.

Basic Parameters

  • Inbetweens: this decides how many inbetweens to generate. For example, if your input animation has 12 frames, and you generate 2 inbetweens, your output animation now has 36 frames. The more inbetweens you have, the smoother your animation gets.
  • Loop seamlessly: if enabled, the animation will loop seamlessly. Disable this for one-shot animations, like explosions.
  • Motion multiplier: if this value isn't 1x, it will exaggerate the motion if it's >1x, or diminish it if it's <1x. E.g. If you put it at 2x, the motion will go twice as fast; if it's 0.5x, the motion will be cut in half.
  • FPS: on the bottom right of the screen, you can change the speed of the input animation, in frames per second (FPS). The output animation will have a higher FPS, depending on the amount of inbetweens. E.g. If your input animation runs at 10 FPS, generating 1 inbetween means your output animation now runs at 20 FPS. Note that this parameter has no effect on the inbetween generation process, it's only used for displaying your sprite. (it does, however, affect the animation speed of exported gifs)

Advanced Parameters

  • Flow algorithm: You can decide which optical flow algorithm to use. The default is SimpleFlow, which works well in most cases. If it doesn't work for you, you can switch to DenseRLOF, which works better for some sprites. Both algorithms have different unique parameters to tweak, see below. Note that DenseRLOF seems a little unstable, it occasionally crashes for no reason (I'm using an external library, so I don't have any control over this).

I could explain all the advanced parameters in detail, but since they describe internal optical flow algorithm parameters, they require some background knowledge about the algorithm before they start to make sense. You can check the official documentation for SimpleFlow or the official documentation for DenseRLOF for more details.

You'll need to experiment a lot to find parameters that work well, although the default parameters seem to work decently for a lot of sprites. See my video tutorial on the subject.

Tips

The algorithm works best for sprites that only have movement in the two-dimensional plane. That means, things only move horizontally, vertically, or diagonally, not towards or away from the viewer.

Additionally, the algorithm assumes the brightness of pixels doesn't change between frames. That means, things like explosions, particle effects and blinking lights won't work that well, because they generally start bright and become dimmer over time.

Finally, if you feed pixel art into the program, make sure the pixel art isn't upscaled. It should be at its original resolution.

Compiling from source

If you want to dig through the source code and compile Bitmapflow yourself, you'll need to jump through some hoops. The program is written in Godot using godot-rust, so the project consists of two parts:

  1. The Godot project, found in the godot folder.
  2. The rust crate, found in the rust folder.

To get it to work, you'll need to install the following things on your system first:

  • Godot 3.2.3+
  • Cargo nightly 1.50+ (included in Rustup)
  • OpenCV 4.x (see the documentation of OpenCV-rust on how to get OpenCV)

I'm going to assume you're on Windows, but technically speaking this should work on other platforms as well, but the details and filenames will be different.

Getting it to work:

  1. Go to the rust folder and run cargo build --release. (Note: the crate requires that it is inside of a Git repostory, otherwise it will fail to build. This may not be the case if you downloaded the source code from the Releases page. In that case, run git init to create a .git folder as a workaround)
  2. After a while this should produce a DLL file called bitmapflow_rust.dll in the rust/target/release folder (On Linux this file will be called libbitmapflow_rust.so). Copy this file to the godot folder.
  3. Now open Godot and run the project in the godot folder.

That's all.

FAQ

On Windows, the program crashes after the splash screen, or I get an error about vcruntime140.dll not being found. What to do?

On Windows, when exporting I get an error similar to "Failed to save spritesheet as [name]; Access is denied (os error 5)."

  • Disable your virus scanner and try again. If you don't have a virus scanner enabled, you may not have permission to export into your selected folder (e.g. the Program Files folder may require admin privileges), so try exporting to your own users folder instead, or the Desktop, for example.

I get some weird OpenCV error about sizes or something after loading my sprite?

  • Try reducing the "layers" parameter in the Advanced parameters section, or click the big Reset button at the bottom of the sidebar. If that doesn't work, your sprite may be too small. Try using a bigger sprite. Also try using SimpleFlow instead of DenseRLOF, it's more versatile and breaks less often.

License

The code is licensed under MIT. The included example sprites (in the examples folder) are licensed as follows:

bitmapflow's People

Contributors

bauxitedev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bitmapflow's Issues

Feedback

Hello,

I'm amazed by how good this technology is and I see massive potential in an area that leaves creative freedom in designing animations to the user: animation transitions.

In games, 2D animations stutter from one action to the other, where sudden stops in movement can look unnatural when there is no blending or inbetweening happening on the pixel level. Since blending can't really be done in 2D (at least what I know of), a good approach would be to let the computer calculate the inbetween frames (between finished animations, not the animations themselves) to "supplement" the sprite sheet instead of replacing what is in it, already. The final step would be to seemlessly integrate this as a datastructure into existing engines, where you don't even have to do the bookkeeping of which frames should go between what actions.

That way you don't go against the principles of animation (scale, stretch, tension, suspense) and leave the necessary control to the artist.

What do you think about this idea?

Vergen crate requires a nightly Rust compiler

The vergen crate used for version information seems to require a nightly compiler (as of version 1.50), and when everything using it was commented out it builds fine on stable Rust. Just wanted to mention it in case anyone faces the same issue :)

I haven't tested it with 1.51 yet, but maybe a mention about this in the README would help?

(Tested on Linux)

Build issues on Mac

Hello, I thought I'd try to build the project on Mac, and I got through the dependencies and all that, however when trying to run cargo build --release I can't seem to get it past the open-cv step.

Not sure if this is a failure on my part of not setting up the open-cv dependencies correctly or what, but the log doesn't really seem to tell me anything clear.. would love some input if you have an idea of how to fix it ๐Ÿ˜„

bitmapflow_osx_build.log

I had tried to document my steps here as well:

https://gist.github.com/corjohnson/49d77b9f3e14478c29d8b30d6e9f9814

1.0.2 official Linux release fails to run on Fedora 33

OS: Fedora 33 x86_64
Bitmapflow version: 1.0.2 official

After extracting all files from the archive and adding the +x executable permission to bitmapflow.x86_64 (which is missing by default), I get this in the terminal:

Godot Engine v3.2.3.stable.official - https://godotengine.org
OpenGL ES 3.0 Renderer: GeForce GTX 1080/PCIe/SSE2
 
ERROR: open_dynamic_library: Condition "!p_library_handle" is true. Returned: ERR_CANT_OPEN
   At: drivers/unix/os_unix.cpp:426.
ERROR: get_symbol: No valid library handle, can't get symbol from GDNative object
   At: modules/gdnative/gdnative.cpp:501.
ERROR: init_library: No nativescript_init in "res://libbitmapflow_rust.so" found
   At: modules/gdnative/nativescript/nativescript.cpp:1506.
ERROR: start: Condition "!valid_type" is true. Continuing.
   At: main/main.cpp:1766.
ERROR: start: Condition "!valid_type" is true. Continuing.
   At: main/main.cpp:1766.
ERROR: start: Condition "!valid_type" is true. Continuing.
   At: main/main.cpp:1766.
ERROR: start: Condition "!valid_type" is true. Continuing.
   At: main/main.cpp:1766.
ERROR: start: Condition "!valid_type" is true. Continuing.
   At: main/main.cpp:1766.
ERROR: start: Condition "!valid_type" is true. Continuing.
   At: main/main.cpp:1766.
zsh: segmentation fault (core dumped)  ./bitmapflow.x86_64

gdb full backtrace:

#0  0x000000000044a984 in Variant::call_ptr(StringName const&, Variant const**, int, Variant*, Variant::CallError&) [clone .cold.492] ()
No symbol table info available.
#1  0x0000000000000000 in ?? ()
No symbol table info available.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.