Posts Tagged ‘html5’

Tuesday, March 18th, 2014

Well it has happened, Unity announced WebGL exporting.  This was a much needed announcement and our flash man on the inside, UnitZeroOne / Ralph Hauwert of good ol’ Papervision days, helped make it so. Thanks Ralph and Unity team!

This feature is in Unity 5 as a preview just announced but with the impending plugin-pocapyse I am sure it is a major focus at Unity to get to production stage.

The plugin-pocalypse is happening. Both Google Chrome and Mozilla Firefox are taking issue and removing plugin support.  Recently I was a bit worried about web exporting and the player/plugin support as NPAPI is being deprecated in favor of PPAPI in Chrome, so Unity, Silverlight and other NPAPI built plugins would have to be rebuilt in PPAPI (unlikely as Unity already maintains NaCL) or another path. Chrome will not allow NPAPI plugins to run at the end of 2014 and already warn each time you use them. Side note: Flash plugin has been updated to PPAPI and will not go away at the end of the year, Unity player won’t either but it may not work in Chrome without explicitly allowing it or at all, still to be seen however they said they will stop supporting NPAPI December 2014 and all NPAPI plugins will no longer work. Mozilla also is fighting against plugins in favor of standards like WebGL so this entirely solves it for Firefox, for Chrome it will still run but slightly slower so there is a transition period.

Mobile really killed the plugin but it opened up standards that allow WebGL to take over. I am happy to see Unity jump on this and bring a better web export that is in line with the best out there currently with asm.js/WebGL and the performance it can bring.

Unity really does add a tons of value if everything just works in WebGL exporting as 2d in WebGL is very mature with lots of supporting platforms, but 3D and stable engines are still lacking.  (Until of course Three.js rules the world and may when it is easier to use WebGL in native apps for store like this). Let’s hope browser support for asm.js and Firefox native speeds grows, but most Unity games will run without needing it (2d games, simple games that already run well in WebGL performance ranges).  So you can easily see the Unity Player, NaCL exports going away over the next few cycles when WebGL exporting is solid possibly if it isn’t already. Another option is a grace period where Chrome exports need to be NaCL for a while if the WebGL support isn’t ready for primetime by then but from what it looks it may be there (although full support can take some time). The plugin-pocalypse is here but there is a path forward, granted game portals and other sites that host current Unity player content may have alot of work to do this year.

This change couldn’t come soon enough as we had to start thinking about other options for web content, Unity successfully hurdled this one.

There are tons of other great things in Unity 5 (currently up for pre-order) and will be out later this year, but WebGL and “plugin-less” exporting is the driver on this version and we are bought in for the next round.

Unity 5.0 Announced Features

  • The aforementioned “Early Access” to WebGL support meaning no plugins required in compatible browsers
  • 64-bit CPU support
  • Real-Time Global Illumination — the over-simplified version: the lighting system used by games like Battlefield 4 and Eve Online (a system called “Enlighten) for their more advanced lighting tricks is now built into Unity.
  • Light baking previews — Light mapping can take a while because every little tweak required a complete rebake. Light maps can now be previewed in real-time.
  • Unity Cloud — Remember the built-in ad solution that Unity announced around the middle of last year? That’ll launch with Unity 5.
  • New audio system Both more efficient and more powerful. Unity 5.0 has a proper audio mixing board to help developers tweak the way things sound in different in-game environments.
  • Nvidia PhysX 3.3 While Unity has used Nvidia’s physics engine for years, the version built into Unity 4.0 has been outdated for a while now. 5.0 taps PhysX 3.3, which is up to 2x as fast.

Unity 5 will probably be available later in the year and may launch around Q3/Q4, can’t wait to play with the WebGL exporter. Here’s hoping it is solid by the end of the year.

Tuesday, December 3rd, 2013

There are tons of javascript engines out there that are partial or full game engines for javascript and html.  Choosing one is quite difficult so Breakouts is there to help you compare with a common game ‘Breakout’ across all your favorites and some you might not know.

