gurigraphics / cocos2d-js-quick-tutorials Goto Github PK

View Code? Open in Web Editor NEW

20.0 20.0 17.0 714 KB

Cocos2D-JS | Quick Tutorials

JavaScript 99.98% HTML 0.02% CSS 0.01%

cocos2d-js-quick-tutorials's People

Contributors

Stargazers

Watchers

Forkers

fiumehoo hongseok5 p1fon olyashypko kry-dev thangns204 rossi7962 zzingzonzon netcanis nguyenlamthoi1 pavljukbogdan hoangman1108 marechalbati viacheslav-petrovskyi nausixkiz playdogsoft bryanchua5327

cocos2d-js-quick-tutorials's Issues

00 | Cocos2D-JS | Game Start

Welcome to Cocos2D-JS Quick Tutorials!

Start

Download the project files -> link
Export the zip folder.

project.json

In this file we import the *.js files

{
    "debugMode"     : 1,
    "frameRate"     : 60,
    "id"            : "gameCanvas",
    "renderMode"    : 2,
    "jsList"        : [   
        "src/Game.vars.js",
        "src/Game.resources.js",
        "src/Game.layers.js",
        "src/Game.scenes.js"
    ]
}

renderMode: 0 = auto
renderMode: 1 = canvas
renderMode: 2 = webGL

Game.resources.js

In this file we define the game resources.

Game.res = { 
    HelloWorld_png : "HelloWorld.png" 
};
	
Game.g_resources = []; 
    
for ( var i in Game.res ) {
    Game.g_resources.push( Game.res[i] ); 
}

Game.vars.js

In this file we declare the game variables

    Game = {}; 
    Game.scenes = []; 
    Game.scenes[1] = {}; 
    Game.layers = []; 
    Game.layers[1] = {}

Game.scenes.js

In this file we define the game scenes

    Game.scenes[1].extend = cc.Scene.extend({ 
    	onEnter:function () { 
    		this._super(); 
    		var layer = new Game.layers[1].extend(); 
    		layer.init(); 
    		this.addChild( layer ); 
    	} 
    });

Game.layers.js

In this file we define the game layers

    Game.layers[1].extend = cc.Layer.extend({ 
    	init: function () { 
    		this._super(); 
    		var game = this; 
    		Game.layers[1].start( game ); 
    	} 
    }); 
    Game.layers[1].start = function( game ){ 
    	var size = cc.director.getWinSize(); 
    	var label = cc.LabelTTF.create("Hello World", "Arial", 40);
    	label.setPosition(size.width / 2, size.height / 2);
    	game.addChild(label, 1); 
    };

Game.js

This file run the game and start the game scene

cc.game.onStart = function(){
    cc.LoaderScene.preload( Game.g_resources, function () {
        cc.director.runScene(new Game.scenes[1].extend());
    }, this);  
};  
  
window.onload = function(){  
	cc.game.run("gameCanvas");   
}

This project will display Hello World

08 | Cocos2D-JS | How to extend the attributes of a sprite

08 | How to extend the attributes of a sprite

Game.layers.js

Edit the Game.layers.js

    Game.layers[1].extend = cc.Layer.extend({
        init: function () {      
            this._super(); 
            var game = this;
            Game.layers[1].start( game );  
        } 
    });    
     
    Game.layers[1].start = function( game ){
     
        var size = cc.director.getWinSize(); 
    
        layer = cc.LayerColor.create(new cc.Color(0,0,0,250), 960, 640); // R+G+B+Opacity+X+Y
        game.addChild(layer); // add layer to game
    
        sprite = new sprite2();     
        sprite.setPosition(50,50);
        sprite.setTag(1);
        layer.addChild(sprite,0);   
    
    }; 
    
    var sprite2 = cc.Sprite.extend({
        ctor:function() {
            this._super();
            this.initWithFile("HelloWorld.png");
            this.setScale(0.5);
        }
    });

09 | Cocos2D-JS | How to use touch event

09 | How to use touch event

Game.layers.js

Edit the Game.layers.js

Add to sprite that has been extended the listener.

