New answers tagged

2

You don't need matrices at all. Just take the rotation angle in radians, get its cosine and sine, multiply them by the distance you want between the two objects and add the x and y values of the fixed object: rotatingObject.x = Math.cos(rotationAngle) * distance + fixedObject.x rotatingObject.y = Math.sin(rotationAngle) * distance + fixedObject.y


0

Edit: Nevermind the matrices, look at what user6245072's answer instead. It's more simple. I was thinking too hard :p That, would be matrices. There's a lot of websites that explains it for you. This is a matrix i took from an util class i made my self a while back: [Math.cos(ang), -Math.sin(ang), 0.0f, (-X * Math.cos(ang) + Y * Math.sin(ang) + X)] ...


1

This is due to depth testing. You need to order your sprite rendering back to front and either disable depth test or set it to gl.LEQUAL. Sprites will not render if the pixel depth is equal to a previously drawn sprite when the depth function is set to gl.LESS.


0

I messed up my file path. idiot move on my part.


1

You are using rect to draw the background of the bars, but you forgot the beginPath. So the rect calls pile up and make the drawings slower and slower each frame. To explain a bit further, each non-direct draw command (arc, rect, lineTo, XXXTo) is used to build the current path. If you never use beginPath to reset the current path, the next frame will ...


1

Since i can't comment to get more information i'll do my best here. Have you tried clearing the canvas before each draw ? You could also change your code to due batch drawing instead of consecutive drawing calls as you are currently making; Another thing that may degrade the performance the fill style changes in your loop. Try to make all drawing calls ...


2

Math.acos() solution I have something very close to what I am looking for but I beleive there is an even better way of doing this. I started by plotting a graph using Desmos. I was actually looking for a less steep curve at the beginning but I think this is close enough to what I'm looking for. In this representation the Y axis is the velocity and the X ...


0

If you measured the time in ms from the start of the animation, the formula would be: var frame_nr = Math.floor(FPS * time / 1000); This way if your time was say 500 [ms] and your FPS was 60, the frame_nr would be 30. You'd need to handle the case when the frame_nr exceeds your animation's length. If you wanted the animation to loop, you could use the ...


0

I believe, if you are creating a voxel mesh up 2D, you should create a class that takes a 2D position (Vector2), and one byte (0-255). Every position, there is a value from 0 to 1, and there is a function in the script the AI that makes it surround a position, and a script that do it an interaction between the positions of enemies and items from the list, ...


0

From my own experience, I've found that using the sum of components (x + y + z) is a very good measure for sorting entities in an isometric scene. It doesn't perfectly represent the distance your image is away from the camera, but it does give an indication which image is further or closer to the camera, and that's what ultimately matters. Moreover, sums are ...


1

I'm afraid this answer won't be satisfactory for you. You say you have obstacles, and if i understand right, these would be inside a surrounding, large polygon? The Hertel-Melhorn algorithm works on a single polygon only, not on a polygon holding polygons inside. Additionally, having multiple obstacles (polygons) for partitioning on the outside creates a ...


0

I am creating a Point and Click game right now, using the Phaser engine. Structuring is quite easy and obvious with that engine, especially if you are using JavaScript ES6 classes. Each room in the game is a "Room State" that extendes a "Base State" - which extends the basic Phaser Game State class. There is one Class for the Player, one for NPCs, one for ...


1

There are several ways to approach this problem. When it comes to WebGL performance the key is to: (a) reduce number of drawcalls, (b) reduce gpu overdraw (fill-rate) and vertices. (c) reduce buffer data transfers. Because you're filling the screen at most once and scene complexity is low, we can totally ignore (b). (c) is a bit more complex and I'll get ...


3

Call AudioListener.pause = true in function pause and then AudioListener.pause = false in function Resume. While the audio listener is paused, the whole sound system will be essentially frozen. When you set the paused state to false again, the audio system will resume playing as if nothing had happened. If you have some sounds which you still want to play ...



Top 50 recent answers are included