Develop Reference

How to make Phaser3 GlowFilterPostFx work in an ES6 project?

I'm trying to apply a dynamic glow effect to some of my Phaser3 game objects.
There's no built-in glow effect, but the framework author publishes a separate package with a bunch of plugins that includes a glow effect. There's also a codepen demo of that plugin, although that code is unusable because it relies on direct download of the plugin at runtime.
There is also a separate doc page for that plugin which enumerates the recipes a dev might choose.
I have not been able to adapt a working version from any of this. The best I can do is to have my project build and run with no visible change, and zero proof that the glow tech is even engaged. The worst is that I get a fatal runtime error as soon as I attempt to reference the glow plugin.
Here's a version based on the recipes from "Notes of Phaser 3":
import Phaser from 'phaser'
import GlowFilterPostFx from 'phaser3-rex-plugins/plugins/glowfilterpipeline.js'
new Phaser.Game({
type: Phaser.CANVAS,
canvas,
width: 550, height: 400,
scene: [SceneWithGlow],
pipeline: [GlowFilterPostFx]
})
class SceneWithGlow extends Phaser.Scene {
preload() {
this.load.image('shroom', '/shroom.png')
}
create() {
let shroom = this.add.image(100, 100, 'shroom')
this.add.existing(shroom)
// this version runs but has no effect
shroom.setPostPipeline(GlowFilterPostFx)
// also no effect; I have no idea this signature is correct
shroom.setPostPipeline(GlowFilterPostFx, { intensity: 1 })
// also has no effect, and would affect things that shouldn't glow
this.cameras.main.setPostPipeline(GlowFilterPostFx)
// this version throws `pipelineInstance is null` when .add() is called
let pipelineInstance = this.plugins.get('rexGlowFilterPipeline')
pipelineInstance.add(shroom)
pipelineInstance.intensity = 1
}
}
And here's an alternative version based on a sample from the repo that publishes the effect, which appears to a module-based version of that codepen demo:
import Phaser from 'phaser'
import GlowFilterPipelinePlugin from 'phaser3-rex-plugins/plugins/glowfilterpipeline-plugin.js'
new Phaser.Game({
type: Phaser.CANVAS,
canvas,
width: 550, height: 400,
scene: [SceneWithGlow],
plugins: {
global: [{
key: 'rexGlowFilterPostFx',
plugin: GlowFilterPipelinePlugin,
start: true
}]
}
})
class SceneWithGlow extends Phaser.Scene {
preload() {
this.load.image('shroom', '/shroom.png')
}
create() {
let shroom = this.add.image(100, 100, 'shroom')
this.add.existing(shroom)
// this version throws `pipeline is undefined` when .add() is called
let postFxPlugin = this.plugins.get('rexGlowFilterPostFx')
postFxPlugin.add(shroom)
postFxPlugin.intensity = 1
}
}
It should be possible to apply a fixed-intensity glow effect without downloading the glow tech from github at runtime.
I don't think I care whether it's registered as a "pipeline" or a "plugin." I just want it to work, and despite what appears to be an abundance of help directly from the framework creator, none of the material online can be refactored in a working version.

TL;DR
I added type: Phaser.WEBGL to my gameConfig and also added GlowFilterPipelinePlugin as a GLOBAL plugin.
Works like a charm.
Summary
I'm not sure if you're still looking for an answer here, but for everyone having trouble implementing this on Typescript. Here's an issue I opened on the official repo This really helps me a lot.
Here is an example of the Typescript implementation.

Testing D3.js drag events with Cypress.js

