var config = { type: Phaser.WEBGL, width: 800, height: 600, backgroundColor: '#080808', parent: 'phaser-example', scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); function preload () { this.load.setBaseURL('https://cdn.phaserfiles.com/v355'); this.load.image('bar', 'assets/sprites/bluebar.png'); } function create () { // There are 32 built-in easing equations including Elastic which is shown in the Elasticity example var eases = [ 'Linear', 'Quad.easeIn', 'Cubic.easeIn', 'Quart.easeIn', 'Quint.easeIn', 'Sine.easeIn', 'Expo.easeIn', 'Circ.easeIn', 'Back.easeIn', 'Bounce.easeIn', 'Quad.easeOut', 'Cubic.easeOut', 'Quart.easeOut', 'Quint.easeOut', 'Sine.easeOut', 'Expo.easeOut', 'Circ.easeOut', 'Back.easeOut', 'Bounce.easeOut', 'Quad.easeInOut', 'Cubic.easeInOut', 'Quart.easeInOut', 'Quint.easeInOut', 'Sine.easeInOut', 'Expo.easeInOut', 'Circ.easeInOut', 'Back.easeInOut', 'Bounce.easeInOut' ]; const stepY = 19 // labels for (const [index, easeFnName] of eases.entries()) { this.add.text(140, 23 + (index * stepY), easeFnName).setOrigin(1, 0).setFontSize(14) } var markers = this.add.group({ key: 'bar', repeat: 27, setXY: { x: 196, y: 32, stepY }, setAlpha: { value: 0.3 } }); var images = this.add.group({ key: 'bar', repeat: 27, setXY: { x: 196, y: 32, stepY }}); var _this = this; images.children.iterate(function (child) { _this.tweens.add({ targets: child, x: 700, ease: eases.shift(), duration: 1500, delay: 1000, repeat: -1, repeatDelay: 1000, hold: 1000 }); }); }
Scan to open on your mobile device
var config = { type: Phaser.WEBGL, width: 800, height: 600, backgroundColor: '#080808', parent: 'phaser-example', scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); function preload () { this.load.setBaseURL('https://cdn.phaserfiles.com/v355'); this.load.image('bar', 'assets/sprites/bluebar.png'); } function create () { // There are 32 built-in easing equations including Elastic which is shown in the Elasticity example var eases = [ 'Linear', 'Quad.easeIn', 'Cubic.easeIn', 'Quart.easeIn', 'Quint.easeIn', 'Sine.easeIn', 'Expo.easeIn', 'Circ.easeIn', 'Back.easeIn', 'Bounce.easeIn', 'Quad.easeOut', 'Cubic.easeOut', 'Quart.easeOut', 'Quint.easeOut', 'Sine.easeOut', 'Expo.easeOut', 'Circ.easeOut', 'Back.easeOut', 'Bounce.easeOut', 'Quad.easeInOut', 'Cubic.easeInOut', 'Quart.easeInOut', 'Quint.easeInOut', 'Sine.easeInOut', 'Expo.easeInOut', 'Circ.easeInOut', 'Back.easeInOut', 'Bounce.easeInOut' ]; const stepY = 19 // labels for (const [index, easeFnName] of eases.entries()) { this.add.text(140, 23 + (index * stepY), easeFnName).setOrigin(1, 0).setFontSize(14) } var markers = this.add.group({ key: 'bar', repeat: 27, setXY: { x: 196, y: 32, stepY }, setAlpha: { value: 0.3 } }); var images = this.add.group({ key: 'bar', repeat: 27, setXY: { x: 196, y: 32, stepY }}); var _this = this; images.children.iterate(function (child) { _this.tweens.add({ targets: child, x: 700, ease: eases.shift(), duration: 1500, delay: 1000, repeat: -1, repeatDelay: 1000, hold: 1000 }); }); }