In a complex project the ideal is to create another file Game.listeners.js to isolate the events in a separate file. And then import into projects.json

    var sprite2 = cc.Sprite.extend({
        ctor:function() {
            this._super();
            this.initWithFile("HelloWorld.png");
            this.setScale(0.5);
            cc.eventManager.addListener(listener.clone(), this);
        }
    });
    
    var listener = cc.EventListener.create({
         event: cc.EventListener.TOUCH_ONE_BY_ONE, swallowTouches: true,
         onTouchBegan: function (touch, event) {
             sprite2 = event.getCurrentTarget();
             var location = sprite2.convertToNodeSpace(touch.getLocation());
             var targetSize = sprite2.getContentSize();
             var targetRectangle = cc.rect(0, 0, targetSize.width, targetSize.height);
             if (cc.rectContainsPoint(targetRectangle, location)) {
     
                layer.removeChild(sprite2);      
                var tag = sprite2.getTag();     
     
             }
         }
    });

The same listener can be added for different sprites.
To know which sprite was clicked use the tags:
var tag = sprite2.getTag ();

Events:

onTouchBegan: on press
onTouchEnded: on release
onTouchMoved: on press and move
onTouchCancelled: on canceling

04 | Cocos2D-JS | How to center a sprite in Screen

04 | How to center a sprite in Screen

Game.layers.js

In the Game.layers.js
a) Take the dimensions of the canvas
b) Define the positions x and y
c) Define the value of the anchor

    Game.layers[1].extend = cc.Layer.extend({ 
	    init: function () { 
		    this._super(); 
		    var game = this; 
		    Game.layers[1].start( game ); 
	    } 
    }); 
    
    Game.layers[1].start = function( game ){ 
	    var size = cc.director.getWinSize(); //a  
	    var sprite = new cc.Sprite ( "HelloWorld.png" );
	    sprite.attr({ 
		    x: size.width / 2, //b
		    y: size.height / 2, 
		    anchorX: 0.5, //c
		    anchorY: 0.5 
	    }); 
	    game.addChild(sprite); 
    };

14 | Cocos2D-JS | How import a tilemap

14 | How import a tilemap

Game.resources.js

Import the tileset.png and map.tmx

Game.res = {
    HelloWorld_png : "res/HelloWorld.png",
    map_png : "res/tileset.png",
    map_tmx : "res/map.tmx"
};

Game.g_resources = []; 

for ( var i in Game.res ) {
    Game.g_resources.push( Game.res[i] );
}

Game.layers.js

Create a layer and add the tilemap to layer

Game.layers[1].extend = cc.Layer.extend({
    init: function () {      
        this._super(); 
        var game = this;
        Game.layers[1].start( game );  
    }
});    
 
Game.layers[1].start = function( game ){

    layer = cc.LayerColor.create(new cc.Color(0,0,0,250), 960, 640); // R+G+B+Opacity+X+Y
    game.addChild(layer); // add layer to game

    var map = new cc.TMXTiledMap(Game.res.map_tmx);
    layer.addChild(map, 0); 
};

Some tilemap methods

// console.log( map.getMapSize().width ) // 40
// console.log( map.getMapSize().height ) // 30

// console.log( map.getTileSize().width ) // 16
// console.log( map.getTileSize().height )// 16

// console.log( map.getContentSize().width ) // 640
// console.log( map.getContentSize().height ) // 480

// console.log( map.getTileSize() ) // {width: 16, height: 16}
// console.log( map.getMapSize() ) // {width: 30, height: 40}
// console.log( map.getContentSize() ) // {width: 640, height: 480}

// map.setVisible(false);

05 | Cocos2D-JS | How to define the attributes of an object

05 | How to define the attributes of an object

There are 3 ways to define and edit the attributes of an object

Mode 1

    var sprite = new cc.Sprite(Game.res.HelloWorld_png);
    
    sprite.setAnchorPoint(cc.p(0, 0));
    sprite.setAnchorX(0); sprite.setAnchorY(0);
    sprite.setPosition(cc.p(x, y));
    sprite.setRotation(45); sprite.setScale(1.0);
    sprite.setScaleX(1); sprite.setScaleY(1);
    sprite.setVisible(false); sprite.setFlippedX(0);
    sprite.setFlippedY(0); sprite.setSkewX(0);
    sprite.setSkewY(0); sprite.setOpacity(0);

Mode 2

    var sprite = new cc.Sprite("HelloWorld.png");
     
    sprite.attr({ 
    	x: x, 
    	y: y, 
    	anchorX: 0.5, 
    	anchorY: 0.5, 
    	rotation: 45, 
    	scale: 1, 
    	scaleX: 1, 
    	scaleY: 1, 
    	visible: true, 
    	flippedX: false, 
    	flippedY: false, 
    	skewX: 0, 
    	skewY: 0, 
    	opacity: 50 
    });

