Archive for the ‘USER EXPERIENCE’ Category

Friday, August 27th, 2010

Chromium is moving to GPU hardware accelerate rendering all types of web content as much as possibly with their latest efforts.

For some time now, there’s been a lot of work going on to overhaul Chromium’s graphics system. New APIs and markup like WebGL and 3D CSS transforms are a major motivation for this work, but it also lets Chromium begin to take advantage of the GPU to speed up its entire drawing model, including many common 2D operations such as compositing and image scaling. As a lot of that work has been landing in tip-of-tree Chromium lately, we figured it was time for a primer.

The primer they are looking at is not just rendering the content made in WebGL, CSS3 3d transformations and more but the entire final pass of the output.  This leads to some very interesting years ahead in browsers.  With Chromium, IE9, Firefox and Safari all now with aspects of hardware rendering and acceleration via the GPU, anyone not doing GPU acceleration is seemingly behind the curve that seemed to start in 2007ish to a culmination of today’s latest browsers.

After these layers are rendered, there’s still a crucial last step to blend them all onto a single page as quickly as possible. Performing this last step on the CPU would have erased most of the performance gains achieved by accelerating individual layers, so Chromium now composites layers on the GPU when run with the –enable-accelerated-compositing flag.

Web content will get really interesting over the next couple years.  Even basic computers now have a GPU and bottom of 32MB video memory.  Why aren’t we using those GPUs as much as possible for web content and web games. The time of software rendering might be coming to an end now that processors seem to have topped out and the bottom level computer is capable of handling a decent amount of video memory. It will be easier to justify useful graphics acceleration with a better user experience when we can take advantage of all the computer/device has to offer.

Sunday, April 5th, 2009

Torque3D seems to have full featured browser surfaces that you can use in the 3d engine seamlessly, see the video below (at :38). This is amazing stuff.

Making games that integrate content from the web is especially required these days.  It is a difficult thing to do within the 3d render because of all the plugins, styling etc that needs to be rendered on a 3d surface.  Well Torque3D has a killer feature in that it supports entirely full features browser render on a 3d surface.  So now you can integrate html content, flash video etc in your game easily.

You can play content in flash player content easily and have stripped down html but it is limited, you can play videos and have content in Unity3d but it is limited, even larger engines like Unreal 3 have difficulty handling flash and html content.  If this is a good implementation Torque3D has a killer feature on their hands! Flash is commonly used as user interface elements and content within games but it can be challenging.  This is pretty exciting if it works as advertised. Think of how cool all the little consoles, mini-games and controls in 3d games could be in flash easily.

See at :38 in the video…


GDC 2009 – Torque 3D Web Demo from GarageGames on Vimeo.

Wednesday, March 18th, 2009

The interactive space is blowing up with releases of really good iterations of software.

Just this week the iPhone 3.0 SDK was announced and available for download for developers, Unity3D 2.5 was released with a windows development capability (was previously mac only) and now Silverlight 3 is making some waves as it was released at #MIX09 (with the Moonlight open source mono version hopefully not too far behind…).