Feature Comparison

Current Breakouts

Saturday, November 2nd, 2013

Could this be the library that makes SVG the vector replacement for Flash? Snap.svg being based on the SVG standard makes it a better fit for mobile and smaller computing.

Snap.svg is like Raphaël, and actually made by the same author Dmitry Baranovskiy. This library is sponsored by Adobe so this not only looks great as a library, but has the right support. Snap.svg is a very usable way to get vector graphics more accessible to creative iteration and into more content on mobile. It also makes working with SVG very simple over the verboseness of the declarative svg tags.

Silverlight and other xml based declarative markup vector/graphics libraries are nice for interop but it also causes problems with support across many browsers, exporters, etc. It is getting easier and there needs to be a way to get vector based content animating on mobile devices in browsers. d3.js, another awesome svg library,  has made it easy to combine data and svg/vector based beautiful charts, maps and more.  But Snap.svg has the library that looks more friendly to Flash type architecture and libraries combined with the simplicity of jquery like javascript selectors and control. The binary nature of Flash content can’t compare on the standard front so having Adobe interested in sponsoring a vector library that is standard is great. In the end neither Silverlight or Flash won but a combined vector and declarative vector framework in SVG has found new life with mobile and it appears a new contender in vector animation and interactive content.

Adobe, along with CreateJS and Cordova/PhoneGap has really been moving in good directions with sponsoring libraries and open source toolkits for mobile content creators.

Snap.svg makes it easier to use SVG and you can animate it.

Another unique feature of Snap is its ability to work with existing SVG. That means your SVG content does not have to be generated with Snap for you to be able to use Snap to work with it (think “jQuery or Zepto for SVG”). That means you create SVG content in tools like Illustrator, Inkscape, or Sketch then animate or otherwise manipulate it using Snap. You can even work with strings of SVG (for example, SVG files loaded via Ajax) without having to actually render it first which means you can do things like query specific shapes out of an SVG file, essentially turning it into a resource container or sprite sheet.

Finally, Snap supports animation. By providing a simple and intuitive JavaScript API for animation, Snap can help make your SVG content more interactive and engaging.

 

 

Thursday, December 15th, 2011

Thank you Microsoft.  You have helped to make it easier to produce and convince clients and collegues to use html5 with your latest decision.

Since you are updating Internet Explorer in automatic updates to IE9  currently and hopefully for the future versions. Developing for the web became better as #html5 with canvas goodness is now market ready! (in a nearer term rather than a year or two possibly – still some time to propagate).

Good news, everyone! Microsoft has decided that the time has come to make sure that all users of Internet Explorer are using the most current version possible. To accomplish that goal, they’re turning on automatic updates.

Yes, Internet Explorer patches and new major versions are already available via Windows Update. But to move from one version to the next, it’s never been a fully automatic process. There’s a separate install window that appears for installing, say, Internet Explorer 9. For many users, the additional steps required were often enough to prevent them from installing a new version.

To clients, developers can now say that IE9 and up is the best target since Microsoft themselves are updating the browser in Automatic Updates for security and a better experience.  They can tell clients that is is acceptable to build in html5 with canvas and with less tedium in making things work for IE7 and IE8, less middle man proxy technologies. Microsoft will also be less of a bad name for developers stemming from IE6 and lagged, slow upgrading software progress and users. For many clients that were risky on projects this wasn’t an issue, but deciding what tech to use and convincing others with so much old IE out there was difficult.  Hopefully this helps soon.

Ryan Gavin, Microsoft’s senior director for Internet Explorer, pointed out several benefits. The overall security of the Windows user community will be improved as outdated browsers are replaced, developers can focus their attention on building sites using modern web code, and those who surf with IE will be able to enjoy the full Beauty of the Web.

Browsers that silently update like Chrome are the best model, but automatic software updates are also good. html5 is on soon when this kicks in across the world, it seems Microsoft plans to do this at different times around the world.