Mode 3

    var sprite = new cc.Sprite(res.HelloWorld_png); 
    
    sprite.x: x; 
    sprite.y: y; 
    sprite.anchorX: 0.5; 
    sprite.anchorY: 0.5; 
    sprite.rotation: 45; 
    sprite.scale: 1; 
    sprite.scaleX: 1; 
    sprite.scaleY: 1; 
    sprite.visible: true; 
    sprite.flippedX: false; 
    sprite.flippedY: false; 
    sprite.skewX: 0; 
    sprite.skewY: 0; 
    sprite.opacity: 50;

01 | Cocos2D-JS | Simple server

01 | Simple server

Install the Google Chrome Web Browser -> link
Install this extension in Google Chrome -> link
Run the app
Select the project files folder
Click on the link

06 | Cocos2D-JS | How to Move a Sprite on the Screen

06 | How to Move a Sprite on the Screen

Game.layers.js

In the Game.layers.js
a) set the time of movement
b) set the horizontal distance of the movement
c) set the vertical distance of the movement
d) set the motion action

    Game.layers[1].extend = cc.Layer.extend({
        init: function () {      
            this._super(); 
            var game = this;
            Game.layers[1].start( game );  
        } 
    });    
     
    Game.layers[1].start = function( game ){
     
        var size = cc.director.getWinSize();
        var sprite = new cc.Sprite ( "HelloWorld.png" ) ; 
       
        sprite.attr({  
            x: size.width / 2, 
            y: size.height / 2,
            anchorX: 0.5,
            anchorY: 0.5, 
            time: 2,  //a
            moveX: 100, //b
            moveY: 150 //c
        });
          
        game.addChild(sprite);
    
        sprite.runAction( new cc.MoveBy( sprite.time, cc.p( sprite.moveX, sprite.moveY ) ));   //d
         
    };

12 | Cocos2D-JS | How use keyboard to move a sprite

12 | How use keyboard to move a sprite

Game.scenes.js

Add the update method in Game.scenes.js

    Game.scenes[1].extend = cc.Scene.extend({
         onEnter:function () {
             this._super();  
             var layer = new Game.layers[1].extend();
             layer.init();
             this.addChild( layer ); 
    
             this.scheduleUpdate(); 
          },
          update:function(dt){
             Game.move();         
          }    
    });

Variables

    var x_sprite;
    var y_sprite; 
    var weight = 0;
    var speed = 10;
    var speedX;
    var speedY;
    
    var keyLeft;
    var keyRight;
    var keyUp;
    var keyDown;
    var keyEsc;
    var keySpace;
    var keyEnter;
    var keyX;
    var keyZ;

Key functions

    Game.keyX = function(){ 
      console.log("press keyX")
    }
    
    Game.keyZ = function(){ 
      console.log("press keyZ")
    }
    
    Game.keySpace = function(){ 
      console.log("press keySpace")
    }
    
    Game.keyEnter = function(){ 
      console.log("press keyEnter")
    }
    
    Game.keyEsc = function(){ 
      console.log("press keyEsc")
    }

Move function

Game.move = function(){  
  
         if( keyRight ) speedX = 1;        
    else if( keyLeft ) speedX = -1;        
    else speedX = 0;
 
         if( keyUp ) speedY = 1;       
    else if( keyDown ) speedY = -1;       
    else speedY = 0;
 
    if( keyLeft || keyRight || keyDown || keyUp ) Game.moveSprite();
}

Game.moveSprite = function(){
	x_sprite = sprite.getPosition().x;
	y_sprite = sprite.getPosition().y;           
	sprite_action = cc.MoveTo.create( weight, cc.p( x_sprite + speedX * speed, y_sprite + speedY * speed ));
	sprite.runAction( sprite_action );	
}

