{"id":6056,"date":"2011-02-07T22:09:57","date_gmt":"2011-02-07T22:09:57","guid":{"rendered":"http:\/\/16.563"},"modified":"2011-02-07T22:09:57","modified_gmt":"2011-02-07T22:09:57","slug":"bar-fight","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/labs\/2011\/02\/bar-fight\/","title":{"rendered":"Game On Spotlight: Bar Fight"},"content":{"rendered":"

Bar Fight was a finalist in the Game On 2010 competition that showcased the use of Web GL. This is a guest post by Oliver Baker<\/a> – Studying for a double-major at UT Dallas – and his father, Steve Baker<\/a> who works at Total Immersion Software. Together, they are team who created BarFight<\/a>, a Wild West game written using WebGL\/HTML5\/CSS3.<\/em><\/p>\n

Who are TuBaGames<\/a>?<\/h2>\n

Well, we’re Steve and Oliver Baker – a father and son team from the UK, now living and working in Texas. We’re long-time 3D graphics enthusiasts and amateur games writers. Linux folk may remember Tux the Penguin – A Quest for Herring<\/a> which we created back in 1997 when Oliver was just 7 years old – it was the first ever 3D game for Linux. Back then graphics cards could draw just a few hundred triangles and the artistic demands were minimal at best. TuxKart<\/a> was a much better game – that came along in 1999 and was to be found on most Linux distro’s for years afterwards. Fast-forward to August 2010; we’d been watching the progress of WebGL and decided to try to write some online games using it. Because we intend to fund the web site using advertising revenue alone, we can’t afford a massive server farm to host the games. So we needed to come up with games with low server demands. Turn-based games fit the bill quite well because the server code can sleep while players are deciding what to do. Thus was born “TuBaGames.net<\/a>” (TUrn BAsed GAMES for the NET). Our vision – though constantly subject to redirection – is that we will have a large library of games, in which players can compete in, and are ranked. The BarFight<\/a> serves as a lobby in which people can hang out and let off some steam. We have some interesting ways of publicizing matches and making high-ranked games the “must see attraction”; so stick around and see how far TuBaGames will go.<\/p>\n

Inspiration for the Saloon<\/h2>\n

The first thing to build for TuBaGames was a “lobby” area where players could come together to chat, hang out, maybe buy and swap in-game items and arrange matches. We came up with the idea of having a virtual bar-room, with tables where people could meet up in the virtual world and drink virtual beer. \"\"<\/a> It was a small step from there to a Wild West Saloon. At about that time, we caught the announcement of the Mozilla GameOn 2010<\/a> contest – and decided that this would be a great way to get publicity for the site. Since all we had planned out was the Saloon, it was natural to try to make this into a game and that’s how “BarFight<\/a>” was born…a cosey chatroom – with extreme violence mixed in for fun! \"\"<\/a> In the process of finding concept art for Oliver to work with (WikiCommons – we love you!) we realized that what we wanted wasn’t a realistic saloon – but rather the kind you see in just about every 1940’s western – the kind where someone spills a drink on someone else – and within about 10 seconds there are three dozen cowboys swinging punches at each other and generally smashing up the place! <\/p>\n

\"\"<\/a> The bar fight in Roy Rodger’s movie: “Rough Riders Roundup” (which is now out of copyright) was the perfect inspiration. The idea that our players are just a bunch of “extras” in a Hollywood movie explains why nobody is ever seriously hurt – and let’s us get away with some awful cliches.<\/p>\n

The Work process and the Father\/Son thing<\/h2>\n

Since we live 180 miles apart – we use copious text messaging, email and daily half-hour long phone calls. We probably wind up communicating more than most families who live in the same house! We also have our own private Wiki where we keep reference art, documentation and the all-important “To Do List”. We’ve taken to using “unison” to keep our PC’s in sync with each others files and for updating the server. We use online tools for things like compiling the server and converting models from Blender to JavaScript. That infrastructure soaked up quite a bit of development effort – but it proved utterly invaluable – well worth the effort. It also allows to quickly expand our library of games in the future. Staying good friends through the process worked out OK – although we had a few ‘tense moments’ during the worst of the sleep-deprived crunch. What’s remarkable is that Francoise (wife\/mother) and Tracy (girlfriend) are still with us afterwards! All credit goes to them!<\/p>\n

Development<\/h2>\n

* Oliver (who is the artistic one) modeled the saloon, its inhabitants and about 40 other props using Blender and GIMP, putting together over 50 separate animations and around 100 texture maps.<\/p>\n

* Steve (who is a dyed-in-the-wool code-head) set about writing a WebGL-based renderer in JavaScript to draw it all, shader code in GLSL, Python to export Blender models and a server in PHP and C++. In all, about 20,000 lines of code.<\/p>\n

* Reagan Smith (a friend of Oliver) recorded all of the voices for us – he’s an absolute star! We still have a ton of silly cowboy phrases to work into the game…er…dag’nabbit!<\/p>\n

* The web site itself was more or less a joint effort in PHP, CSS3 and HTML5 – using MySQL to store user preferences. We like to be “light on our feet” and change plans as often as it makes sense. The original vision was to stay “turn-based” and to use an orthographic perspective to allow you to see the entire bar room at a single glance. But on a whim one day in mid-December, we switched to an “over the shoulder” camera view and were blown away with how good it all looks like that – so now you can switch cameras to a variety of different views. If you grab some colored glasses, you can even go into the “Options” menu and turn on stereographic 3D rendering. The “turns” in the turn-based system were gradually reduced from 20 seconds to 5 seconds – and eventually to 1 second. It’s still really “turn based” under the hood – but it looks more or less interactive to the end user. \"\"<\/a>The control system is intended to help “casual” gamers – you can just click on something or someone in the saloon – tell your guy what to do – and then be free to do something else as he does it. It’s definitely not intended to be a “twitch response” kind of a thing. <\/p>\n

The software for rendering the cowboys and cowgals is really complex – and probably the most sophisticated piece of “tech” in the game. We only have three blender models – one for all of the cowboys, one for the cowgirls and another for the dancers. Because JavaScript is pretty slow, the whole business of switching clothing, texture and color is handled inside the GPU. The “Wardrobe department” lets players customize their characters. Animation uses “skeletal meshes” – Oliver uses blender to describe how the “bones” move and the position of each bone is stored for every 24th of a second of animation. Steve’s shader uses the bone structure to position the vertices of the “skin”. There are 30 bones for each character – including some special ones such as the “skirt bones” for the dancers and a “revolver bone” for the players. <\/p>\n

As relative newbies at web development, we faced a bunch of struggles and setbacks – not least because we were initially working with decidedly flaky daily builds of Firefox 4 and Chrome “Canary”. It’s been a continual problem to know which problems were of our own making – and which were “Browser-induced” – especially because we wanted the game to work in both Linux and Windows and with both Chrome and Firefox. Another incredibly tough issue was figuring out how Blender stores skeletal mesh animations – that cost close to a month of coding time! HTML5 audio has been another area of considerable difficulty. On the plus side, we found ourselves relying more and more on HTML5 and CSS3 – our original menu system was rendered in WebGL – but when we discovered downloadable fonts in CSS3, that whole business became a lot easier. The WebGL team at Khronos, Apple, Mozilla and Google were of tremendous help when we found bugs – they were often able to turn out bug fixes in less than a day! WebGL exceeded our expectations in most regards – we even managed to squeak in an optional dynamic shadow renderer. <\/p>\n

Work really kicked into high gear over the Xmas break – we both crunched 18 hour days with far too little sleep trying to get it all done by the Jan 11th cut-off. As with any game in production, ambitions begin sky-high, and you just KNOW you’ve created the most revolutionary game since Pong, but inevitably things get cut (though a surprising portion of ideas stayed into the BarFight game) and with a tight deadline, things get pushed over to the next deadline, and it’s near impossible for developers to be satisfied with their final product. That said – we are very proud of our game, and we will even get a chance to improve upon it, and polish it even more!
\n\"\"<\/a>
\n(A great feature of web based games – no set delivery date, and all people need to do to download a patch is to “Reload”) Our main focus at this point though, is to move on to making tons more games! You can find out much more about the development process at our Colophon page<\/a>.<\/p>\n

Gags, Easter Eggs, In Jokes<\/h2>\n

To the left of the screen is the “RowdyMeter” – if players can make enough mayhem, a bunch of dancing girls appear and dance the Can-Can for you! There are numerous references to our buddy, Tux the Penguin – and if you zoom into the beer bottles, you’ll see what the beer is made of! For those more engrossed into the graphics world might enjoy some of the paintings as well! (Not just the one above the bar either!) Several of the non-player characters have names that show up when you mouse-over them – check them out on Wikipedia – you may be surprised at what you find!<\/p>\n

What’s Next?<\/h2>\n

Well, catching up on sleep is high on the priority list still! We still have work to get BarFight utterly done – get the kinks out – learn lessons from the people who played it. Because it’s still going to become the “lobby” for our game site, we have to do some restructuring yet. Beyond that, there is always “The Next Game” – we’re thinking about sailing ships – pirates maybe. We’re also in discussion with a local rock band about doing a large scale sci-fi land-combat game based around their themes…in exchange for some really cool sound tracks and mutual publicity.<\/p>\n","protected":false},"excerpt":{"rendered":"

Bar Fight was a finalist in the Game On 2010 competition that showcased the use of Web GL. This is a guest post by Oliver Baker – Studying for a double-major at UT Dallas – and his father, Steve Baker … Continue reading<\/a><\/p>\n","protected":false},"author":1438,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20250,254,19292,19433],"tags":[19518,19520,19599],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts\/6056"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/users\/1438"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/comments?post=6056"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts\/6056\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/media?parent=6056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/categories?post=6056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/tags?post=6056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}