Discuss: Experimental UI and layouts with SVG and WebGL

[Paul Brzeski]

As an indie developer trying to work full time and build my own multiplayer game from scratch at night, I feverishly try to come up with more efficient, powerful and flexible ways to do things. This is particularly important because I have to play a number of roles including product owner, project manager, developer, tester, designer, script writer, audio producer, artist and many others.

 

I really want to make my game customizable from the get go - I want to leverage of others involvement and let them influence the creation of the game by making their own assets, missions, artwork, etc.

 

To get there though, I think that the 'web 2.0'/HTML5/semantic web/assorted best practises haven't quite evolved to easily produce the kind of user engagement we need to make websites that are fun and amazing - all the time.

 

To me, website layouts and designs today seem in line with trends in the magazine industry, with many limitations seeming to stem from the lack of understanding of interactivity on the designer's part.

 

SVG's seem like the biggest missed opportunity of the recent web 2.0 paradigm. Here we had an open graphics format that could be drawn in a professional vector program like Illustrator or CorelDraw and then easily be injected into the DOM but we didn't realize just how much power had been given to us - most devs were too busy exploring the new ability to create single page applications and stuck to that.

 

I'd say that HTML5 games to me aren't just about the actual game, but about the entire experience of your site. So instead of having a 'Flashy' website and a game client, I think that as web game developers we should be looking at creating experiences more akin to consoles. Visiting your website should feel like arriving at the main menu of a game on your Playstation of XBOX. There is no reason that you can't provide the same complexity and detail, I'm just arguing that the overall look and feel needs to be more "game-like" - throw some gimmicky gadgets in there! 

 

As my game is a sci-fi with airships, I'm considering building a 3D cockpit and utilizing the controls and screens of the cockpit as the website. The viewport would provide a stream from an in-game camera, meaning that all visitors to the site would immediately feel like they've just been dropped into a cockpit and are watching a scene unfold in the distance.

 

The real power of SVG, I think, is that it unlocks the ability to quickly create high resolution images just by compositing some vectors with some noise and fills. You could have a vector stencil for some neat looking sci-fi futuristic borders and then programatically create the interface, compositing perlin noise against a metalbrush texture. You would then be able to easily call a high-res 'game looking' button without creating individual assets. 

 

I don't know if that's the right way to go about it though, I would really appreciate some discussion and feedback from others about this

[1-800-STAR-WARS]

This has all been done before - remember the 90s internet? 100% flash sites?

 

There's a reason they didn't stick and using the canvas doesn't help - user experience, expectations and accessibility.

 

Users don't like having to learn a new interface every time they visit a website - the reason common, reused elements like dropdown menus, links, headings etc are so similar over the web is because the user doesn't have to think to start using them - they've seen them 100x before, they know what to do to navigate and consume information.

 

Users with disabilities also benefit greatly from clean, semantic html markup. Screenreaders and alternative input devices know exactly what to do with it. If your page is a canvas with a few disparate floating DOM elements and SVGs, they fall flat and you've alienated a large group of users.

 

I agree that fancy effects, animations and the like are fun and add a wow factor to your sites, but I wouldn't start going down the path of completely replacing websites with canvas animations and game elements. By all means create game-like promotional materials, but if your main, customer-facing website isn't accessible it's probably going to annoy people.

[Paul Brzeski]

Yeah... it's definitely a fine line to balance. I'm not advocating throwing everything out the window for the sake of it, I'm just saying it's worth challenging traditional concepts of design if you can finds ways to make it 'feel' more like your game. What that actually means is completely up to you though

 

I have to stress that I'm not suggesting that all websites adopt this - I'm just saying that if you have a website that is the face for an online game, also hosted by that website, then it would make sense to create an experience that's more akin to gaming - i.e. large animated text, animations and transitions. Have a 3D t-Rex run past your screen and take a chunk out of your logo if this is a web based Turok clone. Everytime you click on him, he gets angrier and eventually smashes up the whole website. 

 

I'd say that things like console dashboards, any kind of display intended to be used while driving, etc. would be a good touchstone. You also have to remember that web games have a potential on the mobile/tablet market, so it makes sense to create more engaging/styled up content for game sites. I think that we've come pretty far with web standards and that these things are possible while making sure that semantic markup is available and that the site remains accessible and usable.

 

