diff --git a/spine-ts/index.html b/spine-ts/index.html index a916bfb64..217a7a58d 100644 --- a/spine-ts/index.html +++ b/spine-ts/index.html @@ -195,8 +195,11 @@
  • Widget (Webcomponent)
    • diff --git a/spine-ts/spine-widget/example/app.html b/spine-ts/spine-widget/example/app.html new file mode 100644 index 000000000..8d73283c9 --- /dev/null +++ b/spine-ts/spine-widget/example/app.html @@ -0,0 +1,690 @@ + + + + + + Webcomponent GUI + + + +
    +
    + +
    + + +
    +
    + +
    + +
    +
    +
    + +
    + + +
    +
    +
    + +
    + + +
    +
    +
    + +
    + + +
    +
    +
    + +
    + + +
    +
    +
    +
    +
    +
    Carrots 0
    +
    Tomatoes 0
    +
    Breads 0
    +
    Mushrooms 0
    +
    +
    + + +
    +
    +
    +
    + + + + + +
    +
    + + + +
    + +
    + +
    +
    + Click on the food to cook it +
    +
    + + +
    +
    + +
    +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    +
    + +
    + +
    + + + + +
    +
    + + + +
    + +
    +
    +
    + +
    +
    + +
    +
    + Help the box to reach the destination by clicking the button above! +
    +
    + + +
    +
    + +
    + +
    + + + +
    +
    + + + +
    + +
    +
    +
    + Congratulation! You food has just been delivered! +
    +
    + +
    +
    + +
    + +
    + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/spine-ts/spine-widget/example/game.html b/spine-ts/spine-widget/example/game.html new file mode 100644 index 000000000..b30dd488f --- /dev/null +++ b/spine-ts/spine-widget/example/game.html @@ -0,0 +1,332 @@ + + + + + + Webcomponent GUI + + + + +
    + +
    +
    + +
    + + +
    + + +
    +
    + +
    + +
    +
    +
    + Use WASD to move around! +
    + +
    +
    +
    Save the flowers from the white pest by shooting them
    +
    + +
    +
    +
    Go to the red colored rooster of bush when ammo is low
    +
    + +
    +
    +
    Reach level 10 to win the game
    +
    + +
    +
    + +
    + +
    + + + + + \ No newline at end of file diff --git a/spine-ts/spine-widget/example/login.html b/spine-ts/spine-widget/example/login.html new file mode 100644 index 000000000..3e9eaddd0 --- /dev/null +++ b/spine-ts/spine-widget/example/login.html @@ -0,0 +1,246 @@ + + + + + + Webcomponent GUI + + + + +
    + + +
    +
    +
    + +
    +
    + +
    + +
    +
    + +
    +
    + +
    + +
    Password is password
    + +
    + + +
    + +
    +
    + +
    + A login UI made using the chibi stickers and a button made using +

    + The chibi sticker does the following: +

    +

    + +

    + The button does the following: +

    +

    +
    +
    + + + + + \ No newline at end of file diff --git a/spine-ts/spine-widget/example/tutorial.html b/spine-ts/spine-widget/example/tutorial.html index 3157c0224..1506d297f 100644 --- a/spine-ts/spine-widget/example/tutorial.html +++ b/spine-ts/spine-widget/example/tutorial.html @@ -2360,7 +2360,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => { const [tank, tank2] = await Promise.all([ spine.getSpineWidget("tank").whenReady, spine.getSpineWidget("tank2").whenReady]); - tank.beforeUpdateWorldTransforms = (skeleton, state) => { + tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => { if (!tank.onScreen) return; tank.skeleton.scaleX = tank2.skeleton.scaleX; tank.skeleton.scaleY = tank2.skeleton.scaleY; @@ -2399,7 +2399,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => { const [tank, tank2] = await Promise.all([ spine.getSpineWidget("tank").whenReady, spine.getSpineWidget("tank2").whenReady]); -tank.beforeUpdateWorldTransforms = (skeleton, state) => { +tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => { if (!tank.onScreen) return; tank.skeleton.scaleX = tank2.skeleton.scaleX; tank.skeleton.scaleY = tank2.skeleton.scaleY; @@ -3415,1278 +3415,6 @@ const darkPicker = document.getElementById("dark-picker"); /////// --> - - -
    - -
    - A login UI made using the chibi stickers and a button made using Spine. -

    - The chibi sticker does the following: -

    -

    - -

    - The button does the following: -

    -

    -
    - - - - -
    -
    -
    - -
    -
    - -
    - -
    -
    - -
    -
    - -
    - -
    Password is password
    - -
    - - -
    - -
    -
    - - - - - - - - -
    - 
    
-                
-
    -
    - -
    - - - - - - - - -
    - - - - -
    -
    - - - -
    - - -
    -
    - -
    - -
    -
    -
    - -
    - - -
    -
    -
    - -
    - - -
    -
    -
    - -
    - - -
    -
    -
    - -
    - - -
    -
    -
    -
    -
    -
    Carrots 0
    -
    Tomatoes 0
    -
    Breads 0
    -
    Mushrooms 0
    -
    -
    - - -
    -
    -
    -
    - - - - - -
    -
    - - - -
    - -
    - -
    -
    - Click on the food to cook it -
    -
    - - -
    -
    - -
    -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    - -
    - -
    - - - - -
    -
    - - - -
    - -
    -
    -
    - -
    -
    - -
    -
    - Help the box to reach the destination by clicking the button above! -
    -
    - - -
    -
    - -
    - -
    - - - -
    -
    - - - -
    - -
    -
    -
    - Congratulation! You food has just been delivered! -
    -
    - -
    -
    - -
    - -
    - - -
    -
    -
    - - - - - - -
    - 
    
-            
-
    -
    - -
    - - - - - - - - -
    - -
    -
    - -
    - - -
    - - -
    -
    - -
    -
    -
    -
    - Use WASD to move around! -
    - -
    -
    -
    Save the flowers from the white pest by shooting them
    -
    - -
    -
    -
    Go to the red colored rooster of bush when ammo is low
    -
    - -
    -
    -
    Reach level 10 to win the game
    -
    - -
    -
    -
    - - - - -
    - 
    
-                
-
    -
    -
    - - - diff --git a/spine-ts/spine-widget/src/SpineWebComponentWidget.ts b/spine-ts/spine-widget/src/SpineWebComponentWidget.ts index 42c4613bb..7dff71fbf 100644 --- a/spine-ts/spine-widget/src/SpineWebComponentWidget.ts +++ b/spine-ts/spine-widget/src/SpineWebComponentWidget.ts @@ -68,7 +68,6 @@ interface Rectangle extends Point { height: number, } -type BeforeAfterUpdateSpineWidgetFunction = (skeleton: Skeleton, state: AnimationState) => void; type UpdateSpineWidgetFunction = (delta: number, skeleton: Skeleton, state: AnimationState) => void; export type OffScreenUpdateBehaviourType = "pause" | "update" | "pose"; @@ -207,8 +206,8 @@ interface WidgetAttributes { // The methods user can override to have custom behaviour interface WidgetOverridableMethods { update?: UpdateSpineWidgetFunction; - beforeUpdateWorldTransforms: BeforeAfterUpdateSpineWidgetFunction; - afterUpdateWorldTransforms: BeforeAfterUpdateSpineWidgetFunction; + beforeUpdateWorldTransforms: UpdateSpineWidgetFunction; + afterUpdateWorldTransforms: UpdateSpineWidgetFunction; onScreenFunction: (widget: SpineWebComponentWidget) => void } @@ -657,12 +656,12 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable, /** * This callback is invoked before the world transforms are computed allows to execute additional logic. */ - public beforeUpdateWorldTransforms: BeforeAfterUpdateSpineWidgetFunction = () => { }; + public beforeUpdateWorldTransforms: UpdateSpineWidgetFunction = () => { }; /** * This callback is invoked after the world transforms are computed allows to execute additional logic. */ - public afterUpdateWorldTransforms: BeforeAfterUpdateSpineWidgetFunction = () => { }; + public afterUpdateWorldTransforms: UpdateSpineWidgetFunction = () => { }; /** * A callback invoked each time the element container enters the screen viewport. @@ -1801,9 +1800,9 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes, if (onScreen || (!onScreen && offScreenUpdateBehaviour === "pose")) { state.apply(skeleton); - beforeUpdateWorldTransforms(skeleton, state); + beforeUpdateWorldTransforms(delta, skeleton, state); skeleton.updateWorldTransform(Physics.update); - afterUpdateWorldTransforms(skeleton, state); + afterUpdateWorldTransforms(delta, skeleton, state); } } }