Skip navigation
Help

Canvas

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

Responsible responsive design demands responsive images—images whose dimensions and file size suit the viewport and bandwidth of the receiving device. As HTML provides no standard element to achieve this purpose, serving responsive images has meant using JavaScript trickery, and accepting that your solution will fail for some users.

Then a few months ago, in response to an article here, a W3C Responsive Images Community Group formed—and proposed a simple-to-understand HTML picture element capable of serving responsive images. The group even delivered picture functionality to older browsers via two polyfills: namely, Scott Jehl’s Picturefill and Abban Dunne’s jQuery Picture. The WHATWG has responded by ignoring the community’s work on the picture element, and proposing a more complicated img set element.

Which proposed standard is better, and for whom? Which will win? And what can you do to help avert an “us versus them” crisis that could hurt end-users and turn developers off to the standards process? ALA’s own Mat Marquis explains the ins and outs of responsive images and web standards at the turning point.

0
Your rating: None



Mozilla has teamed up with Web design studio Little Workshop to develop a Web-based multiplayer adventure game called BrowserQuest. The game is built with standards-based Web technologies and is designed to be played within a Web browser.

With the technical capabilities offered by the latest standards, Web developers no longer have to rely on plugins to create interactive multimedia experiences and application-like user interfaces. As we reported earlier this month, modern standards are making the Web an increasingly viable platform for game development.

BrowserQuest, which is built with JavaScript and HTML5, is a compelling demonstration of how existing standards can be used to create browser games. It uses the HTML5 Canvas element to render a tile-based 2D world, HTML5 audio APIs to support sound effects, WebSockets to facilitate communication with the backend server, and localStorage to save the player's progress.

The game's remote backend, which enables the real-time multiplayer gameplay, was coded in JavaScript and runs on top of Node.js. The load is balanced across multiple Node.js instances on three separate severs. At the time this story was written, the backend was successfully handling over 1,900 simultaneous players. The status of the BrowserQuest backend can be monitored through the game's real-time dashboard interface.

The developers focused on using widely-supported standards so that the game would work well across a wide range of desktop and mobile browsers. It works just as well on a tablet device, for example, as it does on a desktop computer.

The future looks even brighter, as there are a number of pending Web standards that will greatly enhance support for building games on the Web in the future. Features like 3D graphics and support for game controller peripherals, for example, could eventually take the browser beyond the realm of casual gaming. You can refer to Mozilla's wiki to see an overview of the work that the organization is doing to improve browser-based gaming. For more details about BrowserQuest, see the Mozilla Hacks blog or check out the backend server code on GitHub.

Read the comments on this post

0
Your rating: None

Announcing CreateJS

We’ve been working really hard on a lot of great stuff over the last couple months, and I’m thrilled finally to be able to share it with the world.

CreateJS

We’re going to be releasing EaselJS and a number of companion libraries under the new umbrella name “CreateJS”. CreateJS will be a suite of modular libraries and tools which work together to enable rich interactive content on open web technologies (aka HTML5). These libraries will be designed so that they can work completely independently, or you can mix and match as suits your needs. The initial offerings will be: EaselJS, TweenJS, SoundJS, and PreloadJS.

Along with the new name, we’ll also be launching a new site at createjs.com which will consolidate demos, docs, tutorials, community, and showcases for all of the libraries and tools. If you have a project or tutorial you’d like to see featured, tweet it to us: @createjs.

EaselJS

EaselJS provides a display list and interactive model for working with rich graphics on top of the HTML5 canvas (and beyond). It provides an API that is familiar to Flash developers, but embraces javascript sensibilities.

We’re planning a minor v0.4.1 release soon, which includes bug fixes and some minor feature additions. Following that, work will commence on v0.5, which will focus on some larger features, API clean up and consistency, and improved documentation. If you have features you’d like to see in v0.5, add them to the issue list, or tweet them to @createjs, and we’ll see what we can do.