And so from now on, Internet Explorer will quietly update itself just as Windows does. Starting in January, users in Australia and Brazil will be the begin receiving automatic IE updates. Microsoft will then gradually extend coverage to other parts of the world as time goes on.

This news comes on the same day that Chrome 15 is now the most used browser in the world. IE9 could take the top spot for a while if all IE versions move to IE9 as IE is still 40% of the world share in browsers for all versions.

Ship it! html5 has entered the arena officially. And so it begins…

[source from geek.com + microsoft]

 

Saturday, July 2nd, 2011

Interactive on the web is changing at a rapid clip. The path of the next wave of ineractive and gaming on the web is beginning to materialize.

WebGL, Canvas grouped with html5 are final and providing new landscapes to draw on and new ways to make levels to beat. Most browsers and platforms are supporting this technology. Tools like Three.js make that very fun. Mozilla Firefox, Chrome and Safari are including WebGL + canvas and mostly hardware accelerated, making Javascript an even more powerful glue of the web.

Adobe is going low level with Flash ‘Molehill’ 3D and hardware acceleration platform that companies like Unity will be including as an export target.

Microsoft has finally laid out their plans. Silverlight is alive with Silverlight 5 / 3D powered by XNA (any surprise? guess it isn’t dead) and hardware acceleration throughout Internet Explorer, this appears to be Microsoft’s version of the future.

Plugins like Flash, Unity, Silverlight, others will continue to push the bounds cross platform where standards cement the technology behind it for a platform to reach the next innovative step.

Mobile has blown up the scene with native and low-level focus, causing web platforms to also go low level for more performance thanks to Apple and now Android. Native languages like C, C++ and Objective-C came roaring back as the hardware was reset a bit back to late 90s/early 2000s processor and graphics power. However with mobile and cpu cost on platform as service system, native will stay more over the coming years.

Games, interactive and entertainment projects and apps are going to be even more fun. New opportunities all over the place.  Game on!

Sunday, January 16th, 2011

Cocos2D has been ported to run in javascript and called cocos2d-javascript by Ryan Williams.

Cocos2D is a game engine similar to Flash in that it is a 2d engine but it natively renders to OpenGL ES.  Cocos2D-iphone was originally a port of Cocos2D, a python game engine.  But the similarities to Flash and DisplayObjects = Nodes, Sprites, Scenes, Layers etc. This helps to port games over fairly quickly or start in productive in cocos2D.

Having this in javascript is a great thing! It runs on html5/canvas/javascript.

What is cocos2d-javascript?

Cocos2d-javascript is a 2D game/graphics engine based on cocos2d-iphone but designed to run in the web browser. It uses the latest features available in HTML 5 allowing real-time rendering of 2D graphics without the need for plug-ins such as Adobe Flash.

While HTML 5 is still new and not fully supported across all browsers it won’t be long before the vast majority of web users are able to enjoy all that it offers. When this time comes cocos2d-javascript will be an excellent way to develop games and applications.

To see a small sample of what is on offer, please check out the demo section.

cocos2d engines are now available on almost all platforms, so if you are building a 2d game and need a 2d engine typically with Box2D physics, cocos2d offers lots of ways to get the game out there with some porting work.

Saturday, January 15th, 2011

Firefox 4 with WebGLFirefox 4 in beta to be released soon, also joins the WebGL ranks with Chrome 9.  Safari has it in nightlies and IE hasn’t even mentioned it.

There really is too much to list as this release is feature packed! Of course the most exciting being WebGL and hardware acceleration from our perspective.

Firefox 4 now has WebGL enabled by default. Based on the original 3-D Canvas work by Vladimir Vukićević, this is being

widely implemented in browsers. The WebGL spec is on the short path to a 1.0 release and we’re very excited to see this be used in the wild.

Hardware acceleration has finally arrived even though it should have been in nearly all platforms for web last decade, but we’ll take it.

