Skip to content

Add FlxG.centerGraphic() and camera.centerGraphic() #3329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: 6.2.0
Choose a base branch
from
Open

Add FlxG.centerGraphic() and camera.centerGraphic() #3329

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ec3b8c5
add FlxG.center() and FlxCamera.center()
richTrash21 Jan 2, 2025
c4a41ff
Merge branch 'HaxeFlixel:dev' into flxg-center
richTrash21 Jan 2, 2025
55ace96
Merge branch 'HaxeFlixel:dev' into flxg-center
richTrash21 Feb 21, 2025
5603edd
use propper hitboxes
richTrash21 Feb 21, 2025
a593d5a
test
richTrash21 Feb 21, 2025
f720a2b
test again
richTrash21 Feb 21, 2025
ea9c93f
Merge branch 'HaxeFlixel:dev' into flxg-center
richTrash21 Apr 8, 2025
5b47432
fix pixel perfect sprite centering
richTrash21 Apr 8, 2025
cbf91ce
name change
richTrash21 Apr 10, 2025
e3f9d55
revert "fix pixel perfect sprite centering"
richTrash21 Apr 10, 2025
7628284
hardcode unit tests
richTrash21 Apr 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions flixel/FlxCamera.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1873,6 +1873,71 @@ class FlxCamera extends FlxBasic
setScale(scaleX, scaleY);
}