Along with the CreateJS site launch, we will be releasing much improved examples, and links to resources and tutorials developed by the community. Again, let us know if you’ve written a tutorial, or have something cool you’ve built with EaselJS you’d like us to showcase.

TweenJS

TweenJS is a tweening and animation library that works with EaselJS or independently. It offers a deceptively simple interface, and a huge amount of power with support for delays, easing, callbacks, non-numeric properties, sequencing, and plugins.

TweenJS v0.2 will be tagged soon. It will incorporate some fixes and tweaks, along with a full plugin model. After v0.2 our next focus will be on performance and providing better demos and documentation in preparation for the CreateJS launch.

SoundJS

Audio is currently a mess in HTML5, but SoundJS works to abstract away the problems and makes adding sound to your games or rich experiences much easier.

We have a huge v0.2 release in testing right now. It is a ground up rewrite that incorporates a target plugin model that allows you to prioritize what APIs you’d like to use to play audio. For example, you could choose to prioritize WebAudio, then audio tags, then Flash audio. You can query for capabilities (depending on the plugin that is used), and it offers seamless progressive enhancement (for example, panning will work in WebAudio, but will be quietly ignored in HTML audio). Following v0.2 our focus will move to fixing bugs, and delivering plugins for mobile and application platforms like PhoneGap and Win8 Metro for a v0.2.1 release.

PreloadJS

The newest addition to the suite, PreloadJS will make it easy to preload your assets: images, sounds, JS, data, or others. It will use XHR2 to provide real progress information when available, or fall back to tag loading and eased progress when it isn’t. It allows multiple queues, multiple connections, pausing queues, and a lot more. We’re hoping to get a v0.1 build out in the next couple weeks for people to start playing with, and then will focus on fixing bugs, improving documentation, and just generally maturing things for v0.1.1.

Zoë

Zoë is an open source AIR application that converts SWF animations to sprite sheets. It supports some advanced features, like configurable frame reuse and multi-image sheets (important for mobile).

For Zoë v0.2 we’re planning to add support for reading the symbols in a SWF, and letting you select multiple symbols to include in your exported sprite sheet. It’s also worth mentioning here that Flash Pro CS6 will include direct support for exporting sprite sheets for EaselJS, offering a more integrated workflow than Zoë can provide.

Toolkit for CreateJS

We’ve partnered with Adobe to build a fantastic tool for leveraging all of the existing Flash Pro skill that’s out there to build amazing HTML5 experiences. The Toolkit for CreateJS is an extension for Flash Pro that allows you to publish content (including symbols, vectors, animations, bitmaps, sound, and text) for CreateJS & HTML5 as a library of scriptable, instantiable objects.

We’ve worked really hard to develop a workflow that makes sense, and to generate code that is completely human readable, and very small (in some cases the output is smaller than SWF when zlib compressed). You can even write JS code on the Flash timeline, and it will be injected into your published tweens.

Exciting times! If you’d like to stay on top of CreateJS updates, please follow @createjs on Twitter.

gskinner.com | gBlog - News and views on Flash, Flex, ActionScript, and web technologies

0
Your rating: None



Standards-based open Web technologies are increasingly capable of delivering interactive multimedia experiences; the kind that used to only be available through plugins or native applications. This trend is creating new opportunities for gaming on the Web.

New standards are making it possible for Web applications to implement 3D graphics, handle input from gamepad peripherals, capture and process audio and video in real-time, display graphical elements in a fullscreen window, and use threading for parallelization. Support for mobile gaming has also gotten a boost from features like device orientation APIs and improved support for handling touchscreen interaction.

Read the rest of this article...

Read the comments on this post

0
Your rating: None

Last year a group led by Dutch performance artist lepe B. T. Rubingh cycled to an intersection in Berlin and dumped 500 litres of different coloured paint onto the road, effectively turning the street into a giant canvas, with cars acting as paintbrushes. The piece of guerilla street art was named "Painting Reality" and, in case you're worried about the after effects, all the paint used was water-based and was completely environmentally friendly.

