{"id":636,"date":"2010-04-02T10:35:19","date_gmt":"2010-04-02T16:35:19","guid":{"rendered":"http:\/\/www.evolutionarydesigns.net\/blog\/2010\/04\/02\/you-can-now-play-quake-ii-with-html5\/"},"modified":"2010-04-02T10:38:45","modified_gmt":"2010-04-02T16:38:45","slug":"you-can-now-play-quake-ii-with-html5","status":"publish","type":"post","link":"http:\/\/www.evolutionarydesigns.net\/blog\/2010\/04\/02\/you-can-now-play-quake-ii-with-html5\/","title":{"rendered":"You Can Now Play Quake II with HTML5"},"content":{"rendered":"<p>Yesterday <a href=\"http:\/\/googlewebtoolkit.blogspot.com\/2010\/04\/look-ma-no-plugin.html\" target=\"_blank\">Google<\/a> released a <a href=\"http:\/\/www.youtube.com\/watch?v=XhMN0wlITLk\" target=\"_blank\">video<\/a> of their engineers playing <a href=\"http:\/\/www.idsoftware.com\/games\/quake\/quake2\/\" target=\"_blank\">Quake II<\/a> using <a href=\"https:\/\/www.apple.com\/safari\/\" target=\"_blank\">Safari<\/a> without using plugins. The Engineers used some of their <a href=\"http:\/\/en.wikipedia.org\/wiki\/Google\" target=\"_blank\">20% time<\/a> to test the limits of <a href=\"http:\/\/en.wikipedia.org\/wiki\/HTML5\" target=\"_blank\">HTML5<\/a>. Their results were an HTML5 port of Id&#8217;s Quake II game engine! Normally I would not do a post on video games, but this game is programmed and setup to run via a web browser using HTML5. Run Quake II as the Google Guys set it up shows the potential of HTML5 and the future of web design.\u00a0 Running Quake II\u00a0 with HTML5 will only run on \u201cmodern browsers\u201d such as Safari and <a href=\"http:\/\/www.google.com\/chrome\" target=\"_blank\">Google Chrome<\/a>.<\/p>\n<div id=\"scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:fe7bc4d9-a140-49d6-b57b-6c530dd1c267\" class=\"wlWriterEditableSmartContent\" style=\"margin: 0px auto; padding: 0px; display: block; float: none; width: 425px;\">\n<div><object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"425\" height=\"355\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"src\" value=\"http:\/\/www.youtube.com\/v\/XhMN0wlITLk&amp;hl=en\" \/><\/object><\/div>\n<div style=\"clear: both; font-size: .8em;\">Quake II Running On Safari Without Plugins<\/div>\n<\/div>\n<h3>So How They Do It?<\/h3>\n<p>They started with <a href=\"http:\/\/bytonic.de\/html\/jake2.html\" target=\"_blank\">Jake2<\/a>, a Java 3D game engine that is a port of GPL\u2019D Quake2 game engine from ID software. They also used the <a href=\"http:\/\/code.google.com\/webtoolkit\/\" target=\"_blank\">Google Web Toolkit<\/a>, WebGL, WebSockets, the Canvas API, HTML 5 <tt>&lt;audio&gt;<\/tt> elements, and local storage API to cross-compile it into <a href=\"http:\/\/en.wikipedia.org\/wiki\/JavaScript\" target=\"_blank\">Javascript<\/a>. The results can be seen in the video above. They reached 30 to 60 frames per second on laptops! This may very depending on your hardware and internet connection.<\/p>\n<h3>How to Compile Your Own Version of Quake II for HTML5<\/h3>\n<p>In order to make Jake2 work, you will have to (source: <a href=\"http:\/\/code.google.com\/p\/quake2-gwt-port\/\" target=\"_blank\">quake2-gwt-port<\/a>):<\/p>\n<blockquote>\n<ul>\n<li>Created a new <a href=\"https:\/\/cvs.khronos.org\/svn\/repos\/registry\/trunk\/public\/webgl\/doc\/spec\/WebGL-spec.html\">WebGL<\/a> based renderer<\/li>\n<li>Ported the network layer for multiplayer games from UDP to <a href=\"http:\/\/dev.w3.org\/html5\/websockets\/\">WebSockets<\/a><\/li>\n<li>Made all resource loading calls asynchronous<\/li>\n<li>Created a GWT implementation of Java nio buffers based on WebGL arrays (to be ported to <a href=\"http:\/\/people.mozilla.com\/%7Evladimir\/jsvec\/TypedArray-spec.html\">ECMAScript Typed Arrays<\/a>)<\/li>\n<li>Implemented a simple file system emulation for saving games and preferences using the <a href=\"http:\/\/dev.w3.org\/html5\/webstorage\/\">Web Storage API<\/a><\/li>\n<\/ul>\n<\/blockquote>\n<p>Google Engineer have mostly used Linux and Mac to run and build the code.\u00a0 There are six steps to follow.<\/p>\n<blockquote>\n<ol>\n<li>Install ogg vorbis and lame by running <tt>sudo apt-get install vorbis-tools<\/tt> and <tt>sudo apt-get install lame<\/tt> on linux. On a Mac, install <a href=\"http:\/\/www.macports.org\/\">MacPorts<\/a> and then run <tt>sudo port install vorbis-tools<\/tt> and <tt>sudo port install lame<\/tt>. The tools are needed to convert the Quake II resources for the Web.<\/li>\n<li><a href=\"http:\/\/code.google.com\/p\/quake2-gwt-port\/source\/checkout\">Check out<\/a> the code and change into the project directory (<tt>cd quake2-gwt-port<\/tt>).<\/li>\n<li><tt>.\/build-dedicated-server<\/tt> (will build the tools and the client and server code).<\/li>\n<li><tt>.\/install-resources<\/tt> (will download, unpack, and convert the original Quake II demo resources). Due to a glitch in our maven build files, you currently also need <tt>cp -r maven-build\/server\/target\/gwtquake\/war\/gwtquake war<\/tt>. We are fixing this.<\/li>\n<li><tt>.\/run-dedicated-server [port]<\/tt> (will run the local Quake II server).<\/li>\n<li>Navigate to: <a href=\"http:\/\/localhost:8080\/GwtQuake.html\">http:\/\/localhost:8080\/GwtQuake.html<\/a> (or whatever port you specified to the server).<\/li>\n<\/ol>\n<\/blockquote>\n<h2>Final thoughts<\/h2>\n<p>After watching the video, I believe the game play was not as good as running the original, but it still looks good for what it is and the technology being used. As HTML5 evolves so will the quality of the work created.<\/p>\n<p>What are your thoughts?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday Google released a video of their engineers playing Quake II using Safari without using plugins. The Engineers used some of their 20% time to test the limits of HTML5. Their results were an HTML5 port of Id&#8217;s Quake II game engine! Normally I would not do a post on video games, but this game [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[383],"tags":[386,1491,388,359,133,387,384,385],"class_list":["post-636","post","type-post","status-publish","format-standard","hentry","category-programming","tag-chrome","tag-google","tag-google-web-toolkit","tag-html5","tag-javascript","tag-modern-browsers-jake2","tag-quake-ii","tag-safari","entry"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pJPdG-ag","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/comments?post=636"}],"version-history":[{"count":0,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/636\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/media?parent=636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/categories?post=636"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/tags?post=636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}