cgSceneGraph (CGSG) JavaScript HTML5 Canvas framework

cgSceneGraph is a great JS HTML5 canvas framework. It is relatively new project and it is not so well-known like KineticJS but I think cgSceneGraph is impressive.

The cgSceneGraph is fully objectum-oriented framework, it supports complex scenes, it is cross platform (IE 9&10, Chrome, Firefox, Opera, iOS, Android). It support mouse and touch events (what is very comfortable), you can see its full features list here: http://gwennaelbuchet.github.com/cgSceneGraph/about.html

OK, well, let’s see. For example…hmm. How can we create graphical buttons with CGSG?

 <!DOCTYPE html>  
 <html>  
 <head>  
   <meta charset="UTF-8"/>  
   <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>  
   <meta name="viewport"  
      content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no"/>  
   <script type="text/javascript" src="cgscenegraph_1.4.2.min.js"></script>  
   <script type="text/javascript" src="test_anim_class.js"></script>  
 </head>  
 <body style="margin:0px">  
 <canvas id="canvas1" width="80" height="50">  
   Your browser doesn't support the canvas element.  
 </canvas>  
 <script type="text/javascript">  
   var mainCanvas = document.getElementById("canvas1");  
   var game = new CGMainTest(mainCanvas);  
 </script>  
 </body>  
 </html>  

test_anim_class.js:

 var CGMainTest = CGSGScene.extend(  
     {  
       initialize: function(canvas) {  
         this._super(canvas);  
         this.initializeCanvas();  
         this.createScene();  
         this.startPlaying();  
       },  
       initializeCanvas: function() {  
         this.viewDimension = cgsgGetRealViewportDimension();  
         this.setCanvasDimension(this.viewDimension);  
       },  
       createScene: function() {  
         //first create a root node with an arbitrary size and position  
         this.rootNode = new CGSGNode(0, 0, 1, 1);  
         this.sceneGraph.addNode(this.rootNode, null);  
         //add buttons  
         var buttonNode1 = new CGSGNodeButton(10, 10, "Button1");  
         var buttonNode2 = new CGSGNodeButton(130, 10, "Button2");  
         var buttonNode3 = new CGSGNodeButton(250, 10, "Button3");  
         //bind events  
         buttonNode1.onClick = function(event) {  
           alert('onClick event button1');  
         };  
         buttonNode2.onClick = function(event) {  
           alert('onClick event button2');  
         };  
         buttonNode3.onClick = function(event) {  
           alert('onClick event button3');  
         };  
         //add the button nodes as child of the rootNode  
         this.rootNode.addChild(buttonNode1);  
         this.rootNode.addChild(buttonNode2);  
         this.rootNode.addChild(buttonNode3);  
       }  
     }  
 );  

It is easy. And it is full OOP. Well, for example, if you want to set the button properties (background image, color etc.) you can do it very easy:

 buttonNode2.setImageURL("background1.png");  

You can also set background image position etc.:

 buttonNode2.setPictoPosition(CGSGPositionMode.RIGHT);  

And my favourite feature: each object can be draggable and resizeable:

 buttonNode2.isDraggable = true;  
 buttonNode2.isResizable = true;  

Simple animation. cgSceneGraph has complete animation engine It use timeline and animation keys + it support pre-computed animation values.

 var CGMainTest = CGSGScene.extend(  
     {  
       initialize: function(canvas) {  
         this._super(canvas);  
         this.initializeCanvas();  
         this.createScene();  
         this.startPlaying();  
       },  
       initializeCanvas: function() {  
         this.viewDimension = cgsgGetRealViewportDimension();  
         this.setCanvasDimension(this.viewDimension);  
       },  
       createScene: function() {  
         this.rootNode = new CGSGNode(0, 0, 1000, 1000);  
         this.sceneGraph.addNode(this.rootNode, null);  
         var square1 = new CGSGNodeSquare(10, 10, 100, 100);  
         var square2 = new CGSGNodeSquare(140, 120, 100, 100);  
         this.sceneGraph.animate(square1, "position.x", 30, 0, 300, "linear", 0, false);  
         this.sceneGraph.animate(square2, "position.x", 30, 0, 200, "linear", 0, true);  
         this.sceneGraph.animate(square2, "scale.x", 200, 2, 1, "linear", 90, false);  
         this.sceneGraph.animate(square2, "rotation.angle", 30, 0, Math.PI, "linear", 0, true);  
         this.rootNode.addChild(square1);  
         this.rootNode.addChild(square2);  
       }  
     }  
 );  

I think it is correct. You should see more examples: http://gwennaelbuchet.github.com/cgSceneGraph/examples.html

You can extend  CGSGNode class so you can create on your own CGSGNode entities. There is on this URL http://www.rampancylabs.com/ludum25/ a simple game made with cgSceneGraph. It contain some extended CGSGNode class I think is really worth see it.

That’s it. I think You should try it. 🙂

Advertisements
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

2 Responses to cgSceneGraph (CGSG) JavaScript HTML5 Canvas framework

  1. Hi,
    I’m the designer of cgSceneGrap, thank you for this article and the links 🙂
    Every review is important for us to make the tool better 🙂

    The v2 of cgSceneGraph is on the way and will provides a lot of new exciting tools : mask clipping, new event manager, caching system, …, …

    Hope you will like it too 🙂

    Cheers.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s