Your SlideShare is downloading. ×
0
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Sprite js vs craftyjs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sprite js vs craftyjs

6,531

Published on

A comparison between two JavaScrip

A comparison between two JavaScrip

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
6,531
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Sprite.js vs A comparison between JavaScript Game Engines
  • 2. Sprite.js vs <ul><li>Sprite.js is a framework that lets you create animations and games using sprites in an efficient way. Its purpose is to allow a common framework for desktop and mobile browsers and use the latest technology available on each platform. </li></ul><ul><li>Crafty is a lightweight, modular JavaScript game engine to easily produce high quality games. Includes a large variety of components such as animation, event management, redraw regions, collision detection, sprites and more. </li></ul>
  • 3. Sprite.js vs <ul><li>From now on, this row and anything with this colour is related to Sprite.js. </li></ul><ul><li>From now on, this row and anything with this colour is related to Crafty.js . </li></ul>
  • 4. Sprite.js vs <ul><li>It's centered on animation making, and it doesn't provide all the possible features other provide. </li></ul><ul><li>It's a full game engine and supports a great deal of features, but lacks physics support. </li></ul>
  • 5. Sprite.js vs <ul><li>Provides detailed animation making via sprites (2D, Parallel and Isometric views). </li></ul><ul><li>Provides animation making via sprites (2D, Parallel and Isometric views). </li></ul>
  • 6. Sprite.js vs <ul><li>Basic physics support. </li></ul><ul><li>... </li></ul>
  • 7. Sprite.js vs <ul><li>Collision detection. </li></ul><ul><li>Collision detection. </li></ul>
  • 8. Sprite.js vs <ul><li>Explosion special effects. </li></ul><ul><li>... </li></ul>
  • 9. Sprite.js vs <ul><li>Time tracking (via Ticker objects). </li></ul><ul><li>... </li></ul>
  • 10. Sprite.js vs <ul><li>Input control (of keyboard, mouse and touchscreen). </li></ul><ul><li>Input control (of keyboard and mouse). </li></ul>
  • 11. Sprite.js vs <ul><li>Layers. </li></ul><ul><li>... </li></ul>
  • 12. Sprite.js vs <ul><li>Events, path finding.
  • 13. Basic euclidean operations support... </li></ul><ul><li>Events, path finding.
  • 14. Basic euclidean operations support... </li></ul>
  • 15. Sprite.js vs <ul><li>Dynamic background support. </li></ul><ul><li>... </li></ul>
  • 16. Sprite.js vs <ul><li>... </li></ul><ul><li>Entity/Component system (modular, easier and faster to program with). </li></ul>
  • 17. Sprite.js vs <ul><li>... </li></ul><ul><li>Multiple graphics support (text, images, sprites...).
  • 18. Audio support.
  • 19. Random numbers generator. </li></ul>
  • 20. Sprite.js vs <ul><li>Cross browser compatible (WebKit, Firefox, Android phones, Opera and IE9).
  • 21. It works with both DOM and Canvas.
  • 22. Weighs 45.2KB. </li></ul><ul><li>Cross browser compatible (all modern browsers).
  • 23. It works with both DOM and Canvas.
  • 24. Weighs 140KB (14.5KB when minified and compressed). </li></ul>
  • 25. Sprite.js vs <ul><li>See the documentation here: http://readthedocs.org/docs/spritejs/en/latest/ </li></ul><ul><li>See the documentation here: http://craftyjs.com/ </li></ul>
  • 26. Sprite.js vs Ok, now that both have been defined, it's time to get our hands dirty...
  • 27. Sprite.js vs <ul>The following code makes the basics of a shooter (a game loop and a crosshair) for Sprite.js... </ul>
  • 28. Sprite.js vs
  • 29. Sprite.js vs
  • 30. Sprite.js vs <ul>The following code makes the basics of a shooter (a game loop and a crosshair) for Crafty.js... </ul>
  • 31. Sprite.js vs
  • 32. Sprite.js vs
  • 33. Sprite.js vs <ul>From Crafty.js, we still have the Entity/Component Model, it sounds complicated, but think of Components as Classes and of Entities as their Instances. The following code will exemplify it perfectly... </ul>
  • 34. Sprite.js vs
  • 35. Sprite.js vs After having played with both engines, I can come to the conclusion that Sprite.js is better when dealing with animations or simple games, and Crafty.js excels at building complex games that require large amounts of code.
  • 36. Sprite.js vs <ul><li>Sprite.js makes your life extremely easy when dealing with physics and animations, and being able to work with touchscreens gives it a fair advantage when aiming towards the cell phone market. </li></ul><ul><li>Crafty.js boasts the Entity/Component Model, that allows you to simplify the complex abstractions that a bigger game implies. We can make an analogy with the classic Object Orientated Programming by comparing Components to Classes and Entities to Instancies. </li></ul>
  • 37. Sprite.js vs And well, that was all. I hope it will be useful to you all. Thanks for watching!
  • 38. Sprite.js vs

×