Develop Reference

Sprites are distorted when scaled

I have a game I'm working on with Phaser 3, and I have an icon for a sword in the player's inventory:
But when I scale it using sprite.setScale(0.5), I get this monstrosity:
Any idea why this happens? thanks!

Ok, so the problem seems to be fixed by making sure the end value for the height and width values were integers, my actual code for scaling was sprite.setScale(0.45), and changing the value to 0.5 was a quick fix, getting the much improved end result of this:
PS: Thanks to #winner_joiner for the suggestion

ammo.js after calling applyTorque how to update the force direction?

I am using ammo.js to create a simple demo.
I have a 3d object in the world and I can make it move with the following code:
cubeObject.applyForce(new Vec3(10, 0, 0));
It will move along the x-axis and then stop gradually.
Now I want to make it to turn a little bit (imagine a car turning):
cubeObject.applyTorque(new Vec3(0, 1000, 0));
After calling this code, the cube (car) dose turn a certain degree (this is good as expected).
But the problem is, the car is still moving along the x-axis instead of moving towards the direction it is facing (after turning).
I do not know what I am missing here.
Any advice will be appreciated, thank :)

How to ensure that a light doesn't lit walls behind corner?

Good day, I'm playing with webgl using Babylon JS and I need an advice concerning lights. I created a test cave and I placed a torch (BABYLON.PointLight) on one wall. But the light lits also walls that is behind the corner. See screenshot:
var light = new BABYLON.PointLight("light1", new BABYLON.Vector3(x, y, z), scene);
light.intensity = 0.5
light.range = 50;
The cave is not a single mesh but it's made of individual rectangular faces. How can I ensure that the lit doesn't lit walls behind the corner please?
Thank you in advance. Vojtech

As has been suggested, you could add shadowing to your light. Apparently shadows for pointlights have been introduced in v2.3 (see http://www.html5gamedevs.com/topic/18285-point-light-shadow-mapping/). Another thing to try might be to set the range to a lower number, so that the light does not reach the back wall. Something like yourLight.range = 0.5 might work.
One thing to keep in mind is that you can only have a maximum number of 4 lights in the scene (a limitation to ensure performance).

Lights only colors pixels based on the direction from the pixel to the light, the normal (surface angle) of the pixel and the viewing direction. Thus, lights by themselves do not taken into account whether the light source actually reached the pixels and that must be calculated separately with a shadowing algorithm.

Three.js constrain object drag to surface of another object

I want to be able to drag an object, but have it 'snap' to the surface of another.
I don't care if it only 'snaps' when I release the mouse, or if it updates live.
Ultimate goal: create a smooth shape in Blender, import it, and be able to snap drag to that shape. I know I can do this with procedurally generated surfaces with a bit of math, but I'm looking to use some non-procedurally generated surfaces.. or at least, the surfaces I'm wanting to use I haven't figured out how to generate procedurally yet.
I tried taking this example: http://stemkoski.github.io/Three.js/Mouse-Click.html and changing the 'click' effect to a 'drag' effect. Then I incorporated it with this example: http://mrdoob.github.io/three.js/examples/webgl_interactive_draggablecubes.html
The effect is working, in that I can drag any of the cubes across the sphere, and the face hilights.
Then I tried taking the dragged object, and snapping it to the face of the sphere using this flawed logic:
SELECTED.position.x = intersectsRay[ 0 ].face.normal.x;
SELECTED.position.y = intersectsRay[ 0 ].face.normal.y;
SELECTED.position.z = intersectsRay[ 0 ].face.normal.z;
The problem: the dragged objects always snap to the center of the sphere...
The reason being, (I think . . . ) is the face 'normal' is the center of the (sphere) in this case.
Does anyone know a way to find the x,y,z of the FACE (no matter what the shape), or any other way to implement this concept?

An easy solution would be to not use the local (and normalized) face normal, instead for example you could use the vertex index.
Something like:
intersectedOBJ.geometry.vertices[intersect.face.a]
This way, you would snap your dragged object to one of the face's vertices.
Also there is a face "centroid" that you can use or you could calculate the center of the face on your own.

How to Calculate Collision of rotated Rectangle

I try to calculate the collision of the edges of an rotated Rectangle.
Here is an example on jsFiddle : http://jsfiddle.net/XgHxx/
Something like this:
if( mask.x < img.x * rotate_Factor ) mask.x = img.x * rotate_Factor ;
As you see my Collision is only for the not rotated Image.
And i want the Rectangle to be inside of the image even when its rotated.
Thanks, Mottenmann.
ps.: I made an example of how i think it could be calculated :

It looks like it already has been answered: see this question How to check intersection between 2 rotated rectangles?, there's also an answer that provides a JS implementation.

Thinking from my weak mathematical mind, you can check that by finding out if any of the corner points of the mask is contained by the boundary lines of your image.
You can do that by calculating the line equations of your image (based on its position), then check to see if any of the corner points of the mask lie on any of the boundaries and then stop the movement of the box in that direction in which the corner point is hitting the boundary.
Just a couple of mathematical formulas.
There is probably a better way to do this in jquery but you don't need any library for the above solution :)