I'm looking for a good plugin for:
a) rapid rendering of
b) lines, shapes, and imagery on top of a
c) rectangular canvas area who's size can be declared at load time.
It needs to run at 20-30fps without putting a heavy load in the browser. It also needs to be able to interface with JavaScript and the DOM.
Creating my own Flash plugin is the first choice, but I'd like to aim for a free, open-source and/or non-proprietary solution first. HTML5 canvas is out of the question - it renders way too slowly.
Anyone happen to know of anything that does these features? (I'd even be okay with a pre-made Flash plugin that meets the requirements mentioned above)
Your request is still vague. What do the lines and shapes need to do? Sit there looking pretty?
If your lines, shapes, and imagery are going to be fewer than say 5,000 objects total, I'd recommend using SVG and perhaps the Raphael library to go with it. Every SVG object is a DOM object from the get-go, which will save you some associated headaches with trying to use Flash or Canvas.
If you really need a lot more performance or plan on having 50,000 objects on screen, Canvas may be for you.
"Creating my own Flash plugin is the
first choice"
I'm unclear what you mean by "plugin" here - I assume you just mean "flash file" (an SWF?).
I think #WTP is making a good point. You say "rapid rendering" but of what? how complex is it? Flash has very good speeds when it comes to vector graphics, and much faster rendering of optimized bitmap data (the technique of choice is blitting here). It all comes down to optimizations / complexity of graphics. No matter the plugin / tech solution, you will always be able to cripple a machine with inefficient design.
To answer your question, Flash will definitely meet your needs.
I would also venture that Canvas/JS would as well, but apparently you've tried that already? I've seen quite complex scenes running quite rapidly, so that surprises me.
I'll note, also, the upcoming Molehill APIs for Flash. This provides low-level access to the GPU - and will create the potential for breathtaking 2d/3d performance in the browser. But its still in alpha, so... don't hold your breath ;)
I know of only four major players in the "Vector graphics capable" department -- HTML Canvas, Flash, Silverlight, and Java applets. Aside from canvas, all them are proprietary in some way or another. The good news is that all of them have the ability to compile for free in some way or another and they are generally faster than canvas by my understanding. Now, I happen to know Flash so that might color my opinion, but I am fairly certain that it is your best option. It has decent performance and a solid install base. It also runs on Linux and does not raise major security issues.
Look up the Flash Builder (Flex) sdk. There is command line compilation for it.
Related
I'm studying JavaScript because I want to make voxel games (like minecraft type style) eventually. I've been told to use WebGL, but I've seen a lot of examples of minecraft type games using voxel.js.
So which should I use? Which one is better for voxel based web games?
"Which X is better" is rarely a good question. It depends on what you're trying to do, what you already know, your personal tastes, and a lot of other things.
That said:
voxel.js itself uses WebGL.
If you don't use voxel.js, you're going to have to roll your own voxel framework. That's a significant undertaking that will distract you from focusing on gameplay.
I haven't coded anything significant with voxel.js, but I've experimented with it, and it seems to be really solid. Also, it's still under active development, so its capabilities will only grow. Unless you need a specific feature that someone hasn't already written a voxel.js module to handle - and you don't want to write that module yourself for some reason - using voxel.js is the sensible choice.
So I'd say, don't reinvent the wheel. There's already a free, high-quality solution to your problem.
So, I have thought about designing a WebGL Graphics Engine, which will facilitate designing 3D Interactive Graphics for web. Now, my question is :
WebGL is Javascript API, so in order to design an engine for WebGL graphics, do I need to have a JavaScript compiler or anything ? What I want is a system which will let users see what they are creating (for example, like blender workspace, if you draw up a scene you can see and make changes simultaneously)
You would have to create some kind of engine, or framework that you'll build your system onto.
Creating only framework/engine would take at least 2-3 months, and if you plan creating something really big and advanced, that supports various effects rather than simple rendering primitives, than that might come down to 5-6 months. After that you could start creating your web application. So 6-7 months time for that? That shouldn't be a problem.
I don't know how advanced you are, how many people are you working with, but that seems very plausible and doable. But is worth of it? In a year, many different things will change, maybe new openGL ES version for webGL, changing api, supported browsers (IE recently joined the game),... it's really questionable.
You wouldn't need any kind of JS compiler or anything like it, just knowledge of advanced JS and many different techniques used in 3d, and since you plan building system that is far beyond just-graphic-stuff, then it adds even more to overall complexity and time consumption.
So, to answer your question: yes, it's very doable in a year, but will it pay off?
Similar things already exist in some form:
http://errolschwartz.com/projects/threescene/
http://badassjs.com/post/12885773103/threenodes-js-a-visual-webgl-scene-editor
CopperLicht engine has its own real-time editor
there are more lab-playground-like editors
I was thinking about making a game using as3 and javascript together but i have yet to see any. i know that the two languages can work together but i can't find games that use them both.
If anybody could tell me about any games like this or if it is somewhat impossible to do so could you tell me why?
Not that I am an expert from what I understand they cannot use the same canvas and it is almost certain that communication between the two languages will be slow. So any game is almost certainty going be made in one or the other as it would be far easier and better overall to just pick one language. Now if you need JS to do the networking while flash does the rendering and game logic I know a friend of mine was looking into doing something like that. But I would classify that as a Flash game that just happens to need some JS on the webpage to run right.
Maybe you should clarify what you mean by "making a game using as3 and javascript together"
I agree with all the comments so far and I think it's worth thinking about whether or not you can accomplish what you're trying to do with either one or the other without using both, that should probably be your course of action.
As for original request for an example, this is (at least so far) by far the coolest example I've seen so far. It's a Pong game where one half of the board is Flash and the other half is HTML/Javascript. It's worth noting this example makes use of the <canvas> tag and therefore can only be accomplished using HTML5, but it's still pretty sweet.
http://labs.codecomputerlove.com/FlashVsHtml5/
I tend to agree with #Jonathon. Say you want to have a set of html controls that drives an option set for a flash game... maybe those controls are integral to gameplay.
Well, great. ExternalInterface is robust and powerful, but why use it in a situation like this?
Flash is robust and powerful by itself, and doesn't necessarily need any help to do much of anything. I will definitely run some javascript to plant the swf on the page, assist in networking, or set some default variables, but beyond that, flash doesn't have much to gain from reliance on other tech (save for server communication). Certainly not speed. I think you don't find many "true" dual tech apps like this for precisely this reason.
A bigger question, that is more apropos: do you need flash to accomplish your goals? I love working with flash, but if native browser tech can accomplish the same goal, then its an unnecessary layer. And if it can't, well, then Flash it is.
For the time-being, as far as games are concerned, frameworks like tweenlite, pushbutton, flint etc... still give flash a convincing lead.
Cheers
I am holding back on seriously pursuing ProcessingJS pieces mostly due to the bloat of the library. I have found that pieces like Ball Droppings do not use the library's Processing syntax parser, which is good, since I imagine it would slow down the page more, especially adding to the initial load and setup time. Still, I am wondering if it's worthwhile to use it basically as a big utility library like UnderscoreJS. For example, how good is its implementation with SVG compared with the other libraries out there today like RaphaelJS? Has anyone gone through the implementation of the Processing API extensively enough? When I skim through the I see a lot of boilerplate I don't really need, as well as a couple instances of questionable coding practices. But the library still seems to perform decently, at least on the ProcessingJS homepage, although the examples are set to run at 15fps, and not the (in my opinion) minimally acceptable 24fps.
I think it strongly depends on the project you are working on and the background knowledge you have with the processing library.
Processing.js is a great choice if you already have learned the original processing api (java) and want to leverage your existing knowledge in the web environment. It might be the only choice if you want to port an existing project to the web - actually this is probably the best time to use it.
If you are a JavaScript programmer and don't know much about processing you probably will dislike to write Java syntax in the browser and everything becomes even more problematic if you have to mix it with js. The API doesn't feel like JavaScript and there is a lot of code that could be written more elegantly.
Regarding performance it is not a bad choice, actually most projects run smoothly and I can definitely recommend using processing.js on circumstances like those explained above.
Here is great list of various javascript engines out there:
Javascript Graphic/Game Engines
It is hard to recommend a single library, as the requirements are specific to each project.
For simple graphics/diagrams: RaphaelJs is really nice and performs decently
how good is its implementation with SVG compared with the other libraries out there today like RaphaelJS
Processingjs doesn't use SVG as far as i know, it only uses canvas. Raphaeljs only SVG. There's an interesting read here and also at wikipedia about the difference. The main difference is SVG stores the vector data of objects so you can easily change position, colour, etc... of stuff but also provides mouseover events. Canvas - and processingjs - does no such thing, it draws to the canvas and forgets everything so you have to do more work. Don't know about performance difference between the two.
As far as the processingjs API is concerned, I don't have any clue as how it is implemented but since John Resig of jQuery is involved it can't be that bad to say the least.
I agree with user hlfcoding that writing java in browser feels weird. I am too looking for a cleaner solution for my future canvas experiments.
I fail to see how re-rendering for each frame in JavaScript can be seen as performant.
That's exactly how canvas works, you have to calculate and render every frame in js, it's not processingjs specific. I don't think that's such a performance hit, behind the scene a browser running SVG does the same anyway.
I am developing a web application that should display data points below the Earth's surface. It should also include user navigation, zoom, and rotational capabilities. It reads in the data from a XML file and should display 500-1000 spheres. Ideally, I would like to use HTML5, but it doesn't run in IE8.
This is a Flash application that is somewhat similar to what I want (minus the globe around the spheres):
http://demo.tufat.com/applets/molecule/index.html
There is also a good jQuery application that allows for 3d rotation out there.
So, the question is JavaScript/jQuery or AS3? I know Flash handles large amounts of data better but is Flash dying out? The application must run efficiently on most browsers.
Flash is not dying. I am not sure which Blogging Social Media Expert told you that.
Choose a language and just stick with it. Unless you know how to handle your memory and work with Paper Vision or Unity you should go with JavaScript for most likely you will end up with leaks if you do not do garbage collection, 500-1000 spheres is alot.