Please help me code the same input controller as the following game.
When we hold our touch then the vehicle should steer in the left lane and vice versa on releasing our touch as the vehicle continues to move forward with a uniform speed.
Project Link - PlayCanvas | HTML5 Game Engine
I am using play canvas physics vehicle and have the following code.
var VehicleControls = pc.createScript('vehicleControls');
VehicleControls.attributes.add('targetVehicle', {
type: 'entity',
title: 'Target Vehicle'
});
VehicleControls.prototype.initialize = function () {
this.upButtonPressed = false;
this.leftButtonPressed = false;
this.rightButtonPressed = false;
this.reSteer = false;
this.leftLane = false;
this.touching = false;
this.setEventsOnOff('on');
this.on('destroy', () => {
this.setEventsOnOff('off');
});
};
VehicleControls.prototype.setEventsOnOff = function (onOff) {
const touch = this.app.touch;
if (touch)
{
this.app.touch[onOff](pc.EVENT_TOUCHSTART, this.onTouchStart, this);
this.app.touch[onOff](pc.EVENT_TOUCHEND, this.onTouchEndCancel, this);
this.app.touch[onOff](pc.EVENT_TOUCHCANCEL, this.onTouchEndCancel, this);
this.app.touch[onOff](pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
}
};
VehicleControls.prototype.onTouchStart = function(event) {
const touches = event.touches;
this.touching = touches.length === 1;
if (this.touching) {
this.leftLane = true; // Start in the left lane
}
event.event.preventDefault();
};
VehicleControls.prototype.onTouchEndCancel = function(event) {
const touches = event.touches;
this.touching = touches.length === 1;
this.leftLane = !this.leftLane; // Switch to the right lane
event.event.preventDefault();
};
VehicleControls.prototype.onTouchMove = function(event) {
const touches = event.touches;
event.event.preventDefault();
};
VehicleControls.prototype.update = function (dt) {
var targetVehicle = this.targetVehicle ? this.targetVehicle : this.entity;
if (targetVehicle)
{
var steering = 0;
var throttle = 0;
this.upButtonPressed = true;
if (this.touching && this.isTouchingGround()) {
}
else if (!this.touching && this.isTouchingGround()) {
}
if (this.leftButtonPressed) steering++;
if (this.rightButtonPressed) steering--;
if (this.upButtonPressed) throttle++;
// --- if the vehicle isn't turning, steer to get it back on track
if (this.reSteer && this.isTouchingGround())
{
const forward = targetVehicle.forward;
const dot = forward.dot(pc.Vec3.FORWARD);
if (dot < 0.999)
{
const isLeft = forward.x < 0;
steering += isLeft ? -1 : 1;
}
}
targetVehicle.script.vehicle.fire('vehicle:controls', steering, throttle);
}
};
VehicleControls.prototype.isTouchingGround = function () {
var targetVehicle = this.targetVehicle ? this.targetVehicle : this.entity;
// Define the ground height threshold (adjust as needed)
var groundThreshold = 0.5;
// Get the position of the car's wheels or collider
var position = targetVehicle.getPosition(); // Adjust with the appropriate position retrieval method
// Compare the car's height with the ground threshold
return position.y <= groundThreshold;
};