I have an SVG object which uses d3-zoom for zoom and pan functionality. It works flawlessly but the problem showed up when I started to work on integration tests using Cypress.js.
I tried using standard mouse events on the svg element, to simulate drag behavior:
cy.get('svg')
.trigger('mousedown', { which: 1, force: true })
.trigger('mousemove', { position: 'left' })
.trigger('mouseup', { position: 'left', force: true });
The example above is taken from the Cypress drag and drop recipe, and it produces the following error in the nodrag.js file:
cannot read property document of undefined
Below you can see where the error occurs (view is undefined):
__webpack_exports__["default"] = (function(view) {
var root = view.document.documentElement,
...
I spent a lot of hours trying to trigger the event in another way, but without a success - like trying the snippet above with the svg container.
Please keep in mind that I cannot access any d3.js package from the Cypress test because it's imported as an NPM package in a React application.
Thank you in advance for you help!

I could only arrive at a partial answer before I had to move on, but perhaps this can help you, or someone else, find the ultimate solution.
To remedy the error, a view property must be provided for mousedown. Providing window, like this, allowed the D3 methods to fire properly:
cy.get('svg')
.trigger('mousedown', { which: 1, force: true, view: window }) // <-- here
.trigger('mousemove', { position: 'left', view: window }) // <-- here
.trigger('mouseup', { position: 'left', force: true });
However, no dragging or movement occurred during the test run, and other questions emerged from there. Starting with... Is this the right context to send along with the event? It seemed so, since window seems to be the only context that has the property chain that D3 anticipates:
view.document.documentElement
Or is that an anti-pattern... a code smell?
Running down those subsequent questions led to a few observations that seemed to have significance.
The first concerns how D3 handles mouse and drag events. D3 has numerous event listeners and callbacks that override standard events and their respective handlers.
The second, is that iframes are in play with the Cypress test runner.
Could it be that Cypress's programmatically triggered events are firing properly in the Cypress iframe, but due to D3's aggressive event handling, the translation of those events into the application iframe are getting lost? Especially considering that manually dragging a circle in the testing viewport worked fine.
Which, again, leads back to:
Are the programmatically triggered events not being called in the correct context?
Are those events somehow being swallowed by or colliding with D3's event handlers?
I selected the Zoomable Force Directed Graph as my D3 subject, inside of a simple Ember application, for researching this question. It perfectly reproduced the error mentioned, so it definitely seems to be a D3 + Cypress challenge, and unrelated to the front-end framework.
I hope this effort is helpful.
Continued...
After some further reading – Cypress's Trade-offs, and particularly, their open pull request Support for Native Browser Events – it seems likely that the event handling overrides within D3 are not yet fully reconcilable within Cypress. Simpler implementations, like those detailed in the drag and drop example, do not present the event handling challenges introduced by a 3rd party library like D3. However, this support does appear to be under development within the Cypress team.

Try this:
cy.window().then(win => {
cy.get('svg')
.trigger('mousedown', {
which: 1,
force: true,
view: win,
})
.trigger('mousemove', {
clientX: 300,
clientY: 500,
force: true,
})
.trigger('mouseup', {
force: true,
view: win,
});
});
Referencing Jennifer Shehane's answer in this GitHub issue, the answer to the cannot read property document of undefined part is to plug the window object into view in the trigger options. The issue mentioned in jacefarm's answer, where no movement occurred, seems to be resolved by specifying clientX/clientY rather than using positions relative to the selected element.

I used a little bit different from your code so you can try
cy.get('svg')
.trigger('mousedown', { which: 1 })
.trigger('dragstart', {})
.trigger('drag', {});

FWIW I had this same issue and using this library allowed me to interact with the D3 elements: https://github.com/dmtrKovalenko/cypress-real-events

NightwatchJS method .resizeWindow not working

A while back, I had an issue using the .maximizeWindow() from NightwatchJS. I was able to resolve this issue by using the following:
"chromeOptions" : {
"args" : ["start-maximized"]
},
However, this was more a work around than a fix. Currently, I need to resize the window, not just maximize it, and want to use the .resizeWindow() method. I also need this to work in browsers other than Chrome, so the above fix is inadequate. Below is my current setup in a test I am writing. This code worked fine in the past and just recently I noticed that the window was no longer resizing correctly. Any thoughts on why it might be failing? Note: this is written in Coffeescript, not JS.
module.exports = {
"Geoprocessing Commands and Assert Tests": (browser) ->
browser
.launchAs "anonymous"
.assert.title "<app name>"
.iFrameReady()
.frame 0, () ->
browser
.resizeWindow 1800, 1000
.pageDisplayed()
.pause 1000
...
.frameParent()
browser.end()
}

Issue using Velocity.js UI animations without jquery

So I have a project in which I can't use jquery. I must use native js. Having used Velocity.js lately I wanted to use it again for this project. However in the doc and in this post in particular I couldn't find any advices in order to make Velocity UI animations (like transition.slideLeftIn for instance) work.
In the doc I did find an exemple but it's not about UI already made animations.
Velocity(document.getElementById("dummy"), { opacity: 0.5 }, { duration: 1000 });
After that I tried :
Velocity(myElement, { transition.slideLeftIn }, { duration: 1000 });
And
Velocity(myElement, transition.slideLeftIn, { duration: 1000 });
And
myElement.Velocity("transition.bounceLeftIn");
However none of these solutions are working.
Any ideas about how I could fix this ?
Thanks in advance :)

Everything you tried is either not valid JS or not following Velocity's API.
The first line you tried will raise a syntax error.
The second will probably raise a reference/value error. More specifically, transition.slideLeftIn should be a string, as in 'transition.slideLeftIn'.
The third will obviously raise another reference error since Velocity is set on the window object and does not extend Element.
So the right syntax will be:
Velocity(myElement, 'transition.slideLeftIn', { duration: 1000 });

Just thought I'd share another Answer for anyone who stumbles here through Google.
I also was having issues using Velocity JS without jQuery. However, my problem was related to not using the correct source code, even though I downloaded it from here
You should be able to find the correct code on the github page:
Latest Here
Here's a simple example using the API also:
Velocity(myElem, {boxShadowSpread: "5em"}, {easing: "easeIn", duration: 500});

jQuery Transit: Object none has no method 'setFromString'

I have loaded in jQuery transit, and I made sure I did it after loading jQuery, but I still get this error:
I have looked at the resources panel in Chrome, and jQuery transit is being loaded after jQuery. It has also loaded correctly, and shows up with no problems.
I have also tested in the console, testing the examples on the website. They all return this same error.
here is my code:
$("#current-employers a.industry-company-link").click(function (e)
{
e.preventDefault();
var url = $(this).attr("href");
var company_container = $("#current-company-profile");
company_container.load(url);
company_container.transition({
y: ($(this).offset().top - company_container.offset().top)
});
console.log("container offset: " + company_container.offset().top + "\nURL offset: " + $(this).offset().top);
});
And the scripts I bring in:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.1.3/jquery.transit.min.js"></script>
Thanks for any help.

Well, turns out it's jQuery's fault in this case. jQuery 1.8 was the culprit here. Loading in 1.7.2 fixed the problem. I will report this bug to the transit and jQuery team.

UPDATE (April 13, 2013): I was reading through the source code for Transit and it appears that Mr. Cruz has updated the code to work effectively with jQuery 1.8+. If someone has tested it, could they please confirm that it works. Thanks.
This is related to the css hook that jQuery and Transit use. In version 1.7, jQuery didn't have a css hook for transforms. So Transit implemented a hook for us. However, jQuery updated itself and now offers css hooks for transforms. These now conflict with each other. However it is not a bug as jQuery is working fine and as such, it does not need to be reported to jQuery.
Your choices are to use a 1.7 version of jQuery and wait until Transit is updated or edit the Transit code which only takes about a minute.
To edit, get the development version of Transit from the official site. Then go to line 603 where it says $.cssHooks[prop]. Remove the method and place this method there instead:
$.cssHooks[prop] = {
get: function(elem) {
var t = $(elem).css('transform');
if (!t || t === "none") {
t = new Transform();
}
return t.get(prop);
},
set: function(elem, value) {
var t = $(elem).css('transform');
if (!t || t === "none") {
t = new Transform();
}
t.setFromString(prop, value);
$(elem).css({ transform: t });
}
};
You can minify the code at one of the hundreds of compressors available, such as http://jscompress.com/