There are a few things that piqued my interest in Silverlight 3 beta notes and that is hardware acceleration on video, 3d canvas and pixel effects (unclear if these are hardware accelerated like shaders or pixel bender) similar to filters and with the possibility to write effects similar to shaders or Adobe’s Pixel Bender pbx shaders.

  • Support for Higher Quality Video & Audio. With support for native H.264/Advanced Audio Coding (AAC) Audio, live and on-demand IIS7 Smooth Streaming, full HD (720p+) playback, and an extensible decoder pipeline, Silverlight 3 brings rich, full-screen, stutter-free media experiences to the desktop. New and enhanced media features in Silverlight 3 include:
    • Live and on-demand true HD (720p+) Smooth Streaming. IIS Media Services (formerly IIS Media Pack), an integrated HTTP media delivery platform, features Smooth Streaming which dynamically detects and seamlessly switches, in real time, the video quality of a media file delivered to Silverlight based on local bandwidth and CPU conditions.
    • More format choice. In addition to native support for VC-1/WMA, Silverlight 3 now offers users native support for MPEG-4-based H.264/AAC Audio, enabling content distributors to deliver high-quality content to a wide variety of computers and devices.
    • True HD playback in full-screen. Leveraging graphics processor unit (GPU) hardware acceleration, Silverlight experiences can now be delivered in true full-screen HD (720p+).
    • Extensible media format support. With the new Raw AV pipeline, Silverlight can easily support a wide variety of third-party codecs. Audio and video can be decoded outside the runtime and rendered in Silverlight, extending format support beyond the native codecs.
    • Industry leading content protection. Silverlight DRM, Powered by PlayReady Content Protection enables protected in-browser experiences using AES encryption or Windows Media DRM.
  • Empowering Richer Experiences. Silverlight 3 contains new 3D graphics, animation features, hardware accelerated effects and text improvements that enable designers and developers to create next generation Web visuals. Additional features include:
    • Perspective 3D Graphics. Silverlight 3 allows developers and designers to apply content to a 3D plane. Users can rotate or scale live content in space without writing any additional code. Other effects include creating a queue in 3D and transitions.
    • Pixel Shader effects. These software based effects include blur and drop shadow. In addition, you can also write your own effect. Effects can be applied to any graphical content. An example would be to make a button appear depressed on rollover you could use a drop shadow effect on the pressed visual state.
    • Bitmap Caching. Silverlight 3 dramatically improves the rendering performance of applications by allowing users to cache vector content, text and controls into bitmaps. This feature is useful for background content and for content which needs to scale without making changes to its internal appearance.
    • New Bitmap API. With Silverlight 3, developers can now write pixels to a bitmap. Thus, they can build a photo editor to do red eye correction, perform edits on scanned documents or create specials effects for cached bitmaps from elements on the screen.
    • Themed application support. Developers can now theme applications by applying styles to their Silverlight 3 applications and changing them at runtime. Additionally, developers can cascade styles by basing them on each other.
    • Animation Effects. Silverlight 3 provides new effects such as spring and bounce. These make animation more natural. Developers can also now develop their own mathematical functions to describe an animation.
    • Enhanced control skinning. Silverlight 3 provides easier skinning capabilities by keeping a common set of controls external from an application. This allows the sharing of styles and control skins between different applications.
    • Improved text rendering & font support. Silverlight 3 allows far more efficient rendering and rapid animation of text. Applications also load faster by enabling the use of local fonts.
  • Improving Rich Internet Application Productivity. New features include:
    • 60+ controls with source code : Silverlight 3 is packed with over 60 high-quality, fully skinnable and customizable out-of-the-box controls such as charting and media, new layout containers such as dock and viewbox, and controls such as autocomplete, treeview and datagrid. The controls come with nine professional designed themes and the source code can be modified/recompiled or utilized as-is. Other additions include multiple selection in listbox controls, file save dialog making it easier to write files, and support for multiple page applications with navigation.
    • Deep Linking. Silverlight 3 includes support for deep linking, which enables bookmarking a page within a RIA.
    • Search Engine Optimization (SEO). Silverlight 3 enables users to solve the SEO-related challenges posed by RIAs. By utilizing business objects on the server, together with ASP.NET controls and site maps, users can automatically mirror database-driven RIA content into HTML that is easily indexed by the leading search engines.
    • Enhanced Data Support Silverlight 3 delivers:
      • Element to Element binding : UI designers use binding between two UI properties to create compelling UI experiences. Silverlight now enables property binding to CLR objects and other UI components via XAML, for instance binding a slider value to the volume control of a media player.
      • Data Forms. The Data Form control provides support for layout of fields, validation, updating and paging through data.
      • New features for data validation which automatically catch incorrect input and warn the user with built-in validation controls.
      • Support for business objects on both client and server with n-Tier data support. Easily load, sort, filter and page data with added support for working with data. Includes a new built-in CollectionView to perform a set of complex operations against server side data. A new set of .NET RIA services supports these features on the server.
    • Improved performance, through:
      • Application library caching, which reduces the size of applications by caching framework on the client in order to improve rendering performance.
      • Enhanced Deep Zoom, allows users to fluidly navigate through larger image collections by zooming.
      • Binary XML allows communication with the server to be compressed, greatly increasing the speed at which data can be exchanged.
      • Local Connection This feature allows communication between two Silverlight applications on the client-side without incurring a server roundtrip: for instance a chart in one control can communicate with a datagrid in another.
  • Advanced Accessibility Features. Silverlight 3 is the first browser plug-in to provide access to all system colors, allowing partially-sighted people to make changes such as high contrast color schemes for ease of readability by using familiar operating system controls.
  • Out of Browser Capabilities. The new out of browser experience in Silverlight 3 enables users to place their favorite Silverlight applications directly onto their PC and Mac, with links on the desktop and start menu—all without the need to download an additional runtime or browser plug-in. Further, the new experience enables Silverlight applications to work whether the computer is connected to the Internet or not—a radical improvement to the traditional Web experience. Features include:
    • Life outside the browser. Silverlight applications can now be installed to and run from the desktop as lightweight web companions. Thus, users can take their favorite Web applications with them, regardless of whether they are connected to the Internet or not.
    • Desktop shortcuts and start menu support. Silverlight applications can be stored on any PC or Mac computer’s desktop with links in the start menu and applications folder, and so are available with one-click access.
    • Safe and secure. Leveraging the security features of the .NET Framework, Silverlight applications run inside a secure sandbox with persistent isolated storage. These applications have most of the same security restrictions as traditional web apps and so can be trusted without security warnings or prompts, minimizing user interruptions.
    • Smooth installation. Because Silverlight applications are stored in a local cache and do not require extra privileges to run, the installation process is quick and efficient.
    • Auto-update. Upon launch, Silverlight applications can check for new versions on the server, and automatically update if one is found.
    • Internet connectivity detection. Silverlight applications can now detect whether they have Internet connectivity and can react intelligently including caching a users’ data until their connection is restored.