Keyboard function

    if( 'keyboard' in cc.sys.capabilities ) {
         
        var listener = cc.EventListener.create({ 
    
            event: cc.EventListener.KEYBOARD,
    
            onKeyPressed:function(key, event) {
                switch(key) {
                case 37:                                                    
                    keyLeft = true;   
                    break;
                case 39:                   
                    keyRight = true;                            
                    break;
                case 38:                                               
                    keyUp = true;
                    break;
                case 40:                                                      
                    keyDown = true;
                    break;
    
                case 65:                                                      
                    keyLeft = true;
                    break; 
                case 68:                                                      
                    keyRight = true;
                    break; 
                case 87:                                                      
                    keyUp = true;
                    break; 
                case 83:                                                      
                    keyDown = true;
                    break;
                case 32:                                                      
                    keySpace = true;
                    Game.keySpace();
                    break;
                case 13:                                                      
                    keyEnter = true;
                    Game.keyEnter();
                    break;
                case 27:                                                      
                    keyEsc = true;
                    Game.keyEsc();
                    break; 
                case 90:                                                      
                    keyZ = true;
                    Game.keyZ();
                    break; 
                case 88:                                                      
                    keyX = true;
                    Game.keyX();
                    break; 
                }
            },
    
            onKeyReleased:function(key, event) {
                switch(key) {
                case 37:                                                   
                    keyLeft = false;
                    break;
                case 39:                                                   
                    keyRight = false;
                    break;
                case 38:                                              
                    keyUp = false;
                    break;
                case 40:                                                    
                    keyDown = false;
                    break;
    
                case 65:                                                      
                    keyLeft = false;
                    break; 
                case 68:                                                      
                    keyRight = false;
                    break; 
                case 87:                                                      
                    keyUp = false;
                    break; 
                case 83:                                                      
                    keyDown = false;
                    break;
    
                case 32:                                                      
                    keySpace = false;
                    break;
                case 13:                                                      
                    keyEnter = false;
                    break;
                case 27:                                                      
                    keyEsc = false;
                    break; 
                case 90:                                                      
                    keyZ = false;
                    break; 
                case 88:                                                      
                    keyX = false;
                    break;  
                }
            }
        }, this);
    }

13 | Cocos2D-JS | How create a tilemap

13 | How create a tilemap

Step 1

Save this image in folder "res" as "tileset.png"

Step 2

Download the Tiled, export and run -> link

Step 3

Create new map

Step 4

Set the configurations:

Orientation: Orthogonal
Tile layer format: Base64 (zlib compressed)
Tile render order: Right Down
Map Size. Fixed: 40 tiles by 30 tiles (640x480)
Tile Size: 16px by 16px

Step 5

Save As... "map.tmx"
Save inside folder "res".

Step 6

Click in "New Tileset" or in "icon"

Step 7

Set configurations:

Name: tileset
Type: Based on Tileset Image
Select "Embed in map"
Click in "Browse" and select the "image"
Tile width: 16px
Tile height: 16px
Click ok

Step 8

Draw a tilemap and click in save

16 | Cocos2D-JS | How create an animation

16 | How create a animation

Game.resources.js

Game.res = {
    HelloWorld_png : "res/HelloWorld.png",
    map_png : "res/tileset.png",
    map_tmx : "res/map.tmx",
    sprites_png : "res/sprites.png",
    sprites_plist : "res/sprites.plist"
};

Game.g_resources = []; 

for ( var i in Game.res ) {
    Game.g_resources.push( Game.res[i] );
}

Game.vars.js

Game.player = {};
Game.player.addSprite = {};
Game.player.addAnimation = {};
Game.player.runAnimation = {};

Game.layers.js

Create layer

Game.layers[1].extend = cc.Layer.extend({
    init: function () {      
        this._super(); 
        var game = this;
        Game.layers[1].start( game );  
    }
});    

Game.layers[1].start = function( game ){
 
	layer = cc.LayerColor.create(new cc.Color(0,0,0,0), 960, 640); // R+G+B+Opacity+X+Y
	game.addChild(layer); // add layer to game

	Game.player.addSprite( layer );  
};

Create player

Game.player.addSprite = function( layer ){

    spriteSheet = null;
    runningAction = null;
    sprite = null;
    animSpeed = 0.2;

    cc.spriteFrameCache.addSpriteFrames( Game.res.sprites_plist );
    layer.spriteSheet = new cc.SpriteBatchNode( Game.res.sprites_png );
    layer.addChild( layer.spriteSheet );
    layer.sprite = new cc.Sprite( "#1.png" );
    layer.sprite.attr( { x:180, y:85 } );           
    layer.spriteSheet.addChild( layer.sprite );

    Game.player.addAnimation[ "right" ]( layer );

    Game.player.runAnimation[ "right" ](); 
}

Create animation right

