I'm trying to use this Animate on scroll library:
https://michalsnik.github.io/aos/
on my Sharepoint(2016) page
and it doesn't work when scrolling.
and I don't know what needs to be changed.
Binding it to their custom ‘master’ div, instead of the body/window will work:
<script>
jQuery('#s4-workspace').bind( 'scroll', function(){
AOS.init({
duration: 1000
});
});
// AOS.init({
// offset: 200,
// duration: 600,
// easing: 'ease-in-sine',
// delay: 100,
// });
</script>
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
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') {
// ?
};
}
Hi please help me to find out how trully responsive game can be created with Phaser3.
Respnsiveness is critical because game (representation layer of Blockly workspace) should be able to be exapanded to larger portion on screen and shrinked back many times during the session.
The question is How I can change dimentions of the game in runtime?
--- edited ---
It turns out there is pure css solution, canvas can be ajusted with css zoom property. In browser works well (no noticeable effect on performance), in cordova app (android) works too.
Here is Richard Davey's answer if css zoom can break things:
I've never actually tried it to be honest. Give it a go and see what
happens! It might break input, or it may carry on working. That (and
possibly the Scale Manager) are the only things it would break,
though, nothing else is likely to care much.
// is size of html element size that needed to fit
let props = { w: 1195, h: 612, elementId: 'myGame' };
// need to know game fixed size
let gameW = 1000, gameH = 750;
// detect zoom ratio from width or height
let isScaleWidth = gameW / gameH > props.w / props.h ? true : false;
// find zoom ratio
let zoom = isScaleWidth ? props.w / gameW : props.h / gameH;
// get DOM element, props.elementId is parent prop from Phaser game config
let el = document.getElementById(props.elementId);
// set css zoom of canvas element
el.style.zoom = zoom;
Resize the renderer as you're doing, but you also need to update the world bounds, as well as possibly the camera's bounds.
// the x,y, width and height of the games world
// the true, true, true, true, is setting which side of the world bounding box
// to check for collisions
this.physics.world.setBounds(x, y, width, height, true, true, true, true);
// setting the camera bound will set where the camera can scroll to
// I use the 'main' camera here fro simplicity, use whichever camera you use
this.cameras.main.setBounds(0, 0, width, height);
and that's how you can set the world boundary dynamically.
window.addEventListener('resize', () => {
game.resize(window.innerWidth, window.innerHeight);
});
There is some builtin support for resizing that can be configured in the Game Config. Check out the ScaleManager options. You have a number of options you can specify in the scale property, based on your needs.
I ended up using the following:
var config = {
type: Phaser.AUTO,
parent: 'game',
width: 1280, // initial width that determines the scaled size
height: 690,
scale: {
mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT ,
autoCenter: Phaser.Scale.CENTER_BOTH
},
physics: {
default: 'arcade',
arcade: {
gravity: {y: 0, x: 0},
debug: true
}
},
scene: {
key: 'main',
preload: preload,
create: this.create,
update: this.update
},
banner: false,
};
Just in case anybody else still has this problem, I found that just resizing the game didn't work for me and physics didn't do anything in my case.
To get it to work I needed to resize the game and also the scene's viewport (you can get the scene via the scenemanager which is a property of the game):
game.resize(width,height)
scene.cameras.main.setViewport(0,0,width,height)
For Phaser 3 the resize of the game now live inside the scale like this:
window.addEventListener('resize', () => {
game.scale.resize(window.innerWidth, window.innerHeight);
});
But if you need the entire game scale up and down only need this config:
const gameConfig: Phaser.Types.Core.GameConfig = {
...
scale: {
mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT,
},
...
};
export const game = new Phaser.Game(gameConfig);
Take a look at this article.
It explains how to dynamically resize the canvas while maintaining game ratio.
Note: All the code below is from the link above. I did not right any of this, it is sourced from the article linked above, but I am posting it here in case the link breaks in the future.
It uses CSS to center the canvas:
canvas{
display:block;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
It listens to the window 'resize' event and calls a function to resize the game.
Listening to the event:
window.onload = function(){
var gameConfig = {
//config here
};
var game = new Phaser.Game(gameConfig);
resize();
window.addEventListener("resize", resize, false);
}
Resizing the game:
function resize() {
var canvas = document.querySelector("canvas");
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var windowRatio = windowWidth / windowHeight;
var gameRatio = game.config.width / game.config.height;
if(windowRatio < gameRatio){
canvas.style.width = windowWidth + "px";
canvas.style.height = (windowWidth / gameRatio) + "px";
}
else{
canvas.style.width = (windowHeight * gameRatio) + "px";
canvas.style.height = windowHeight + "px";
}
}
I have used and modified this code in my phaser 3 project and it works great.
If you want to see other ways to resize dynamically check here
Put this in your create function:
const resize = ()=>{
game.scale.resize(window.innerWidth, window.innerHeight)
}
window.addEventListener("resize", resize, false);
Important! Make sure you have phaser 3.16+
Or else this won't work!!!
Use the game.resize function:
// when the page is loaded, create our game instance
window.onload = () => {
var game = new Game(config);
game.resize(400,700);
};
Note this only changes the canvas size, nothing else.
I am using infinite-scroll.js, video.js, and masonry.js. The first page loads correctly (i.e., images of videos load within video players within "pintrest-style" boxes. However, as the user scrolls down, only the pintrest-style" boxes load with empty video players (i.e., no images and videos do not play). I think I should be reinitializing video.js somehow, but I can't figure out how to do so properly with multiple videos. My js code is below. How would I get the newly loaded boxes to load video players?
$container.infinitescroll({
debug: false,
//extraScrollPx: 40,
bufferPx: 40,
navSelector : '#navigation', // selector for the paged navigation
nextSelector : '#navigation a', // selector for the NEXT link (to page 2)
itemSelector : '.masonry_object', // selector for all items you'll retrieve
loading: {
finishedMsg: null,
img: "img/loader.gif",
msg: null,
msgText: " ",
speed: 'fast',
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({display:"none"},{ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$container.masonry( 'appended', $newElems, true );
$newElems.show().delay(1000).animate({ opacity: 1 },1000);
$newElems.videojs("example_video_number", { "controls": true, "autoplay": false, "preload": "auto" });
});
}
);
I'm trying to get the jquery masonry script to reshuffle after I animate the size of a div. I had seen some examples but I just can't seem to get it working. I tried:
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
<script>
$("#test").click( function() {
$("#test").animate ({
"width": 300,
"height": 200
}, 250 );
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
I also tried
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
<script>
$("#test").click( function() {
$("#test").animate ({
"width": 300,
"height": 200
}, 250 );
$("#container|).masonry("reload");
});
</script>
For some reason I can't get the reshuffle to happen. Here is the page it's not working with http://www.klossal.com/masonry.html
thanks in advance for any help on this.
Masonry("reload") should work but you have an error in your line $("#container|).masonry("reload");. Your need a closing normal quote and not a pipe like so: $("#container").masonry("reload"); I also don't think I don't think you need isotope to shuffle. The easist would be to reorder the tiles before feeding it to masonry. Simple look at my site (http://www.phpdevpad.de). When you click on the menu on the left and try different combinations the tiles are shuffled.
If you want the shuffle method, you need to use Isotope; Masonry's bigger sister. See the github discussion here.