Cocos2d HTML5 gl.clearColor (glClearColor)

Just a quick note cos it took me bloody ages to find, but here’s the Cocos2d HTML5 (js) way of setting the GL clear color to something other than black. Originally on the iPhone I’d use glClearColor(), so the equivalent in JavaScript is:

var gl = cc.renderContext;
gl.clearColor(0.5, 0.4, 0.2, 0);

 

The parameters are R, G, B, and alpha as you’d expect.

New Technology – Cocos2D HTML5 and Screen Coordinates

It’s always interesting to start using some new tech, and I’ve just started dabbling with Cocos2d-html5:

http://www.cocos2d-x.org/projects/html5

It’s nice because you now write in JavaScript and easily port your game across iPhone, Android and browser. However, it is *nowhere* near as well-supported by the community as Cocos2D for iPhone is. As such, a particular headache of mine recently has been trying to get accurate screen coordinates from a moving mouse pointer. Bascially I want to orient a sprite to point at the mouse pointer when it’s hovered over the game area. The problem I was having is that the onMouseMoved() event returns the coordinates in the browser window, not the game area. Also, coordinates were in window format rather than the game world, so some conversion was needed there. The following function is my solution (with a little help from the forums), and should return world coordinates when the mouse is hovered. It takes the event passed to onMouseMoved() as a parameter.

convertMouseCoords:function(mouse)
{
    var scale = cc.Director.getInstance().getContentScaleFactor();
    var origin = cc.EGLView.getInstance().getViewPortRect();
    mouse.getLocation().x -= origin.origin.x;
    mouse.getLocation().y -= origin.origin.y;
    mouse.getLocation().x /= scale;
    mouse.getLocation().y /= scale;
    var location = mouse.getLocation();
    // work out proportion into screen of mouse coords, then apply to world dimensions to get "proper" touch location
    size = cc.Director.getInstance().getWinSize();
    var propX = location.x / origin.width;
    var propY = location.y / origin.height;
    location.x = size.width * propX;
    location.y = size.height * propY;
    return location;
}