CocosCreator 고전 입문 프로젝트 의 flappybird
15291 단어 CocosCreatorcocosflappybird
CocosCreator v2.3.1
node.js v10.16.0
vscode 1.46.1
게임 엔진 개념
이미 작 성 된 코드 로 이해 할 수 있 습 니 다.바 텀 인터페이스 에 대한 사용 을 봉 인 했 고 게임 개발 의 핵심 기능 제공 자 입 니 다.
일반적으로 6 각 부분 으로 나 뉜 다.
프로젝트 구조
프로젝트 이름(프로젝트 폴 더)
게임 의 모든 로 컬 자원,스 크 립 트,제3자 라 이브 러 리 파일 을 배치 하 는 데 사 용 됩 니 다.
이 파일 의 구조 와 자원 형식 은 최종 게임 발표 에 필요 한 형식 으로 처 리 됩 니 다.
9500-local 로 컬 설정
├--packages 확장 플러그 인 폴 더--프로젝트 를 저장 하 는 사용자 정의 확장 플러그 인
├-settings 프로젝트 설정--------------------------------------------------------------발표 메뉴 의 패키지 이름,장면 과 플랫폼 선택 구축
├--temp 임시 폴 더-------CocosCreator 의 로 컬 임시 파일 캐 시 에 사용
『9492』-procject.json 검증 파일--------CocosCreator 프로젝트 의 합 법성 을 검증 하 는 표지 로 서
다음은 진정한 프로젝트 에 들 어 갑 니 다.
설정 코드 편집 환경
Visual Studio Code(이하 VS Code)는 마이크로소프트 가 새로 출시 한 경 량 화 크로스 플랫폼 IDE 로 윈도,맥,리 눅 스 플랫폼 을 지원 하 며 설치 와 설정 이 매우 간단 하 다.VS 코드 를 사용 하여 프로젝트 스 크 립 트 코드 를 관리 하고 편집 하면 문법 하 이 라이트,스마트 코드 알림 등 기능 을 쉽게 실현 할 수 있 습 니 다.
Cocos Creator API 어댑터 설치
이 동작 은 VS Code 전역 의 플러그 인 폴 더 에 Cocos Creator API 어댑터 플러그 인 을 설치 합 니 다.설치 에 성공 하면 콘 솔 에 녹색 알림 이 표 시 됩 니 다.
VS Code extension installed to ...이 플러그 인의 주요 기능 은 VS Code 편집 상태 에서 Cocos Creator 구성 요소 스 크 립 트 사용 습관 에 맞 는 문법 힌트 를 주입 하 는 것 입 니 다.프로젝트 에 스마트 알림 데이터 생 성
코드 작성 과정 에서 Cocos Creator 엔진 API 를 자동 으로 알려 주 려 면 메뉴 를 통 해 API 스마트 알림 데 이 터 를 생 성하 고 프로젝트 경로 에 자동 으로 넣 어야 합 니 다.
주 메뉴 를 선택 한 개발 자->VS 코드 워 크 플 로->VS 코드 스마트 알림 데 이 터 를 업데이트 합 니 다.이 작업 은 엔진 API 에 따라 생 성 된
creator.d.ts데이터 파일 을 프로젝트 루트 디 렉 터 리 에 복사 합 니 다(주의:assets디 렉 터 리 밖).작업 이 성공 하면 콘 솔 에 녹색 알림 을 표시 합 니 다.API data generated and copied to ...VS 코드 로 스 크 립 트 컴 파일 활성화외부 텍스트 편집기 로 프로젝트 스 크 립 트 를 수정 한 후,Cocos Creator 창 을 다시 활성화 해 야 스 크 립 트 컴 파일 을 실행 할 수 있 습 니 다.새 버 전의 Creator 에 미리 보기 서버 의 API 를 추 가 했 습 니 다.특정 주소 로 요청 을 보 내 편집기 의 컴 파일 을 활성화 할 수 있 습 니 다.
새 항목
1.빈 항목 새로 만 들 기
2.자원 관리자
그리고 자원 관리 에서 프로젝트 의 가장 중요 한 장면,스 크 립 트 파일,그리고 게임 에 필요 한 무늬(그림 자원)를 가 져 와 야 합 니 다.이 폴 더 는 기본 으로 만 든 것 이 아 닙 니 다.프로젝트 를 관리 할 수 있 도록 수 동 으로 만들어 야 합 니 다.설명 할 것 은 resources 는 CocosCreator(이하 cocos)의 특수 한 자원 폴 더 입 니 다.cc.loader.loadRes 를 통 해 동적 으로 불 러 와 야 하 는 모든 자원 은 resources 폴 더 와 하위 폴 더 에 두 어야 합 니 다.하나의 자원 이 resources 의 다른 자원 에 만 의존 되 고 cc.loader.loadRes 에 직접 호출 되 지 않 아 도 된다 면 resources 폴 더 에 넣 을 필요 가 없습니다.
3.장면
scenes 에서 신 설 장면,scenes C 를 오른쪽 클릭 하여 신 설 장면,Cocos Creator 에서 게임 장면(Scene)은 개발 시 게임 콘 텐 츠 를 조직 하 는 중심 이자 게이머 에 게 모든 게임 콘 텐 츠 를 보 여 주 는 매개체 이다.게임 장면 에는 일반적으로 다음 과 같은 내용 이 포 함 됩 니 다.
4.필드 편집기,등급 관리자,속성 검사 기
만 든 bird 필드 를 더 블 클릭 하면 cocos 는 필드 편집기 와 등급 관리자 에서 이 장면 을 엽 니 다.장면 을 열 면 등급 관리자 에 현재 장면 의 모든 노드 와 그들의 등급 관 계 를 표시 합 니 다.우리 가 새로 만 든 장면 에는
Canvas라 는 노드 만 있 습 니 다.Canvas캔버스 노드 나 렌 더 링 루트 노드 라 고 할 수 있 습 니 다.선택Canvas을 누 르 면 속성 검사 기 에서 그의 속성 을 볼 수 있 습 니 다.자원 패키지 에 있 는 texture 디 렉 터 리 에서 sky 배경 그림 을 Canvas 에 끌 어 다 놓 아 게임 배경 으로 합 니 다.Canvas 와 sky 의 size 크기 를 조정 합 니 다.sky 의 size 는 적어도 Canvas 보다 커 야 합 니 다.그렇지 않 으 면 당신 이 만 든 게임 에 큰 검 은 테두리 가 있 을 수 있 습 니 다.그 다음 에 비슷 한 방법 으로 bird 0(다른 두 장 은 간단 한 프레임 애니메이션 을 만 들 기 위해 작은 새 의 비행 을 모 의 하 는 것),pipe 1(하 관),pipe 2(상 관)를 Canvas 에 추가 했다.상하 관 로 는 한 조로 나 는 4 조로 모두 5 조로 복사 했다.스 크 립 트 를 통 해 배경 과 파 이 프 를 왼쪽으로 이동 시 켜 작은 새 가 계속 앞으로 비행 하 는 효 과 를 얻 을 수 있 습 니 다.
5.노드 바 인 딩
Canvas 의 요 소 는 모두 node 노드 형식 으로 관리 되 고 있 음 을 주의해 야 합 니 다.script 에서 새 스 크 립 트 파일 인 game.js 를 Canvas 에 끌 어 다 놓 거나 Canvas 에 직접 연결 합 니 다.필드 를 불 러 올 때 스 크 립 트 가 함께 불 러 오 는 지 확인 하 십시오.
6.라 이 프 사이클 리 셋
Cocos Creator 는 구성 요소 스 크 립 트 에 라 이 프 사이클 의 리 셋 함 수 를 제공 합 니 다.사용자 가 특정한 반전 함 수 를 정의 하면 Creator 는 특정한 시기 에 관련 스 크 립 트 를 자동 으로 실행 합 니 다.사용 자 는 수 동 으로 호출 할 필요 가 없습니다.
현재 사용자 에 게 제공 되 는 생명주기 리 셋 함 수 는 주로 다음 과 같다.
onLoad리 셋 은 노드 가 처음으로 활성화 되 었 을 때 촉발 된다.예 를 들 어 소재 하 는 장면 이 불 러 오 거나 소재 하 는 노드 가 활성화 되 었 을 때 촉발 된다.그리고onLoad항상 모든start방법 이 호출 되 기 전에 실 행 됩 니 다.보통 우 리 는onLoad단계 에서 관련 작업 을 초기 화 합 니 다.start리 셋 함 수 는 구성 요소 가 처음 활성화 되 기 전,즉 첫 번 째 실행update전에 실 행 됩 니 다.start자주 수정 해 야 할 데 이 터 를 초기 화 하 는 데 사 용 됩 니 다.이 데 이 터 는 update 에서 변 경 될 수 있 습 니 다.update리 셋 에 놓 여 있다.다음 네 개의 반전 함 수 는 이 항목 에 사용 되 지 않 습 니 다game.js
cc.Class({
extends: cc.Component,
properties: {
skyNode: cc.Node,//
pipeNode: cc.Node,//
birdNode: cc.Node,//
clickLayerNode: cc.Node,//
scoreNode: cc.Node,//
buttonNode: cc.Node,//
numberNode: cc.Node,// combo
overNode: cc.Node,//
spriteFrame: {// ，
default: [],// ， bird0、bird1、bird2 ， update（） ，
type: cc.SpriteFrame //
},
clip: {//
default: [],// ， 。 ，
type: cc.AudioClip //
}
},
onClickButton() {//
this.num = 0;// num 0
this.sign = true;//
this.buttonNode.active = false;//
this.overNode.active = false;// “ ” overNode
this.birdNode.y = 50;//
this.power = 0;// 0，
this.scoreNode.getComponent(cc.Label).string = "" + this.num;// string 0,this.scoreNode.getComponent(cc.Label).string
let list = this.pipeNode.children;// list （.children）
for (let i = 0; i < list.length; i++) {// ， i list
let child = list[i];//let child list[i]
child.x += 1000;// x 1000
}
cc.audioEngine.playMusic(this.clip[0], true);
},
onClickBagButton(event, data) { //
// cc.log(event, data);
if (data == "bag") {// event CustomEventData
this.showBag(); //
}
},
showBag() { //
if (this.bagPrefab == null) { //
setTimeout(() => { // 0.5s bag
this.showBag();
}, 500);
return;
}
//
let node = null; // node
if(this.isOpen){ // ，this.isOpen false
node = cc.find("Canvas/panelBag");
node.active = true;
}
else{
node = cc.instantiate(this.bagPrefab); // node
cc.find("Canvas").addChild(node); // node Canvas
}
node.opacity = 0;// node 0；
node.scale = 0.1;// node 0.1；
let ac = cc.spawn( // ac
cc.fadeIn(0.5), //0.5s
cc.scaleTo(0.5,1),//0.5s 1
);
node.runAction(ac); // runAction ac
this.isOpen = true;// true
},
gameOver() { //
this.sign = false;// ， false
this.checkStill = false;// false
this.buttonNode.active = true;// ， this.buttonNode
this.overNode.active = true;// ， “ ” overNode
cc.audioEngine.stopMusic(this.clip[0]); //
},
addScore() { //
this.numberNode.opacity = 255;// numberNode .opacity （ ） 255
this.num++;// num ++
this.scoreNode.getComponent(cc.Label).string = "" + this.num;// string = “” num
this.numberNode.y = this.birdNode.y;// combo numberNode y y
this.numberNode.runAction(// combo numberNode runAction,spawn,fadeOut,moveBy
cc.spawn(
cc.fadeOut(0.5),
cc.moveBy(0.5, cc.v2(0, 50))
)
)
cc.audioEngine.playEffect(this.clip[2]); //
},
// LIFE-CYCLE CALLBACKS:
onLoad() {
// cc.director.getCollisionManager().enabled = true; // cc.director.getCollisionManager().
this.bagPrefab = null;// bagPrefab
// cc.loader.loadRes( ， ， );error ， ，data
cc.loader.loadRes("prefab/panelBag", cc.Prefab, (error, data) => {
if (error) {//
cc.log(error);//
return;
}
this.bagPrefab = data; // this.bafPrefab
});
},
start() {
this.isOpen = false;// false；
this.num = 0;// num 0， ，
this.scoreNode.getComponent(cc.Label).string = "" + 0;// 0
this.speed = 5;// 5
this.power = 0;// 0
this.checkStill = true;// true
this.curFrame = 0;// skinnode
this.sign = false;// ， false
this.checkState = false;// false- true-
this.up = 0;//
this.clickLayerNode.on(cc.Node.EventType.TOUCH_START, () => {// .on(cc.Node.EventType . ， () =>)
this.power = 4;// 0 4，
this.up++;
cc.audioEngine.playEffect(this.clip[1]);
})
cc.audioEngine.playMusic(this.clip[0], true);
},
update(dt) {
if (!this.sign) {//
return;
}
cc.log(2);
this.skyNode.x -= this.speed;// x
this.birdNode.y += this.power + this.up;// y
this.power -= 0.2;// power
this.birdNode.angle = this.speed * this.power;//
if (this.skyNode.x < -1200) {// 1200 ， skyNode.x =0（ ）
this.skyNode.x = 0;
}
//node.children
let list = this.pipeNode.children;// list （.children）
let checkNode = null;// null
for (let i = 0; i < list.length; i++) {//
let child = list[i];//let child list
child.x -= this.speed;// x-=this.speed
// cc.log(child);
if (child.x < -600) {
child.x = 600;// child < -600 child 600
child.y = (Math.random() - 0.5) * 200;// Math.random()（ 0-1 ） ， 200
}
let dis = Math.abs(this.birdNode.x - child.x)//let dis x （Math.abs ）
let width = (this.birdNode.width + child.children[0].width) / 2;// width
if (dis < width) {// dis <= width， child
checkNode = child;
}
}
if(this.birdNode.y + this.birdNode.height / 2 > cc.winSize.height / 2 //
|| this.birdNode.y - this.birdNode.height / 2 < -cc.winSize.height / 2){
this.gameOver();//
}
if(checkNode) {// checkNode，
this.checkState = true;// ， checkState true
// （.y + height/2） (checkNode.y+100)
if (this.birdNode.y + this.birdNode.height / 2 > checkNode.y + 100
|| this.birdNode.y - this.birdNode.height / 2 < checkNode.y) {
this.gameOver();//
}
}else{
if (this.checkState && this.checkStill) {// true（&&）
this.addScore();//
}
this.checkStill = true; // true
this.checkState = false;// false
this.up = 0;
}
this.curFrame++;//
if (this.curFrame > 2) {// 2， 0；
this.curFrame = 0;
}
if (this.birdNode.y) {// 0
// Sprite spriteFrame
this.birdNode.getComponent(cc.Sprite).spriteFrame = this.spriteFrame[this.curFrame];
}
}
})작은 새,강관 이 부 딪 혔 는 지 에 대한 검 사 는 수학 적 계산 을 통 해 이 루어 졌 다.그러나 제 프로젝트 파일 에는 cocos 충돌 구성 요 소 를 사용 하 는 버 전이 남아 있 습 니 다.각 pipe 노드,entrance 노드 에 있 는 BoxCollider 구성 요소 와 bird.js 로 구체 적 으로 표 현 됩 니 다.또한 제 가 배 운 가방 도 있 습 니 다.주로 프 리 셋(cc.prefab)노드 를 통 해 가방 창 과 창 에 아 이 템 그림(sprite)을 동적 으로 불 러 옵 니 다.본인 도 학습 단계 에 있 습 니 다.문제 가 있 으 면 평론 구역 의 교 류 를 환영 합 니 다.필 자 는 후속 적 으로 다른 항목 을 공유 하려 고 합 니 다!단일 컴퓨터 와 랜 온라인 버 전의 비교 항목 을 포함한다.자원 관리자,네트워크 통신 관리자,신호 슬롯 등 최적화 전략 도 사용 할 수 있 습 니 다.부족 한 점 은 여러분 들 이 가볍게 뿌리 시기 바 랍 니 다.
이상 은 바로 CocosCreator 고전 입문 프로젝트 의 flappybird 에 대한 상세 한 내용 입 니 다.더 많은 CocosCreator 제작 flappybird 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 해 주 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
CocosCreator v2.1.1에서 셰이더 사용일본어 문서가 압도적으로 적다! 참고서가 압도적으로 적다! CocosCreator를 만지고 있는 분이라면 이해 받을 수 있다고 생각합니다만, 셰이더에 대해서도 v2.0에서 대폭적인 변경이 걸렸다고 합니다. 그 때의 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
