[Phaser 3] Juice Plugin

Showcase
1

Hi Everyone,

I have made a new plugin to create simple juicy effects for your sprites.
Each effect can be customised to your own needs.

Souce: https://github.com/RetroVX/phaser3-juice-plugin
Demo: https://retrovx.github.io/phaser3-juice-plugin/

Features

  • Shake
  • Wobble
  • Flash
  • Scale Up
  • Scale Down
  • Pulse
  • Rotate
  • Bounce
  • Fade In
  • Fade Out
  • Fade In & Out
  • FlipX
  • FlipY
  • SpinX
  • SpinY
  • Reset

Basic Example

import phaserJuice from "./path/to/phaserJuice.min.js";`

const juice = new phaserJuice(this);

const sprite = this.add.sprite(x, y, 'sprite');

// shake the sprite
juice.shake(sprite);

// oh no, the sprite is taking damage!
juice.add(sprite)
.shake()
.flash();

phaserJuice
phaserJuice.jpg1894×865 442 KB

The full documentation can be found at Github.

10 Likes
2

I’ll have to try this out!

1 Like
3

Nice little plugin!

It would be cool if you could chain the effects or have timeline controls for rudimentary animations. Something like this (I know, the API is different):

juice(sprite)
    .shake()
    .flash();
1 Like
4

Hi jorbascrumps,

Thank you for the suggestion. I will definitely look into this. Also thanks for checking it out :slight_smile:

5

Agreed.

1 Like
6

I have updated the plugin so you can now chain the effects.
Thanks jorbascrumps :slight_smile:

Example:

const juice = new phaserJuice(this);

// chain
juice.add(sprite)
.shake()
.flash();

I’ve updated the readme and examples to reflect these changes.

1 Like
7

Update:
I have converted the class to a phaser plugin so now it can be installed once and used in any scene.

import phaserJuice from ".path/to/phaserJuicePlugin.min.js";

const config = {
  type: Phaser.AUTO,
  width: 480,
  height: 400,
  parent: "gameCanvas",
  plugins: {
    scene: [
        { key: 'phaserJuice', plugin: phaserJuice, mapping: 'juice' }
    ]
  },
  scene: basicScene,

};

const game = new Phaser.Game(config);

// you can now access the plugin in any scene using
this.juice
1 Like
8

Awesome! :smiley:

9

I read about your Juice plugin in the gamedev.js weekly newsletter and wanted to say, Thank You! for developing it! :slight_smile:

These small effects can make a big difference to how much fun can be had when playing a game.

I will be sure to use your plugin in a future project!

Cheers! :slightly_smiling_face:

1 Like
10

Hi Wizard,

Thank you for the kind message, it made my day :slight_smile:

I also didn’t know about the newsletter so thank you for that as well :slight_smile:

11

yeah. this is great stuff. thanks.

12

thank u very much

13

amazing love how in the demo u show the line of code required to use when the animation is played. You should add a rotate clockwise and rotate anti-clockwise. Would also love to have a way to change the intensity.