I don't think the examples I gave are particularly revolutionary in concept, but it's the amount of labour and expertise currently required that makes it a huge hurdle for independents and start-ups. I think that SVG and webGL provide an opportunity to finds ways to streamline the design/dev process - especially with SVG because you can literally draw that in Inkscape and easily script it up with CSS and JS. Tools like Blender and Sketchup have also made 3D extremely accessible, so I think that it's only inevitable that we're going to see that used more often and in more diverse ways.

[xerver]

This has all been done before - remember the 90s internet? 100% flash sites?

 

There's a reason they didn't stick and using the canvas doesn't help - user experience, expectations and accessibility.

 

A billion times, this.

[Paul Brzeski]

A billion times, this.

 

Yeah! Some people 20 years ago got it wrong so let's never try it again! 

 

Edit:

 

SVG is an open standard that is acesssible.

http://www.w3.org/TR/SVG-access/

 

SVG can also be implemented in so many different ways to enhance your production capabilities. With the right preparation, tools and mindset I really think that it has the potential to open up new ways to present content. Not in a way that alienates new users, but enhances and 'delights' and 'wows'. I'm only talking about websites that present games, news about your game, community portals and messageboards for your games, etc.

 

Here's some examples of SVG implementations in the wild.

 

http://svg-wow.org

http://www.creativebloq.com/design/examples-svg-7112785

 

I'm not saying that any of the are the right approach, but I do think that we should have a set of tools and techniques with which to conceptualize, design and build things that can unite both the imaginative design aspects with the programmatic objective. SVG and webGL are becoming very easy to quickly throw things into and play with immediately. When building things that are animated and interactive, I think that the way we need to address the massive overheads in production and the level of skill required to create a good result. The availability of tools like Illustrator, Inkscape, Blender, Sketchup, 3D Studio and the community and history they come with provide us developers a way to skill ourselves up for the concept and design process.

 

Building games for the web, I think we have an opportunity to investigate the full realm of web technologies at our disposal to find new ways of doing things that can deliver similar results to projects with larger teams and budgets. To me, this is absolutely vital to the success of my game. 

 

Edit 2:

 

And don't forget that we are dealing with an international market. I'm not an expert on Asian markets, but from what I've seen of Chinese/Japanese websites, software and gadgets, a more 'console' or 'game title screen' approach might actually be welcome. 

 

I think my point might also have been misunderstood in terms of execution - I'm not saying do your whole site that way either. Maybe, all you need is a really subtle, scalable SVG background of an animated alleyway with some flickering lights, smoke effects and a cat walking along a fence... for some kind of point and click crime-Noir game? Think also about the amount of time and effort it takes to create really sweet buttons and borders in Photoshop... wouldn't it be great if we could break that up into logical pieces and build it programmatically, allowing us to scale it and utilize the same smaller set of assets in a wider variety of ways? I know that CSS and divs can theoretically do this... but SVG can do it nicer, and throw built-in filters to boot.. and then it can animate it all for you with CSS transitions.

[Chris]

SVG is nice in theory. Its even supported widly in most browsers by now. The only problem it has: Its slow. Its so god damn holy motherf*** slow that it simply can't be used for anything dynamic at a decent level of details.

Maybe it gets better when SVG rendering becomes hardware accelerated at some point in the future, but right now, its sadly very unattractive for dynamic content creation.

[Paul Brzeski]

SVG is nice in theory. Its even supported widly in most browsers by now. The only problem it has: Its slow. Its so god damn holy motherf*** slow that it simply can't be used for anything dynamic at a decent level of details.

Maybe it gets better when SVG rendering becomes hardware accelerated at some point in the future, but right now, its sadly very unattractive for dynamic content creation.

 

I've had good experiences with Raphael.JS. Their site has a few good examples that I think hold up quite well, even in IE8!

 

Interactive chart - http://raphaeljs.com/ichart.html

Color picker - http://raphaeljs.com/picker.html

Easing animations - http://raphaeljs.com/easing.html

 

