Develop Reference

How do I dynamically stretch an image in Phaser 3?

I'm trying to stretch an image dynamically so it expands in one direction in my Phaser 3 game. I've tried using a Tween with scaleX but there's a problem.
The first one is what I have. An image object in Phaser that I want to stretch. The second bar is what happens when I use scaleX. I guess it's what normally should happen, but not what I need. I need it like bar three. The left side of the image should stay aligned and only the right side should stretch. ALso I want to do this in an animation, so it should be something I can use with tweens or similar solutions. It needs to be possible to do it on any angle, so I can't just change the x-position. It has to be possible at any angle, when I don't know what the angle is going to be.
Does anyone know how to do that?

I'm not sure how your code looks like, but here is how I would solve it:
(If I would have to use scaleX and tween)
Although I don't know: what you want/need/mean with the "...on any angle..., here to know/see your code would be good.
just set the origin of the gameObject to 0 since the default is center
adjust the x position to compensate for the new origin position.
Here a runnable example:
(Tween starts a scaleX = 0 to better illustrate, where the origin is)
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#ffffff',
scene: {
create: create
}
};
var game = new Phaser.Game(config);
function create ()
{
var original = this.add.rectangle(225, 75, 200, 50, 0x0);
var defaultOrigin = this.add.rectangle(225, 150, 200, 50, 0x0);
// calculate the offset -100 = half width
var setOrigin = this.add.rectangle(225 - 100, 200, 200, 50, 0x0).setOrigin(0);
var setOriginAtAnAngle = this.add.rectangle(225 - 100, 275, 200, 50, 0x0)
.setOrigin(0)
.setAngle(25);
var setOriginAtAnAngle2 = this.add.rectangle(225 - 100, 375, 200, 50, 0x0)
.setOrigin(0, .5)
.setAngle(25);
// rotation in degrees
//setOriginAtAnAngle.angle = 25;
/* origin point */
this.add.rectangle(225, 75, 5, 5, 0xFFA701).setOrigin(0.5);
this.add.rectangle(225, 150, 5, 5, 0xFFA701).setOrigin(0.5);
this.add.rectangle(225 - 100, 200, 5, 5, 0xFFA701).setOrigin(0.5);
this.add.rectangle(225 - 100, 275, 5, 5, 0xFFA701).setOrigin(0.5);
this.add.rectangle(225 - 100, 375, 5, 5, 0xFFA701).setOrigin(0.5, 1);
/* Just code to improve the display */
this.add.line(0, 0, 150, 25, 150, 400, 0x0000ff).setOrigin(0);
this.add.text(150, 75, ' Base Box', { fontFamily: 'Arial', fontSize: '20px', color: '#fff' }).setOrigin(0, .5);
this.add.text(150, 150, ' Origin: default (Center)', { fontFamily: 'Arial', fontSize: '20px', color: '#f00' }).setOrigin(0, .5);
this.add.text(150, 200, ' Origin: 0 (TopLeft)', { fontFamily: 'Arial', fontSize: '20px', color: '#0f0' }).setOrigin(0, -.5);
this.add.text(150, 290, ' Origin: 0 (TopLeft) with angle', { fontFamily: 'Arial', fontSize: '20px', color: '#0f0' })
.setOrigin(0, -.5)
.setAngle(25);
this.add.text(150, 360, ' Origin: 0 (CenterLeft) with angle', { fontFamily: 'Arial', fontSize: '20px', color: '#0f0' })
.setOrigin(0, -.5)
.setAngle(25);
this.text = this.add.text(100, 12, 'Click to replay tween!', { fontFamily: 'Arial', fontSize: '20px', color: '#0000ff', backgroundColor: '#ffffff', fontStyle:'Bold' });
this.tween = this.tweens.add({
targets: [defaultOrigin, setOrigin, setOriginAtAnAngle, setOriginAtAnAngle2],
duration: 3000,
scaleX:{from:0, to:2},
ease: 'Power0',
onStart: _ => this.text.setText('Tween is running!'),
onActive: _ => this.text.setText('Tween is running!'),
onComplete: _=> this.text.setText('Click to replay tween!')
});
this.input.on('pointerdown', _=> {
if(!this.tween.isPlaying()){
this.tween.restart();
}
})
}
canvas {
transform: scale(.5) translate(-50%, -50%)
}
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.min.js"></script>
Update:
Origin's are now marked in the example, with a yellow point, for clarity.

KonvaJS - How to add shape with button trigger?

