[Anarkade Framework] Tween library

[JaViS]

The forum is kind of slow these days, so I figured out I could start explaining the code we are going to share from our project, Anarkade, an what you can do with it.
First post is going to be about our Tween library. I have already shared an stand alone version before, but this new version is much more easier to use.

Example:

https://imgur.com/a/3X4T5fd
All these animations you can see in the example are done with out tween library.

How to use:

   
• download our framework from: https://bitbucket.org/pixelatom/bennu_framework/src/master/
• place it outside your game code like:

- project
    - game source
    - library <- here

   
• include the tween library:

Code Select Expand


include "../library/motion_tween.inc";


   
• done! you can start using it.

Explanation:

tween_to(int* property, int  toValue,  int  effectType, int  duration)

The library works by modifying any int variable you pass to it as a pointer. You can use it with any local variable of your processes, like x, size or alpha.
Then you select what's the value you want it to transition to, lets say you want your size to go from 0 to 100, you should init your size variable in 0 and then call the function tween_to with toValue as 100.
After that you pass what transition effect to use, and how much frames to animation should take.

The values for effect type can be any of the following struct:

Code Select Expand


        struct motion_effect
      // Regular
      int regularEaseIn = 1;
      int regularEaseOut = 2;
      int regularEaseInOut = 3;
      // Bounce
      int bounceEaseIn = 4;
      int bounceEaseOut = 5;
      int bounceEaseInOut = 6;
      // Back
      int backEaseIn = 7;
      int backEaseOut = 8;
      int backEaseInOut = 9;
      // Strong
      int strongEaseIn = 10;
      int strongEaseOut = 11;
      int strongEaseInOut = 12;
      //Elastic
      int elasticEaseIn = 13;
      int elasticEaseOut = 14;
      int elasticEaseInOut = 15;       
   end



To wait until the animation is finished, you can use the function tweening()

Code Select Expand


while(tweening())
    frame();
end


To wait just for one specific anim to finish, just use the function exists()

Code Select Expand


anim = tween_to(&size,100, motion_effect.regularEaseOut, 10);

while(exists(anim))
    frame();
end


And that's all!! please let me know any question or bug you might find, it is a work in progress!

[FreeYourMind]

Beautiful!

[Arcontus]

Amazing!!
One question: How do you make the shrink in de red flag behind Anarkade, after click on "Tournament"?
Are you using size_x to do this effect?
I am asking it because I know a bug in bennu when you are using size_x with a value below 15. It will crash on runtime and I try to avoid them. But if you are using another technique I am interested to know it.

[JaViS]

Amazing!!
One question: How do you make the shrink in de red flag behind Anarkade, after click on "Tournament"?
Are you using size_x to do this effect?
I am asking it because I know a bug in bennu when you are using size_x with a value below 15. It will crash on runtime and I try to avoid them. But if you are using another technique I am interested to know it.

I am using size_x and I haven't experienced that issue so far :S

[Arcontus]

Amazing!!
One question: How do you make the shrink in de red flag behind Anarkade, after click on "Tournament"?
Are you using size_x to do this effect?
I am asking it because I know a bug in bennu when you are using size_x with a value below 15. It will crash on runtime and I try to avoid them. But if you are using another technique I am interested to know it.

I am using size_x and I haven't experienced that issue so far :S

Hi, I found the post, but it is in spanish. You can download a program who use size_x with a random. With my current version of bennu it cash after few seconds. If you change the values of the line 71 --> barras[indice].actual = rand(0,100); to -->  barras[indice].actual = rand(20,100); it don't crash.
It is the link: https://forum.bennugd.org/index.php/topic,2985.0.htmlCan you try the progam?
On the other hand Splinter recognize the malfunction with size_x/size_y and values below 20 or 15.

[JaViS]

It seems like the problem is solved.


The post is from 2012, the topic closes saying the problem was solved with a fix, and honestly its been some years since then, I am pretty sure I am using a much newer version of Bennu. Never really experienced any issue like that, and I tell you, been doing much resizing in the game :P

[Arcontus]

It seems like the problem is solved.


The post is from 2012, the topic closes saying the problem was solved with a fix, and honestly its been some years since then, I am pretty sure I am using a much newer version of Bennu. Never really experienced any issue like that, and I tell you, been doing much resizing in the game :P

Can you check the program attached in the post on your computer, please?


With my version it crashes.

[JaViS]

I ran the program and it finished and exited but I didn't see any error message. Should I see something?

[Arcontus]

Well, this program crash on my current version after 5 seconds, but may be you can notice that the bars change the color (it should not do it). Try to change the line 71 where rand funcion, and change the first value or the second value to get values between 0 to 20 or 1 to 25 or any other combination. The idea is to make any change in the executable because the run behaviour may change, I checked it.

[JaViS]

I think we should continue talking about that issue in the original topic :)

[panreyes]

Amazing library! :D

This is what every 2D game needs in order to avoid being flagged as static when you don't have thousands of frames for every element.

[JaViS]

Thanks!


Indeed, we think these animations make a great difference in the UI and are very easy to implement :)

[Arcontus]

Another question: how do you do the transition colours rear of the characters selection panel? It is a great animation colour effect.
May be done by a previous animation in FPG or are you drawing every frame a rectangle primitive, or are you doing other thing?
It's real amazing.

[JaViS]

Another question: how do you do the transition colours rear of the characters selection panel? It is a great animation colour effect.
May be done by a previous animation in FPG or are you drawing every frame a rectangle primitive, or are you doing other thing?
It's real amazing.

that's done in three steps. The first thing is to place the the graphic in gray scale for the background, then you place over it the graph in the color you want it, but to achieve that effect, I also do a transition of the graphic from white to the final color using a 'flash effect', let me paste here the code for it:

Code Select Expand



process flash_effect(process_id)
private
old_map = null;
end
begin
//return; // still testing this effect
graph = null;
file = 0;


ctype = process_id.ctype;
priority = father.priority - 1;


while(exists(process_id) and alpha > 0)
if (process_id.graph != old_map)
if (graph != null)
if (map_exists(0,graph))
map_unload(0,graph);
end
graph = null;
end


if (map_exists ( process_id.file, process_id.graph  ))
// copia cuerpo
//graph = map_clone(process_id.file, process_id.graph);


graph = map_new(map_info ( process_id.file, process_id.graph, G_WIDTH ),map_info (process_id.file, process_id.graph, G_HEIGHT ),16);
map_xputnp ( 0 , graph ,process_id.file, process_id.graph , map_info ( process_id.file, process_id.graph , G_WIDTH )/2,map_info ( process_id.file, process_id.graph, G_HEIGHT )/2 , 0 , 100 , 100 , 0 );


// aplica efecto
map_fill(0,graph,rgb(255,255,255));
end
end


// posiciona efecto
x = process_id.x;
y = process_id.y;
z = process_id.z - 1;

flags = process_id.flags;
size = process_id.size;
size_x = process_id.size_x;
size_y = process_id.size_y;

old_map = process_id.graph;


alpha -= 30;
//size += 5;


frame;
end


onexit:
if (graph != null)
unload_map(0,graph);
end


end

function map_fill(file,graph,color)
begin
for (x=0;x<map_info (file, graph , G_WIDTH);x++)
for (y=0;y<map_info (file, graph , G_HEIGHT);y++)
if (map_get_pixel(file,graph,x,y)!=0)
map_put_pixel(file,graph,x,y,color);
end
end
end
end

[Arcontus]

If I understood well your code, you are filling a square in white with -1 on Z to put it rear of the image, afther that you are aplying an alpha to the white square until alpha = 0, to get the real colour. Right?
Good effect!