James Williams

author
+ Follow
since Apr 18, 2009
Cows and Likes
Cows
Total received
0
In last 30 days
0
Total given
0
Likes
Total received
2
Received in last 30 days
0
Total given
1
Given in last 30 days
0
Forums and Threads
Scavenger Hunt
expand Ranch Hand Scavenger Hunt
expand Greenhorn Scavenger Hunt

Recent posts by James Williams

You can do some pixel manipulation at the canvas level on RGBA values I believe, you can also do processing with WebGL shaders, there's a project called glfx.js that uses WebGL shaders to create various effects. http://evanw.github.com/glfx.js/
I've only seen the book in the bookstore but haven't read it. I've been looking more and more at the Game Design side of things lately. I'm reading A Theory of Fun for Game Design.
SVG events especially with Raphael are probably easier compared to Canvas. While like any other element the canvas can respond to mouse clicks, you have to do your own collision detection. Canvas drawing is not hardware accelerated so it may or may not be quicker.
HTML5 is mostly an evolution of HTML4. The HTML5Rocks slides (http://slides.html5rocks.com) are a good place to see what is new.

Having things work well cross-browser isn't that hard if you AREN'T using IE which tends to lag on standards.
Bear is correct. I introduce HTML5 in an introductory chapter but much of the focus is on gaming. You might want to try something like HTML5 Guidelines for Web Developers.
Augusto,

The audio element is ok for playing sounds. The key value in this is that it doesn't require a plugin. It's built into the browser. There are compatibility issues between browsers on what formats are supported. The three audio types that are supported in some shape or form are OGG(Ogg Vorbis), MP3, and WAV. The audio tag does have function called canPlayType that tells you if the specific browser might support a file type.



would tell you if the current browser supports MP3 files. Return values from canPlayType are "no", "probably", or "maybe".

CanIUse.com is another useful resource. If you want to use a library to test availability of HTML5 features, check out Modernizr.


Though not as widely supported, you should look into the WebAudio API. It picks up where the Audio tag leaves off like better support for volume/gain management, multiplexing sound, etc.

Re: collision detection and things like that, I don't believe that is a core concern for HTML5 implementers. Lots of libraries exist that do collision detection and response like bullet.js and jiglib.js.

Re: Gamepads: There is a specification API for gamepads and experimental support in Chrome and Firefox, more info here (https://wiki.mozilla.org/GamepadAPI).

Re: animation: Check the other threads in this forum where I talk about requestAnimationFrame, that facilitates core animation stuff but for easing functions/etc, you would have to do that yourself. One library that I like to use for easing stuff when I'm not using RaphaelJS(SVG and has built in easing funcs) is TridentJS(https://github.com/kirillcool/trident-js)
Grega,

If the first link works, the second should (and both work for me). It's an anchor on the same page. Try going to the first link and searching for "Pixel Manipulation." The second link contains the function calls to get pixel data which you can then manipulate. Though it's slightly different than what you are asking, here is a tutorial that displays a video file in a canvas and manipulates the canvas pixels. It shows how to apply various effects to canvas pixels.

Images can be inserted into canvases. You can even draw a canvas inside another canvas.

There are a couple different signatures for drawing an image as you can draw a subportion of an image or scale it. The most basic flow to draw an image a (0,0) would be





You can find the other signatures here.
Specs can vary, check this thread.

No one should assume that any game works on any phone. Even in Android there are different levels of support.
Grega,

Here are the instructions for drawing arcs: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#complex-shapes-(paths)

The canvas, like any other element canvas respond to mouse events.

You can save a canvas to an image by calling on the canvas:


For example, to create a png, it would be:


I'm not sure what you have in mind in terms of pixel manipulation but this part of the spec has some information on that.
Nrupay,

There can be caveats as I mentioned in this thread but yes for the most part you can create HTML5 games that work on mobile devices.
Max,

Your mileage will vary depending on the version of Android you are targeting. Cupcake/Donut/etc in the 1.x branch don't support HTML5 at all IIRC. Eclair/Gingerbread/HoneyComb and ICS (2.1+/3.0+/4.0) all do much better in terms of support.

The best guide to check is CanIUse.com. It lists the capabilities of the mobile browsers along side the desktop browsers.
Andrew,

Web Workers are covered. Web Workers communicate with the host page via message passing. If you can modularize your code in such a way to separate the computation needed on a worker thread from say the UI drawing, you won't have a problem with not accessing the DOM from the worker.
Miguel,

No, you do not need a mobile device in order to develop for them. If you want to develop applications for the iPhone/iPad, you will need a Macintosh computer. Android doesn't have any requirements on hardware.
Thinks like WebWorkers and NativeClient, the latter being Chrome only can offload work from your main thread and increase performance.

There are some limits for localStorage and in-browser databases but these caps can be overridden.