Game.player.addAnimation[ "right" ] = function( layer ){
   
    animFrames = [];
   
    var str = "1.png";
    var frame = cc.spriteFrameCache.getSpriteFrame(str);
    animFrames.push(frame);

    var str = "2.png";
    var frame = cc.spriteFrameCache.getSpriteFrame(str);
    animFrames.push(frame);

    var str = "3.png";
    var frame = cc.spriteFrameCache.getSpriteFrame(str);
    animFrames.push(frame);  

    animationRight = new cc.Animation( animFrames, animSpeed );
    layer.runAnimationRight = new cc.RepeatForever( new cc.Animate( animationRight ) );
}

Run animation right

Game.player.runAnimation[ "right" ] = function(){
   layer.sprite.flippedX = false; 
   layer.sprite.stopAllActions();
   layer.sprite.runAction( layer.runAnimationRight ); 
}

07 | Cocos2D-JS | How to remove a sprite of screen

07 | How to remove a sprite of screen

Game.layers.js

Edit the Game.layers.js
To remove a sprite you need to add a sprite to a layer, and the layer to the game.

Here are four examples on how to remove the sprite.

    Game.layers[1].extend = cc.Layer.extend({
        init: function () {      
            this._super(); 
            var game = this;
            Game.layers[1].start( game );  
        } 
    });    
     
    Game.layers[1].start = function( game ){
     
      var size = cc.director.getWinSize(); 
    
         layer = cc.LayerColor.create(new cc.Color(0,0,0,250), 960, 640); // R+G+B+Opacity+X+Y
         game.addChild(layer); // add layer to game
     
         var sprite = cc.Sprite.create("HelloWorld.png");
         sprite.setTag(1);
         sprite.setPosition(x,y);
         layer.addChild(sprite,0);  // add sprite to layer  
     
         setTimeout(function(){
             //layer.removeChild(sprite); // remove sprite of layer
             //layer.removeChildByTag(1); // remove sprite by tag
             //layer.removeAllChildren(); // remove all children
             //layer.removeFromParent(); // remove from parent
         }, 3000); // after 3 seconds
          
    };

10 | Cocos2D-JS | How to Replace Sprites

10 | How to Replace Sprites

Set the source and tag of each sprite

    this.initWithFile("res/01.png"); 
    this.setTag("02");
    
    this.initWithFile("res/02.png"); 
    this.setTag("01");

Example replace the image with the touch

    if (cc.rectContainsPoint(targetRectangle, location)) { 
	    var tag = sprite.getTag(); 
	    sprite2.initWithFile("res/" + tag + ".png"); 
    }

03 | Cocos2D-JS | How to display a sprite on the screen

03 | How to display a sprite on the screen

Game.resources.js

In the Game.resources.js set the path to the image

    Game.res = { 
	    HelloWorld_png : "HelloWorld.png" 
	};
	
    Game.g_resources = []; 
    
    for ( var i in Game.res ) {
	    Game.g_resources.push( Game.res[i] ); 
    }

Game.layers.js

In the file Game.layers.js:

a) Create a new sprite
b) Define the positions x and y
c) Add the sprite to the game

    Game.layers[1].extend = cc.Layer.extend({
	    init: function () {      
	        this._super(); 
	        var game = this;
	        Game.layers[1].start( game );  
	    }
    }); 
        
    Game.layers[1].start = function( game ){ 
	    var sprite = new cc.Sprite ( "HelloWorld.png" ) ; // a
	    sprite.attr({ x: 0, y: 0 }); //b
	    game.addChild(sprite); //c 
    };

17 | Cocos2D-JS | How create objects with Chipmunk Physics

17 | How create objects with Chipmunk Physics

box.png

Game.resources.js

Game.res = {
    box_png : "res/box.png"
};

Game.g_resources = []; 

for ( var i in Game.res ) {
    Game.g_resources.push( Game.res[i] );
}

Game.scenes.js

Game.scenes[1].extend = cc.Scene.extend({
     onEnter:function () {
         this._super();  
         layer = new Game.layers[1].extend();
         layer.init();
         this.addChild( layer );       
      }  
});

Game.layers.js

Layer extend

