Sprites are distorted when scaled - javascript

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

Related

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 :)

Moire effect when rotating rectangle using setTransform

I've been playing around with using matrices to hold transforms for 2D elements in canvas. setTransform works pretty well for this, but I ran into an interesting issue where I get the Moire effect when I try to render a transformed cube at the coordinates (0, 0). Setting the coordinates to (0, 1) or (1, 0) fixes this. Also the problem seems to only be with fillRect, rendering text instead of the cube works just fine.
Example Pen: https://codepen.io/danman113/pen/mdEYdKx
I figured out a solution but I still don't fully understand why I was getting a Moire pattern. I would love if someone could explain that to me.
The solution was to reset the transform after setting it. I'm not sure why this works as I thought setTransform implicitly reset the transform after it was called.
c.setTransform(transform[0], transform[3], transform[1], transform[4], transform[6], transform[7])
c.fillRect(0, 0, 100, 100)
c.resetTransform()
Working example: https://codepen.io/danman113/pen/dyXEGQw
EDIT:
As Kaiido points out in his comment, the Moire effect happens because clearRect() is also transformed. Adding the resetTransform fixes this.

Moving an obj randomly in THREE.js

and sorry for my English, i'll try my best!
I'm stuck with a problem in THREE.js. I want to animate a shark in the sea, and it should swim in random direction.
My problem is: how can i get its direction which is moving ? I want to make it moved in a range [-x,+x] [-z, +z]. When an edge is reached, it should turn back, something like a rotationY of 180 °.
Thanks for your answers!
Here is a CodePen I found that should point you to the right direction:
codepen.io/anon/pen/YYwQPE
My understanding is you need to use object collision detection, position a object to the edges and when the shark object collides with it, do something.
Hope this helps.

using clearRect() to overwrite text output on canvas?

I'm making a little game on jsbin and everything so far is going well but I'm have a slight problem. The goal of the game is to click the randomly appearing circle as many times as possible in one minute. I want it to output the time left and the score in the corners, and I have done so. The problem is that they are overwriting each other. This is because to prevent flickering I decided not to use
c.clearRect(0,0,canvas.width,canvas.height);
instead drawing a clearRect just over the circle when its clicked. I want to do a similar thing with text. I used this line:
c.clearRect(0,fontSize,c.measureText(timeLeft),fontSize);
this should work but it has no effect. I've tried everything, but I don't know what's wrong with this line. My only other theroy is that is in the wrong spot in the code, but I haven't found a problem with that.
Here is the link to the current version I'm working on:
http://jsbin.com/touchgame/10/edit
Thanks!
measureText() returns an object with a width property, so you need to use c.measureText(timeLeft).width.
Also, you decreased the timeLeft and then called clearRect, which will clear a rectangle based on the new width for timeLeft. You want to clear based on the width for the "old" timeLeft value and then decrease the timeLeft:
if (timeLeft < 1){
c.clearRect(0,fontSize,c.measureText(timeLeft).width + 5,fontSize*1.5);
timeLeft--;
//clear over time output
console.log(c.measureText(timeLeft));
}
This should work. Because the way drawing text works, it's not trivial to know exactly the bounding box of the text, so that's why we clear a larger area than fontSize. You could use c.textBaseline = 'top', which would place the text with the top coordinate at the y you specify instead of the baseline of the text at y.
Finally, I think it's an easier approach to clear the canvas completely and redraw everything when you want to update the graphics. If you clear the canvas and then immediately redraw evrything you won't get any flickering. The performance hit of redrawing everything is usually neglible in most cases, and it makes things a lot simpler.

Grid drawn using a <canvas> element looking stretched

I'm trying to draw a grid on a <canvas> element with the ultimate goal of making a Go board.
For some reason the grid is looking stretched, with the lines being thicker than 1 pixel and the spacing being completely wrong. It doesn't even start in the (10,10) position..
It would be great if someone could take a look at tell me what I'm doing wrong.
http://jsfiddle.net/h2yJn/
I've found the problem. I was setting the dimensions of the <canvas> using CSS, when you actually have to set the width and height attributes. This was causing it to be stretched/skewed.
var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
http://jsfiddle.net/h2yJn/66/
Please try it outside jsfiddle, maybe jsfiddle is applying some linear transformation.
Also please make sure that you add 0.5 everywhere to both x and y coordinates. Alternatively, you can apply translate(0.5, 0.5) to shift all coordinates by half a pixel.

Categories

Resources