Git Product home page Git Product logo

Comments (7)

starwed avatar starwed commented on June 12, 2024

It works well until I change the rotation origin (this.origin("center")) and rotate the this object. The erroneous behavior can be easily shown by adding the SolidHitBox component to the respective entity.

Thanks for the bug report! Could you describe the error in a bit more detail? (Or provide a self-contained example?)

from crafty.

adbo28 avatar adbo28 commented on June 12, 2024

Hi, sure the subset of my code which displays the reported behaviour follows:

`


    <div id="game"></div>
    
    <script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js">
    </script>
        
    <script>
        Crafty.init(500,500, document.getElementById('game'));

        Crafty.c("Rocket", {
            init: function() {
                this.addComponent("2D, DOM, Color, Motion, Collision, SolidHitBox");
                this.rotating = 0;
                this.rotation = Crafty.math.randomNumber(0, 359);
                this.x = Crafty.math.randomNumber(50, 450);
                this.y = Crafty.math.randomNumber(50, 450);
                this.w = 30;
                this.h = 30;
                this.origin("center");
            },

            moveOneStep: function(evt) {
                //rotation
                this.rotation += this.rotating;

                //check for collision after rotation
                var hitDatas, hitData;
                if ((hitDatas = this.hit('Wall'))) { // check for collision with walls
                    hitData = hitDatas[0]; // resolving collision for just one collider
                    this.rotation -= this.rotating;
                    return this;
                }

                //move
                diff_x = Math.cos(this.rotation/180*Math.PI);
                this.x += diff_x;
                diff_y = Math.sin(this.rotation/180*Math.PI);
                this.y += diff_y;

                //check for collision after move
                if ((hitDatas = this.hit('Wall'))) { // check for collision with walls
                    hitData = hitDatas[0]; // resolving collision for just one collider
                    if (hitData.type === 'SAT') { // SAT, advanced collision resolution
                        // move player back by amount of overlap
                        this.x -= diff_x;
                        this.y -= diff_y;
                    } else { // MBR, simple collision resolution
                        // move player to previous position
                        this.x = evt._x;
                        this.y = evt._y;
                    }
                }


                return this;
            }
        });

        Crafty.e('Collision, Wall, 2D, DOM, Color').attr({x: 0, y: 0, w: 20, h: 500}).color('black');
        Crafty.e('Collision, Wall, 2D, DOM, Color').attr({x: 0, y: 0, w: 500, h: 20}).color('black');
        Crafty.e('Collision, Wall, 2D, DOM, Color').attr({x: 480, y: 0, w: 20, h: 500}).color('black');
        Crafty.e('Collision, Wall, 2D, DOM, Color').attr({x: 0, y: 480, w: 500, h: 20}).color('black');

        //--- rocket1 ---
        var rocket = Crafty.e('Rocket, Keyboard')
            .color('blue');
        
        rocket.bind("KeyDown", function(e) {
            if(e.key == Crafty.keys.LEFT_ARROW) {
                rocket.rotating = +5;
            }
            if(e.key == Crafty.keys.RIGHT_ARROW) {
                rocket.rotating = -5;
            }
        });
        rocket.bind("KeyUp", function(e) {
            if(e.key == Crafty.keys.RIGHT_ARROW || e.key == Crafty.keys.LEFT_ARROW) {
                rocket.rotating = 0;
            }
        });

        rocket.bind("UpdateFrame", rocket.moveOneStep);

    </script>

</body>

`

from crafty.

adbo28 avatar adbo28 commented on June 12, 2024

my previous comment does not contain the inital lines, but they are quite obvious:
< html >
<head >
</head >
<body >

from crafty.

adbo28 avatar adbo28 commented on June 12, 2024

If I skip the line this.origin("center"); in my code, the SolidHitBox overlaps well with my square. Once this line is included, the SolidHitBox and my square divide.

from crafty.

starwed avatar starwed commented on June 12, 2024

Looks like something is going wrong when you set the width, origin, rotation, and hitbox in a specific order.

I'll look into this further, but setting the origin after the dimensions, but before the other properties works around the bug:

this.addComponent("2D, DOM, Color, Motion, Collision, SolidHitBox");
this.rotating = 0;
this.w = 30;
this.h = 30;
this.origin("center");
this.rotation = Crafty.math.randomNumber(0, 359);
this.x = Crafty.math.randomNumber(50, 450);
this.y = Crafty.math.randomNumber(50, 450);

e: originally suggested setting the origin first, but that produces a slightly different bug. I think the root issue is that the collision hitbox isn't recalculated correctly when the origin is applied, and it's manifesting in a couple of different ways.

from crafty.

adbo28 avatar adbo28 commented on June 12, 2024

thanks a lot. the workaround works fine :)

from crafty.

starwed avatar starwed commented on June 12, 2024

With the fix in #1202, your original example now works, so I'm going to close.

(You can find the most recent build of the develop branch here)

Thanks for the report!

from crafty.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.