Hello -

I've been looking for a place to start learning using the cocos2d-html5 framework.
I'm new to cocos2d, and I couldn't find any tutorial that is up to date.
The "Making the Hello World more interesting" tutorial in the main page seems to be obsolete, as the files it refers you to are no longer existing. There's no longer a HelloWorld folder, and in the most similar folder ( HelloHTML5World ) there's no Helloworld.js

I've also found this tutorial: http://www.gamefromscratch.com/post/2012/06/06/Cocos2D-HTML5-tutorial-2-Why-it%E2%80%99s-Hello-World-of-course.aspx
But it doesn't seem to work. I get a lot of errors in the framework level itself, so I assume it's obsolete as well.

Any recommendations? I'd really like to get started on this

Tnx!
Mark

Cocos2d-html5 is a work in progress, however, the API has been finalized.
I have asked gamefromscratch to help us to update the tutorials with the new API and new template.

I've found the gamesfromscratch tutorials to be a good starting point when combined with the API documentation. Beyond that, I've been using generic Cocos2D-X tutorials for reference, the jumping to the API docs for actual implementation help.

I have a sample/demo for the PlayBook that is a work in progress and I'd be happy to share it when ready; planning to put up a full guide for it on Github once I get all the licensing for various image resources sorted out.

The gamefromscratch tutorial does seem helpful, and I assume things haven't changed much in the game design aspect since they were written.
However, I get a list errors when trying to run the projects exactly as they wrote it. I think that the way you load the cc structure ( what they do in cocos2d.js in their project ) have changed since then, and It's making the platform malfunction.

Has the loading mechanism really changed since then, and if so, any place I can pick up the new one?

From what I recall, cocos2d.js didn't change much from the tutorial to my implementation. Here is what I am using currently:

/*global window, document, console */

'use strict';

var cc = cc || {};

cc.Dir = './';
cc.loadQue = [];
cc.COCOS2D_DEBUG = 2;
cc._DEBUG = 1;
cc._IS_RETINA_DISPLAY_SUPPORTED = 0;

/* Shorthand querySelector. */
cc.$ = function (x) {
    return document.querySelector(x);
};

/* Shorthand createElement. */
cc.$new = function (x) {
    return document.createElement(x);
};

cc.loadjs = function (filename) {
    var script;

    script = cc.$new('script');
    script.src = cc.Dir + filename;
    script.order = cc.loadQue.length;
    cc.loadQue.push(script);

    script.onload = function () {
        if (this.order + 1 < cc.loadQue.length) {
            cc.$('head').appendChild(cc.loadQue[this.order + 1]);
        } else {
            cc.setup('ccCanvas');

            cc.Loader.shareLoader().onloading = function () {
                cc.LoaderScene.shareLoaderScene().draw();
            };

            cc.Loader.shareLoader().onload = function () {
                cc.AppController.shareAppController().didFinishLaunchingWithOptions();
            };

            /* Preload resources. */
            cc.Loader.shareLoader().preload([
            ]);
        }
    };

    if (script.order === 0) {
        cc.$('head').appendChild(script);
    }
};

/* Cocos2D Scripts. */
cc.loadjs('../cocos2d/platform/CCClass.js');
cc.loadjs('../cocos2d/platform/CCCommon.js');
cc.loadjs('../cocos2d/platform/platform.js');
cc.loadjs('../cocos2d/cocoa/CCGeometry.js');
cc.loadjs('../cocos2d/cocoa/CCSet.js');
cc.loadjs('../cocos2d/platform/CCTypes.js');
cc.loadjs('../cocos2d/cocoa/CCAffineTransform.js');
cc.loadjs('../cocos2d/support/CCPointExtension.js');
cc.loadjs('../cocos2d/base_nodes/CCNode.js');
cc.loadjs('../cocos2d/platform/CCMacro.js');
cc.loadjs('../cocos2d/platform/CCConfig.js');
cc.loadjs('../cocos2d/textures/CCTexture2D.js');
cc.loadjs('../cocos2d/textures/CCTextureCache.js');
cc.loadjs('../cocos2d/actions/CCAction.js');
cc.loadjs('../cocos2d/actions/CCActionInterval.js');
cc.loadjs('../cocos2d/actions/CCActionManager.js');
cc.loadjs('../cocos2d/actions/CCActionEase.js');
cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCScene.js');
cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCLayer.js');
cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCTransition.js');
cc.loadjs('../cocos2d/sprite_nodes/CCSprite.js');
cc.loadjs('../cocos2d/sprite_nodes/CCAnimation.js');
cc.loadjs('../cocos2d/sprite_nodes/CCAnimationCache.js');
cc.loadjs('../cocos2d/sprite_nodes/CCSpriteFrame.js');
cc.loadjs('../cocos2d/label_nodes/CCLabelTTF.js');
cc.loadjs('../cocos2d/text_input_node/CCIMEDispatcher.js');
cc.loadjs('../cocos2d/touch_dispatcher/CCTouchDelegateProtocol.js');
cc.loadjs('../cocos2d/touch_dispatcher/CCTouchHandler.js');
cc.loadjs('../cocos2d/touch_dispatcher/CCTouchDispatcher.js');
cc.loadjs('../cocos2d/keypad_dispatcher/CCKeypadDelegate.js');
cc.loadjs('../cocos2d/keypad_dispatcher/CCKeypadDispatcher.js');
cc.loadjs('../cocos2d/CCDirector.js');
cc.loadjs('../cocos2d/CCScheduler.js');
cc.loadjs('../cocos2d/CCLoader.js');
cc.loadjs('../cocos2d/CCDrawingPrimitives.js');
cc.loadjs('../cocos2d/platform/CCApplication.js');
cc.loadjs('../cocos2d/platform/CCSAXParser.js');
cc.loadjs('../cocos2d/platform/AppControl.js');
cc.loadjs('../cocos2d/menu_nodes/CCMenuItem.js');
cc.loadjs('../cocos2d/menu_nodes/CCMenu.js');
cc.loadjs('../CocosDenshion/SimpleAudioEngine.js');

