nclud Pushes the Envelope in Cutting Edge HTML5 Technology

snailyakSecurity

Nov 5, 2013 (3 years and 9 months ago)

78 views

nclud Pushes the Envelope in Cutting Edge HTML5
Technology


WASHINGTON, DC (March XX, 2013)
-


nclud is proud to present the 2013
BeerCamp website (
http://2013.beercamp.com
). The BeerCamp website, which
is an
invitation to our yearly party at SXSW Interactive, showcases the latest in
cutting edge web technology to create an unprecedented real
-
time multiplayer
gameplay experience within the web browser.

In the past, creating a similar
multiplayer experience req
uired the use of plugins such as Flash and
functionality was limited.


BeerCamp was created using the latest HTML5 tools such as JavaScript and
Node.js
(Infoworld's 2012 Technology of the Year)
, and
WebSockets via
Socket.io for low
-
latency client
-
server co
mmunication. Socket.io offers a high
-
performance alternative to older methods like AJAX. This technology allows the
server to push updates to all connected players over 20 times a second, while
the client smoothly moves each character to the updated positi
on on the screen.


The game level is a compilation of several canvases. The primary canvas is the
player viewport and always adjusts to fit the size of the browser window. The
game level canvas is the full size of the level, scaled to fit the width of the
browser window, and adjusted vertically each frame to track the position of the
player. Finally, each sprite is cached to a canvas, and mirrored for moving in the
opposite direction. This caching enables significantly higher performance by
drawing a croppe
d portion of the entire canvas to the player viewport

with

each
frame, rather than redrawing the entire canvas.


Technical challenges included ensuring smooth animations, optimizing canvas
drawing to maintain a consistently high frame rate, and optimizing
server updates
to not consume extraordinary amounts of bandwidth.


About nclud


nclud (
http://nclud.com
) is a creative web design agency, focused on unique,
stylish and usable experiences across a multitude of verticals,
mediums and
devices. We work with early stage start
-
ups, to the Fortune 100, and everyone in
between.