Question from chapter 4 of "HTML5 Games: Novice to Ninja"

Under the topic of “Adjusting the Anchor Point” (chapter 4 of “HTML5 Games: Novice to Ninja”), the author has this code: “this.anchor = { x: -16, y: -16 };”

I understand what it is used for. I just can’t find where in the code that use this.anchor to compare/adjust the position of the sprite.

Thank you in advanced.

It looks like it’s further down in the setSubject method.

1 Like

Thank you very much for your reply.

Yes, there is one in the setSubject method. However, that is another game, not the one I have problem with.

By the way, I download the source code and comment out that line and the program work incorrectly. So, that line is working. I just can’t find yet why and how it work 5 5 5.

Then please direct us to the game that you are having trouble with.

If it’s the final game of Chapter 4 that you’re asking about, anchor is used both in the Camera code and in the CanvasRenderer code.

The code can be found at https://github.com/spbooks/html5games1/tree/master/ch04/08-spritesheet-anim

This “this.anchor = { x: -16, y: -16 };” is in file named “/entities/Squizz.js”.

The click testing “if (pressed && math.distance(pos, b.pos) < 16) {” is in “/src/main.js”.

Thank you. And just for clarification - what is the question?

My question is “where is the code that use this.anchor to adjust the position of the element being clicked, so that it look we can click on the middle of the element”.

You’ll see that src/main.js imports code from pop/index.js

That pop folder has a renderer folder containing CanvasRenderer.js, and in that file is where the anchor is used.

        if (child.anchor) ctx.translate(child.anchor.x, child.anchor.y);
1 Like

Oh, I see. Thank you very much for your help!

1 Like