The great news is we have all major companies about software, mobile and the web are focused on interactive development. If you are an interactive developer with programming skills and design skills, this is the time.  Adobe, Microsoft, Apple, even Google with Chrome (javascript engine ineteractive focused), and others are all on development that suits needs and requires skills of people that know the interactive and web platforms and are able to develop the best solution with the best technology for that solution. The programming depth is getting deeper (Adobe’s Alchemy, Silverlight/Moonlight/Mono/C#/Unity3D) but the capabilities are growing exponentially with what you can do with these new markets.

There are so many new, emerging and re-newed market forces in interactive development that things are going to shake up a bit and there is plenty of opportunity no matter what platform you might be locked into.  However I recommend not locking yourself into one platform and exploring, but specializing in what you do best. There has never been a better time for developers looking to take the web to the next level with cooler game development visuals, more immersive virtual spaces and applications that have usabililty and design in new ways and mimic the great usable design of the iphone; for developers going mobile or specializing in web game development this is a good time to be in the game.

Tuesday, December 30th, 2008

SWFAddress 2.2 has been released.  SWFAddress is pretty much THE solution for deep linking in flash and works greatly in combo with THE embedding solution into (X)HTML/Javascript for flash SWFObject.

The new SWFAddress has just arrived after seven months of active development, various contributions and lots of positive feedback from the community. The list of changes includes the following:

  • Refactored JavaScript implementation
  • New SWFAddress.swc AS3 component
  • New CS4 based Splash screen sample
  • New Digg API sample
  • New up() method for easier deep linking path navigation
  • New XSS protection that doesn’t affect special characters
  • Support for Internet Explorer 8
  • Support for custom HTTP status messages in the SEO sample
  • Improved title handling
  • Improved unload event handling for IE
  • Updated Rails sample
  • Fixed getBaseURL() for AS3
  • Fixed Safari 2.0-2.0.3 support
  • Build-in fix for the Firefox 3/Mac OSX blinking effect
  • Additional onLoad fix for application/xml content type
  • Fixed optional options parameter for the popup method
  • Cross platform build script
  • Various optimizations

I believe that this new version is pretty stable and won’t require an update soon. There are two known Safari bugs (19202 and 20355) that currently affect the project and we can only hope that they will make it’s way into the next major release of the browser.

SWFAddress has grown significantly in the last two years and it’s very likely that we’re going to provide a lite version for users who need just the basic functionality. Very soon the same API will become available for Silverlight and we’re also scheduling the development of a jQuery plugin.

Saturday, November 8th, 2008

The YouTube Chromeless Player works with AS3/ActionScript 3.

The demo shows great examples of the player with just the window canvas (chromeless) from both javascript and inside of flash.

The project is hosted on Google Code [youtubechromelesswrapper-as3]

Looks like they maybe had a contribution for this, so do it where you can.

This is something we’ve been wanting to provide for a while, and the YouTube API team greatly appreciates the work of developer Matthew Richmond of The Chopping Block for making it happen. Thanks Matthew!

Links

Capabilities/API

Public Methods

player.loadVideoById(id:String, startSeconds:Number = 0):void
Loads and plays video based on specified id.
player.cueNewVideo(id:String, startSeconds:Number = 0):void
Loads but does not automatically play video based on specified id.
player.clearVideo():void
Clears currently cued/loaded video.
player.setSize(w:Number, h:Number):void
Sets the size of YouTubePlayer instance.
player.play():void
Plays the currently cued/loaded video.
player.pause():void
Pauses the currently cued/loaded video.
player.stop():void
Stops the currently cued/loaded video.
player.seekTo(seconds:Number):void
Seeks to specified time within the currently cued/loaded video.
player.getPlayerState():String
Returns the current state of the currently cued/loaded video.
player.getBytesLoaded():Number
Returns the value of current bytes loaded of the currently cued/loaded video.
player.getBytesTotal():Number
Returns the value of total bytes loaded of the currently cued/loaded video.
player.getCurrentTime():Number
Returns the current position in time of the currently cued/loaded video.
player.getDuration():Number
Returns the current duration of the currently cued/loaded video.
player.getStartBytes():Number
Returns the start bytes of the currently cued/loaded video.
player.setVolume(newVolume:Number):void
Sets the volume of the currently cued/loaded video.
player.getVolume():Number
Returns the current volume of the currently cued/loaded video.
player.mute():void
Stores the current volume and changes the volume of the currently cued/loaded video to 0.
player.unmute():void
Returns the volume of the currently cued/loaded video to the last stored value when muted.
player.getEmbedCode():String
Returns the current YouTube embed code of the currently cued/loaded video.
player.getVideoUrl():String
Returns the current YouTube video url of the currently cued/loaded video.

Events

YouTubeLoaderEvent.LOADED
Fired once the Chromeless Player has successfully completed loading and is ready to accept operations calls.
YouTubeLoaderEvent.STATE_CHANGE
Fired whenever the player’s state changes. The YouTubeLoader class translates the JavaScript API numbers to their related string values, the YouTubeLoaderEvent class stores the current event in a variable called state. Possible values are unstarted, ended, playing, paused, buffering, video cued. When the SWF is first loaded, it will broadcast an unstarted event. When the video is cued and ready to play, it will broadcast a video cued event.
YouTubeLoaderEvent.IO_ERROR
Fired when an error in the player occurs. There are two error codes possible: 100 is broadcasted when the video requested is not found. This occurs when a video has been removed (for any reason), or it has been marked as private. 101 is broadcasted when the video requested does not allow playback in the embedded players.
Tuesday, October 14th, 2008

Silverlight 2 has been released. This is the real silverlight release.  The release last year 1.0 was just a javascript release and only had one object, the downloader, not even a text input.  But now there are real tools like rich ui controls, services support (REST), DLR (C#, Linq, ironpython/ruby) and Sockets which are much needed for games and game platform development.

There are also much better tools at this stage:

Bam. Silverlight 2 is out. There’s the expected stuff, like the final SDK, Expression, and Silverlight tools:

And from Tim’s blog:

But there’s also http://www.eclipse4sl.org/. Yes, that means you can code Silverlight in Eclipse. Details and progress at the Eclipse Tools for Silverlight Blog. It’ll be licensed under the EPL 1.0 License.

I have done lots of Silverlight initially when 1.0 came out as well as the agency I was working at.  We did video players, mini-games, demo apps and even the Halo 3 online manual at silverlight.net.  But it wasn’t really ready until now.  It still has a long way to go to really be an alternative to Flash but it is capable platform at version 2 for applications, mini-games and video apps for sure. But in the end it just provides competition to make both the Flash/Flex platforms and Silveright compete for developer support.

Thursday, October 9th, 2008

Google has entered the flash gaming ads market.  Right now that is pretty much owned by MochiAds for flash game devleopers at least pre-game ads anyways.  Advertising can be annoying but MochiAds has pulled it off where the ads are usually advertising other games or interesting things and it monetizes game development for Flash, Unity3D, Director and others, which is a win.  There are many flash gaming sites that are great fun that use ads almost stylistically like Nitrome and typically the ads are pretty fast when they are during the game loading.

Although advertisements in games have long been a scurge on gamers fun when they are trying to insert them into fat client, immersive MMOGs where it totally takes away from the experience, that doesn’t work.

What does work is stuff like MochiAds and possibly Second Life type sponsorships, where advertisements are almost nostalgic or fun and integrated. Developers and publishers have to make money somehow, the better the experience the more impactful and the more games for all. The key is making the integration a good user experience.

We shall see how Google plans to do this.  This might go along with their Lively strategy. The ad market entrance in games is possibly what started the rumors that Google was going to buy Valve for Steam, rumors which quickly died down.

Anyways, the one good thing about this announcement is advertisments go to where the eyes and crowds are going or already at, they are apparantly going massively to online web games and causal experiences make for easy advertisment integration. TV, Radio and many other industries have been supported by advertisement interest due to consumers using and buying the content.  So online gaming is just another one of those entertainment industries and it will grow further with this news.

Saturday, August 2nd, 2008

Making great games, applications and tools using flash, silverlight or other tools that are emerging such as Unity3D takes great style, effort and knowing your target. We need to know what the end-user machine has at hand.  The Unity 3d guys put together a great post on the capabilities of casual gaming machines. With all the talk about flash 3d, unity3d and silverlight what level are you targeting and what group of people can actually PLAY your games as you envision.

Pretty much everyone knows Valve’s hardware survey – it’s a very valuable resource that shows what hardware the typical “hardcore PC gamer” has (that is, gamers that play Valve’s games).

However, the “casual gamer”, which is what Unity games are mostly targeted at, probably has slightly different hardware. “Slightly” being a very relative term of course.

Lo and behold – we have a glimpse into that data.

How? First time the Unity Web Player is installed, it submits anonymous hardware details (details in the EULA). This happens only once, and contains no personally identifiable information. It’s much like visitor statistics trackers on the websites that gather your OS, browser information and whatnot.

Remember, all this data is from people who installed Unity Web Player (most likely because they wanted to play some Unity content on the web). Hardware of standalone game players might be different, and hardware of your game’s players might be different as well. The data set is well over a million samples at the moment.

Check out the full stats here.

The most interesting stats to me:

OS Platforms

Windows 96.8%

Mac OS X 3.2%

CPU Core count overall

1 54.7%

2 44.1%

4 1.1%

8 .1%

Wow this one is surprising, but with the type of gamer that will play and download a quality new plugin to get to a game, maybe not.  They need to have the latest and greatest.  Multi-core processors have been selling for about 2-3 years so this is a continuing trend that will make Flash 3d and even plugins like Unity 3d better over the short term.

Also when you check it over at Unity Blog note the top cards, it is a bit painful if you are a casual gamer developer.  Not a decent card in the top 10-15. But that is changing rapidly over the next 1-2 years in this regard. But this also vyes well for flash based games that rely on dual core software rendered results right now as a decent constraint for developers to keep content painfully accessible to all states of machinery out there.

I wonder if this information is available on the flash player and public? This is specific to the Unity 3D plugin that is also a bit of a different market that is willing to install a plugin for better experiences.  With Flash it is usually preinstalled or auto updated for a casual user and might be different as Flash has a 98% penetration rate.  Or for that matter the Director users which would be more gaming focused which amout ot about 40% of internet users.  But as with the case of Unity it is specific to games right now and a small penetration rate, Flash is also apps, ads, tools, demos, interactives in addition to games.  Having this information on Flash or Director would be nice.

Sunday, March 16th, 2008

Rostislav added a sample for his excellent SWFAddress kit using the new YouTubeAPI and deep linking to parts of the video. Part of the YouTubeAPI is by Geoff Stearns (the creator of SWFObject who works at YouTube now) and allows much more script control and embedding of the youtube player (chromeless with just the video canvas).

The sample Rostislav at Asual has, shows how you can incorporate SWFAddress now that the youtube player can be embedded by script, and thus how it can have deep-linking to sections of the video from the url.

So, today I spent some time trying to integrate SWFAddress with the sample YouTube video and the result is now available online. There were some tricky parts and probably the code can be encapsulated better, but overall I’m satisfied with the result. Every pause action or significant jump in the playback produces a deep link which will definitely make sense for long videos or specific scenarios. If you want to automatically start the video from the second verve just try this deep link. For this case I decided that it will be better to disable the generation of browser history and the SWFAddress strict mode.

The sample is available in the SWFAddress repository and will become a part of the upcoming 2.1 release.

The cool part about all this is is makes it extremely easy to add commenting at moments in time throughout youtube videos, enables deep-linking, allows snapshots of not just the flash application but also the video that might be playing in that chapter. This is done on services like viddler and others but now you can do it for youtube videos and this will also possibly start a standard way to do this across media players so that a platform of video commenting emerges.

The integration of SWFAddress is simple, on the normal onSWFAddressChange you just pass in the value to the seekTo call:

function onSWFAddressChange(event) {
  time = seek = parseInt(event.value);
  ytplayer = document.getElementById('myytplayer');
  ytplayer.seekTo(time, true);
 }

Google video always had jump to time params like:http://video.google.com/videoplay?docid=-5830318882717959520#01m30s (this is a classic/hilarious Erlang video)

…but this is not very workable with the google video player, also you can always add this to other players but having this ability for youtube is a great leap in allowing a more integrated commenting, chapter and community like feel to video.

Since youtube is so big finally having some more control with the YouTubeAPI will allow much more great additions to the capabilities of using youtube video in many more ways and integration of more great javascript kits like SWFAddress.

The YouTube API is really quite useful. Here are some links of interest:

Wednesday, February 13th, 2008

Flash not being on the iPhone yet is quite telling of the type of company battles going on. I like what Apple produces many times but they love a locked down environment more than Microsoft, in fact Microsoft seems like an open company and open market that is for sure compared to Apple. I am starting to think it will not happen, Flash on the iPhone. I have to boycott the iPhone for the type of closed environment that only non-developers can love. There are certain technologies, open or not, that become base technologies that create a platform of commonality to even make a market possible, the mobile market seems to be doing everything to not let that happen.

Daring Fireball (John Gruber) has a good take on the situation.

There are currently two ways to develop software for the iPhone (and iPod Touch): using HTML/CSS/JavaScript web standards, and using Cocoa. Cocoa is proprietary, but from Apple’s perspective, it’s the good sort of proprietary: a competitive advantage completely owned and controlled by Apple. Apple doesn’t control the HTML/CSS/JavaScript web standards, but neither does anyone else. And Apple does control and own WebKit, which is by anyone’s measure the best mobile implementation of these standards today.

Flash, on the other hand, is (from Apple’s perspective) the wrong sort of proprietary — owned and controlled by another company. Apple and Adobe aren’t enemies, but they’re certainly competitors, and the history between the two companies is not entirely warm.1 In the grand scheme of things, I suspect Apple’s executives aren’t happy at all about Flash’s prominent and entrenched role in desktop computing, particularly the fact that Flash, rather than QuickTime, has become the de facto standard for video on the web.

It is all about control…

The mobile market is wide open in ways that the desktop market is not. E.g., in the mobile OS market, Microsoft isn’t even in first place, let alone a monopoly. And, in the mobile world, Flash is rare, not ubiquitous. Why would Apple help Adobe establish Flash as a de facto standard for the mobile web, too? If Flash does turn into a major force in the mobile world, Apple can always add it later. But why shouldn’t Apple push for a Flash-free mobile web future now?

As it stands today, Apple is dependent on no one other than itself for the software on the iPhone. Apple controls the source code to the whole thing, from top to bottom.2 Why cede any of that control to Adobe?

Unfortunately if Gruber is right the mobile market will continue to be a lag in areas such as gaming, vector based apps, video, competitive markets, and many other things that lead to innovation. I think some of the recent changes in mobile recently are extermely cool (iPhone, Android, new flashlite) but unfortunately they have added about 20 new directions that mobile developers have to develop for. It is anything but a consistent platform even within the company silos being created in the mobile market.