CocosCreator 시작 게임 프로젝트 재 구성

프로젝트 문서:http://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html
최근 심혈 을 기울 여 위 챗 게임 을 쓰 고 관련 자 료 를 찾 아 본 뒤 코 코스 프레임 워 크 부터 시작 하려 고 한다.아래 분석 할 게임 항목 의 모든 자원 은 cocos 에서 공식 적 으로 제공 합 니 다.물론 공식 문 서 는 충분히 상세 합 니 다. 저 는 더 많은 재 구성 을 하고 게임 내용 을 적당 하 게 확장 할 뿐 입 니 다.

게임 데모
http://fbdemos.leanapp.cn/star-catcher/

프로젝트 구조
이 게임 항목 을 보면 cocos 구조 게임 의 핵심 은 바로 등급 관리자 (node tree) 에 있다.모든 편집 작업 은 게임 을 구성 하기 위 한 node tree 입 니 다.자원 관리자 와 속성 검사 기 등 인터페이스 편집 작업 은 공식 프로젝트 문 서 를 조회 할 수 있 고 본 고 는 더 이상 군말 하지 않 습 니 다.현재 항목 의 node tree 로 말 하기:

Canvas 는 뿌리 로 네 개의 결점 을 가지 고 있다.그 중에서 결점 Player 와 Score 는 게임 의 동적 요소 로 사용자 스 크 립 트 구성 요 소 를 추가 했다.
사용자 스 크 립 트 구성 요소
API 문서:http://docs.cocos.com/creator/api/zh/
기본 구조

cc.Class({
    //inheritance
    extends: cc.Component,   

    properties: {        
        //...
        maxStarDuration: 0,
        starPrefab: {
            default: null,
            type: cc.Prefab
        },
        //...
    },

    // use this for initialization
    onLoad: function () {
    },

    // called every frame, uncomment this function to activate update callback
    update: function (dt) {
    },
});

properties
위 코드 의 properties 에 서 는 두 가지 속성 성명 방식 을 예 시 했 습 니 다.하 나 는 default 를 간단하게 정의 하 는 것 이 고, 다른 하 나 는 완전한 성명 입 니 다. default, type, visible, display name 등 속성 을 설정 할 수 있 습 니 다.모든 구성 요소 속성 은 이 구성 요 소 를 연결 하 는 노드 의 속성 검사 기 패 널 에 매 핑 됩 니 다. 개발 자 는 편집기 에서 속성 을 직접 편집 할 수 있어 서 매우 편리 합 니 다.

LIFE-CYCLE CALLBACKS

onLoad (): 구성 요소 가 있 는 노드 를 초기 화 할 때 (노드 가 노드 트 리 에 추 가 될 때) 실행

start (): 이 구성 요소 의 첫 번 째 update 전에 실 행 됩 니 다. 모든 구성 요소 의 onLoad 초기 화 완료 후 실행 해 야 하 는 논리

에 사 용 됩 니 다.

update (dt): 구성 요소 의 구성원 방법 으로 구성 요소 의 enabled 속성 이 true 일 때 코드 는 프레임 마다 실 행 됩 니 다.

게임 기능 구현
주인공 점프 지속

    setJumpAction: function () {
        //     
        var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        //   
        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        //     
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
    },
    onLoad: function () {
        //        
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);
    },

function
params
addition
cc.moveBy
(duration, Vec2)
지 정 된 시간 내 에 지 정 된 좌표 로 이동
cc.p
(x, y)
x, y 를 지정 하여 좌 표를 만 듭 니 다.
cc.sequence
(FiniteTimeAction, FiniteTimeAction)
순차 실행 동작
cc.repeatForever
(FiniteTimeAction)
영원히 한 동작 을 반복 하 다
this.node.runAction
(Action)
현재 노드 에 동작 추가
AD 주인공 이동 제어

    setInputControl: function () {
        var self = this;
        //         
        //       ，               ，          
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function (event){
            switch(event.keyCode) {
                case cc.KEY.a:
                    self.accLeft = true;
                    break;
                case cc.KEY.d:
                    self.accRight = true;
                    break;
            }
        });

        //      ，         
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, function (event){
            switch(event.keyCode) {
                case cc.KEY.a:
                    self.accLeft = false;
                    break;
                case cc.KEY.d:
                    self.accRight = false;
                    break;
            }
        });
    },