Firefox 4 supports full hardware acceleration on Windows 7 and Windows Vista via a combination of D2D, DX9 and DX10. This allows us to accelerate everything from Canvas drawing to video rendering. Windows XP users will also enjoy hardware acceleration for many operations because we’re using our new Layers infrastructure along with DX9. And, of course, OSX users have excellent OpenGL support, so we’ve got that covered as well.

The javascript engine JaegerMonkey is comparably fast to SunSpider and V-8 javascript benchmarks and has support for EC5 javascript.

And you might have noticed that it’s really fast. This is the world’s first third-generation JavaScript engine, using Baseline JIT technology similar to engines found in other browsers and kicked up a level with the Tracing engine found in Firefox 3.6. As such, we’re competitive on benchmarks such as Sunspider and V8, but we’re also fast at a whole mess of things that we expect to see in the set of next-generation web applications, hence Kraken.

WebConsole looks like they are joining Chrome and Safari with built in inspection tools similar to Firebug, however Firebug still available.

Firefox 4 will include the Web Console. This is a new tool that will let you inspect a web page as it’s running, see network activity, see messages logged with console.log, see warnings for a page’s CSS, and a number of other things.

Note this that is something that we’ll be including with Firefox 4 directly. It’s not an add-on.

(Also Firebug will be ready for the final Firefox 4 release.)

Firefox 4 has other improvements like layering (in-memory retained layers), caching/scheduling improvements and lots of other performance enhancements.

2011 is looking like the year all this is coming together, at least for Chrome, Firefox, possibly Safari (need WebGL in main release) and IE is still the biggest problem to getting WebGL. At this point WebGL looks like it is still over a year out as it may not come to IE until IE10 or possibly never, the WebGL 1.0 spec is on the fast track though (don’t we all love Khronos? They have been amazing with OpenGL since they took over).  html5 is looking like it will be close to mainstream by the end of this year depending on the install rate of IE9 when released.

The world is waiting to see if Microsoft implements WebGL or tries the old DirectX/D2D only ways.  Nevertheless, getting a push for hardware acceleration and fast renders in 2d/3d is a very sweet direction.

Friday, December 17th, 2010

EaselJS is a new library from Grant Skinner that somewhat mimics the Flash display list/display object heirarchy.  It is the result of the game Pirates Love Daisies which demonstrates some great gameplay in html5.

The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers. In our preliminary testing, Easel appears to be fully compatible with iOS, Android, and all major browsers that support the canvas element.

Lots of great javascript libraries have been made public including such contributions as this, Three.js (3d canvas/svg/webgl), Lettering.js (typography), audio.js (audio) and many many others, a complete pipeline is emerging. EaselJS adds to that a helpful flash like api for html5 (<canvas> + javascript).

The API contains these familiar classes for Flash/AS3 developers:

DisplayObject

Abstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects.

Stage

The root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.

Container

A nestable display container, which lets you aggregate display objects and manipulate them as a group.

Bitmap

Draws an image, video or canvas to the canvas according to its display properties.

BitmapSequence

Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.

Shape

Renders vector drawing instructions within the context of the display list.

Monday, November 22nd, 2010

WebSockets and many other great features are now available across the iOS devices that are updated to iOS 4.2.

You can test your devices for WebSocket support and I just tested iPad and iPhone/iPods on iOS 4.2 and it is a go.

The update also adds some other excellent Safari browser features including:

  • As mentioned, WebSocket support
  • Accelerometer support
  • Improved SVG and Canvas rendering
  • Better Ajax

The new Safari on iOS 4.2 makes the iOS platform the current best html5 mobile solution for interactive apps and games in the browser. This should add some fun in terms of interactive web, games and better web experiences for iOS users.

We hope they add in WebGL support soon, there was mention of WebGLRenderingContext but not supported in browser yet.

Sunday, October 31st, 2010

Helpful tool for taking vector art from Adobe Illustrator .ai assets and exporting them as html5 with canvas script.

It is a visitmix lab product  so it is a Microsoft tool. Mike Swanson has builtmany great conversion tools for interactive such as SWF2XAML (silverlight/wpf markup).