어떻게 CocosCreator 에서 게임 손 잡 이 를 사용 합 니까?

장면 배치


손잡이 모니터 추가
1.감청 사건 의 변화
원래 mouse 시리즈 에서 touch 시리즈 로 바 뀌 었 어 요.

touch start 터치 누 르 면 mousedown

에 해당 합 니 다.

touch move 터치 이동,mousemove

에 해당 합 니 다.

touch end 터치 가 올 라 가면 mouseup

에 해당 합 니 다.

touch cancel 터치 가 취소 되 고 다른 이벤트 에 의 해 종료 되 며 ESC 키 를 누 른 것 과 같 습 니 다

2.좌표 설정
터치 가 누 르 면 추진 위치 에 따라 변화(세계 좌표 로 전환 해 야 함)하고 터치 가 올 라 간 후에 제자리 로 돌아 갑 니 다(0,0 좌 표 는 기본적으로 상대 좌 표를 설정 합 니 다).
setPosition()은 상대 부모 노드 의 좌표 로 설정 되 어 있 습 니 다.

  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.핸들 을 트 레이 에 제한한다
방위각 을 사용 하여 가장자리 위 치 를 정 하 다.pos.normalize()방법 은 이 점 에 비해(0,0)의(cos,sin)을 되 돌려 주 고 Vec 2 대상 을 되 돌려 줍 니 다.

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.승용차 의 제어 추가
1.소형 차 의 회전
cc.Node.angle
시계 반대 방향
공식 적 으로 cc.Node.rotationa.signAngle(b)을 사용 하지 말 것 을 건의 합 니 다.
a 와 b 는 두 개의 벡터 이 고 반환 값 은 a,b 의 협각(라디안 값)입 니 다.
radian = a.signAngle(b)
(1)a 는 b 의 시계 방향 에 위치 합 니 다.각 도 는 정 입 니 다.
(2)a 는 b 의 시계 반대 방향 에 위치 합 니 다.각 도 는 마이너스 입 니 다.
회전 실현:
속성 car 추가:cc.Node=null;소형 차 노드 가 져 오기.
cc.find()매개 변 수 는"/"로 나 누 는 슬 래 쉬 를 사용 합 니 다.그렇지 않 으 면 인식 되 지 않 습 니 다.

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.승용차 의 이동

소형 차 의 스 크 립 트 에 전진 하 는 애니메이션 을 추가 합 니 다.update(dt)방법 에서 x 와 y 각 프레임 에 대응 하 는 속 도 를 x 와 y 축 에 추가 합 니 다.

손잡이 제어 스 크 립 트 에서 소형 차 노드 의 스 크 립 트 를 가 져 옵 니 다.위 에서 가 져 온 direction 의 방향 각 을 통 해 소형 차 스 크 립 트 에 들 어 갑 니 다.direction 을 제어 하여 소형 차 의 이동 을 제어 하 다.

소형 차 운동 대본

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);
}

손잡이 제어 스 크 립 트

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) {}

최종 효과

이상 은 CocosCreator 에서 게임 손 잡 이 를 어떻게 사용 하 는 지 에 대한 상세 한 내용 입 니 다.CocosCreator 손잡이 인 스 턴 스 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!