Sorry for bad grammar-
i have a problem about how to add shape with button trigger.
but isn't working
here my code :
HTML
<button id="btnCreateRectangle" class="btn-primary-blue">Button Text</button>
And here my js :
function addRectangle(layer) {
var scale = 1;
var rectangle = new Konva.Rect({
x: 12,
y: 12,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: "#89b717",
opacity: 0.8,
draggable: true,
name: 'rect',
width: 128,
height: 50,
scale: {
x: scale,
y: scale
},
shadowColor: "black",
shadowBlur: 4,
shadowOffset: {
x: 5,
y: 5
},
shadowOpacity: 0.6,
// custom attribute
startScale: scale
});
layer.add(rectangle);
}
document
.getElementById('btnCreateRectangle')
.addEventListener('click', function () {
addRectangle(layer)
});
Im very pretty new in javasrcipt language ,
any suggest or answer will be appreciate
thanks

from the documentation of KonvaJS after adding the rect to layer, you should add that layer to stage https://konvajs.org/docs/overview.html
stage.add(layer);

Add listener to a group

How i can do something like this? all the shapes in the group should not listen to the event, but the group should operate on the event, but do not work. I gave the example of the two groups, and they are actually very much, and so I have to add a listener to the layer, and listen to the babbling events all internal groups.
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 800
});
var layer = new Kinetic.Layer();
var group1 = new Kinetic.Group({listening: true});
var group2 = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, 'black', 1, 'white'],
stroke: 'black',
strokeWidth: 4
});
var circle2 = new Kinetic.Circle({
x: 100,
y: 100,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, 'black', 1, 'white'],
stroke: 'black',
strokeWidth: 4
});
var circle3 = new Kinetic.Circle({
x: 300,
y: 300,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, '#678345', 1, '#824444'],
stroke: 'black',
strokeWidth: 4
});
var circle4 = new Kinetic.Circle({
x: 200,
y: 200,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, '#678345', 1, '#824444'],
stroke: 'black',
strokeWidth: 4
});
group1.add(circle);
group1.add(circle2);
group2.add(circle3);
group2.add(circle4);
// add the triangle shape to the layer
layer.add(group1);
layer.add(group2);
layer.on("click",onClick);
// add the layer to the stage
stage.add(layer);
function onClick(e){
console.log("click",e.target);
}
Please help!

Only nodes in a group will trigger events
your circles will trigger events
clicking in a non-node area of a group will not trigger any events
A workaround is to add a transparent rect as a background covering the entire group width/height.
var group=new Kinetic.Group({
x:0,y:0,width:100,height:100
})
var groupListener=new Kinetic.Rect({
x:group.x(),
y:group.y(),
width:group.width(),
height:group.height(),
});
group.add(groupListener);
Then you can assign a listener to the "invisible" groupListener rectangle
groupListener.on("click",function(){
console.log("clicked on non-node area of group");
});
A Demo: http://jsfiddle.net/m1erickson/ur6be/

KineticJS - Creating a Spline with a Gradient Stroke

I'm trying to stroke my Kinetic Spline object with a gradient instead of a solid color. However, my spline is turning out black. Any ideas?
Here's my code:
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var blueSpline = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
strokeWidth: 10,
lineCap: 'round',
tension: 1,
fillLinearGradientStartPoint: [73, 160],
fillLinearGradientEndPoint: [300, 109],
fillLinearGradientColorStops: ['#ff0000', '#00ff00'],
fillPriority: 'linear-gradient'
});
layer.add(blueSpline);
stage.add(layer);

You can try this:
var ctx = layer.getContext();
var grad = ctx.createLinearGradient(73, 160, 300, 109);
grad.addColorStop(0, '#ff0000');
grad.addColorStop(1, '#00ff00');
var blueSpline = new Kinetic.Spline({
...
stroke: grad,
...
});
Here is an example:
http://jsfiddle.net/qK6nq/

KineticJS does not support gradient strokes--only gradient fills.

KineticJS change property after object creation (NOOB)

Hello guys I am a noob in KineticJS and I want to know how to change property values. For example for a rectangle after its creation:
var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4
});
How would I do something like this:
rect.NewProperty({
x: 100,
y: 30,
width: 100,
height: 50,
fill: "#cccccc",
});
and leave the other properties the same?

Like this:
var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4
});
rect.setFill("#D200FF");
rect.setStrokeWidth(1);

thanks for the info..
i also tried
rect.setWidth(100);
and
rect.setHeight(100);
it works :)