Git Product home page Git Product logo

flxanimate's Introduction

FlxAnimate

FlxAnimate is a repository made by CheemsAndFriends and DotWith made for playing all spritesheet formats and the mysterious but interesting export called Texture Atlas

Support

You don't have to do it, but if you feel like you want to support this repo, Please check my Discord CheemsNFriends#8930 And send an issue of what's it's giving you problems

TODO

  • Filters are a feature in early days of Flash that are commonly used to "spice up" the animation. Although the texture atlas does export these filters, they aren't supported. IMPORTANT
  • Masks are clipping masks. not really important in our plans but still in our plans to support.
  • Put a solution to the memory leakage

Installation

there are two ways of downloading FlxAnimate:

1. By haxelib:

Normally, haxelib tries (but sometimes fails) to be the most stable version of it.

You can download it by typing:

haxelib install flxanimate

in your terminal or command prompt.

2. By git:

if you want to use the latest commits that are released from time to time, type this command:

haxelib git flxanimate https://github.com/Dot-Stuff/flxanimate

on your terminal or command prompt.

Texture Atlas

WARNING: This repo's texture atlas player does not support SPRITESHEET EXPORTS!!! if you want to translate from atlases to spritesheets (even though I 100% don't recommend), use Smokey's repo

A Texture Atlas is one of the methods of exporting animations in Adobe Animate which it can only export a single symbol. In every texture atlas, no matter if it is 2018 or the latest one, there will be atleast 2 main types:

  • Animation - explains the timelines of the main animation plus the symbols that the main one uses.
  • spritemap - slices the limbs that are used in the animation, it can variate from 1 to infinite really.

"FlxAnimate is literally so fuckin fragile I don't wanna call it a final version unless it has all the fuckin functions." - CheemsAndFriends

As you can see, even though this is trying to do it's best to work properly, it is very fragile, so it might break up sometimes in some versions, not to mention, it is kinda irregular and it will have breaking changes all the time. Hope you can understand and we apologize for the inconveniences.

Usage

Using FlxAnimate is really simple! First, you have to create a new instance of FlxAnimate, just like you would with an FlxSprite.

var character:FlxAnimate = new FlxAnimate(X, Y, PathToAtlas);

WARNING: You will need to set the Path of the folder, not the Animation file nor the Spritemap file, just the folder.

There is also a settings option when creating an FlxAnimate object used just in case if you wanted to initialise the variables in a JSON, and it's up to you if you wanted to use it.

CURRENTLY you can add animations from frame labels, symbols and indices. Support for stamping symbols is planned for later updates. Adding animations from a symbol:

character.anim.addBySymbol(AnimationName, SymbolName, X, Y, Framerate);

Adding animations from indices:

character.anim.addByAnimIndices(AnimationName, Indices ([0, 1, 2, 3...] etc.), Framerate);

WARNING: Adding animations by indices works only with the exported timeline and the main animation, don't try with different symbols as it will not work.

SpriteSheet

It's basically the same thing you were doing when you were loading the frames, like Sparrow or JSON (Hash or Array). But this time it adds even more formats to use like Edge Animate, Starling and Cocos2D, and adds the possibility to only add one Path as obligatory, in case that you only want to add only one thing and the document you want to parse is in the same directory or in a subdirectory inside that directory.

I think you know how to load a spritesheet but just in case:

    var sprite:FlxSprite = new FlxSprite(X,Y);
    sprite.frames = FlxAnimateFrames.from[the name of the format youre exporting]('${PathOfTheDocument}.${extensionofthedocument}');

and if you're using an image that is not in the same directory but in a whole another directory, ex: the document is in data and your image is in images, you should add another field describing the Path of that image.

flxanimate's People

Contributors

abnormalpoof avatar acrazytown avatar altronmaxx avatar cheemsandfriends avatar dotwith avatar elitemastereric avatar geokureli avatar maybemaru avatar neeeoo avatar ninjamuffin99 avatar yoshicrafter29 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

Watchers

 avatar  avatar  avatar  avatar  avatar

flxanimate's Issues

[BUG]:

Describe the bug
Explain the bug as clear as possible, no code involving.

The Sample crashes on startup from the git version

Adobe Animate Version
Adobe Animate version [2022].

Additional context
Add any other context about the problem here.

