1. Scene layout2. Add a handle listener1. Monitor event changesConvert from the original mouse series to the touch series
2. Coordinate setting When the touch is pressed, the push position changes (use world coordinate conversion), and when the touch is lifted, it returns to the original position (directly set 0, 0 coordinates are the default relative coordinates). onTouchMove(e:cc.Event.EventTouch){ // e.getLocation() is the clicked location, which is the world coordinate. // The world coordinate needs to be converted to the local coordinate. let parent=this.node.parent; // Parent node (circular chassis) let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation()); this.node.setPosition(pos); } onTouchCancel(){ this.node.setPosition(cc.v3(0,0,0)); } 3. Confine the handle to the trayUse the azimuth angle to locate the edge position. The pos.normalize() method returns the (cos, sin) of the point relative to (0, 0) and returns a Vec2 object. let parent=this.node.parent; // Parent node (circular chassis) let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation()); // The position of the point (cos, sin) let direction:cc.Vec2=pos.normalize(); // Limit to within the boundary let maxR = 100-20; //The distance from the clicked point to the center of the tray 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("Relative position: " + pos.x + ", " + pos.y); this.node.setPosition( pos); 3. Add car control1. Rotation of the carcc.Node.angle Rotation implementation: onLoad () { this.car=cc.find("Canvas/car"); } let radian = pos.signAngle (cc.v2 (1,0)); //Calculate the angle between the click position and the horizontal let ang = radian / Math.PI * 180; //Convert radians to angles this.car.angle = -ang; //Counterclockwise is positive, so adjust to clockwise here 2. Movement of the Car
Car movement script direction: cc.Vec2 = null; speed: number = 3; onLoad() { } start() { } update(dt) { if (this.direction == null) return; //Standstill 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); } Gamepad control script car: cc.Node = null; carscript: cc.Component = null; // LIFE-CYCLE CALLBACKS: onLoad() { this.car = cc.find("Canvas/car"); 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() is the clicked location, which is the world coordinate. // The world coordinate needs to be converted to local coordinate. // let parent=this.node.parent;// Parent node (circular chassis) // let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation()); // this.node.setPosition(pos); let parent = this.node.parent; // Parent node (circular chassis) let pos: cc.Vec2 = parent.convertToNodeSpaceAR(e.getLocation()); // The position of the point (cos, sin) let direction: cc.Vec2 = pos.normalize(); // Limit to within the boundary 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("Relative position: " + pos.x + ", " + pos.y); this.node.setPosition(pos); let radian = pos.signAngle(cc.v2(1, 0)); //Calculate the angle between the click position and the horizontal let ang = radian / Math.PI * 180; //Convert radians to angles this.car.angle = -ang; //Counterclockwise is positive, so adjust to clockwise here this.carscript.direction = direction; } onTouchCancel() { this.node.setPosition(cc.v3(0, 0, 0)); //Set the direction to null to stop the car this.carscript.direction = null; } // update (dt) {} Final result The above is the details of how to use the game controller in CocosCreator. For more information about CocosCreator controller examples, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Analysis of MySQL joint index function and usage examples
>>: Detailed example of database operation object model in Spring jdbc
Teaching Topics Web page Applicable grade Second ...
There are two types of hard disks in Linux: mount...
Copy code The code is as follows: <!--doctype ...
Problem Description When using Windows Server 201...
This article uses examples to illustrate the usag...
1. Command Introduction The contab (cron table) c...
Table of contents Preface The need for online XML...
Preface I once encountered a difficult problem. I...
Every time you log in to the test server, you alw...
Preface The location in the server block in the N...
Preface In the previous article Two data types in...
effect: The GROUP_CONCAT function can concatenate...
Table of contents 1. Problem Discovery 2. View de...
Install lua wget http://luajit.org/download/LuaJI...
Introduction 1.<iframe> tag: iframe is an i...