There's also d3.js that is a bit more hands on but can deliver pretty incredible results.

http://mbostock.github.io/d3/talk/20111116/bar-hierarchy.html

 

You could easily imagine this as the homepage for some kind of multiplayer turn based strategy - http://remittances.herokuapp.com/?en

Github visualizer - http://artzub.com/ghv/#repo=Langenium&climit=100&user=paulbrzeski

[xerver]

Nothing wrong with using canvas/svg to *enhance* your site. Using it to completely build your site is a terrible idea. There is a reason we have an extensive HTML specification, so that it is semantic and readable both by humans and machines. Using a blank drawing surface may allow you to do the coolest of animations, but it destroys any semantic reasoning that may be done by other humans oor robots visiting the site.

 

What they did wrong 20 years ago was decide that a blank drawing surface (flash) would be better than using HTML to describe the sites. There is a right way to draw a beautiful website and it is to write the site with progressive enhancements, not to dump web tech and go with a drawing.

[Paul Brzeski]

Nothing wrong with using canvas/svg to *enhance* your site. Using it to completely build your site is a terrible idea. There is a reason we have an extensive HTML specification, so that it is semantic and readable both by humans and machines. Using a blank drawing surface may allow you to do the coolest of animations, but it destroys any semantic reasoning that may be done by other humans oor robots visiting the site.

 

What they did wrong 20 years ago was decide that a blank drawing surface (flash) would be better than using HTML to describe the sites. There is a right way to draw a beautiful website and it is to write the site with progressive enhancements, not to dump web tech and go with a drawing.

 

I'm not saying throw out the normal HTML skeleton I am just really sick of all the clean rectangular boxes on the web ... Simply replacing the 'background image' that is the same box with one corner slightly pushed out and shadowed, suddenly gives the thing a lot more life But I'm also sick to death of having to chop up static images and staple them on with CSS... SVG seems like the natural solution to this.

[Chris]

@xerver: For what its worth: SVG is also XML based, like HTML. You can even explore the whole DOM of a SVG image with chrome dev tools, so SVG is more semantic than an average JPG or PNG image

[borisyankov]

SVG was not invented with 'hardware acceleration' in mind. It already is 'accelerated' for whatever that is worth, and it is SLOW!

 

You know what kills SVG animation? Lots of pixels, and not that much CPU power.

What has these? All new tablets!

 

One of the latest projects I worked on, required a rather costly rework of SVG based maps (D3, and all this goodness) exactly because of speed.

 

You make your thing, passably fast, then you realize you have tested this on the latest browser, on a fast dev machine.

 

Then you run Firefox and it turns out it runs SVG seven times slower than latest Chrome.

Then you run it on a phone/tablet and it dies.

 

There is a reason why WebGL is fast, and SVG is slow, and these are not changing.

[Chris]

Well, when its fast on Chrome but slow in FF, thats definitely not SVGs fault. If the renderers get improved they can get insane speed gains on rendering of SVG files without doubt. Remember how slow the canvas elements drawing was at the beginning. And remember how insanely fast Flash manages to render vector graphics. I know that rendering vectors is heavier than bitmap drawing, but if the rendereds get more optimizations, that won't be a problem.

Right now, its nearly unusable, tough.

[Paul Brzeski]

Below is a concept for a layout I'm looking to build.

 

I'm going to use SVG to create the background images for the panels etc. I'm still working on the final look though, but I thought the rivets and metally texture should give enough of an idea of what I'm getting at

 

It would be really cool to leverage of the code that builds this an use the same background textures on UI elements through the game UI and where relevant in the website's UI. 

 

Oh yeah, and the background is going to show an in-game feed and you'll be able to hide the UI to view the background. Further down the track, I'll look at scripting up battle and cinematic scenes to show off in different areas.

 

[borisyankov]

Chris, Flash is a combination of raster, vector and video.

The vector part has always been slow, and that is what it has common with SVG.

 

Most Flash games took just part of the screen, for example the popular game Kingdom Rush is just 700x600.

A retina iPad (which now all are) has 7 times more pixels.

 

Please give a link to a vector Flash game that can run 60 FPS on my desktop machine on full screen. I couldn't find any.