Setting, and getting point length in phaser with Point.setMagnitude, and Point.getMagnitude.
So these days I have been expanding my content on Phaser ce, because phaser is just awesome, and deserves a fair share of my attention. In todays post I will be writing yet another post on the Point class, and it’s many useful methods. This time I will be writing about Point.setMagnitude, and Point.getMagnitude. Just yesterday I wrote a post on Point.normalize which is the same as using Point.setMagnitude(1). So in other words normalizing a Point is the process of making the unit length of a Point one. The methods I will be writing about in this post have to do with setting the length to something other than one.
1 - What to know before continuing
2 - Basic example of Point.setMagnitude()
So for a very basic example of these methods I made a quick code example where I am using The Phaser.Point constructor to create a new instance of point. Then once I have my Point instance I can use the Point.getMagnitude to get the current unit length of that point, and then store that to a variable. I then use Point.normalize to set the unit length to one, which is just a shorthand for Point.setMagnitude(1). Once again I then use Point.getMagnitude to get the current unit length of the point, and sure enough it is pretty much 1 as expected. Then finally I use my startMag variable to set the unit length to one half of what it once was using Point.setMagnitude.
So the point with these methods is that they are useful for scaling points up, and down without changing the angle direction of the Point.
3 - A more interesting example of Point.setMagnitude
For a more advanced example of Point.setMagnitude I came up with an example that involves using a Point to set the position of a sprite that moves from one corder of the screen to another using Point.setMagnitude to set the magnitude of that point. This example demonstrates what is meant by length of a point compared to direction. Point.getMagnitude can be used to get the length of a point that is at the bottom right corner of a screen, which can be thought of as a kind of max magnitude compared to 0,0 at the top left corder. This value can then be used to set the magnitude of a point that lays anywhere between those two points.
3.1 - Phaser.Game instance and boot state
I start off this example by making the usual Phaser.Game instance. Once I have that I can define a boot state using game.state.add. In this state I do things with setting scaling, and anything else that I want to happen before anything else including loading, or generating sprite sheets.
When I want to start this project I will do so my staring this state first, and then it will progress into the next state that will be used to generate a sprite sheet using canvas.
3.2 - The generate sprite sheet state
In this state I generate a canvas that will be used to make a sprite that will be moved by way of a point that will be changed by Point.setMagnitude. I have written a post a little while back in which I get into this in a little more detail if interested.
I like generating sprites this way compared to loading a sheet, at least for simple demos like this.
3.3 - The example state
So here I have the actual example state that will demonstrate Point.setMagnitude. I start out making a sprite using the sheet that I made in a previous state, that is now in the game cache, as well as a text display object that will show the current magnitude of the Point that will be used to change the position of the sprite.
I then append some useful stuff to the data object of the sprite that is the standard way of adding properties, and methods to a sprite that will be used by my own game code rather than phaser. This includes a maxMag property that is the Point magnitude when the point is at the bottom right corner of the screen. This value will then be reduce from that max value, all the way down to one, and then back up again, resulting in a change of Point unit length, with the same polar direction preserved.
4 - Conclusion
So Point.setMagnitude is a way to set the length of a point relative to position 0,0. With complex polygons involving a lengthy array of points this can be used as a way to preform a kind of scaling of those points without changing the polar direction of the point, that is the angle will be preserved.