[BUG]: Render disparity between two Animate versions

Describe the bug
While I was testing around some stuff with FlxAnimate I found out that the same symbol renders differently from two different Animate CC versions.

Explain how to recreate the bug
Might not work with all symbols, but export a texture atlas from Animate 2019 & 2021 and display them using the following code:

var animTest:FlxAnimate = new FlxAnimate(50, 50, "[Path]", {Antialiasing: true});
animTest.anim.addBySymbol("a", "[Symbol Name]", 24, true);
add(animTest);

animTest.anim.play("a");

What should happen?
The symbols should display identically.

Adobe Animate Version
Animate CC 2019 19.2.1 (build 408)
Animate CC 2021 21.0.6 (build 41649)
FlxAnimate version is the one from Haxelib

Additional context
How it displays when exported from Animate 2021:
image

How it displays when exported from Animate 2019:
image

Files for both texture atlases
2019: https://cdn.discordapp.com/attachments/1006517991531368558/1033747631295443005/halloween_oceanrant.zip
2021: https://cdn.discordapp.com/attachments/1006517991531368558/1033747631685509223/halloweenAn21.zip

I can also provide the fla if it can help out with debugging.

[BUG]: Project closing instantly on C++ targets

Describe the bug
When creating an FlxAnimate object with a library in the path (eg. coolstuff:assets/coolstuff/atlas_1) the game closes instantly without an error message or anything.

Explain how to recreate the bug

  1. Create a new FlxAnimate object with a path that contains a library (eg. coolstuff:assets/coolstuff/atlas_1)
  2. Game closes

What should happen?
The FlxAnimate object should be created without any issues.

Adobe Animate Version
Animate 2019 (19.2.1 build 408)

Additional context
I've verified that the path actually exists with OpenFl.Assets.exists() and it returns true, so I don't know why FlxAnimate closes the game.

[BUG]: Cannot scale atlas sprites

Currently the only way to adjust the size an atlas sprite is rendered at is to export a new atlas at the correct size. The scale attribute does nothing.

Either scaling relative to the sprite's center or to the pivot point would be fine.

[ENHANCEMENT]: Implement filters that OpenFL doesn't provide

There's about 3 filters in Adobe Animate that you cannot support due to OpenFL not having the following shaders implemented:

  • BevelFilter
  • GradientGlowFilter
  • GradientBevelFilter

With some knowledge of GLSL and with the implementation of the dev branch, it would be possible, at least with the BevelFilter
altho with the Gradient ones, I don't really understand how would this work exactly
Maybe create a gradient bitmap and with that doing some shenanigans?
That would be the only way in theory

[BUG]: Crash thingy

I know what's the issue and I fixed it in my own build
But I'm making an FNF currently and I'm making the changes while doing the shit and idk if make the commits now or in a few days lmao.
But ye, wanna record this

[ENHANCEMENT]: Accurate hitboxes

Currently, FlxAnimate does not have an accurate hitbox (in fact, it does not have a hitbox at all I believe). This can lead to issues with positioning and other stuff dependant on the hitbox.

Describe the solution you are proposing

In theory it should be simple to fix this, although in practice it may not be as simple, depending on how FlxAnimate handles rendering and stuff.

When a frame change happens in an animation, FlxAnimate should get the lowest and highest x and y positions of the currently rendered sprites. From there we have the size of the hitbox and we just need to position it.

I have already attempted to prototype this but tbh I have no idea how FlxSprites hitboxes are created and positioned so my attempt, while working, started dropping FPS because of the goofy method I used to position them.

so like

if you have multiple frames for one animation and the play function only plays one frame, how would you play all the frames, i don't get it here do i somehow have to count each frame then make a for loop which i play that frame inside the loop or what? i don't get the point of making it play a SPECIFIC frame

a FlxAnimateFrames building problem

flxanimate/frames/FlxAnimateFrames.hx:160: characters 18-20 : Expected )

i dowloaded a mod with this and when i tried to load show's me this error.

[BUG]: Anims go fucked up in new version

Describe the bug
The animations don't do their thing properly, and if you have an STI, you're fuck up what it should be the normal thing.

Explain how to recreate the bug
Use FlxAnimate and try to add anims or use a texture atlas with STI

What should happen?
The animation should go good and without weird shit