function
params
addition
cc.systemEvent.on
(type, callback)
시스템 감청 이벤트 추가
키보드 제 어 력 의 방향 에 따라 각각 accLeft, accRight 로 표 지 를 한다.


    onLoad: function () {
        //        
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);

        //        
        this.accLeft = false;
        this.accRight = false;
        //           
        this.xSpeed = 0;

        //          
        this.setInputControl();
    },


    update: function (dt) {
        //                
        if (this.accLeft) {
            this.xSpeed -= this.accel * dt;
        } else if (this.accRight) {
            this.xSpeed += this.accel * dt;
        }
        //               
        if ( Math.abs(this.xSpeed) > this.maxMoveSpeed ) {
            // if speed reach limit, use max speed with current direction
            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
        } 

        //              
        this.node.x += this.xSpeed * dt;
    },

힘 의 방향 에 따라 실시 간 으로 속 도 를 바 꾸 어 this. node. x 를 실시 간 으로 업데이트 합 니 다.
주인공 점프 사 운 드 추가


    properties: {
        //...       
        //       
        jumpAudio: {
            default: null,
            url: cc.AudioClip
        },
    },
    setJumpAction: function () {
        //     
        var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        //   
        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        //         ，                   
        var callback = cc.callFunc(this.playJumpSound, this);
        //     ，                    
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));
    },

    playJumpSound: function () {
        //           
        cc.audioEngine.playEffect(this.jumpAudio, false);
    },

function
params
addition
cc.callFunc
(callback, instance)
리 셋 되 돌리 기 ActionInstant
cc.sequence
(action, …, action)
순차 실행 동작
cc.audioEngine.playEffect
(sound, boolean)
소리 재생, boolean 순환 여부 지정
간헐 랜 덤 위치 별 표시

Game.js
    properties: {
            //              
        starPrefab: {
            default: null,
            type: cc.Prefab
        },
        //               
        maxStarDuration: 0,
        minStarDuration: 0,
        //     ，           
        ground: {
            default: null,
            type: cc.Node
        },
    }

중복 생 성 이 필요 한 node 에 대해 서 는 Pretab (미리 설정) 자원 으로 저장 해 야 합 니 다.
Game.js

    spawnNewStar: function() {
        //                   
        var newStar = cc.instantiate(this.starPrefab);
        //           Canvas     
        this.node.addChild(newStar);
        //            
        newStar.setPosition(this.getNewStarPosition());

        //   Game            
        newStar.getComponent('Star').game = this; 

        //      ，              
        this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration);
        this.timer = 0;
    },

function
params
addition
cc.instantiate
(Pretab | Node | Obj)
지정 한 임의의 유형의 대상 을 복제 하거나 Prefab 에서 새 노드 를 예화 합 니 다.
this.node.addChild
(node)
현재 노드 에 하위 노드 추가
newStar.setPosition
(Vec2)
별 에 무 작위 위 치 를 지정 합 니 다.
newStar.getComponent
(scriptName)
노드 에 지정 한 형식의 구성 요소 의 인 스 턴 스 를 가 져 옵 니 다.
Game.js


    getNewStarPosition: function () {
        var randX = 0;
        //               ，          y   
        var randY = this.groundY + cc.random0To1() * this.player.getComponent('Player').jumpHeight + 50;
        //       ，         x   
        var maxX = this.node.width/2;
        randX = cc.randomMinus1To1() * maxX;
        //       
        return cc.p(randX, randY);
    },
    onLoad: function () {
        //        y    
        this.groundY = this.ground.y + this.ground.height/2;
        //       
        this.timer = 0;
        this.starDuration = 0;
        //         
        this.spawnNewStar();
        //      
        this.score = 0;
    },