/* Custom Scripts. */
cc.loadjs('Classes/AppDelegate.js');
cc.loadjs('GettingStarted.js');

cc.Dir specifies that all paths will be relative to my root. Note the .. in the cc.loadjs calls to the Cocos2d-HTML5 framework; this means that my project is in a subfolder of the framework installation. If the cocos2d.zip and CocosDenshion.zip archives were extracted to my actual project, these .. symbols would just be a .

Last little caveat, I've noticed a few tutorials are referencing Cocos2D JavaScript Classes with lowercase cc characters. Example:

cc.loadjs('../cocos2d/ccSomeClass.js');

However from what I can tell, all the JS files have uppercase CC prefixes. So be sure that the prefixes are all uppercase, and that the files being referenced match.

What errors does Web Inspector show?

Erik Oros wrote:

From what I recall, cocos2d.js didn't change much from the tutorial to my implementation. Here is what I am using currently:

[...]

cc.Dir specifies that all paths will be relative to my root. Note the .. in the cc.loadjs calls to the Cocos2d-HTML5 framework; this means that my project is in a subfolder of the framework installation. If the cocos2d.zip and CocosDenshion.zip archives were extracted to my actual project, these .. symbols would just be a .

Last little caveat, I've noticed a few tutorials are referencing Cocos2D JavaScript Classes with lowercase cc characters. Example:
[...]

However from what I can tell, all the JS files have uppercase CC prefixes. So be sure that the prefixes are all uppercase, and that the files being referenced match.

What errors does Web Inspector show?

First of all, thank you for the help :)
1.In your file, there were a couple of missing files - They change the "keypad" word in the keypad_dispatcher ( and it's subfiles ) to "keyboard".

2.Now I get the error:"Cannot read property 'tagName' of null" in the cc.setup function ( at the platform/CCApplication.js file ), which is called from the script.onload function ( at the cocos2d.js file we created at line 35 ).
The line that's causting the error is:

if (element.tagName == "CANVAS")

The entire function is:

cc.setup = function (el, width, height) {
    var element = cc.$(el) || cc.$('#' + el);
    if (element.tagName == "CANVAS") {
        //it is already a canvas, we wrap it around with a div
        cc.container = cc.$new("DIV");
        cc.canvas = element;
        cc.canvas.parentNode.insertBefore(cc.container, cc.canvas);
        cc.canvas.appendTo(cc.container);
        cc.container.style.width = (width || cc.canvas.width || 480) + "px";
        cc.container.style.height = (height || cc.canvas.height || 320) + "px";
        cc.container.setAttribute('id', 'Cocos2dGameContainer');
    }
    else {//we must make a new canvas and place into this element
        if (element.tagName != "DIV") {
            cc.log("Warning: target element is not a DIV or CANVAS");
        }
        cc.canvas = cc.$new("CANVAS");
        cc.canvas.addClass = "gameCanvas";
        cc.canvas.setAttribute("width", width || 480);
        cc.canvas.setAttribute("height", height || 320);
        cc.container = element;
    }
    cc.container.style.position = 'relative';
    cc.container.style.overflow = 'hidden';
    cc.container.top = '100%';
    cc.renderContext = cc.canvas.getContext("2d");
    cc.renderContextType = cc.CANVAS;
    if (cc.renderContextType == cc.CANVAS) {
        cc.renderContext.translate(0, cc.canvas.height);
        cc.drawingUtil = new cc.DrawingPrimitiveCanvas(cc.renderContext);
    }
    cc.originalCanvasSize = cc.size(cc.canvas.width, cc.canvas.height);

    cc.log(cc.ENGINE_VERSION);
}

Btw - why when I post a post in here it delets all the empty lines I create? It's really annoying

Are you using 0.5.0 Alpha 2 release? That's the one I downloaded today and am still seeing references to keypad. I don't get any errors loading the JavaScript files as listed, but if I enter an incorrect name I do see an error, which makes me think we may be using different releases.

One quick note, I did change my <canvas> id in index.html. I set it to ccCanvas, which is what is being referenced in cocos2d.js. Perhaps just double check that the id there is the same as what you designated in index.html? By the error, it seems that getElementById('ccCanvas') is likely returning null, thus it can't get the associated properties. I may be wrong, but that's the first one that comes to mind.

EDIT: Ah, I just read this and I see that the keypad/keyboard and related changes are coming in the next beta release. Seems you are slightly ahead of my framework version and I will need to update soon :)
http://www.gamefromscratch.com/post/2012/08/10/Cocos2D-HTML%E2%80%93Porting-to-the-most-recent-version.aspx

