diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/caat.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/caat.jpg new file mode 100644 index 00000000..650b75e5 Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/caat.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/craftyjs.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/craftyjs.jpg new file mode 100644 index 00000000..d02fa976 Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/craftyjs.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/create.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/create.jpg new file mode 100644 index 00000000..a49ee229 Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/create.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/easyjs.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/easyjs.jpg new file mode 100644 index 00000000..f11d1dd9 Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/easyjs.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/fabricjs.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/fabricjs.jpg new file mode 100644 index 00000000..2ae430e4 Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/fabricjs.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/impact.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/impact.jpg new file mode 100644 index 00000000..a83d9000 Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/impact.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/jaws.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/jaws.jpg new file mode 100644 index 00000000..9363b18e Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/jaws.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/joint.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/joint.jpg new file mode 100644 index 00000000..a488926d Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/joint.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/kineticjs.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/kineticjs.jpg new file mode 100644 index 00000000..798f17c1 Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/kineticjs.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/lime.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/lime.jpg new file mode 100644 index 00000000..a3d6b68e Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/lime.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/melon.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/melon.jpg new file mode 100644 index 00000000..f43c2561 Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/melon.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/ocanvas.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/ocanvas.jpg new file mode 100644 index 00000000..f6612add Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/ocanvas.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/paper.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/paper.jpg new file mode 100644 index 00000000..171e5928 Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/paper.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/processing.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/processing.jpg new file mode 100644 index 00000000..2b7dae31 Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/processing.jpg differ diff --git a/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/three.jpg b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/three.jpg new file mode 100644 index 00000000..1aff7c5f Binary files /dev/null and b/source/assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/three.jpg differ diff --git a/source/posts/2014-07-06-html5_canvas_javascript_libraries.md b/source/posts/2014-07-06-html5_canvas_javascript_libraries.md new file mode 100644 index 00000000..2df9d0ec --- /dev/null +++ b/source/posts/2014-07-06-html5_canvas_javascript_libraries.md @@ -0,0 +1,163 @@ +--- +title: HTML5 Canvas Javascript Libraries +date: 2014-07-06 +author: leylakapi +tags: game, development, html5, canvas, javascript, libraries, frameworks, en +--- + +## Which libraries should we use in javascript for game development ? + +While I looking for javascript library, I found some javascript libraries are used for game development. +This libraries : + + * provide tools to create animations for game development, + * helped to find graphical objects for games, + * provide to useful functions which use in your game project ...etc + +15 Useful javascript libraries for game development like below : + + * [Canvas Advanced Animation Toolkit](http://hyperandroid.github.io/CAAT/) + * [Kinetic.js](http://kineticjs.com/) + * [Fabric.js](http://fabricjs.com/) + * [Crafty.js](http://craftyjs.com/) + * [Create.js](http://www.createjs.com/) + * [Easel.js](http://www.createjs.com/#!/EaselJS) + * [oCanvas](http://ocanvas.org/) + * [Paper.js](http://paperjs.org/) + * [Processing.js](http://processingjs.org/) + * [Three.js](http://threejs.org/) + * [Jaws.js](http://jawsjs.com/) + * [Impact.js](http://impactjs.com/) + * [Lime.js](http://www.limejs.com/) + * [Melon.js](http://melonjs.org/) + * [Joint.js](http://www.jointjs.com/) + +Let's continue to take info about html5 canvas javascript libraries. + +1- [Canvas Advanced Animation Toolkit](http://hyperandroid.github.io/CAAT/) + + * CAAT is javascript animation toolkit. + * CAAT is a director-based scene graph manager + * CAAT provide useful and powerful animation environment + * CAAT is a platform and works with CSS, WebGL and Canvas. + * In addition, CAAT is not only create awesome scene and actors but also has facilities to managing audio. + * Open source code in [here](https://github.com/hyperandroid/CAAT) + +![CAAT](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/caat.jpg) + +2- [Kinetic.js](http://kineticjs.com/) + + * Kinetic.js is HTML5 Canvas javascript framework that enable powerful animations, + rotations, transition, node nestings, layering, filtering, caching ..etc + * Open source code in [here](https://github.com/ericdrowell/KineticJS) + +![Kinetic](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/kineticjs.jpg) + +3- [Fabric.js](http://fabricjs.com/) + + * Fabric.js provides to missing object model on canvas, as well as SVG parser. + * Also, it provides to animation, geometrical shape, graphics. + * Open source code in [here](https://github.com/kangax/fabric.js/) + +![Fabric](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/fabricjs.jpg) + +4- [Crafty.js](http://craftyjs.com/) + + * Crafty provides to build prototypical or full-featured 2D html5 games. + * Crafty uses syntax similar to [jquery](http://jquery.com/) by having a selector + engine to select entities by their components. + * Open source code in [here](https://github.com/craftyjs/crafty/) + +![Crafty](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/craftyjs.jpg) + +5- [Create.js](http://www.createjs.com/) + + * Create.js is comprehensive web editing interface for content management systems. + * It provide modern full browser-based html5 environment for managing content. + * OPen source code in [here](https://github.com/CreateJS/) + +![Create](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/create.jpg) + +6- [Easel.js](http://www.createjs.com/#!/EaselJS) + + * Easel.js provide to working with canvas element easier. + * Also it provides shape based mouse interaction on elements. + * This javascript library is useful for games thanks to awesome graphics and generative arts. + * Open source code in [here](https://github.com/CreateJS/EaselJS/) + +![Easel](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/easyjs.jpg) + +7- [oCanvas](http://ocanvas.org/) + + * OCanvas provide to working with object instead of pixels for html5 canvas elements. + * It provides to be faster and easier than writing pure javascript on the canvas. + * Open source code in [here](https://github.com/koggdal/ocanvas) + +![oCanvas](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/ocanvas.jpg) + +8- [Paper.js](http://paperjs.org/) + + * Paper.js is vector graphics scripting framework that runs on top of html5 canvas. + * It offers to clean DOM and a lot of awesome functionality vector graphics, animations and images. + +![Paper](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/paper.jpg) + +9- [Processing.js](http://processingjs.org/) + + * Processing.js provide to makes your data visualizations, digital arts, interactive animations, + educational graphs, games ..etc + * Open source code in [here](https://github.com/jeresig/processing-js) + +![Processing](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/processing.jpg) + +10- [Three.js](http://threejs.org/) + + * Three.js is library that makes [WebGL](http://get.webgl.org/), 3D in the browser. + * it provides to make powerful 3D animations. + * Open source code in [here](https://github.com/mrdoob/three.js/) + +![Three](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/three.jpg) + +11- [Jaws.js](http://jawsjs.com/) + + * Jaws.js is core functions. + * Jaws is 2D game development framework. + * It provide to make assets(images, musics, json data) in web-games as easy as possible. + * Open source code in [here](https://github.com/ippa/jaws) + +![Jaws](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/jaws.jpg) + +12- [Impact.js](http://impactjs.com/) + + * Impact.js is a javascript game engine, it offer 2D animations, graphics, images for web and desktop games. + * It support on all html5 capable browsers and include `iPhone`, `iPod Touch` and `iPhone` . + +![Impact](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/impact.jpg) + +13- [Lime.js](http://www.limejs.com/) + + * Lime.js offers to support for all mobile platforms. + * It provide to support videos and better audio. + * Open source code in [here](https://github.com/digitalfruit/limejs) + +![Lime](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/lime.jpg) + +14- [Melon.js](http://melonjs.org/) + + * Melon.js is a fresh-lightweight 2D sprite-based engine. + * It support multiple audio channel support. + * It integrated tiled map format. + * Open source code in [here](https://github.com/melonjs/melonJS) + +![Melon](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/melon.jpg) + +15- [Joint.js](http://www.jointjs.com/) + + * Joint.js is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs. + * Joint js is known diagramming library in javascript libraries. + * Open source code in [here](https://github.com/DavidDurman/joint) + +![Joint](../assets/images/articles/2014-07-06-html5-canvas-javascript-libraries/joint.jpg) + + +That' s all. \ No newline at end of file