0
Your rating: None

We’ve showed you where on the web you can find practical examples of HTML5 — like Google’s homepage, Scribd’s document viewer and Vimeo’s new video player. However, to really see the bleeding edge of HTML5 and what might be possible in the future, you’ll have to look beyond the practical.

Big names have released HTML5 showcase sites, Apple and Google among them. More importantly, hundreds of curious designers around the web are constantly experimenting with HTML5, trying to push the boundaries and see what’s possible with the new markup language and its related technologies. Many such experiments have little practical value as of yet, while others may well find their way into your favorite online games and web apps in the next few years.

Of course, some of the examples below aren’t purely HTML5. In fact there’s been quite a bit of talk about what is and what is not HTML5. All of the examples below use HTML5 tags, however some also use elements of CSS 3 and almost all of them use JavaScript to handle animation and user interaction.

In fact, most of the more interesting experiments we’ve seen revolve around the HTML5 canvas tag and JavaScript. The HTML5 canvas tag is essentially what it sounds like, a canvas on which all sort of JavaScript-powered goodness can be displayed. Regardless of whether you think of the end product as being an experiment in HTML5 or JavaScript or both, the results are impressive.

One other thing to keep in mind: HTML5 is still an unfinished spec and browser support varies. All of these experiments work in the latest versions of Firefox, Chrome, Safari and Opera, but other versions of those browsers and Internet Explorer won’t be able to see these demos.

If you’d like to see some more innovative examples of what’s possible when JavaScript and HTML5 collide, check out Swedish developer Hakim El Hattab’s HTML5 experiments. Ranging from arcade-style games like Sinuous to Twitter messages in animated bubbles, Hattab’s experiments are creative and fun, if not immediately useful to most people. Just view source to see what makes these examples tick.

Hattab includes a note on his site saying, “please don’t use this as HTML5 vs Flash firewood,” which is worth mentioning since, yes, you could do many of these experiments in Flash, but that isn’t the point. The point is to do it using open web tools that will work everywhere — modern web browsers, iPhones, Android Phones, iPads, next year’s toaster and any other device with a standards compliant web browser.

That said, some potentially useful animation experiments are in fact ports of Flash animation libraries. In these cases the innovation is less about originality than practicality — taking what’s good from Flash and porting it to JavaScript where it can be used with HTML5.

For example, Jonas Wagner has ported a Flash 2D physics engine JavaScript. The result is a JavaScript physic engine you can incorporate into your own animation projects.

Another cool experiment in physics engines comes from developer Florian Boesch’s website, Codeflow, which features an experiment using Canvas and JavaScript to animate dots. In Boesch’s experiment there are 15 dots on the screen, and each has a velocity and pulls on each other dot, thus changing their velocities. As an added bonus Boesch breaks down all the code behind the scenes and shows you how everything works.

Physics engines are useful for building web-based games, but how about some cool retro graphics? Yes, HTML5 can do that too.

Developer Joseph Huckaby has created a way to generate that old school video game look using a full 8-bit color cycling engine, rendered into a canvas tag in real-time. Huckaby used Mark Ferrari’s famous game illustrations to create some awesome classic video game scenes. You can learn more about how Huckaby created the 8-bit rendering engine on the Effect Games website.

Not into retro games? How about a multi-user collaborative sketchpad? Like many of the examples here, the heavy lifting in this one is done by JavaScript, with an HTML5 canvas tag providing the canvas and some websockets for the multi-user aspect. Unfortunately this one will only work in Chrome.

The sketchpad was created by Ricardo Cabello, of Mr. Doob, which has dozens of other HTML5 experiments as well as plenty of Flash-based experiments.

This is just a small sampling of the many HTML5 experiments on the web. If you know of other cool sites, showcases or other experiments be sure to chime in the comments.

See Also:

0
Your rating: None