Ejemplo de control de gamepad de Cocos
1. Disposición de la escena
2. Agregar oyente de identificador
-
El cambio de evento de escucha se
convierte de la serie de mouse original a la serie táctil
- touchstart touch press, equivalente a mousedown
2. touchmove touch move, equivalente a mousemove - tocar y retocar, equivalente a mouseup
- touchcancel Toque para cancelar, terminado por otros eventos, equivalente a presionar la tecla ESC
- touchstart touch press, equivalente a mousedown
-
Ajuste de coordenadas: cuando se presiona el toque, la posición cambia con el empuje (se requiere la conversión de coordenadas mundiales), y el toque se levanta para volver a la posición original (establecer directamente 0, la coordenada 0 es la coordenada relativa predeterminada).
setPosition () establece las coordenadas relativas al nodo padre
onTouchMove(e:cc.Event.EventTouch){
// e.getLocation() 为点击的位置，是世界坐标
// 需要把世界坐标转换为本地坐标
let parent=this.node.parent;// 父节点 (圆形底盘)
let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
this.node.setPosition(pos);
}
onTouchCancel(){
this.node.setPosition(cc.v3(0,0,0));
}
3. Limite el asa a la bandeja. Utilice el acimut para localizar la posición del borde. El método pos.normalize () devuelve (cos, sin) de este punto en relación con (0, 0) y devuelve un objeto Vec2.
let parent=this.node.parent;// 父节点 (圆形底盘)
let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
// 该点所在的方位 (cos, sin)
let direction:cc.Vec2=pos.normalize();
// 限制在边界之内
let maxR = 100-20;
//点击的点到托盘中央的距离
let r : number = cc.Vec2.distance(pos, cc.v2(0,0));
if( r > maxR)
{
pos.x = maxR * direction.x;
pos.y = maxR * direction.y;
}
// cc.log("相对位置: " + pos.x + ", " + pos.y);
this.node.setPosition( pos);
3. Añade el control del coche
1. La rotación del carro
- cc.Node.angle
representa el ángulo de rotación, en sentido antihorario es positivo. La
recomendación oficial es no utilizar cc.Node.rotation- a.signAngle (b)
ayb son dos vectores, el valor de retorno es un ángulo entre a y b (valor en
radianes ) radian = a.signAngle (b)
(1) a está en la dirección de las agujas del reloj de b: el ángulo es positivo
(2) a está en el sentido contrario a las agujas del reloj de b: el ángulo es negativo
Realización de rotación:
agregue el atributo car: cc.Node = null; obtenga el nodo del automóvil.
cc.find () Tenga en cuenta que el parámetro se divide entre "/" con una barra, de lo contrario no se reconocerá
onLoad () {
this.car=cc.find("Canvas/小车");
}
let radian=pos.signAngle(cc.v2(1,0));//计算点击位置与水平的夹角
let ang=radian/Math.PI*180;//弧度制转换为角度值
this.car.angle=-ang;//逆时针为正，所以这里要调整至顺时针
2. Movimiento del carro
- .Agregue una animación hacia adelante al script de la plataforma rodante. En el método de actualización (dt), agregue los componentes de velocidad correspondientes en los ejes xey para cada fotograma de x e y.
- Obtenga el script debajo del nodo del carro en el script de control de la manija. Pase el ángulo de dirección de la dirección obtenida anteriormente en el guión del carro. Controle el movimiento del carro controlando la dirección.
Guión de movimiento del carro
direction: cc.Vec2=null;
speed:number=3;
onLoad () {
}
start () {
}
update (dt) {
if(this.direction==null) return;//静止
let dx=this.speed*this.direction.x;
let dy=this.speed*this.direction.y;
let pos=this.node.getPosition();
pos.x+=dx;
pos.y+=dy;
this.node.setPosition(pos);
}
Manejar el script de control
car :cc.Node=null;
carscript:cc.Component=null;
// LIFE-CYCLE CALLBACKS:
onLoad () {
this.car=cc.find("Canvas/小车");
this.carscript=this.car.getComponent("CarMove");
}
start () {
this.node.on('touchstart', this.onTouchStart, this);
this.node.on('touchmove', this.onTouchMove, this);
this.node.on('touchend', this.onTouchCancel, this);
this.node.on('touchcancel', this.onTouchCancel, this);
}
onTouchStart(){
}
onTouchMove(e:cc.Event.EventTouch){
// e.getLocation() 为点击的位置，是世界坐标
// 需要把世界坐标转换为本地坐标
// let parent=this.node.parent;// 父节点 (圆形底盘)
// let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
// this.node.setPosition(pos);
let parent=this.node.parent;// 父节点 (圆形底盘)
let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
// 该点所在的方位 (cos, sin)
let direction:cc.Vec2=pos.normalize();
// 限制在边界之内
let maxR = 100-20;
let r : number = cc.Vec2.distance(pos, cc.v2(0,0));
if( r > maxR)
{
pos.x = maxR * direction.x;
pos.y = maxR * direction.y;
}
// cc.log("相对位置: " + pos.x + ", " + pos.y);
this.node.setPosition( pos);
let radian=pos.signAngle(cc.v2(1,0));//计算点击位置与水平的夹角
let ang=radian/Math.PI*180;//弧度制转换为角度值
this.car.angle=-ang;//逆时针为正，所以这里要调整至顺时针
this.carscript.direction=direction;
}
onTouchCancel(){
this.node.setPosition(cc.v3(0,0,0));
//将方向置空，使汽车停止
this.carscript.direction=null;
}
// update (dt) {}
efecto final