function
params
addition
cc.random0To1
\
무 작위 로 0 ~ 1 의 부동 소수점 을 되 돌려 줍 니 다.
cc.randomMinus1To1
\
무 작위 반환 - 1 ~ 1 의 부동 소수점
this.player.getComponent
(scriptName)
하위 노드 player 노드 가 지정 한 구성 요소 인 스 턴 스 가 져 오기
주인공 이 별 을 따다
Star.js

    properties: {
        //                  ，      
        pickRadius: 0,
        //    Game      
        game: {
            default: null,
            serializable: false    //    （  ）   
        }
    },
    getPlayerDistance: function () {
        //    player         
        var playerPos = this.game.player.getPosition();
        //               
        var dist = cc.pDistance(this.node.position, playerPos);
        return dist;
    },

    onPicked: function() {
        //        ，   Game       ，        
        this.game.spawnNewStar();
        //    Game        
        this.game.gainScore();
        //           
        this.node.destroy();
    },

    // update (dt) {},
    update: function (dt) {
        //                     
        if (this.getPlayerDistance() < this.pickRadius) {
            //       
            this.onPicked();
            return;
        }

        //    Game                
        var opacityRatio = 1 - this.game.timer/this.game.starDuration;
        var minOpacity = 50;
        this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
    },

function
params
addition
this.game.player.getPosition
\
결점 game. player 의 위 치 를 되 돌려 줍 니 다.
cc.pDistance
(position, position)
두 점 사이 의 직선 거 리 를 되돌아가다
this.node.destroy
\
현재 결산 지점 을 소각 하 다.
게임 종료 창 전환
참고 자료:http://www.cocoachina.com/bbs/3g/read.php?tid=461222
게임 이 끝 난 후 scene 을 전환 하고 이전 scene 의 점 수 를 새로운 scene 에 표시 합 니 다.이것 은 scene 간 의 데이터 전달 과 관련 된 작은 난점 이다.방식 이 많 습 니 다. 다음은 상주 결점 을 설치 하 는 방식 으로 이 루어 집 니 다.이 밖 에 재 게임 단 추 를 설정 하고 원래 의 장면 으로 전환 하려 면 클릭 해 야 한다.scene 전환 을 할 때 앞의 scene 의 모든 결점 이 소각 되 고 상주 결점 이란 scene 전환 에 따라 소각 되 지 않 는 결점 이다.주의해 야 할 것 은 상주 결점 은 반드시 scene 의 canvas 와 평 급 결점 이 있어 야 한 다 는 것 이다.그래서 여기 서 Score 결점 을 한 층 올 립 니 다.

scence 전환:

     cc.director.loadScene('gameover', function () {});

Score 결점 이 소각 되 지 않 은 것 을 볼 수 있 습 니 다.

새로운 scene 에서 상주 노드 를 가 져 옵 니 다.우선 귀속 결점 인 "소환" 상주 결점 으로 결점 을 선택해 야 합 니 다.

    onLoad: function () {
        var score = cc.director.getScene().getChildByName('Score');
        this.node.getChildByName('Hint').getComponent(cc.Label).string = score.getComponent(cc.Label).string;
        score.destroy();
    },

루트 노드 를 직접 선택 하고 스 크 립 트 구성 요 소 를 추가 하여 상주 노드 를 가 져 옵 니 다.이곳 은 상주 결점 을 점 수 를 전달 하 는 운반 체 로 만 들 었 기 때문에 값 을 전달 한 후에 소각 되 었 다.

다음은 버튼 을 누 르 면 장면 으로 돌아 가 는 기능 을 실현 합 니 다.단추 의 클릭 이 벤트 는 실제 속성 패 널 을 통 해 귀속 을 실현 할 수 있 습 니 다. 그 전에 단추 의 사용자 구성 요소 스 크 립 트 를 작성 하고 그 안에 클릭 이 벤트 를 작성 해 야 합 니 다.

    replay: function () {
        cc.director.loadScene('game');
    },

판 넬 의 Click Event 에서 방법 에 연결 하면 됩 니 다.

CocosCreator 시작 게임 프로젝트 재 구성

좋은 웹페이지 즐겨찾기