/**
* Centers `FlxSprite` by graphic size in this camera view, either by the x axis, y axis, or both.
*
* @param sprite The sprite to center.
* @param axes On what axes to center the sprite (e.g. `X`, `Y`, `XY`) - default is both.
* @return Centered sprite for chaining.
* @since TBA
*/
public function center<T:FlxSprite>(sprite:T, axes:FlxAxes = XY):T
{
// We need to disable these flags to get accurate graphic bounds
final pixelPerfectPosition = sprite.pixelPerfectPosition;
final pixelPerfectRender = sprite.pixelPerfectRender;
sprite.pixelPerfectPosition = false;
@:bypassAccessor sprite.pixelPerfectRender = false;
Copy link
Member

@Geokureli Geokureli Apr 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should make a new helper that allows us to get the unrounded value, or a new arg in the existing one that allows us to ignore this field. this is not the first case where pxPerfPos has been a hassle

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that I think about this, maybe this should NOT attempt to avoid pixelPerfectRender and position, perhaps the unit test was failing because it should have accounted for this? Can you elaborate on why it failed and why centering should not honor pixelperfectRendering?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unit tests were actually fine, the problem was discovered in a test project, where grapthic is centered every frame. pixelPerfectPosition = true or pixelPerfectRender = true led to shaking, so my workaround was to temporarily disable them, as i don't see a reason to add another function to get graphic bounds.

For now i removed this workaround. Adding another argument to functions will work, but will cause problems with function override. Should this be a concern?

My test project:

package;

import flixel.FlxG;
import flixel.FlxSprite;
import flixel.util.FlxAxes;

class PlayState extends flixel.FlxState
{
	var graphic:FlxSprite;
	var centerMode = FlxAxes.XY;
	var rorate = false;

	override public function create()
	{
		super.create();

		FlxG.cameras.bgColor = flixel.util.FlxColor.GRAY;

		graphic = new FlxSprite().makeGraphic(20, 20);
		graphic.scrollFactor.set(2, 2);
		graphic.origin.set(20, 20);
		graphic.offset.set(200, 200);
		graphic.scale.set(2, 4);
		add(graphic);

		FlxG.watch.add(FlxG.camera, "scroll", "camera");
		FlxG.watch.add(this, "graphic", "graphic");
		FlxG.watch.add(graphic, "pixelPerfectPosition", "pixelPerfectPosition");
		FlxG.watch.add(graphic, "pixelPerfectRender", "pixelPerfectRender");
	}

	override public function update(elapsed:Float)
	{
		super.update(elapsed);

		var mult = 10.0;
		if (FlxG.keys.pressed.SHIFT)
			mult *= 10;

		if (FlxG.keys.pressed.A)
			FlxG.camera.scroll.x -= mult * elapsed;
		if (FlxG.keys.pressed.D)
			FlxG.camera.scroll.x += mult * elapsed;

		if (FlxG.keys.pressed.W)
			FlxG.camera.scroll.y -= mult * elapsed;
		if (FlxG.keys.pressed.S)
			FlxG.camera.scroll.y += mult * elapsed;

		mult /= 100;
		if (FlxG.keys.pressed.Q)
			FlxG.camera.zoom += mult * elapsed;
		if (FlxG.keys.pressed.E)
			FlxG.camera.zoom -= mult * elapsed;

		if (FlxG.keys.justPressed.Z)
			centerMode = FlxAxes.fromBools(!centerMode.x, centerMode.y);
		if (FlxG.keys.justPressed.X)
			centerMode = FlxAxes.fromBools(centerMode.x, !centerMode.y);

		if (FlxG.keys.justPressed.C)
			graphic.pixelPerfectPosition = !graphic.pixelPerfectPosition;
		if (FlxG.keys.justPressed.V)
			graphic.pixelPerfectRender = !graphic.pixelPerfectRender;

		if (FlxG.keys.justPressed.R)
			rorate = !rorate;
		if (rorate)
			graphic.angle += elapsed;

		FlxG.camera.centerGraphic(graphic, centerMode);
	}
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is an example to reproduce the shaking effect?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. Shaking appears when camera is moved or sprite is rotated.
Side note, might also be the case for any transformation.


final graphicBounds = sprite.getScreenBounds(null, this);

if (axes.x)
{
final offset = sprite.x - graphicBounds.x;
sprite.x = (width - graphicBounds.width) / 2 + offset;
}

if (axes.y)
{
final offset = sprite.y - graphicBounds.y;
sprite.y = (height - graphicBounds.height) / 2 + offset;
}

// Now we set flags back to their original state
sprite.pixelPerfectPosition = pixelPerfectPosition;
@:bypassAccessor sprite.pixelPerfectRender = pixelPerfectRender;
graphicBounds.put();
return sprite;
}

/**
* Centers `FlxObject` by hitbox size in this camera view, either by the x axis, y axis, or both.
*
* @param object The object to center.
* @param axes On what axes to center the object (e.g. `X`, `Y`, `XY`) - default is both.
* @return Centered object for chaining.
* @since TBA
*/
public function centerHitbox<T:FlxObject>(object:T, axes:FlxAxes = XY):T
{
final hitbox = object.getHitbox();

if (axes.x)
{
final offset = object.x - hitbox.x;
object.x = scroll.x + (width - hitbox.width) / 2 + offset;
}

if (axes.y)
{
final offset = object.y - hitbox.y;
object.y = scroll.y + (height - hitbox.height) / 2 + offset;
}

hitbox.put();
return object;
}

/**
* The size and position of this camera's margins, via `viewMarginLeft`, `viewMarginTop`, `viewWidth`
* and `viewHeight`.
Expand Down
65 changes: 64 additions & 1 deletion flixel/FlxG.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import flixel.system.frontEnds.VCRFrontEnd;
import flixel.system.frontEnds.WatchFrontEnd;
import flixel.system.scaleModes.BaseScaleMode;
import flixel.system.scaleModes.RatioScaleMode;
import flixel.util.FlxAxes;
import flixel.util.FlxCollision;
import flixel.util.FlxSave;
import flixel.util.typeLimit.NextState;
Expand Down Expand Up @@ -476,7 +477,69 @@ class FlxG
{
return overlap(objectOrGroup1, objectOrGroup2, notifyCallback, FlxObject.separate);
}


/**
* Centers `FlxSprite` by graphic size in game space, either by the x axis, y axis, or both.
*
* @param sprite The sprite to center.
* @param axes On what axes to center the sprite (e.g. `X`, `Y`, `XY`) - default is both.
* @return Centered sprite for chaining.
* @since TBA
*/
public static function center<T:FlxSprite>(sprite:T, axes:FlxAxes = XY):T
{
// We need to disable this flag to get accurate graphic bounds
final pixelPerfectPosition = sprite.pixelPerfectPosition;
sprite.pixelPerfectPosition = false;

final graphicBounds = sprite.getGraphicBounds();

if (axes.x)
{
final offset = sprite.x - graphicBounds.x;
sprite.x = (FlxG.width - graphicBounds.width) / 2 + offset;
}

if (axes.y)
{
final offset = sprite.y - graphicBounds.y;
sprite.y = (FlxG.height - graphicBounds.height) / 2 + offset;
}

// Now we set flag back to its original state
sprite.pixelPerfectPosition = pixelPerfectPosition;
graphicBounds.put();
return sprite;
}

/**
* Centers `FlxObject` by hitbox size in game space, either by the x axis, y axis, or both.
*
* @param object The object to center.
* @param axes On what axes to center the object (e.g. `X`, `Y`, `XY`) - default is both.
* @return Centered object for chaining.
* @since TBA
*/
public static function centerHitbox<T:FlxObject>(object:T, axes:FlxAxes = XY):T
{
final hitbox = object.getHitbox();

if (axes.x)
{
final offset = object.x - hitbox.x;
object.x = (FlxG.width - hitbox.width) / 2 + offset;
}

if (axes.y)
{
final offset = object.y - hitbox.y;
object.y = (FlxG.height - hitbox.height) / 2 + offset;
}

hitbox.put();
return object;
}

/**
* Regular `DisplayObject`s are normally displayed over the Flixel cursor and the Flixel debugger if simply
* added to `stage`. This function simplifies things by adding a `DisplayObject` directly below mouse level.
Expand Down
15 changes: 5 additions & 10 deletions flixel/FlxObject.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1173,24 +1173,19 @@ class FlxObject extends FlxBasic
kill();
}
#end

/**
* Centers this `FlxObject` on the screen, either by the x axis, y axis, or both.
*
*
* @param axes On what axes to center the object (e.g. `X`, `Y`, `XY`) - default is both.
* @return This FlxObject for chaining
*/
@:deprecated("screenCenter is deprecated, use FlxG.centerHitbox instead")
public inline function screenCenter(axes:FlxAxes = XY):FlxObject
{
if (axes.x)
x = (FlxG.width - width) / 2;

if (axes.y)
y = (FlxG.height - height) / 2;

return this;
return FlxG.centerHitbox(this, axes);
}

/**
* Helper function to set the coordinates of this object.
* Handy since it only requires one line of code.
Expand Down
4 changes: 2 additions & 2 deletions flixel/FlxSprite.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1368,8 +1368,8 @@ class FlxSprite extends FlxObject
if (pixelPerfectPosition)
newRect.floor();
_scaledOrigin.set(origin.x * scale.x, origin.y * scale.y);
newRect.x += -Std.int(camera.scroll.x * scrollFactor.x) - offset.x + origin.x - _scaledOrigin.x;
newRect.y += -Std.int(camera.scroll.y * scrollFactor.y) - offset.y + origin.y - _scaledOrigin.y;
newRect.x += -camera.scroll.x * scrollFactor.x - offset.x + origin.x - _scaledOrigin.x;
newRect.y += -camera.scroll.y * scrollFactor.y - offset.y + origin.y - _scaledOrigin.y;
if (isPixelPerfectRender(camera))
newRect.floor();
newRect.setSize(frameWidth * Math.abs(scale.x), frameHeight * Math.abs(scale.y));
Expand Down
86 changes: 85 additions & 1 deletion tests/unit/src/flixel/FlxCameraTest.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package flixel;

import flixel.math.FlxPoint;
import flixel.util.FlxColor;
import massive.munit.Assert;

Expand Down Expand Up @@ -89,7 +90,90 @@ class FlxCameraTest extends FlxTest
camera.follow(new FlxObject());
Assert.areEqual(defaultLerp, camera.followLerp);
}


@Test
function testCenter()
{
final sprite = new FlxSprite();
sprite.makeGraphic(100, 100);
sprite.origin.set(100, 100);
sprite.offset.set(100, 100);
sprite.scale.set(2, 4);
sprite.angle = 180;
sprite.pixelPerfectPosition = true;
sprite.pixelPerfectRender = true;
final cam = FlxG.camera;
cam.scroll.set(100, 100);
cam.zoom *= 2;
final graphicBounds = sprite.getScreenBounds(null, cam);
final offset = FlxPoint.get(sprite.x - graphicBounds.x, sprite.y - graphicBounds.y);
final center = FlxPoint.get((cam.width - graphicBounds.width) / 2 + offset.x, (cam.height - graphicBounds.height) / 2 + offset.y);
final offCenter = center.copyTo().add(1000, 1000);

sprite.setPosition(offCenter.x, offCenter.y);
cam.center(sprite, X);
FlxAssert.areNear(sprite.x, center.x);
FlxAssert.areNear(sprite.y, offCenter.y);

sprite.setPosition(offCenter.x, offCenter.y);
cam.center(sprite, Y);
FlxAssert.areNear(sprite.x, offCenter.x);
FlxAssert.areNear(sprite.y, center.y);

sprite.setPosition(offCenter.x, offCenter.y);
cam.center(sprite, XY);
FlxAssert.areNear(sprite.x, center.x);
FlxAssert.areNear(sprite.y, center.y);

sprite.setPosition(offCenter.x, offCenter.y);
cam.center(sprite);
FlxAssert.areNear(sprite.x, center.x);
FlxAssert.areNear(sprite.y, center.y);

offset.put();
graphicBounds.put();
offCenter.put();
center.put();
}

@Test
function testCenterHitbox()
{
final object = new FlxObject(0, 0, 10, 10);
final cam = FlxG.camera;
cam.scroll.set(100, 100);
cam.zoom *= 2;
final hitbox = object.getHitbox();
final offset = FlxPoint.get(object.x - hitbox.x, object.y - hitbox.y);
final center = FlxPoint.get(cam.scroll.x + (cam.width - hitbox.width) / 2 + offset.x, cam.scroll.y + (cam.height - hitbox.height) / 2 + offset.y);
final offCenter = center.copyTo().add(1000, 1000);

object.setPosition(offCenter.x, offCenter.y);
cam.centerHitbox(object, X);
Assert.areEqual(object.x, center.x);
Assert.areEqual(object.y, offCenter.y);

object.setPosition(offCenter.x, offCenter.y);
cam.centerHitbox(object, Y);
Assert.areEqual(object.x, offCenter.x);
Assert.areEqual(object.y, center.y);

object.setPosition(offCenter.x, offCenter.y);
cam.centerHitbox(object, XY);
Assert.areEqual(object.x, center.x);
Assert.areEqual(object.y, center.y);

object.setPosition(offCenter.x, offCenter.y);
cam.centerHitbox(object);
Assert.areEqual(object.x, center.x);
Assert.areEqual(object.y, center.y);

offset.put();
hitbox.put();
offCenter.put();
center.put();
}

@Test
function testFadeInFadeOut()
{
Expand Down
77 changes: 77 additions & 0 deletions tests/unit/src/flixel/FlxGTest.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package flixel;

import flixel.math.FlxPoint;
import massive.munit.Assert;

@:access(flixel.FlxG)
Expand Down Expand Up @@ -104,4 +105,80 @@ class FlxGTest extends FlxTest
{
Assert.areEqual(480, FlxG.height);
}

@Test
function testCenter()
{
final sprite = new FlxSprite();
sprite.makeGraphic(100, 100);
sprite.origin.set(100, 100);
sprite.offset.set(100, 100);
sprite.scale.set(2, 4);
sprite.angle = 180;
sprite.pixelPerfectPosition = true;
final graphicBounds = sprite.getGraphicBounds();
final offset = FlxPoint.get(sprite.x - graphicBounds.x, sprite.y - graphicBounds.y);
final center = FlxPoint.get((FlxG.width - graphicBounds.width) / 2 + offset.x, (FlxG.height - graphicBounds.height) / 2 + offset.y);
final offCenter = center.copyTo().add(1000, 1000);

sprite.setPosition(offCenter.x, offCenter.y);
FlxG.center(sprite, X);
FlxAssert.areNear(sprite.x, center.x);
FlxAssert.areNear(sprite.y, offCenter.y);

sprite.setPosition(offCenter.x, offCenter.y);
FlxG.center(sprite, Y);
FlxAssert.areNear(sprite.x, offCenter.x);
FlxAssert.areNear(sprite.y, center.y);

sprite.setPosition(offCenter.x, offCenter.y);
FlxG.center(sprite, XY);
FlxAssert.areNear(sprite.x, center.x);
FlxAssert.areNear(sprite.y, center.y);

sprite.setPosition(offCenter.x, offCenter.y);
FlxG.center(sprite);
FlxAssert.areNear(sprite.x, center.x);
FlxAssert.areNear(sprite.y, center.y);

offset.put();
graphicBounds.put();
offCenter.put();
center.put();
}

@Test
function testCenterHitbox()
{
final object = new FlxObject(0, 0, 10, 10);
final hitbox = object.getHitbox();
final offset = FlxPoint.get(object.x - hitbox.x, object.y - hitbox.y);
final center = FlxPoint.get((FlxG.width - hitbox.width) / 2 + offset.x, (FlxG.height - hitbox.height) / 2 + offset.y);
final offCenter = center.copyTo().add(1000, 1000);

object.setPosition(offCenter.x, offCenter.y);
FlxG.centerHitbox(object, X);
Assert.areEqual(object.x, center.x);
Assert.areEqual(object.y, offCenter.y);

object.setPosition(offCenter.x, offCenter.y);
FlxG.centerHitbox(object, Y);
Assert.areEqual(object.x, offCenter.x);
Assert.areEqual(object.y, center.y);

object.setPosition(offCenter.x, offCenter.y);
FlxG.centerHitbox(object, XY);
Assert.areEqual(object.x, center.x);
Assert.areEqual(object.y, center.y);

object.setPosition(offCenter.x, offCenter.y);
FlxG.centerHitbox(object);
Assert.areEqual(object.x, center.x);
Assert.areEqual(object.y, center.y);

offset.put();
hitbox.put();
offCenter.put();
center.put();
}
}
Loading