Carousel

Introduction¶

A container with cards.

Author: Rex
Game object

WebGL only

It only works in WebGL render mode.

Live demos¶

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);

Add carousel object

var carousel = scene.add.rexPerspectiveCarousel(config);

Import plugin¶

Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

Install plugin in configuration of game

import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';
var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexPerspectiveImagePlugin',
            plugin: PerspectiveImagePlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);

Add carousel object

var carousel = scene.add.rexPerspectiveCarousel(config);

Import class¶

Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

Import class

import { PerspectiveCarousel } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';

Add carousel object

var carousel = new PerspectiveCarousel(scene, config);
scene.add.existing(carousel);

Create instance¶

var carousel = scene.add.rexPerspectiveCarousel({
    x: 0, y: 0,

    faces: [],
    // face: 0,
    // rtl: false,

    // width,
    // height,

    // faceWidth,
    // faceSpace: 0,

    // z: 1,
    // zEnd: 0,

    // roll : {
    //     duration: 1000,
    //     ease: 'Cubic',
    //     delay: 0,
    // }
});

faces : Array of perspective-card, perspective-rendertexture, perspective-image, or null.
- Assume that all faces have the same size
face : Index or name of current face (face at angle 0).
rtl
- false : Place faces from left to right. Default behavior.
- true : Place faces from right to left.
width, height : Specific width and height of this carousel container.
- undefined : Use width and height of first face.
faceWidth : Width of face.
- undefined : Use width of face. Assume that all faces have the same size.
faceSpace : Extra space of face width. Used when faceWidth is undefined.
z, zEnd : Range of faces' z-index. Default value is 1/0.
roll : Configuration of rolling behavior.
- roll.duration : Duration of rolling, in millisecond.
- roll.delay : Initial delay.
- roll.ease : Ease function. Default value is 'Cubic'.
- false : Don't add rolling behavior.

Add carousel from JSON

var carousel = scene.make.rexPerspectiveCarousel({
    x: 0,
    y: 0,

    faces: [],

    // width,
    // height,

    // faceWidth,
    // faceSpace: 0,

    // z: 1,
    // zEnd: 0,

    add: true
});

Custom class¶

Define class

class MyPerspectiveCarousel extends PerspectiveCarousel {
    constructor(scene, config) {
        super(scene, config);
        // ...
        scene.add.existing(this);
    }
    // ...

    // preUpdate(time, delta) {
    //     super.preUpdate(time, delta);
    // }
}

scene.add.existing(gameObject) : Adds an existing Game Object to this Scene.
- If the Game Object renders, it will be added to the Display List.
- If it has a preUpdate method, it will be added to the Update List.

Create instance

var carousel = new MyPerspectiveCarousel(scene, config);

Face instances¶

var faces = carousel.faces;

faces : Array of face instances.

Face¶

Get
```
var face = carousel.face;
```
- face: Index of carousel.faces.
Set
```
carousel.setFace(face)
```
- face : Index or name of current face (face at angle 0).

Roll behavior¶

Start rolling¶

Roll to next face
```
carousel.roll.toNext(duration);
```
- duration : Overwrite default duration value.
Roll to previous face
```
carousel.roll.toPrevious(duration);
```
- duration : Overwrite default duration value.
Roll to right face
```
carousel.roll.toRight(duration);
```
- duration : Overwrite default duration value.
Roll to left face
```
carousel.roll.toLeft(duration);
```
- duration : Overwrite default duration value.
Roll to face
```
carousel.roll.to(faceIndex, duration);
```
- faceIndex :
  - A number : Index of face in carousel.faces
  - A string : Name of face (face.setName(name))
- duration : Overwrite default duration value.

Stop flipping¶

carousel.roll.stop();

Set duration¶

carousel.roll.setDuration(duration);
// carousel.roll.duration = duration;

Set ease¶

carousel.roll.setEase(ease);
// carousel.roll.ease = ease;

Events¶

On rolling complete

carousel.roll.on('complete', function(){
    // ...
});

Status¶

Is rolling

var isRunning = carousel.roll.isRunning;

Rotation¶

Get rotation angle

var angleY = carousel.angleY; // Angle in degrees

or

var rotationY = carousel.rotationY; // Angle in radians

Set rotation angle

carousel.angleY = angleY; // Angle in degrees

or

carousel.rotationY = rotationY; // Angle in radians

Other properties¶

See container, Mesh game object, game object

Create mask¶

var mask = carousel.createBitmapMask();

See mask

Shader effects¶

Support postFX effects

Note

No preFX effect support