Game.layers[1].extend = cc.Layer.extend({
    init:function () {
        this._super();
        var game = this;

        Game.startPhysics();
        Game.startPhysicsDebug( game ); 
        Game.addPhysicsBodies( game );       
   
        game.scheduleUpdate();     
    },    
    update:function(dt){   
        world.step(dt);
        for( var i = coliders.length - 1; i >= 0; i-- ){
            coliders[i].image.x = coliders[i].body.p.x
            coliders[i].image.y = coliders[i].body.p.y
            var angle = Math.atan2( -coliders[i].body.rot.y, coliders[i].body.rot.x );
            coliders[i].image.rotation = angle * 57.2957795;
        }
    }
});

Start physics

Game.startPhysics = function(){

    world = new cp.Space();
    world.gravity = cp.v(0, -500);
    coliders = [];
}

Start physics debug

Game.startPhysicsDebug = function( game ){

    var debugDraw = cc.PhysicsDebugNode.create( world );
    debugDraw.setVisible( true );
    game.addChild( debugDraw );
}

Add physics bodies

Game.addPhysicsBodies = function( game ){

    var config = {
        posX: 320,
        posY: 20, 
        width: 640, 
        height: 20, 
        isDynamic: false, 
        sensor: false,
        spriteImage: "null", 
        type: "ground", 
        id: "tag"
    }

    game.addBody( config );

    var config = {
        posX: 320,
        posY: 480, 
        width: 64, 
        height: 64, 
        isDynamic: true, 
        sensor: false,
        spriteImage: Game.res.box_png, 
        type: "box", 
        id: "tag_1"
    }

    game.addBody( config );

    var config = {
        posX: 290,
        posY: 64, 
        width: 64, 
        height: 64, 
        isDynamic: true, 
        sensor: false,
        spriteImage: Game.res.box_png, 
        type: "box", 
        id: "tag_2"
    }

    game.addBody( config );
  
}

Method addBody

Game.layers[1].extend.prototype.addBody = function( config ){  

    if( config.isDynamic ) var body = new cp.Body( 1, cp.momentForBox( 1, config.width, config.height ) );
    else var body = new cp.Body( Infinity, Infinity );
    body.setPos( cp.v( config.posX, config.posY) );
     
    if( config.isDynamic ) world.addBody( body );
    
    Game.addPhysicsShapes( body, config );
}

Add physics shapes

Game.addPhysicsShapes = function( body, config ){

    var shape = new cp.BoxShape( body, config.width, config.height );
    shape.setFriction(1);
    shape.setElasticity(0);
    shape.name = config.type;
    shape.image = Game.addPhysicsSprites( config );
    shape.id = config.id;
    shape.sensor = config.sensor;
    world.addShape( shape );

    coliders.push( shape );
}

Add physics sprites

Game.addPhysicsSprites = function( config ){

    var bodySprite = cc.Sprite.create( config.spriteImage );
    layer.addChild( bodySprite, 0 );
    bodySprite.setPosition( config.posX, config.posY ); 
    return bodySprite
}

11 | Cocos2D-JS | How to do scene transition

11 | How to do scene transition

Example scene transition on click or touch

    if (cc.rectContainsPoint(targetRectangle, location)) { 
    	cc.director.runScene( new Game.scenes[2].extend() );
    }

Example scene transition with effect

    if (cc.rectContainsPoint(targetRectangle, location)) { 
    	var transitionTime = 2; 
    	var nextScene = new Game.scenes[2].extend(); 
    	var transitionScene = new cc.TransitionProgressInOut(transitionTime, nextScene);
    }

Transition Progress Classes

var transitionScene = new cc.TransitionProgressInOut(transitionTime, nextScene); 
var transitionScene = new cc.TransitionProgressOutIn(transitionTime, nextScene); 
var transitionScene = new cc.TransitionProgressRadialCCW(transitionTime, nextScene); 
var transitionScene = new cc.TransitionProgressRadialCW(transitionTime, nextScene); 
var transitionScene = new cc.TransitionProgressVertical(transitionTime, nextScene); 
var transitionScene = new cc.TransitionProgressHorizontal(transitionTime, nextScene);

Others transitions classes

TransitionProgress
TransitionCrossFade
TransitionFade
TransitionFadeTR
TransitionJumpZoom
TransitionMoveInL
TransitionPageTurn
TransitionRotoZoom
TransitionSceneOriented
TransitionShrinkGrow
TransitionSlideInL
TransitionTurnOffTiles
TransitionSplitCols

Documentation C++
http://www.cocos2d-x.org/reference/native-cpp/V3.0alpha1/da/d00/group__transition.html

