[SOLVED] Problems With Improving My Game

Hey guys,

I have a couple of things I’d like to change in my recently published game, Flip it. Firstly, instead of having the arm rotate by 10 degrees, how do I make it so that once the arrow key is pressed, it rotates 180 degrees, clearly showing the rotation in the correct direction? Secondly, how do I make it so that when the right half or left half of the screen is clicked, the arm moves in the corresponding direction?

Link - https://playcanvas.com/project/665601/overview/flip-it

Please help me out!

Hi @DevilZ,

Can you share the part of your code where you handle rotation?

I imagine for your first point you can increase whatever you doing right now to have it rotate by 180 degrees, instead of 10.

For your second point, to find the direction of where your use clicked you can do something like this:

// initialize code called once per entity
Mouse.prototype.initialize = function() {

    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
};

Mouse.prototype.onMouseDown = function (event) {
    // If the left mouse button is pressed, change the cube color to red
    if (event.button === pc.MOUSEBUTTON_LEFT) {
        
        var side = event.x > this.app.graphicsDevice.canvas.width / 2 ? 1 : -1;

        // when side is 1 he has clicked to the right, when -1 to the left;
    }
};
var Rotate = pc.createScript('rotate');

// initialize code called once per entity
Rotate.prototype.initialize = function() {
    this.x = false;
    this.y = false;
};

// update code called every frame
Rotate.prototype.update = function(dt) {
    
    this.app.root.findByName("RightButton").element.on('touchstart', function (event) {
        this.x = true;
    }, this);
    
    this.app.root.findByName("RightButton").element.on('touchend', function (event) {
        this.x = false;
    }, this);
    
    this.app.root.findByName("LeftButton").element.on('touchstart', function (event) {
        this.y = true;
    }, this);
    
    this.app.root.findByName("LeftButton").element.on('touchend', function (event) {
        this.y = false;
    }, this);
    
    if (this.checkFunc() === false) {
        this.keyFunc();
    }
    
    else {
        this.app.root.findByName("Mobile_Controls").enabled = true;
        this.touchFunc();
    }
    
};

Rotate.prototype.keyFunc = function(dt) {
    if(this.app.keyboard.wasPressed(pc.KEY_LEFT)){
        this.entity.rotateLocal(0,0,10);
    }
    
    if(this.app.keyboard.wasPressed(pc.KEY_RIGHT)){
        this.entity.rotateLocal(0,0,-10);
    }
    
};

Rotate.prototype.touchFunc = function(dt) {
    if(this.y === true){
        this.entity.rotateLocal(0,0,10);
    }
    
    if(this.x === true){
        this.entity.rotateLocal(0,0,-10);
    }
};

Rotate.prototype.checkFunc = function(dt) {
    var check = false;
    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
    return check;
};

// swap method called for script hot-reloading
// inherit your script state here
// Rotate.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

After I tried doing 180, the arm rotates so fast, it isn’t discernible.

Thanks for sharing that @DevilZ.

Without stepping to your specific issue, I can see something fundamentally wrong in your implementation:

  • You are attaching new touch event handlers on each frame.

You should attach them once in your initialize method and they would fire as soon as input is detected. The way you do it now, apart from producing unexpected results can seriously impact performance.

It’s not just that. The same problem is there on keyboard, try the game and see.

Yes, it may be but I’d say at this point it’s a good step to refactor your code. Otherwise you are going to kill performance and make debugging quite difficult.

Also there is no reason to be running checkFunc() per frame since it is unlikely or impossible to change your user agent during gameplay. It should be enough to run it once in your initialize method.

Sorry for bringing other issues on the table, but it isn’t easy to debug the code when doing unorthodox things :slight_smile:

1 Like

Will fix it. But is there a way to do this if I fix it? I also need help with my second point.

It sounds like you want to make so that if you tap the left/right buttons, it rotates to 180 or -180 degrees over a period of time?

If so, I would set a target rotation whenever the user presses the buttons and have the rotation of the arm move towards the target rotation in the update.

It’s very similar to this project where the character is moving towards a point on the plane over time: https://developer.playcanvas.com/en/tutorials/point-and-click-movement/

3 Likes

You could also tween the entity to the target rotation. Something like

this.entity.tween(this.entity.getLocalEulerAngles())
    .to({z: 180}, 0.5, pc.Linear)    // z can be whatever you want it to be. 
    .start();
2 Likes

Thanks @yaustar and @davidpox. I think the tween method will work perfectly. Will do tmrw.

1 Like

No worries, should also mention you need the tween library from here:

Also has other easing methods instead of pc.Linear, they’ll change how your entity rotates, i.e. quickly moves to near the target and the slowly moves in, stuff like that. Play around with them and find one you like

1 Like