As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have used a few javascript frameworks in my career as a developer. Namely jquery, moo tools and atlas. But all of my experience is surrounding professional corporate site development. I am currently working on a game that will have a very rich UI. I am contemplating implementing the UI entirely in javascript and HTML. So right now I'm in the process of researching my options in that regard. Is there a javascript framework out there that I can use that will help me create a rich game UI?
Specifically I need to animate characters and effects. This can be frame by frame if necessary or even hinged like what a lot of flash animations like to use. The ideal framework would have built in functionality to take art assets and perhaps an XML payload that when interpreted would describe how the art assets relate to eachother. For frame by frame this would be a way for me to tell it what sequence the images come in and how fast to switch the frames. For a hinge-type framework it would be a way for me to tell it where to position the arms, legs, where joints are and allow me to group specific joint movements into animations. Lastly the ideal framework would support paper doll functionality where I can use layering to put a pair of glasses on a character for example, or different clothing or hair color.
I realize that most likely the ideal I describe above is not available but if there is something that gets me closer to my ideal from jquery or other similar frameworks it will help me in my decision.
Thanks
Your asking for something far too specific here. When it comes to rendering games to the screen you have 3 mainstream non-plugin options
Canvas
The canvas is a raster based display. You can use a narrow abstraction on the canvas like easel.js or a heavy abstraction like The render engine. Now these probably don't have the fine grained features you want.
The reason they don't is performance. Highly performant code and high level abstractions do not go hand in hand. You will find that using the a heavy abstraction over a lightweight one comes at a serious performance cost.
SVG
You can use SVG, which renders as vector based graphics. A good abstraction library for SVG is rapheal. Again there are no high level abstraction libraries or frameworks for what your looking for simply because of performance costs.
DOM
You can also render by simply using DOM manipulation. Any library like jQuery or MooTools will do for this. If you want to use HTML UI elements rather then customly generated ones you can use some of the heavy weight UI toolkits like Sencha, SproutCore and Cappucino.
There isn't anything generic and mainstream out there to make your life easy yet. You can look at some javacript game engines like crafty
Javascript Game frameworks:
Impact JS
Akihabara
GameQuery
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I'm looking for (javascript or HTML-based) chart libraries that work on Internet Explorer. Any suggestions? Interactivity is a plus, but not necessary.
I've tried using Flot, but I'm having trouble getting it to work in IE8 (though a recent patch fixed it for IE9). I've also used the Google Chart API, but something a little more easily customizable would be preferred.
It depends a bit on what all you need to accomplish with your library,
but maybe you'll find these musings useful...
You can do quite a bit with just CSS
and make your own "library", albeit a limited one,
for graphs such as horizontal bar charts.
For instance:
http://meyerweb.com/eric/css/edge/bargraph/demo.html
http://applestooranges.com/blog/post/css-for-bar-graphs/
jQuery Sparklines is not a true "library", either,
but it has some great options, and it works all the way
back to IE 6. Definitely underrated.
http://omnipotent.net/jquery.sparkline/
Highcharts could be a good bet.
http://www.highcharts.com/
If Protovis had full support for IE, it might have to be
considered the best, because it adheres to best practices for data visualization.
However, it doesn't have the world's most accessible api, and it doesn't support IE, at least not entirely - read issue 15:
http://vis.stanford.edu/protovis/
http://code.google.com/p/protovis-js/issues/detail?id=15
Amcharts has flash-based charts at the moment, but take note:
I believe they are working on javascript library for their charts.
If and when they do come out with their library, I have a feeling
it will be pretty good.
http://www.amcharts.com/
Please also consider this when choosing a library:
if you see a plethora of 3-d stacked pie charts, or glossy bars, or drop-shadows,
then be careful: it's a good bet the makers of those charts didn't create them with
data visualization best practices in mind.
For any JavaScript chart library to work on IE 6,7,8, they need to render the chart in VML. Hence, libraries rendering using SVG or Canvas only wouldn't work (hence d3.js based solutions wouldn't work). The following libraries currently have support on IE 6,7,8 as they use a hybrid of SVG and VML:
FusionCharts JavaScript Charting # http://www.fusioncharts.com
HighCharts # http://www.highcharts.com
Any JavaScript charting library built on top of Raphael JS e.g., amcharts, gRaphael would also work on IE6,7,8.
have you tried telerik
http://www.telerik.com/
i did not use it myself, but a friend of mine thinks it is doing the job.
Check out the recently released amCharts JavaScript bundle. It brings all the interactivity of the Flash charts but in JS/HTML5.
I've used jqPlot in the past and it worked well for me. It's a jQuery plugin though; not sure if that matters to you or not.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
We are looking for a nice javascript-based library for a web charting application we have been asked to do. The charts will be accessible and should actually be nice to interact with via mobile devices (iOS, Android, and the like). The user will be able to drill-down into some datasets, so the snappier (both processing graphics and loading data) and the more interactive, the better.
Nowadays, there are countless options out there, and many aspects to look at. Based on my research, I have put together the following list. Apologies beforehand for any mistake, it is not intended to be 100% complete or accurate.. but I think that still useful:
https://spreadsheets.google.com/pub?key=0As7T_22rXSbtdF9YeklwcUVXSEdwQnN0a0FvcWpoU2c&output=html
What is your opinion? Do you have any experiences in such kind of application? Maybe some candidate I am missing?
We are narrowing down the choice, but I am still not sure as for what choice is the best bet. Some questions that pop-up in my mind:
Different ways of rendering the chart (SVG/VML versus HTML 5 canvas). Which one is more suited to browsers in mobile devices? Which one is more suited to user interaction?
Making it look good. Which libraries allow to easily tweak appearance? Is CSS really powerful for this?
You missed out Sencha Touch
first of all, if mobile support is a must-have for you, discard SVG as a solution. It's not widespread supported. Canvas in the other hand, is not supported by old versions of IE, but can be simulated via VML with the exCanvas.js library.
About making it looking good, CSS has nothing to do with these libraries. CSS affects DOM elements, and canvas content is binary data. Canvas is, as the word says, a blank canvas for you to draw in via a Javascript API. Once you draw a line in a canvas element, that information is just pixels in the canvas.
BTW, is a good list the one you collected, and I'm pretty sure it's quite complete. The only intruder in it is Dundas. First of all, is a .Net library, and generates the charts in the server. Second, is deprecated. Dundas is no longer selling components, they're totally engaged with their dashboards solution.
Hope I'd help.
I've chosen Flot for several projects now and it has worked well. It's well documented with lots of examples, configurable, looks great, and is extensible. It is dependent on jQuery.
You might also want to add dhtmlxChart to your list.
It's a Canvas based JavaScript charting library that supports different chart types: line, pie, area, bar, radar, etc. dhtmlxChart is distributed under GPL v2 (commercial license is needed to use it in a proprietary project).
(Disclaimer: I work for DHTMLX)
I know this is an old question, but we had to do a similar research recently.
We focused our study on mobile charting libraries (Android and iOS, native or hybrid -with Cordova-) supporting line / area charts. All the information has been gathered from the websites of the respective chart libraries and no personal test has been made (yet).
Here's the result:
https://goo.gl/0tVC6a
I hope it helps.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Anyone have experience with game development using javascript and the html5 canvas element?
So far I have found two libraries, are either of these worth using?
http://tommysmind.com/ (XNA Port)
http://gamequery.onaluf.org/ (jquery plugin)
Does anyone have any other resources?
You can also use Lime JS - very promising HTML5 game developement framework.
http://www.limejs.com
A bit late to this ;-) but here are some current or emerging frameworks
Aves http://www.dextrose.com/en/projects/aves-engine
Akihabara http://www.kesiev.com/akihabara/
Rokcet Pack http://rocketpack.fi/
Effect Games http://www.effectgames.com/effect/
these are probably overkill for the kind of games you're mostly referring to.
Also, take a look at Sencha Touch
http://www.sencha.com/
There's a very slick solataire example here
http://touchsolitaire.mobi/app/
HTH
impact js looks really cool, http://impactjs.com/ but it has $99 price tag :( But it comes with an awesome level editor so it might be worth the price.
For basic 2d games i would use either impact or Crafty
Crafty is open source, but impact has a cool level editor.
All the others that i have tested are either lacking in some areas or too expensive. Aves and Rocket has been bought by Zynga and Disney.
Have a look at Processing.js. Maybe you can use it for 2D drawing and user interaction.
You can use for example this one port http://cocos2d-javascript.org/ for game dev.
Another library you could look at is google forplay. While not a true javascript/html5 library it compiles to javascript from java much in a way like GWT.
I have not built a game engine but rather a classic game in its near-entirety, plus a few simple animations, into my Tetris clone.
Its most important feature in my opinion is the effectiveness of the multitouch control scheme when you load up the page in iOS or Android. The idea is for it to be intuitive enough that I shouldn't have to show instructions for the user to figure out how to play it.
Try our HTML5 game engine, Construct 2 (http://www.scirra.com). We have an extensive free edition available so you can play around with it!
It's an event based system which means you don't need to know programming to get going in it. However it is extendable with our Javascript SDK so anyone can write their own plugins to extend it's functionality.
A few great games have started to pop up on our arcade now as proof that it works well!
http://www.scirra.com/arcade
I have personal experience of developing a HTML 5 browser game with Dead Earth! I found that I did not need to use any specific libaries other than JQuery along with a few Jquery plugins.
I used the Canvas and the Audio elements in Dead Earth. But I did not create any fancy 3D graphics I only drew shapes and images, colouring said shapes, drew lines etc.
I imagine if you are doing something more complicated than this you may need a library otherwise why make your app more bloated than it needs to be?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I know object oriented PHP and Java, and I can code Javascript fairly well at the moment.
However for the life of me I'm not sure how Google's made a game in JavaScript.
It seems to be compressed (the code) so I can't really see what's going on.
I thought javascript it was only single threaded too, making game development even harder.
I've seen the GWT, but I thought that was more for designing interfaces, I didn't really see any game development in there. If someone could direct me to some sort of toolkit, or open my eyes to how people are coding games in Javascript, I sure would appreciate it!
Google (if you are thinking of the pacman game), used HTML5's new feature which supports a kind of 'threading' called WebWorkers. You can also use timeouts and such to pretend to be using threads, though in reality they aren't.
Writing a game in Javascript is similar to how you would do it in C. Or rather, messy C with most things in one file. You have to just define all your components in the one javascript file (or multiple if you are using WebWorkers) and press your go button. Graphics are largely done with HTML5's canvas 2d element or if you are really on edge, the canvas 3d WebGL system which isn't really supported properly in all modern browsers yet.
In fact, you can make a game simply by setting up one big Canvas 100% width and height, and then program your entire system in that javascript file, ignoring the fact that you are on the web (if you please). Most usual drawing, threading, database, networking, etc... standard game 'features' are already built in to the latest HTML 5 spec.
This SO question on a javascript games framework should help and google turned up gameQuery and GameJS...that should at least provide some insight into what's being done.
This site also has a gallery of javascript based games...
It's really hard to make complicated game in Javascript now, mostly because of browsers incompatibility. But google guys made port of quake 2 to Javascript with GWT.
To make your own game you can use HTML5 canvas or better vector graphic (VML for IEs and SVG for others) maybe with raphael.js library as abstraction layer. Also you can use some physics engine like Box2DJS
3D Javascript game is not an option now, because WebGL is under development.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
Several frameworks for writing web-based desktop-like applications have recently appeared. E.g. SproutCore and Cappuccino. Do you have any experience using them? What's your impression? Did I miss some other framework?
I've seen related questions on StackOverflow, but they generate mostly standard answers like "use jQuery or MochiKit or MooTools or Dojo or YUI". While some people give non-standard answers, they seem to have little experience using this frameworks.
Can anyone share real experience developing destop-like apps for the browser?
To my point of view, Cappuccino is an example of what NOT to do. They implemented another language on top of JavaScript, which already bring slowliness while browser developer are already fighting hard against, and, what is worst, they don't rely at all on the browser widget, breaking all the user navigation experience. For example, they implemented their own scrollbar, with the main drawback that using mouse wheel won't work anymore!
I really prefer ExtJS's approach which give you rich widgets while keeping the UI as close as possible from the browser.
Due to the speed issues these high-level frameworks cause for many larger (as in: non-trivial) applications, we only use plain jQuery. In our tests, all high-level frameworks broke down in situations where there are many draggable objects or many drop targets, and in situation where long lists (with >1000 entries) were shown on screen.
Part of this is due to issues with IE6 and IE7 (where performance suddenly starts to deteriorate dramatically after DOM trees reach a certain complexity), but part is due to the overhead these frameworks generate.
So I would not recommend any of the high-level frameworks. My recommendation would be to use jQuery and work with the DOM directly.
Some tips to improve performance:
Where possibly, render HTML on the
server.
Keep the HTML as simple as
possible.
Avoid having many elements
in the DOM tree.
Avoid recursive
table structure (IE suddenly stops
showing them after relatively few
levels of nesting).
Remove invisible
elements from the DOM tree.
Remove
things from the DOM tree before
changing them and then re-insert
them, rather than changing them
while they're in the tree.
I also, as gizmo, recommend EXT JS. Their license has changed and it may not work for all, but it's still a good choice if you want to do stuff like a desktop.
Here's their example page for a desktop environment: http://extjs.com/deploy/dev/examples/desktop/desktop.html
Apple is demonstrating that sproutcore does work, although it's hard to estimate how well it works. Currently I build web apps with a home-grown set of libraries, duplicating a set of functionality from our windows software suite (but adapted to a web interface). Up to now I've avoided frameworks particularly for the reason that I didn't want the bloat. The problem with this approach is that I waste an inordinate amount of time duplicating functionality that's already in the frameworks, and I feel that over time I'm going to approximate towards something that resembles these frameworks.
Because of this I've been experimenting with implementing a web app in extjs, and it was a surprisingly nice experience. The performance is excellent, and ease of development is quite high because their component set is good for actually building apps, not just for fancy demos (a common problem in web toolkits). I would definitely recommend it if you are interested in building desktop-like web apps.
The problem of scaling it up obviously still applies, but honestly, I feel that it's better to use a toolkit in situations where scale is not that important, and to fallback to basic javascript only where you need to (premature optimization being the root of all evil). Extjs can layer on top of prototype or jquery, so this approach is definitely workable. Avoiding too much content in the DOM is usually an approach of loading and unloading on-demand. For example, there's a third party extension to the extjs grid class that allows scrolling through a million row dataset by being clever about loading and unloading data.
You might consider using GWT-Ext (uses Ext underneath) might be a very clean solution if you're going to use Java.
I like qooxdoo, although it takes the OOP approach of JS rather than the prototypal it is a solid framework and has a lot of features.
I don't have any experience with SproutCore or Capuccino. But have made attempts to use Dojo on top of Django for this kind of work. Can only tell you it's slow and buggy.
extjs might be of help. http://dev.extjs.com/deploy/dev/examples/