I'm creating a game both for desktop and mobile using phaser. But when I try to test it on mobile it flashes a lot and is barely playable. Links: http://game.r4u.nl/frog/testing/testing/ and http://game.r4u.nl
How to fix this?
It really depends of your mobile model, navigator, among other things (HTC One M7, Chrome works fine for me). But as other people already said, webGL doesn't work well in some devices. Try disabling WebGL rendering in Phaser and fallback into traditional Canvas rendering modifing the game launcher in your assets/js/main.js file...
game = new Phaser.Game(800, 600, Phaser.CANVAS, '');
...And your game would run at least different. (The speed can be another factors too like physics, but that's another thing...)
Also take note of debug-rendering stuff. In case of the frog, you are rendering an square each frame in a way that makes some issues in some envoriments (that's beacuse it's just for debugging pruposes).
Coming from the backbone side of web development we are trying to find a solution for a request to add visual and sound effects to our task management web application.
For starters - we are looking for a way to create an exploding stars effect like you see in games.
Can this be done with HTML5 canvas?
Should we use flash?
Any ideas how to start?
By now, just about anything Flash can do visually can be done by the HTML5 canvas on modern browsers.
For a 'star burst' visual effect, it sounds like a simple matter of creating a random array of objects that move away in random pre-set directions every time the canvas updates.
Example: http://jsfiddle.net/amDAW/ (click on the canvas to create a starburst)
As for sounds, this isn't handled in the canvas, but rather either the Audio tag or the fairly new WebAudio API. If you go with the former (more browser support), your biggest concern will be with resource preloading, but there are some helper libraries that can abstract this away (shameless advertising: https://github.com/jsweeneydev/ResourceLoader).
Other than just sniffing browsers and telling anyone not using Chrome tough luck on purpose (75%+ of the internet?), I'm looking for different options to make an executable out of a canvas game, if that's even possible.
The idea is to control the performance of my game by including v8 to users who don't have chrome installed.....is there a way to interface with it?? Something like a web "wrapper" like Flash's plugin so you could install a v8 "plugin" cross browser???
The canvas game works with safari and firefox, but at 50-60% of the performance experienced in google chrome.
Another discrepancy is with Firefox if I make the game map more than 100x100 tiles, it chokes when generating the map and gives a "stop script" popup, if you hit "continue" it throws another popup for "out of memory, close your stuff to prevent data loss".
Using the same code in Chrome or safari, I tested maps with 500x500 tiles (yes that is 250,000 tiles, where firefox choked on 10,000 tiles....) which runs smoothly/consistently in both Chrome and Safari, though safari is 60% of the frame rate chrome manages.
I haven't yet found a limit to what chrome can handle, and using culling to only draw tiles around the view it's the same frame rate with 250,000 tiles as it was with 100 tiles (more than 200fps in chrome with 250k tiles!!!!! small view though), the only thing that changes performance is the size of the canvas element/view. Meanwhile Firefox can't even calculate the zones, let alone draw all the tiles inside the proper zones. (it does work over 100fps with maps 10k tiles or less)
It's tempting to allow anyone with a browser that supports html5 to play the game, but at the same time, user's opinion of your game will be MUCH MUCH MUCH better if the PERFORMANCE IS TWICE AS GOOD as the crappiest version that "can" play your game.
I'm reading about V8, and how you can incorporate it into your own c++ applications, or run it standalone?? Has anyone developed a wrapper to make a self contained executable for html5 canvas games?? Or a web wrapper to embed an interface to V8 or something???
I just installed chrome myself this week, after trying to target as many browsers as I could in the past, and it changed the way I think, now it's just not as good once you've had over 200fps to then play the same game with under 100fps..............And as much as I've thought it was idiotic to require chrome (seen lots of html5 devs begging people to use chrome) I've come to the realization I was ignorant, and now I think the only way to enforce the full potential of my efforts is to drop coverage for all browsers except ones that can output a set level of performance.
Otherwise the only thing I can figure is to make a different version of whatever games I develop for firefox with a smaller viewable window, smaller map, etc, then on other browsers, check performance and scale the view/map size based off what browser they're using.
Another temporary idea I was thinking of, if a user has google chrome, the game window will be 700x500px on the screen, if they have safari, drop it to like 500x375px to achieve the same frame rate, and if they have firefox the window will be like 400x300px.
At the same time, if a user is playing the game with Firefox, in the 400x300px window, I would include an obvious(blinking? lol) border around the window 700x500px showing how big the game window would be if they were using chrome? Does that sound like motivation? Then they can get a taste of the game, if they like it they might find it worthwhile to install chrome to view the full size game????
For IE<9, you can do what you're after with Google Chrome Frame. This works like a Flash-style plugin, which you can prompt users to install. It isn't available for Firefox or Safari, as far as I know.
While I'm aware of several frameworks for desktop apps using HTML and Javascript, they generally seem to use WebKit, so I would expect performance to be comparable to Safari at best (Titanium Desktop from Appcelerator is another option, but also WebKit-based).
With apple browsers not supporting flash or silverlight, there is a real incentive to avoid flash / silverlight to avoid losing that audience when building a web site. That being said there is certain functionality that it seems like you can only really do in flash / silverlight
for example alot of simple games where you can move things on the screen like this site all seem to be built in flash. also, a lot of drag and drop functionality where you can drag one object onto another like these game sites.
After lots of searching I can't find any that are not either flash or silverlight based.
In particular i am looking for drag and drop support of one element onto another
my question is if you need this type of functionality is javascript / html 5 able to do this type of stuff (so you can support iphone / ipad) or are you out of luck.
is there any resource that highlight examples or suggestions of trying to do this type of interactive functionality and how / if you can do this type of stuff without silverlight / flash. also, if anyone has any good examples of existing site who are doing that today that would be great as well.
This is going to be a long discussion about the ability of html5 to compete with flash.
In my opinion jquery is not any close to performance flash or silverlight animation give.
if the comparison is in terms of drag-and-drop, menu dropdowns, fadeIn.fadeOut - jQuery is competitive.
If i will see the jQuery cartoons with lot of layers and objects moving simultaneously - i will probably agree that jQuery has competitive performance.
the things are compare to see the difference:
magnifying glass over the raster picture
smoke/water/fire emulation
compound 3D objects like fractals with deep branches
when HTML5 will have it - then i will agree that it has competitive performance. All that i see today is picture slideshows and couple of games that work on html5.
You can check Easel.js by Grant Skinner, used in Pirates Love Daisies.
Also, other frameworks are:
enchant
limeJS
akihabara
JQuery UI has that for long time, works in all modern browsers, not just HTML5
JQuery UI Demos
You should checkout canvasdemos.com. It has a lot of good examples of what can be done. You can take a look at the source code behind these - some even help you in that regard. e.g. the pool game
Other good examples include the doom like "game" (you can walk around in 3D dungeons).
The Frog Log game was the winner in the 10KB coding challange
Also this was the first result for a search of html5 animation demo in google. It has links to 48 demos. Some of them are really cool. Unfortunately the code for a lot of these have been minified, but they still might give you a few ideas about what you can achieve.
So it's fine for making simple dressup type games. However, if you are looking to make anything that's CPU intensive, you should look into some performance benchmarks like this. HTML5/Canvas based animation is still quite far behind flash in terms of performance. Getting consistent behaviour across the various browsers will also be an issue.
HTML5 and related technologies (WebSockets, WebGL, web storage, File API, media capture, etc) are quickly moving towards parity with (and in some cases exceeding) what can be done in Flash/Silverlight.
The HTML5 Rocks slides are a reasonable starting point to see what is possible (you need an HTML5 capable browser). In particular, the Canvas example demonstrates image manipulation (drag, rotate, resize) which is the core functionality needed to implement dress-up games.
Flash was designed for animation. The tweens were meant to be used for animating drawings. Because it was marketed to every Tom, Dick and Harry, people started using it to animate hideous menus and flying content text. And Adobe complied to this new use, building an abode of total chaos.
Flash is still the best animation engine for the web, it should never have catered to full flash websites.
Many HTML5 fans out there, but it needs to be said: Canvas is a decade behind Flash. But for everything other than animation, Flash is an abomination.
In old browsers, you can emulate drag'n'drop of elemnts from the DOM but in new browsers, you can also drag'n'drop files (like images) and there are events for it: https://developer.mozilla.org/en/DragDrop/Drag_and_Drop
For flash-like animations, it's been possible with JavaScript for a long time but doing some bug ones was really hard and often slowing down the page.
Now, there is canvas and WebGL that allow you to do it in a more convinient way (for the complex ones).
And with canvas, WebGL, CSS animations (if you use the tric to make the browser think it's 3D), you get CPU accelerated so it's way faster.
There is also requestAnimationFrame that allows to optimise the reflows and therefore the script.
The best example I know on what can be done is the Quake II port to the Web :
Video: http://www.youtube.com/watch?v=XhMN0wlITLk&feature=player_embedded
Project's site: http://code.google.com/p/quake2-gwt-port/
as said in soe of the answers above, I'm pretty sure jquery's draggable/droppable plugin will do the job for you if you just need a basic drag and drop dress me up type of game. Basic premise is this:
in the default example, your avatar to wear the clothes would be a div with a png/gif.jpg background image of a girl/boy whatever(instead of an orange drop here background)
the clothes will be the "drag me to my target" objects in the example. you can create them as divs or even image tags that have the draggable class in them so you can drag them around and drop them in the orange boxes/avatars.
you can save the data using ajax, which is also covered in the examples there(or other tutorials in the net, it's easy)
???
PROFIT
Just try it out and see for yourself. If you need any help you can just ask here again, but I do think that the jquery UI answers are valid answers to your problem.
I don't have an example site to show you, but I'm pretty sure given some images and stuff I can whip out something...if I had the time lol.
You can definitely do these "flash-like" things now in HTML5 web browsers. Check out the examples at http://www.chromeexperiments.com/
In fact HTML5/CSS3/JS can do anything flash can do. But there are some drawback :
It is not yet mature. Lot of bugs, lot of difference in implementation depending of browsers and many people simply don't have yet browsers that support it.
Adobe has a really nice set of tools that help making complex flash applications. This doesn't exist (yet ?) at the same level for HTML5.
On a side note, neither flash, neither HTML5 will really shine on mobiles phone. People prefer native applications anyway. You might need to provide a web version, but you'll need too a app version (one per big phone player).
We can speculate how HTML5 will rule the word in the next few years, but as of now, impact are limited outside of nice looking demo that consume 100% of CPU (really, really bad for mobile device).
For drag and drop support, anybody can do that - in HTML4 and in any browser with a few lines of javascript - inside one page, or can think to do it on between 2 browser windows of the same website. Doing drag & drop between browser and any native desktop application is another thing.
For a great example of what you can do with HTML5 in terms of drag and drop, I suggest you take a look at this article and in particular the short demo at the beginning. The article also highlights a few other goodies that come with HTML5, such as localStorage and the HTML5 Canvas.
For a more detailed tutorial on the HTML5 drag-n-drop API specifically (really it is a Javascript API), take a look at this other article. It is dated from December 2009 but still valid.
Lastly, this video gives you a good insight on some of the cool visual effects that you'll be able to do with HTML5 (SVG, Canvas, CSS3, WebGL, ...). More of a marketing video I'll admit but a good illustration of some of the more powerful HTML5 features (at least from a visual stand point) and of what we'll start seeing in our browsers in a not so distant future...
Disclaimer: I don't work for Mozilla. I just happen to have researched this topic in the past and found that the material produced by Mozilla, and in particular the demos from Paul Rouget, to be the most instructive.
jQuery UI is an amazing library...
Drag: http://jqueryui.com/demos/draggable/#default
Drop: http://jqueryui.com/demos/droppable/
I belive that the droppable examples will answer your question of "In particular i am looking for drag and drop support of one element onto another"
Kind of a dilemma here. I am making a mobile version of a website, that has some interactive things more specifically I have this object in 3D that you can spin, I was using papervision in Flash but now I need to do this differently since there is no flash in mobile and I feel I am on thin ice.
I was thinking of exporting a 360 degree spin # 30 FPS using a PNG sequence with alpha channel, and then simply stiching them together into a sprite, then using this as a background in CSS and using background-position to then "simulate" an animation.
That or simply switch source image very rapidly, or somehow using "canvas" maybe, the thing is I am not sure if this will produce completely subpar performance? I mean switching the background-position or image source file # 30 FPS is that even possible? Would it be smooth, or is this simply something that is not feasible todo yet? Keep in mind it's just one single 3D object that needs to spin based on user input, not any other interactive elements.
So is sprite the way togo or canvas or something cool I havent even heard of? Thanks everyone in advance!
If I was making a mobile version of a website, I would strip it of most of the graphics and definitely of all the animated gifs, flash, etc. -- people using mobile phones for browsing the web are usually not after the multimedia experience -- they just need some information quickly and use a suboptimal device with poor bandwidth and even worse display and performance to get it. Don't make it even harder for them.
On the other hand, I found that using a background image with all the frames of animation in it, and manipulating the background-position from javascript is a fine way of making small animated sprites, for example for a simple javascript game for mobile phones :)