Yeah, their new cocos2d.js solves that problem. There are other compatibility problems with the previous guide, but I'll guess I'll solve them once I go through the change notes thoroughly
Thank you

Sure thing. I'll work on getting my tutorial updated for what's coming too. Hope to have it online soon.

For the beta release, are you just grabbing the latest files from Github? I can't seem to find a link to a beta archive download on the main website.

Hi all,

I am the person who runs GameFromScratch.com.

I haven't updated the tutorials yet, I have written a guide ( that I update as I run into new issues ) that was linked above, documenting the process of upgrading the source code to the newest beta. Beyond the boot loader code, the changes are minor but pervasive. Figuring out what broke took about 10x longer than actually fixing it (especially when I didn't think to check for changed in the project cocos2d.js file!! ). The new revision does make a lot more sense and gets rid of a lot of the "warts", so in the end, it is worth the pain.

If I could offer a suggestion though, I would make main.js configurable, instead of a hard coded requirement as it is now. This is non-intuitive to new developers, and you have to dive into the loader code ( which end users shouldn't touch ) in order to comprehend what is going on. As you are already passing a number of values via config now, this seems like a simple enough fix.

I have successfully ported all of the code to run. So, if you are stumped now, you can download each of the tutorials source code here ( http://www.gamefromscratch.com/post/2012/08/11/Cocos2D-HTML5-Tutorials-updated-to-newest-beta.aspx ). There is also an archive containing all 4 projects, plus the cocos2d sources I ran against, so if you want to just download and run, use that one.

I hope to get the tutorial text updated soon, but it's actually a fairly involved job, so it might take a bit of time.

Erik Oros wrote:

Sure thing. I'll work on getting my tutorial updated for what's coming too. Hope to have it online soon.

For the beta release, are you just grabbing the latest files from Github? I can't seem to find a link to a beta archive download on the main website.

Yeah, I'm just cloning the git repository to my www/cocos2d-html5 directory.

Mike Fleischauer wrote:

Hi all,

I am the person who runs GameFromScratch.com.

I haven't updated the tutorials yet, I have written a guide ( that I update as I run into new issues ) that was linked above, documenting the process of upgrading the source code to the newest beta. Beyond the boot loader code, the changes are minor but pervasive. Figuring out what broke took about 10x longer than actually fixing it (especially when I didn't think to check for changed in the project cocos2d.js file!! ). The new revision does make a lot more sense and gets rid of a lot of the "warts", so in the end, it is worth the pain.

If I could offer a suggestion though, I would make main.js configurable, instead of a hard coded requirement as it is now. This is non-intuitive to new developers, and you have to dive into the loader code ( which end users shouldn't touch ) in order to comprehend what is going on. As you are already passing a number of values via config now, this seems like a simple enough fix.

I have successfully ported all of the code to run. So, if you are stumped now, you can download each of the tutorials source code here ( http://www.gamefromscratch.com/post/2012/08/11/Cocos2D-HTML5-Tutorials-updated-to-newest-beta.aspx ). There is also an archive containing all 4 projects, plus the cocos2d sources I ran against, so if you want to just download and run, use that one.

I hope to get the tutorial text updated soon, but it's actually a fairly involved job, so it might take a bit of time.

As a new developer to the platform I agree that it's not very comfortable to force the developer to use a specific file name, But I assum they have a reason for it.
I suggest emailing one of the developers, I think they are more active over there.
I'ts also possible that this change is just made to conform the main cocos2d API, I have never uesd it

Ok, all of the tutorials are updated to the newest API level. If you spot an error, please let me know.

http://www.gamefromscratch.com/page/Cocos2D-HTML-5-Tutorial-Series-table-of-contents.aspx

Hopefully this is it for invasive changes, as that was a gigantic PITA!

Really appreciate the work you've put into this. Look forward to reading through and updating my samples. Thanks for the feedback and information all.

Mike Fleischauer wrote:

Ok, all of the tutorials are updated to the newest API level. If you spot an error, please let me know.

http://www.gamefromscratch.com/page/Cocos2D-HTML-5-Tutorial-Series-table-of-contents.aspx

Hopefully this is it for invasive changes, as that was a gigantic PITA!

Hello Gamefromscratch.com

Firstly, thank you for putting your time and efforts in writing tutorials for Cocos2d-html5.

I was the one who wrote the entry point code. so let me explain why I have done it that way.

1. pass advanced mode in google closure compiler
2. smallest js loader file to load other/big js files
3. Developer can easily identify the entry point, and change starting scene accordingly

• Cocos2d.js
  - this file need to work for both "huge list of .js file" and "single packed obfuscated .js file",
  if we have packed and obfuscated the game code, we can modify this file, removing engineDir and user file list, and specify that onDOMready, load that file.
  else if we are loading a big list of js file, then we will load another file called jsloader.js to handle that.
  This file also contains some other configuration

• jsloader.js
  - This file specifically load all the engine files in order then loads user files in order, if js files were packed into single file, then this file is reduntant
  This also contains 2 methods to load js files to ensure that they loads in order. Only ie9 uses the slow method, which loads next file only when the first is loaded.
  the fast method loads all file as same time, but execute when all have being loaded.

• main.js
  - This file was formally "appdelegate.js" which is a remnant of Cocos2d-iphone, which gets simulated in cocos2d-x, then we ported to js in alpha.
  we don't think any javascript programmer will understand delegate concept. it was also hidden under "classes" directory, many were having problem to find where to change the starting scene
  therefore, I moved this file to root, and renamed it to main.js, so it is much more visible.

Why can't the starting scene be specified in cocos2d.js?
because scenes are not yet defined in cocos2d.js, using "strings" does not work for closure compiler

TLDR
Main.js was formally appdelegate.js
after packing and obfuscation, there is no longer jsloader.js and main.js, just cocos2d.js

Lastly, we have pretty much finalized the API, keep in mind the same API is not only for cocos2d-html5, but for cocos2d-x and cocos2d-iphone as well with JS binding.
but i can rest assure you there won't be more changes thats gonna be this invasive.

Hello Hao Wu,

Thank you for the response. I have relatively little experience with the closure tools, so I apologize if I am ignorant on the limitations, but would the following not be possible?

Change your cocos2d.js file like such:

var c = {
COCOS2D_DEBUG:2,
box2d:false,
showFPS:false,
frameRate:60,
tag:'gameCanvas',
engineDir:'../cocos2d/',
appFiles:['MyFifthApp.js'],
mainFile:'main.js'
};

Then in jsloader.js:

var c = d.querySelector('#cocos2d-html5').c;
    if (c.box2d)
        engine.push('../box2d/box2d.js');
    var loaded = 0;
    engine.forEach(function (e, i) {
        engine[i] = c.engineDir + e;
    });
    var que = engine.concat(c.appFiles);
    que.push(c.mainFile);

It's a very minor change, but it gives the end user complete control over their naming conventions and layout, as well as removing "black magic" files. Again, I do not know if this would work with the closure compiler, but I can fathom why it wouldn't.

Coincidentally, I published a new tutorial ( http://www.gamefromscratch.com/post/2012/08/14/Cocos2D-HTML-Tutorial-6-Spritesheets.aspx ), this one covers sprite sheet/frame

with closure compiler,

you would want to pack the engine file and your game file into 1 single js file,
so jsloader.js is not longer needed (and should not be packed too)

then the cocos2d.js file can just load that single file you packed.

the reason why main.js file need to be in the last of the batch is that it need to know which scene to run.

you cannot specify the scene in cocos2d.js (the first js file), because after obfuscation, your game scene variable will change from "var myGameScene" into "var aDgH".