I am working on a keyframe/tweening animation library which will support easing in/out on all transitions. It will eventually be released to the public. Currently it stands at 2600 lines of code (79KB), although about a third of that was just testing out QB64 functionality and is not part of the library code.
My personal goal with the project is to have a tool for producing high-quality 2D animations for videos, and to produce high-quality educational software for my child. So far so good, it's almost to the point where I can start making apps with it. Thus far I've only produced a few tech demos of the library functionality.
Does anyone else here have interest in an easy-to-use 2D animation abstraction library?Tech Demo videosCurrent functionalityOpen_Screen() -- create the default output screen, set up defaults for mouse cursors, font and font colours, etc.
Timer_Update() -- used in a loop, updates the milliseconds to the current time
Update_Objects() -- used in a loop, updates all animations to the current time, plays sounds
Render_Objects() -- used in a loop, draws objects onto the screen
Load_Image() -- load an image, frees it once the object is removed
Load_Sound() -- load a sound file, free it once the object is removed
Text_Create() -- create a new text object
Obj_Show() -- display object
Obj_Hide() -- don't display object
Obj_Opacity -- from fully transparent to fully opaque, respecting the image's partially translucent pixels
Obj_Move_X() -- supports alignments [Left, Middle, Right]
Obj_Move_Y() -- supports alignments [Top, Middle, Bottom]
Obj_Move_XY() -- supports alignments
Obj_Scale_Width() -- ignores aspect ratio
Obj_Scale_Height() -- ignores aspect ratio
Obj_Scale_By_Width() -- maintains initial aspect ratio
Obj_Scale_By_Height() -- maintains initial aspect ratio
Obj_Scale_By_Box() -- incomplete
Obj_Text_Colour() -- change text colour
Obj_Remove() -- remove object and free any handles
Obj_Play_Sound() -- start playing sounds at specific times in the animation
The above functions have you specify a start time in milliseconds (and an end time if it's a transition). You can do things like slowly fade the text from orange to purple, while moving it from the top-left corner of the screen aligned Left, Top, to the other corner of the screen aligned Bottom, Right. Makes position calculations extremely simple.
Example codeCALL Load_Image
("Images\Spaceship.png") CALL Obj_Move_XY
(ID_Spaceship
, Left
, 100, Top
, 100, Now
, Now
) CALL Obj_Move_XY
(ID_Spaceship
, Right
, Screen_Width
- 100, Bottom
, Screen_Height
- 100, Now
, Now
+ 5000)
This places the spaceship 100 pixels indented from the top-left corner, then moves it to 100 pixels indented from the bottom-right corner over a period of 5.000 seconds. If I also added an Obj_Scale_By_Width() to also take 5.000 seconds, the object would smoothly scale while it is moving across the screen, while still properly ending up at the 100 pixels indentation from the bottom-right corner.
RoadmapI am aiming my library at developers/creators, with the goal of making it as efficient as possible to produce animations and animated interfaces and menus. I want it to be super simple to create a scene using my library -- the less work the human is required to do themselves, the better!
- Obj_Flip() -- horizontal or vertical flipping
- Obj_Rotate() -- using OpenGL triangle mapping
- Obj_Merge() -- combine objects into a new object, either keep or delete the original objects
- Obj_Scale_By_Box() -- incomplete
- Obj_Opacity() -- working around issues with partially translucent images
- Obj_Scale_By_Box() -- haven't got around to adding it yet, just some bounding boxes math
- Obj_Flip() -- I saw that _PUTIMAGE supports flipping, so it should be easy to implement
- Obj_Rotate() -- I already have sample code from the Wiki using triangles, but I want to figure out how it works and do my own implementation
- Obj_Merge() -- overlay two objects and create a new object; either keep the original objects or remove them
- Support for resolution independence, including using percentages for screen placement, scaling, and so forth
- Creating, laying out, and animating scenes from within the GUI, then exporting these to files
- Animated sprites -- multiple sprite frames using animated GIFs or sprite sheets
- Smooth easing of transitions (e.g. https://easings.net/en ) -- I have these easings in a public domain format; I already have a Percent_Complete for transitions, so I just need to apply these formulas to the percentage
- Exporting animations as PNG frames (locked to a framerate) and a WAV output of all the sounds playing at the correct times, to be assembled by FFmpeg into a full video. I've wanted a decent tool for rapidly creating smooth 2D animations for years, i.e. to put in YouTube videos
- Create a new image format using JPEG images and 1bit PNG transparency masks. This will provide tiny small file sizes on cut-outs of JPEG images, similar to how WebP or JPEG2000 handle transparency as a separate layer from the lossy image data. This will be very easy to implement in QB64 with the currently available functions, and will allow me to include thousands of high-quality cut-out images (stamps for an art program, for example) without using up multi-GB of hard drive space! :-)
- Squishing text -- allow text objects to be squished and not maintain aspect ratio
- Text effects -- including shadows, gradient coloured text, image cut-out text, border glow, etc.
- Ability to alter the application speed, such as 2x speed. This will just use a multiplier on the milliseconds returned by the timer, so it appears time is moving faster or slower. Useful when testing animations over and over, or when speeding up part of your app to make it more difficult, etc.
- Mouse support -- I already had this working before, I just need to make the screen objects clickable
- Image caching -- currently each time you load the same image file, it creates a new handle, but it should reuse image handles, and only delete the handle when the last object using it is removed
- Background caching -- allow the user to create a fixed background image which will then allow all screen objects to be overwritten with the background to remove them, then draw the updated objects to the screen. This will significantly speed up a screen full of many small objects, as it will only redraw the pixels taken up by those objects, not the entire screen
Current data typesTYPE Object_Data
Exists AS _BYTE
Visible AS _BYTE
Opacity AS DOUBLE
Object_Type AS _BYTE
Handle AS LONG
Filename AS STRING * 512
Text AS _BYTE
Text_Colour AS LONG
X AS _FLOAT
Y AS _FLOAT
Orient_X AS _BYTE
Orient_Y AS _BYTE
Width_Orig AS INTEGER
Height_Orig AS INTEGER
Width AS DOUBLE
Height AS DOUBLE
END TYPE
TYPE Action_Data
Exists AS _BYTE
Started AS _BYTE
Action_Type AS _BYTE
Object_ID AS LONG
Time_Start AS _INTEGER64
Start_Orient_X AS _BYTE
Start_Orient_Y AS _BYTE
Start_X AS _FLOAT
Start_Y AS _FLOAT
Start_Width AS DOUBLE
Start_Height AS DOUBLE
Start_Text_Colour AS LONG
Start_Opacity AS DOUBLE
Time_End AS _INTEGER64
End_Orient_X AS _BYTE
End_Orient_Y AS _BYTE
End_X AS _FLOAT
End_Y AS _FLOAT
End_Width AS DOUBLE
End_Height AS DOUBLE
End_Text_Colour AS LONG
End_Opacity AS DOUBLE
END TYPE
' Action types
CONST A_Remove = 1
CONST A_Show = 2
CONST A_Hide = 3
CONST A_Opacity = 4
CONST A_Move_X = 5
CONST A_Move_Y = 6
CONST A_Scale_Width = 7
CONST A_Scale_Height = 8
CONST A_Scale_By_Width = 9
CONST A_Scale_By_Height = 10
CONST A_Scale_By_Box = 11
CONST A_Text_Colour = 12
CONST A_Play_Sound = 13
