소개
Cocos의 중간 지점 지면 이동의 예.
게임 개발에서 우리는 플레이어가 땅을 클릭하여 지정된 지점으로 이동하도록 제어해야 하는 경우를 자주 접합니다 .
이 기사에서는 Cocos 에서 LOL 과 유사한 점 및 지면 이동 효과를 얻는 방법을 소개합니다 .
이 기사의 소스 프로젝트는 기사 끝 부분에서 얻을 수 있으며 친구들이 스스로 갈 수 있습니다.
지식 포인트를 이동하려면 바닥을 클릭하세요.
Cocos 에서 LOL 과 유사한 포인트 그라운드 이동 효과를 얻으 려면 다음 두 가지 지식 포인트가 있습니다 .
1. 화면 공간 좌표를 광선으로 변환
게임에서 플레이어가 화면의 한 지점을 클릭 하면 추가 상호 작용이나 감지를 위해 카메라 에서 방출 된 광선이 화면의 어느 지점을 통과하는지 알고 싶을 수 있습니다 .
따라서 화면 공간(왼쪽 위 모서리가 원점) 좌표를 광선으로 변환해야 합니다 .
Cocos 에서 사용해야 하는 API 는 Camera.screenPointToRay.
2. 광선을 통해 모든 충돌 상자를 감지합니다.
광선 감지 는 일반적으로 사용되는 기술로 광선이 게임 장면의 객체 와 교차하는지 여부를 확인하여 클릭 감지 및 광선 캐스팅 과 같은 기능을 달성하는 데 사용됩니다.
따라서 우리는 모든 충돌 상자를 감지 하고 감지된 모든 결과를 기록 해야 합니다 .
Cocos 에서는 탐지를 수행 PhysicsSystem.instance.raycast(ray)하고 PhysicsSystem.instance.raycastResults결과에 액세스합니다.
더 이상 고민하지 않고 예를 들어 보겠습니다.
포인트 지면 이동 예시
다음으로 LOL 과 유사한 포인트 그라운드 이동 효과를 단계별로 구현해 보겠습니다 .
1. 환경
엔진 버전 : Cocos Creator 3.8.1
프로그래밍 언어 : TypeScript
2. 자원 준비
Cocos 쇼핑몰 의 Kylinzi 에서 무료 리소스 " KylinsEasyController "를 빌려 프로젝트를 만들어 보겠습니다 .
그런 다음 클릭 위치를 표시하기 위해 직접 원뿔 을 만듭니다 ( 프로그램 그룹은 항상 그렇듯이 버클로 고정되어 있습니다 ).
애니메이션 편집기를 사용하여 간단한 위아래 이동 효과를 만듭니다 .
3. 코드 작성
새 TouchMove구성 요소를 만들고 Canvas 로 드래그합니다 .
@ccclass('TouchMove')
export class TouchMove extends Component {
@property(Node)
pointerNode: Node;
}
메소드 의 이벤트를 수신 start()합니다 .this.node.onNodeEventType.MOUSE_DOWN
start() {
this.node.on(NodeEventType.MOUSE_DOWN, (event: EventMouse) => {
}, this);
}
그런 다음 다음 방법을 통해 클릭한 개체를 가져옵니다 .
event.getLocation()클릭의 화면 좌표를 가져옵니다.camera.screenPointToRay(uiPos.x, uiPos.y, ray)화면 좌표를 통해 광선을 생성합니다.PhysicsSystem.instance.raycast(ray)광선 충돌 감지를 수행하고 결과를 기록합니다.PhysicsSystem.instance.raycastResults광선 감지 결과를 얻고 이름이나 기타 정보로 원하는 개체를 가져옵니다.
var uiPos = event.getLocation();
var ray = new geometry.Ray();
camera.screenPointToRay(uiPos.x, uiPos.y, ray);
if (PhysicsSystem.instance.raycast(ray)) {
const raycastResults = PhysicsSystem.instance.raycastResults;
for (let i = 0; i < raycastResults.length; i++) {
const item = raycastResults[i];
if (item.collider.node.name == "Plane") {
}
}
} else {
console.log('raycast does not hit the target node !');
}
마지막으로 다음 방법을 사용하여 표시기가 나타나 도록 하고 캐릭터를 움직이게 합니다 .
item.hitPoint클릭 좌표를 가져옵니다..active = true.setWorldPosition(item.hitPoint)포인터 좌표를 표시하고 설정합니다 .player.lookAt캐릭터의 방향을 설정합니다.skeletalAnimation.crossFade("anim_rig_run", 0.1)구성요소를 통해 애니메이션을 재생합니다skeletalAnimation.tween(player)트윈 애니메이션을 통해 캐릭터의 움직임을 구현합니다 .
this.pointerNode.active = true;
this.pointerNode.setWorldPosition(item.hitPoint);
player.lookAt(new Vec3(player.worldPosition.x * 2 - item.hitPoint.x, player.position.y, player.worldPosition.z * 2 - item.hitPoint.z));
skeletalAnimation.crossFade("anim_rig_run", 0.1);
let duration = Vec3.distance(player.worldPosition, item.hitPoint) * speed;
if (playerTween) {
playerTween.stop();
}
playerTween = tween(player);
playerTween.to(duration, {
worldPosition: item.hitPoint }).call(() => {
skeletalAnimation.crossFade("anim_rig_idle_1", 0.1);
this.pointerNode.active = false;
}).start();
4. 효과 시연
이것으로 오늘 프로그램을 마치겠습니다. 기사 전달을 도와주세요. 수업 종료가 끝났습니다!
결론
이 기사의 소스 프로젝트는 개인 메시지를 통해 TouchMove를 보내 얻을 수 있습니다 .
좀 더 실용적인 소스 코드를 원하시면 코드를 스캔하거나 원문 을 읽으시면 됩니다 . 지불은 지식 습득 뿐만 아니라 저자의 지원과 인정 입니다 . 감사합니다!
저는 게임업계 8년 경력의 프로그래머 "Billion Dollar Programmer" 입니다. 게임 개발에 있어 제가 여러분에게 도움이 될 수 있기를 바라며, 여러분을 통해 제가 모두에게 도움이 될 수 있기를 바랍니다.
AD: 작가의 온라인 미니게임인 "Snake Handheld Classic", "Gravity Maze Ball", "Coloring Journey"를 직접 클릭하여 검색할 수 있습니다.
솔직히 좋아요 도 하고 보고 싶어요 ! 이 기사가 필요하다고 생각되는 다른 친구들과 공유해 주세요 . 감사해요!
추천 컬럼:
Honor of Kings가 스킬 범위 표시를 어떻게 구현하는지 알고 있나요?
8년 동안 Cocos 독립 게임 개발 프레임워크를 단계별로 구축한 경험