15 | Cocos2D-JS | How create spritesheet.png and spritesheet.plist

15 | How create spritesheet.png and spritesheet.plist

Step 1

Download and install Adobe Air -> link

Step 2

Download and install Shoebox -> link

Step 3

Save this images in folder "res"
1.png

2.png

3.png

Step 4

Select all images and drag to "Sprite Sheet"

Step 5

Click in "Settings"

Step 6

Select "Cocos2D" and click "Apply"

Step 7

Click "Save"

02 | Cocos2D-JS | Code Editor

02 | Code Editor

Choose a code editor of your choice. Examples:

Sublime
https://www.sublimetext.com/

Visual Studio Code
https://code.visualstudio.com/

Atom
https://atom.io/

Brackets
https://brackets.io/

Webstorm
https://www.jetbrains.com/webstorm/

18 | Cocos2D-JS | How remove objects with Chipmunk Physics

18 | How remove objects with Chipmunk Physics

Game.layers.js

Add Listener

Game.layers[1].extend = cc.Layer.extend({
    init:function () {
  (... code ...)
        cc.eventManager.addListener( Game.touch, game );
    }
  (... code ...)
});

Touch event

Game.touch = cc.EventListener.create({
    event: cc.EventListener.TOUCH_ONE_BY_ONE,
    onTouchBegan: function ( touch, event ) {

        console.log( "touch ");

        Game.removeItemById( "tag_1" );
        
        //Game.removeItemsByType( "box" );

        Game.removeItemByTouch( touch, event, "box" );  
    }       
});

Remove item by id

Game.removeItemById = function( id ){

    for( var i = coliders.length - 1; i >= 0; i-- ){
        if( coliders[i].id == id ){
            layer.removeChild( coliders[i].image );
            world.removeBody( coliders[i].getBody() )
            world.removeShape( coliders[i] )
            coliders.splice( i, 1 );
            break
        }
    }
}

Remove items by type

Game.removeItemsByType = function( type ){

    for( var i = coliders.length - 1; i >= 0; i-- ){
        if( coliders[i].name == type ){
            layer.removeChild( coliders[i].image );
            world.removeBody( coliders[i].getBody() )
            world.removeShape( coliders[i] )
            coliders.splice( i, 1 );       
        }
    }
}

Remove item by touch

Game.removeItemByTouch = function( touch, event, type ){

    for( var i = coliders.length - 1; i >= 0; i-- ){
        if( coliders[i].pointQuery( cp.v( touch.getLocation().x, touch.getLocation().y ) ) != undefined ){
            if( coliders[i].name == type ){
                layer.removeChild( coliders[i].image );
                world.removeBody( coliders[i].getBody() );
                world.removeShape( coliders[i] );
                coliders.splice( i, 1 ); 
                break
            }
        }
    }
}

gurigraphics / cocos2d-js-quick-tutorials Goto Github PK

cocos2d-js-quick-tutorials's People

Contributors

Stargazers

Watchers

Forkers

cocos2d-js-quick-tutorials's Issues

Welcome to Cocos2D-JS Quick Tutorials!

Start

project.json

Game.resources.js

Game.vars.js

Game.scenes.js

Game.layers.js

Game.js

08 | How to extend the attributes of a sprite

Game.layers.js

09 | How to use touch event

Game.layers.js

Events:

04 | How to center a sprite in Screen

Game.layers.js

14 | How import a tilemap

Game.resources.js

Game.layers.js

Some tilemap methods

05 | How to define the attributes of an object

Mode 1

Mode 2

Mode 3

01 | Simple server

06 | How to Move a Sprite on the Screen

Game.layers.js

12 | How use keyboard to move a sprite

Game.scenes.js

Variables

Key functions

Move function

Keyboard function

13 | How create a tilemap

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

16 | How create a animation

Game.resources.js

Game.vars.js

Game.layers.js

07 | How to remove a sprite of screen

Game.layers.js

10 | How to Replace Sprites

03 | How to display a sprite on the screen

Game.resources.js

Game.layers.js

17 | How create objects with Chipmunk Physics

Game.resources.js

Game.scenes.js

Game.layers.js

11 | How to do scene transition

Transition Progress Classes

Others transitions classes

15 | How create spritesheet.png and spritesheet.plist

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

02 | Code Editor

18 | How remove objects with Chipmunk Physics

Game.layers.js

Recommend Projects

Recommend Topics

Recommend Org