cocos2d/cocos2d-html5

Cocos2d for Web Browsers. Built using JavaScript.

cocos2d-html5's Issues

Git checkout version can't run demo

CCTextureCache dumpCacheTextureInfo doesn't work

It seems to assume that anything in this.textures is Texture2D, when they are in fact just instances of Image.

    for (var key in this.textures) {
        var tex = this.textures[key];
        var bpp = tex.bitsPerPixelForFormat();
    ...

cc.BuilderReader missing setResolutionScale

The setResolutionScale is missing in cocos2d-html5 (see CCBReader-iphone for reference) which makes it impossible to make CocosBuilder games with different scaling then the default iPhone version.

How to check if a sound effect is playing and its duration?

In cocos2d-iphone, there is a CDSoundSource which could be used to check if a sound is playing and its duration. Please support this in cocos2d-html5.

hardcode in jsloader.js

why to hardcode like this: que.push('main.js');
if do this, I dont change my dir of main.js.

CCNode.js - setPosition Bug and fix.

I found bug in setPosition function in CCNode.js.
when second argument value is 0, under else-if cluase will executed.
It is not intended to execute.
because maybe progrmamer want y-value is zero(0).

so, undefined check is essential.

old new
... ... @@ -479,7 +479,7 @@ cc.Node = cc.Class.extend(/** @Lends cc.Node# */{
479 479 setPosition:function (newPosOrxValue, yValue) {
480 480 //save dirty region when before change
481 481 //this._addDirtyRegionToDirector(this.getBoundingBoxToWorld());
482 - if (yValue) {
482 + if (typeof yValue != "undefined") {
483 483 this._position.x = newPosOrxValue;
484 484 this._position.y = yValue;
485 485 //this._position = cc.p(newPosOrxValue,yValue);

cc.FadeOut always begins on opacity 255

If you try to run a FadeOut with a Node which have opacity < 255, the action is performed from 255 to 0.
I'd have to use other action instead or it's an unexpected behaviour?

tests/extensions test/CocosBuilderTest is unable to run

tried to use cocos2dx-html5 with cocosbuilder, official test could not work currently.

when running tests/extensions test/CocosBuilderTest, got
Uncaught TypeError: Cannot call method 'setPosition' of null :8000/extensions/CCBReader/CCNodeLoader.js:691
in the console output

IE9(CCProgressTimer) - DOM Exception: INDEX_SIZE_ERR

Hi, I ported my game to cocos2d-html5 and the game work fine in Chrome and Firefox, but on IE this is not working.

Follow the error:

DOM Exception: INDEX_SIZE_ERR (1)
CCProgressTimer.js, line 300 character 21

I'm using Cocos2d-html5-v2.0.0

Thanks all!

API improvements: cc.AnimationCache.AddAnimationsWithFile() -> addAnimations()

I propose to rename the method AnimationCache.addAnimationsWithFile() to addAnimations() (removing the withFile suffix).

plist's rotated frames are not working properly

Plist´s are working fine except when you have rotated elements inside the texture. It seams that the framework is considering that the sprite is rotated when only the texture is.
This generates a big problem when a Sprite has children because it affects the rotation of them.
Also when you are using animation generates the same problem, you will be having frames that looks fine but other ones will be rotated depending on the way you defined the Sprite.
This is very simple to reproduce, just create a plist, and force the texture to rotated one of the elements. Here is the psudo code:

var parent=cc.Sprite.createWithSpriteFrame("Rotated texture on plist");
var child=cc.Sprite.createWithSpriteFrame("Non Rotated texture on plist");
parent.addChild(child);
.

This will show the parent correctly but the child will be shown rotated.

Let me know if you need more information or if I misunderstanding something, but I think that is very clear.

You are making an amazing work, let me know if you need any help.

Regards
Sergei

Trouble Getting Started

Hi All,

I'm trying to run some of the samples locally.

HelloHTML5World works great!

The test cases fail and MoonWarriors fail with

Uncaught cocos2d:unknow type : bgm CCLoader.js:185
cc.Loader.cc.Class.extend.preload CCLoader.js:185
cc.Application.extend.ctor main.js:41
(anonymous function) CCClass.js:138
Class CCClass.js:117
(anonymous function) main.js:64

WatermelonWithMe fails with

Uncaught cocos2d:unknow type : effect CCLoader.js:185
cc.Loader.cc.Class.extend.preload CCLoader.js:185
cc.Application.extend.ctor main.js:41
(anonymous function) CCClass.js:138
Class CCClass.js:117
(anonymous function) main.js:64

And CocosDragonJS fails with

Uncaught TypeError: Cannot call method 'extend' of undefined cocos2d-html5.min.js:1140
(anonymous function) cocos2d-html5.min.js:1140

Also when I compile via

cd cocos2d
ant compile_Canvas

When I include the Cocos2d-html5-v2.1.min.js file that's generated by the closure compiler in a simple html page I get

Uncaught TypeError: Cannot read property 'loadExtension' of undefined Cocos2d-html5-v2.1.min.js:919

For reference, I'm running Chrome Version 23.0.1271.97 on Mountain Lion.

Help :)!

cocos2d 's JS compress file "build.xml" is not update to Version 2.1

cocos2d 's JS compress file "build.xml" is not update to Version 2.1 ?

Property '_selector' of object #<Class> is not a function

activate:function () {
if (this._isEnabled) {
if (this._listener && (typeof(this._selector) == "string")) {
this._listenerthis._selector;
} else if (this._listener && (typeof(this._selector) == "function")) {
this._selector.call(this._listener, this);
} else {
//console.log(this._selector);
this._selector(); // Property '_selector' of object # is not a function
}
}
}

when i click menuitem

LabelTTF does not support multiline

cc.LabelTTF does not support multiline.

steps to reproduce it:
run "actiontests" or this code:

cc.LabelTTF.create("Hello\nmultiline\nworld","Arial", 18);

Sound is failing (at least on Mac)

CocosDenshion test: Click the play sound effect multiple times, it will play the sounds the first couple of times, then fail. Sometimes it starts working again. Sound effects are not working in Firefox at all.

keyboard auto popup

Dears, when we deploy a game on Nexus 7, the keyboard auto popup when game load, and we found the code in CCKeyboardDispatcher.js like this: cc.canvas.setAttribute('contentEditable', true), now we commented it at now, and if has any other method to fix the problem?

CCDirector.setAnimationInterval might have no effect

setting animation interval on director to a value other than the default 1/60 has no effect on browsers that implement window.requestAnimFrame. this line seems to be the cause: https://github.com/cocos2d/cocos2d-html5/blob/master/cocos2d/platform/CCApplication.js#L244 There needs to be a logic that would not refresh the scene more often than the needed frame rate.

Calls to "update" spradically freeze and cause jittery animation

Animations appear to be jittery when using "update" to handle the animation.

It appears that occasionally the frame rate drops to very low values e,g, 5 fps for an instant.

I've tried animating movement using MoveTo but it also has the same issue.

I've tested this on Firefox 17 OSX and Safari OSX and also on iPad 2, and all these platforms have this issue.

The issue can be seen in the Hello World example, if you look carefully at the text animated movement, however its very clear in this simple game I've been working on

http://www.rogerclark.net/demos/html_traffic_control/

Note. The background is a LazyLayer (but it doesnt seem to matter whether its a LazyLayer of not).

images of the "cars" are PNG24 with transparency, and are multiple of 2 pixels in size - I'm not sure if multiples of 2 or factors of 2 make any difference to web performance.

EDIT.

I've run some tests and the rate at which update is called varies quite a lot.

When running in normally, I get values if "dt" (delta time) as low as 0.001 sec with frame rate set to 60 FPS. But dt=0.001 is 1000 FPS, and as high as 0.13 which is approx 13 FPS.

This would probably explain the jitter in the animations.

I guess I'll need to put debug in the core of cocos2dHTML to see why this is occurring :0(

Extending cc.Sprite prevents ctor usage

If you do this (create a physics engine powered sprite):

var CPCircleSprite = cc.Sprite.extend({

    ctor: function(physWorld, filename){
        this.physBody = new SomePhysBody();
        this._super(filename)
    }

    ,setPosition: function(point){
        this.cpBody.setPos( new cp.Vect( point.x, point.y ) )
        this._super(point);
    }
});

var sprite = new CPCircleSprite(physWorld, 'some/filename.png');
sprite.setPosition( cc.p( 10, 10 ) )

The defined above setPosition function will never be called, because in cc.Node#ctor, this magic happens:

this.setAnchorPoint = this._setAnchorPointByValue;
this.setPosition = this._setPositionByValue;      // <----- 
this.setContentSize = this._setContentSizeByValue;

Behavior like this implies that some methods are over-writable, and others aren't. It took me an hour to track this down, after questioning my sanity ("am I spelling it wrong? do I not understand fundamental inheritance concepts!?").

I "solved" it by not calling this._super() in the subclass constructor, but that's not an acceptable fix.

I am very new to Cocos2D/x, so perhaps I'm just using it wrong?

On a cc.Sprite w/ children, initWithTexture called twice

This unexpected behaviour overrides properties like the opacity, anchorPoint, flipX, flipY using the default values.

For ex, on cc.Sprite:492, I fixed the problem using:

this._opacity = this._opacity || 255;


instead of

this._opacity = 255;


typeof tempArray == "Array" not work in cc.Sequence.create

In javascript, type of Array always return “object". This will break the condition in cc.Sequence.create.
To fix it: replace typeof tempArray == "Array" with Array.isArray( modern browsers ) or toString.call(tempArray) == '[object Array]' .
This fix borrows from http://underscorejs.org, which is an excellent JS lib.

API improvements: cc.Sprite.createWithSpriteFrameName() inconsistency

Sprite.createWithSpriteFrameName() is confusing since it accepts both a spriteFrame and a spriteFrameName.

What it should do is to accept only spriteFrameName types.

Another constructor should be added for spriteFrame.
eg:
Sprite.createWithSpriteFrame().

Note: the current API is not compatible with the JS Bindings.

CocosDenshion is always required

Cocos2D always loads the audio engine, hence both the Cocos2D and CocosDenshion folders are always required even if the game doesn't have any sound.

Perhaps it would be better if a flag was added in ccConfig to specify whether audio support was required, in the same way that Box2D, Chimpmonk and the Extensions have flags in ccConfig.

Or perhaps CocosDenshion needs to be a subfolder of Cocos2D if its always required.

API compatibility: replace cc.RANDOM_0_1() with Math.random()

I noticed that cocos2d-html5 uses some macros from cocos2d-iphone / cocos2d-x.

It is very important, whenever possible, to use JS friendly API.

I propose to replace cc.RANDOM_0_1() with the built-in JS API: Math.random()

setOpacity on parent doesn't affect the opacity on children

For example, if you have this scenario:

var child = cc.Sprite.create("res/child_texture.png");
child.setOpacity( 0.5 * 255)
child.setPosition( cc.p( 100, 100 ) );

var parent = cc.Sprite.create("res/parent_texture.png");
parent.setOpacity( 0.5 * 255 );
parent.addChild( child );

You got both the parent and his child with its texture at 50% alpha, is this an expected behaviour?
Shouldn't be parent at 50% alpha and his child at 25% alpha? Isn't opacity relative to ancestors?

Bug in cc.ParticleSystem. Errors occur when init with plist file

hi there!

An error " Assertion failed: Invalid emitterType in config file " occur , when i init a particle system with plist file calling cc.ParticleSystem.initWithFile(plistFile) .

In my plist file , the value of "emitterType" is 0 . That means the emitter type is cc.CCPARTICLE_MODE_GRAVITY.

Eventually , i found what cause this problem.

In CCParticleSystem.js file, function "cc.ParticleSystem._valueForKey(key, dict) " return a string value.

var pString = dict[key];
return pString ? pString : "";

when pString=0, the function return "", but not zero value!!

Notice that pString can be a number .

If the parameter key="emitterType", the value dict[key] is a number , but not a string.
And that will make this thing-----> cc.Assert(false, "Invalid emitterType in config file") be called.

Thanks! And cocos2d-html5 is an awesome stuff !! :)

cc.LayerGradient is broken in Firefox

cc.LayerGradient works ok on Chrome and Safari, but it looks really bad in Firefox.

Tested on Firefox 16.0.2, in OS X 10.7.4

How to test it:
Run the Layer Test, and go to the Gradient subtest

cocos2d-html5 github repo is broken

If you try to clone the repo, and update the modules, it will raise the following error:

$ git submodule update --init
Submodule 'tests' (https://github.com/cocos2d/cocos2d-html5-tests.git) registered for path 'tests'
Cloning into 'tests'...
fatal: reference is not a tree: 85b38463593ff870b09124fe75fe648ce86c0e92
Unable to checkout '85b38463593ff870b09124fe75fe648ce86c0e92' in submodule path 'tests'

This post explains how to fix it:
http://stackoverflow.com/questions/2155887/git-submodule-head-reference-is-not-a-tree-error

Array has no method 'size'

Error code in cc.Menu.js
Uncaught TypeError: Object 2 has no method 'size'

338 // check if too many menu items for the amount of rows/columns
339 cc.Assert(column < columns.size(), "");

variable typeof columns is "array"
but Array has no method 'size'

Add minified version

cocos2d-html5 needs a minified version and non minified version too.
eg:

• cocos2d.js (all files together)
• cocos2d.min.js (all files together with uglifyjs )

Also, it would be great if that could be added in a Makefile file.
Sample (taken from Chipmunk-JS) project:
https://github.com/josephg/Chipmunk-js/blob/master/Makefile

Uflifyjs homepage:
https://github.com/mishoo/UglifyJS

The workflow would be the following:

• You modify CCSprite.js... and then what you have to do is type:
  $ make
  and it will generate the cocos2d.js file.

solución para reproducir música y efectos

Logre reproducir bien música y efectos de la siguiente forma:

Precargandolos así: (note la diferencia entre la música y los efectos)

    cc.AudioEngine.getInstance().init();
    cc.AudioEngine.getInstance().preloadEffect("res/effect2");
    cc.AudioEngine.getInstance().preloadMusic("res/background.ogg");

Y llamando la función así:

cc.AudioEngine.getInstance().playEffect("res/effect2.ogg",false);
cc.AudioEngine.getInstance().playMusic("res/background",false);

de esta forma soluciona todas la reproducción de música y efectos.

Size of particles is too big

The individual particles are much larger (twice the size?) on html5 than on cocos2d-iphone.

TMXLayer setTileGID method dosen't not work correctly.

I am making Game Map Tool.
and I found problem using TMXLayer's function.

I did load tmx information from tmx file.
In function test( working that painting map-tile on the map, and erase map-tile repeatedly,
I hava found bug that a few tile don't work correctly( not paint and not erase(blank tile)
ex) 1~5 map-tile in 20 map-tiles.

and also I found gid value is not synchronize drawing routine.
I thought before removing map-tile clause(=if(gid){}) execution, gid value is 0 value.
so i delete that clause temporarily.

---

[problem situation]
var layer = map.layerNamed("MapLayer"); // MapLayer

        if( tile_button == ID_EMPTY_TILE) {
            console.log("empty_tile");
        }

        console.log(layer.tileGIDAt(coord));

        var parent = layer.getParent();

        layer.setTileGID(tile_button, coord, 1);

---

[patch]
... ... @@ -374,7 +374,7 @@ cc.TMXLayer = cc.SpriteBatchNode.extend(/* @Lends cc.TMXLayer# _/{
374 374
375 375 var gid = this.tileGIDAt(pos);
376 376
377 - if (gid) {
377 + // if (gid) {
378 378 var z = pos.x + pos.y * this._layerSize.width;
379 379 var atlasIndex = this.atlasIndexForExistantZ(z);
380 380 // remove tile from GID map
... ... @@ -405,7 +405,7 @@ cc.TMXLayer = cc.SpriteBatchNode.extend(/* @Lends cc.TMXLayer# /{
405 405 }
406 406 }
407 407 }
408 - }
408 + // }
409 409 },
410 410
411 411 /

Problem with calls to update when returning to a game running in another tab in firefox

I've not entirely sure what's happening but...

If you have a game running in a tab in firefox, and you go to another tab i.e another website for a while;
When you return to the tab that is running the game, it appears to have "backed up" a load of update events and fires them off in quick succession

e.,g. I have a game which adds sprites at random time intervals in the update function.

ie in update, I call Math.random and if the value is greater than a constant, I add a sprite.

This works fine if the game is running in the foreground / active Tab in firefox, however if I leave the tab and look at another website then return to the game tab, it appears to generate loads of sprites in quick succession, so either Math,random isn't working, or update is being called in very quick succession over and over again.

If you leave the tab for 1 minute or so, when you re-activate the tab, you'll notice that there is a definite delay while loads of new sprites are added.

I know I can probably trap the focus on the tab and take measures to prevent loads of sprites being created, however I'm not sure how valid it is to return to a tab and have to process loads of update events.

EDIT.

I did some more research and when the game is returned to, I get one call with a long value of "dt" but this seems to max out at around 32 secs regardless how long the game tab was inactive.
I also get updates of dt==0 on reactivating the tab with the game in it.

dt==0 was causing my game problems, so I've taken steps in the code to ignore these.

Additive blend mode not working correctly for cc.LayerColor

Blend modes for cc.LayerColor is not working correctly. I get different results on iOS and html5. More specifically, additive blending is rendered as normal blending. Eg. gPowerPlayLayer.setBlendFunc(gl.SRC_ALPHA, gl.ONE);

Add Texture2D abstraction support

cocos2d-html5 is not using the Texture2D abstraction internally... and although it might not needed it for "canvas" it is still very useful. Example:

• In the future, when WebGL support is added
• to be compatible with JSB.

Right now "anti aliasing" is supported in JSB, but in html5 is simply crashes because the method setAliasTexParams is not implemented, in the HTMLImage object.

This could be easily fixed if we use Texture2D as an abstraction of Image.

In canvas, the Texture2D object contains an HTMLImage, and in WebGL it contains a real texture object.

Tinting sprites seems to be broken under certain conditions

This PR ( cocos2d/cocos2d-js-tests#60 ) adds a new test that reproduces tinting on sprites.

For some reason, when you tint 2 sprites manually, the 2nd sprite breaks.

Firefox will throw an exception.
Chrome will execute the JS code, but it won't display the 2nd sprite.

Relative pathes for BitmapFonts config

Current implementation does not use fullPathFromRelativePath for FontConfig (.fnt) files

MenuItemToggle does not handle correctly the optional "this" parameter

How to test it:

• Apply this pull request for the tests: https://github.com/cocos2d/cocos2d-html5-tests/pull/40
  • Run the "menu test"
  • Configuration -> Music

Uncaught TypeError: Object function Class

Uncaught TypeError: Object function Class() {
// All construction is actually done in the init method
if (!initializing && this.ctor)
this.ctor.apply(this, arguments);
} has no method 'shareLoader'

Chrome v22
Ubuntu 12.04

getBoundingBoxToWorld() doesn't work on flipped Sprites with children

It returns the same Rectangle, though the boundaries has changed after flipping the node

Tiled + zlib = not supported?

Hi,

it took me some time to figure out what I were doing wrong while loading a tmx tilemap. I started out by installing tiled, loading a simple png tileset and by creating a basic tilemap. I saved it and tried to load it just as in the samples. But actually I got strange errors:

cocos2d: Warning: TMX Layer Kachelebene 1 has no tiles
Assertion failed: TextureAtlas.initWithTexture():texture should not be null
Uncaught TypeError: Cannot read property 'width' of undefined

I tried the sample maps and they did load. Finally I debugged the parser and came to the conclusion that zlib is not yet supported, but the cc.Assert before accepts it. As tiled standard compression setting is zlib (at least on my mac) it should be mentioned somewhere and a readable error should be thrown.

Here the excerpt from CCTMXXMLParser.js (note line 1 and the case 'zlib'):

cc.Assert(compression == null || compression == "gzip" || compression == "zlib", "TMX: unsupported compression method");
switch (compression) {
case 'gzip':
layer._tiles = cc.unzipBase64AsArray(nodeValue, 4);
break;
case 'zlib':
//Not Implemented
break;
// Uncompressed
case null:
case '':
if (encoding == "base64") {
layer._tiles = cc.Codec.Base64.decodeAsArray(nodeValue, 4);
}
else {
layer._tiles = cc.StringToArray(nodeValue);
}
break;
default:
cc.Assert(this.getLayerAttribs() != cc.TMXLayerAttribNone, "TMX tile map: Only base64 and/or gzip/zlib maps are supported");
}

CCLoader error when preload resource twice

If you preload resources at runtime and you happen to preload a resource twice, the loader ends up in an infinite loop.

eg:

cc.TextureCache.getInstance().addImage(filename);
will call
cc.Loader.shareLoader().onResLoaded();
which increments loadedResourceCount in the cc.Loader

when later using cc.Loader.shareLoader().preload(res) , loadedResourceCount will be higher than resourceCount, so the isLoadedComplete never triggers the onLoad

Or am I doing something wrong?

Particles and FF16

The particle test "crash" when testing them on Firefox 16.0.2.

It crashes with the test that comes right after "Ring Particle".
Apparently Firefox 16 enters in an infinite loop.

It works OK in Chrome though.

demo dont't work now

When I update the newest codes of alpha2, but when I browser the demo page, but it not work now...

platform/JXGUtil.js not found from cocos2d/build.xml

It might be a typo or ZipUtils.js??

Minor: cursor changes on contentEditable canvas when Keypad is enabled

When Layer.setIsKeypadEnabled(true) is called, canvas contentEditable attribute is set to 'true'
Cursor is then drawn as a carret when the canvas is hovered.
To reset the style, you can add in CCKeypadDispatcher.js line 295:

cc.canvas.style.cursor='default';
after
cc.canvas.setAttribute('contentEditable', true);

Thanks for the good job.

"Texture mode" in particles does not work

How to reproduce it:

• Download cocos2d-html5 master
• run the Particle test
• Press "Left" arrow... It will take you to the "Phoenix" test
• Press the "Shape mode" button

Crash (...)

The error in the console is:

[20:48:58.261] Image corrupt or truncated: data:image/png;base64,TU0AKgAAQAgAA...
[...]
...D13vZt9vv3ivgZ+Kj5OPnH+lf65/t3/Af8mP0p/br+S/7c/23//w==
--
[20:49:10.920] NS_ERROR_NOT_AVAILABLE: Component is not available @ http://localhost/cocos2d-html5/cocos2d/sprite_nodes/CCSprite.js:50

Tested on:

• Chrome 22 OS X
• FF 16 OS X

LayerGradient does not rotate correctly

Apparently the fix for issue #610 broke the rotation code.

How to reproduce it:

• Run most recent version of cocos2d-html5 / cocos2d-html5-tests
• Run the Layer tests
• Run the LayerGradient test
• Rotate the Layer

You will notice the colors of the Layer change when you rotate it, and they should remain the same.