Kalakoi/GDevelop
1
0
Fork 0
mirror of https://github.com/4ian/GDevelop.git synced 2025-10-15 10:19:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add an expression to use Tween easing functions (#3605)

Browse Source 
* This is useful to do easing with other formulas rather than the classic "lerp".
This commit is contained in:
D8H
2022-02-09 10:05:42 +01:00
committed by GitHub
parent f4c730f5fd
commit 83a390089d
4 changed files with 186 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
Extensions/TweenBehavior/JsExtension.js
View File

@@ -37,6 +37,65 @@ module.exports = {
)
.setExtensionHelpPath('/behaviors/tween');
const easingChoices = JSON.stringify([
'linear',
'easeInQuad',
'easeOutQuad',
'easeInOutQuad',
'easeInCubic',
'easeOutCubic',
'easeInOutCubic',
'easeInQuart',
'easeOutQuart',
'easeInOutQuart',
'easeInQuint',
'easeOutQuint',
'easeInOutQuint',
'easeInSine',
'easeOutSine',
'easeInOutSine',
'easeInExpo',
'easeOutExpo',
'easeInOutExpo',
'easeInCirc',
'easeOutCirc',
'easeInOutCirc',
'easeOutBounce',
'easeInBack',
'easeOutBack',
'easeInOutBack',
'elastic',
'swingFromTo',
'swingFrom',
'swingTo',
'bounce',
'bouncePast',
'easeFromTo',
'easeFrom',
'easeTo',
]);
extension
.addExpression(
'Ease',
_('Ease'),
_('Tween between 2 values according to an easing function.'),
'',
'res/actions/camera.png'
)
.addParameter('stringWithSelector', _('Easing'), easingChoices, false)
.setDefaultValue('linear')
.addParameter('expression', _('From value'))
.addParameter('expression', _('To value'))
.addParameter('expression', _('Weighting'))
.setParameterLongDescription(
_('From 0 to 1.')
)
.getCodeExtraInformation()
.setIncludeFile('Extensions/TweenBehavior/shifty.js')
.addIncludeFile('Extensions/TweenBehavior/tweentools.js')
.setFunctionName('gdjs.evtTools.tween.ease');
var tweenBehavior = new gd.BehaviorJsImplementation();
// $FlowExpectedError - ignore Flow warning as we're creating a behavior
@@ -74,44 +133,6 @@ module.exports = {
.setIncludeFile('Extensions/TweenBehavior/shifty.js')
.addIncludeFile('Extensions/TweenBehavior/tweenruntimebehavior.js');
const easingChoices = JSON.stringify([
'linear',
'easeInQuad',
'easeOutQuad',
'easeInOutQuad',
'easeInCubic',
'easeOutCubic',
'easeInOutCubic',
'easeInQuart',
'easeOutQuart',
'easeInOutQuart',
'easeInQuint',
'easeOutQuint',
'easeInOutQuint',
'easeInSine',
'easeOutSine',
'easeInOutSine',
'easeInExpo',
'easeOutExpo',
'easeInOutExpo',
'easeInCirc',
'easeOutCirc',
'easeInOutCirc',
'easeOutBounce',
'easeInBack',
'easeOutBack',
'easeInOutBack',
'elastic',
'swingFromTo',
'swingFrom',
'swingTo',
'bounce',
'bouncePast',
'easeFromTo',
'easeFrom',
'easeTo',
]);
// Behavior related
behavior
.addAction(

76
Extensions/TweenBehavior/shifty.d.ts vendored
View File

@@ -138,43 +138,6 @@ declare namespace shifty {
afterTween: shifty.afterTweenFilter;
};
// easing-functions.js
export function linear(pos: number): number;
export function easeInQuad(pos: any): number;
export function easeOutQuad(pos: any): number;
export function easeInOutQuad(pos: any): number;
export function easeInCubic(pos: any): number;
export function easeOutCubic(pos: any): number;
export function easeInOutCubic(pos: any): number;
export function easeInQuart(pos: any): number;
export function easeOutQuart(pos: any): number;
export function easeInOutQuart(pos: any): number;
export function easeInQuint(pos: any): number;
export function easeOutQuint(pos: any): number;
export function easeInOutQuint(pos: any): number;
export function easeInSine(pos: any): number;
export function easeOutSine(pos: any): number;
export function easeInOutSine(pos: any): number;
export function easeInExpo(pos: any): number;
export function easeOutExpo(pos: any): number;
export function easeInOutExpo(pos: any): number;
export function easeInCirc(pos: any): number;
export function easeOutCirc(pos: any): number;
export function easeInOutCirc(pos: any): number;
export function easeOutBounce(pos: any): number;
export function easeInBack(pos: any): number;
export function easeOutBack(pos: any): number;
export function easeInOutBack(pos: any): number;
export function elastic(pos: any): number;
export function swingFromTo(pos: any): number;
export function swingFrom(pos: any): number;
export function swingTo(pos: any): number;
export function bounce(pos: any): number;
export function bouncePast(pos: any): number;
export function easeFromTo(pos: any): number;
export function easeFrom(pos: any): number;
export function easeTo(pos: any): number;
// bezier.js
export function setBezierFunction(
@@ -560,6 +523,45 @@ declare namespace shifty {
*/
export function setScheduleFunction(fn: scheduleFunction): scheduleFunction;
export const filters: any;
// easing-functions.js
export namespace formulas {
export function linear(pos: number): number;
export function easeInQuad(pos: any): number;
export function easeOutQuad(pos: any): number;
export function easeInOutQuad(pos: any): number;
export function easeInCubic(pos: any): number;
export function easeOutCubic(pos: any): number;
export function easeInOutCubic(pos: any): number;
export function easeInQuart(pos: any): number;
export function easeOutQuart(pos: any): number;
export function easeInOutQuart(pos: any): number;
export function easeInQuint(pos: any): number;
export function easeOutQuint(pos: any): number;
export function easeInOutQuint(pos: any): number;
export function easeInSine(pos: any): number;
export function easeOutSine(pos: any): number;
export function easeInOutSine(pos: any): number;
export function easeInExpo(pos: any): number;
export function easeOutExpo(pos: any): number;
export function easeInOutExpo(pos: any): number;
export function easeInCirc(pos: any): number;
export function easeOutCirc(pos: any): number;
export function easeInOutCirc(pos: any): number;
export function easeOutBounce(pos: any): number;
export function easeInBack(pos: any): number;
export function easeOutBack(pos: any): number;
export function easeInOutBack(pos: any): number;
export function elastic(pos: any): number;
export function swingFromTo(pos: any): number;
export function swingFrom(pos: any): number;
export function swingTo(pos: any): number;
export function bounce(pos: any): number;
export function bouncePast(pos: any): number;
export function easeFromTo(pos: any): number;
export function easeFrom(pos: any): number;
export function easeTo(pos: any): number;
}
}
// token.js

48
Extensions/TweenBehavior/tweenruntimebehavior.ts
View File

@@ -208,10 +208,10 @@ namespace gdjs {
/**
* Add an object variable tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param variable The object variable to store the tweened value
* @param fromValue Start value
* @param toVaue End value
* @param toValue End value
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
* @param destroyObjectWhenFinished Destroy this object when the tween ends
@@ -243,7 +243,7 @@ namespace gdjs {
/**
* Add an object position tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toX The target X position
* @param toY The target Y position
* @param easingValue Type of easing
@@ -279,7 +279,7 @@ namespace gdjs {
/**
* Add an object X position tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toX The target X position
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
@@ -310,7 +310,7 @@ namespace gdjs {
/**
* Add an object Y position tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toY The target Y position
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
@@ -341,7 +341,7 @@ namespace gdjs {
/**
* Add an object angle tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toAngle The target angle
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
@@ -374,7 +374,7 @@ namespace gdjs {
/**
* Add an object scale tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toScaleX The target X-scale
* @param toScaleY The target Y-scale
* @param easingValue Type of easing
@@ -432,7 +432,7 @@ namespace gdjs {
/**
* Add an object X-scale tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toScaleX The target X-scale
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
@@ -477,7 +477,7 @@ namespace gdjs {
/**
* Add an object scale y tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toScaleY The target Y-scale
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
@@ -522,7 +522,7 @@ namespace gdjs {
/**
* Add an object opacity tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toOpacity The target opacity
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
@@ -558,7 +558,7 @@ namespace gdjs {
/**
* Add an object color tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toColorStr The target color
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
@@ -661,7 +661,7 @@ namespace gdjs {
/**
* Add an object color HSL tween, with the "to" color given using HSL (H: any number, S and L: 0-100).
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toHue The target hue, or the same as the from color's hue if blank
* @param animateHue, include hue in calculations, as can't set this to -1 as default to ignore
* @param toSaturation The target saturation, or the same as the from color's saturation if blank
@@ -741,7 +741,7 @@ namespace gdjs {
/**
* Add a text object character size tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toSize The target character size
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
@@ -777,7 +777,7 @@ namespace gdjs {
/**
* Add an object width tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toWidth The target width
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
@@ -810,7 +810,7 @@ namespace gdjs {
/**
* Add an object height tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param toHeight The target height
* @param easingValue Type of easing
* @param durationValue Duration in milliseconds
@@ -843,7 +843,7 @@ namespace gdjs {
/**
* Tween is playing.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
*/
isPlaying(identifier: string): boolean {
return this._tweenExists(identifier) && this._tweenIsPlaying(identifier);
@@ -851,7 +851,7 @@ namespace gdjs {
/**
* Tween exists.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @returns The tween exists
*/
exists(identifier: string): boolean {
@@ -860,7 +860,7 @@ namespace gdjs {
/**
* Tween has finished.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
*/
hasFinished(identifier: string): boolean {
return (
@@ -870,7 +870,7 @@ namespace gdjs {
/**
* Pause a tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
*/
pauseTween(identifier: string) {
if (
@@ -883,7 +883,7 @@ namespace gdjs {
/**
* Stop a tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @param jumpToDest Move to destination
*/
stopTween(identifier: string, jumpToDest: boolean) {
@@ -897,7 +897,7 @@ namespace gdjs {
/**
* Resume a tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
*/
resumeTween(identifier: string) {
if (
@@ -910,7 +910,7 @@ namespace gdjs {
/**
* Remove a tween.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
*/
removeTween(identifier: string) {
if (!this._tweenExists(identifier)) return;
@@ -925,7 +925,7 @@ namespace gdjs {
/**
* Get tween progress.
* @param identifier Unique id to idenfify the tween
* @param identifier Unique id to identify the tween
* @returns Progress of playing tween animation (between 0.0 and 1.0)
*/
getProgress(identifier: string): float {
@@ -1059,7 +1059,7 @@ namespace gdjs {
const shiftyJsScene = runtimeScene.shiftyJsScene;
if (!shiftyJsScene) return;
// Stop and explictly remove all tweenables to be sure to drop
// Stop and explicitly remove all tweenables to be sure to drop
// all references to the tweenables of the scene.
shiftyJsScene.stop(false);
shiftyJsScene.empty();

64
Extensions/TweenBehavior/tweentools.ts Normal file
View File

@@ -0,0 +1,64 @@
/// <reference path="shifty.d.ts" />
namespace gdjs {
export namespace evtTools {
export namespace tween {
const easingFunctions: { [key: string]: shifty.easingFunction } = {
linear: shifty.Tweenable.formulas.linear,
easeInQuad: shifty.Tweenable.formulas.easeInQuad,
easeOutQuad: shifty.Tweenable.formulas.easeOutQuad,
easeInOutQuad: shifty.Tweenable.formulas.easeInOutQuad,
easeInCubic: shifty.Tweenable.formulas.easeInCubic,
easeOutCubic: shifty.Tweenable.formulas.easeOutCubic,
easeInOutCubic: shifty.Tweenable.formulas.easeInOutCubic,
easeInQuart: shifty.Tweenable.formulas.easeInQuart,
easeOutQuart: shifty.Tweenable.formulas.easeOutQuart,
easeInOutQuart: shifty.Tweenable.formulas.easeInOutQuart,
easeInQuint: shifty.Tweenable.formulas.easeInQuint,
easeOutQuint: shifty.Tweenable.formulas.easeOutQuint,
easeInOutQuint: shifty.Tweenable.formulas.easeInOutQuint,
easeInSine: shifty.Tweenable.formulas.easeInSine,
easeOutSine: shifty.Tweenable.formulas.easeOutSine,
easeInOutSine: shifty.Tweenable.formulas.easeInOutSine,
easeInExpo: shifty.Tweenable.formulas.easeInExpo,
easeOutExpo: shifty.Tweenable.formulas.easeOutExpo,
easeInOutExpo: shifty.Tweenable.formulas.easeInOutExpo,
easeInCirc: shifty.Tweenable.formulas.easeInCirc,
easeOutCirc: shifty.Tweenable.formulas.easeOutCirc,
easeInOutCirc: shifty.Tweenable.formulas.easeInOutCirc,
easeOutBounce: shifty.Tweenable.formulas.easeOutBounce,
easeInBack: shifty.Tweenable.formulas.easeInBack,
easeOutBack: shifty.Tweenable.formulas.easeOutBack,
easeInOutBack: shifty.Tweenable.formulas.easeInOutBack,
elastic: shifty.Tweenable.formulas.elastic,
swingFromTo: shifty.Tweenable.formulas.swingFromTo,
swingFrom: shifty.Tweenable.formulas.swingFrom,
swingTo: shifty.Tweenable.formulas.swingTo,
bounce: shifty.Tweenable.formulas.bounce,
bouncePast: shifty.Tweenable.formulas.bouncePast,
easeFromTo: shifty.Tweenable.formulas.easeFromTo,
easeFrom: shifty.Tweenable.formulas.easeFrom,
easeTo: shifty.Tweenable.formulas.easeTo,
};
/**
* Tween between 2 values according to an easing function.
* @param fromValue Start value
* @param toValue End value
* @param easingValue Type of easing
* @param weighting from 0 to 1
*/
export const ease = (
easingValue: string,
fromValue: float,
toValue: float,
weighting: float
) => {
const easingFunction = easingFunctions.hasOwnProperty(easingValue)
? easingFunctions[easingValue]
: shifty.Tweenable.formulas.linear;
return fromValue + (toValue - fromValue) * easingFunction(weighting);
};
}
}
}