*** Programming Guide *** Table of Content

As we announced with Cocos2d-JS v3.0 Final, we are working on an official Cocos2d-JS Programming Guide.

We’d share with you the table of content, we will fill all the basics firstly, then the docs will be merged into our github doc repo, so that everyone can review and contribute to it. A first version programming guide will be released by the end of october.

If you have any feed backs or suggestions, please tell us in this topic.


Cocos2d-JS Programming Guide

  1. About Cocos2d-JS

    • A brief history
      • Cocos2d-html5 started from 2012 and upgraded to Cocos2d-JS in 2014
      • Cocos2d-html5 and Cocos2d-JSBindings
      • Position in Cocos2d family
    • Where to get help
      • Forum
      • Documents
  2. Working Environment and Workflow

  3. Jumping into Cocos2d-JS (A simple game without explanation)

    • Installation
    • Creating your first scene
    • Adding content to the scene
    • Using actions to animate scenes
    • Transition between scenes
    • Creating user interaction with event manager
  4. Essential Conceptions

    • Cocos2d-JS project
      • Folder structure
      • project.json
      • Modularization
    • Game object and game creation process (cc.game, main.js)
    • Coordinate system
    • Resolution policies
    • Scene graph
      • The tree structure of game scene
      • The render system (WebGL/Canvas for Web, OpenGL ES for JSB, general render pipeline in a brief)
    • Director of game
      • Scene flow control
      • The game loop (scene visit&render, action, scheduler, event, general discussion)
    • Javascript bindings (general discussion, no details)
  5. Cocos2d-JS Features

    • Loading process (cc.loader)
    • Scenes and layers
      • Constructing a scene graph
      • Transition between scenes
    • Nodes and Sprites
      • Creating nodes and sprites
      • Node manipulation
        Anchor point and positioning, (ignoreAnchor)
        Translation, rotation, scale, skew
        Opacity, color, (cascade)
        Additional operation for sprite: flip, texture, textureRect
      • Texture
        Loading
        TextureCache
        Configuration
      • Sprite frame
        Creation
        SpriteFrameCache
    • Actions
      • What are basic actions
        ActionInterval
        ActionInstant
      • Decorative actions
        Easing
        Repeat
        Speed
      • Composed actions
        Spawn
        Sequence
      • Animate action for sprite animations
    • Labels
      • TTF label
      • Bitmap font label
      • Label atlas
    • Menu and menu items
      • What makes up a menu
      • Menu items
    • GUI
      • Widgets
        • Button
        • Checkbox
        • Image view
        • Loading bar
        • Slider
        • Texts
        • TextField
      • Widget containers
        • Layout
        • Scroll view
        • List view
        • Page view
    • Audio
    • Event Manager
      • Responds to user events
      • The basics
        • Event listeners encapsulate your event processing code
        • Event dispatcher notifies listeners of user events
        • Event objects contain information about the events
      • 5 types of event listeners
        • EventListenerTouch
        • EventListenerKeyboard
        • EventListenerAcceleration
        • EventListenerMouse
        • EventListenerCustom
      • Registering event with the dispatcher
      • Removing events from the dispatcher
    • Other Node Types
      • Tile map
      • Particle
      • Parallax
      • Node grid
      • Clipping node
      • Video
    • System and device informations (cc.sys, cc.visibleRect, etc.)
  6. Advanced Topics

    • Director configurations
    • Best practice - Optimization, memory, performance, profiling
      • Object pool
      • Bake Node
      • SpriteBatchNode
    • Creation and inheritance of engine classes
    • Custom OpenGL
    • Facebook SDK
    • Plugin-x (Google Play, iOS IAP)
    • Code obfuscation and packaging on web
    • JSB exclusive APIs
    • Hot update with AssetsManager
    • Javascript to JAVA / Objective-C reflection
    • Using extensions in JSB
    • Custom javascript bindings
    • Physics
      • What options and why integrated physics engine
      • Physics concepts
      • Physics world, bodies
      • Collision
    • Extensions and tools
      • Cocos Studio
      • Cocos Play
      • AnySDK
      • Cocos Builder
      • Spine
      • Texture Packer
3 Likes

I have updated the workflow documents for chapter 2, please take a look and give me any comment you like.

I read these documents and it is fantastic!
If at the beginning of my journey I had such simple and clear guidance. *sadly sighs

The only notices - may be need to describe this

Set the Java path as JAVA_HOME environment variable, the Ant destination folder as ANT_HOME environment variable. Then add ${ANT_HOME}/bin (Unix) or %ANT_HOME%/bin (Windows) to your system path.

a little more detail, as I have several times seen on the forum of people who did not know what is environment variables.
And I honestly for the first time I do not pay attention to them when I installed cocos.

I’m really happy that you find it useful !
It’s true that Cocos2d-JS’s documentation is not great for now, but we are trying our best to bring you this complete programming guide. And we appreciate any contribution or suggestions.

About the environment variables, I can put a link or some more explanations later.

how to Add game contents ?

I’m not sure I understand you, :smiley:

i want to know how to pause and resume game?

cc.director.pause()

cc.director.resume()

can you send me a list of all functions used in cocos2d-js and their syntax?

Our API reference: http://www.cocos2d-x.org/reference/html5-js/V3.0/index.html

How can I use google analytics in cocos-2d-js project?

Hi @pandamicro

Can you please tell us how is the work going on for the documentation/tutorials, especially advanced topics… :smiley:

Waiting Eagerly for advance topics… :smile:

2 Likes