The scene consists of a sprite depicting a blue circle, and multiple “small” circle with a shader attached to paint a red dot over the center of the blue circle wherever it actually ends up. I need several circles because the bug is that the red dot is not actually where it should be. This is the source code:
import hxd.Key;
class Main extends hxd.App {
public static var ME : Main;
public static var GRID = 10;
public static var SCALE = 4;
public var root : h2d.Layers;
public var invalidated = true;
public var isPressed = false;
static function main() {
new Main();
}
override function init() {
ME = this;
hxd.Res.initEmbed();
root = new h2d.Layers(s2d);
root.filter = new h2d.filter.ColorMatrix();
root.setScale(SCALE);
onResize();
}
override function onResize() {
super.onResize();
root.setScale(SCALE);
}
override function dispose() {
super.dispose();
}
override function update(deltaTime:Float) {
super.update(deltaTime);
if(Key.isDown(Key.G)) {
isPressed = true;
invalidated = true;
} else if (isPressed) {
invalidated = true;
isPressed = false;
}
if( invalidated ) {
invalidated = false;
redraw();
}
}
public function redraw() {
root.removeChildren();
var cx = 5;
var cy = 5;
var sprite = new h2d.Bitmap(hxd.Res.my_sprite.toTile(), root);
sprite.x = cx * GRID;
sprite.y = cy * GRID;
//This is meant to cover the screen with circles that do not trigger the "fix"
for (i in 0...8) {
drawCircleCenter(root, sprite, i * 100, 60);
drawCircleCenter(root, sprite, i * 100, sprite.y - 60);
drawCircleCenter(root, sprite, i * 100, sprite.y);
drawCircleCenter(root, sprite, i * 100, sprite.y + 60);
}
if (isPressed) {
var g = new h2d.Graphics(root);
g.beginFill(0xffffff, 0.);
g.drawCircle(0, 0, 1000);
g.endFill();
}
}
public function drawCircleCenter(dyns : h2d.Object, sprite : h2d.Bitmap, x : Float, y : Float) {
var g = new h2d.Graphics(dyns);
g.beginFill(0xffffff, 0.1);
g.drawCircle(x, y, 100);
g.endFill();
var centerX = sprite.x + 0.5 * sprite.tile.width;
var centerY = sprite.y + 0.5 * sprite.tile.height;
var shader = new Center(engine.width, engine.height, centerX, centerY);
g.addShader(shader);
}
}
class Center extends hxsl.Shader {
static var SRC = {
@:import h3d.shader.Base2d;
@param var width : Float;
@param var height : Float;
@param var center : Vec2;
function fragment() {
var pos = vec2((outputPosition.xy + vec2(1)) * 0.5) * vec2(width, height);
var c = pos - center;
var r = sqrt(c.x*c.x + c.y*c.y);
if( r < 5 )
output.color = vec4(255, 0, 0, 1);
}
};
public function new(w:Float, h:Float, centerX:Float, centerY:Float) {
super();
center.x = centerX * Main.SCALE;
center.y = centerY * Main.SCALE;
width = w;
height = h;
}
}
However, while “G” is pressed down, the app adds a “large” invisible circle to the scene, using the following code:
The red dot does end up in the middle of the circle then.
I am not including any link because my last post was tagged as spam, but I have a public repo setup as well as a link to the running app if someone is interested.
Can someone explain me the behaviour or tell me how to avoid having to draw the large invisible circle for the shader to behave as expected?