Adobe Animate Version
Any version

[BUG] FPS Drop when FlxAnimate is removed

FPS Drops when FlxAnimate is destroyed. Perhaps it's the children still being rendered and not destroyed properly. I was able to fix this in my project so far by using onComplete to remove.

[BUG]: "Class<flixel.FlxG> has no field mouse" compiler errors

Describe the bug
Compiling any project with FlxAnimate in use produces several compiler errors about the same thing.

Explain how to recreate the bug
For example: Steps to reproduce the behavior:

  1. Use FlxAnimate v3.0.3 in any project
  2. Compile
  3. These errors appear:
    image

What should happen?
I'm assuming animations should play correctly, if at all. I don't know for sure what should happen though, since this was in a testing project I made to get the hang of using FlxAnimate.

Adobe Animate Version
Adobe Animate version v23.0

[ENHANCEMENT]: Change the way frames are collected

Currently, Filters are going like shit cos when you try to add a filter to one, it adds to every sprite.

My suggestion is actually slice all the sprites and later make the atlas sprite thingies use loadGraphic so that there's an option to make that graphic unique,
Just in case for sprites that don't have filters but have the same sprite don't have the same filter forever.

[ENHANCEMENT] Add full support for frame labels

Proposal

This enhancement would add the following functions to FlxAnimate:

  • getFrame(label:String):Int - Returns the frame number corresponding with a given label.
  • goToFrame(label:String):Void - Sets the current frame of the animation to the frame number corresponding with the given label.
  • getNextLabel(label:String):String - Returns the name of the next labeled frame, which comes after the label with the provided name.
  • addFrameAction(label:String, callback:Void -> Void):Void - Defines a callback function which, after the frame with the provided label is reached, will be executed.
  • removeFrameAction(label:String, callback:Void -> Void):Void - Removes a specific callback function from a given label.
  • removeFrameActions(label:String):Void - Removes all callback functions from a given label.

Further Documentation

You can see an example of these features in action here:

Example Use Case

Here is an example use case, copied from the link above.

Assume that you have a character sprite, whose Animate atlas definition contains several animations, including walk, run, crouch, and shoot. Without custom logic, the character would walk for a few frames, then run for a few frames, then crouch for a few frames, and shoot for a few frames, which is clearly not the intended behavior.

Instead, we want to perform some action when the individual parts of the animation complete, like so:

character.goToFrame('crouch'); // Play the crouch animation.
var nextAnimName = character.getNextLabel('crouch'); // Let's say this returns 'shoot'
character.addFrameAction(nextAnimName, function() {
  // When the animation reaches the frame at the start of the 'shoot' animation,
  // loop back to the beginning of the 'crouch' animation.
  character.goToFrame('crouch');
}

The result is that the character can utilize dynamic behavior and animations, without having to rely on swapping between full spritesheets. This saves memory and improves performance.

[BUG]: FlxAnimateFrames issue whenever you're using haxe 4 to 4.2

This issue was spotted on haxe 4.1.4 when they reported this known issue of "FlxAnimateFrames.hx line 165: Expected )" or something like that.
image
This should solve the issue for everyone that has this issue, altho I'm too lazy to check if that actually should work. I would need someone that has haxe 4 but hasnt got haxe later than 4.2 that can help me with this, or when I have time, downgrade my haxe version myself and fix it

[BUG]: Setting angle not working

Describe the bug
Changing the angle value of the FlxAnimate object does not affect the game.

Explain how to recreate the bug
Steps to reproduce the behavior:

  1. Create FlxAnimate object and add to game
  2. Set FlxAnimate's angle value to 30
  3. See error, nothing is affected

What should happen?
The angle of the FlxAnimate object should have changed.

Adobe Animate Version
Adobe Animate 2022.

Additional context
Nothing

[BUG]: Frame callbacks being called inconsistently.

Adding code to set animation frame to a frame callback sometimes renders the sprite before the callback finishes. If using this technique to loop an animation in an atlas with multiple animations, this can cause the first frame of the next animation to play for a split second before the animation resets.

A workaround exists where adding "padding" frames around animations can help prevent improper frames from rendering, but a proper fix is needed.

The solution may be to add some code which prevents the sprite from being redrawn while a callback is resolving.

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.