cocos2d-js의 대상

9471 단어

1. Scene 장면


Scene 만들기
var BallScene = cc.Scene.extend({ // cc.Scene 
    onEnter:function () {   //  onEnter 
        this._super();      // 
        var layer = new SimpleActionLayer();    //  layer
        this.addChild(layer);        //  layer scene 
    }
});

2. 노드 Node


노드는cocos2d세계를 구성하는 기본 단위 노드로 기본적인 조작과 기능을 봉인한다. 예를 들어 축소, 좌표변화, 축소변화, 투명도, 가시성 등이다.다른 디스플레이 클래스는 모두 노드를 계승한다. 예를 들어 층(layer), 정령(Sptite)

3. 레이어 레이어

  • 층별로 모든 물체를 관리하고 새 층var layer = new cc.Layer()을 만들고 층을 장면에 추가scene.addChild(layer)하고 서브노드를 층에 추가layer.addChild(child)
  • 층을 다양한 기능의 패널로 확장
  • LayerColor 단색층은 scene에 단색층을 첨가
  • var layerColor = new cc.LayerColor(cc.color(255,255,255),100,100)
    this.addChild(layerColor)
    
  • LayerGradient 점변층은 scene에 점변층을 넣는다
  • var layer = new cc.LayerGradient(cc.color(255,0,0),cc.color(0,0,255))
    this.addChild(layer)
    
  • 레이어 사용자 정의
  • var HelloWorldLayer = cc.Layer.extend({
        sprite:null,
        ctor:function () {
            this._super();
            
            var bg = new cc.Sprite(res.HelloWorld_png);
            var size = cc.director.getWinSize();
            bg.x = size.width / 2;
            bg.y = size.height / 2 ;
            this.addChild(bg, 1);
    
            return true;
        }
    });
    

    Hello World Layer가 cc를 물려받았어요.Layer, 많은 것을 만들었어요. 이 층을 봉한 후에 다른 Scene에서 같은 층을 불러오면 간단하게 쓸 수 있어요var layer = new HelloWorldLayer():this.addChild(layer)

    4. 엘프 스피릿


    Sprite var ball = new cc.Sprite("res/item_2.png"); 새 Sprite를 만들 때, 구조 함수에서 그림을 전송하는 경로를 만들면 됩니다.Sprite 좌표를 추가할 수 있습니다.
    var size = cc.director.getWinSize();
    ball.x=size.width/2;
    ball.y=size.height/2;
    

    그림을 불러오려면 자원 그룹, 즉 Resource에 자원을 보내야 합니다.js
    var res = {
        HelloWorld_png : "res/HelloWorld.png",
        bg : "res/bg.jpg",
        item2 : "res/item_2.png",
        item3 : "res/item_3.png"
    };
    
    var g_resources = [];
    for (var i in res) {
        g_resources.push(res[i]);
    }
    

    5. director


    director는 장면의 전환cc.director.runScene(scene)을 담당하고 서로 다른 방식의 장면 전환Slide 슬라이딩 전환cc.director.runScene(new cc.TransitionSlideInT(2,new SecondScene()))runscene은 이전 장면의 모든 내용을 삭제하고 이전 장면으로 돌아갈 때 모든 내용을 다시 세웁니다.자주 전환하면 pushSence와 popSence를 사용할 수 있습니다
  • director 제공 가능
  • getWinSize 창 크기
  • getVisibleSize 창 실제 크기
  • getScheduler 글로벌 타이머
  • pause/resume 일시 정지, 복구
  • 6. 동작


    기본 동작
            var action = cc.moveTo(2,cc.p(size.width,size.height/2)); //  
            var action = cc.moveBy(1,cc.p(size.width,100));
            var action = cc.scaleTo(1,2,3); //    ,   , 
            var action = cc.scaleTo(2,-2,2);
            var action = cc.fadeTo(2,0); //  , 
            var action = cc.fadeOut(2);  //  
            ball.opacity = 0;// 
            var action = cc.fadeIn(2); // 
            var action = cc.blink(2,10); //2 10 
            var action = cc.tintTo(2,100,0,0); //  、R、G、B
            var action1 = cc.tintTo(0.3,100,0,0);
            var action2 = cc.tintTo(0.3,255,255,255);
            ball.runAction(cc.sequence(action1,action2));  //  
            ball.runAction(action);
    
  • dalayTime - 일정 시간 지연
  • rotateTo/roTateBy - 노드를 회전
  • skewTo/skewBy - 노드에 기울기 변화
  • jumpTo/jumpBy - 노드 점프 이동
  • BezierTo/bezierBy - 노드를 베셀 곡선을 따라 움직이게 하기
  • 7. 조합 동작

  • 순서 동작 sequence
  •         var action1 = cc.moveTo(2,cc.p(size.width/2,size.height/2)); // 
            var action2 = cc.scaleTo(1,2,2); // 
            var sequence1 = cc.sequence(action1,action2); // 1 2
            var action3 = cc.scaleTo(1,1,1); //  
            var sequence2 = cc.sequence(sequence1,action3); //  
            ball.runAction(sequence2);
    

    마지막 문장은 ball.runAction(action1,action2,action3);효과와 같다
  • 반복동작repeat
  •         var action1 = cc.scaleTo(1,2,2);
            var action2 = cc.scaleTo(1,1,1);
            var sequence = cc.sequence(action1,action2); // 
            var repeat = cc.repeat(sequence,5); //  5 
            ball.runAction(repeat);
    
  • 무한 반복 RepeatForevercc.repeatForever(action) 함수는 새로운 동작을 되돌려줍니다. 매개 변수만 받아들입니다.또한 동작 자체에도 리프트 포에버 방법이 있다.repeatForever의 효과는 action.repeatForever()
  • 와 같습니다.
            var action1 = cc.scaleTo(1,2,2);
            var action2 = cc.scaleTo(1,1,1);
            var sequence = cc.sequence(action1,action2); // 
            var repeat = cc.repeatForever(sequence); //  
            ball.runAction(repeat);
    
  • spawn
  • 동시 실행
            var action1 = cc.moveTo(2,cc.p(size.width/2,size.height/2)); // 
            var action2 = cc.scaleTo(2,2,2); // 
            var spawn = cc.spawn(action1,action2); // 
            ball.runAction(spawn);
    
  • 역방향reverseTime/reverse
  • reverseTime(좋지 않음)
            var action1 = cc.moveTo(2,cc.p(size.width/2,size.height/2)); // 
            var reverseTime = cc.reverseTime(action1);
            ball.runAction(reverseTime);
    

    reverse(동작에 의해 호출되는 xxxBy만 지원)
            var action = cc.moveBy(2,cc.p(size.width/2,0));
            var reverse = action.reverse();
            var sequence = cc.sequence(action,reverse);
            ball.runAction(sequence);
    

    8.easing

    action.easing(easeObject) easeObject는 일종의 느린 방식의 정보를 저장하는 Object이다
            var action=cc.moveBy(2,0,-(size.height-ball.height/2)); //  , 
            action.easing(cc.easeIn(2)); //  
            var back = action.clone().reverse(); //  
            back.easing(cc.easeBounceIn()); // 
            ball.runAction(cc.sequence(action,back)); // 
    

    기타 유형의 부드럽게
            var actionX=cc.moveBy(2,size.width,0); //  , 
            var action=cc.moveBy(2,0,-size.height); //  
            action.easing(cc.easeQuadraticActionIn()); //  
            // action.easing(cc.easeCubicActionOut()); //  
            // action.easing(cc.easeBackOut()); //  
            // action.easing(cc.easeElasticIn()); //  
            // action.easing(cc.easeBounceInOut()); //  
            // action.easing(cc.easeCircleActionInOut()); // ???
            // action.easing(cc.easeExponentialInOut()); // 
            // action.easing(cc.easeQuinticActionIn()); // 
            // action.easing(cc.easeSineInOut()); // 
            ball.runAction(cc.spawn(action,actionX)); // 
    

    9. 제어 동작

  • 정지 동작
  • node.stopAction(action);
    node.stopActionByTag(tag);
    node.stopAllAction(action);
    
    var ControlActionLayer = cc.Layer.extend({
        ctor:function () {
            this._super();
    
            var size = cc.director.getWinSize();
            var ball = new cc.Sprite("res/item_2.png");
            ball.x = 0;
            ball.y = size.height/2;
            this.addChild(ball,1)
    
            var action = cc.moveBy(3,cc.p(size.width/2,0));
            ball.runAction(action);
    
            setTimeout(function () {
                ball.stopAction(action);   // 
            },2000);
    
            return true;
        }
    });
    
  • 일시정지/복구 동작
  • var ControlActionLayer = cc.Layer.extend({
        ctor:function () {
            this._super();
    
            var size = cc.director.getWinSize();
            var ball = new cc.Sprite("res/item_2.png");
            ball.x = 0;
            ball.y = size.height/2;
            this.addChild(ball,1)
    
            var action = cc.moveBy(3,cc.p(size.width/2,0));
            ball.runAction(action);
    
            setTimeout(function () {
                ball.pause();   //  
            },2000);
    
            setTimeout(function () {
                ball.resume();   //  
            },3000);
    
            return true;
        }
    });
    

    10. 감청 동작


    CallFunc 동작과 sequence 감청 동작cc.callFunc(function , target, extra parameters...)callFunc를 사용하여 1개 이상의 매개 변수를 받아들인다. 첫 번째 매개 변수는 함수이고, 두 번째 매개 변수는 이 함수가 마지막으로 호출되었을 때의 목표 대상이다. 원성 JS의 apply(target,function)와 유사하며, 세 번째 매개 변수는 다음에 추가로 추가된 데이터로 function을 호출할 때 전달된다.
    var ControlActionLayer = cc.Layer.extend({
        ctor:function () {
            this._super();
    
            var size = cc.director.getWinSize();
            var ball = new cc.Sprite("res/item_2.png");
            ball.x = 0;
            ball.y = size.height/2;
            this.addChild(ball,1)
    
            var action = cc.moveBy(1,cc.p(size.width/2,0));
            var callback = cc.callFunc(this.callback,this,"message");
            var sequence = cc.sequence(action,callback);
            ball.runAction(sequence);
    
            return true;
        },
    
        callback:function(nodeExecutingAction,data) {
    //                                         callFunc 
            console.log(nodeExecutingAction instanceof cc.Sprite,data);
        }
    });
    

    여러 동작을 연결하면 각 동작 사이에 감청 함수를 설정할 수 있다cc.sequence(action1,cc.callFunc(function1),action2,cc.callFunc(function2),action3);

    11. 사운드 재생

  • 배경음악
  • cc.audioEngine.playMusic("res/goodtime.mp3",true);  //  , 
    cc.audioEngine.stopMusic(); //  
    
  • 사운드
  • var effect = cc.audioEngine.playEffect("res/goodtime.mp3",false);
    cc.audioEngine.stopEffect(effect); // 
    cc.audioEngine.stopAllEffect(); //  
    
  • 음량
  • cc.audioEngine.setEffectsVolume(0);
    cc.audioEngine.setMusicVolume(0);
    

    배경 음악과 음향 효과의 음량을 설정합니다. 범위 0-1,0은 정음을 나타냅니다.
    참고자료Cocos2d-JS개발여행정고강저전자공업출판사

    좋은 웹페이지 즐겨찾기