I am using Phaser 2.5.0
I am trying to add a graphics (polygon) to a group. Please see the below code for your reference.
I am getting below two javascript errors.
Uncaught TypeError: child.setStageReference is not a function phaser.js:14661
Uncaught TypeError: this.children[i].preUpdate is not a function phaser.js:33643
The error is coming from the last line this.wrongLocation.add(poly);
Can someone please let me know what could be the reason for the error.
this.wrongLocation = this.add.group();
this.wrongLocation.enableBody = true;
x = 360;
y = 0;
var poly = new Phaser.Polygon([ new Phaser.Point(x+64, y), new Phaser.Point(x+131, y+33), new Phaser.Point(x+66, y+64), new Phaser.Point(x, y+32) ]);
graphics = this.gathis.add.graphics(0, 0);
graphics.beginFill(0xFF33ff);
graphics.drawPolygon(poly.points);
graphics.endFill();
this.wrongLocation.add(poly);
Please note that I can add a sprite to a group using similar code without any problem. Thanks for your help
poly is a shape. You want to add graphics, which is a display object:
this.wrongLocation.add(graphics);
Related
i need help to convert a shadertoy filter (https://www.shadertoy.com/view/7tsfWS) to newest pixijs version filter.
Somehow my canvas stays black and i dont know what i do wrong.
I prepared sth on pixiplayground: https://www.pixiplayground.com/#/edit/av3kcgJuH2ISiPpSmz4uI
Thx already in advance for the help 🙂
The issue is in how you are passing the uniform values to the shader. It's fixed by removing the wrapping object:
var width = window.innerWidth;
var height = window.innerHeight;
const uniforms = {
iResolution: [width, height],
iTime: 0
};
As you can see in the examples, in PIXI version 5 and above you don't need to declare the uniforms in objects with type and value. This can also be found in the migration guide.
I re-programmed a HTML5 game (using createJS) to match StageGL, but it turned out all text fields disappear. Switching back to Stage solved this specific problem (see code example below).
Does anyone know a workaround to this?
Example code:
canvas.width = stageWidth;
canvas.height = stageHeight;
stage = new createjs.StageGL(canvas); // <= text does not work with GL???
stage = new createjs.Stage(canvas); // <= text works fine
var textTest = new createjs.Text("Hello World");
textTest.x = 10;
textTest.y = 20;
stage.addChild(textTest);
Thanks in advance for your comments!
Text will not work without being cached, as the Text/Vector canvas APIs are not supported by StageGL.
Caching is pretty easy:
var bounds = text.getBounds();
text.cache(bounds.x, bounds.y, bounds.width, bounds.height);
When the text changes, you will need to recache the text.
Cheers,
I am altering the elements contents using
svgTextLines[name].node.innerHTML = line.val();
svgTextLines[name].node.textContent = line.val();
and trying to get the height and width of the element after the content has changed but I cant seem to find any property in the elemement.node object that gets updated. As the element has not transformed I can understand why but is there a way I can get this information?
Regards
I'm using SnapSVG and I had the same problem.
You can use getBoundingClientRect to get an object with this parameter.
var s = Snap("#svg");
Snap.load("mascot.svg", function (f) {
s.append(f);
var rect = s.searchAll("g")[0];
var dimens = rect.node.getBoundingClientRect();
console.log(dimens.width)
});
I am beginning to use snap.svg, and stuck in a probably simple question. I draw a circle, and want to let the user drag it around, and when the user stops dragging, I want to know the alert the final position of the circle.
I started with this:
var s = Snap("#svg");
var d = s.circle(20,20,5);
Then I created the following functions as drag event-handlers; I only need the drag-end event so I made the two other event-handlers null:
var endFnc = function(e) {
alert("end: "+e.layerX+","+e.layerY);
}
var startFnc = null;
var moveFnc = null;
Then I installed the drag event handlers:
d.drag(moveFnc,startFnc,endFnc);
Whenever I tried to drag a circle, the end event fired, but, the circle did not move.
So I figured maybe I have to also create the drag move event (although I don't need it):
var moveFnc = function(dx, dy, x, y) {
this.transform('t' + x + ',' + y);
}
Now the circle did move, but, not exactly at the mouse, but approximately 20 pixels at its bottom right.
I read the documentation here: http://snapsvg.io/docs and there seems to be no explanation about how to create working drag events.
How does anyone get this knowledge?!
After struggling for some hours to do this with snap.js, I finally discovered svg.js and its draggable plugin, with which it is so much easier:
var draw = SVG('svg');
var circle = draw.circle(10).attr({cx:30,cy:30,fill:'#f06'});
circle.dragend = function(delta, event) {
alert(this.attr('cx'))
}
circle.draggable();
So, I switched to svg.js ...
I am doing a modification of svg-edit, more specifically Mark McKays Method draw: https://github.com/duopixel/Method-Draw.
I want to use this Raphael library i found: https://github.com/poilu/raphael-boolean that allows me to perform boolean(set) operations on paths within my canvas.
Now i have implemented a button within the editor that fires up a function:
var paper = Raphael("canvas", 250, 250);
var path = paper.path("M 43,53 183,85 C 194,113 179,136 167,161 122,159 98,195 70,188 z");
path.attr({fill: "#a00", stroke: "none"});
var ellipse = paper.ellipse(170, 160, 40, 35);
ellipse.attr({fill: "#0a0", stroke: "none"});
var newPathStr = paper.union(path, ellipse);
//draw a new path element using that string
var newPath = paper.path(newPathStr);
newPath.attr({fill: "#666"});
// as they aren't needed anymore remove the other elements
path.remove();
ellipse.remove();
Okay, upon clicking the button isnt the editor supposed to return a unioned(welded) path with an ellipse?
or am i getting this wrong?
i am figuring that something must change with the var paper = Raphael("canvas", 250, 250); line since svg-edit is using a different name for the canvas but i have no idea how to go about it.
Any help will be deeply appreciated as i have been struggling for sometime with this.
UPDATE: This library is unable to handle multi-object welding, self intersections and many other cases. It is only working if we want to perform operations on 2 simple objects. This might not be immediately relevant to the question at hand but i thought it is wise to mention it anyway.
Refer to this question if you are looking for Boolean Operations on SVG elements: Boolean Operations on SVG paths
The code you posted works in isolation, as shown here: http://jsfiddle.net/5SaR3/
You should be able to change the Raphael constructor line to something like:
var paper = Raphael(canvas);
where canvas is an object reference to the SVG element used by svg-edit.