An accurate tweening method.

AtlanticCG

  • Posts: 113
Is this code suitable for the flash only?
What code should be for iOS?

Sorry for the noob question
the seconds converted into the frames locally
or using this code the entire game will be measured in frames?

I believe that the issue is not only tweening blocks.
Custom events in a random way, some blocks are not executed.
Could it be your approach will solve this problem?
thank you

« Last Edit: February 05, 2013, 03:18:37 pm by AtlanticCG »

camaleonyco

  • Posts: 204
Is this code suitable for the flash only?
What code should be for iOS?

As far as I know Stencyl 2 is using TweenC for iOS projects, and after a quick look to the source the useFrames parameter doesnt seem to be supported. So, it's for Flash only... but read the rest of this post.

Sorry for the noob question
the seconds converted into the frames locally
or using this code the entire game will be measured in frames?

The tween will be calculated in frames, everything else won't be affected.

I believe that the issue is not only tweening blocks.
Custom events in a random way, some blocks are not executed.
Could it be your approach will solve this problem?
thank you

All the code you put inside the update event ("When Updating" event) will run once each frame so you can create your own frame based tweens using blocks.

You would need an equation for your tween, but you can borrow it from the Flash Tweener class (I'm attaching it). The easing methods are listed here:
http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

It might sound complicated, but here's an example:

I want to use the easeOutQuad easing... I look for it inside Equations.as and this is what I found:

Code: [Select]
/**
* Easing equation function for a quadratic (t^2) easing out: decelerating to zero velocity.
*
* @param t Current time (in frames or seconds).
* @param b Starting value.
* @param c Change needed in value.
* @param d Expected easing duration (in frames or seconds).
* @return The correct value.
*/
public static function easeOutQuad (t:Number, b:Number, c:Number, d:Number, p_params:Object = null):Number {
return -c *(t/=d)*(t-2) + b;
}

So the equation for the easing is (-c *(t/=d)*(t-2) + b) and I need 4 parameters... Note that the "/=" operator means that for the rest of the equation the first value will be equal to the result of the division, so the equation should be (-c *(t/d)*((t/d)-2) + b). Then the code needed for my tween can easily be translated using blocks, and it should look like the attached image (easeOutQuad.png).

With some work this could be translated in custom blocks, but the important thing is that this will work on both Flash and iOS projects, and it will be frame based. This way if your game freezes for a moment, the tween will be paused, and you will be sure that your actor will reach its goal exaclty, no matter what.

« Last Edit: February 06, 2013, 08:32:02 pm by camaleonyco »

AtlanticCG

  • Posts: 113
Oh, I missed your reply.
Thanks for such a detailed full answer.
Although I still do not know how to fully use code blocks, but it will help me.
I would like to find out where you can learn how to declare your variables, as well as learn the syntax for iOS. All my attempts to learn it ran across the thick books about programming, in which after the author's autobiography, I did not understand anything.

camaleonyco

  • Posts: 204
Oh, I missed your reply.
Thanks for such a detailed full answer.
Although I still do not know how to fully use code blocks, but it will help me.
I would like to find out where you can learn how to declare your variables, as well as learn the syntax for iOS. All my attempts to learn it ran across the thick books about programming, in which after the author's autobiography, I did not understand anything.
You don't need code blocks for the last tweening method. If you check the image attached in my last post, it uses only regular blocks, and some comment blocks that aren't needed.

The variables are declared when you create a new attribute. You can use custom code in Flash projects and hack the behavior with "/*" to declare your own variables in iOS projects, but that wouldn't be necessary unless you are working on something really complex.

The main reason why people use Stencyl, is because it's simple. So, keep it simple... you can do a lot using just the palette blocks.

gamegirlxl

  • Posts: 716
Here's two lines of code I created like this(and my first with Actionscript 3):

Code: [Select]
Tweener.addTween(actor, {x:actor.x+50, time: 15, transition:"easeInOutQuad", useFrames:true, onComplete:TweenComplete()});

Tweener.addTween(actor, {angle:actor.angle+Util.toRadians(-3141.59), time: 10, transition:"easeInOutQuad", useFrames:true});

Although this is a rectified version of the example, the code will still not be accurate for tweens happening in rapid succession (since a list of tweening commands basically executes itself immediately and sets on to other things without waiting for the motions to be finished) that modify the same stuff.  Which limits its usefulness for movement back and forth.  However with delays, a small change to overwriting, and a better understanding I developed a code that allows for orchestrated tweening (like path behavior except with more than just x y movement).

Also, changing the physics on anything to be tweened is as unnecessary as changing the physics so you can "teleport" by changing x values.  Don't bother.

I made a new code after finding this site:http://hosted.zeh.com.br/tweener/docs/en-us/ and came up with this:
Code: [Select]
Tweener.autoOverwrite = false
Tweener.addTween(actor, {x:actor.x+100, time: 10, transition:"easeInOutQuad", useFrames:true, delay:0});
Tweener.addTween(actor, {y:actor.y+100, time: 10, transition:"easeInOutQuad", useFrames:true, delay:0});
Tweener.addTween(actor, {angle:actor.angle+90, time: 10, delay:0, transition:"easeInOutQuad", useFrames:true});
Tweener.addTween(actor, {x:160, delay:10, time: 10, transition:"easeInOutQuad", useFrames:true});
Tweener.addTween(actor, {y:actor.y, delay:10, time: 10, transition:"easeInOutQuad", useFrames:true});
Tweener.addTween(actor, {angle:0, delay:10, time: 10, transition:"easeInOutQuad", useFrames:true});

« Last Edit: June 21, 2013, 03:05:35 am by gamegirlxl »

SadiQ

  • Posts: 1778

Tweener.addTween(_myActor, {x:-20, time: 30, transition:"easeInOutQuad", useFrames:true, onComplete:TweenComplete()});

So, I just added a new parameter: onComplete:TweenComplete() . Note that the event name has to have those parentheses at the end. Once the tween has ended, guess what happens?... "Tweening complete!!!".

I actually tried that and it runs the new custom event when the tween starts not when it ends, however if I remove the parentheses it works out as intended !!!
Proud member of the League of Idiotic Stencylers! Doing things in Stencyl that probably shouldn't be done.

gamegirlxl

  • Posts: 716
Tweens actually "end" immediately, just like "wait n seconds".  A time bomb is placed, of sorts, and you need to edit your timing accordingly.