Is there any working example of a simple noUiSlider including a play/pause button, or a strategy how I could achieve this?
I've a simple noUiSlider connected to a stack of images. The number of the slider is connected to the index of the image stack to make the image visible.
var currentIndex = 0;
function animation(value, handleElement, slider){
//alert(value);
imgArray[currentIndex].setVisible(false);
currentIndex = Math.floor(value * 45 / 100);
imgArray[currentIndex].setVisible(true);
}
// pane Image Layer slider
function setText( value, handleElement, slider ){
$("#someElement").text( value );
}
$('#html5').noUiSlider({
start: 45,
step: 1,
range: {
'min': 0,
'max': 45,
},
format: wNumb({
decimals: 0
})
});
$("#html5").Link('lower').to(animation);
$("#html5").Link('lower').to(setText);
If I slide the slider back and forward the images change, but now I would like to add a play/pause button.
Related
In my Phaser 3 game I'm using Phaser.GameObjects.Image 's as things that a user can click on. When a user's mouse hovers over an image I would like a tooltip with text to fade in and appear. When the mouse moves off the image, I'd like the tooltip to disappear.
How can I implement this behavior in Phaser? I'm new to Phaser and I don't see a ToolTip class in the framework.
You could:
use the pointer events for detecting, that the pointer is over an object
and animate/tween the alpha property on the over event
you can alter the speed with the tween duration
and hide the toolTip on the out event
Here the docs to the Input events: https://photonstorm.github.io/phaser3-docs/Phaser.Input.Events.html
Here a mini example:
var config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 800,
height: 600,
scene: {
create: create
}
};
var game = new Phaser.Game(config);
var toolTip;
var toolTipText;
function create ()
{
let objectWithToolTip = this.add.rectangle( 100, 100, 100, 100, 0xffffff).setInteractive();
toolTip = this.add.rectangle( 0, 0, 250, 50, 0xff0000).setOrigin(0);
toolTipText = this.add.text( 0, 0, 'This is a white rectangle', { fontFamily: 'Arial', color: '#000' }).setOrigin(0);
toolTip.alpha = 0;
this.input.setPollOnMove();
this.input.on('gameobjectover', function (pointer, gameObject) {
this.tweens.add({
targets: [toolTip, toolTipText],
alpha: {from:0, to:1},
repeat: 0,
duration: 500
});
}, this);
this.input.on('gameobjectout', function (pointer, gameObject) {
toolTip.alpha = 0;
toolTipText.alpha = 0;
});
objectWithToolTip.on('pointermove', function (pointer) {
toolTip.x = pointer.x;
toolTip.y = pointer.y;
toolTipText.x = pointer.x + 5;
toolTipText.y = pointer.y + 5;
});
}
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.min.js"></script>
Info: if you want to dig deeper into the phaser events you can checkout some examples on the offical home page: https://phaser.io/examples/v3/category/input/mouse are really good, and explore may use cases.
Extra Info: If you don't want to re-invent the wheel, there are several plugins, that can be loaded into phaser(that add special functionality to phaser).
It is always good to check this page(https://phaserplugins.com/), before implementing so common feature/function. There is even on specially for tooltips https://github.com/netgfx/Phaser-tooltip
Object Boundary
I'm a new Phaser developer, in the beginning stages of my first game. My problem is, when my player hits the ground, the bounding box defining his bounds is way bigger than he is (see pic). So in the example shown, the player will bounce when the borders touch, not his feet.
In action
Physics Matter
Do I have to change from ARCADE physics to a more robust physics engine, in order to accomplish my goal?
Code
There's really not much to show, but here is what I have:
/// <reference path="../defs/phaser.d.ts" />
class MainGame extends Phaser.Scene {
constructor() {
super("MainGame");
}
preload() {
this.load.image("bg1", "assets/bg-level1.png");
this.load.image('ground', 'assets/platform.png');
this.load.spritesheet('dude', 'assets/final-jump.png', {
frameWidth: 118,
frameHeight: 118
});
}
create() {
this.setupBackground();
this.setupPlayer();
this.add.text(0, 0, 'Use Cursors to scroll camera.\nQ / E to zoom in and out', {
font: '18px Courier',
fill: 'black'
});
this.physics.add.collider(this.player, this.platforms);
}
update() {
// Set Player Animations
this.setPlayerAnimation();
if (this.player.body.onFloor()) {
console.log("FLOOR");
this.player.body.setAccelerationX(31);
this.player.body.setAccelerationY(31);
}
}
//---------------------------------
// CREATE RELATED FUNCTIONS
//---------------------------------
setupBackground() {
this.background = this.add.image(0, 0, "bg1");
this.background.setOrigin(0, 0);
//this.background.setInteractive();
this.background.setAlpha(.2, .2, .2, .2);
// The platforms group contains the ground and the 2 ledges we can jump on
this.platforms = this.physics.add.staticGroup();
// Here we create the ground.
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
this.platforms.create(400, 568, 'ground').setScale(2).refreshBody();
}
setupPlayer() {
this.player = this.physics.add.sprite(100, 283, 'dude');
console.log(this.player.body.touching.down);
this.player.setVelocity(200, 100).setBounce(.8, .8).setCollideWorldBounds(true);
// Re-Size Player Size
this.player.setDisplaySize(220, 210);
// Collision Handler
this.physics.add.overlap(this.player, this.platforms, this.showJump, null, this);
// ANIMATIONS
this.anims.create({
key: 'jump-up',
frames: this.anims.generateFrameNumbers('dude', {
start: 1,
end: 2
}),
frameRate: 5,
repeat: 1
});
this.anims.create({
key: 'falling',
frames: this.anims.generateFrameNumbers('dude', {
start: 0,
end: 1
}),
frameRate: 5,
repeat: 1
});
this.anims.create({
key: 'onGround',
frames: this.anims.generateFrameNumbers('dude', {
start: 4,
end: 4
}),
frameRate: 24,
repeat: 1
});
}
showJump() {
this.player.anims.play('jump-up', true);
}
//---------------------------------
// UPDATE RELATED FUNCTIONS
//---------------------------------
setPlayerAnimation() {
//this.player.anims.play('jump-up', true);
if (this.player.body.deltaY() > 0 && this.player.body.onFloor()) {
this.player.anims.play('falling', true);
}
}
}
Oh, Yeah...
I am very impressed with the functionality of the local documentation package I downloaded and installed, however, I'm confused on where to begin looking for something. For instance, let's say I am struggling with making my player jump and play an animation when in the air, and change back when he hits the ground. Given that information, how do I find the correct class or function I need???
You do not have to change from arcade physics. Try something like this:
// Change the size of the bounding box.
this.player.setSize(32, 32);
// Change the location of the bounding box.
this.player.setOffset(0, 28);
// If that doesn't work, try this instead:
// this.player.body.setOffset(0, 28);
Obviously you need to adjust the width/height and offsets for your scenario.
References:
Sprite setSize method
Sprite setOffset method
Body setOffset method
How should HP write?
Because HP will decrease, but I found that he will deform.
Each time container.hpStatus.width- = 1; HP's icon will be distorted, especially HP = 0 is most obvious.
enter image description here
You Can Look My Codepen.
app.ticker.add((delta) => {
if (container.hpStatus.width > 0) {
container.hpStatus.width -= 1;
} else {
container.hpStatus.width = 450;
}
});
How can i make sure he doesn't deform？
The hp bar is getting distorted because you are decreasing width of "container.hpStatus" which is Geometry object which is itself a Container:
https://pixijs.download/dev/docs/PIXI.Graphics.html#Graphics
And as you see in docs of the "width" property: https://pixijs.download/dev/docs/PIXI.Container.html#width
width number
The width of the Container, setting this will actually modify the scale to achieve the value set
It means that changing "width" scales whole container ("container.hpStatus").
To draw such hp bar without "distortion" you can do it by drawing hp bar on each "tick" (each frame).
Plaese check following code - is your example but modified. Most important parts are "createHpBar" function and modified "main loop" (ticker).
(i also added some comments so you can understand better)
and here is updated codepen: https://codepen.io/domis86/pen/poJrKdq
const app = new PIXI.Application({
view: document.getElementById('main'),
width: 900,
height: 900,
antialias: true,
transparent: false,
backgroundColor: 0x00CC99,
});
// See: https://pixijs.download/dev/docs/PIXI.Ticker.html
let ticker = PIXI.Ticker.shared;
ticker.autoStart = false;
const container = new PIXI.Container();
app.stage.addChild(container);
function createHpBar(currentHp, maxHp, color) {
let hpBar = new PIXI.Graphics();
hpBar.beginFill(color);
let hpPortion = currentHp / maxHp;
hpBar.drawPolygon([
50, 80,
50 + (400 * hpPortion), 80,
32 + (400 * hpPortion), 150,
32, 150,
]);
hpBar.endFill();
return hpBar;
}
// Create black hp bar (the one behind the red one) and add it to our container:
let blackHpBar = createHpBar(450, 450, 0x000000);
container.addChild(blackHpBar);
container.x = 100;
container.y = 200;
let renderer = app.renderer;
// Starting amount of hp:
var currentHp = 450;
ticker.add((delta) => {
// create red hp bar which is a polygon with vertices calculated using "currentHp" amount:
let redHpBar = createHpBar(currentHp, 450, 0xFF0000);
// add red hp bar to container:
container.addChild(redHpBar);
// render our stage (render all objects from containers added to stage)
// see https://pixijs.download/dev/docs/PIXI.Ticker.html#.shared
renderer.render(app.stage);
// Remove red hp bar from our container:
// We do this because on next tick (aka: next frame) we will create new redHpBar with "createHpBar" (as you see above)
container.removeChild(redHpBar);
// Update current hp amount:
if (currentHp > 0) {
currentHp -= 1;
} else {
currentHp = 450;
}
});
// start rendering loop:
ticker.start();
I'm trying to make a card flip when is touched (working on mobile). So far I've only been able to change one frame for another (front to back), without any transition, so it feels unnatural. The idea is that you touch the screen, a card shows up, then ou touch it again and the card slowly flips, so you can see something in the back of the card.
I'm using the latest iteration of Phaser 3.
I have a working example, but it's made in Phaser 2, so I'm having a really hard time trying to update the code to Phaser 3.
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('fondo', 'img/backgroundhome.png');
this.load.spritesheet('carta', 'img/spritesheet.png', { frameWidth: 196, frameHeight: 339 });
this.load.image('reverso', 'img/reversecard.png');
}
function create() {
this.add.image(400, 300, 'fondo');
let cartaObj = this.add.image(75, 100, 'carta').setOrigin(0, 0).setInteractive();
this.anims.create({
key: 'frente',
frames: this.anims.generateFrameNumbers('carta', { start: 0, end: 0 }),
frameRate: 1,
repeat: -1
});
this.anims.create({
key: 'atras',
frames: this.anims.generateFrameNumbers('carta', { start: 1, end: 1 }),
frameRate: 1,
repeat: -1
});
var tween1 = this.scene.tweens.add({
targets: cartaObj,
scaleX: 10,
scaleY: 10,
ease: 'Linear',
duration: 300,
repeat: 0,
yoyo: false
});
cartaObj.once('pointerup', cargaAnim, this);
}
function cargaAnim() {
tween.start();
}
Tap the screen, show up a card (in this case a have a spritesheet with 2 frames, front and back), tap the card again and it flips slowly to show the back of the card.
I'm not very familiar with Phaser3 yet, but in Phaser2 I made something like this, see the level icons animation in this game. Basically the idea is to:
add a tween to 'fold' the card sprite (scale width to 0.0)
add onComplete function to tween
in onComplete function change sprite frame to show the card and..
..start another tween to 'unfold' the card (scale width to 1.0)
So something like:
// scale horizontally to disappear
var tween1 = this.scene.tweens.add({
targets: cartaObj,
scaleX: 0.01,
ease: 'Linear',
duration: 300,
repeat: 0,
yoyo: false
});
tween1.onComplete.add(function(){this.onTurnCard(cartaObj);}, this);
onTurnCard: function(card) {
// set card face somehow
card.frameName = 'HeartQueen'; // ?
// scale horizontally to re-appear
var twn = this.scene.tweens.add({
targets: card,
scaleX: 1.0,
ease: 'Linear',
duration: 300,
repeat: 0,
yoyo: false
});
// do something on complete
twn.onComplete.add(function(){this.onTurnCardCompleted(card);}, this);
}
onTurnCardCompleted: function(card) {
// do something, show text, add score etc.
if (card.frameName == 'HeartQueen') {
// ?
};
}
I'm working with this scroller
http://coolcarousels.frebsite.nl/c/2/
I have this setup below.
My issue is I have it set to visible: 4 and I have 4 images, so it doesn't scroll. If I set it to visible: 3 then it works as expected. But I want to show all 4 images in one screen when you open the browser full width on a 1920px wide resolution. So the issue seems to be. If I set visible to the amount of images I have then it stops working.
Is there a way to have all 4 images on screen at one time then still scroll through them?
$(function() {
$('#carousel').carouFredSel({
width: '100%',
align: 'left',
items: {
visible: 4,
start: 0,
},
scroll: {
items: 1,
queue : true,
fx: "scroll",
easing: "swing",
duration: 1000,
timeoutDuration: 3000
},
prev: '.prev',
next: '.next',
auto: {
easing: "quadratic",
button: '.play',
pauseOnEvent: 'resume',
pauseOnHover: true
}
}).find(".slide .plusNav").hover(
function() { $(this).find("div").slideDown(); },
function() { $(this).find("div").slideUp(); }
);
});
try this
items: {
minimum: 0,
},
I have resolved this issue by setting minimum to 0.
items: {
minimum: 0,
Actually, setting the minimum attribute to zero forces the scroll bar to be displayed always irrespective of number of items currently displayed.
This was required for me because, automatic enabling of scroll bars was not working on certain screen resolutions- I had to add 2 more items to make the scroll bar visible which was not the expected behavior.
As a work around, I set minimum: 0 - it resolved the issue.
I was able to do this by editing the source :/
If you comment out this lines 554 & 556 in jquery.carouFredSel-6.2.0.js like this...
// not enough items
var minimum = (is_number(opts.items.minimum)) ? opts.items.minimum : opts.items.visible + 1;
if (minimum > itms.total)
{
// e.stopImmediatePropagation();
// return debug(conf, 'Not enough items ('+itms.total+' total, '+minimum+' needed): Not scrolling.');
}
...it worked for me.
Access the wrapper and set its height (assuming all children have the same height):
var carousel = [your_carousel],
carousel_wrapper = carousel.parent();
carousel_wrapper.height(function(){
return (carousel.children('[child_selector]').length) * [child_height];
});
The thing here is, there will be a weird behavior when the carousel animates. This is because the maximum height was done ((n-1) * child_height) intentionally as a mask, along with an overflow: hidden.
Another option would be to duplicate one of the children, but that isn't semantic.